:root{
  --bg:#06070d; --bg-2:#0b0e18; --panel:#111524; --panel-2:#161b2d;
  --line:#232a42; --fg:#e9ecf6; --muted:#98a0bb; --faint:#7680a0;
  --panel-deep:#0a0d18; --sink:#080b14; --sink-2:#121828; --well:#04050a;
  --star-a:#ffffff; --star-b:#ccffee; --star-c:#ffffdd; --star-d:#bbddff;
  --beam:#5ce1ff;

  --app-fishing:#2dd4bf; --app-tournament:#ff7a45; --app-bungae:#a3e635;
  --app-pvp:#a78bfa; --app-tkr:#ffc53d; --app-city:#60a5fa; --app-mission:#ff5470;
  --app-scrap:#4ade80; --app-rail:#f0c85a; --app-ocean:#38bdf8;
  --app-furball:#5ec8c4;

  /* "NTS Sans KR" / "NTS Mono" are our subsets of IBM Plex Sans KR / Plex Mono,
     renamed because Plex ships a Reserved Font Name (scripts/subset_fonts.py). */
  --display:"Gothic A1",system-ui,"Malgun Gothic",sans-serif;
  --sans:"NTS Sans KR",system-ui,"Malgun Gothic",sans-serif;
  /* the mono carries no Korean, so Korean in a .meta label falls through to the
     sans by per-glyph fallback. Latin stays mono, Korean stays readable. */
  --mono:"NTS Mono","NTS Sans KR",ui-monospace,"SFMono-Regular",monospace;

  --t-hero:clamp(2.6rem,9vw,6.4rem);
  --t-h2:clamp(1.6rem,4.2vw,2.6rem);
  --t-h3:1.15rem;
  --t-deck:1.0625rem;
  --t-body:.9375rem;
  --t-meta:.72rem;
  --t-num:clamp(1.8rem,4vw,2.8rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* sticky header height: 12px padding, 40px content, 12px padding. Anything else
     that sticks (the checklist progress bar) offsets by this or it tucks behind. */
  --topbar-h:64px;
  /* minimum touch target. The checklist is used outdoors with cold or wet hands,
     so its controls reserve this height rather than sizing to their text. */
  --tap:44px;
  --wrap:1160px; --gutter:24px;
  --r-card:14px; --r-chip:10px; --r-pill:999px;
  --m-swap:180ms ease;
  --m-reveal:620ms cubic-bezier(.16,1,.3,1);
}

@font-face{font-family:"Gothic A1";src:url("/fonts/gothic-a1-900.cab70f1d.woff") format("woff");font-weight:900;font-display:swap}
@font-face{font-family:"NTS Sans KR";src:url("/fonts/nts-sans-kr-400.0636f0a5.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"NTS Sans KR";src:url("/fonts/nts-sans-kr-600.47015fd9.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"NTS Mono";src:url("/fonts/nts-mono-500.81850379.woff") format("woff");font-weight:500;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:var(--t-body);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;text-wrap:balance;
  word-break:keep-all;overflow-wrap:anywhere}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
[id]{scroll-margin-top:var(--s-8)}
.meta{font-family:var(--mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);line-height:1.4}

/* CRT overlay, fixed over everything */
.crt{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}

/* ── header ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;background:rgba(6,7,13,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  max-width:var(--wrap);margin:0 auto;padding:var(--s-3) var(--gutter)}
.wordmark{font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:-.02em}
.wordmark b{color:var(--beam);font-weight:900}
/* 항목이 아홉 개까지 늘면서 한 줄에 안 들어가 낱말이 쪼개졌다("오늘의 한 / 판").
   항목 안에서는 절대 줄을 넘기지 않고, 그래도 안 들어가면 아래 브레이크포인트에서
   통째로 메뉴로 접힌다 — 줄바꿈된 메뉴는 읽기도 누르기도 어렵다. */
.nav{display:flex;gap:var(--s-4);flex-wrap:nowrap}
.nav a{font-family:var(--mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.10em;
  white-space:nowrap;text-transform:uppercase;color:var(--muted);transition:color var(--m-swap)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--beam)}
/* narrow-screen disclosure menu; hidden above 900px where .nav is visible */
.menu{display:none;position:relative}
.menu-h{margin:var(--s-3) 0 var(--s-2);font-family:var(--mono);font-size:var(--t-meta);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu-h:first-child{margin-top:0}
.menu summary{display:flex;align-items:center;gap:var(--s-2);cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:var(--s-2) var(--s-4)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{border-color:var(--beam);color:var(--beam)}
.menu[open] summary{border-color:var(--beam);color:var(--beam)}
.menu .bars{width:14px;height:9px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-panel{position:absolute;right:0;top:calc(100% + var(--s-3));z-index:50;display:grid;
  gap:var(--s-2);min-width:12rem;padding:var(--s-4);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 14px 44px rgba(0,0,0,.55)}
.menu-panel a{font-family:var(--mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color var(--m-swap)}
.menu-panel a:hover,.menu-panel a[aria-current="page"]{color:var(--beam)}

/* ── buttons ────────────────────────────────────────────── */
/* .btn 은 <a> 를 전제로 만들어졌다. <button> 에 붙이면 브라우저 기본 배경(회색)이
   그대로 남아 고스트 버튼의 글자가 배경에 묻힌다 — /avatar/ 에서 실제로 안 보였다.
   그래서 요소 종류와 상관없이 같아 보이도록 초기화한다.
   ⚠️ **:where() 로 감싸는 것이 핵심이다.** 그냥 button.btn 으로 쓰면 특이도가
   .btn-primary 보다 높아져서 primary 의 배경색까지 지워 버린다. 실제로 그렇게 써서
   /jam/ 의 '보내기' 버튼이 까만 배경에 까만 글자가 됐다. :where() 는 특이도가 0 이라
   뒤따르는 .btn-primary / .btn-ghost 가 그대로 이긴다. */
button:where(.btn){appearance:none;-webkit-appearance:none;background:none;border:0;
  cursor:pointer;font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap;font-family:var(--mono);
  font-size:var(--t-meta);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:var(--s-3) var(--s-5);
  transition:transform var(--m-swap),box-shadow var(--m-swap),border-color var(--m-swap),color var(--m-swap)}
.btn-primary{background:var(--beam);color:#06070d;box-shadow:0 0 28px rgba(92,225,255,.42)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(92,225,255,.7)}
.btn-ghost{border:1px solid var(--line);color:var(--fg);background:none}
.btn-ghost:hover{border-color:var(--beam);color:var(--beam);transform:translateY(-2px)}
.btn[aria-disabled="true"]{color:var(--faint);border-color:var(--line);background:none;
  box-shadow:none;pointer-events:none}
.btn-sm{padding:var(--s-2) var(--s-4)}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:var(--s-9) 0 var(--s-8);min-height:min(100svh,880px);display:flex;align-items:center}
.aurora{position:absolute;inset:-20%;z-index:-3;will-change:transform;
  background:
    radial-gradient(38% 32% at 22% 28%,rgba(45,212,191,.20),transparent 70%),
    radial-gradient(34% 30% at 78% 24%,rgba(167,139,250,.20),transparent 70%),
    radial-gradient(40% 34% at 60% 78%,rgba(92,225,255,.18),transparent 70%),
    radial-gradient(30% 26% at 14% 76%,rgba(255,122,69,.14),transparent 70%);
  filter:blur(24px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(2.5%,-2%,0) scale(1.1)}}
.stars{position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:radial-gradient(1px 1px at 18% 26%,var(--star-a),transparent),
    radial-gradient(1px 1px at 72% 18%,var(--star-b),transparent),
    radial-gradient(1px 1px at 42% 68%,var(--star-a),transparent),
    radial-gradient(1px 1px at 86% 58%,var(--star-c),transparent),
    radial-gradient(1px 1px at 8% 84%,var(--star-a),transparent),
    radial-gradient(1px 1px at 56% 44%,var(--star-d),transparent);
  background-size:340px 340px;animation:pan 60s linear infinite}
@keyframes pan{to{background-position:340px 340px}}
.hero-fade{position:absolute;inset:auto 0 0;height:180px;z-index:-1;
  background:linear-gradient(to top,var(--bg),transparent)}
.hero-in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.hero h1{font-size:var(--t-hero);line-height:1.02;letter-spacing:-.035em;
  text-shadow:0 0 24px rgba(92,225,255,.28),0 0 72px rgba(92,225,255,.16)}
.hero .deck{color:var(--muted);font-size:var(--t-deck);max-width:36em;margin:var(--s-5) auto 0}
.hero .actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6)}
.eyebrow{margin-bottom:var(--s-4);color:var(--beam)}

/* the signature device: the five real app icons, lit in their own colours */
.shelf{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,3.4vw,32px);
  flex-wrap:wrap;margin-top:var(--s-8)}
.shelf a{display:grid;justify-items:center;gap:var(--s-2);width:clamp(74px,13vw,104px);
  transition:transform var(--m-swap)}
.shelf a:hover{transform:translateY(-6px)}
.shelf .plate{width:100%;aspect-ratio:1;border-radius:var(--r-chip);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 30px -6px var(--acc);
  animation:bob 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bob{50%{transform:translateY(-7px)}}
.shelf img{width:100%;height:100%;object-fit:cover}
.shelf .mono-plate{display:grid;place-items:center;font-family:var(--display);font-weight:900;
  font-size:clamp(.95rem,2.4vw,1.3rem);color:#06070d;background:var(--acc);border-color:transparent}
.shelf .cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);transition:color var(--m-swap);text-align:center;line-height:1.35}
.shelf a:hover .cap{color:var(--acc)}
.scrollcue{margin-top:var(--s-7);color:var(--faint);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(7px);opacity:.45}}

/* ── marquee ────────────────────────────────────────────── */
.ribbon{border-block:1px solid var(--line);background:linear-gradient(90deg,var(--sink),var(--sink-2),var(--sink));
  overflow:hidden;padding-block:var(--s-3)}
.ribbon-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ribbon-track span{font-family:var(--mono);font-size:var(--t-meta);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding-inline:var(--s-5);
  color:var(--acc,var(--faint))}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ───────────────────────────────────────────── */
section{padding-block:var(--s-7)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);
  flex-wrap:wrap;margin-bottom:var(--s-5)}
.head h2{font-size:var(--t-h2);letter-spacing:-.02em}
.head .deck{color:var(--muted);max-width:44em;margin-top:var(--s-3)}

/* ── lead feature ───────────────────────────────────────── */
.feature{position:relative;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;background:linear-gradient(160deg,var(--panel),var(--panel-deep))}
.feature::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-200px;
  border-radius:50%;background:var(--acc);filter:blur(90px);opacity:.16;pointer-events:none}
.feature-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr);
  gap:var(--s-7);align-items:center;padding:var(--s-7)}
.feature h2{font-size:var(--t-h2);letter-spacing:-.02em}
.feature .deck{color:var(--muted);margin-top:var(--s-4)}
.feature .actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
/* ── 오늘의 한 줄 ─────────────────────────────────────── */
.oneline{margin:var(--s-6) 0 0;padding:var(--s-6);border:1px solid var(--line);
  border-radius:var(--r-card);background:rgba(255,255,255,.03)}
.oneline blockquote{margin:0;font-size:clamp(1.3rem,4.2vw,2rem);line-height:1.5;
  font-weight:600;letter-spacing:-.01em}
.oneline figcaption{display:flex;justify-content:space-between;gap:var(--s-4);
  margin-top:var(--s-4);flex-wrap:wrap}
/* ── 내 물가 계산기 ─────────────────────────────────────── */
table.cpi{width:100%;border-collapse:collapse;min-width:34rem}
table.cpi th{text-align:left;font-family:var(--mono);font-size:var(--t-meta);
  color:var(--muted);font-weight:500;padding:var(--s-2) var(--s-3)}
table.cpi td{padding:6px var(--s-3);border-top:1px solid var(--line)}
table.cpi input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);color:inherit;font:inherit}
table.cpi input[type=number]{text-align:right}
table.cpi .c-rate{font-family:var(--mono);text-align:right;white-space:nowrap}
table.cpi .c-del{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
table.cpi .c-del:hover{color:var(--fg)}
.cpi-big{font-family:var(--mono);font-size:clamp(2.2rem,7vw,3.4rem);font-weight:700;
  color:var(--beam);margin:0 0 var(--s-3)}
/* ── 물때 달력 ─────────────────────────────────────────── */
.tidelist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tidelist li{display:grid;grid-template-columns:5.2rem 3.4rem 1fr 3rem auto;align-items:center;
  gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-chip);background:rgba(255,255,255,.02)}
.tidelist li.on{border-color:var(--beam);background:rgba(92,225,255,.07)}
.tidelist .d{font-family:var(--mono);font-size:var(--t-meta);color:var(--muted)}
.tidelist .d b{color:var(--fg)}
.tidelist .n{font-weight:600}
.tidelist .bar{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.tidelist .bar i{display:block;height:100%;background:var(--beam)}
.tidelist .p{font-family:var(--mono);font-size:var(--t-meta);color:var(--muted);text-align:right}
.tidelist .t{font-family:var(--mono);font-size:var(--t-meta);color:var(--beam)}
@media (max-width:560px){
  .tidelist li{grid-template-columns:4.4rem 3rem 1fr 2.6rem;row-gap:4px}
  .tidelist .t{grid-column:1 / -1}
}
/* ── 히어로의 '새로 생긴 것' 타일 ─────────────────────────
   메뉴에 항목을 늘렸더니 늘어난 티가 안 났다(사용자 제보). 메뉴는 이미 아는 사람이
   찾는 곳이지 새로 온 사람이 훑는 곳이 아니다. 그래서 첫 화면에서 손이 먼저 닿는
   자리에 큼직하게 둔다. 제목만이 아니라 한 줄 설명을 같이 넣는 이유는, 이름만으로는
   '오늘의 한 판'이 무엇인지 알 수 없기 때문이다. */
.newrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
  margin:var(--s-5) auto 0;max-width:920px;text-align:left}
@media (max-width:900px){.newrow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.newrow{grid-template-columns:1fr}}
.newrow a{display:block;padding:var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-card);background:rgba(255,255,255,.03);
  transition:transform var(--m-swap),border-color var(--m-swap),background var(--m-swap)}
.newrow a:hover{transform:translateY(-3px);border-color:var(--beam);background:rgba(92,225,255,.07)}
.newrow b{display:block;font-size:var(--t-body);letter-spacing:-.01em}
.newrow span{display:block;margin-top:var(--s-2);color:var(--muted);font-size:var(--t-meta);line-height:1.5}
.newtag{display:inline-block;margin-top:var(--s-6);padding:2px 10px;border-radius:var(--r-pill);
  border:1px solid var(--beam);color:var(--beam);font-family:var(--mono);
  font-size:var(--t-meta);letter-spacing:.14em}

/* ── 소개 글과 같은 주소에서 실행되는 게임 ─────────────── */
.playframe{margin-top:var(--s-4);border:1px solid var(--line);border-radius:var(--r-chip);
  background:var(--bg-2);padding:var(--s-6);text-align:center}
.playframe.on{padding:0;overflow:hidden;background:#000}
.playframe iframe{display:block;width:100%;height:min(78vh,720px);border:0}
.playframe.on .meta{display:block;padding:var(--s-3);background:var(--bg-2)}
.playframe .meta{margin-top:var(--s-3)}
.shot{margin:0;border-radius:var(--r-chip);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(0,0,0,.6)}
/* pixelated is opt-in per screenshot: pixel art asks for it, 3D scenes must not get it */
.shot img{width:100%}
.shot.px img{image-rendering:pixelated}
.shot figcaption{padding:var(--s-3) var(--s-4);background:var(--sink);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.detail-shot{margin-bottom:var(--s-6)}
@media (min-width:901px){.feature.rev .feature-in .shot{order:-1}}

/* ── app cards ──────────────────────────────────────────── */
.cards{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,var(--panel),var(--panel-deep));border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-5);
  transition:transform var(--m-swap),border-color var(--m-swap),box-shadow var(--m-swap)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--acc);opacity:.85}
.card::after{content:"";position:absolute;width:200px;height:200px;right:-80px;top:-80px;
  border-radius:50%;background:var(--acc);filter:blur(60px);opacity:.13;
  transition:opacity var(--m-swap);pointer-events:none}
.card:hover{transform:translateY(-5px);border-color:var(--acc);box-shadow:0 14px 44px rgba(0,0,0,.55)}
.card:hover::after{opacity:.28}
/* 상태 뱃지는 줄바꿈을 안 하므로(white-space:nowrap) 문구가 길면 제 폭을 그대로
   가져간다. 그때 제목 칸이 한 글자 폭까지 찌그러지는데, 본문 기본값이
   overflow-wrap:anywhere 라 "LiquidPvP" 가 글자마다 줄이 바뀌어 세로로 섰다
   (실측: 제목 폭 25px · 높이 166px). 두 가지로 막는다 — 제목은 anywhere 대신
   break-word 로 되돌려 낱말 폭 아래로는 못 줄어들게 하고, 줄 자체를 접을 수 있게
   해서 뱃지가 자리를 못 얻으면 아랫줄로 내려가게 한다. */
.card-top{position:relative;display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.card-top>div{flex:1 1 9rem;min-width:0}
.card h3,.card .label{overflow-wrap:break-word}
.card .plate{width:56px;height:56px;flex:none;border-radius:var(--r-chip);overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2)}
.card .plate img{width:100%;height:100%;object-fit:cover}
.card .mono-plate{display:grid;place-items:center;font-family:var(--display);font-weight:900;
  font-size:.95rem;color:#06070d;background:var(--acc);border-color:transparent}
.card h3{font-size:var(--t-h3);letter-spacing:-.01em}
.card-link{transition:color var(--m-swap)}
.card:hover .card-link,.card-link:hover{color:var(--acc)}
.card .label{margin-top:var(--s-1)}
.card .status{align-self:flex-start;margin-left:auto;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--acc);border-radius:var(--r-pill);padding:var(--s-1) var(--s-3);opacity:.9;white-space:nowrap}
.card .sum{position:relative;color:var(--muted);margin-top:var(--s-4)}
.tags{position:relative;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0 var(--s-5)}
.tags span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s-1) var(--s-3)}
.card .links{position:relative;display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:auto}
.empty{padding-block:var(--s-6);text-align:center}

/* ── ledger ─────────────────────────────────────────────── */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-4)}
.stat{background:linear-gradient(160deg,var(--panel),var(--panel-deep));border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-5);text-align:center;
  transition:transform var(--m-swap),border-color var(--m-swap)}
.stat:hover{transform:translateY(-4px);border-color:var(--acc,var(--beam))}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:var(--t-num);
  line-height:1.05;color:var(--acc,var(--beam));text-shadow:0 0 26px currentColor}
.stat span{color:var(--muted);font-size:.86rem}
.note{margin-top:var(--s-6);color:var(--muted);max-width:46em}

/* ── log ────────────────────────────────────────────────── */
.log{display:grid;gap:var(--s-3)}
.log-item{display:grid;grid-template-columns:9em minmax(0,1fr);gap:var(--s-5);
  background:linear-gradient(160deg,var(--panel),var(--panel-deep));border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-5);transition:border-color var(--m-swap)}
.log-item:hover{border-color:var(--beam)}
.log-item h3{font-size:var(--t-h3)}
.log-item p{color:var(--muted);margin-top:var(--s-2)}

/* ── inner pages ────────────────────────────────────────── */
.page{padding-block:var(--s-8)}
.page-head{border-bottom:1px solid var(--line);padding-bottom:var(--s-5);margin-bottom:var(--s-6)}
.page-head h1{font-size:var(--t-h2);letter-spacing:-.02em}
.page-head p{color:var(--muted);margin-top:var(--s-3);max-width:46em}
.back{display:inline-block;margin-bottom:var(--s-5);color:var(--muted);transition:color var(--m-swap)}
.back:hover{color:var(--beam)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:var(--s-7)}
.detail h2{font-family:var(--display);font-size:var(--t-h3);margin-top:var(--s-6)}
.detail h2:first-child{margin-top:0}
.detail p{color:var(--muted);margin-top:var(--s-3)}
.detail ul{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.detail li{color:var(--muted);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:var(--s-3) var(--s-4)}
.detail .actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
/* 관련 글 카드: 제목은 읽는 색으로 올리고 요약은 본문 크기로 둔다. 링크 하나짜리
   목록과 달리 여기서는 요약이 실제로 읽히는 문장이라 muted 로 눌러 두면 안 된다. */
.postsum li{display:grid;gap:var(--s-1)}
.postsum li a{font-weight:600;color:var(--fg);text-decoration:none}
.postsum li a:hover{color:var(--beam)}
.postsum li p{margin:0;color:var(--muted);line-height:1.65}
.bigplate{width:100%;max-width:260px;aspect-ratio:1;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2);
  box-shadow:0 0 44px -10px var(--acc),0 18px 50px rgba(0,0,0,.6)}
.bigplate img{width:100%;height:100%;object-fit:cover}
.bigplate.mono-plate{display:grid;place-items:center;font-family:var(--display);font-weight:900;
  font-size:clamp(2rem,6vw,3.2rem);color:#06070d;background:var(--acc);border-color:transparent}
.prose p{color:var(--muted);margin-top:var(--s-4);max-width:46em}

/* ── devlog ─────────────────────────────────────────────── */
.post-cards{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.post-card{display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--panel),var(--panel-deep));border:1px solid var(--line);
  border-radius:var(--r-card);transition:transform var(--m-swap),border-color var(--m-swap)}
.post-card:hover{transform:translateY(-5px);border-color:var(--beam)}
.post-card .thumb{aspect-ratio:16/9;background:var(--sink);border-bottom:1px solid var(--line)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .thumb.px img{image-rendering:pixelated}
.post-card .post-card-in{display:flex;flex-direction:column;flex:1;padding:var(--s-5)}
.post-card h3{font-size:var(--t-h3)}
.post-card .sum{color:var(--muted);margin-top:var(--s-3);flex:1}
.post-card .post-meta{margin-top:var(--s-4)}
.post-meta{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-3);white-space:nowrap}
.crumbs{margin-bottom:var(--s-5)}
.crumbs a{color:var(--muted);transition:color var(--m-swap)}
.crumbs a:hover{color:var(--beam)}
.crumbs .sep{color:var(--faint);padding-inline:var(--s-2)}

/* long-form article body: readable measure on the same dark canvas */
.article{max-width:44em}
.article-head h1{font-size:var(--t-h2);letter-spacing:-.02em}
.article-head .post-meta{margin-top:var(--s-4)}
.article-head{border-bottom:1px solid var(--line);padding-bottom:var(--s-5);margin-bottom:var(--s-6)}
.article-body p{color:var(--muted);margin-top:var(--s-4)}
.article-body h2{font-size:1.3rem;margin-top:var(--s-7)}
.article-body h3{font-size:var(--t-h3);margin-top:var(--s-6)}
.article-body ul,.article-body ol{margin:var(--s-4) 0 0;padding-left:1.3em;color:var(--muted);
  display:grid;gap:var(--s-2)}
.article-body blockquote{margin:var(--s-5) 0 0;padding:var(--s-3) var(--s-5);
  border-left:2px solid var(--beam);background:var(--sink);border-radius:0 var(--r-chip) var(--r-chip) 0}
.article-body blockquote p{margin:0}
.article-body pre{margin:var(--s-4) 0 0;padding:var(--s-4);background:var(--sink);
  border:1px solid var(--line);border-radius:var(--r-chip);overflow-x:auto}
.article-body code{font-family:var(--mono);font-size:.85em;color:var(--fg)}
.article-body p code,.article-body li code{background:var(--sink-2);border:1px solid var(--line);
  border-radius:4px;padding:0 var(--s-1)}
.article-body a{color:var(--beam)}
.article-body img{border-radius:var(--r-chip);border:1px solid var(--line);margin-top:var(--s-4)}
.table-scroll{overflow-x:auto;margin-top:var(--s-4)}
.table-scroll table{border-collapse:collapse;width:100%;min-width:480px;font-size:.9rem}
.table-scroll th,.table-scroll td{border:1px solid var(--line);padding:var(--s-2) var(--s-3);
  text-align:left;color:var(--muted)}
.table-scroll th{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;
  text-transform:uppercase;background:var(--sink)}
.article .shot{margin-top:var(--s-5)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-7)}
.post-nav a{display:block;border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4);transition:border-color var(--m-swap)}
.post-nav a:hover{border-color:var(--beam)}
.post-nav .dir{display:block}
.post-nav strong{display:block;margin-top:var(--s-2);font-family:var(--display)}
.post-nav .next{text-align:right}
/* release notes: visually lighter than long-form posts, no own URL by design */
.note-list{display:grid;gap:var(--s-2)}
.note-item{display:grid;grid-template-columns:8em minmax(0,1fr);gap:var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-chip);padding:var(--s-3) var(--s-4)}
.note-item h3{font-size:.95rem}
.note-item p{color:var(--muted);margin-top:var(--s-1);font-size:.9rem}
@media (max-width:640px){.note-item{grid-template-columns:1fr;gap:var(--s-1)}
  .post-nav{grid-template-columns:1fr}}

/* ── footer ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:var(--well);margin-top:var(--s-8)}
.foot-in{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:var(--s-6);
  max-width:var(--wrap);margin:0 auto;padding:var(--s-7) var(--gutter) var(--s-5)}
.foot-in strong{font-family:var(--display);font-weight:900;font-size:var(--t-h3)}
.foot-in p{color:var(--faint);margin-top:var(--s-3);max-width:30em}
.foot-links{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
.foot-links a,.foot-links span{color:var(--muted);align-self:flex-start;transition:color var(--m-swap)}
.foot-links a:hover{color:var(--beam)}
/* the admin link is for one person; it sits quieter than the visitor links */
.plush-strip{margin:var(--s-6) calc(-1 * var(--s-4)) calc(-1 * var(--s-5));border-top:1px solid var(--line)}
.plush-strip iframe{display:block;width:100%;height:150px;border:0;background:#0b1418}
.plush-strip-cap{margin:var(--s-2) var(--s-4) 0;font-size:.82rem;color:var(--faint);text-align:center}
@media (prefers-reduced-motion:reduce){.plush-strip iframe{display:none}}
.colophon{border-top:1px solid var(--line);max-width:var(--wrap);margin:0 auto;
  padding:var(--s-4) var(--gutter) var(--s-7)}
.colophon p{color:var(--faint)}

/* ── search ─────────────────────────────────────────────── */
.sq-form{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-5)}
.sq-form label{width:100%}
.sq-form input{flex:1;min-width:200px;min-height:var(--tap);font-family:var(--sans);
  font-size:1rem;color:var(--fg);background:var(--sink);border:1px solid var(--line);
  border-radius:var(--r-chip);padding:var(--s-2) var(--s-4);
  transition:border-color var(--m-swap)}
.sq-form input:focus{outline:none;border-color:var(--beam)}
.sq-form input::placeholder{color:var(--faint)}
.sq-form button{min-height:var(--tap)}
.sq-out{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-2)}
.sq-item a{display:block;border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4);transition:border-color var(--m-swap),transform var(--m-swap)}
.sq-item a:hover{border-color:var(--beam);transform:translateY(-2px)}
.sq-item strong{display:block;font-family:var(--display);font-size:var(--t-h3);
  margin-top:var(--s-2)}
.sq-item .sq-sum{display:block;color:var(--muted);margin-top:var(--s-2)}
.sq-item .sq-snip{display:block;color:var(--faint);font-size:.875rem;margin-top:var(--s-2)}

/* ── feedback ───────────────────────────────────────────── */
/* /feedback/ 와 /admin/feedback/ 가 같이 쓴다. 고르는 칸(종류 · 별점)은 진짜 radio 를
   투명하게 덮어 둔다 — 겉모습만 단추로 그리면 키보드 화살표와 화면 읽기가 사라진다. */
.fb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fb-panel{margin-top:var(--s-6);padding:var(--s-6);max-width:760px;
  background:linear-gradient(160deg,var(--panel),var(--panel-deep));
  border:1px solid var(--line);border-radius:var(--r-card)}
.fb-panel h2,.fb-list-wrap h2{font-size:var(--t-h3)}
.fb-form{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
.fb-field{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s-2)}
.fb-field legend,.fb-label{font-weight:600;color:var(--fg);padding:0;margin-bottom:var(--s-2)}
.fb-label .meta{color:var(--faint);margin-left:var(--s-2)}
.fb-form select,.fb-form input[type=text],.fb-form input[type=email],.fb-form textarea,.fb-filter select{
  width:100%;min-height:var(--tap);font-family:var(--sans);font-size:1rem;color:var(--fg);
  background:var(--sink);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:var(--s-2) var(--s-4);transition:border-color var(--m-swap)}
.fb-form textarea{resize:vertical;min-height:9rem;line-height:1.7;padding-block:var(--s-3)}
.fb-form :is(select,input,textarea):focus,.fb-filter select:focus{outline:none;border-color:var(--beam)}
.fb-form select:disabled{color:var(--faint);cursor:not-allowed}
.fb-form ::placeholder{color:var(--faint)}
.fb-kinds{display:flex;gap:var(--s-2);flex-wrap:wrap}
.fb-kind,.fb-star{position:relative}
.fb-kind input,.fb-star input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fb-kind span{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  min-width:6rem;padding:var(--s-2) var(--s-5);border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--muted);transition:color var(--m-swap),border-color var(--m-swap),background var(--m-swap)}
.fb-kind:hover span{border-color:var(--beam);color:var(--beam)}
.fb-kind input:checked + span{background:var(--beam);border-color:var(--beam);color:var(--bg)}
.fb-kind input:focus-visible + span,.fb-star input:focus-visible + span{outline:2px solid var(--beam);outline-offset:3px}
.fb-stars{display:flex;gap:var(--s-1);align-items:center}
.fb-star span{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);
  font-size:1.9rem;line-height:1;color:var(--line);transition:color var(--m-swap),transform var(--m-swap)}
.fb-star.on span{color:var(--beam)}
.fb-star:hover span{transform:scale(1.12)}
.fb-count{justify-self:end;margin:0}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.fb-consent{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--muted);font-size:.9rem;
  line-height:1.7;cursor:pointer}
.fb-consent[hidden]{display:none}
.fb-consent input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--beam)}
.fb-consent a,.fb-rules a{color:var(--beam);text-decoration:underline;text-underline-offset:3px}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-form .actions{margin:0}
.fb-msg{min-height:1.8em;margin:0;color:var(--muted)}
.fb-msg.ok{color:var(--beam)}
.fb-list-wrap{margin-top:var(--s-8);max-width:760px}
.fb-filter{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-top:var(--s-4)}
.fb-filter .cl-venues{margin:0}
.fb-filter select{width:auto;min-width:14rem;flex:1}
.fb-summary{margin-top:var(--s-4)}
.fb-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3)}
.fb-item{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4) var(--s-5);
  background:var(--panel)}
.fb-item-head{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.fb-item-head a{font-weight:600;color:var(--fg);transition:color var(--m-swap)}
.fb-item-head a:hover{color:var(--beam)}
.fb-rate{color:var(--beam);letter-spacing:.08em;white-space:nowrap}
.fb-item-text{margin-top:var(--s-3);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg)}
/* 닉네임 · 이메일 줄은 .meta 를 쓰지 않는다. .meta 는 대문자로 바꿔서 "NtFan" 이
   "NTFAN" 이 되고 이메일 주소가 다른 글자로 보인다. */
.fb-by{margin-top:var(--s-3);color:var(--faint);font-size:.875rem;overflow-wrap:anywhere}
.fb-by a{color:var(--beam);text-decoration:underline}
/* .btn 의 display 가 [hidden] 을 이겨서 숨긴 "더 보기"가 그대로 보였다. */
#fb-more[hidden],#fa-more[hidden],.fb-pick[hidden]{display:none}
/* 운영자에게만 붙는 상단 단추(운영 · 새 피드백). 둘 다 붙으면 메뉴가 접힌 머리말이 636px 를
   넘는다(2026-10-09 실측). 그보다 좁으면 빼고, 같은 링크를 ☰ 메뉴의 "운영" 묶음에서 쓴다. */
@media (max-width:700px){.admin-link,.fb-alert{display:none}}
/* 이미지 고르기: 진짜 file input 은 안 보이게 두고(포커스는 받는다) 그 옆 label 을 단추로 그린다. */
.fb-pick{cursor:pointer}
#fb-file:focus-visible + .fb-pick{outline:2px solid var(--beam);outline-offset:3px}
.fb-hint{margin:0;color:var(--faint);font-size:.875rem;line-height:1.7}
.fb-shots{display:flex;gap:var(--s-2);flex-wrap:wrap}
.fb-shots:empty{display:none}
.fb-shot{position:relative;width:104px;height:104px;border:1px solid var(--line);
  border-radius:var(--r-chip);overflow:hidden;background:var(--sink)}
.fb-shot img{width:100%;height:100%;object-fit:cover}
.fb-shot-x{position:absolute;top:var(--s-1);right:var(--s-1);width:32px;height:32px;display:grid;
  place-items:center;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);
  color:var(--fg);font-size:1.1rem;line-height:1;cursor:pointer;transition:color var(--m-swap),border-color var(--m-swap)}
.fb-shot-x:hover,.fb-shot-x:focus-visible{border-color:var(--beam);color:var(--beam)}
.fb-shot-size{position:absolute;left:var(--s-1);bottom:var(--s-1);padding:0 var(--s-1);border-radius:4px;
  background:var(--bg);color:var(--muted);font-family:var(--mono);font-size:.62rem}
.fb-item-shots{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3)}
.fb-item-shots figure{margin:0;display:grid;gap:var(--s-2);justify-items:start}
.fb-item-shots a{display:block;border:1px solid var(--line);border-radius:var(--r-chip);overflow:hidden;
  background:var(--sink);transition:border-color var(--m-swap)}
.fb-item-shots a:hover{border-color:var(--beam)}
.fb-item-shots img{display:block;height:120px;width:auto;max-width:min(220px,100%);object-fit:cover}
.fb-item-actions{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}
.fb-list-wrap .actions,.fa-wrap .actions{margin-top:var(--s-4)}
.fb-rules{margin-top:var(--s-8)}
.fb-rules ul{color:var(--muted);display:grid;gap:var(--s-2);padding-left:1.3em;max-width:46em}
@media (max-width:640px){.fb-row{grid-template-columns:1fr}.fb-panel{padding:var(--s-5) var(--s-4)}
  .fb-filter select{min-width:0;width:100%}}

/* ── checklist ──────────────────────────────────────────── */
.cl-bar{position:sticky;top:var(--topbar-h);z-index:30;display:flex;align-items:center;gap:var(--s-4);
  flex-wrap:wrap;background:rgba(6,7,13,.9);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-6)}
.cl-track{flex:1;min-width:120px;height:6px;border-radius:var(--r-pill);background:var(--sink-2);
  overflow:hidden}
.cl-fill{display:block;height:100%;width:0;background:var(--beam);
  transition:width var(--m-swap)}
.cl-count{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;color:var(--muted);
  white-space:nowrap}
.cl-reset{display:inline-flex;align-items:center;min-height:var(--tap);
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:var(--s-1) var(--s-4);cursor:pointer;
  transition:color var(--m-swap),border-color var(--m-swap)}
.cl-reset:hover{color:var(--beam);border-color:var(--beam)}
.cl-venues{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-4)}
.cl-venues .meta{width:100%}
.cl-venue{display:inline-flex;align-items:center;min-height:var(--tap);
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:var(--s-2) var(--s-4);cursor:pointer;
  transition:color var(--m-swap),border-color var(--m-swap),background var(--m-swap)}
.cl-venue:hover{border-color:var(--beam);color:var(--beam)}
.cl-venue[aria-pressed="true"]{background:var(--beam);border-color:var(--beam);color:#06070d}
.cl-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--faint);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:0 var(--s-2);
  margin-left:var(--s-2);white-space:nowrap;vertical-align:middle}
.cl-item[hidden]{display:none}
.cl-sec[hidden]{display:none}
.cl-sec{margin-top:var(--s-7)}
.cl-sec h2{font-size:1.3rem}
.cl-sec p{color:var(--muted);margin-top:var(--s-3);max-width:44em}
.cl-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-2)}
.cl-item{border:1px solid var(--line);border-radius:var(--r-chip);
  transition:border-color var(--m-swap),background var(--m-swap)}
.cl-item label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);
  align-items:start;padding:var(--s-3) var(--s-4);cursor:pointer}
.cl-item input{appearance:none;width:20px;height:20px;margin:2px 0 0;flex:none;
  border:1px solid var(--faint);border-radius:6px;background:var(--sink);cursor:pointer;
  display:grid;place-content:center;transition:border-color var(--m-swap),background var(--m-swap)}
.cl-item input::before{content:"";width:10px;height:10px;transform:scale(0);border-radius:2px;
  background:#06070d;transition:transform var(--m-swap);
  clip-path:polygon(14% 44%,0 60%,40% 100%,100% 18%,84% 4%,38% 68%)}
.cl-item input:checked{background:var(--beam);border-color:var(--beam)}
.cl-item input:checked::before{transform:scale(1.6)}
.cl-item input:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.cl-item .cl-label{font-weight:600}
.cl-item .cl-note{display:block;color:var(--muted);font-size:.875rem;margin-top:var(--s-1);
  font-weight:400}

/* ── stats bars (admin only) ────────────────────────────── */
/* --w is set inline per row from the query result, so it is declared here to
   keep every custom property the stylesheet uses defined in the stylesheet */
.st-bar{--w:0%;display:block;height:4px;width:var(--w);background:var(--beam);
  border-radius:var(--r-pill);margin-bottom:var(--s-1);min-width:2px}
.cl-item:has(input:checked){border-color:var(--beam)}
.cl-item:has(input:checked) .cl-label{color:var(--faint);text-decoration:line-through}
.cl-foot{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.cl-foot p{color:var(--faint);max-width:44em}

/* paper version: a checklist that cannot be printed is half a checklist */
@media print{
  .crt,.topbar,footer,.cl-bar,.back,.crumbs,.actions{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .page{padding:0!important}
  h1,h2,h3,.cl-item .cl-label{color:#000!important}
  p,.cl-item .cl-note,.page-head p{color:#333!important}
  .cl-venues,.cl-tag{display:none!important}
  .cl-item{border-color:#999!important;break-inside:avoid}
  .cl-item input{appearance:auto!important;border:1px solid #000!important;background:#fff!important}
  .cl-item:has(input:checked) .cl-label{color:#000!important;text-decoration:none!important}
  .cl-sec{break-inside:avoid-page}
}

/* ── reveal (progressive enhancement, see SCRIPT) ───────── */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--m-reveal),transform var(--m-reveal)}
.js .rv.in{opacity:1;transform:none}

/* 묶음 제목. 목록이 앱별로 끊어져 보여야 "이게 한 연재구나"가 읽힌다. 제목 줄에
   편수를 같이 두어, 두 편짜리와 스무 편짜리를 펼치기 전에 구분할 수 있게 한다. */
.group{margin-top:var(--s-6)}
.group:first-of-type{margin-top:var(--s-4)}
.group-h{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--t-h3);margin:0 0 var(--s-3);padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line)}
.group-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--faint);
  white-space:nowrap}
.group-cont{font-size:.8rem;color:var(--faint);font-weight:400}
.series-line{margin:var(--s-6) 0 var(--s-2);letter-spacing:.04em}
.read-next{margin-top:var(--s-7);padding:var(--s-5) var(--s-5) var(--s-4);
  border-left:3px solid var(--acc);background:var(--panel);border-radius:0 var(--r-chip) var(--r-chip) 0}
.read-next p{margin:0;max-width:62ch}
.read-next-go{margin-top:var(--s-3);font-weight:600}

/* ── 움직이는 히어로 ────────────────────────────────────────────
   만든 앱 화면이 타원 궤도를 돈다. 장식이 아니라 **실제 링크**라, 도는 카드를
   눌러 그 앱 페이지로 간다. 그래서 마우스를 올리면 궤도가 멈춘다 — 안 멈추면
   누르려는 순간 달아나서 화가 난다.
   자리 계산은 스크립트가 하지만 **칸의 크기와 높이는 CSS 가 먼저 잡는다.**
   그림이 늦게 와도 화면이 밀리지 않게(CLS) 하려는 것이다. */
.hero{position:relative;isolation:isolate;margin:calc(var(--s-6) * -1) 0 var(--s-6);
  display:grid;gap:var(--s-5);align-items:center;--px:0;--py:0;--sc:0}
.hero-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:calc(1 - var(--sc) * 1.1)}
.hero-copy{position:relative;z-index:3;margin:0;padding:var(--s-5) 0}
.hero-copy h1{max-width:18ch}
.hero-copy > p:not(.eyebrow):not(.hero-go){max-width:52ch}
.hero-go{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}

.hero-ring{position:relative;z-index:2;min-height:clamp(21rem,46vw,30rem);
  opacity:calc(1 - var(--sc) * 1.15)}
/* 자리는 **스크립트가 전부 정한다.** CSS 로 left:50% 를 같이 주면 그만큼 한 번 더
   밀려서 고리가 칸 밖으로 나간다(실제로 x 가 1321px 까지 나가 가로 스크롤이 생겼다). */
.hc{position:absolute;left:0;top:0;width:var(--cw);margin:0;
  transform:translate3d(0,0,0);will-change:transform,opacity}
.hc a{display:block;border-radius:var(--r-chip);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  box-shadow:0 16px 44px rgba(0,0,0,.6);text-decoration:none;
  outline-offset:3px}
.hc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.88) contrast(1.02)}
.hc .cap{display:block;padding:6px 8px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;background:var(--panel-2)}
.hc a:hover .cap,.hc a:focus-visible .cap{color:var(--fg)}
.hc a:focus-visible{outline:2px solid var(--acc)}

.hero-mark,.hero-count{position:absolute;z-index:3;margin:0;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  opacity:calc(1 - var(--sc) * 1.4);pointer-events:none}
.hero-mark{top:0;left:0}
.hero-count{bottom:0;right:0}

@media (min-width:901px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    min-height:clamp(30rem,72vh,42rem)}
  .hero-copy{background:radial-gradient(112% 130% at 10% 50%,var(--bg) 52%,rgba(6,7,13,.7) 74%,transparent 92%)}
}
@media (max-width:900px){
  /* 좁은 화면에서는 고리를 글 뒤로 보낸다. 나란히 두면 둘 다 좁아져서 둘 다 안 읽힌다. */
  .hero{min-height:clamp(27rem,80vh,36rem)}
  .hero-ring{position:absolute;inset:0;opacity:calc(.62 - var(--sc) * .7)}
  .hero-copy{background:radial-gradient(150% 120% at 50% 52%,var(--bg) 44%,rgba(6,7,13,.76) 72%,transparent 92%)}
  /* 한 칸일 때 글은 가운데 정렬인데, 머리글·제목·설명·단추 줄이 저마다 최대 폭만 있고 여백이 없어
     블록째 왼쪽에 붙었다. 휴대폰 폭에서는 화면이 최대 폭보다 좁아 티가 안 나고, 폴드를 펼친
     600~900px 에서만 "왼쪽으로 치우친다" 로 보였다(2026-10-20 갤럭시 폴드8 울트라 사용자 제보). */
  .hero-copy > *{margin-inline:auto}
  .hero-go{justify-content:center}
  .hc .cap{display:none}
  .hc a{box-shadow:0 8px 22px rgba(0,0,0,.55)}
}
@media (prefers-reduced-motion:reduce){
  .hc{transition:none}
}


/* 머리말만 따로 더 이른 폭에서 접는다. 본문 격자는 900px 그대로 두고, 메뉴 줄만
   1180px 아래에서 ☰ 로 바꾼다 — 항목이 아홉 개라 그 위가 아니면 한 줄에 안 들어간다. */
@media (max-width:1180px){
  .nav{display:none}
  .menu{display:block}
}
@media (max-width:900px){
  .feature-in,.detail,.foot-in{grid-template-columns:1fr}
  .card-top{flex-wrap:wrap}
  /* pill takes its own line above the icon so long Korean names get full width */
  .card .status{margin-left:0;order:-1;flex-basis:100%;width:max-content}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .log-item{grid-template-columns:1fr;gap:var(--s-2)}
  .hero{min-height:auto;padding-block:var(--s-8)}
  .feature-in{padding:var(--s-5)}
  .card-top{flex-wrap:wrap}
  .card .status{margin-left:0}
  .crt{opacity:.28}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ribbon-track{transform:none}
  .rv{opacity:1;transform:none}
}

/* Page-based navigation and comfortable reading. */
.crt{display:none}
.menu{display:block}
.nav a,.menu summary,.menu-panel a{font-family:var(--sans);font-size:.9rem;letter-spacing:0;text-transform:none}
.nav a{display:flex;align-items:center;min-height:var(--tap)}
.menu summary{min-height:var(--tap);white-space:nowrap}
.menu-panel{max-height:calc(100dvh - 100px);overflow-y:auto;width:min(360px,calc(100vw - 40px))}
.menu-panel a{min-height:var(--tap);display:flex;align-items:center}
.wordmark{white-space:nowrap}
.topbar-in{gap:var(--s-4)}
.directory-section{padding-block:var(--s-7);border-top:1px solid var(--line)}
.home-directory .page-head{max-width:850px;margin-bottom:var(--s-7)}
.home-directory .page-head h1{font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.3}
.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-5)}
.directory-card{display:block;padding:var(--s-5);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card)}
.directory-card>img{width:100%;height:160px;object-fit:contain;background:var(--bg-2);border-radius:var(--r-chip);margin-bottom:var(--s-5)}
.course-list{list-style:none;padding:0;display:grid;gap:var(--s-5);margin:var(--s-5) 0 var(--s-7)}
.course-card{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:var(--s-5);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel)}
.course-card img{width:100%;border-radius:var(--r-chip)}
.course-card h3{margin:var(--s-2) 0 var(--s-3);font-size:1.3rem}
.course-card p,.guide-intro{color:var(--muted);line-height:1.9}
.guide-intro{margin-top:var(--s-4);max-width:75ch}
.course-card:hover{border-color:var(--beam)}
.course-card:active{background:var(--panel-2)}
.directory-card h3{margin:var(--s-3) 0;font-size:1.2rem}
.directory-card h3 span{color:var(--beam)}
.directory-card p,.home-help p{color:var(--muted);line-height:1.9}
.directory-card:hover{border-color:var(--beam);background:var(--panel-2)}
.directory-card:active{transform:translateY(1px)}
.home-help{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-7)}
.home-help p{margin-top:var(--s-4)}
.section-links,.pagination{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0}
.section-links a,.pagination a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:var(--s-2) var(--s-4);border:1px solid var(--line);border-radius:var(--r-chip)}
.section-links a:hover,.pagination a:hover{border-color:var(--beam)}
.section-links a[aria-current],.pagination a[aria-current]{background:var(--panel-2);color:var(--beam);border-color:var(--beam)}
.section-links a:active,.pagination a:active{background:var(--panel)}
.list-count{color:var(--muted);margin-block:var(--s-5)}
.reading-note{border:1px solid var(--line);border-radius:var(--r-chip);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0}
.reading-note summary{cursor:pointer;font-weight:600;min-height:var(--tap);align-content:center}
summary:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.reading-note summary:hover{color:var(--beam)}
.article{max-width:760px;margin-inline:auto}
.article-body{font-size:1.0625rem;line-height:1.95;overflow-wrap:anywhere}
.article-body p,.article-body ul,.article-body ol{color:var(--fg)}
.article-body p{margin-top:var(--s-5)}
.article-body a{text-decoration:underline;text-underline-offset:4px}
.article-body pre{font-size:.875rem;max-width:100%;overflow:auto}
.workshop .shot img,.workshop .article-body img{max-height:600px;object-fit:contain;width:100%;height:auto}
.code-disclosure{margin-block:var(--s-4);border:1px solid var(--line);padding:var(--s-4);min-width:0}
.code-disclosure summary{cursor:pointer;color:var(--beam)}
.article-body table{display:block;max-width:100%;overflow:auto}
.article-toc ol{padding-left:1.3em;margin:var(--s-3) 0}
.article-toc a{display:inline-block;padding-block:6px;color:var(--beam)}
.article-toc .subheading{margin-left:var(--s-5)}
.article .shot figcaption{font-size:.875rem;line-height:1.7;gap:var(--s-4);flex-wrap:wrap}
.image-original{color:var(--beam);text-decoration:underline;white-space:nowrap;padding-block:var(--s-2)}
.learning{border:1px solid var(--line);padding:var(--s-5);margin-block:var(--s-6);overflow-wrap:anywhere}
.learning h2{font-size:var(--t-h3);margin-bottom:var(--s-3)}
.learning progress{display:block;width:100%;height:14px;accent-color:var(--beam);margin-block:var(--s-3)}
.learning label{display:flex;align-items:flex-start;gap:var(--s-3);padding-block:var(--s-3);cursor:pointer;line-height:1.8}
.learning input{flex:none;width:20px;height:20px;margin-top:5px;accent-color:var(--beam)}
.learning .btn{white-space:normal;text-align:left;max-width:100%}
.learning-note{color:var(--muted);font-size:.875rem;line-height:1.8;margin-top:var(--s-3)}
.prompt-examples .post-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.prompt-copy{margin-block:var(--s-5)}
.prompt-copy pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:640px;overflow:auto}
.prompt-copy [role=status]{font-size:.875rem;color:var(--muted);margin-left:var(--s-3)}
.article-body img{height:auto;max-width:100%;border-radius:var(--r-card)}
@media(max-width:900px){.prompt-examples .post-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.prompt-examples .post-cards{grid-template-columns:1fr}}
@media(max-width:900px){.directory-grid,.home-help{grid-template-columns:1fr}.home-directory .page-head{margin-bottom:var(--s-5)}}
@media(max-width:640px){.course-card{grid-template-columns:1fr}.course-card img{max-height:210px;object-fit:contain}}
@media(max-width:480px){.topbar-in{gap:var(--s-2)}.langsw{display:none}.contact-btn{display:none}.menu summary{padding-inline:var(--s-3)}.reading-note{padding:var(--s-3) var(--s-4)}}