/* Logro 랜딩 v4.1 「한 장」 조판 — 정본 chagok-web/BRAND_v4.md·DESIGN.md. 랜딩 전용. 2색 인쇄: 먹과 주홍(묶어 보기만 청색). 그림자 0, 그라데이션 0, 소수 px 0. */

/* Hahmlet KS X 1001 서브셋(셀프호스팅, preload) — 서브셋 밖 글자만 Google Fonts Hahmlet 으로 */
@font-face{font-family:"Hahmlet KS";font-weight:700;font-style:normal;font-display:block;src:url("/assets/v4/hahmlet-700-ks.woff2") format("woff2")}
@font-face{font-family:"Hahmlet KS";font-weight:600;font-style:normal;font-display:block;src:url("/assets/v4/hahmlet-600-ks.woff2") format("woff2")}

:root{
  --bg:#F4F1EA;--surface:#FBFAF7;--ink:#141210;--ink2:#4A463F;--line:#C9C3B6;
  --accent:#D2401E;--accent-text:#B8361A;--accent2:#2B4C7E;--placeholder:#7A746A;
  --dark-bg:#16140F;--dark-surface:#221F19;--dark-line:#33302A;--dark-ink:#F2EEE6;--dark-ink2:#A29B8F;--accent-text-dark:#E8552F;
  --p1:#4F6D8F;--p2:#7A5C8E;--p3:#4F7A5E;--p4:#A8783F;--p5:#8A5F55;--p6:#4E7F7B;
  --disp:"Hahmlet KS","Hahmlet","Apple SD Gothic Neo",serif;
  --ui:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --sp1:8px;--sp2:16px;--sp3:24px;--sp4:32px;--sp5:48px;--sp6:64px;--sp7:96px;
  --r-sheet:2px;--r-btn:4px;--r-tag:2px;--hair:1px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ol,ul,table{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 눈금 12·14·16·20·25·31·39·64·96 */
.display{font-family:var(--disp);font-weight:700;font-size:clamp(48px,7vw,96px);line-height:1.1;letter-spacing:-.01em}
.h1{font-family:var(--disp);font-weight:700;font-size:39px;line-height:1.2;letter-spacing:-.01em}
.h2{font-family:var(--disp);font-weight:700;font-size:31px;line-height:1.25;letter-spacing:-.01em}
.h3{font-family:var(--disp);font-weight:600;font-size:25px;line-height:1.3}
.h4{font-family:var(--ui);font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.01em}
.body{font-size:16px;line-height:1.75}
.strong{font-weight:600}
.caption{font-size:14px;line-height:1.5;color:var(--ink2)}
.label{font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.04em;color:var(--ink2)}
.time{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink2)}
.numxl{font-family:var(--disp);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tab{font-variant-numeric:tabular-nums}

/* 컨테이너·지면 */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp4)}
.light{position:relative;background:var(--bg)}
.light::before{content:"";position:absolute;inset:0;background:url("/assets/v4/paper-tile.jpg") repeat;background-size:1024px 576px;opacity:.08;pointer-events:none}
.light>.wrap{position:relative}
.wrap>*{min-width:0}
.dark{background:var(--dark-bg);color:var(--dark-ink)}
.dark a{color:var(--dark-ink)}
.dark .label,.dark .caption,.dark .time{color:var(--dark-ink2)}
.rule{border:0;border-top:var(--hair) solid var(--line);margin:0}
.double{border-top:var(--hair) solid var(--ink);position:relative;height:5px}
.double::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:var(--hair) solid var(--line)}

.sheet{background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r-sheet);overflow:hidden}
.dark .sheet{border-color:var(--dark-line)}
.sheet img{width:100%}
figcaption{margin-top:var(--sp2)}
.endmark{display:inline-block;width:8px;height:8px;background:var(--accent);vertical-align:baseline}
.tech{display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp2)}

/* 워드마크 — 아웃라인 SVG 하나(LogroWeb/shared/wordmark.svg 복사본). 제호 28 · 판권 20 */
.wm{display:inline-flex;align-items:center}
.wm img{height:28px;width:auto}
.wm.sm img{height:20px}

/* 버튼 — 14/600, 높이 44, r4 (웹앱·앱과 동일) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp1);height:44px;padding:0 20px;border-radius:var(--r-btn);border:var(--hair) solid var(--ink);background:var(--surface);color:var(--ink);font-family:var(--ui);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.dark .btn{border-color:var(--dark-ink);color:var(--dark-ink);background:transparent}
.btn-text{display:inline-flex;align-items:center;gap:var(--sp1);height:44px;color:var(--accent-text);font-weight:600;font-size:14px;line-height:1}
.dark .btn-text{color:var(--accent-text-dark)}
.btn-text:hover,.btn-text:focus-visible{text-decoration:underline;text-underline-offset:4px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp3);margin-top:var(--sp4)}

/* 0. 제호줄 */
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.masthead nav{display:flex;gap:var(--sp3);font-size:14px;font-weight:600}
.masthead nav a{color:var(--ink2)}
.masthead nav a:hover{color:var(--ink)}

/* 1. 히어로 — 제호 하나, 시각은 첫 장 A4 지면 + 캡션 */
.hero .wrap{display:grid;grid-template-columns:55fr 45fr;gap:var(--sp6);align-items:center;padding-top:var(--sp7);padding-bottom:var(--sp7)}
.hero .lede{margin-top:var(--sp4);max-width:520px}
.hero figure{padding:var(--sp3);background:var(--surface);border-top:var(--hair) solid var(--line);border-radius:var(--r-sheet)}
.hero .a4{aspect-ratio:1/1.414;width:100%;object-fit:cover;object-position:top}
.hero .sheet{max-width:440px}

/* 2. 해부도 — 실물 한 장 1점 + 왼쪽 주석 6개(리더 괘선) */
.anatomy .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7)}
.anatomy .head{max-width:640px;margin-bottom:var(--sp6)}
.anatomy .head p{margin-top:var(--sp3);color:var(--dark-ink2)}
.anat{display:grid;grid-template-columns:280px minmax(0,520px);gap:0 var(--sp5);align-items:start}
.anat .sheet{grid-column:2}
.anat .notes{grid-column:1;grid-row:1;position:relative;align-self:stretch}
.anat .notes li{position:absolute;left:0;right:0;display:grid;grid-template-columns:32px 1fr;gap:var(--sp2);padding-top:var(--sp2);border-top:var(--hair) solid var(--dark-line);transform:translateY(-1px)}
.anat .notes li::after{content:"";position:absolute;top:-1px;left:100%;width:var(--sp5);border-top:var(--hair) solid var(--dark-line)}
.anat .notes .time{color:var(--accent-text-dark);padding-top:5px}
.anat .notes .label{color:var(--dark-ink)}
.anat .notes .caption{color:var(--dark-ink2);margin-top:2px}
/* 블록 머리 위치 = anat_fomc.png(900×4347) 괘선 y / 4347 */
.anat .n1{top:10.1%}.anat .n2{top:20.2%}.anat .n3{top:43.5%}.anat .n4{top:53.5%}.anat .n5{top:65.7%}.anat .n6{top:78.2%}
.anat .fig{grid-column:2;margin-top:var(--sp3)}

/* 3. 사설 */
.why .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7)}
.why .h1{margin-bottom:var(--sp6)}
.cols{display:grid;grid-template-columns:1fr 1fr 1fr 220px;gap:0}
.col{padding:0 var(--sp4);border-left:var(--hair) solid var(--line)}
.col:first-child{padding-left:0;border-left:0}
.col .drop{display:flex;align-items:baseline;gap:var(--sp2);margin-bottom:var(--sp3)}
.col .drop .h1{color:var(--ink2)}
.col p{color:var(--ink)}
.cols figure{padding-left:var(--sp4);border-left:var(--hair) solid var(--line)}

/* 4. 시간축 — 실제 녹음 52:10: 30:00 = 57.5% */
.timeline .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7)}
.timeline .head{max-width:640px}
.timeline .head p{margin-top:var(--sp3)}
.axis{position:relative;margin:var(--sp6) 0 var(--sp5);border-top:var(--hair) solid var(--ink);height:48px}
.axis .tick{position:absolute;top:-4px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--sp1)}
.axis .tick i{display:block;width:6px;height:6px;background:var(--accent)}
.axis .tick.t0{left:0;transform:none;align-items:flex-start}
.axis .tick.t1{left:57.5%}
.axis .tick.t2{right:0;left:auto;transform:none;align-items:flex-end}
.axis .seg{position:absolute;top:var(--sp4);left:0;width:57.5%;text-align:center}
.axis .seg.s2{left:57.5%;width:42.5%}
.pages{display:grid;grid-template-columns:57.5fr 42.5fr;gap:var(--sp3);align-items:start}
.pages img{aspect-ratio:900/420}

/* 5. 여러 개를 한 장으로 — 청색은 여기서만 */
.merge .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7)}
.merge .head{max-width:640px}
.merge .head p{margin-top:var(--sp3)}
.merge .head b{font-weight:600}
.merge .stage{display:grid;grid-template-columns:360px 120px 360px;gap:var(--sp3);align-items:center;justify-content:center;margin-top:var(--sp6)}
.srcs{display:flex;flex-direction:column;gap:var(--sp2);max-width:360px}
.src{border:var(--hair) solid var(--ink);border-radius:var(--r-sheet);background:var(--surface);padding:var(--sp2) var(--sp3);display:flex;flex-direction:column;gap:2px}
.src .h4{font-size:16px}
.arrows{width:100%;height:auto;display:block}
.arrows path{stroke:var(--accent2);stroke-width:1;fill:none}
.arrows .tri{fill:var(--accent2);stroke:none}
.merge .down{display:none}
.merge .sheet{border-top:var(--hair) solid var(--accent2)}
.merge .sheet img{aspect-ratio:900/1507;object-fit:cover;object-position:top}
.merge .cut{display:grid;grid-template-columns:240px 1fr;gap:var(--sp4);align-items:end;margin-top:var(--sp6)}
.merge .cut img{aspect-ratio:1/1}
.merge .cut .h3{max-width:520px}
.blue{color:var(--accent2)}

/* 6. 스튜디오 — 평면 다크 바닥, 두 방은 실제 캡처 */
.studio .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp6);align-items:center}
.studio .head p{margin-top:var(--sp3);color:var(--dark-ink)}
.studio .tech{margin-top:var(--sp4)}
.studio .h1{margin-top:var(--sp2)}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);align-items:start}
.room .sheet{background:var(--dark-surface)}
.room img{aspect-ratio:900/1507;object-fit:cover;object-position:top}
.room figcaption{margin-top:var(--sp2)}

/* 7. 요금표 */
.pricing .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7)}
.pricing .h1{margin-bottom:var(--sp6)}
.pricing .grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp6);align-items:start}
.plans{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:var(--hair) solid var(--ink);border-bottom:var(--hair) solid var(--line);margin-bottom:var(--sp5)}
.plan{padding:var(--sp3) var(--sp3) var(--sp3) 0;border-left:var(--hair) solid var(--line);padding-left:var(--sp3)}
.plan:first-child{border-left:0;padding-left:0}
.plan .numxl{margin:var(--sp2) 0 var(--sp1);white-space:nowrap}
.plan .numxl.pro{color:var(--accent-text)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tbl th,.tbl td{text-align:left;padding:12px 0;border-bottom:var(--hair) solid var(--line);vertical-align:top}
.tbl th{font-weight:600;color:var(--ink2);font-size:12px;letter-spacing:.04em}
.tbl td{font-variant-numeric:tabular-nums}
.tbl td.c,.tbl th.c{text-align:center;width:22%}
.tbl td.c b{font-weight:600}
.compare{display:grid;grid-template-columns:1fr 1fr;border-top:var(--hair) solid var(--ink);border-bottom:var(--hair) solid var(--line);margin-top:var(--sp4)}
.compare div{padding:var(--sp2) 0}
.compare div+div{border-left:var(--hair) solid var(--line);padding-left:var(--sp3)}
.compare .h4{margin-top:2px}
.pricing .note{margin-top:var(--sp3);max-width:640px}
.pricing .cta{margin-top:var(--sp4)}
.pricing figure img{aspect-ratio:900/985}

/* 8. 대기명단 */
.waitlist .wrap{padding-top:var(--sp7);padding-bottom:var(--sp7);display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--sp6);align-items:center}
.waitlist .box{border:var(--hair) solid var(--ink);border-radius:var(--r-sheet);background:var(--surface);padding:var(--sp5)}
.waitlist .box p{margin-top:var(--sp2)}
.waitlist .box .tech{margin-top:var(--sp3)}
.waitlist img{aspect-ratio:1/1;max-width:min(100%,240px)}

/* 9. 판권면 */
.colophon .wrap{padding-top:var(--sp4);padding-bottom:var(--sp6)}
.colophon .cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp4);margin-top:var(--sp4);font-size:12px;line-height:1.6;color:var(--ink2)}
.colophon .cols3 a{color:var(--ink2)}
.colophon .cols3 a:hover{color:var(--ink)}
.colophon .links{display:flex;flex-direction:column;gap:var(--sp1)}
.colophon .copy{margin-top:var(--sp1)}

/* 반응형 */
@media (max-width:1100px){
  .cols{grid-template-columns:1fr 1fr 1fr}
  .cols figure{grid-column:1/-1;border-left:0;padding-left:0;margin-top:var(--sp5);max-width:320px}
  .merge .stage{grid-template-columns:minmax(0,1fr) 100px 300px}
  .anat{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:900px){
  .display{font-size:clamp(48px,11vw,72px)}
  .hero .wrap{grid-template-columns:1fr;gap:var(--sp5);padding-top:var(--sp6);padding-bottom:var(--sp6)}
  .hero .sheet{max-width:100%}
  .anat{grid-template-columns:1fr;gap:var(--sp3)}
  .anat .notes{position:static;grid-column:1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2) var(--sp3)}
  .anat .notes li{position:static;transform:none}
  .anat .notes li::after{display:none}
  .anat .sheet,.anat .fig{grid-column:1}
  .cols{grid-template-columns:1fr}
  .col{padding:var(--sp4) 0;border-left:0;border-top:var(--hair) solid var(--line)}
  .col:first-child{border-top:0;padding-top:0}
  .merge .stage{grid-template-columns:1fr;gap:var(--sp3);justify-items:start}
  .arrows{display:none}
  .merge .down{display:flex;align-items:center;gap:var(--sp2);height:var(--sp3)}
  .merge .down i{display:block;width:1px;height:var(--sp3);background:var(--accent2)}
  .merge .sheet{max-width:360px}
  .merge .cut{grid-template-columns:160px 1fr;gap:var(--sp3)}
  .studio .wrap{grid-template-columns:1fr;gap:var(--sp5)}
  .pricing .grid{grid-template-columns:1fr}
  .pricing figure{max-width:360px}
  .waitlist .wrap{grid-template-columns:minmax(0,1fr)}
  .waitlist .box{min-width:0}
  .colophon .cols3{grid-template-columns:1fr;gap:var(--sp3)}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .masthead .wrap{height:64px}
  .masthead nav{gap:var(--sp2)}
  .wm img{height:24px}
  .numxl{font-size:48px}
  .h1{font-size:31px}
  .anat .notes{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan{border-left:0;padding-left:0;border-top:var(--hair) solid var(--line)}
  .plan:first-child{border-top:0}
  .rooms{grid-template-columns:1fr}
  .pages{grid-template-columns:1fr}
  .merge .cut{grid-template-columns:1fr}
  .merge .cut img{max-width:200px}
  .compare{grid-template-columns:1fr}
  .compare div+div{border-left:0;padding-left:0;border-top:var(--hair) solid var(--line)}
  .waitlist .box{padding:var(--sp3)}
  .cta{gap:var(--sp2)}
}