/* Consumer information/support pages only. Policy text and form owners stay intact. */
body.consumer-document { background: var(--panel); color: var(--text); }
/* TOP5-2: the wrap is exactly the reading column (760) + gutters, so the logo, the nav, the text and the footer
   share one left and one right edge. It was 960 wide with the column centred inside, which left the text 68px
   right of the logo. */
.consumer-document .wrap { max-width: 824px; padding-inline: 32px; }
.consumer-document .topbar { height: 88px; border-color: var(--line); gap: 20px; }
.consumer-document .topbar .lotbi-official-brand-logo { width: 116px; height: auto; }
.consumer-document .topbar nav { gap: 20px; font-size: 14px; font-weight: 500; }
.consumer-document :is(.section, .about-hero) { padding: 56px 0; }
.consumer-document :is(.section, .about-hero) > h1 { margin: 0 0 24px; font-size: clamp(28px, 4vw, 42px); font-weight: 600; line-height: 1.3; letter-spacing: -.045em; word-break: keep-all; }
.consumer-document .kicker { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.consumer-document .kicker::before { content: none; }
/* COMMON-UI-POLISH-02 (QA 02 E2) — every page carried an English eyebrow (TERMS, PRIVACY,
   LOTBI PHILOSOPHY…) above its Korean h1. Hidden here rather than deleted page by page:
   privacy.html and terms.html bytes are consent evidence and must not move. */
.consumer-document .kicker { display: none; }
.consumer-document .lead-small { max-width: 720px; font-size: 16px; line-height: 1.8; }
.consumer-document :is(.section h2, .about-section h2) { margin-top: 40px; margin-bottom: 12px; font-size: 21px; font-weight: 600; line-height: 1.5; letter-spacing: -.03em; scroll-margin-top: 24px; }
.consumer-document :is(.section h3, .about-principle h3) { font-size: 16px; font-weight: 600; line-height: 1.5; }
.consumer-document :is(.section p, .about-section > p, .about-core-message p) { font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.consumer-document .section :is(ul, ol) { padding-left: 24px; font-size: 15px; }
.consumer-document .section li { margin-block: 8px; }
.consumer-document :is(.support-card, .notice-card) { padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.consumer-document .contact-grid { gap: 32px; }
.consumer-document .contact-grid h2, .consumer-document .notice-card h2 { margin-top: 0; }
.consumer-document .primary-link { min-height: 44px; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; background: var(--text); color: var(--panel) !important; overflow-wrap: anywhere; }
.consumer-document .primary-link:hover { background: var(--accent); }
.consumer-document :is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.consumer-document .lotbi-footer { padding: 28px 0 36px; font-size: 12px; }
.consumer-document .footer-links { gap: 8px 18px; font-weight: 500; }
/* DOCUMENT-FOOTER-TAP-38 (애플 방 아이폰 15 앱 실측 10-27, /connected-services: footer links 36px tall, 「문의」 23px wide):
   every link on an information page is at least a 44px square to press. */
.consumer-document .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.consumer-document :is(.company-legal, .footer-service) { color: var(--muted); font-size: 12px; }
.consumer-document dl div { grid-template-columns: 140px minmax(0, 1fr); padding-block: 14px; }
.consumer-document dd { font-weight: 500; overflow-wrap: anywhere; }
.consumer-document .about-core-message { padding: 24px 0 0; background: none !important; }
.consumer-document .about-core-message strong { font-size: 24px; font-weight: 600; }
.consumer-document .about-section { padding: 12px 0 40px; border-color: var(--line); }
.consumer-document .about-principle { padding-block: 24px; gap: 24px; background: transparent !important; }
.consumer-document .about-quote { padding-left: 18px; border-left: 2px solid var(--line); font-size: 18px; font-weight: 500; }
/* 의견 보내기 (feedback.html) owns its look in feedback.css — ACCOUNT-SETTINGS-TIDY-03. */
.consumer-document-toc { margin: 28px 0 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.consumer-document-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none; color: var(--text); font-size: 16px; font-weight: 600; }
.consumer-document-toc summary::-webkit-details-marker { display: none; }
.consumer-document-toc summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.consumer-document-toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.consumer-document-toc nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 6px 18px 12px; border-top: 1px solid var(--line); }
.consumer-document .consumer-document-toc a { display: flex; align-items: center; min-height: 48px; color: var(--text); text-decoration: none; font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }
.consumer-document .consumer-document-toc a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .consumer-document .wrap { padding-inline: 20px; }
  .consumer-document .topbar { height: 76px; }
  .consumer-document .topbar nav { gap: 12px; font-size: 13px; }
  .consumer-document .topbar .lotbi-official-brand-logo { width: 92px; }
  .consumer-document :is(.section, .about-hero) { padding: 36px 0; }
  .consumer-document .contact-grid, .consumer-document-toc nav { grid-template-columns: 1fr; }
  .consumer-document .contact-grid { gap: 4px; }
  .consumer-document dl div { grid-template-columns: 1fr; gap: 4px; }
  .consumer-document .legal-table-scroll { max-width: 100%; }
}
.consumer-document .topbar nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
/* ACCOUNT-SETTINGS-TIDY-03 — "‹ 홈" at the top left of every information page, always to "/"
   (built by site-document-navigation.js). It takes the header's home role, so the nav's own
   홈 link steps aside while it is there. 44px touch target. */
.consumer-document .topbar .consumer-document-home { display: inline-flex; align-items: center; gap: 2px; flex: none; min-width: 44px; min-height: 44px; margin: 0 -8px 0 -10px; padding: 0 12px 0 6px; border-radius: 12px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; }
.consumer-document .topbar .consumer-document-home svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.consumer-document .topbar .consumer-document-home:hover { background: var(--soft); }
.consumer-document .topbar .consumer-document-home + .lotbi-official-brand { margin-right: auto; }
.consumer-document .topbar:has(> .consumer-document-home) nav a:is([href="index.html"], [href="/"]) { display: none; }
/* The same type scale is used for support, policies and their completion view.
   Contract/legal body text is intentionally untouched. */
/* WALK-COMMON-01 #15: the same letters as the home screen and the account pages (데이터 출처 looked different). */
.consumer-document { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', Arial, sans-serif; }
.consumer-document :is(.section, .about-section) { max-width: 760px; margin-inline: auto; }
.consumer-document .lead-small { color: var(--text); }
/* TOP5-2 (QA N5): lines break at spaces, not inside a Korean word ("소비자/가", "관문입/니다"). Text styling only —
   no document wording or markup is touched. Very long strings (addresses, URLs) still wrap through overflow-wrap. */
.consumer-document :is(h1, h2, h3, p, li, dt, dd, summary, blockquote, strong, .lead-small, .about-quote) { word-break: keep-all; }
.consumer-document :is(h1, h2, .about-core-message strong) { text-wrap: balance; }
/* Keep the seven-column notice inside the same reading column as its prose.
   Wide table contents may scroll inside it; the page itself never breaks out.
   The existing mobile labelled-row layout in styles.css remains unchanged. */
.consumer-document .legal-table-scroll { width: 100%; max-width: 100%; margin: 18px 0 26px; transform: none; border-radius: 8px; }
/* LOTBI-INFO-PAGES-04 (owner-confirmed 계정 설정·LOTBI함 design 04 #34) — 이용약관 · 개인정보처리방침 · 서비스 소개
   (site-document-navigation.js adds body.consumer-info-page). A white card on the page colour, a header only
   (logo left, "← 홈" right; on a phone "‹" and the page name centred) and the document below it, untouched. */
body.consumer-info-page { background: #EEF1F6; }
html[data-site-theme-bootstrap="dark"] body.consumer-info-page { background: #181818; }
@media (prefers-color-scheme: dark) {
  html[data-site-theme-bootstrap="system"] body.consumer-info-page,
  html:not([data-site-theme-bootstrap]) body.consumer-info-page { background: #181818; }
}
.consumer-info-page .wrap { max-width: none; margin: 20px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.consumer-info-page .wrap > :is(.section, .about-hero, .about-section, .lotbi-footer, .about-core-message, .about-principle) { box-sizing: border-box; width: 100%; max-width: 824px; margin-inline: auto; padding-inline: 32px; }
.consumer-info-page .topbar { box-sizing: border-box; height: 88px; padding-inline: 28px; gap: 12px; border-bottom: 1px solid var(--line); }
.consumer-info-page .topbar > nav { display: none; }
.consumer-info-page .topbar .lotbi-official-brand-logo { width: 78px; }
.consumer-info-page .topbar .consumer-document-home { order: 3; margin: 0 -8px 0 auto; padding: 0 12px; gap: 8px; font-size: 16px; font-weight: 500; }
.consumer-info-page .topbar .consumer-document-home .consumer-info-arrow { display: block; width: 22px; height: 22px; }
.consumer-info-page .topbar .consumer-document-home .consumer-info-chevron { display: none; }
.consumer-info-page .topbar .consumer-info-title { display: none; }
@media (max-width: 600px) {
  body.consumer-info-page, html[data-site-theme-bootstrap="dark"] body.consumer-info-page { background: var(--panel); }
  .consumer-info-page .wrap { margin: 0; border: 0; border-radius: 0; }
  .consumer-info-page .wrap > :is(.section, .about-hero, .about-section, .lotbi-footer, .about-core-message, .about-principle) { padding-inline: 20px; }
  .consumer-info-page .topbar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; height: 56px; padding-inline: 4px; gap: 0; }
  .consumer-info-page .topbar > .brand { display: none; }
  .consumer-info-page .topbar .consumer-document-home { grid-column: 1; grid-row: 1; justify-self: start; order: 0; width: 44px; margin: 0; padding: 0; justify-content: center; }
  .consumer-info-page .topbar .consumer-document-home .consumer-info-arrow { display: none; }
  .consumer-info-page .topbar .consumer-document-home .consumer-info-chevron { display: block; width: 26px; height: 26px; }
  .consumer-info-page .topbar .consumer-document-home .consumer-document-home-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consumer-info-page .topbar .consumer-info-title { display: block; grid-column: 2; grid-row: 1; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 17px; font-weight: 600; }
}