/* public/branzine-site/css/site.css — BRANZINE v3 디자인
   방향: 차갑고 조용한 종이 위에, 도판에 다는 "주석"만 색을 갖는다. (파랑 = 주석·초점·링크 단 하나)
   글자는 Pretendard 한 가족, 굵기와 크기로만 위계를 만든다. */
:root{
  --paper:#f1f2ef; --white:#fafaf8; --paper-2:#e7e9e4;
  --ink:#16181d; --mute:#676c75; --line:rgba(22,24,29,.14);
  --signal:#2a3df0;
  --deep:#0e1116; --deep-2:#171b22; --on-deep:#eceee9; --mute-deep:#98a0ab; --deep-line:rgba(255,255,255,.14);
  --sans:'Pretendard Variable',Pretendard,'Noto Sans KR','Noto Sans CJK KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.deep :focus-visible{outline-color:#8d98ff}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:1360px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:80}.skip:focus{left:8px}
.deep{background:var(--deep);color:var(--on-deep)}
.mute{color:var(--mute)}.deep .mute{color:var(--mute-deep)}
.sm{font-size:13.5px;line-height:1.65}

/* ── 글자 ── */
.h1{font-size:clamp(38px,5.8vw,92px);line-height:1.06;letter-spacing:-.048em;font-weight:700}
.h2{font-size:clamp(28px,3.7vw,54px);line-height:1.16;letter-spacing:-.04em;font-weight:650}
.h3{font-size:clamp(20px,1.7vw,24px);line-height:1.4;letter-spacing:-.025em;font-weight:650}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--mute);max-width:34em;letter-spacing:-.01em}
.deep .lead{color:var(--mute-deep)}
.tag{font-size:13px;font-weight:500;color:var(--mute);letter-spacing:0}
.deep .tag{color:var(--mute-deep)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.ul:hover{background-size:100% 1px}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-fill{background:var(--ink);color:var(--paper)}.btn-fill:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.deep .btn{border-color:var(--on-deep);color:var(--on-deep)}.deep .btn:hover{background:var(--on-deep);color:var(--deep)}
.deep .btn-fill{background:var(--on-deep);color:var(--deep)}.deep .btn-fill:hover{background:#fff;border-color:#fff;color:var(--signal)}
.btn-s{height:38px;padding:0 16px;font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.is-pending::after{content:" · 연결 예정";font-weight:400;font-size:.85em;opacity:.6}.is-pending{cursor:default}

/* ── 상단 ── */
.top{position:sticky;top:0;z-index:60;background:rgba(241,242,239,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.mast{font-size:22px;font-weight:800;letter-spacing:-.06em}
.nav{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500}
.nav a:not(.btn){color:var(--mute);transition:color .2s}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:0 1px 0 var(--ink)}
.burger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.sheet{display:none}
@media (max-width:860px){
  .nav{display:none}.burger{display:block}
  .sheet{display:flex;position:fixed;inset:64px 0 0 0;z-index:55;background:var(--paper);flex-direction:column;padding:12px var(--gut) 40px;overflow:auto;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
  .sheet.open{visibility:visible;opacity:1}
  .sheet a{font-size:34px;font-weight:700;letter-spacing:-.04em;padding:14px 0;border-bottom:1px solid var(--line)}
  .sheet .btn{margin-top:28px;font-size:16px;height:52px;border-bottom:1px solid var(--ink);padding:0 24px}
}

/* ── 홈 첫 화면: 큰 글자 + 도판 주석(이 사이트에서 가장 기억에 남는 한 곳) ── */
.hero{padding-top:clamp(40px,7vw,96px)}
.hero-top{display:grid;gap:36px;align-items:end}
@media (min-width:960px){.hero-top{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px}}
.hero .h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero .h1 .ln>span{display:block}
.hero-side p{font-size:17px;line-height:1.7;color:var(--mute);max-width:24em}
.hero-side .row{margin-top:24px}
.plate{position:relative;margin:clamp(36px,5vw,72px) 0 0;background:#06080b;overflow:hidden}
.plate img{width:100%;height:auto;aspect-ratio:1408/676;object-fit:cover}
.plate figcaption{position:absolute;left:var(--gut);bottom:14px;font-size:12.5px;color:rgba(236,238,233,.7)}
.co{position:absolute;display:flex;align-items:center;gap:0;transform:translate(-6px,-50%);color:#fff;font-size:clamp(11.5px,1.05vw,14px);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.co .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(255,255,255,.95)}
.co .ln2{flex:none;width:clamp(28px,5vw,80px);height:1px;background:rgba(255,255,255,.85);transform-origin:left}
.co .lb{padding:5px 11px;background:rgba(14,17,22,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);border-radius:999px}
.co.r{flex-direction:row-reverse;transform:translate(calc(6px - 100%),-50%)}.co.r .ln2{transform-origin:right}
@media (max-width:600px){.co .lb{display:none}.co .ln2{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero .h1 .ln>span{animation:rise 1s var(--ease) both}
  .hero .h1 .ln:nth-child(2)>span{animation-delay:.12s}
  .hero-side{animation:fade .9s var(--ease) .35s both}
  .plate img{animation:settle 1.6s var(--ease) .2s both}
  .co .dot{animation:pop .5s var(--ease) both;animation-delay:var(--d,1.2s)}
  .co .ln2{animation:draw .6s var(--ease) both;animation-delay:calc(var(--d,1.2s) + .2s)}
  .co .lb{animation:fade .6s var(--ease) both;animation-delay:calc(var(--d,1.2s) + .6s)}
  @keyframes rise{from{transform:translateY(105%)}to{transform:none}}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes settle{from{opacity:.0;transform:scale(1.04)}to{opacity:1;transform:none}}
  @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
  @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ── 섹션 공통: 왼쪽에 이름, 오른쪽에 내용 ── */
.sec{padding:clamp(64px,9vw,128px) 0;border-top:1px solid var(--line)}
.sec.first{border-top:0}
.deep.sec,.deep .sec{border-top-color:var(--deep-line)}
.sec-in{display:grid;gap:28px}
@media (min-width:960px){.sec-in{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:56px}.sec-in>.side{position:sticky;top:96px;align-self:start}}
.side .tag{display:block;margin-bottom:6px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(28px,4vw,52px)}
.statement{font-size:clamp(24px,3vw,44px);line-height:1.38;letter-spacing:-.035em;font-weight:600;max-width:24em}
.statement span{color:var(--mute)}

/* ── 두 개의 입구 ── */
.doors{display:grid;border-top:1px solid var(--line)}
@media (min-width:860px){.doors{grid-template-columns:1fr 1fr}}
.door{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:clamp(300px,34vw,440px);padding:clamp(24px,3.4vw,48px) 0;transition:background .4s var(--ease),color .4s var(--ease)}
@media (min-width:860px){.door{padding-left:clamp(24px,3vw,44px);padding-right:clamp(24px,3vw,44px)}.door+.door{border-left:1px solid var(--line)}.doors{margin:0 calc(var(--gut) * -1);padding:0}}
.door+.door{border-top:1px solid var(--line)}@media (min-width:860px){.door+.door{border-top:0}}
.door .h2{max-width:11em}
.door ul{font-size:15px;color:var(--mute)}
.door li{padding:4px 0}
.door:hover{background:var(--ink);color:var(--paper)}
.door:hover ul,.door:hover .tag{color:#aab0b9}
.door:hover .btn{border-color:var(--paper);color:var(--paper)}
.door:hover .btn:hover{background:var(--paper);color:var(--ink)}

/* ── 목록 행(매거진) ── */
.rows{border-top:1px solid var(--ink)}
.rows li{border-bottom:1px solid var(--line)}
.rows li[hidden]{display:none}
.ri{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 20px;align-items:center;padding:18px 0;transition:padding .35s var(--ease)}
@media (min-width:860px){.ri{grid-template-columns:120px minmax(0,1fr) 110px 90px 90px;gap:28px;padding:22px 0}}
a.ri:hover{padding-left:14px}
a.ri:hover .ttl{color:var(--signal)}
.ri .th{grid-row:span 2;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
@media (min-width:860px){.ri .th{grid-row:auto}}
.ri .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.ri:hover .th img{transform:scale(1.06)}
.ri .th.empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:#8a8f98}
.ri .ttl{display:block;font-size:clamp(17px,1.6vw,22px);line-height:1.4;font-weight:650;letter-spacing:-.03em;transition:color .2s}
.ri .dek{display:block;margin-top:2px;font-size:14px;line-height:1.6;color:var(--mute)}
.ri .c{font-size:13.5px;color:var(--mute)}
.ri .c.hide-s{display:none}
@media (min-width:860px){.ri .c.hide-s{display:block}}
.ri.plan .ttl{color:#5c616a}
.ri .st{font-size:13px;font-weight:600}
.st.live{color:var(--signal)}.st.plan{color:#8a8f98;font-weight:500}
.rows-head{display:none}
@media (min-width:860px){.rows-head{display:grid;grid-template-columns:120px minmax(0,1fr) 110px 90px 90px;gap:28px;padding:0 0 10px;font-size:12.5px;color:var(--mute)}}

/* 대표 글 */
.feature{display:grid;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
@media (min-width:960px){.feature{grid-template-columns:7fr 5fr;gap:48px;align-items:end}}
.feature .im{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.feature .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a.feature:hover .im img{transform:scale(1.04)}
.feature .h2{max-width:13em}
.feature p{margin-top:14px}

/* ── 작업 타일 ── */
.tiles{display:grid;gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}@media (max-width:560px){.tiles{grid-template-columns:1fr}}
.tiles li[hidden]{display:none}
.tile{display:block}
.tile .im{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.tile .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a.tile:hover .im img{transform:scale(1.05)}
.tile .im.blank{display:flex;align-items:flex-end;padding:18px;background:repeating-linear-gradient(135deg,var(--paper-2) 0 12px,#e0e3de 12px 13px);font-size:13px;color:#7b8089}
.tile .chip{position:absolute;left:12px;top:12px;padding:3px 11px;border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:600}
.tile .chip.client{background:var(--signal);color:#fff}
.tile .cap{padding-top:14px}
.tile .ttl{display:block;font-size:19px;line-height:1.4;font-weight:650;letter-spacing:-.03em}
.tile .dek{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--mute)}
.tile .meta{display:block;margin-top:8px;font-size:13px;color:var(--mute)}
.tile.plan .ttl{color:#5c616a}

/* ── 탭 / 검색 ── */
.bar{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:space-between;margin-bottom:28px}
.tabs{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:6px 0;border:0;background:none;color:var(--mute);font-size:16px;font-weight:500;cursor:pointer;box-shadow:inset 0 -1px 0 transparent;transition:color .2s,box-shadow .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--ink);font-weight:650;box-shadow:inset 0 -2px 0 var(--ink)}
.search{width:min(100%,280px);padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:15px;border-radius:0}
.search:focus{outline:0;border-bottom-color:var(--signal)}
.empty{padding:48px 0;color:var(--mute)}

/* ── 방법(순서) ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--deep-line)}
.step{padding:28px 24px 8px 0}
.step+.step{padding-left:24px;border-left:1px solid var(--deep-line)}
.step .n{font-size:15px;font-weight:600;color:#8d98ff}
.step h3{margin:44px 0 10px;font-size:24px;letter-spacing:-.03em;font-weight:650}
.step p{font-size:15px;color:var(--mute-deep);line-height:1.7}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){padding-left:0;border-left:0}.step:nth-child(n+3){border-top:1px solid var(--deep-line);margin-top:18px}.step h3{margin-top:24px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step{padding-left:0!important;border-left:0!important}.step+.step{border-top:1px solid var(--deep-line)}}
.steps.light{border-top-color:var(--ink)}.steps.light .step,.steps.light .step+.step{border-color:var(--line)}.steps.light .n{color:var(--signal)}.steps.light p{color:var(--mute)}
@media (max-width:900px){.steps.light .step:nth-child(n+3){border-top-color:var(--line)}}

/* ── 서비스 사다리(순서) ── */
.ladder{border-top:1px solid var(--ink)}
.rung{display:grid;gap:10px 32px;padding:30px 0;border-bottom:1px solid var(--line);transition:background .3s var(--ease),padding .3s var(--ease)}
@media (min-width:900px){.rung{grid-template-columns:56px minmax(0,4fr) minmax(0,4fr) minmax(0,2.4fr);align-items:start}.rung:hover{background:var(--white);padding-left:16px;padding-right:16px}}
.rung .no{font-size:15px;font-weight:600;color:var(--signal);padding-top:6px}
.rung .who{margin-top:4px;font-size:14px;color:var(--mute)}
.rung p{font-size:16px;color:var(--mute);line-height:1.7}
.rung .px strong{display:block;font-size:20px;font-weight:650;letter-spacing:-.02em}
.rung .px small{display:block;margin:2px 0 14px;font-size:13px;color:var(--mute)}

/* ── 박스 대신 열 ── */
.cols{display:grid;gap:28px}
@media (min-width:860px){.cols.c2{grid-template-columns:1fr 1fr}.cols.c3{grid-template-columns:repeat(3,1fr)}.cols{gap:0}.cols>*{padding:0 clamp(16px,2.4vw,36px)}.cols>*:first-child{padding-left:0}.cols>*:last-child{padding-right:0}.cols>*+*{border-left:1px solid var(--line)}}
.col h3{font-size:21px;font-weight:650;letter-spacing:-.03em;margin-bottom:10px}
.col p,.col li{font-size:15.5px;color:var(--mute);line-height:1.75}
.col ul{margin-top:12px}.col li{padding:3px 0}
.col.hi h3{color:var(--signal)}
.note{padding:20px 0 20px 22px;border-left:2px solid var(--signal);font-size:15.5px;color:var(--ink)}
.note b{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--signal)}
.note ul{margin-top:6px}.note li{padding:2px 0;color:var(--mute);font-size:14.5px}
.parts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.parts div{padding:18px 18px 18px 0;font-size:14.5px;color:var(--mute);line-height:1.6}
.parts div+div{padding-left:18px;border-left:1px solid var(--line)}
.parts b{display:block;margin-bottom:6px;font-size:15px;color:var(--ink)}
@media (max-width:700px){.parts{grid-template-columns:1fr 1fr}.parts div:nth-child(3){padding-left:0;border-left:0}.parts div:nth-child(n+3){border-top:1px solid var(--line)}}

/* ── 플레이북 ── */
.pb-hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(40px,5vw,72px)}
.issue{font-size:clamp(90px,19vw,300px);line-height:.82;letter-spacing:-.07em;font-weight:800;margin-left:-.04em}
.chapters{border-top:1px solid var(--ink)}
.chapters li{border-bottom:1px solid var(--line)}
.ch{display:grid;grid-template-columns:44px 120px minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 0;transition:padding .3s var(--ease)}
@media (max-width:620px){.ch{grid-template-columns:34px 84px minmax(0,1fr)}.ch .st{grid-column:3}}
a.ch:hover{padding-left:12px}a.ch:hover .t{color:var(--signal)}
.ch .no{font-size:13.5px;font-weight:600;color:var(--mute)}
.ch .th{aspect-ratio:16/8;overflow:hidden;background:var(--paper-2)}.ch .th img{width:100%;height:100%;object-fit:cover}
.ch .t{display:block;font-size:19px;font-weight:650;letter-spacing:-.03em;transition:color .2s}
.ch .s{display:block;font-size:13.5px;color:var(--mute)}
.ch.lock .th img{filter:grayscale(1);opacity:.55}.ch.lock .t{color:#5c616a}

/* ── 글 ── */
.art-head{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(28px,4vw,48px)}
.art-head .h1{max-width:14em;font-size:clamp(34px,5vw,72px)}
.byline{margin-top:24px;font-size:14px;color:var(--mute)}
.art-grid{display:grid;gap:36px}
@media (min-width:1000px){.art-grid{grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,3fr);gap:48px}}
.prose{font-size:19px;line-height:1.95;letter-spacing:-.012em}
.prose p{margin-bottom:26px;max-width:36em}
.prose h2{margin:52px 0 16px;font-size:28px;line-height:1.35;letter-spacing:-.035em;font-weight:650}
.pull{margin:0 0 36px;font-size:clamp(22px,2.4vw,30px);line-height:1.5;letter-spacing:-.03em;font-weight:600}
.fig{margin:36px 0;padding:56px 24px;background:var(--paper-2);text-align:center;font-size:14px;color:#7b8089;line-height:1.7}
.margin{position:sticky;top:96px;align-self:start;font-size:14px}
.margin .note{margin-bottom:28px}
.formats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 36px}
.formats a,.formats span{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.formats .off{color:#8a8f98;border-style:dashed}
.formats a:hover{border-color:var(--ink)}
.pager{display:grid;gap:0;margin-top:56px;border-top:1px solid var(--ink)}
@media (min-width:700px){.pager{grid-template-columns:1fr 1fr}.pager a+a{border-left:1px solid var(--line);padding-left:28px}}
.pager a{padding:22px 0;font-size:19px;font-weight:650;letter-spacing:-.03em}.pager small{display:block;margin-bottom:4px;font-size:13px;font-weight:500;color:var(--mute)}
.pager a:hover{color:var(--signal)}

/* ── 폼 ── */
.form{display:grid;gap:30px}
.f2{display:grid;gap:30px}@media (min-width:700px){.f2{grid-template-columns:1fr 1fr}}
.fld label,.fld legend{display:block;margin-bottom:2px;font-size:13.5px;font-weight:600;color:var(--mute)}
.fld .opt{font-weight:400}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font-size:19px;letter-spacing:-.01em}
.fld select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2316181d' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 2px center no-repeat}
.fld textarea{min-height:140px;resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--signal);box-shadow:0 1px 0 var(--signal)}
.fld ::placeholder{color:#a2a6ad}
.deep .fld input,.deep .fld select,.deep .fld textarea{border-bottom-color:var(--on-deep)}
.deep .fld label{color:var(--mute-deep)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.65;color:var(--mute)}
.chk input{margin-top:4px;accent-color:var(--signal)}
.hp{position:absolute;left:-9999px}
.msg{margin-top:16px;padding:14px 18px;font-size:14.5px;background:var(--white);border-left:2px solid var(--signal)}.msg[hidden]{display:none}.msg.err{border-color:#c0392b}

/* ── 하단: 구독 + 의뢰 ── */
.close{display:grid}
@media (min-width:960px){.close{grid-template-columns:1fr 1fr}}
.close>div{padding:clamp(48px,7vw,104px) var(--gut)}
.close .l{background:var(--paper-2)}
@media (min-width:960px){.close .l{padding-left:max(var(--gut),calc((100vw - 1360px)/2 + var(--gut)))}.close .r{padding-right:max(var(--gut),calc((100vw - 1360px)/2 + var(--gut)))}}
.close .h2{margin-bottom:14px;max-width:11em}
.close .in{max-width:520px}
.close p.lead{margin-bottom:30px}

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:20px;font-weight:650;letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:10px;background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 24px;max-width:38em;color:var(--mute)}

/* ── 구조 지도(내부) ── */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.tbl th,.tbl td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:13px;font-weight:600;color:var(--mute);border-bottom-color:var(--ink)}
.tblwrap{overflow-x:auto}
.tree{margin-top:8px;padding:26px 28px;background:var(--deep);color:var(--on-deep);font-size:13.5px;line-height:2;white-space:pre;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace}
.tree .n{color:#8d98ff}.tree .l{color:#7a8190}
.ph{display:inline-block;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--signal);color:#fff}.ph.next{background:#c8cdfa;color:#1b2380}.ph.later{background:var(--paper-2);color:var(--mute)}
.flow{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;margin-top:24px;font-size:14px}
.flow span{padding:7px 14px;border:1px solid var(--line);border-radius:999px}.flow i{font-style:normal;color:var(--mute)}

/* ── 푸터 ── */
.foot{padding:clamp(48px,6vw,88px) 0 36px;font-size:14px;line-height:1.9;color:var(--mute-deep)}
.foot .grid{display:grid;gap:36px}
@media (min-width:900px){.foot .grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot .mast{display:block;margin-bottom:14px;font-size:30px;color:var(--on-deep)}
.foot h4{margin-bottom:10px;font-size:13px;font-weight:600;color:var(--on-deep)}
.foot a{display:block;color:var(--mute-deep);transition:color .2s}.foot a:hover{color:#fff}
.foot .legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--deep-line);font-size:12.5px;line-height:1.85}
.foot .legal a{display:inline;margin-right:16px}
/* 목록 행: 좁은 화면에서는 분류·상태를 제목 아래 한 줄로 */
.ri .c,.ri .st{display:none}
@media (min-width:860px){.ri .c,.ri .st{display:block}}
.ri .tx{min-width:0}
@media (max-width:859px){.ri{grid-template-columns:96px minmax(0,1fr)}.ri .th{grid-row:auto}}
/* 하위 페이지 머리 */
.ph0{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(32px,4vw,56px)}
.ph0 .lead{margin-top:22px}
.ph0 .tag{display:block;margin-bottom:18px}
.deep .ph0,.ph0.deep{padding-bottom:clamp(48px,6vw,88px)}
.sec.tight{padding:clamp(40px,5vw,72px) 0}
.sec .main>*+*{margin-top:clamp(24px,3vw,40px)}
.link-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.sec-in>*{min-width:0}
.tile .im{display:block;aspect-ratio:4/3}
.tile .im.blank{align-items:flex-end}
.tile .cap{display:block}

/* ── 의뢰 구조 보강 (v4) ── */
.hub{display:grid;gap:0;border-top:1px solid var(--ink)}
@media (min-width:760px){.hub{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.hub{grid-template-columns:repeat(4,1fr)}}
.hub .hc{display:flex;flex-direction:column;gap:14px;padding:26px 0 28px;border-bottom:1px solid var(--line)}
@media (min-width:760px){.hub .hc{padding:28px clamp(16px,2vw,28px) 30px}.hub .hc:nth-child(odd){padding-left:0}}
@media (min-width:1100px){.hub .hc{border-bottom:0}.hub .hc+.hc{border-left:1px solid var(--line)}.hub .hc:nth-child(odd){padding-left:clamp(16px,2vw,28px)}.hub .hc:first-child{padding-left:0}}
.hub .hc h3{font-size:22px;font-weight:650;letter-spacing:-.03em}
.hub .hc .cnt{font-size:13px;color:var(--mute)}
.hub .hc p{font-size:15px;color:var(--mute);line-height:1.7;flex:1}
.hub .hc .links{display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.hub .hc .links a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.hub .hc .links a:hover{color:var(--signal)}
.hub .hc .ask{color:var(--signal);font-weight:600}
.mailbox{display:grid;gap:clamp(20px,3vw,40px);padding:clamp(24px,3vw,40px);background:var(--ink);color:var(--paper);border-radius:6px;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:860px){.mailbox{grid-template-columns:1.1fr 1fr;align-items:start}}
.mailbox h2{font-size:clamp(24px,2.6vw,34px);line-height:1.3;font-weight:700;letter-spacing:-.04em}
.mailbox p{margin-top:10px;color:#aab0b9;font-size:15px;line-height:1.7}
.mailbox ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.7}
.mailbox li{padding:7px 0 7px 22px;position:relative;border-bottom:1px solid #2a2f38}
.mailbox li:last-child{border-bottom:0}
.mailbox li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--signal)}
.mailbox .row{margin-top:20px}
.mailbox .btn{border-color:var(--paper);color:var(--paper)}
.mailbox .btn-fill{background:var(--paper);color:var(--ink)}
.mailbox small{display:block;margin-top:12px;color:#8a909a;font-size:13px}
.or{display:flex;align-items:center;gap:14px;margin:0 0 clamp(24px,3vw,36px);font-size:13.5px;color:var(--mute)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.quick{margin-top:22px;font-size:14.5px;color:#aab0b9}
.quick a{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.give{display:grid;gap:0;border-top:1px solid var(--ink)}
.give .g{display:grid;gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.give .g{grid-template-columns:200px 1fr}}
.give .g b{font-size:17px;letter-spacing:-.03em}
.give .g span{font-size:15.5px;color:var(--mute);line-height:1.7}
.dock{display:none}
@media (max-width:859px){
 .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(22,24,29,.96);color:var(--paper);font-size:14px;backdrop-filter:blur(8px)}
 .dock .btn-fill{background:var(--paper);color:var(--ink);border-color:var(--paper)}
 body.has-dock{padding-bottom:64px}
}

[hidden]{display:none!important}
.mailbox .alt{margin-top:14px;font-size:13.5px;color:#8a909a}.mailbox .alt a{color:var(--paper);text-decoration:underline;text-underline-offset:4px}

/* ── v6 판매 흐름 ── */
.worry{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;border-top:1px solid var(--ink)}
.worry li{padding:20px 0 20px 28px;border-bottom:1px solid var(--line);font-size:clamp(17px,1.6vw,21px);line-height:1.6;letter-spacing:-.02em;position:relative}
.worry li::before{content:"";position:absolute;left:2px;top:30px;width:9px;height:9px;border-radius:50%;background:var(--signal)}
.worry b{font-weight:650}
.offers{display:grid;gap:0;margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--ink)}
@media (min-width:860px){.offers{grid-template-columns:1fr 1fr}}
.offer{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line)}
@media (min-width:860px){.offer{padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,40px)}.offer:first-child{padding-left:0}.offer+.offer{border-left:1px solid var(--line);padding-right:0}}
.offer h3{font-size:clamp(24px,2.4vw,32px);line-height:1.3;font-weight:700;letter-spacing:-.04em}
.offer .who{font-size:15px;color:var(--mute);line-height:1.6}
.offer ul{margin:4px 0;padding:0;list-style:none;font-size:15.5px;line-height:1.7}
.offer li{padding:5px 0 5px 20px;position:relative}
.offer li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--signal)}
.offer .px{font-size:14px;color:var(--mute);line-height:1.6;flex:1}
.offer .btn{align-self:flex-start;margin-top:6px}
.four{list-style:none;counter-reset:f;margin:clamp(20px,3vw,32px) 0 clamp(24px,3vw,36px);padding:0;border-top:1px solid var(--ink)}
.four li{counter-increment:f;padding:16px 0 16px 44px;border-bottom:1px solid var(--line);font-size:clamp(16px,1.5vw,19px);position:relative;line-height:1.55}
.four li::before{content:counter(f);position:absolute;left:0;top:15px;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:650}
.sec.ask{background:var(--paper-2)}

/* ── v7 견본 서가·진단 ── */
.shelf{margin-top:clamp(20px,3vw,36px)}
.shelf-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.shelf-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .25s,border-color .25s}
.shelf-tabs button b{font-size:15.5px;letter-spacing:-.02em}.shelf-tabs button small{font-size:12.5px;color:var(--mute)}
.shelf-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.shelf-tabs button[aria-pressed=true] small{color:#aab0b9}
.book-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:0 0 12px;font-size:14.5px;font-weight:600}
.book-bar .mute{font-weight:400;color:var(--mute)}
.book-stage{position:relative;height:clamp(460px,72vh,760px);background:#1b1e25;border-radius:8px;overflow:hidden;display:grid;place-items:center}
.book-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.book-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.book-cover{position:relative;z-index:1;max-width:30em;padding:28px;text-align:center;color:var(--paper)}
.book-cover p{margin-bottom:22px;font-size:16.5px;line-height:1.7}
.book-cover .btn:not(.btn-fill){border-color:var(--paper);color:var(--paper)}
.book-cover .btn-fill{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.book-stage.empty{background:repeating-linear-gradient(135deg,var(--paper-2) 0 12px,#e0e3de 12px 13px)}
.book-stage.empty .book-cover{color:var(--ink)}.book-stage.empty .book-cover .btn{border-color:var(--ink);color:var(--ink)}
.book+ .sm,.book>.sm{margin-top:10px}
.plain{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.plain li{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.65}
.plain b{font-weight:650}