/*
 * v63-C (track A): the server-drawn public pages in the new design (회사 소개 9-1, 약관 · 정책 10-x) - their frame and their
 * own layout, after the tokens (foundation.css) and the parts (ui-parts.css). The same page layout as the site app's
 * frontend/customer/src/site/site.css for the same pieces (the frame, sections, the example PC screen): the server cannot
 * load the app's bundle. Colours the token file has not named yet are named here once (--sx-*), as in site.css.
 */
:root {
  --sx-example-ink: #1c1a18;
  --sx-example-text: #5e5952;
  --sx-window-bar: #f3efe9;
  --sx-window-dot: #e4ddd3;
  --sx-window-edge: #e6e0d8;
  --sx-window-shadow: 0 24px 48px -8px rgba(28, 26, 24, 0.14), 0 2px 8px rgba(28, 26, 24, 0.06);
}
body.sx-server { margin: 0; background: var(--color-bg-paper); }
.sx-page { min-height: 100vh; background: var(--color-bg-paper); color: var(--color-ink-900); font-family: var(--font-sans); letter-spacing: 0; word-break: keep-all; }
.sx-page *, .sx-page *::before, .sx-page *::after, .sx-menu-layer *, .sx-menu-layer *::before, .sx-menu-layer *::after { box-sizing: border-box; }
.sx-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sx-page a:not(.ui-footer *) { color: inherit; } /* integ P7-0: the 바닥글's links keep the part's own ink (ink-700), as on the site's pages - here they read ink-900 */
.sx-main { display: block; }
@media (max-width: 780px) { .sx-only-pc { display: none !important; } }
@media (min-width: 781px) { .sx-only-phone { display: none !important; } }

/* 사이트 머리 (sticky) */
.sx-top { position: sticky; top: 0; z-index: 40; }

/* a signed-in PC's 「나의 품」 window (1-15 PC): a native fold, no script */
.sx-top .ui-site-header-pc { position: relative; }
.sx-who-wrap { display: inline-flex; }
.sx-who-wrap > summary { list-style: none; cursor: pointer; }
.sx-who-wrap > summary::-webkit-details-marker { display: none; }
.sx-account { position: absolute; top: 80px; right: var(--grid-pc-margin); z-index: 2; width: 280px; padding: 8px 0; border-radius: var(--radius-card); background: var(--color-bg-paper); box-shadow: 0 14px 32px rgba(31, 29, 27, 0.1); overflow: hidden; }
.sx-logout { display: contents; }
.sx-logout .ui-setting-row { width: 100%; border: 0; background: var(--color-bg-paper); font: inherit; text-align: left; cursor: pointer; }

/* ☰ 메뉴: the sheet from below; the dimmed area is its sibling */
.sx-menu-layer { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; letter-spacing: 0; word-break: keep-all; font-family: var(--font-sans); }
.sx-menu-layer[hidden] { display: none; }
.sx-menu-layer__scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.sx-menu-layer .ui-sheet { position: relative; }
.sx-menu-layer .ui-sheet:focus { outline: none; }
.sx-menu .ui-sheet__body { gap: 0; padding: 0; }
.sx-menu .ui-sheet__actions { padding: 16px var(--phone-margin, 20px) 0; }
.sx-menu__nav { display: flex; flex-direction: column; }
.sx-menu__group { margin: 0; padding: 8px var(--phone-margin, 20px) 4px; font: 400 13px/20px var(--font-sans); color: var(--color-ink-500); }
/* v63-C.5 앱처럼 (APPLIKE_TILES_SPEC §2): the rows that run edge to edge on a phone (☰ 메뉴, 이용 안내's last link row) keep their
   icon and words on the page's side margin - 20 as before, 16 in the fixed frame - and their hairline from the words */
@media (max-width: 780px) {
  .sx-menu .ui-setting-row, .sx-gfaq .ui-setting-row { padding-left: var(--phone-margin, 20px); padding-right: var(--phone-margin, 20px); }
  .sx-menu .ui-setting-row__line, .sx-gfaq .ui-setting-row__line { left: calc(var(--phone-margin, 20px) + 36px); }
  .sx-menu .ui-setting-row--text .ui-setting-row__line, .sx-gfaq .ui-setting-row--text .ui-setting-row__line { left: var(--phone-margin, 20px); }
}
.sx-menu__rows + .sx-menu__group { padding-top: 16px; }
.sx-menu .ui-setting-row.is-last .ui-setting-row__line { display: block; }
html.pm-menu-open { overflow: hidden; }

/* 아래 막대 (phone): fixed at the bottom; the page ends above it */
.sx-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
.sx-dock .ui-bottom-bar { padding-bottom: calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); }
@media (max-width: 780px) { .sx-page:has(.sx-dock) { padding-bottom: calc(65px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); } } /* the bar: 8 + 48 + 8 and its 1 line */

/* sections (phone 64 · PC 120) */
.sx-sec { display: flex; flex-direction: column; gap: 24px; padding: 64px var(--phone-margin, 20px); }
.sx-sec__head { position: relative; }
.sx-page .ui-section-head__title:not(:has(+ .ui-section-head__lead)) { margin-bottom: 0; }

/* the example PC screen (새/예시 품 PC 화면 741:1319, 640 × 420) scaled to its column (site-pages.js) */
.sx-fit-640 { position: relative; width: 100%; aspect-ratio: 640 / 420; overflow: hidden; }
.sx-fit-640 > * { transform-origin: 0 0; }
.sx-ex-pc { position: relative; display: flex; flex-direction: column; width: 640px; height: 420px; border-radius: 14px; overflow: hidden; background: var(--color-bg-paper); box-shadow: var(--sx-window-shadow); }
.sx-ex-pc::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--sx-window-edge); border-radius: inherit; pointer-events: none; z-index: 2; }
.sx-ex-pc__bar { position: relative; display: flex; align-items: center; gap: 6px; flex: none; height: 34px; padding-left: 14px; background: var(--sx-window-bar); }
.sx-ex-pc__bar > i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--sx-window-dot); }
.sx-ex-pc__address { position: absolute; left: 210px; top: 6px; display: flex; align-items: center; justify-content: center; width: 220px; height: 22px; border-radius: 11px; background: var(--color-bg-paper); font: 500 10px/13px var(--font-number); color: var(--color-ink-400); }
.sx-ex-pc__view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sx-ex__page { display: flex; flex-direction: column; min-height: 0; padding: 16px 120px 0; }
.sx-ex__page.is-empty { flex: 1 1 auto; margin: 16px 120px 0; padding: 0; background: linear-gradient(var(--color-bg-chip) 0 150px, transparent 150px); }
.sx-ex__banner { display: block; flex: none; width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-button); background: var(--color-bg-chip); }
.sx-ex__body { display: flex; flex-direction: column; padding: 14px 0 0; }
.sx-ex__headline { margin: 0; font: 700 16px/19px var(--font-sans); letter-spacing: -0.02em; color: var(--sx-example-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ex__meta { margin: 7px 0 0; font: 500 10.5px/13px var(--font-sans); color: var(--color-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ex__photos { display: flex; gap: 8px; margin-top: 13px; }
.sx-ex__photo { display: block; flex: 1 1 0; min-width: 0; height: 72px; border-radius: 9px; object-fit: cover; background: var(--color-bg-chip); }
.sx-ex__count { margin-top: 6px; }
.sx-ex__label { margin: 7px 0 0; font: 700 11.5px/14px var(--font-sans); color: var(--sx-example-ink); }
.sx-ex__intro { display: flex; flex-direction: column; margin: 6px 0 0; font: 400 10.5px/16px var(--font-sans); color: var(--sx-example-text); }
.sx-ex__intro span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the handwriting line of a section (Nanum Pen, no box behind it) */
.sx-hand-row { display: flex; justify-content: flex-end; margin: 0; color: var(--color-ink-900); }
.sx-hand-row__words { display: block; white-space: nowrap; font: var(--text-hand-weight) var(--text-hand-size) / var(--text-hand-line) var(--font-hand); }

/* ===================================================================================================================
 * 회사 소개 /company (9-1)
 * =================================================================================================================== */
.sx-company-hero { display: flex; flex-direction: column; padding: 28px var(--phone-margin, 20px) 48px; background: var(--color-bg-beige); }
.sx-company-hero__title { margin: 8px 0 0; }
.sx-company-hero__lead { margin: 14px 0 0; }
.sx-company-hero__side { display: flex; flex-direction: column; gap: 8px; }
.sx-company-hero .sx-hand-row { height: 50px; margin-bottom: -8px; padding: 16px 0 8px; }
.sx-company-hero__caption { margin: 0; text-align: center; }
.sx-numbered { gap: 16px; padding: 64px var(--phone-margin, 20px) 48px; background: var(--color-bg-paper); }
.sx-numbered.is-cream { background: var(--color-bg-cream); }
.sx-numbered .sx-sec__head, .sx-company-facts .sx-sec__head { padding-bottom: 36px; } /* 9-1 keeps the head's empty lead line */
.sx-numbered.is-cream .sx-sec__head { padding-bottom: 0; }
.sx-numbered__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sx-numbered__item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-line-hair); }
.sx-numbered__no { flex: none; font: 700 28px/32px var(--font-number); letter-spacing: -0.02em; color: var(--color-orange-700); }
.sx-numbered__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx-numbered__title { font: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-line) var(--font-sans); letter-spacing: var(--text-subtitle-track); color: var(--color-ink-900); }
.sx-numbered__line { font: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-line) var(--font-sans); color: var(--color-ink-500); }
.sx-company-facts { gap: 16px; padding: 64px 0 24px; background: var(--color-bg-paper); }
.sx-company-facts .sx-sec__head { padding-left: var(--phone-margin, 20px); padding-right: var(--phone-margin, 20px); }
.sx-company-facts__rows { display: flex; flex-direction: column; }
.sx-company-facts__rows .ui-value-row__value a { color: inherit; text-decoration: none; }
/* A value the row cannot hold on one line (a long address, larger system text) wraps between its words and is never cut or
   pushed over its name; the name keeps its words whole (v63-C QA C-QA-P-3 follow-up). A two-line value sits at the
   row's right with its lines starting together, as 9-1 · 9-2 draw the address (「…23,」 / 「웰빙타워 203호」). Same on /company/business. */
.sx-company-facts__rows .ui-value-row__name, .sx-biz__facts .ui-value-row__name { flex-shrink: 1000; min-width: min-content; word-break: keep-all; }
.sx-company-facts__rows .ui-value-row__value, .sx-biz__facts .ui-value-row__value { flex: 0 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; text-align: left; }
.sx-company-facts__lookup { margin: 0; padding: 8px 20px 0; font: 500 15px/22px var(--font-sans); }
.sx-company-facts__lookup a { color: var(--color-orange-700); text-decoration: none; }
.sx-company-facts__lookup a + a { margin-left: 0.86em; } /* A2 live check 4: no 「·」 after 「사업자정보 확인 ›」 - the second link where 「 · 」 put it */
.sx-company-more { display: flex; flex-direction: column; padding: 24px 0; background: var(--color-bg-beige); }
.sx-company-more .ui-setting-row { background: var(--color-bg-paper); }
/* v63-C.1 (오와 열, the site app's site.css rules for the same bands): one top for both columns, the calmer band rhythm */
@media (min-width: 781px) {
  .sx-sec { padding: var(--rhythm-section) var(--grid-pc-margin); }
  /* v63-C.2 (owner 「추천대로」): one background on a PC - the cream band white; two white bands in a row parted by ONE hairline
     across the content (a 1 px line, never a box), as the site app's pages (site.css); the beige 더 알아보기 band stays */
  .sx-numbered.is-cream { background-color: var(--color-bg-paper); }
  .sx-main > :is(.sx-sec, .sx-guide-step):not(.sx-send, .sx-price, .sx-ask) + :is(.sx-sec, .sx-guide-step):not(.sx-send, .sx-price, .sx-ask) {
    background-image: linear-gradient(var(--color-line-hair), var(--color-line-hair));
    background-repeat: no-repeat; background-position: top center; background-size: calc(100% - 2 * var(--grid-pc-margin)) 1px;
  }
  /* v63-C.2 (choice 나): 6 | 6, the second column on column 7 as on the site app's pages */
  .sx-company-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding: 64px var(--grid-pc-margin); }
  .sx-company-hero__lead { margin-top: 16px; }
  .sx-company-hero__side { gap: 12px; }
  .sx-company-hero .sx-hand-row { height: 32px; margin: 0; padding: 0; }
  .sx-numbered, .sx-company-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding: var(--rhythm-section) var(--grid-pc-margin); }
  .sx-numbered .sx-sec__head, .sx-company-facts .sx-sec__head { padding: 0; }
  .sx-numbered__list { gap: 0; }
  .sx-numbered__no { min-width: 2ch; font-variant-numeric: tabular-nums; } /* 28 / 32 as the phone's (was 36); 「01」 「02」 「03」 one width, so the titles start on one x */
  .sx-numbered__line { font: var(--text-body-weight) var(--text-body-size) / var(--text-body-line) var(--font-sans); }
  .sx-company-facts__lookup { grid-column: 2; padding: 12px 0 0; font-size: 16px; line-height: 24px; }
  /* the facts' names and values on their column's two edges (they stood 20 in, on the white band), the first on the head's top */
  .sx-company-facts__rows .ui-value-row { padding-left: 0; padding-right: 0; }
  .sx-company-facts__rows .ui-value-row:first-child { min-height: 0; padding-top: 0; }
  /* v63-C.3 (owner 「작은 4가지」): the address on one line (detail.html drops the phone's break); each of its two parts is kept
     whole, so a row too narrow for both breaks at the 「, 」 between them, never inside a word - its two lines then end on the
     column's right edge, as every other value does */
  .sx-company-facts__rows .ui-value-row__value > span { display: inline-block; }
  .sx-company-facts__rows .ui-value-row__value:has(> span) { text-align: right; }
  .sx-company-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 48px var(--grid-pc-margin); }
  .sx-company-more__cell { padding: 4px 16px 4px 0; border-radius: var(--radius-card); background: var(--color-bg-paper); }
  .sx-company-more .ui-setting-row .ui-setting-row__line { display: none; }
}

/* ===================================================================================================================
 * 약관 · 정책 /terms · /privacy · /refund · /marketing (10-1 … 10-3, 10-1-S2 맨 아래, 10-4-S 지난 판) - the document only (B63)
 * =================================================================================================================== */
.sx-legal-doc { padding: 0 var(--phone-margin, 20px) 24px; background: var(--color-bg-paper); }
.sx-legal-head { display: flex; flex-direction: column; gap: 6px; padding: 24px 0 16px; }
.sx-legal-head__title { margin: 0; font: var(--text-headline-weight) var(--text-headline-size) / var(--text-headline-line) var(--font-sans); letter-spacing: var(--text-headline-track); color: var(--color-ink-900); }
.sx-legal-head__meta { margin: 0; font: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-line) var(--font-sans); color: var(--color-ink-500); }
.sx-legal-head__old { margin-bottom: 6px; }
.sx-legal__band { font-weight: 700; }
.sx-legal__band .ui-info-line__text { color: var(--color-orange-700); }
.sx-legal__band-link { flex: none; margin-left: auto; font: 500 14px/20px var(--font-sans); color: var(--color-orange-700); text-decoration: underline; text-underline-offset: 3px; }
.sx-legal-body { display: flex; flex-direction: column; }
.sx-legal-sec { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid var(--color-line-hair); scroll-margin-top: 72px; }
.sx-legal-sec__head { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sx-legal-sec__no { font: 700 13px/20px var(--font-sans); color: var(--color-orange-700); }
.sx-legal-sec__name { font: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-line) var(--font-sans); letter-spacing: var(--text-subtitle-track); color: var(--color-ink-900); }
.sx-legal-item { display: flex; gap: 6px; }
.sx-legal-item__mark { flex: none; min-width: 20px; font: 400 15px/24px var(--font-sans); color: var(--color-ink-500); }
.sx-legal-item__text { min-width: 0; }
/* A3+ N24 (W6 F1): app/web.py legal_keep's runs (「'서비스')의」, 「182)에」) stay whole here too - the old company-legal page's rule
   (customer-surfaces.css) never reached this layout, so a phone line could start with the particle */
.sx-legal-body .legal-keep { display: inline-block; max-width: 100%; }
.sx-legal-item__text p, .sx-legal-p { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--color-ink-700); }
.sx-legal-item.lv-2 { padding-left: 26px; }
.sx-legal-item.lv-3 { padding-left: 52px; }
.sx-legal-end { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.sx-legal-end__top { display: flex; justify-content: center; margin: 0; padding: 8px 0; }
.sx-legal-end__top a { font: 500 15px/22px var(--font-sans); color: var(--color-orange-700); text-decoration: none; }
.sx-legal-end__label { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--color-ink-500); }
.sx-legal-end__rows { display: flex; flex-direction: column; }
.sx-legal-end__rows .ui-setting-row { background: var(--color-bg-paper); }
.sx-legal-none { padding: 16px 0 40px; }
.sx-legal-admin { margin-top: 24px; font: 400 13px/20px var(--font-sans); color: var(--color-ink-500); }
.sx-sheet-layer { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; font-family: var(--font-sans); letter-spacing: 0; word-break: keep-all; }
.sx-sheet-layer[hidden] { display: none; }
.sx-sheet-layer *, .sx-sheet-layer *::before, .sx-sheet-layer *::after { box-sizing: border-box; }
.sx-sheet-layer .ui-sheet { position: relative; max-height: min(600px, calc(100dvh - 120px)); }
.sx-sheet-layer .ui-sheet:focus { outline: none; }
@media (min-width: 781px) {
  .sx-legal-doc { padding: 64px var(--grid-pc-margin) 96px; }
  /* the document as one 792 column in the middle (at 1440: the grid's columns 3-10) - no 목차 beside it (B63) */
  .sx-legal-main { max-width: 792px; margin: 0 auto; }
  .sx-legal-head { gap: 8px; padding: 0 0 20px; }
  .sx-legal-main > .sx-legal__band, .sx-legal-head__old .sx-legal__band { min-height: 56px; margin: 0; width: auto; } /* v63-C.1: the band on the document's edges (8 in) */
  .sx-legal-main > .sx-legal__band { margin-bottom: 16px; }
  .sx-legal-sec__no { font-size: 14px; }
  .sx-legal-item__mark, .sx-legal-item__text p, .sx-legal-p { font-size: 16px; line-height: 26px; }
  .sx-legal-end { margin-top: 24px; }
  /* v63-C.1 (오와 열): 다른 문서's rows start on the document's edge, under their label (their white rows on the white page
     showed only their words, 20 in); the hairlines from the words, as before */
  .sx-legal-end__rows .ui-setting-row { padding-left: 0; padding-right: 0; }
  .sx-legal-end__rows .ui-setting-row__line { left: 36px; }
}

/* ---------- 사업자 정보 /company/business (56-A 9-2): 앱 막대 on a phone, a 792 column on the PC grid ---------- */
body.sx-server:has(.sx-biz) { background: var(--color-bg-beige); }
.sx-biz { min-height: 100vh; background: var(--color-bg-beige); }
.sx-biz .sx-top .ui-app-bar { position: relative; }
/* 9-2 draws the 앱 막대's 「오른쪽 = 글자」 kind with no words: the right end keeps 24 (the title's box 48 … 362) */
.sx-biz .ui-app-bar__right.is-empty { width: 24px; min-width: 24px; }
.sx-biz__column { display: flex; flex-direction: column; padding: 24px var(--phone-margin, 20px) 40px; }
.sx-biz__title { margin: 0; font: 700 24px/32px var(--font-sans); letter-spacing: -0.01em; color: var(--color-ink-900); }
.sx-biz__label { margin: 0 0 8px; padding: 0 4px; font: 400 13px/20px var(--font-sans); color: var(--color-ink-500); }
.sx-biz__note { margin-top: 24px; }
.sx-biz__group { display: flex; flex-direction: column; border-radius: 14px; background: var(--color-bg-paper); overflow: hidden; }
.sx-biz__facts .ui-value-row { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.sx-biz__facts .ui-value-row__value a { color: inherit; text-decoration: none; }
.sx-biz__group .ui-setting-row { text-decoration: none; }
@media (min-width: 781px) {
  .sx-biz__column { width: min(792px, calc(100% - 2 * var(--grid-pc-margin))); margin: 0 auto; padding: 64px 0 96px; }
  .sx-biz__title { margin-bottom: 12px; }
  .sx-biz__label { padding: 0; font-size: 14px; line-height: 22px; }
  .sx-biz__note { margin: 12px 0; }
  .sx-biz__group { border-radius: 16px; }
  .sx-biz__facts { padding: 8px; }
}

/* ---------- 약관 · 정책 /policies (56-A 10-4): the 사업자 정보 screen's groups, three across on a PC ---------- */
.sx-policies__groups { display: flex; flex-direction: column; gap: 24px; }
.sx-policies__col { display: flex; flex-direction: column; min-width: 0; }
.sx-policies__label { font-weight: 400; }
.sx-policies__note { margin: 16px 0 0; }
.sx-policies__title { margin: 0 0 16px; font: var(--text-headline-weight) var(--text-headline-size) / var(--text-headline-line) var(--font-sans); letter-spacing: -0.02em; color: var(--color-ink-900); } /* v63-C.1: the PC headline step (was 44 / 56) */
@media (min-width: 781px) {
  .sx-policies .sx-biz__column { width: min(1200px, calc(100% - 2 * var(--grid-pc-margin))); }
  .sx-policies__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .sx-policies__note { margin-top: 16px; }
}

/* v63-C (owner 10-23): the seller's facts as a normal company footer - small grey words in two or three short lines, a thin
   rule between two facts and never at the start of a line (partials/company_lines.html; the site's own copy:
   frontend/customer/src/components/company-lines.css) */
.co-lines { overflow: hidden; margin-left: -4px; padding: 1px 0 1px 4px; font: 400 12px/18px var(--font-sans, inherit); letter-spacing: 0; color: var(--color-ink-500, #6a655f); word-break: keep-all; overflow-wrap: anywhere; }
.co-line { display: flex; flex-wrap: wrap; row-gap: 2px; margin: 0 0 0 -17px; padding: 0; }
.co-line + .co-line { margin-top: 2px; }
.co-item { position: relative; min-width: 0; padding-left: 17px; }
.co-item::before { content: ""; position: absolute; left: 8px; top: 4px; width: 1px; height: 10px; background: var(--color-line-border, #ddd6cd); }
.co-item a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.co-item a::after { content: ""; position: absolute; inset: -14px -4px; }
.co-item a:hover { color: var(--color-ink-700, #3f3b37); text-decoration: underline; text-underline-offset: 2px; }
.co-item a:focus-visible { outline: 2px solid var(--color-orange-500, #f4600f); outline-offset: 1px; border-radius: 2px; }
.sx-footer .ui-footer--pc .co-lines { flex: 1 1 auto; min-width: 0; }

/* ===================================================================================================================
 * v63-C QA round 2 (2026-10-25, C-QA2-P-20 / -21): a finger's 44 on these pages too, the look unchanged
 * - the footer's links: the part's own now (ui-parts.css, written from frontend/shared/ui/parts/parts.css 「새/바닥글」 - rows 24
 *   apart on a phone, the PC column 22, each link 44), the same values the site app reads;
 * - the head (the logo, the PC head's places and 로그인 / 나의 품): the site app's rules for the same parts, word for word as
 *   frontend/customer/src/site/site.css (device-5) - tests/frontend/v63c_qa2_site_taps.test.mjs fails when they differ;
 * - these pages' own small links: an invisible area over and under (never sideways) of exactly 44 around the link's middle
 *   (50% - 22 over and under: 44 whatever the text size, so two value rows one under the other meet without overlapping).
 * =================================================================================================================== */
.ui-logo, .ui-site-header-pc__menu a, .ui-site-header-pc__who { position: relative; }
.ui-logo::after, .ui-site-header-pc__menu a::after, .ui-site-header-pc__who::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
/* 회사 소개 「사업자정보 확인 ›」 · 「회사 홈페이지 ›」 (15 / 22, a PC 16 / 24) */
.sx-company-facts__lookup a { position: relative; display: inline-block; }
.sx-company-facts__lookup a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); }
/* 회사 소개 · 사업자 정보: the 이메일 / 전화 value (15 / 22) - its row's 44, so two link rows one under the other meet exactly */
.sx-company-facts__rows .ui-value-row__value a, .sx-biz__facts .ui-value-row__value a { position: relative; display: inline-block; }
.sx-company-facts__rows .ui-value-row__value a::after, .sx-biz__facts .ui-value-row__value a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); }
/* 약관 「미리보기」 (14 / 20 in the 안내 띠's 12 of padding) and 「↑ 맨 위로」 (15 / 22) */
.sx-legal__band-link { position: relative; }
.sx-legal__band-link::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); }
/* v63-C.5 앱처럼 (APPLIKE_TILES_SPEC §11): in the fixed phone frame the whole 「… 부터 적용돼요」 band opens its link (look unchanged) */
:root[data-phone-frame] .sx-legal__band { position: relative; }
:root[data-phone-frame] .sx-legal__band-link { position: static; }
:root[data-phone-frame] .sx-legal__band-link::after { top: 0; bottom: 0; }
.sx-legal-end__top a { position: relative; display: inline-block; }
.sx-legal-end__top a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); }
/* the sheets whose buttons end on the home indicator (메뉴 1-10: 34 under the buttons) keep the frame's 34 where a phone
   browser reports no inset (Android), as the site app's own sheet does */
@media (max-width: 780px) { .sx-menu-layer .ui-sheet.sx-menu { padding-bottom: max(34px, var(--safe-bottom, env(safe-area-inset-bottom, 0px))); } }

/* N86 광택 · 단추 입체감 on the server-drawn site pages (약관 · 개인정보 · 환불 · 마케팅 동의 · 정책 모음 - app/routers/legal.py): the
   site block's (frontend/customer/src/site/site.css, N86) 주 단추 coat and depth, raised 보조 단추, the press, the PC menu's capsule (N87 A).
   No moving light here - nothing passes over a legal text. Shadows, gradients and transform only: nothing is laid out. */
.sx-page .ui-button--primary:not(:disabled, .is-disabled, .is-busy, :active, .is-pressed) {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0) 30%), var(--gradient-orange);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), inset 0 -1px 0 rgba(143, 50, 7, .34), 0 2px 3px rgba(158, 51, 5, .26),
    0 12px 22px -10px rgba(204, 74, 11, .62);
}
.sx-page .ui-button--primary:focus-visible, .sx-page .ui-button--primary.is-focus {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 2px 3px rgba(158, 51, 5, .26), var(--focus-ring);
}
.sx-page .ui-button--secondary:not(:disabled, .is-disabled, :focus-visible) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(238, 226, 212, .5) 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(90, 50, 20, .09), 0 1px 2px rgba(28, 26, 24, .07), 0 7px 16px -7px rgba(90, 50, 20, .34);
}
.sx-page .ui-button { transition: transform .2s cubic-bezier(.34, 1.45, .64, 1), box-shadow .2s ease; }
.sx-page .ui-button:active:not(:disabled, .is-disabled, .is-busy) { transform: translateY(1.5px) scale(.97); transition-duration: .12s; transition-timing-function: ease-out; }
.sx-page .ui-button--secondary:active:not(:disabled, .is-disabled, :focus-visible) { box-shadow: inset 0 1px 3px rgba(90, 50, 20, .14), 0 1px 1px rgba(28, 26, 24, .05); }
.sx-page .ui-button--primary:active:not(:disabled, .is-disabled, :focus-visible) { box-shadow: var(--shadow-gloss-pressed); }
/* PC 카테고리 (N87 A · 캡슐 바, owner 11-04 「카테고리도좀디자인하라니깐」): PC only (the phone is untouched).
   위 메뉴 - the five words in one soft coated capsule; the current page a raised glossy white pill with orange words and a soft light passing over it; a calm
   hover pill. (The doubled classes outweigh the head's own gap rules - a signed-in head keeps the same capsule.) */
@media (width >= 781px) {
  .sx-page .ui-site-header-pc.ui-site-header-pc > .ui-site-header-pc__menu.ui-site-header-pc__menu { gap: 4px; padding: 5px; border-radius: 999px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #fbf8f4 0%, #f1ebe3 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(90, 60, 30, .07), 0 8px 18px -12px rgba(90, 50, 20, .35); }
  .sx-page .ui-site-header-pc__menu a { padding: 7px 16px; border-radius: 999px; color: var(--color-ink-700); transition: background-color .2s ease, box-shadow .2s ease; }
  .sx-page .ui-site-header-pc__menu a[aria-current="page"] { color: var(--color-orange-700);
    background-image: linear-gradient(105deg, transparent 44%, rgba(255, 214, 180, .55) 50%, transparent 56%), linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffffff 0%, #fbf5ee 100%);
    background-size: 300% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0, 0 0;
    animation: sx-gloss-button var(--sx-gloss-cycle) var(--sx-gloss-ease) calc(var(--sx-gloss-delay, 0s) + var(--sx-gloss-offset, .9s)) infinite;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 26, 24, .08), 0 6px 14px -7px rgba(90, 50, 20, .38), 0 0 0 1px rgba(244, 96, 15, .18); }
}
@media (width >= 781px) and (hover: hover) {
  .sx-page .ui-site-header-pc__menu a:not([aria-current="page"]):hover { background: rgba(255, 255, 255, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-page .ui-site-header-pc__menu a[aria-current="page"], .sx-page .is-chosen { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-page .ui-button { transition: box-shadow .12s ease; }
  .sx-page .ui-button:active { transform: none; }
  .sx-page .ui-site-header-pc__menu a { transition: none; }
}

/* 11-1 약관 · 정책 (사장님 11-08 02시 「약관 더작게하고」): on a phone the documents one step smaller and closer - 본문 13 / 20 (글자 0.87,
   폰 밀도의 본문 12 한계 위), 조 이름 15, 제목 19, 날짜 줄 12, 조 사이 16. A PC keeps its sizes (the 781+ block above). */
@media (max-width: 780px) {
  .sx-legal-head { gap: 4px; padding: 16px 0 12px; }
  .sx-legal-head__title { font-size: 19px; line-height: 26px; }
  .sx-legal-head__meta { font-size: 12px; line-height: 18px; }
  .sx-legal-sec { gap: 8px; padding: 16px 0; }
  .sx-legal-sec__head { gap: 6px; }
  .sx-legal-sec__no { font-size: 12px; line-height: 18px; }
  .sx-legal-sec__name { font-size: 15px; line-height: 22px; }
  .sx-legal-item__mark { min-width: 18px; font-size: 13px; line-height: 20px; }
  .sx-legal-item__text p, .sx-legal-p { font-size: 13px; line-height: 20px; }
  .sx-legal-item.lv-2 { padding-left: 22px; }
  .sx-legal-item.lv-3 { padding-left: 44px; }
  .sx-legal__band-link { font-size: 13px; line-height: 18px; }
  .sx-legal-end__top a { font-size: 13px; line-height: 20px; }
  .sx-legal-end__label, .sx-legal-admin { font-size: 12px; line-height: 18px; }
}