/* vibecraft tech — 공개 블로그 스타일 (design/mockups/e-techblog 시안 E 에서 옮김) */
/* ===== 토큰 ===== */
:root{
  --bg:#FFFFFF; --surface:#F2F4F6; --surface-2:#E7EBEE; --ink:#13171C; --muted:#56606B;
  --accent:#0B7A50; --accent-ink:#FFFFFF; --lit:#12A866; --dim:#C3CBD2; --edge:#D9DFE4;
  --field:#13171C; --field-ink:#F2F4F6;
  --term:#0F1419; --term-ink:#D6DEE6; --term-dim:#7D8A96; --ok:#4ADE80; --warn:#FACC15; --err:#F87171; --kw:#7CC4FF; --str:#F0B37E;
  --r:20px; --gut:clamp(20px,3.2vw,48px); --maxw:1360px;
  --fs-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --fs-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-lead:clamp(1.25rem,1.12rem + .5vw,1.5rem);
  --fs-head:clamp(1.75rem,1.35rem + 1.3vw,2.25rem);
  --fs-display:clamp(2.5rem,1.5rem + 3.9vw,4.75rem);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --font:"General Sans","Pretendard Variable",Pretendard,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace; /* taste-skill-ignore: 코드 블록과 data-ui 화면 조각 전용 */
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0D1013; --surface:#161A1F; --surface-2:#1F252B; --ink:#ECEFF2; --muted:#9BA5AF;
  --accent:#2BC48A; --accent-ink:#04130C; --lit:#3BE39A; --dim:#3A434C; --edge:#262D34;
  --field:#ECEFF2; --field-ink:#0D1013; color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1013; --surface:#161A1F; --surface-2:#1F252B; --ink:#ECEFF2; --muted:#9BA5AF;
    --accent:#2BC48A; --accent-ink:#04130C; --lit:#3BE39A; --dim:#3A434C; --edge:#262D34;
    --field:#ECEFF2; --field-ink:#0D1013; color-scheme:dark;
  }
}

/* ===== 바탕 ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;transition:background-color .4s var(--ease),color .4s var(--ease)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em}

/* ===== 버튼 (한 가지 모양: 완전히 둥근 알약) ===== */
.btn{display:inline-flex;align-items:center;gap:.6rem;height:48px;padding:0 1.35rem;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:var(--fs-small);cursor:pointer;transition:transform .25s var(--ease-out),background-color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.quiet{background:var(--surface);color:var(--ink)}
.btn.quiet:hover{background:var(--surface-2)}
.link{font-weight:500;font-size:var(--fs-small);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,currentColor 25%,transparent);transition:text-decoration-color .3s var(--ease),text-underline-offset .3s var(--ease)}
.link:hover{text-decoration-color:currentColor;text-underline-offset:3px}

/* ===== 상단 ===== */
.bar{display:flex;align-items:center;gap:2.2rem;height:76px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.125rem;letter-spacing:-.02em}
.brand svg{width:37px;height:26px;flex:none}
.brand span{color:var(--muted);font-weight:500}
.nav{display:flex;gap:1.6rem;font-size:var(--fs-small);font-weight:500}
.nav a{color:var(--muted);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.bar .end{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.icon-btn{width:44px;height:44px;border-radius:999px;border:0;background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,transform .25s var(--ease-out)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px;height:18px}

/* ===== 히어로: 제목 + 실제로 동작하는 위키 지도 ===== */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;padding:clamp(40px,7vh,80px) 0 clamp(72px,10vh,120px)}
.hero h1{grid-column:1/11;grid-row:1;font-size:var(--fs-display);line-height:1.1;letter-spacing:-.035em;margin-bottom:clamp(32px,5vh,56px)}
.hero .copy{grid-column:1/5;grid-row:2}
.hero p{font-size:var(--fs-body);color:var(--ink);max-width:24rem;margin:0 0 2rem}
.hero .acts{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.hero .stage{grid-column:5/13;grid-row:2}

.graph{background:var(--surface);border-radius:var(--r);overflow:hidden;position:relative;font-size:13px;line-height:1.4;transition:background-color .4s var(--ease)}
.graph .tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 16px 0 18px}
.graph .tools b{font-weight:600;font-size:14px}
.graph .tools small{color:var(--muted);font-size:13px;margin-left:.5rem}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}
.graph .plot{position:relative;aspect-ratio:1.6/1;margin:6px 10px 0}
.graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.graph .e{fill:none;stroke:var(--edge);stroke-width:1.2;opacity:.75;transition:opacity .4s var(--ease)}
.graph .e-lit{fill:none;stroke:var(--lit);stroke-width:1.6;opacity:.45}
.graph .e-hi{fill:none;stroke:var(--ink);stroke-width:1.8;opacity:.0;transition:opacity .25s}
.graph circle{transform-box:fill-box;transform-origin:center}
.graph .n{fill:var(--dim);transition:opacity .4s var(--ease),fill .25s}
.graph .n.nb{fill:var(--ink)}
.graph .l{fill:var(--lit);stroke:var(--surface);stroke-width:4;cursor:pointer;transition:transform .3s var(--ease-out)}
.graph .l:hover,.graph .l.hot{transform:scale(1.35)}
.graph .pulse{fill:none;stroke:var(--lit);stroke-width:2;opacity:0}
.graph[data-mode="pub"] .n{opacity:.18}
.graph[data-mode="pub"] .e{opacity:.15}
.graph[data-hover] .e-hi{opacity:.55}
.labels{position:absolute;inset:0;pointer-events:none}
.labels a{position:absolute;pointer-events:auto;transform:translate(16px,-50%);white-space:nowrap;font-size:13px;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--bg);color:var(--ink);transition:background-color .2s,color .2s,transform .3s var(--ease-out)}
.labels a.left{transform:translate(calc(-100% - 16px),-50%)}
.labels a:hover,.labels a.hot{background:var(--lit);color:#04130C}
.graph .foot{display:flex;justify-content:space-between;gap:1rem;padding:8px 18px 14px;color:var(--muted);font-size:13px}
.graph .foot i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}

/* ===== 최근 글: 고정 대표 이미지 + 활성 목록 ===== */
.posts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:clamp(96px,14vh,180px) 0}
.posts .pin{grid-column:1/6;position:sticky;top:12vh;align-self:start}
.posts .side{grid-column:7/13}
.posts h2{font-size:var(--fs-head);line-height:1.2;margin-bottom:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2.2rem}
.chips button{height:38px;padding:0 15px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-size:var(--fs-small);font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,transform .2s var(--ease-out)}
.chips button span{color:var(--muted);margin-left:5px;font-variant-numeric:tabular-nums}
.chips button:hover{background:var(--surface-2)}
.chips button:active{transform:scale(.96)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chips button[aria-pressed="true"] span{color:inherit;opacity:.7}

.rows{list-style:none;margin:0;padding:0}
.row{display:block;padding:16px 0;border-radius:12px;cursor:pointer}
.row[hidden]{display:none}
.row .top{display:flex;align-items:baseline;gap:1.2rem}
.row h3{font-size:var(--fs-lead);line-height:1.35;font-weight:600;color:var(--muted);flex:1;transition:color .25s}
.row .meta{font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .more{display:none;padding-top:.7rem;max-width:36ch}
.row .more p{margin:0 0 .8rem;font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
.row .more .tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.row .more .tags span{font-size:var(--fs-small);color:var(--accent);font-weight:500}
.row .more .tags span::before{content:"#"}
.row.on h3{color:var(--ink)}
.row.on .more{display:block;animation:rise .45s var(--ease-out) both}
.row.on .badge{display:inline-flex}
.badge{display:none;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--accent);font-weight:500;margin-left:.6rem;vertical-align:middle}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lit)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 대표 이미지 무대: 글마다 그 주제의 실제 화면 조각 */
/* 일곱 장을 같은 칸에 겹친다: 무대 높이는 가장 긴 조각에 맞춰 늘어나고(최소 4:5), 아무것도 잘리지 않는다 */
.coverstage{position:relative;display:grid;aspect-ratio:4/5;border-radius:var(--r);background:var(--surface);overflow:clip;container-type:inline-size;transition:background-color .4s var(--ease)}
/* 조각은 무대 안에서만 흐른다: 절대 위치·바깥으로 삐져나가기 없음 */
.cover{grid-area:1/1;position:relative;min-width:0;opacity:0;transition:opacity .6s var(--ease);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(18px,7cqw,36px);pointer-events:none}
.cover.on{opacity:1;pointer-events:auto}
.cover .cap{margin:2px 2px 0;font-size:13px;color:var(--muted);line-height:1.5}
.cover .nudge-r{margin-right:8%}
.cover .nudge-l{margin-left:8%}

/* ── 화면 조각(data-ui): 제품 자체의 관례를 따른다 ── */
[data-ui]{font-family:var(--font)}
.term{position:relative;background:var(--term);color:var(--term-ink);border-radius:14px;font:clamp(10.5px,2.6cqw,12.5px)/1.65 var(--mono);padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.term .d{color:var(--term-dim)} .term .ok{color:var(--ok)} .term .wa{color:var(--warn)} .term .er{color:var(--err)} .term .kw{color:var(--kw)} .term .st{color:var(--str)} .term .hl{color:#0D1013;background:var(--ok);border-radius:3px;padding:0 2px}
.term{margin:0}
.term .bar3{display:flex;gap:6px;margin:-4px 0 12px}
.term .bar3 i{width:10px;height:10px;border-radius:50%;background:#2A323B}
.tick{display:inline-block;width:.9em;height:.5em;border:solid var(--ok);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-2px);margin-right:.2em}
.warn{display:inline-block;width:.95em;height:.85em;background:var(--warn);clip-path:polygon(50% 0,100% 100%,0 100%);vertical-align:-.05em;margin-right:.15em}
.panel{position:relative;min-width:0;background:var(--bg);border:1px solid var(--edge);border-radius:14px;font-size:clamp(12px,2.7cqw,13px);line-height:1.45;overflow:hidden;color:var(--ink)} /* taste-skill-ignore: data-ui 화면 조각의 자체 테두리 */
.panel .ph{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--edge);font-weight:600} /* taste-skill-ignore: data-ui */
.panel .ph small{margin-left:auto;flex:none;font-weight:400;color:var(--muted)}
.panel .pr{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--edge)} /* taste-skill-ignore: data-ui */
.panel .pr:last-child{border-bottom:0}
/* 이름표는 길면 말줄임, 오른쪽 값은 절대 줄이지 않는다 */
.panel .lb{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .pr .v{margin-left:auto;flex:none;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.panel .pr.sel{background:var(--surface)}
/* 목차 줄은 링크: 누르면 그 절로 (글 화면) 또는 그 글의 그 절로 (홈) */
.panel a.pr{color:inherit;text-decoration:none;cursor:pointer;transition:background .25s var(--ease-out)}
.panel a.pr .lb{transition:color .25s var(--ease-out),transform .35s var(--ease-out)}
.panel a.pr .go{margin-left:auto;flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;color:var(--muted);opacity:0;transform:translateX(-4px) rotate(-45deg);transition:opacity .25s var(--ease-out),transform .35s var(--ease-out)}
.art-cover .panel a.pr .go{transform:translateY(-4px) rotate(45deg)}
.panel a.pr:hover,.panel a.pr:focus-visible{background:var(--surface)}
.panel a.pr:hover .lb,.panel a.pr:focus-visible .lb{color:var(--accent);transform:translateX(2px)}
.panel a.pr:hover .go,.panel a.pr:focus-visible .go{opacity:1;color:var(--accent);transform:translateX(0) rotate(-45deg)}
.art-cover .panel a.pr:hover .go,.art-cover .panel a.pr:focus-visible .go{transform:translateY(-2px) rotate(45deg)}
.panel a.pr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel a.pr:active{background:var(--edge)}
@media (hover:none){.panel a.pr .go{opacity:.6;transform:translateX(0) rotate(-45deg)} .art-cover .panel a.pr .go{transform:translateY(-2px) rotate(45deg)}}
.panel .pr.sub{padding-left:34px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dim)}
.dot.g{background:var(--lit)} .dot.y{background:#E8A500} .dot.r{background:#E5484D}
.chk{width:16px;height:16px;border-radius:50%;background:var(--lit);flex:none;display:grid;place-items:center}
.chk::after{content:"";width:6px;height:3px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.mono{font-family:var(--mono);font-size:12px} /* taste-skill-ignore: data-ui 안의 경로·URL 표기 */

/* ===== 소개 문장 (인라인 썸네일) ===== */
.statement{padding:clamp(120px,20vh,220px) 0}
.statement p{max-width:22em;margin:0 auto;font-size:var(--fs-head);line-height:1.5;font-weight:600;letter-spacing:-.02em;text-align:center}
.th{display:inline-block;height:1.05em;vertical-align:-.2em;margin:0 .14em;border-radius:.28em;background:var(--surface);overflow:hidden;position:relative}
.th.map{width:1.7em}
.th.map svg{width:100%;height:100%}
.th.chk2{width:2.2em;display:inline-flex;align-items:center;justify-content:center;gap:.18em;font:600 .42em/1 var(--font);color:var(--accent)}
.th.chk2 .chk{width:1.1em;height:1.1em}
.th.sw{width:1.75em;display:inline-flex;align-items:center;justify-content:center}
.th.sw i{width:1.25em;height:.7em;border-radius:999px;background:var(--accent);position:relative}
.th.sw i::after{content:"";position:absolute;right:.1em;top:.1em;width:.5em;height:.5em;border-radius:50%;background:#fff;transition:transform .5s var(--ease-out)}
.statement.in .th.sw i::after{animation:flip 1.2s .6s var(--ease-out) both}
@keyframes flip{from{transform:translateX(-.55em)}to{transform:none}}

/* ===== 우리 이야기: 작업대 사진 + 편지 ===== */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;padding:clamp(40px,8vh,96px) 0 clamp(120px,18vh,200px)}
.about .letter{grid-column:2/7;max-width:34rem}
.about .mark{width:64px;height:45px;margin-bottom:28px}
.about .letter p{margin:0 0 1.15em;line-height:1.7}
.about mark{background:color-mix(in srgb,var(--lit) 28%,transparent);color:inherit;padding:0 .15em;border-radius:4px}
.about .sign{margin-top:2rem;font-size:var(--fs-lead);font-weight:600;letter-spacing:-.015em}
.about .sign small{display:block;font-size:var(--fs-small);font-weight:400;color:var(--muted);letter-spacing:0;margin-top:.2rem}
.about figure{grid-column:8/13;margin:0}
.about .ph{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.about .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:drift 22s var(--ease) infinite alternate}
@keyframes drift{to{transform:scale(1.0) translate(-1.2%,-1%)}}
.about figcaption{font-size:var(--fs-small);color:var(--muted);margin-top:.8rem;line-height:1.5}
.about figcaption a{text-decoration:underline;text-underline-offset:3px}

/* ===== 문의: 입력칸 하나 ===== */
.contact{background:var(--surface);transition:background-color .4s var(--ease)}
.contact .box{max-width:620px;margin:0 auto;padding:clamp(120px,18vh,200px) var(--gut) clamp(96px,14vh,160px)}
.contact .q{font-size:var(--fs-lead);line-height:1.4;font-weight:600;letter-spacing:-.015em;margin:0 0 28px}
.contact .q span{display:block;color:var(--muted)}
.field{position:relative}
.field input{width:100%;height:64px;border-radius:var(--r);border:0;background:var(--bg);padding:0 72px 0 22px;font-size:var(--fs-body);outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.field input:focus,.field input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.field input::placeholder{color:var(--muted)}
.field button{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--ease-out)}
.field button:hover{transform:translateX(2px)}
.field button:active{transform:scale(.94)}
.field button svg{width:20px;height:20px}
.contact .note{font-size:var(--fs-small);color:var(--muted);margin:14px 0 0}
.kv{display:grid;grid-template-columns:5rem 1fr;gap:.55rem 1rem;margin-top:64px;font-size:var(--fs-small)}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500}
.kv a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:transparent;transition:text-decoration-color .3s var(--ease)}
.kv a:hover{text-decoration-color:currentColor}

/* ===== 바닥: 타일 ===== */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:8px}
.tile{background:var(--surface);border-radius:var(--r);padding:24px;min-height:220px;display:flex;flex-direction:column;transition:background-color .4s var(--ease)}
.t-say{grid-column:1/5;justify-content:space-between}
.t-say p{margin:0;font-size:var(--fs-lead);font-weight:600;line-height:1.35;letter-spacing:-.015em;max-width:16em}
.t-say small{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.t-nav{grid-column:5/8}
.t-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.t-nav a{color:var(--ink);transition:color .2s}
.t-nav a:hover{color:var(--accent)}
.t-time{grid-column:8/10;justify-content:space-between}
.t-time b{font-size:var(--fs-lead);font-weight:600}
.t-time span{font-size:var(--fs-small);color:var(--muted)}
.t-mail{grid-column:10/13;justify-content:flex-end}
.t-mail small{font-size:var(--fs-small);color:var(--muted);margin-bottom:.4rem}
.t-mail a{font-size:1rem;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.t-word{grid-column:1/9;background:var(--field);color:var(--field-ink);min-height:320px;justify-content:center;align-items:center;overflow:hidden}
.t-word svg{width:88%;height:auto}
.t-go{grid-column:9/13;background:var(--accent);color:var(--accent-ink);min-height:320px;justify-content:space-between;transition:transform .35s var(--ease-out)}
.t-go:hover{transform:translateY(-4px)}
.t-go b{font-size:var(--fs-head);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.t-go svg{width:64px;height:64px;align-self:flex-end;transition:transform .35s var(--ease-out)}
.t-go:hover svg{transform:translate(6px,-6px)}

/* ===== 글 화면 ===== */
.view{display:none}.view.on{display:block}
.art-head{max-width:880px;padding:clamp(48px,9vh,110px) 0 40px}
.art-head h1{font-size:var(--fs-display);line-height:1.1;letter-spacing:-.035em}
.art-head .sub{font-size:var(--fs-lead);color:var(--muted);margin:1rem 0 1.8rem;font-weight:500;letter-spacing:-.01em}
.byline{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:var(--fs-small);color:var(--muted)}
.byline .who{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:500}
.byline .who svg{width:34px;height:24px}
.byline a{color:var(--accent);font-weight:500}
.art-cover{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;padding:clamp(20px,5vw,56px);min-height:clamp(260px,24vw,340px);border-radius:var(--r);background:var(--surface);overflow:hidden;container-type:inline-size;margin-bottom:clamp(56px,9vh,100px)}
.art-cover .panel{flex:1 1 340px;max-width:520px;font-size:13px}
.art-cover .term{flex:1 1 300px;max-width:440px;font-size:clamp(11px,1.6cqw,13px)}
.art-body{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:clamp(40px,6vw,96px);align-items:start}
.prose{max-width:42rem;min-width:0}
.prose>p:first-child{font-size:var(--fs-lead);line-height:1.6;letter-spacing:-.01em}
.prose h2{font-size:var(--fs-head);line-height:1.25;margin:3.2em 0 .8em;scroll-margin-top:2rem}
.prose h3{font-size:var(--fs-lead);font-weight:600;margin:2.2em 0 .6em;scroll-margin-top:2rem}
.prose p{margin:0 0 1.3em;line-height:1.75}
.prose ul{padding-left:1.2em;margin:0 0 1.3em}
.prose li{margin:.35em 0;line-height:1.7}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface);padding:.12em .4em;border-radius:6px}
.prose pre{background:var(--term);color:var(--term-ink);border-radius:var(--r);padding:22px 24px;overflow:auto;font:14px/1.7 var(--mono);margin:0 0 1.6em}
.prose pre code{background:none;padding:0;font-size:inherit;color:inherit}
.prose .callout{background:var(--surface);border-radius:var(--r);padding:22px 24px;margin:0 0 1.6em}
.prose .callout b{display:block;margin-bottom:.4rem}
.prose .callout p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-small);margin:0 0 1.6em}
.prose th,.prose td{text-align:left;padding:.7em .6em;border-bottom:1px solid var(--edge)}
.prose th{color:var(--muted);font-weight:500}
.toc{position:sticky;top:3rem;font-size:var(--fs-small)}
.toc b{display:block;margin-bottom:.8rem;font-weight:600}
.toc a{display:block;padding:.38rem 0 .38rem 1rem;color:var(--muted);position:relative;line-height:1.45;transition:color .2s}
.toc a::before{content:"";position:absolute;left:0;top:.45rem;bottom:.45rem;width:3px;border-radius:3px;background:var(--accent);transform:scaleY(0);transition:transform .3s var(--ease-out)}
.toc a.on{color:var(--ink)}
.toc a.on::before{transform:scaleY(1)}
.toc a.sub{padding-left:1.8rem}
.toc .share{display:flex;gap:.5rem;margin-top:1.4rem}
.toc .share .btn{height:38px;padding:0 1rem}
.near{margin-top:4.5rem;background:var(--surface);border-radius:var(--r);padding:28px;display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center}
.near svg{width:100%;height:auto}
.near h2{font-size:var(--fs-lead);font-weight:600;margin:0 0 .5rem;letter-spacing:-.015em}
.near p{margin:0 0 .9rem;font-size:var(--fs-small);color:var(--muted);line-height:1.6}
.near ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.near ul a{display:inline-flex;height:36px;align-items:center;padding:0 14px;border-radius:999px;background:var(--bg);font-size:var(--fs-small);font-weight:500;transition:background-color .2s,color .2s}
.near ul a:hover{background:var(--lit);color:#04130C}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 clamp(96px,14vh,160px)}
.pn a{background:var(--surface);border-radius:var(--r);padding:24px;transition:background-color .2s,transform .3s var(--ease-out)}
.pn a:hover{background:var(--surface-2);transform:translateY(-3px)}
.pn small{display:block;font-size:var(--fs-small);color:var(--muted);margin-bottom:.35rem}
.pn b{font-size:var(--fs-lead);font-weight:600;letter-spacing:-.015em;line-height:1.35}
.pn .nx{text-align:right}

/* ===== 등장 움직임 (스크립트가 있을 때만 숨긴다) ===== */
.js [data-rise]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-rise].in{opacity:1;transform:none}
.js .graph .n{opacity:0}
.js .graph.lit .n{opacity:1;transition:opacity .9s var(--ease-out) calc(var(--d,0) * 1ms)}
.js .graph[data-mode="pub"].lit .n{opacity:.18}
.js .graph .l,.js .labels a{opacity:0}
.js .graph.lit .l{opacity:1;animation:pop .6s var(--ease-out) both;animation-delay:calc(600ms + var(--i) * 120ms)}
.js .graph.lit .labels a{opacity:1;transition:opacity .5s var(--ease-out) calc(800ms + var(--i) * 120ms),background-color .2s,color .2s}
.graph.lit .pulse{animation:pulse 3.2s 2.2s var(--ease-out) infinite}
@keyframes pop{from{opacity:0;transform:scale(.96)}55%{opacity:1;transform:scale(1.45)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}

/* ===== 반응형 ===== */
@media (max-width:1100px){
  .hero h1{grid-column:1/13}
  .hero .copy{grid-column:1/13;grid-row:2}
  .hero .stage{grid-column:1/13;grid-row:3;margin-top:40px}
  .posts .pin{grid-column:1/6}
  .posts .side{grid-column:6/13}
  .about .letter{grid-column:1/7}
  .art-body{grid-template-columns:1fr}
  .toc{display:none}
  .t-say{grid-column:1/7}.t-nav{grid-column:7/13}.t-time{grid-column:1/7}.t-mail{grid-column:7/13}.t-word{grid-column:1/13}.t-go{grid-column:1/13;min-height:200px}
}
/* 900px 이하: 고정 칸 대신, 펼친 글 항목 안에 대표 이미지가 넓게 들어간다 (스크립트가 옮김) */
@media (max-width:900px){
  .posts .pin{display:none}
  .posts .side{grid-column:1/13}
  .row .more{max-width:none}
  .row .more p{max-width:40rem}
  .row .more .coverstage{aspect-ratio:auto;margin:.3rem 0 1rem;max-width:640px}
  .row .more .cover{display:none;opacity:1;padding:clamp(16px,4vw,28px)}
  .row .more .cover.on{display:flex}
}
@media (max-width:760px){
  .bar{gap:1rem;height:64px}
  .nav{display:none}
  .bar .end .btn{display:none}
  .hero{padding-top:28px}
  .graph .tools{flex-wrap:wrap}
  .labels a{display:none}
  .labels a.hot{display:inline-block}
  .graph .foot{flex-direction:column;gap:.3rem}
  .posts{padding:96px 0}
  .row{padding:14px 0}
  .row .top{flex-direction:column;gap:.25rem}
  .statement p{text-align:left;font-size:1.5rem;line-height:1.55}
  .about{padding-top:0}
  .about .letter{grid-column:1/13}
  .about figure{grid-column:1/13;margin-top:48px;order:2}
  .contact .box{padding-left:20px;padding-right:20px}
  .kv{grid-template-columns:1fr;gap:.15rem}
  .kv dd{margin-bottom:1rem}
  .tiles{grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .tile{min-height:160px;padding:20px}
  .t-word{grid-column:1/3;order:1;min-height:160px}
  .t-go{grid-column:1/3;order:2;min-height:180px}
  .t-mail{grid-column:1/3;order:3;min-height:120px}.t-nav{grid-column:1/2;order:4}.t-time{grid-column:2/3;order:5}.t-say{grid-column:1/3;order:6}
  .t-mail a{font-size:1.125rem}
  .near{grid-template-columns:1fr}
  .near svg{max-width:220px}
  .pn{grid-template-columns:1fr}
  .pn .nx{text-align:left}
}
/* 운영체제가 '움직임 줄이기'면 이동을 빼고 내용은 그대로 보인다. 시안 미리보기는 주소에 ?motion 을 붙이면 강제로 켠다 */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js:not(.force-motion) [data-rise]{opacity:1;transform:none}
  html.js:not(.force-motion) .graph .n,html.js:not(.force-motion) .graph .l,html.js:not(.force-motion) .labels a{opacity:1}
}

/* ===== 공식 로고 색 (밝은 모드 먹색 / 다크 모드 오로라) ===== */
:root{--logo-fill:#13171C;--logo-glow:none}
:root[data-theme="dark"]{--logo-fill:url(#vc-a);--logo-glow:url(#vc-ag)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo-fill:url(#vc-a);--logo-glow:url(#vc-ag)}}

/* ===== 실제 글에 나오는 요소 (시안에 없던 것) ===== */
.prose ol{padding-left:1.4em;margin:0 0 1.3em}
.prose ol li::marker{color:var(--accent);font-weight:600}
.prose h4{font-size:var(--fs-body);font-weight:600;margin:1.8em 0 .5em}
.prose blockquote{margin:0 0 1.6em;padding:4px 0 4px 20px;border-left:3px solid var(--edge);color:var(--muted)} /* taste-skill-ignore: 인용 표시 */
.prose img{border-radius:var(--r);margin:1.6em 0;background:var(--surface)}
.prose hr{border:0;height:8px;margin:3em 0;background:radial-gradient(circle,var(--dim) 1.5px,transparent 2px) center/24px 8px repeat-x} /* taste-skill-ignore: 점 세 개 구분 */
.prose strong{font-weight:600}
.prose pre.shiki{background:var(--term)!important;position:relative}
.prose pre[data-lang]::after{content:attr(data-lang);position:absolute;top:10px;right:16px;font:500 11px var(--font);color:var(--term-dim);text-transform:lowercase}
.prose pre.shiki code{counter-reset:none}
.prose .callout>b{display:block;margin-bottom:.4rem}
.prose .callout-warning,.prose .callout-caution,.prose .callout-danger{background:color-mix(in srgb,#E8A500 10%,var(--surface))}
.prose .callout-tip,.prose .callout-success{background:color-mix(in srgb,var(--lit) 10%,var(--surface))}
.prose .tagline{margin-top:3rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--fs-small)}
.prose .tagline a{text-decoration:none;font-weight:500}

/* ===== 목록 페이지 (주제·태그·404) ===== */
.listpage{max-width:880px;padding:clamp(48px,9vh,110px) 0 clamp(96px,14vh,160px)}
.listpage h1{font-size:var(--fs-display);line-height:1.1;letter-spacing:-.035em;margin-bottom:1rem}
.listpage .lead{font-size:var(--fs-lead);color:var(--muted);margin:0 0 2.6rem}
.listpage .btn{margin-top:1rem}
.rows.plain .row{padding:0}
.rows.plain .row>a{display:block;padding:18px 0;transition:transform .25s var(--ease-out)}
.rows.plain .row>a:hover{transform:translateX(4px)}
.rows.plain .row>a:hover h3{color:var(--accent)}
.rows.plain .more{display:block;max-width:44rem;animation:none}
.rows.plain .more p{color:var(--muted)}