/* site.css — auejin.com. 640px 한 단, Pretendard 한 벌, 흑백 + 링크 남색 하나.
   상호작용 층(색인·카드·선택 막대·시맨틱 줌)은 JS 가 없으면 나타나지 않는다 — 페이지는 JS 없이 완전하다. */

:root{--bg:#fff;--ink:#1a1a1a;--muted:#6b6b6b;--faint:#a3a3a3;--rule:#e6e6e6;--accent:#0b57d0;--hi:#fff5cc}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111;--ink:#e8e8e8;--muted:#9a9a9a;--faint:#666;--rule:#2a2a2a;--accent:#8ab4f8;--hi:#3a3110}}
:root[data-theme=dark]{--bg:#111;--ink:#e8e8e8;--muted:#9a9a9a;--faint:#666;--rule:#2a2a2a;--accent:#8ab4f8;--hi:#3a3110}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",Inter,-apple-system,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;font-size:15.5px;line-height:1.5}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent);color:var(--accent)}
img{max-width:100%;height:auto}
main{position:relative;max-width:640px;margin:0 auto;padding:4rem 1.25rem 2rem;touch-action:pan-y pinch-zoom}
main::after{content:"";display:block;height:45vh}
main.detail::after{height:8vh}
h1{margin:0;font-size:1.35rem;font-weight:600}
h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:2.6rem 0 .8rem}
h3{font-size:.8rem;color:var(--faint);font-weight:500;margin:1.2rem 0 .4rem}
section{scroll-margin-top:2.5rem}

/* ---- 머리글 ---- */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lang{font-size:.85rem;color:var(--muted);text-decoration:none}
.tools{display:inline-flex;align-items:center;gap:.9rem}
.zoom{display:inline-flex;gap:.15rem}
.zoom[hidden]{display:none}
.zb{width:1.7rem;height:1.7rem;display:inline-grid;place-items:center;border:1px solid var(--rule);border-radius:4px;background:none;color:var(--muted);cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.zb+.zb{margin-left:-1px;border-radius:0 4px 4px 0}
.zb:first-child{border-radius:4px 0 0 4px}
.zb:hover{color:var(--accent);border-color:var(--accent);position:relative;z-index:1}
.zb:disabled{color:var(--rule);cursor:default}
.zb:disabled:hover{border-color:var(--rule);color:var(--rule)}
.zb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.intro{margin:.9rem 0 .5rem;line-height:1.65}
.links{margin:0;color:var(--muted);font-size:.9rem}
.more-bio{margin:.6rem 0 0;font-size:.9rem}
.more-bio summary{cursor:pointer;color:var(--muted);list-style:none}
.more-bio summary::-webkit-details-marker{display:none}
.more-bio summary::after{content:" ↓";color:var(--faint)}
.more-bio[open] summary::after{content:" ↑"}
.more-bio p{margin:.6rem 0;line-height:1.65;color:var(--ink)}

/* ---- 행 ---- */
.row{--when:9.5rem;position:relative;display:grid;grid-template-columns:var(--when) 1fr;gap:0 1rem;padding:.42rem 0;border-top:1px solid var(--rule);scroll-margin-top:6rem}
main[lang=ko] .row{--when:8rem}
.row:first-of-type{border-top:0}
.row.compact{padding:.28rem 0}
.row:focus{outline:none}
.row:focus-visible .when{color:var(--accent)}
.when{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem;padding-top:.05rem;transition:color .25s}
.main{line-height:1.45}
.main a.t{text-decoration:none}
.main a.t:hover{text-decoration:underline}
.sub{color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:.15rem}
.org{font-weight:600}.role{color:var(--muted)}
.venue{color:var(--muted)}
/* 알약 — 링크(.bit)와 표지(.tag)는 한 치수·한 줄. 간격은 .pills 의 gap 하나로만 */
.pills{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25em .4em;vertical-align:baseline}
.bit,.tag{display:inline-block;font-size:.74rem;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border:1px solid var(--rule);border-radius:3px;padding:.06em .42em;white-space:nowrap;color:var(--muted)}
.tag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.award{color:var(--muted);font-size:.85rem}
.al{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-right:.35em;vertical-align:.06em}
.award a{text-decoration:none}.award a:hover{text-decoration:underline}
.bit:hover{border-color:var(--accent);color:var(--accent)}
.row.src .when{color:var(--accent)}
.row.rel .when{color:color-mix(in srgb,var(--accent) 70%,var(--muted))}
.row.rel .main .t{text-decoration:underline;text-decoration-color:var(--accent)}
.row.flash .when,.row.flash .main{color:var(--accent)}
.selbar{position:absolute;left:-.9rem;width:2px;height:0;top:0;border-radius:1px;background:var(--accent);opacity:0;pointer-events:none;
  transition:top .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),opacity .25s}
.selbar.on{opacity:1}
@media (max-width:560px){.row{grid-template-columns:1fr}.when{font-size:.8rem}}

/* ---- 행 안의 상세(카드 원본; JS 없이는 숨김, 좁은 화면에서는 클릭으로 펼침) ---- */
.more{display:none}
.row.open .more{display:block;margin:.5rem 0 .3rem;padding:.6rem .8rem;border-left:2px solid var(--rule);font-size:.88rem;color:var(--muted)}
.more img{display:block;max-width:100%;height:auto;border-radius:4px;margin-bottom:.7rem}
.more dl{margin:0;display:grid;grid-template-columns:3.9rem 1fr;gap:.4rem .5rem}
.more dt{color:var(--faint);font-size:.78rem;padding-top:.1rem}.more dd{margin:0;line-height:1.5}
.more p{margin:.6rem 0 0}
.more .hot{margin:-.25rem 0 .55rem;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.more .hot b{color:var(--ink);font-weight:600}
.more .hot .asof{color:var(--faint);font-size:.8em}
.more .lk{margin:0 0 .8rem}
.more .goto{margin-top:.8rem;font-size:.86rem}
.related{margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--rule)}
.rh{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:.55rem}
.related .grp{display:grid;grid-template-columns:3.9rem 1fr;gap:.2rem .5rem;margin-bottom:.55rem}
.related .grp:last-child{margin-bottom:0}
.related .tl{font-size:.74rem;color:var(--faint);padding-top:.12rem}
.related a{display:block;text-decoration:none;color:var(--ink);line-height:1.45;padding:.16rem 0}
.related a:hover{color:var(--accent)}
main.z0 .row .sub{display:none} main.z0 .row{padding:.22rem 0}
main.z0 #skills .row{grid-template-columns:1fr} main.z0 #skills .when{color:var(--ink);font-size:inherit}
/* 인라인 펼침(시맨틱 줌 2 · 좁은 화면의 클릭): 카드의 원본에서 행과 겹치는 것(.co)은 감추고, 남는 게 없으면 통째로 감춘다 */
main.z2 .row .more{display:block;margin:.5rem 0 .3rem;padding:.5rem .8rem;border-left:2px solid var(--rule);font-size:.88rem;color:var(--muted)}
.row.open .more .co,main.z2 .row .more .co{display:none}
.row.open .more:not(:has(> :not(.co))),main.z2 .row .more:not(:has(> :not(.co))){display:none}
.row.open .more img,main.z2 .row .more img{max-width:220px;max-height:200px;object-fit:cover;object-position:top;margin:.2rem 0 .7rem}
.row.open .more dl:not(:has(> :not(.co))),main.z2 .row .more dl:not(:has(> :not(.co))){display:none}
.row.open .more .related,main.z2 .row .more .related{margin-top:.6rem;padding-top:0;border-top:0}
.row.open .more .related .grp,main.z2 .row .more .related .grp{grid-template-columns:3.9rem 1fr;margin-bottom:.2rem}
.row.open .more .related a,main.z2 .row .more .related a{padding:.06rem 0}
.row.open .more .related .rh,main.z2 .row .more .related .rh{display:none}
.row.open .more .hot,main.z2 .row .more .hot{margin:0 0 .5rem}
.row.open .more > p:first-child,main.z2 .row .more > p:first-child{margin-top:0}
.row.open .more dl,main.z2 .row .more dl{gap:.3rem .5rem}

/* ---- 카드(인스펙터) ---- */
#inspector{position:fixed;top:4rem;right:max(1rem,calc((100vw - 640px)/2 - 340px));width:300px;max-height:calc(100vh - 6rem);z-index:2;
  overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;padding:.9rem 1rem;border:1px solid var(--rule);border-radius:8px;background:var(--bg);
  font-size:.88rem;color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s,border-color .15s;pointer-events:none}
#inspector *{min-width:0;max-width:100%}
#inspector{scrollbar-width:none} #inspector::-webkit-scrollbar{display:none}
#inspector img{max-height:200px;object-fit:cover;object-position:top}
#inspector.show{opacity:1;transform:none;pointer-events:auto}
#inspector.pinned{border-color:var(--accent)}
#inspector .more{display:block}
#inspector h4{margin:0 0 .55rem;padding-right:1.4rem;font-size:.9rem;color:var(--ink);font-weight:600}
#inspector .close{position:absolute;top:0;right:0;width:2.4rem;height:2.4rem;border:0;background:none;color:var(--faint);font-size:1.15rem;line-height:1;cursor:pointer;display:none;padding:0;border-radius:0 8px 0 8px}
#inspector .close:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
#inspector.pinned .close{display:block}
@media (max-width:1180px){#inspector{display:none}}

/* ---- 색인 ---- */
#toc{position:fixed;top:4rem;left:max(1rem,calc((100vw - 640px)/2 - 200px));width:160px;font-size:.84rem;z-index:2;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s;pointer-events:none}
#toc.show{opacity:1;transform:none;pointer-events:auto}
#toc a{display:block;color:var(--faint);text-decoration:none;padding:.18rem 0 .18rem .6rem;border-left:1px solid var(--rule);transition:color .2s}
#toc a:hover{color:var(--ink)}
#toc a.on{color:var(--ink)}
#toc .mark{position:absolute;left:-2px;top:0;width:5px;height:6px;border-radius:3px;background:var(--accent);opacity:0;transition:top .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
@media (max-width:1180px){#toc{display:none}}

/* ---- 바닥글 ---- */
footer{margin:4rem 0 2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--faint);font-size:.8rem}
footer a{text-decoration:none}

/* ---- 상세 페이지 ---- */
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:1.6rem;display:flex;justify-content:space-between;gap:1rem}
.crumb a{text-decoration:none}
.detail h1{font-size:1.5rem;line-height:1.3;text-wrap:balance}
.detail .meta{margin:.5rem 0 0;color:var(--muted);font-size:.92rem}
.detail .hot{margin:.6rem 0 0;color:var(--muted);font-variant-numeric:tabular-nums}
.detail .hot b{color:var(--ink);font-weight:600}
.detail .hot .asof{color:var(--faint);font-size:.85em}
.detail .lk{margin:.8rem 0 0}
.detail .beats{margin:1.6rem 0 0;display:grid;grid-template-columns:4.2rem 1fr;gap:.5rem .8rem}
.detail .beats dt{color:var(--faint);font-size:.8rem;padding-top:.15rem}
.detail .beats dd{margin:0;line-height:1.6}
.detail .tagline{margin:.4rem 0 0;color:var(--muted);font-size:1.02rem;line-height:1.5;text-wrap:balance}
.detail .meta .al{margin-right:.3em}
.detail .figs{margin:1.6rem 0 0;display:grid;gap:.8rem;align-items:start}
.detail .figs.n2,.detail .figs.n3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.detail .figs img{display:block;width:100%;border-radius:6px;border:1px solid var(--rule)}
.detail .figs.n2 img,.detail .figs.n3 img{aspect-ratio:4/3;object-fit:cover}
.detail .body{margin-top:2rem;line-height:1.7}
.detail .body h2{font-size:1.02rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:2rem 0 .6rem}
.detail .body h3{font-size:.95rem;color:var(--ink);font-weight:600;margin:1.4rem 0 .4rem}
.detail .body p{margin:.7rem 0}
.detail .body ul,.detail .body ol{padding-left:1.3rem}
.detail .body li{margin:.25rem 0}
.detail .body blockquote{margin:1rem 0;padding:.2rem 0 .2rem 1rem;border-left:2px solid var(--rule);color:var(--muted)}
.detail .body table{border-collapse:collapse;width:100%;font-size:.9rem;margin:1rem 0;display:block;overflow-x:auto}
.detail .body th,.detail .body td{text-align:left;vertical-align:top;padding:.4rem .5rem;border-bottom:1px solid var(--rule)}
.detail .body th{color:var(--muted);font-weight:600;font-size:.82rem}
.detail .body code{font-family:"JetBrains Mono","SF Mono",Consolas,"D2Coding",monospace;font-size:.86em;background:color-mix(in srgb,var(--accent) 7%,transparent);padding:.05em .3em;border-radius:3px}
.detail .body pre{overflow-x:auto;padding:.8rem 1rem;border:1px solid var(--rule);border-radius:6px;font-size:.84rem;line-height:1.5}
.detail .body pre code{background:none;padding:0}
.detail .body img{display:block;border-radius:6px;border:1px solid var(--rule);margin:.8rem 0}
.detail .body hr{border:0;border-top:1px solid var(--rule);margin:1.6rem 0}
.detail .related{margin-top:2.4rem}
.detail .related .grp{grid-template-columns:5rem 1fr}
.detail .doc{margin-top:2.6rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.detail .doc>.rh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:0}
.detail .doc>.rh a{text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--muted);text-decoration:none}
.detail .doc>.rh a:hover{color:var(--accent)}
.detail .doc .body{margin-top:.4rem}
.detail .doc .body>h2:first-child{margin-top:1.2rem}
.detail .docs{margin:1.8rem 0 0;font-size:.92rem}
.detail .docs a{text-decoration:none;color:var(--accent)}
.detail article>.rh{margin-bottom:.4rem}
.detail .authors b{color:var(--ink);font-weight:600}