/* 「Daily 틈새메디컬」 시범판 화면 스타일 — design/05a · 05b 목업의 <style> 에서 옮겼다(06A §2-1).
   토큰은 tokens.css(= design/05_토큰.css 그대로). 목업 전용(.mock · .print-sim)은 뺐다. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
body{margin:0;background:var(--c-paper);transition:background-color var(--t-reveal) var(--ease);color:var(--c-ink);font-family:var(--font-sans);font-size:var(--fs-ui);line-height:var(--lh-ui);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
:root{padding-top:env(safe-area-inset-top,0px)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--c-accent)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}


/* ── 위 막대 ── */
.top{height:var(--top-h);display:flex;align-items:center;gap:var(--sp-2);padding:0 calc(var(--gutter) - 8px) 0 var(--gutter);background:var(--c-paper)}
.wordmark{font-size:17px;letter-spacing:-.02em;white-space:nowrap;margin-right:auto;text-decoration:none;color:var(--c-ink)}
.wordmark .d{font-weight:var(--w-reg);color:var(--c-ink-2)}
.wordmark .n{font-weight:var(--w-bold)}
.top .icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-ctl);color:var(--c-ink)}
.top .aa{font-weight:var(--w-bold);font-size:16px;letter-spacing:-.02em}
.desk-nav{display:none}

/* ── 분야 탭(My Pick 인덱스 · 순서색) ── */
.tabs{display:flex;align-items:flex-end;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none;position:relative}
.tabs::-webkit-scrollbar{display:none}
.tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--tab-edge);pointer-events:none}
.tab{flex:0 0 auto;min-width:88px;padding:9px 14px 8px;margin-left:-6px;border:1px solid var(--tab-edge);border-bottom:0;border-radius:var(--r-tab);background:var(--tc);font-size:var(--fs-ui);font-weight:var(--w-mid);color:var(--c-ink);text-align:left;position:relative;margin-top:6px;transition:margin var(--t-fast) var(--ease)}
.tab:first-child{margin-left:0}
.tab .ord{font-size:11px;font-weight:var(--w-bold);color:var(--c-ink-2);margin-right:5px;font-variant-numeric:tabular-nums}
.tab[aria-selected="true"]{background:var(--tw);margin-top:0;padding-top:12px;z-index:2;font-weight:var(--w-bold);border-top:3px solid var(--ta,var(--c-accent))}
.tab .ord{color:var(--ta,var(--c-ink-2))}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--tw)}
.tab.plus{min-width:46px;text-align:center;background:var(--c-surface);font-weight:var(--w-reg);font-size:18px;line-height:1;padding:9px 0 8px}

/* ── 호 머리 ── */
.issue{position:relative}
.mast{background:var(--wash);transition:background-color var(--t-reveal) var(--ease);padding:var(--sp-5) var(--gutter) var(--sp-4)}
.mast h1{font-size:var(--fs-mast);font-weight:var(--w-bold);letter-spacing:var(--track-mast);line-height:1.2;margin:0}
.mast h1 .d{font-weight:var(--w-reg)}
.dateline{display:flex;gap:var(--sp-3);align-items:baseline;flex-wrap:wrap;margin:6px 0 0;font-size:var(--fs-s);color:var(--c-ink-2)}
.dateline a{font-size:var(--fs-s)}
.pilot{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--c-ink-2)}
.audio{margin-top:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);width:100%;max-width:420px;border:1px solid var(--c-line-strong);background:var(--c-surface);border-radius:var(--r-pill);padding:6px 16px 6px 6px;text-align:left}
.audio .pp{width:36px;height:36px;border-radius:50%;background:var(--c-accent-fill);color:var(--c-accent-fill-ink);display:grid;place-items:center;flex:0 0 36px}
.audio .pp svg{width:16px;height:16px;fill:currentColor;stroke:none}
.audio .t{flex:1;min-width:0}
.audio .t b{display:block;font-size:var(--fs-ui)}
.audio .t span{font-size:var(--fs-xs);color:var(--c-ink-2)}
.audio .len{font-size:var(--fs-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.audio.ask{border-style:dashed;padding:10px 8px 10px 18px;justify-content:space-between}
.audio.ask .req{border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:5px 14px;font-size:var(--fs-s);font-weight:var(--w-mid);background:var(--c-paper)}
.audio.ask.done{border-style:solid;color:var(--c-ink-2)}

/* ── 층 단추(30초 · 3분 · 전문) ── */
.layer-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--c-paper);padding:var(--sp-3) var(--gutter);transition:box-shadow var(--t-fast)}
.layer-bar.stuck{box-shadow:0 1px 0 var(--c-line),0 8px 14px -12px rgba(0,0,0,.25)}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--c-line-strong);border-radius:var(--r-ctl);background:var(--c-surface);padding:3px;max-width:420px}
.seg button{position:relative;z-index:1;padding:8px 0;font-size:var(--fs-ui);font-weight:var(--w-mid);color:var(--c-ink-2);border-radius:6px;transition:color var(--t-fast)}
.seg button[aria-pressed="true"]{color:var(--c-accent-fill-ink)}
.seg .thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:6px;background:var(--c-accent-fill);transition:transform var(--t-reveal) var(--ease)}

/* ── 본문 ── */
.issue-body{position:relative;padding:0 var(--gutter) calc(var(--bnav-h) + var(--mini-h) + 40px + env(safe-area-inset-bottom,0px));font-size:var(--fs-body);line-height:var(--lh-body)}
.issue-body>*{position:relative;z-index:1;max-width:var(--measure)}
.wm::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background-image:var(--wm-bg);background-size:300px 180px}
.secline{margin:var(--sp-6) 0 var(--sp-3);padding-top:var(--sp-2);border-top:2px solid var(--c-accent);display:flex;justify-content:space-between;align-items:baseline}
.secline h2{margin:0;font-size:var(--fs-s);font-weight:var(--w-bold);color:var(--c-accent);letter-spacing:.06em}
.today .secline{margin-top:var(--sp-4)}
ol.today-list{list-style:none;margin:0;padding:0}
ol.today-list li{display:grid;grid-template-columns:1.6em 1fr;margin:0 0 var(--sp-4)}
ol.today-list .num{font-weight:var(--w-bold);color:var(--c-accent)}
.jn{font-family:var(--font-cite);font-style:italic;color:var(--c-ink-2)}
.next-layer{display:block;width:100%;max-width:420px;margin:var(--sp-2) 0 0;border:1px solid var(--c-line-strong);border-radius:var(--r-ctl);background:var(--c-surface);padding:12px 14px;text-align:left;font-size:var(--fs-ui);line-height:1.4}
.next-layer b{display:block;color:var(--c-accent)}
.next-layer span{font-size:var(--fs-s);color:var(--c-ink-2)}

.abbr{margin:var(--sp-5) 0 0;border:1px solid var(--c-line);border-radius:var(--r-box);background:var(--c-surface);font-size:var(--fs-s);line-height:1.6}
.abbr>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:var(--w-mid);font-size:var(--fs-s)}
.abbr>button .st{color:var(--c-accent);font-weight:var(--w-reg)}
.abbr dl{margin:0;padding:0 14px 12px;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}
.abbr dt{font-weight:var(--w-bold)}
.abbr dd{margin:0;color:var(--c-ink-2)}
.abbr dl[hidden]{display:none}

.piece{margin:0 0 var(--sp-6)}
.piece-head{display:flex;gap:var(--sp-2);align-items:flex-start;justify-content:space-between}
.piece-title{margin:0;font-size:var(--fs-title);line-height:1.45;font-weight:var(--w-bold);letter-spacing:-.01em}
.star{flex:0 0 40px;height:40px;margin:-6px -10px 0 0;display:grid;place-items:center;color:var(--c-ink-3);border-radius:var(--r-ctl)}
.star svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linejoin:round}
.star[aria-pressed="true"]{color:var(--c-mark)}
.star[aria-pressed="true"] svg{fill:currentColor}
.cite{margin:6px 0 var(--sp-3);font-size:var(--fs-s);line-height:1.55;color:var(--c-ink-2)}
.cite a{color:inherit;text-decoration:underline;text-decoration-color:var(--c-line-strong);text-underline-offset:3px}
.issue-body p{margin:0 0 var(--sp-3)}
.lead{font-weight:var(--w-bold)}
.dtbl{overflow-x:auto;margin:var(--sp-3) 0 var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-box);background:var(--c-surface)}
.dtbl table{border-collapse:collapse;width:100%;font-size:var(--fs-s);line-height:1.55}
.dtbl th,.dtbl td{text-align:left;vertical-align:top;padding:8px 12px;border-top:1px solid var(--c-line)}
.dtbl tr:first-child th,.dtbl tr:first-child td{border-top:0}
.dtbl th{width:7.5em;background:var(--c-sunk);font-weight:var(--w-bold);position:sticky;left:0}
figure.fig{margin:var(--sp-4) 0;max-width:var(--measure)}
.fig-frame{position:relative;display:block;width:100%;padding:0;border:1px solid var(--c-line);border-radius:var(--r-box);background:var(--c-figure-plate);overflow:hidden;cursor:zoom-in}
.fig-frame img{display:block;width:100%;height:auto;filter:var(--figure-filter);-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.fig-frame .shield{position:absolute;inset:0;z-index:2}
.fig-frame.wm::after{z-index:3;background-image:var(--wm-bg-plate)}
figcaption{font-size:var(--fs-xs);color:var(--c-ink-3);margin-top:6px}
.piece-more{display:inline-flex;align-items:center;gap:6px;margin:var(--sp-1) 0 0;padding:8px 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-pill);font-size:var(--fs-s);font-weight:var(--w-mid);color:var(--c-accent);background:var(--c-surface)}
.empty-day{color:var(--c-ink)}

.r8{margin:var(--sp-6) 0 0;padding:var(--sp-4);border:1px solid var(--c-line-strong);border-radius:var(--r-box);background:var(--c-surface);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;font-size:var(--fs-ui)}
.r8 .yn{display:flex;gap:var(--sp-2)}
.r8 .yn button{min-width:64px;padding:8px 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-ctl);font-weight:var(--w-mid);background:var(--c-paper)}
.r8.done{color:var(--c-ink-2)}
.closing{margin:var(--sp-5) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--c-line);font-size:var(--fs-xs);line-height:1.65;color:var(--c-ink-2)}
.closing p{margin:0 0 2px!important}
.closing.italic{font-style:italic}

/* 층에 따라 보이기 */
.issue[data-layer="30"] [data-min="3"],
.issue[data-layer="30"] [data-min="full"]{display:none!important}
.issue[data-layer="3"] .piece:not(.is-full) [data-min="full"]{display:none!important}
.issue:not([data-layer="30"]) .next-layer{display:none}
.issue[data-layer="full"] .piece-more{display:none}
.reveal{animation:reveal var(--t-reveal) var(--ease) both}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 아래 고정 메뉴(S32) ── */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:var(--c-surface);border-top:1px solid var(--c-line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav button{height:var(--bnav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;color:var(--c-ink-2)}
.bnav button[aria-current="page"]{color:var(--c-ink);font-weight:var(--w-bold)}
.bnav button[aria-current="page"] svg{stroke-width:2.1}

/* ── 아래 고정 재생기 A1 ── */
.mini{position:fixed;left:8px;right:8px;bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 8px);z-index:29;height:var(--mini-h);display:flex;align-items:center;gap:var(--sp-3);padding:0 6px 0 10px;background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:14px;box-shadow:var(--shadow-float)}
.mini[hidden]{display:none}
.mini .pp{width:38px;height:38px;border-radius:50%;background:var(--c-accent-fill);color:var(--c-accent-fill-ink);display:grid;place-items:center;flex:0 0 38px}
.mini .pp svg{width:15px;height:15px;fill:currentColor;stroke:none}
.mini .meta{flex:1;min-width:0;text-align:left;font-size:var(--fs-s)}
.mini .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:3px;border-radius:2px;background:var(--c-line);margin-top:6px;position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--c-accent-fill)}
.mini .x{width:40px;height:40px;display:grid;place-items:center;color:var(--c-ink-2)}

/* ── 시트 ── */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end}
.sheet-wrap[hidden]{display:none}
.scrim{position:absolute;inset:0;background:var(--c-scrim);animation:fade var(--t-reveal) both}
.sheet{position:relative;width:100%;max-height:88vh;overflow:auto;background:var(--c-surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-sheet);padding:10px var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));animation:up var(--t-reveal) var(--ease) both}
.grab{width:40px;height:4px;border-radius:2px;background:var(--c-line-strong);margin:0 auto var(--sp-3)}
.sheet h2{font-size:var(--fs-h2);letter-spacing:-.02em;margin:0 0 var(--sp-1)}
.sheet .sub{font-size:var(--fs-s);color:var(--c-ink-2);margin:0 0 var(--sp-4)}
.sheet h3{font-size:var(--fs-s);font-weight:var(--w-bold);color:var(--c-ink-2);margin:var(--sp-4) 0 var(--sp-2)}
.opt{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.opt button{border:1px solid var(--c-line-strong);border-radius:var(--r-ctl);padding:9px 0;font-size:var(--fs-s);background:var(--c-paper)}
.opt button[aria-pressed="true"]{border:2px solid var(--c-accent);padding:8px 0;font-weight:var(--w-bold);color:var(--c-accent);background:var(--c-accent-soft)}
.preview{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-box);background:var(--c-paper);font-size:var(--fs-body);line-height:var(--lh-body)}
.btn{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:13px;border-radius:var(--r-ctl);font-weight:var(--w-bold);font-size:var(--fs-ui);border:1px solid var(--c-line-strong);background:var(--c-surface);margin-top:var(--sp-2)}
.btn.pri{background:var(--c-accent-fill);color:var(--c-accent-fill-ink);border-color:var(--c-accent-fill)}
.btn.kakao{background:#FEE500;color:rgba(0,0,0,.85);border-color:#FEE500;border-radius:12px}
.note{font-size:var(--fs-xs);color:var(--c-ink-3);margin:var(--sp-2) 0 0}
.code-row{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-2);padding:10px 14px;border:1px dashed var(--c-line-strong);border-radius:var(--r-ctl);font-size:var(--fs-s)}
.code-row .code{font-weight:var(--w-bold);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.code-row button{color:var(--c-accent);font-weight:var(--w-mid)}
.acct{font-size:var(--fs-s);color:var(--c-ink-2);margin:0 0 var(--sp-4)}
.acct b{color:var(--c-ink);font-variant-numeric:tabular-nums}
.flist{list-style:none;margin:0;padding:0}
.flist li button{width:100%;display:flex;align-items:center;gap:var(--sp-3);padding:11px 2px;border-bottom:1px solid var(--c-line);font-size:var(--fs-ui);text-align:left}
.flist .o{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:var(--w-bold);background:var(--c-accent-fill);color:var(--c-accent-fill-ink)}
.flist .o.blank{background:none;border:1px solid var(--c-line-strong)}
.tag{font-size:11px;padding:1px 7px;border-radius:var(--r-pill);border:1px solid var(--c-line-strong);color:var(--c-ink-2);margin-left:auto}

/* A2 펼친 재생기 */
.player-big .ttl{font-size:var(--fs-h2);font-weight:var(--w-bold);letter-spacing:-.02em;margin:var(--sp-2) 0 0}
.player-big .dt{font-size:var(--fs-s);color:var(--c-ink-2)}
.player-big .prog{height:5px;margin-top:var(--sp-5)}
.times{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--c-ink-3);margin-top:6px;font-variant-numeric:tabular-nums}
.ctrls{display:flex;justify-content:center;align-items:center;gap:var(--sp-6);margin:var(--sp-4) 0 var(--sp-3)}
.ctrls .skip{width:48px;height:48px;display:grid;place-items:center;position:relative;font-size:10px;font-weight:var(--w-bold)}
.ctrls .skip svg{width:30px;height:30px}
.ctrls .skip span{position:absolute;top:17px}
.ctrls .big{width:64px;height:64px;border-radius:50%;background:var(--c-accent-fill);color:var(--c-accent-fill-ink);display:grid;place-items:center}
.ctrls .big svg{width:24px;height:24px;fill:currentColor;stroke:none}

/* 그림 확대 */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(10,14,12,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 56px) 12px calc(env(safe-area-inset-bottom,0px) + 24px)}
.lightbox[hidden]{display:none}
.lightbox .plate{position:relative;max-width:min(1100px,100%);max-height:100%;overflow:auto;background:var(--c-figure-plate);border-radius:var(--r-box)}
.lightbox img{display:block;max-width:none;width:min(1100px,180vw);height:auto;filter:var(--figure-filter);user-select:none;-webkit-touch-callout:none}
@media (min-width:700px){.lightbox img{width:100%}}
.lightbox .shield{position:absolute;inset:0;z-index:2}
.lightbox .plate.wm::after{background-image:var(--wm-bg-plate)}
.lightbox .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);padding:7px 16px;font-size:var(--fs-s)}
.lightbox .hint{color:rgba(255,255,255,.7);font-size:var(--fs-xs);margin-top:10px}

.toast{position:fixed;left:50%;bottom:calc(var(--bnav-h) + var(--mini-h) + 24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--c-ink);color:var(--c-paper);padding:9px 16px;border-radius:var(--r-pill);font-size:var(--fs-s);max-width:calc(100% - 32px);text-align:center;animation:fade var(--t-reveal) both}
.toast[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}

/* 인쇄 안내(E2) */
.print-notice{display:none}
.pn{max-width:420px;font-size:15px;line-height:1.7}
.pn b{display:block;font-size:20px;margin-bottom:10px}
@media print{
  body>*{display:none!important}
  body>.print-notice{display:flex!important;min-height:60vh;align-items:center;justify-content:center;text-align:center;color:#111}   /* 종이에는 배경이 안 찍힌다 — 어두운 테마의 밝은 글색이 흐려지지 않게 */
}

/* ── 데스크톱 ── */
@media (min-width:960px){
  :root{--gutter:0px}
  .top{max-width:1040px;margin:0 auto;padding:0 24px;height:60px}
  .desk-nav{display:flex;gap:var(--sp-1);margin-right:var(--sp-4)}
  .desk-nav button{padding:8px 12px;border-radius:var(--r-ctl);color:var(--c-ink-2);font-weight:var(--w-mid)}
  .desk-nav button[aria-current="page"]{color:var(--c-ink);background:var(--c-sunk)}
  .bnav{display:none}
  .tabs,.issue{max-width:var(--col);margin:0 auto}
  .tabs{padding:0}
  .mast{padding:var(--sp-6) 32px var(--sp-5);border-radius:0 0 var(--r-box) var(--r-box)}
  .layer-bar{padding:var(--sp-3) 32px}
  .issue-body{padding:0 32px calc(var(--mini-h) + 64px)}
  .mini{left:50%;right:auto;width:min(var(--col),calc(100% - 32px));transform:translateX(-50%);bottom:20px}
  .toast{bottom:calc(var(--mini-h) + 40px)}
  .sheet-wrap{align-items:center;justify-content:center}
  .sheet{width:440px;border-radius:var(--r-sheet);padding:20px 28px 28px}
  .grab{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== 05b 화면 스타일 (05a 공통 스타일 뒤에 붙음) ===== */
.page{max-width:560px;margin:0 auto;padding:var(--sp-5) var(--gutter) calc(var(--bnav-h) + 48px + env(safe-area-inset-bottom,0px))}
.page.wide{max-width:var(--col)}
.page.nobnav{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.top .login{font-size:var(--fs-s);font-weight:var(--w-mid);color:var(--c-accent);text-decoration:underline;text-underline-offset:4px;padding:10px 8px}
.top .back{display:flex;align-items:center;gap:2px;font-size:var(--fs-s);color:var(--c-ink-2);margin-right:auto;padding:8px 4px}
.top .step{font-size:var(--fs-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums;padding-right:8px}
.top .title{font-weight:var(--w-bold);font-size:var(--fs-ui);margin-right:auto}

/* V1 */
.hero h1{font-size:34px;line-height:1.22;letter-spacing:-.03em;font-weight:var(--w-bold);margin:var(--sp-3) 0 var(--sp-3)}
.hero .lede{font-size:17px;line-height:1.6;color:var(--c-ink-2);margin:0 0 var(--sp-2)}
.hero .pilot-line{font-size:var(--fs-s);color:var(--c-ink-2);margin:0 0 var(--sp-5)}
.interest{max-width:360px}
.interest .note{margin-top:6px}
.done-box{border:1.5px solid var(--c-accent);border-radius:var(--r-box);background:var(--c-surface);padding:var(--sp-3) var(--sp-4);max-width:420px}
.done-box b{display:block;font-size:var(--fs-ui)}
.done-box span{font-size:var(--fs-s);color:var(--c-ink-2)}
.block-h{font-size:var(--fs-s);font-weight:var(--w-bold);color:var(--c-ink-2);margin:var(--sp-7) 0 var(--sp-3)}
/* 계단식 인덱스 탭 — 10개 분야, warm→cool */
.cascade{list-style:none;margin:0;padding:0}
.cascade li{position:relative;height:44px;margin-top:-8px}
.cascade li:first-child{margin-top:0}
.cascade .ear{position:absolute;top:0;height:44px;width:52%;left:calc(var(--k) * 48% / 9);background:var(--tc);border:1px solid var(--tab-edge);border-bottom:0;border-radius:var(--r-tab);padding:9px 14px 0;display:flex;gap:8px;align-items:baseline;font-size:var(--fs-ui);font-weight:var(--w-mid);box-shadow:0 -1px 0 rgba(255,255,255,.4) inset}
.cascade .ear .tag{margin-left:auto;background:var(--c-surface)}
.cascade-foot{height:14px;border:1px solid var(--tab-edge);border-top:0;border-radius:0 0 var(--r-box) var(--r-box);background:var(--tw-last)}
/* 한 호의 짜임 견본 */
.specimen{border:1px solid var(--c-line);border-radius:var(--r-box);background:var(--wash);padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.specimen .sp-sec{border-top:2px solid var(--c-accent);padding-top:6px;margin-top:var(--sp-4);display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-s)}
.specimen .sp-sec:first-child{margin-top:0}
.specimen .sp-sec b{color:var(--c-accent)}
.specimen .sp-sec span{color:var(--c-ink-2);font-size:var(--fs-xs);text-align:right}
.ph{display:block;height:9px;border-radius:3px;background:var(--c-line-strong);opacity:.55;margin:8px 0}
.ph.m{width:78%}.ph.s{width:52%}.ph.xs{width:34%}
.sp-row{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:start}
.sp-row b{font-size:var(--fs-xs);color:var(--c-accent);line-height:1.9}
.sp-tbl{display:grid;grid-template-columns:56px 1fr;gap:0 8px;margin:6px 0}
.sp-layers{display:flex;gap:6px;margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--c-ink-2);flex-wrap:wrap}
.sp-layers span{border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:2px 9px;background:var(--c-surface)}
.foot{margin-top:var(--sp-7);padding-top:var(--sp-3);border-top:1px solid var(--c-line);font-size:var(--fs-xs);color:var(--c-ink-2);display:flex;flex-wrap:wrap;gap:4px 14px}

/* 로그인 단추 — 카카오 로그인 디자인 가이드(#FEE500 · 심볼 #000 · 글 #000 85% · 반경 12px) · Google 브랜딩 가이드(흰 바탕 · 테두리 #747775 1px · 글 #1F1F1F · G 왼쪽 12px · G 뒤 10px) */
.btn.google{background:#FFFFFF;color:#1F1F1F;border-color:#747775;font-weight:500;gap:10px;padding-left:12px;padding-right:12px}
.btn .logo{width:18px;height:18px;display:block;flex:none}
.btn .logo svg{display:block}
.lnote{font-size:var(--fs-xs);color:var(--c-ink-3);margin:var(--sp-3) 0 0}

/* J1 */
.landing{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.landing h1{font-size:30px;line-height:1.25;letter-spacing:-.03em;margin:0 0 var(--sp-3)}
.org{display:inline-block;font-size:var(--fs-s);font-weight:var(--w-bold);color:var(--c-accent);background:var(--c-accent-soft);border-radius:var(--r-pill);padding:3px 12px;margin-bottom:var(--sp-3)}

/* J2 폼 */
.form h1,.page>h1{font-size:var(--fs-h2);letter-spacing:-.02em;margin:var(--sp-2) 0 var(--sp-1)}
.form .sub,.page>.sub{font-size:var(--fs-s);color:var(--c-ink-2);margin:0 0 var(--sp-5)}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer;font-size:var(--fs-ui);line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:22px;margin:0;border:1.5px solid var(--c-line-strong);border-radius:5px;background:var(--c-surface);display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--c-accent-fill);border-color:var(--c-accent-fill)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid var(--c-accent-fill-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.check input:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.check .req{font-size:var(--fs-xs);color:var(--c-accent);font-weight:var(--w-bold);margin-left:4px}
.check small{display:block;font-size:var(--fs-s);color:var(--c-ink-2)}
.check a{font-size:var(--fs-s)}
.check.big{border:1.5px solid var(--c-line-strong);border-radius:var(--r-box);padding:14px;background:var(--c-surface);font-weight:var(--w-bold)}
.field{display:block;margin:var(--sp-4) 0 0}
.field>span{display:flex;justify-content:space-between;font-size:var(--fs-s);font-weight:var(--w-mid);margin-bottom:6px}
.field>span i{font-style:normal;font-weight:var(--w-reg);color:var(--c-ink-3)}
.field input{width:100%;font:inherit;font-size:16px;color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--r-ctl);padding:11px 12px}
.field input:focus{outline:2px solid var(--c-accent);outline-offset:0;border-color:transparent}
.field .help{font-size:var(--fs-xs);color:var(--c-ink-2);margin:6px 0 0;line-height:1.6}
.namechip{display:inline-block;font-weight:var(--w-bold);color:var(--c-ink);background:var(--c-sunk);border-radius:4px;padding:0 6px;font-variant-numeric:tabular-nums}
.fold{border:1px solid var(--c-line);border-radius:var(--r-box);background:var(--c-surface);margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-s)}
.fold>button{width:100%;display:flex;justify-content:space-between;padding:11px 14px;font-weight:var(--w-mid)}
.fold>button span:last-child{color:var(--c-accent);font-weight:var(--w-reg)}
.fold dl{margin:0;padding:0 14px 12px;display:grid;grid-template-columns:5.5em 1fr;gap:6px 10px;line-height:1.55}
.fold dl[hidden]{display:none}
.fold dt{font-weight:var(--w-bold)}.fold dd{margin:0;color:var(--c-ink-2)}
.tbd{color:var(--c-mark);font-weight:var(--w-mid)}
.sep{border:0;border-top:1px solid var(--c-line);margin:var(--sp-3) 0}
.btn[disabled]{background:var(--c-sunk);color:var(--c-ink-3);border-color:var(--c-line);cursor:not-allowed}
.sticky-cta{position:sticky;bottom:0;background:linear-gradient(transparent,var(--c-paper) 30%);padding:var(--sp-4) 0 calc(var(--sp-3) + env(safe-area-inset-bottom,0px));margin-top:var(--sp-3)}

/* J3 분야 고르기 */
.pick{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pick button{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-box);background:var(--c-surface);font-size:var(--fs-ui);text-align:left;transition:background-color var(--t-fast),border-color var(--t-fast)}
.pick button[aria-pressed="true"]{background:var(--pt);border-color:var(--pa);font-weight:var(--w-bold)}
.pick .o{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--c-line-strong);display:grid;place-items:center;font-size:12px;font-weight:var(--w-bold);flex:0 0 26px;font-variant-numeric:tabular-nums}
.pick button[aria-pressed="true"] .o{background:var(--pa);border-color:var(--pa);color:var(--c-accent-fill-ink)}   /* 채운 바탕 위 글 — 두 테마 모두 토큰(어두운 7:1 이상) */
.pick .tag{margin-left:auto}
.preview-tabs{display:flex;align-items:flex-end;margin:var(--sp-4) 0 0;min-height:40px;overflow-x:auto;padding-bottom:0;border-bottom:1px solid var(--tab-edge)}
.preview-tabs .tab{min-width:0;font-size:var(--fs-s);padding:7px 11px 6px}
.preview-tabs .tab:first-child{margin-top:0;padding-top:10px;border-top:3px solid var(--ta);background:var(--tw)}
.preview-tabs .empty{font-size:var(--fs-xs);color:var(--c-ink-3);padding:0 0 8px}

/* 목록(R6 · R7) */
.list{list-style:none;margin:0;padding:0}
.list>li{border-bottom:1px solid var(--c-line)}
.list .row{display:block;width:100%;text-align:left;padding:14px 0}
.row .d{display:flex;gap:8px;align-items:center;font-size:var(--fs-s);color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.row .t{display:block;font-size:var(--fs-ui);font-weight:var(--w-bold);line-height:1.5;margin-top:3px;color:var(--c-ink)}
.row .t.quiet{font-weight:var(--w-reg);color:var(--c-ink-2)}
.row .tag{margin-left:0}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dc);flex:0 0 9px}
.listfoot{font-size:var(--fs-s);color:var(--c-ink-3);padding:var(--sp-4) 0}
.saved{display:flex;gap:6px;align-items:flex-start}
.saved .row{flex:1}
.saved .star{margin:8px -10px 0 0;color:var(--c-mark)}
.saved .star svg{fill:currentColor}
.empty-state{padding:var(--sp-7) 0;text-align:center;color:var(--c-ink-2);font-size:var(--fs-ui)}
.empty-state svg{width:30px;height:30px;color:var(--c-ink-3);margin-bottom:var(--sp-2)}

/* I1 초대하기 */
.invite-top{border-left:3px solid var(--c-accent);padding:2px 0 2px 12px;margin:0 0 var(--sp-5)}
.invite-top b{display:block;font-size:var(--fs-title);letter-spacing:-.01em}
.invite-top span{font-size:var(--fs-s);color:var(--c-ink-2)}
textarea.msg{width:100%;min-height:150px;font:inherit;font-size:16px;line-height:1.65;color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--r-box);padding:12px 14px;resize:vertical}
.linkline{font-size:var(--fs-s);color:var(--c-ink-2);margin:6px 0 0;word-break:break-all}
.quota{margin-top:var(--sp-5);font-size:var(--fs-s);color:var(--c-ink-2)}
.quota .bar{height:6px;border-radius:3px;background:var(--c-line);margin-top:8px;overflow:hidden}
.quota .bar i{display:block;height:100%;width:var(--q);background:var(--c-accent-fill)}
.quota b{color:var(--c-ink);font-variant-numeric:tabular-nums}
.chat{background:#B9C9D6;border-radius:var(--r-box);padding:var(--sp-4) var(--sp-3);margin-top:var(--sp-3)}
.chat .bub{background:#fff;color:#1a1a1a;border-radius:4px 14px 14px 14px;padding:9px 12px;font-size:13.5px;line-height:1.55;max-width:270px;margin-bottom:8px}
.ogcard{background:#fff;color:#1a1a1a;border-radius:10px;overflow:hidden;max-width:270px;border:1px solid #d9e0e6}
.ogcard .img{height:120px;display:grid;place-items:center;background:var(--og-bg,#FBECE1);font-size:20px;letter-spacing:-.02em}
.ogcard .img .d{font-weight:400;color:#555}.ogcard .img .n{font-weight:800}
.ogcard .tx{padding:9px 12px 11px;font-size:12.5px;line-height:1.5}
.ogcard .tx b{display:block;font-size:13.5px}
.ogcard .tx small{color:#777}
.cap2{font-size:var(--fs-xs);color:var(--c-ink-3);margin:var(--sp-2) 0 0}

/* M0 메뉴 · M1 내 정보 */
.menu-who{font-size:var(--fs-s);color:var(--c-ink-2);margin:0 0 var(--sp-3)}
.menu-who b{color:var(--c-ink);font-size:var(--fs-ui)}
/* 이름 표시 바로 아래 로그인 제공자 — 보조 글(.check small 결: 13.5px · 보조 글색). 이름 줄의 아래 간격을 이 줄 아래로 옮긴다 */
.menu-via{font-size:var(--fs-s);color:var(--c-ink-2);margin:calc(var(--sp-3) * -1 + 2px) 0 var(--sp-3)}
.mlist{list-style:none;margin:0;padding:0}
.mlist button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--c-line);font-size:16px;text-align:left}
.mlist small{font-size:var(--fs-xs);color:var(--c-ink-3)}
.mlist .chev{color:var(--c-ink-3)}
.mfoot{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:var(--sp-4);font-size:var(--fs-s);color:var(--c-ink-2)}
.mfoot button{color:var(--c-ink-2);text-decoration:underline;text-underline-offset:3px}
.group-h{font-size:var(--fs-s);font-weight:var(--w-bold);color:var(--c-ink-2);margin:var(--sp-6) 0 var(--sp-2)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--c-line);font-size:var(--fs-ui)}
.kv span:first-child{color:var(--c-ink-2)}
.kv button,.kv a{color:var(--c-accent);font-weight:var(--w-mid)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:var(--r-pill);background:var(--pt);font-size:var(--fs-s);font-weight:var(--w-mid)}
.chip i{width:20px;height:20px;border-radius:50%;background:var(--pa);color:var(--c-accent-fill-ink);font-style:normal;font-size:11px;display:grid;place-items:center}
/* 경고 글색 — 어두운 테마는 「기기 따라」와 「어둡게」 직접 선택에 똑같이 걸리게(tokens.css 와 같은 두 선택자) */
:root{--c-danger-ink:#A3362A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-danger-ink:#E59A8E}}
:root[data-theme="dark"]{--c-danger-ink:#E59A8E}
.danger{color:var(--c-danger-ink);font-weight:var(--w-mid);padding:12px 0;font-size:var(--fs-ui)}
.btn.danger-fill{background:#A3362A;color:#fff;border-color:#A3362A}

/* 예외 */
.notice h1{font-size:var(--fs-h2);line-height:1.35;letter-spacing:-.02em;margin:var(--sp-6) 0 var(--sp-2)}
.notice p{color:var(--c-ink-2);margin:0 0 var(--sp-5)}
@media (min-width:960px){.hero h1{font-size:46px}.hero .lede{font-size:19px}.page{padding-left:0;padding-right:0}}

/* 카카오톡 안 브라우저 */
.btn.big-ext{padding:17px;font-size:17px}
.stay{display:block;margin:var(--sp-5) auto 0;font-size:var(--fs-s);color:var(--c-ink-2);text-decoration:underline;text-underline-offset:3px;padding:8px}


/* ===== 시범판에서 더한 것(목업에 없던 원고 조각 · 상태) — 06A §3 · §5 ===== */
/* 원고 블록을 그대로 넣는 자리 */
.issue-body h2{margin:0;font-size:var(--fs-s);font-weight:var(--w-bold);color:var(--c-accent);letter-spacing:.06em}
.today-list em,.cite em{font-family:var(--font-cite);font-style:italic;color:var(--c-ink-2)}
.piece-title strong,.piece-title em{font:inherit}
.issue-body blockquote{margin:var(--sp-3) 0 var(--sp-4);padding:var(--sp-2) var(--sp-4);border-left:3px solid var(--c-accent-soft);color:var(--c-ink-2);font-size:var(--fs-s)}
.issue-body figure{margin:var(--sp-4) 0}
.dtbl tr>:first-child{width:7.5em;background:var(--c-sunk);font-weight:var(--w-bold);position:sticky;left:0}
.dtbl th+th{width:auto;background:none;position:static;font-weight:var(--w-reg)}   /* 원고 표 첫 줄이 머리 줄(th)이어도 오른쪽 칸은 05a처럼 보통 굵기 */
.dtbl a{color:inherit}
/* 약어 상자 — 05a 의 dl 처럼 「약어 | 풀이」 두 칸(마크업은 줄마다 <div><b>약어</b> <span>풀이</span></div>) */
.abbr-rows{padding:0 14px 12px;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}
.abbr-rows[hidden]{display:none}
.abbr-rows>div{display:contents}
.abbr-rows b{font-weight:var(--w-bold);color:var(--c-ink)}
.abbr-rows span{color:var(--c-ink-2)}
.closing em{font-style:normal}
.closing sub{font-size:inherit;vertical-align:baseline;line-height:inherit}   /* 원고의 <sub> 가 글을 줄이지 않게 — 05a 맺음 고지 12px */
.msg-line{font-size:var(--fs-ui);margin:var(--sp-5) 0 var(--sp-3)!important}
/* 전문 층 블록이 편 밖에 있을 때(겹쳐 보기 · 되짚기 절 등) 3분 층에서 숨긴다 */
.issue[data-layer="3"] .issue-body>[data-min="full"],
.issue[data-layer="3"] section[data-min="full"],
.issue[data-layer="3"] section>[data-min="full"]{display:none!important}
.issue[data-layer="3"] article.piece[data-min="full"]:not(.is-full){display:none!important}
/* 붙일 자리 — 스위치가 꺼져 있으면 빈칸도 남기지 않는다(06A §2-3) */
[data-slot]:empty{display:none}
/* 가입 · 로그인 */
a.btn{text-decoration:none;color:inherit}
a.btn.pri{color:var(--c-accent-fill-ink)}
a.btn.kakao{color:rgba(0,0,0,.85)}
a.btn.google{color:#1F1F1F}
.btn .logo{border:0;opacity:1}
a.stay{text-align:center}
.help{font-size:var(--fs-xs);color:var(--c-ink-2);margin:6px 0 0;line-height:1.6}
.form-err{color:var(--c-danger-ink);font-size:var(--fs-s);margin:var(--sp-3) 0 0}
.dev{display:flex;gap:6px;margin-top:var(--sp-4);font-size:var(--fs-s)}
.dev input{flex:1;font:inherit;padding:8px 10px;border:1px dashed var(--c-line-strong);border-radius:var(--r-ctl);background:var(--c-surface);color:var(--c-ink)}
.dev button{border:1px dashed var(--c-line-strong);border-radius:var(--r-ctl);padding:8px 12px}
.list a.row{text-decoration:none;color:inherit}
.ogcard .img img{width:100%;height:100%;object-fit:cover;display:block}
.mlist a,.mlist .mrow{width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--c-line);font-size:16px;text-decoration:none;color:inherit;gap:8px}
.mfoot a{color:var(--c-ink-2)}
/* P1 처리방침 · 약관 */
.legal-body{font-size:var(--fs-body);line-height:var(--lh-body);max-width:var(--measure)}
.legal-body h2{font-size:var(--fs-title);margin:var(--sp-6) 0 var(--sp-2)}
.legal-body p,.legal-body ul,.legal-body ol{margin:0 0 var(--sp-3)}
.legal-body ul,.legal-body ol{padding-left:1.3em}