/* laniaura — 랜딩·가격 페이지 컴포넌트. base.css · parts.css 다음에 읽힌다. */

/* ═══ 각인 열 + 헤어라인 사다리 ═══════════════════════════════════════════
   좌측 세로 눈금 레일을 제거하면서 **축을 90도 돌린** 대체물이다.
   세로로 연속하던 눈금이 섹션마다 끊어지는 가로 눈금선으로 반복되고,
   스크롤하면 눈금이 아래에서 위로 지나간다 — 레일의 운동감이 보존된다.

   각인 2행 중 아래 줄은 장식이 아니라 **그 섹션이 가리키는 실제 값**이다.
   가리킬 값이 없으면 비운다(지배 규칙). */
.sec { border-top: 1px solid var(--hair); padding: var(--s-7) 0 var(--s-8); }
.sec-lead { padding: var(--s-9) 0; border-top: 0; }
.sec > .wrap { display: grid; grid-template-columns: 112px 32px minmax(0, 1fr); align-items: start; }
.sec > .wrap > * { max-width: none; margin-left: 0; }

.mark-col { grid-column: 1; }
.mark-col .no { font-family: var(--f-data); font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--ink-dim); }
.mark-col .val { font-family: var(--f-data); font-size: 12px; letter-spacing: .06em; color: rgba(22,24,26,.36); margin-top: var(--s-1); }
.sec-body { grid-column: 3; min-width: 0; }
.sec-body > * + * { margin-top: var(--s-5); }
.sec-body h2 { font-size: 24px; line-height: 1.33; letter-spacing: -.01em; }
.sec-body > .text { max-width: var(--w-text); }

@media (max-width: 899px) {
    .sec > .wrap { grid-template-columns: 1fr; }
    .mark-col { display: flex; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-4); }
    .mark-col .val { margin-top: 0; }
    .sec-body { grid-column: 1; }
}

/* ── 표제 ─────────────────────────────────────────────────────────────── */
/* 태그라인이 페이지에서 유일한 대형 자소다. 다른 어떤 문장도 24px 를 넘지 않는다.
   그래야 이 한 줄이 장식이 아니라 페이지의 축이 된다. */
.tagline { font-size: 56px; line-height: 1.36; letter-spacing: -.02em; max-width: 20ch; }
@media (max-width: 1199px) { .tagline { font-size: 44px; } }
@media (max-width: 767px)  { .tagline { font-size: 32px; line-height: 1.4; } }

/* 정의 목록 — 슬로건을 남의 말이 아니라 자기 제약으로 번역한다.
   자랑이 아니라 규칙이므로 실적 0에서도 성립한다. */
.defs { border-top: 1px solid var(--hair); }
.defs > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5);
              padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); }
.defs dt { font-family: var(--f-data); font-size: 13px; letter-spacing: .04em; color: var(--ink-dim); }
.defs dd { font-size: 16px; line-height: 1.75; }
@media (max-width: 599px) {
    .defs > div { grid-template-columns: 1fr; gap: var(--s-2); }
    .defs dd { font-size: 15px; }
}

/* 제조자 표시줄 — 기기 뒷면의 규격 각인. 사진·연혁·후기가 0일 때 실체를 세우는
   유일한 재료이고, 제3자가 국세청에서 직접 조회할 수 있는 검증 가능한 값이다. */
.plate {
    border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    padding: var(--s-3) 0;
    font-family: var(--f-data); font-size: 13px; line-height: 1.85; color: var(--ink-dim);
}
.plate a { color: var(--ink-dim); }

/* ── 대장 표 (랜딩 본체) ───────────────────────────────────────────────── */
.roster { width: 100%; border-collapse: collapse; table-layout: fixed; }
.roster th, .roster td { text-align: left; vertical-align: middle;
                         padding: var(--s-4) var(--s-4) var(--s-4) 0;
                         border-bottom: 1px solid var(--hair); overflow-wrap: break-word; }
.roster thead th { font-family: var(--f-data); font-weight: 400; font-size: 12px; letter-spacing: .06em;
                   color: var(--ink-dim); padding-bottom: var(--s-2); }
.roster .c-no   { width: 48px;  font-family: var(--f-data); font-size: 12px; color: var(--ink-dim); }
.roster .c-name { width: 168px; font-family: var(--f-title); font-weight: 700; font-size: 18px; }
/* 폭은 한국어가 아니라 **영문 지면**을 기준으로 잡는다 — "In preparation" 이 124px 를 넘어
   nowrap 인 채로 옆 칸을 밀고 들어갔다. 좁은 쪽에 맞추면 긴 쪽에서 깨진다. */
.roster .c-st   { width: 152px; color: var(--ink-dim); font-size: 15px; white-space: nowrap; }
.roster .c-go   { width: 176px; }
.roster td { font-size: 15px; }
.roster tbody tr:hover { background: var(--recess); }
.roster tbody tr.off:hover { background: none; }
.roster .c-go a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 0 var(--ink); }
.roster .c-go a:hover { color: var(--signal); box-shadow: inset 0 -1px 0 0 var(--signal); }
.roster .dash { color: var(--ink-dim); }

/* 상태 마커. 켜진 것만 표시자를 쓰고 꺼진 것은 빈 사각이다.
   상태 텍스트는 절대 적색으로 칠하지 않고, 칩도 쓰지 않는다 —
   네 행 중 세 행이 칩이면 배지 밭이 된다. */
.lamp-on  { display: inline-block; width: 6px; height: 6px; background: var(--signal); margin-right: var(--s-2); }
.lamp-off { display: inline-block; width: 6px; height: 6px; border: 1px solid var(--hair); margin-right: var(--s-2); }

@media (max-width: 767px) {
    .roster, .roster tbody, .roster tr, .roster td { display: block; width: auto; }
    .roster thead { display: none; }
    .roster tr { border-bottom: 1px solid var(--hair); padding: var(--s-5) 0; }
    .roster td { border: 0; padding: 0; }
    .roster td + td { margin-top: var(--s-2); }
}

/* 세로로 긴 실물 화면. 폭을 묶지 않으면 열 하나가 지면을 다 먹는다.
   오른쪽 끝에 붙여 텍스트 열과의 사이에 여백이 생기게 한다. */
.shot { max-width: 320px; margin-left: auto; }
/* 세로 스크린샷 옆의 글은 위로 붙이면 아래에 200px 넘는 빈 칸이 남는다.
   :has() 미지원 브라우저에서는 지금처럼 위 정렬로 남는다 — 깨지지 않고 덜 예쁠 뿐이다. */
.two:has(.shot) { align-items: center; }
@media (max-width: 899px) { .shot { max-width: 260px; margin-left: 0; } }

/* ── 만드는 방식 3열 ──────────────────────────────────────────────────── */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.ways > div { border-top: 1px solid var(--hair); padding-top: var(--s-4); }
.ways .no { font-family: var(--f-data); font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--ink-dim); }
.ways h3 { font-size: 18px; line-height: 1.44; margin: var(--s-2) 0 var(--s-3); }
.ways p { font-size: 15px; line-height: 1.73; color: var(--ink-dim); }
@media (max-width: 899px) { .ways { grid-template-columns: 1fr; } }

/* ── 가격 표시창 ──────────────────────────────────────────────────────── */
/* 가격을 카드가 아니라 **판독창**에 넣는다. SaaS 가격표의 3열 카드는 고를 것이 셋일 때
   성립하는 형식이고, 우리는 단일가라 고를 것이 없다. 고를 것이 없는데 카드를 그리면
   빈 열이 생기거나 가짜 티어를 만들게 된다 — 계기 하나가 값 하나를 가리키게 둔다. */
.price-box { padding: var(--s-7) var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.price-box .amt { display: flex; align-items: center; gap: var(--s-4); }
.price-box .mk { display: inline-block; width: 8px; height: 8px; background: var(--signal-lit); flex-shrink: 0; }
.price-box .num { font-family: var(--f-data); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.01em; color: var(--trace); }
.price-box .sub { font-family: var(--f-data); font-size: 13px; letter-spacing: .06em; color: rgba(215,213,208,.56); margin-top: var(--s-3); }

/* 판독창 안의 사양 목록 — 계기 옆에 붙는 명판. 여기 적힌 값은 전부 결제 화면에서
   그대로 확인된다. 확인되지 않는 값은 적지 않는다. */
.price-box .meta { display: grid; gap: var(--s-2); }
.price-box .meta > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-4);
                         font-family: var(--f-data); font-size: 13px; line-height: 1.7; }
.price-box .meta dt { color: rgba(215,213,208,.5); letter-spacing: .06em; }
.price-box .meta dd { color: var(--trace); }
@media (max-width: 899px) { .price-box { grid-template-columns: 1fr; gap: var(--s-5); } }
@media (max-width: 767px) { .price-box { padding: var(--s-6) var(--s-5); } .price-box .num { font-size: 44px; } }

/* 결제 버튼 아래 고지 — 순서를 바꾸지 않는다. 결제 직전 남는 질문을 닫는 자리다. */
.fineprint { max-width: 640px; list-style: none; }
.fineprint li { font-size: 13px; line-height: 1.7; color: var(--ink-dim);
                display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); }
.fineprint li + li { margin-top: var(--s-2); }
/* 마커는 ①②③ 이 아니라 01 02 03 이다. 원문자(U+2460~)는 IBM Plex Mono 에 글리프가 없는데
   unicode-range 선언에는 들어 있어서, 브라우저가 폴백하지 않고 **빈 동그라미**를 그린다.
   실측으로 확인한 함정이라 자릿수 마커로 바꿨다. */
.fineprint .k { font-family: var(--f-data); color: rgba(22,24,26,.36); }

/* ── 비교 표 ──────────────────────────────────────────────────────────── */
/* 마크는 ✓/✗ 가 아니라 채운 사각·빈 사각이다. 체크·엑스는 「좋다/나쁘다」로 읽히는데
   웹판은 나쁜 게 아니라 **다른 것**이다. 사각은 있음·없음만 말한다. */
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0;
                           border-bottom: 1px solid var(--hair); vertical-align: top; overflow-wrap: break-word; }
.compare thead th { border-bottom: 1px solid var(--ink); padding-bottom: var(--s-2);
                    font-family: var(--f-title); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.compare thead th:first-child { font-family: var(--f-data); font-weight: 400; letter-spacing: .06em; color: var(--ink-dim); }
.compare tbody th { font-weight: 400; color: var(--ink-dim); font-size: 15px; }
.compare td { font-size: 15px; }
.compare .c-k { width: 34%; }
.compare .c-v { width: 33%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes { display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: var(--s-3); vertical-align: 1px; }
.compare .no  { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--hair); margin-right: var(--s-3); vertical-align: 1px; }
@media (max-width: 767px) {
    .compare .c-k { width: 40%; }
    .compare th, .compare td { padding-right: var(--s-2); font-size: 14px; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
/* 아코디언을 쓰지 않는다 — 상태 UI 도 JS 도 필요 없고, 접힌 답은 읽히지 않는다. */
.faq { max-width: var(--w-text); }
.faq > div { border-top: 1px solid var(--hair); padding: var(--s-4) 0; }
.faq h3 { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.6; }
.faq p { font-size: 15px; line-height: 1.73; color: var(--ink-dim); margin-top: var(--s-2); }

/* ── 마스트헤드 우측 묶음 · 언어 셀렉터 ───────────────────────────────── */
.mast-end { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; }
.brand .sub { font-family: var(--f-data); font-weight: 400; font-size: 11px; letter-spacing: .1em;
              color: var(--ink-dim); border-left: 1px solid var(--hair); padding-left: var(--s-3); }
.readout a { text-decoration: none; }
.readout a:hover { color: var(--signal); }

/* 토글 스위치·드롭다운·국기 금지. 스위치는 발생기의 기호이고, 국기는 언어가 아니라
   국가를 가리킨다. 현재 언어는 링크가 아니라 각인이다 — 자기 자신으로 가는 링크를 두지 않는다. */
.lang { display: flex; align-items: center; font-family: var(--f-data); font-weight: 500;
        font-size: 12px; letter-spacing: .08em; flex-shrink: 0; }
.lang a, .lang span { padding: 0 6px; text-decoration: none; }
.lang .on { color: var(--ink); }
.lang .off { color: var(--ink-dim); }
.lang .off:hover { color: var(--signal); }
.lang .bar { width: 1px; height: 12px; background: var(--hair); padding: 0; }

/* 모바일에서 내비만 아래로 접는다. 언어 셀렉터는 브랜드와 같은 줄에 남는다 —
   768 미만에서 3단이 되면 헤더가 화면의 1/4 을 먹는다. */
@media (max-width: 767px) {
    .mast-in { display: grid; grid-template-columns: minmax(0, 1fr) auto;
               grid-template-areas: "brand end" "nav nav"; align-items: center; height: auto; gap: 0; }
    .brand    { grid-area: brand; }
    .nav      { grid-area: nav; }
    .mast-end { grid-area: end; }
    .readout  { display: none; }
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn-wide { width: 100%; max-width: 420px; justify-content: center; }
/* 결제 설정이 끝나기 전의 자리. 죽은 버튼 대신 상태를 적는다. */
.pending { display: inline-flex; align-items: center; min-height: 44px;
           font-family: var(--f-data); font-size: 13px; letter-spacing: .04em; color: var(--ink-dim);
           border: 1px dashed var(--hair); padding: 0 var(--s-5); }