/* ============================================================================
   PaperX 랜딩 (landing.css) — 하이라인 격자 / 에디토리얼 / 무채색+단일 강조.
   index.html 전용. style.css(result·app·admin, 학술 조판)는 건드리지 않는다.
   그림자·배경교차·아이콘나열·그라디언트 없음. 영역 구분은 1px 헤어라인만.
   ============================================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/static/pretendard.css');

:root{
  /* 종이 계열 (siyeon.me 색 체계와 계열 일치) */
  --bg:#F7F3EA; --surface:#EFE9DC; --line:#D6CDBC;
  --ink:#14110D; --muted:#6B6459; --accent:#B5291C;   /* 주사 붉은빛 */
  /* 3층 막대 전용 — 따뜻한 계열 */
  --s1:#C8BFB0; --s2:#9A720F; --s3:#B5291C; --none:#E3DACA;
  --sans:'Pretendard','IBM Plex Sans KR', system-ui, -apple-system, sans-serif;
  /* 세로 헤어라인 위치 (page 폭 기준) */
  --vl:6%; --vs:60%; --vr:94%;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* 종이 결 — feTurbulence 프랙탈 노이즈 한 겹 (이미지 파일 없이 data URI). 본문은 위로. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}

/* ── 격자 프레임 ────────────────────────────────────────────────────────── */
.page{position:relative;max-width:1680px;margin:0 auto;overflow:hidden}
.rules{position:absolute;inset:0;pointer-events:none;z-index:0}
.rules i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rules .vl{left:var(--vl)} .rules .vs{left:var(--vs)} .rules .vr{left:var(--vr)}

/* ── 상단바 ─────────────────────────────────────────────────────────────── */
.nav{position:relative;z-index:2;border-bottom:1px solid var(--line)}
.nav-in{display:grid;grid-template-columns:var(--vl) 1fr var(--vl);align-items:center;height:64px}
.nav-in>.row{grid-column:2;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.brand .seal{color:var(--accent)}
#authNav{display:inline-flex;gap:22px;align-items:center;font-size:.92rem;color:var(--muted)}
#authNav a:hover{color:var(--ink)}
#authNav .nav-btn{background:var(--ink);color:#fff;padding:8px 16px;border-radius:6px}
#authNav .nav-btn:hover{background:#27272A}

/* ── 섹션 격자 ──────────────────────────────────────────────────────────── */
.sec{position:relative;z-index:1;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none}
.sec-in{display:grid;grid-template-columns:var(--vl) 54% 34% var(--vl);align-items:start}
.col-l{grid-column:2} .col-r{grid-column:3}
.pad{padding:96px 32px 96px 0}
.pad-r{padding:96px 0 96px 32px}

/* ── 디스플레이 타이포 ─────────────────────────────────────────────────── */
.display{font-weight:600;font-size:5.5rem;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.h-sec{font-weight:600;font-size:2.4rem;letter-spacing:-.025em;line-height:1.1}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.sub{font-size:1.1rem;color:var(--muted);line-height:1.7;margin-top:22px;max-width:44ch}
.flow{color:var(--accent)}
.body{font-size:1.02rem;color:var(--muted);line-height:1.75;margin-top:16px;max-width:42ch}

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.btn{display:inline-flex;align-items:center;font-weight:600;font-size:1rem;padding:14px 26px;
  border:1px solid var(--ink);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#27272A}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--surface)}
.link{color:var(--accent);font-weight:600}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* ── 히어로 3층 막대 (주인공 · 스크롤 채움) ─────────────────────────────── */
.bar-wrap{margin-top:8px}
.bar-cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.bar-cap .t{font-weight:600;font-size:.9rem;color:var(--ink)}
.bar-cap .ex{font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 11px}
.hbar{display:flex;width:100%;height:120px;border:1px solid var(--line);overflow:hidden;background:var(--none)}
.hbar .seg{height:100%}
.hbar .s1{background:var(--s1)} .hbar .s2{background:var(--s2)}
.hbar .s3{background:var(--s3)} .hbar .none{background:var(--none)}
@media (prefers-reduced-motion: no-preference){
  .hbar{transform:scaleX(0);transform-origin:left}
  .hbar.in{animation:fillbar 1s cubic-bezier(.22,.61,.36,1) forwards}
}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hleg{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:.88rem;color:var(--muted)}
.hleg .i{display:inline-flex;align-items:center;gap:8px}
.hleg .d{width:11px;height:11px;flex-shrink:0}
.hleg .d.s1{background:var(--s1)} .hleg .d.s2{background:var(--s2)}
.hleg .d.s3{background:var(--s3)} .hleg .d.none{background:var(--none);border:1px solid var(--line)}
.hleg .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.bar-note{margin-top:18px;font-size:.92rem;color:var(--muted);line-height:1.7;max-width:60ch}
.bar-note b{color:var(--ink)}

/* ── 제품 화면 목업 (그림자 없음, 헤어라인만. 경계 넘어 잘림) ───────────── */
.mock{background:var(--bg);border:1px solid var(--line);font-size:.8rem}
.mock-cross-down{margin-bottom:-72px}   /* 아래 경계를 넘어 잘림 */
.mock-cross-up{margin-top:-72px}         /* 위 경계를 넘어 올라감 */

/* WRITE 목업 */
.mw{display:grid;grid-template-columns:38% 62%}
.mw-side{border-right:1px solid var(--line);padding:16px 14px;background:var(--surface)}
.mw-h{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.mw-h+.mw-h,.mw-side .mw-h.mt{margin-top:18px}
.mw-item{font-weight:600;color:var(--ink);padding:4px 0}
.mw-item.on{color:var(--accent)}
.mw-sub{color:var(--muted);padding:3px 0 3px 12px;border-left:1px solid var(--line);margin-left:2px}
.mw-ref{color:var(--muted);padding:3px 0;font-size:.74rem}
.mw-body{padding:18px 18px 14px}
.mw-title{font-weight:600;color:var(--ink);margin-bottom:10px}
.mw-body p{color:#3F3F46;line-height:1.8;margin-bottom:8px}
.mw-body sup{color:var(--accent);font-weight:600}
.mw-fn{border-top:2px solid var(--line);margin-top:14px;padding-top:10px}
.mw-fn div{color:var(--muted);font-size:.74rem;line-height:1.7}

/* RESULT 목업 */
.mr{padding:22px 22px 20px}
.mr-fig{font-size:2.6rem;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.mr-fig span{display:block;font-size:.78rem;font-weight:400;color:var(--muted);margin-top:6px;letter-spacing:0}
.mr-bar{display:flex;height:34px;border:1px solid var(--line);overflow:hidden;margin:18px 0 10px}
.mr-bar .seg{height:100%}
.mr-bar .s1{background:var(--s1)}.mr-bar .s2{background:var(--s2)}.mr-bar .s3{background:var(--s3)}.mr-bar .none{background:var(--none)}
.mr-leg{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mr-pass{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:.78rem}
.mr-pass .row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--line);color:#3F3F46}
.mr-pass .row .tag{color:var(--s3);font-weight:600}

/* ── 문서 출력 (카드 아님 · 세로 헤어라인 4칸) ─────────────────────────── */
.formats{grid-column:2 / 4;display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;border-top:1px solid var(--line);margin-top:44px}
.fmt{border-left:1px solid var(--line);padding:26px 22px;min-height:180px;display:flex;flex-direction:column}
.fmt:first-child{border-left:none}
.fmt .n{font-weight:600;font-size:1.3rem;letter-spacing:-.01em}
.fmt .k{font-size:.82rem;color:var(--muted);margin:2px 0 12px}
.fmt p{font-size:.86rem;color:var(--muted);line-height:1.65}
.fmt.hwpx{background:var(--surface)}
.fmt.hwpx .n{font-size:1.7rem;color:var(--accent)}
.fmt.hwpx .k{color:var(--ink);font-weight:600}
.fmt.hwpx p{color:#3F3F46}

/* ── 한계 (작게) ───────────────────────────────────────────────────────── */
.limits{grid-column:2 / 4;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:28px}
.lim{border-left:1px solid var(--line);padding:22px;color:var(--muted)}
.lim:first-child{border-left:none}
.lim .n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lim p{font-size:.9rem;line-height:1.7;margin-top:8px}
.lim b{color:var(--ink)}

/* ── 시작하기 ──────────────────────────────────────────────────────────── */
.start .col-l{grid-column:2 / 4}

/* ── 푸터 ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);position:relative;z-index:1}
.foot-in{display:grid;grid-template-columns:var(--vl) 1fr var(--vl)}
.foot-in>.row{grid-column:2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:26px 0;font-size:.85rem;color:var(--muted)}
.foot-in a:hover{color:var(--ink)}

/* ── 반응형 ────────────────────────────────────────────────────────────── */
@media(max-width:860px){
  .rules .vs{display:none}
  .sec-in{grid-template-columns:var(--vl) 1fr var(--vl)}
  .col-l,.col-r{grid-column:2}
  .pad,.pad-r{padding:56px 20px}
  .display{font-size:3rem}
  .h-sec{font-size:1.9rem}
  .mock-cross-down,.mock-cross-up{margin:0}
  .col-r>.mock{margin-top:28px}
  .formats{grid-column:2;grid-template-columns:1fr 1fr}
  .fmt.hwpx{grid-column:1 / 3}
  .limits{grid-column:2;grid-template-columns:1fr}
  .lim{border-left:none;border-top:1px solid var(--line)}
  .lim:first-child{border-top:none}
  .start .col-l{grid-column:2}
  .hbar{height:88px}
}
@media(max-width:520px){
  .display{font-size:2.4rem}
  .formats{grid-template-columns:1fr}
  .fmt{border-left:none;border-top:1px solid var(--line);min-height:0}
  .fmt:first-child{border-top:none}
  .fmt.hwpx{grid-column:1}
  .mw{grid-template-columns:1fr}
  .mw-side{border-right:none;border-bottom:1px solid var(--line)}
}