/* ============================================================
   show4you — 앱 서브페이지 공통 스타일
   메인(home.css)과 같은 아카이브형 에디토리얼 체계로 통일했다.

   설계 제약
   - 클래스 이름과 CSS 변수 이름을 바꾸지 않는다. 36개 HTML 과
     페이지별 인라인 <style>(다운로드·투표 페이지)이 그대로 동작해야 한다.
   - <body style="--accent:…"> 로 앱별 색을 주입하는 기존 방식을 유지한다.
   - 모션은 기본 정지. prefers-reduced-motion: no-preference 안에서만 움직인다.
   ============================================================ */

@property --ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 120deg;
}

:root {
    /* 잉크 기반 — home.css 와 동일 토큰 */
    --ink: #0f0e1c;
    --ink-2: #16142b;
    --ink-3: #201d3a;
    --paper: #f4f2ed;
    --paper-2: #e8e5dd;

    --on-ink: #f2f1f6;
    --on-ink-mute: #a09db8;
    --on-ink-faint: #8b87ab;
    --on-paper: #17162a;
    --on-paper-mute: #56536e;

    --indigo: #3a3a8e;
    --purple: #6d2b8f;
    --magenta: #c62d8a;

    --hair: rgba(255, 255, 255, .13);
    --hair-paper: rgba(23, 22, 42, .14);
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --shell: min(1320px, 100% - 8vw);

    /* --- 아래는 기존 이름 유지(HTML·인라인 스타일이 참조한다) --- */
    --line: var(--hair);
    --muted: var(--on-ink-faint);
    --body: var(--on-ink-mute);
    --heading: var(--on-ink);
    --bg-alt: var(--ink-2);
    --radius: 2px;
    --card-shadow: none;
    --grad: linear-gradient(var(--ang), #3a3a8e 0%, #6d2b8f 52%, #c62d8a 100%);
    --grad-soft: rgba(255, 255, 255, .06);

    /* 앱별 악센트 — body 인라인으로 덮어쓴다 */
    --accent: #c765b0;
    --accent-2: #c62d8a;
    --accent-grad: linear-gradient(var(--ang), var(--accent), var(--accent-2));
}

/* 글자용 악센트.
   기본은 원색 그대로 쓴다 — 대부분의 앱은 잉크 위에서 이미 4.5:1 을 넘긴다
   (money-change 5.48 · moyam 4.98 · moyam-book 5.21).
   예전에는 color-mix 로 일괄 보정했는데, 보정이 필요 없는 앱까지 표백해서
   코랄이 연어색이 되는 등 브랜드가 사라졌다. 미달하는 앱만 body 인라인으로
   --accent-lift 를 직접 준다 (PESTY: #d6001c 3.52:1 → #ff2b2b 5.12:1). */
body { --accent-lift: var(--accent); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    background: var(--ink);
    color: var(--on-ink-mute);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: -.015em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 전면 그레인 */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    background-image: url(/assets/images/texture/grain.png);
    background-size: 96px 96px; opacity: .05; mix-blend-mode: overlay; isolation: isolate;
}

h1, h2, h3, h4 { color: var(--on-ink); font-weight: 800; line-height: 1.25; letter-spacing: -.03em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: 2px; }

.container { width: var(--shell); margin-inline: auto; }
.narrow { max-width: 820px; }
.display-font { font-family: "Sora", "Pretendard Variable", sans-serif; }
.accent-text {
    color: transparent; background: var(--accent-grad);
    background-clip: text; -webkit-background-clip: text;
}

/* ---------- 버튼 ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "Sora", sans-serif; font-size: 14px; font-weight: 600;
    padding: 13px 24px; border: 1px solid var(--hair); border-radius: 2px;
    color: var(--on-ink); background: transparent; cursor: pointer; white-space: nowrap;
    transition: background .25s, border-color .25s, color .25s, filter .25s;
}
.btn:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { border-color: transparent; color: #fff; background: var(--accent-grad); }
.btn-primary:hover { background: var(--accent-grad); color: #fff; filter: brightness(1.14); }
.btn-ghost { border-color: var(--accent-lift); color: var(--accent-lift); }
.btn-ghost:hover { background: var(--accent-lift); color: var(--ink); }
.btn-light { background: rgba(255,255,255,.1); border-color: var(--hair); color: var(--on-ink); }
.btn-light:hover { background: var(--on-ink); color: var(--ink); }

/* ---------- 스토어 배지 ---------- */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 13px 22px; border: 1px solid var(--hair); border-radius: 2px;
    color: var(--on-ink); background: var(--ink-2);
    transition: background .25s, border-color .25s;
}
.store-badge:hover { background: var(--ink-3); border-color: rgba(255,255,255,.26); }
.store-badge svg { width: 24px; height: 24px; flex: 0 0 24px; }
.store-badge .sb-t { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-faint); word-break: normal; }
.store-badge .sb-n { display: block; font-family: "Sora", sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.store-badge.disabled { opacity: .5; pointer-events: none; border-style: dashed; }

/* ---------- 네비 ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 900; padding: 18px 0; border-bottom: 1px solid transparent; transition: padding .3s, border-color .3s; }
/* 블러를 가상 요소로 뺀다 — .nav 에 직접 걸면 position:fixed 자손(모바일 드로어)의
   컨테이닝 블록이 되어 100vh 가 네비 높이로 줄어든다. */
.nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(15, 14, 28, .82); backdrop-filter: blur(14px);
    opacity: 0; transition: opacity .3s;
}
.nav.scrolled::before { opacity: 1; }
.nav.scrolled { border-bottom-color: var(--hair); padding: 12px 0; }
.nav-inner { display: flex; align-items: center; gap: 28px; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin-left: auto; }
.nav-links a {
    font-family: "Sora", sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-mute); transition: color .2s;
}
.nav-links a:hover { color: var(--on-ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav .btn { padding: 11px 20px; font-size: 13px; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
/* 홈(.burger)과 같은 각진 막대를 쓴다. 모서리를 둥글리면 두 화면의 같은 버튼이
   달라 보인다 — 1.5px 높이라 차이는 작지만 굳이 갈라 둘 이유가 없다. */
.hamburger span { width: 22px; height: 1.5px; background: var(--on-ink); }
.nav-spacer { height: 74px; }

/* ---------- 언어 선택기 ---------- */
.lang-switch { position: relative; display: inline-flex; }
.lang-switch select {
    appearance: none; -webkit-appearance: none;
    font-family: "Sora", sans-serif; font-size: 12.5px; font-weight: 500;
    padding: 9px 32px 9px 14px; border: 1px solid var(--hair); border-radius: 2px;
    background: transparent; color: var(--on-ink-mute); cursor: pointer;
    transition: border-color .2s, color .2s;
}
.lang-switch select:hover { color: var(--on-ink); border-color: rgba(255,255,255,.28); }
.lang-switch select option { background: var(--ink-2); color: var(--on-ink); }
.lang-switch::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg); color: var(--on-ink-faint); pointer-events: none;
}
.lang-switch label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 빵부스러기 ---------- */
.crumb {
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--on-ink-faint); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; word-break: normal;
}
.crumb a:hover { color: var(--accent-lift); }
.crumb .sep { opacity: .45; }

/* ---------- 페이지 헤더(문서·공지) ---------- */
.page-head { padding: 152px 0 60px; border-bottom: 1px solid var(--hair); position: relative; }
.page-head h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin: 22px 0 0; letter-spacing: -.038em; max-width: 24ch; }
.page-head .crumb { color: var(--on-ink-faint); }

/* ---------- 앱 히어로 ---------- */
.app-hero { position: relative; padding: 152px 0 84px; overflow: hidden; border-bottom: 1px solid var(--hair); }
.app-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url(/assets/images/texture/grain.png); background-size: 96px 96px; opacity: .07;
}
.app-hero .orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .34; }
.app-hero .orb-1 { width: 460px; height: 460px; background: var(--accent); top: -180px; right: -90px; }
.app-hero .orb-2 { width: 360px; height: 360px; background: var(--accent-2); bottom: -190px; left: -110px; opacity: .26; }
.app-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; margin-top: 26px; }
.app-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
    border: 1px solid var(--hair); border-radius: 2px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--on-ink-faint); margin-bottom: 22px; word-break: normal;
}
.app-badge svg { width: 14px; height: 14px; }
/* 스크린샷이 아직 없는 소개 페이지(G-LIFE)에서 히어로의 그림 자리를 아이콘이 대신한다 */
.app-icon { width: 104px; height: 104px; border-radius: 24px; border: 1px solid var(--hair); box-shadow: 0 12px 34px rgba(0,0,0,.38); display: block; margin: 8px 0 22px; }
.app-hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); letter-spacing: -.042em; }
.app-hero .lead { color: var(--on-ink-mute); font-size: clamp(1rem, 1.3vw, 1.1rem); margin-top: 20px; max-width: 48ch; }
.app-hero .hero-actions { margin-top: 32px; }
.app-hero .platform-note { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--on-ink-faint); word-break: normal; }

/* ---------- 서브탭 ---------- */
/* 감기지 않고 가로로 스크롤한다. wrap 이면 좁은 화면에서 둘째 줄이 생기는데,
   :first-child 의 padding-left:0 은 DOM 상 첫 항목에만 걸려 둘째 줄 첫 항목만
   14px 안으로 밀렸다. 활성 밑줄도 한 줄에만 남아 두 줄이 다른 덩어리로 읽혔다.
   한 줄로 고정하면 세 문제가 같이 없어지고 탭이 늘어도 깨지지 않는다. */
.subtabs {
    display: flex; gap: 0; flex-wrap: nowrap; margin-top: 26px;
    border-top: 1px solid var(--hair);
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a {
    flex: 0 0 auto; white-space: nowrap;
    font-family: "Sora", sans-serif; font-size: 12.5px; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 14px 18px 12px; color: var(--on-ink-faint);
    border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.subtabs a:first-child { padding-left: 0; }
.subtabs a:hover { color: var(--on-ink); }
.subtabs a.active { color: var(--on-ink); border-bottom-color: var(--accent-lift); }

/* ---------- 섹션 ---------- */
.sec { padding: 96px 0; }
.sec.alt { background: var(--ink-2); }

/* ---------- 종이 구간 ----------
   --paper 계열 토큰은 선언만 돼 있고 @media print 밖에서는 한 번도 쓰이지
   않았다. 홈은 이미 같은 토큰으로 Stage 구간을 만든다(home.css .stage).
   유아용 앱처럼 따뜻해야 하는 구간에서 체계를 깨는 예외를 만드는 대신,
   이미 정의된 나머지 절반을 켜는 쪽이 맞다. */
.sec.paper { background: var(--paper); color: var(--on-paper-mute); position: relative; }
.sec.paper::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url(/assets/images/texture/grain.png);
    background-size: 96px 96px; opacity: .055;
}
.sec.paper > * { position: relative; z-index: 1; }
.sec.paper h1, .sec.paper h2, .sec.paper h3, .sec.paper h4 { color: var(--on-paper); }
.sec.paper .sec-head p, .sec.paper p { color: var(--on-paper-mute); }
.sec.paper .eyebrow { color: var(--accent); }
.sec.paper .eyebrow::before { background: var(--accent); }
.sec.paper .shot-grid .shot img { border-color: var(--hair-paper); background: var(--paper-2); }
.sec.paper .shot-grid .shot figcaption strong { color: var(--on-paper); }
.sec.paper .shot-grid .shot figcaption span { color: var(--on-paper-mute); }
.sec.paper .shots-note { color: var(--on-paper-mute); }
.sec.paper .btn { color: var(--on-paper); border-color: var(--hair-paper); }
.sec.paper .btn:hover { background: var(--on-paper); color: var(--paper); border-color: var(--on-paper); }
.sec-head { max-width: 46ch; margin: 0 0 52px; }
.eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-lift); margin-bottom: 16px; word-break: normal;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent-lift); }
.sec-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -.035em; }
.sec-head p { margin-top: 16px; color: var(--on-ink-mute); }

/* ---------- 기능 그리드 ---------- */
/* 셀에 테두리를 주고 음수 마진으로 겹친다.
   컨테이너 배경을 헤어라인으로 쓰던 방식은 카드 수가 열 수의 배수가 아닐 때
   남는 칸에서 배경이 그대로 드러나 회색 덩어리가 됐다
   (MOYAM 7개 → 2칸, PESTY 11개 → 1칸). 이 방식은 빈 칸이 생기지 않는다.
   .feat 에 테두리가 생기므로 border-color 인라인 지정도 이제 실제로 보인다. */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.feat {
    background: var(--ink-2); padding: 34px 30px 38px;
    border: 1px solid var(--hair); margin: -1px 0 0 -1px;
    transition: background .25s, border-color .25s;
}
.feat:hover { background: var(--ink-3); }
/* 추천 표시 등 강조가 필요한 칸 */
.feat.is-lead { border-color: var(--accent-lift); position: relative; z-index: 1; }
.feat-ic { width: 44px; height: 44px; border: 1px solid var(--hair); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; background: rgba(255,255,255,.04); }
.feat-ic svg { width: 20px; height: 20px; color: var(--accent-lift); }
.feat h3 { font-size: 1.1rem; margin-bottom: 10px; font-weight: 700; }
.feat p { font-size: .95rem; color: var(--on-ink-mute); }

/* ---------- 스크린샷 ---------- */
.shots { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.shots-note { text-align: center; color: var(--on-ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; margin-top: 24px; word-break: normal; }
.hero-shot { width: auto; max-width: 100%; max-height: 540px; height: auto; border: 1px solid var(--hair); border-radius: 4px; display: block; }
.shot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: start; }
.shot-grid .shot { margin: 0; }
.shot-grid .shot img { width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 4px; display: block; background: var(--ink-2); }
.shot-grid .shot figcaption { margin-top: 12px; }
.shot-grid .shot figcaption strong { display: block; font-size: .92rem; color: var(--on-ink); font-weight: 600; letter-spacing: -.02em; }
.shot-grid .shot figcaption span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--on-ink-faint); line-height: 1.5; word-break: normal; }

/* ---------- 필름스트립 ----------
   .shot-grid 는 5열 고정이라 552~553px 원본이 245px(원본의 45%)로 줄어
   차트 축·달력 숫자·통화 코드가 읽히지 않았다. 가로 스크롤 스냅으로 바꾸면
   원본에 가까운 크기로 볼 수 있다. 네이티브 overflow 라 키보드로도 움직인다. */
.shot-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 76vw);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 14px; margin-inline: calc((100% - var(--shell)) / 2);
    padding-inline: max(0px, calc((100% - var(--shell)) / 2));
    scrollbar-width: thin;
}
.shot-strip .shot { margin: 0; scroll-snap-align: start; }
.shot-strip .shot img { width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 4px; display: block; background: var(--ink-2); }
.shot-strip .shot figcaption { margin-top: 12px; }
.shot-strip .shot figcaption strong { display: block; font-size: .95rem; color: var(--on-ink); font-weight: 600; letter-spacing: -.02em; }
.shot-strip .shot figcaption span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--on-ink-faint); word-break: normal; }
.sec.paper .shot-strip .shot img { border-color: var(--hair-paper); background: var(--paper-2); }
.sec.paper .shot-strip .shot figcaption strong { color: var(--on-paper); }
.sec.paper .shot-strip .shot figcaption span { color: var(--on-paper-mute); }

/* ---------- 지표 ----------
   홈의 .hero-facts 와 같은 재질. 앱 페이지가 산문으로만 말하던 것을
   숫자로 말하게 한다. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 34px; }
.facts > div { background: var(--ink-2); border: 1px solid var(--hair); margin: -1px 0 0 -1px; padding: 22px 20px; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-faint); word-break: normal; }
.facts dd { font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.7rem); margin-top: 8px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--on-ink); }
.facts dd small { font-size: .52em; font-weight: 500; color: var(--on-ink-mute); margin-left: 3px; }

/* ---------- 원장 / 인덱스 ----------
   홈의 .widx / .wrow 와 같은 형태. 환율표·릴리스 연표처럼 표로 읽혀야 하는
   내용에 쓴다. */
.ledger { border-top: 1px solid var(--hair); }
.lrow {
    display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: baseline;
    padding: 16px 6px; border-bottom: 1px solid var(--hair);
}
.lrow .k { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent-lift); word-break: normal; }
.lrow .n { color: var(--on-ink-mute); font-size: .95rem; }
.lrow .v { font-family: var(--mono); font-size: .95rem; color: var(--on-ink); text-align: right; font-variant-numeric: tabular-nums; word-break: normal; }
.ledger-cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-faint); padding-bottom: 12px; word-break: normal; }
.ledger-note { margin-top: 16px; font-size: .9rem; color: var(--on-ink-faint); }

/* ---------- 요금제 표 ----------
   PESTY 는 .feat 를 빌려 쓰면서 인라인 스타일로 가격을 얹고 있었고,
   추천 표시는 .feat 에 테두리가 없어 아예 보이지 않았다. */
.ptable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ptable th, .ptable td { border: 1px solid var(--hair); padding: 14px 16px; text-align: left; vertical-align: top; }
.ptable thead th {
    background: var(--ink-2); font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-faint); word-break: normal;
}
.ptable thead th.is-lead { color: var(--accent-lift); }
.ptable .plan { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--on-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ptable .plan small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--on-ink-faint); letter-spacing: .06em; margin-top: 6px; word-break: normal; }
.ptable td { color: var(--on-ink-mute); font-size: .94rem; }
.ptable td.yes { color: var(--accent-lift); }
.ptable td.no { color: var(--on-ink-faint); }

/* ---------- 폰 목업 ---------- */
.phone-wrap { display: flex; justify-content: center; }
.phone { position: relative; width: 254px; height: 528px; border-radius: 34px; background: var(--ink-2); border: 1px solid var(--hair); padding: 11px; }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 92px; height: 20px; background: var(--ink-2); border-radius: 0 0 12px 12px; z-index: 3; }
.phone-screen { width: 100%; height: 100%; border-radius: 26px; overflow: hidden; position: relative; background: var(--accent-grad); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-ui { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; padding: 44px 18px 20px; }
.phone-ui .pu-top { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; opacity: .85; word-break: normal; }
.phone-ui .pu-title { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.4rem; margin-top: 10px; line-height: 1.2; }
.phone-ui .pu-sub { font-size: .8rem; opacity: .88; margin-top: 6px; }
.phone-ui .pu-card { margin-top: auto; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 14px; }
.phone-ui .pu-card .r { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .8rem; }
.phone-ui .pu-card .r + .r { border-top: 1px solid rgba(255,255,255,.16); }
.phone-ui .pu-big { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.6rem; }
.phone-ui .pu-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.phone-ui .pu-chips span { font-family: var(--mono); font-size: 9.5px; background: rgba(255,255,255,.16); padding: 4px 8px; border-radius: 2px; word-break: normal; }

/* ---------- 다운로드 구간 ---------- */
.dl { background: var(--ink-2); }
.dl-panel { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
/* MOYAM·모얌북은 여기에 QR 묶음까지 세 번째 자식으로 넣는다.
   2열 규칙에 세 번째가 오면 자동 배치로 1열 2행에 떨어져, 스토어 배지는
   오른쪽 끝에 QR 은 제목 아래에 놓여 한 덩어리로 안 읽혔다. 전체 폭을 준다. */
.dl-panel > .qr-row { grid-column: 1 / -1; }
.dl-panel h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.035em; }
.dl-panel p { color: var(--on-ink-mute); margin-top: 14px; }

/* ---------- 공지 목록 ---------- */
.notice-list { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.notice-item {
    display: block; padding: 26px 6px; border-bottom: 1px solid var(--hair);
    transition: background .25s, padding-left .25s;
}
.notice-item:hover { background: rgba(255,255,255,.028); padding-left: 16px; }
.notice-item .ni-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.notice-item h3 { font-size: 1.1rem; margin-bottom: 8px; font-weight: 700; }
.notice-item p { font-size: .95rem; color: var(--on-ink-mute); }
.notice-item ul { margin: 8px 0 0 18px; font-size: .95rem; color: var(--on-ink-mute); }
.notice-item .ni-more { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-lift); word-break: normal; }
.notice-item .ni-more svg { width: 14px; height: 14px; vertical-align: -2px; }
.ni-top { display: flex; align-items: center; gap: 12px; }
.ni-tag {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-lift); border: 1px solid var(--hair); padding: 4px 10px; border-radius: 2px; word-break: normal;
}
.ni-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--on-ink-faint); word-break: normal; }

/* ---------- 문서(약관·처리방침) ---------- */
.doc { max-width: 78ch; }
.doc .updated {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--on-ink-faint);
    margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); word-break: normal;
}
.doc h2 {
    font-size: 1.22rem; margin: 46px 0 16px; padding-left: 16px;
    border-left: 2px solid var(--accent-lift); font-weight: 700; letter-spacing: -.028em;
}
.doc h3 { font-size: 1.04rem; margin: 26px 0 10px; font-weight: 700; }
.doc p { margin-bottom: 14px; color: var(--on-ink-mute); }
.doc ul, .doc ol { margin: 0 0 16px 20px; color: var(--on-ink-mute); }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--on-ink); font-weight: 600; }
.doc .box { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 2px; padding: 20px 24px; margin: 20px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; }
.doc th, .doc td { border: 1px solid var(--hair); padding: 12px 14px; text-align: left; color: var(--on-ink-mute); }
.doc th { background: var(--ink-2); font-weight: 600; color: var(--on-ink); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; word-break: normal; }
.doc a { color: var(--accent-lift); font-weight: 500; }
.doc a:hover { text-decoration: underline; }

/* ---------- 앱 허브 ---------- */
/* 받는 앱과 브라우저에서 쓰는 것을 나눈다(홈 벤토와 같은 기준·같은 머리). */
.group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.group-head .gh-t { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink); word-break: normal; }
.group-head .gh-d { font-size: 12.5px; color: var(--on-ink-faint); word-break: normal; }
.hub-grid + .group-head { margin-top: 44px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hub-card {
    display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 2px;
    overflow: hidden; background: var(--ink-2);
    transition: background .25s, border-color .25s, transform .25s;
}
.hub-card:hover { background: var(--ink-3); border-color: rgba(255,255,255,.24); transform: translateY(-3px); }
.hub-card .hc-top { padding: 30px 26px 24px; color: #fff; position: relative; }
.hub-card .hc-ic { width: 48px; height: 48px; border-radius: 11px; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; overflow: hidden; flex: 0 0 auto; background: rgba(255,255,255,.14); }
.hub-card .hc-ic svg { width: 24px; height: 24px; color: #fff; }
.hub-card .hc-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.hub-card .hc-top h3 { color: #fff; font-size: 1.24rem; }
/* 한글 병기 — 영문 이름이 주가 되도록 한 단계 낮춘다 */
.hub-card .hc-top h3 .kr { color: rgba(255, 255, 255, .78); }
.kr { font-size: .82em; font-weight: 500; color: var(--on-ink-mute); letter-spacing: -.02em; }
.hub-card .hc-top .hc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; opacity: .9; margin-top: 6px; word-break: normal; }
.hub-card .hc-body { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.hub-card .hc-body p { font-size: .93rem; flex: 1; color: var(--on-ink-mute); }
.hub-card .hc-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-lift); word-break: normal; }
.hub-card .hc-link svg { width: 14px; height: 14px; }

/* ---------- 푸터 ---------- */
.footer { border-top: 1px solid var(--hair); padding: 62px 0 30px; color: var(--on-ink-mute); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 42px; padding-bottom: 42px; border-bottom: 1px solid var(--hair); }
.footer-grid > * { min-width: 0; }
/* width:auto 필수 — height 만 주면 HTML 의 width 속성이 폭이 되어 늘어난다 */
.footer-logo img { height: 30px; width: auto; margin-bottom: 18px; }
.footer-about p { font-size: .9rem; max-width: 34ch; }
.footer-col h4 { font-family: "Sora", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a, .footer-col li { font-size: .9rem; transition: color .2s; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--on-ink); }
.footer-bottom {
    padding-top: 22px; display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
    color: var(--on-ink-faint); word-break: normal;
}

/* ---------- 알림 스케줄 눈금 ----------
   스크린샷으로 보여줄 수 없는 동작(마감이 가까울수록 간격이 촘촘해지고
   마감 뒤에도 계속된다)을 눈금으로 그린다. 눈금 위치는 인라인 left 로 주고
   CSS 는 형태만 담당한다. */
.sched { margin-top: 30px; }
.sched-bar { position: relative; height: 62px; border-bottom: 1px solid var(--hair); }
.sched-bar i { position: absolute; bottom: 0; width: 1px; background: var(--accent-lift); }
.sched-bar i.past { background: var(--on-ink-faint); }
/* 마감선. 위치는 인라인 left 로 준다(눈금과 같은 좌표계). */
.sched-bar .due { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--on-ink); }
.sched-bar .due::after {
    content: attr(data-label); position: absolute; top: -2px; left: 8px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--on-ink); white-space: nowrap;
}
/* 축 라벨도 눈금과 같은 좌표에 놓는다. flex space-between 으로 두면
   가운데 라벨이 50% 에 박혀 실제 마감선(80%)과 어긋난다. */
.sched-axis {
    position: relative; height: 16px; margin-top: 10px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--on-ink-faint); word-break: normal;
}
.sched-axis span { position: absolute; top: 0; white-space: nowrap; }
.sched-axis span:first-child { left: 0; }
.sched-axis span:last-child { right: 0; }

/* ---------- 강도 단계 ---------- */
.levels { list-style: none; border-top: 1px solid var(--hair); margin-top: 26px; }
.levels li { display: grid; grid-template-columns: 46px 1fr 120px; gap: 18px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--hair); }
.levels .lv { font-family: var(--mono); font-size: 11.5px; color: var(--accent-lift); word-break: normal; }
.levels .nm { font-weight: 600; color: var(--on-ink); letter-spacing: -.02em; }
.levels .bars { display: flex; gap: 3px; justify-content: flex-end; }
.levels .bars b { width: 3px; height: 14px; background: var(--accent-lift); border-radius: 1px; }
.levels .bars b.off { background: var(--hair); }

/* ---------- 등장 ---------- */
.reveal { opacity: 1; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1080px) {
    .app-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .feat-grid { grid-template-columns: 1fr 1fr; }
    .facts { grid-template-columns: repeat(2, 1fr); }
    .ptable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .levels li { grid-template-columns: 40px 1fr 96px; gap: 12px; }
    .hub-grid { grid-template-columns: 1fr 1fr; }
    .shot-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid > :first-child { grid-column: 1 / -1; }
    .dl-panel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    body { font-size: 16px; }
    .nav-links {
        position: fixed; inset: 0 0 0 auto; width: min(78%, 300px);
        flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 24px; background: var(--ink-2); padding: 40px; margin: 0;
        transform: translateX(100%); visibility: hidden;
        transition: transform .4s, visibility .4s; z-index: 950;
    }
    .nav-links.open { transform: none; visibility: visible; }
    .nav-links a { font-size: 1.05rem; }
    .hamburger { display: flex; z-index: 960; }
    .nav .nav-cta .btn { display: none; }
    /* 모바일에서 .nav-links 가 오프캔버스로 빠지면 흐름에서 margin-left:auto 를
       가진 요소가 사라진다. 홈은 .burger 에 직접 걸어 오른쪽 끝에 붙이는데 여기는
       그것이 없어 햄버거가 로고 옆(왼쪽 104px)에 떠 있었다. G-LIFE 는 언어
       선택기까지 끼어 또 다른 자리(215px)에 놓였다. 홈과 같은 자리로 맞춘다. */
    .nav .nav-cta { margin-left: auto; }
    /* .nav-spacer 가 74px 로 고정 네비를 이미 비켜 준다. 여기 118px 을 더하면
       머리말까지 192px 이 비어 812px 화면의 4분의 1을 빈 채로 시작했다. */
    .app-hero, .page-head { padding-top: 64px; }

    /* 소개·공지·약관 메뉴를 히어로 맨 위로 끌어올린다. 원래는 히어로 끝에 있어
       문서 1,100px 아래였고, 메뉴에 닿으려면 한 화면 반을 내려야 했다. 법적 고지로
       가는 유일한 통로라 먼저 보이는 편이 맞다. 하위 페이지(.page-head)는 이미
       제목 바로 아래라 손대지 않는다. 데스크톱은 한 화면에 다 들어와 그대로 둔다.

       나머지 자식에 order:3 을 먼저 깔아 둔다. 히어로 속 구조가 앱마다 달라서
       (모얌북 등은 .app-hero-grid 한 덩어리, G-LIFE 는 아이콘·제목·버튼이 직계로
       흩어져 있다) 특정 클래스만 짚으면 나머지가 order 기본값 0 으로 남아
       머리말보다 앞으로 올라간다. */
    .app-hero > .container { display: flex; flex-direction: column; }
    .app-hero > .container > * { order: 3; }
    .app-hero > .container > .crumb { order: 1; }
    .app-hero > .container > .subtabs { order: 2; margin-bottom: 30px; }
    .sec { padding: 66px 0; }
    .feat-grid, .hub-grid { grid-template-columns: 1fr; }
    .shot-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hero-shot { max-height: 420px; }
    .subtabs a { padding: 12px 14px 10px; }
    .subtabs a:first-child { padding-left: 0; }
    .lrow { grid-template-columns: 68px 1fr; gap: 4px 14px; }
    .lrow .v { grid-column: 2; text-align: left; }
    .levels li { grid-template-columns: 34px 1fr; }
    .levels .bars { grid-column: 2; justify-content: flex-start; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
    /* 넓은 법적 표는 자리에서 가로 스크롤 */
    .doc table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   모션 — 기본 정지
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    @keyframes angle { to { --ang: 480deg; } }
    .btn-primary, .accent-text, .phone-screen { animation: angle 18s linear infinite; }

    @supports (animation-timeline: view()) {
        /* opacity 는 건드리지 않는다 — 스크롤하지 않는 크롤러·전체 캡처에서
           본문이 사라지는 것을 막는다(메인과 동일 원칙). */
        @keyframes rise { from { transform: translateY(22px); } to { transform: none; } }
        .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 46%; }
        .app-hero .reveal, .page-head .reveal { animation: none; transform: none; }
    }
}

@media print {
    .reveal { animation: none !important; transform: none !important; }
    body { background: #fff; color: #000; }
    body::before, .app-hero::after { display: none; }
    .nav, .hamburger, .subtabs, .lang-switch { display: none; }
    h1, h2, h3, h4, .doc strong { color: #000; }
    .doc p, .doc li, .doc td { color: #222; }
    .doc a { color: #000; text-decoration: underline; }
    .sec, .sec.alt, .dl, .app-hero, .page-head { background: #fff; }
}
