/* ══════════════════════════════════════════════════════════
   손박사의 컴공 6과목 강의 — 허브 (drson.iotok.org)
   6개 강의 사이트(notebook.css)와 같은 디자인 토큰을 쓴다.
   ══════════════════════════════════════════════════════════ */
:root{
  --blue:#3b82f6; --blue-s:#dbeafe; --mint:#10b981; --mint-s:#d1fae5;
  --coral:#f97316; --coral-s:#ffedd5; --violet:#8b5cf6; --violet-s:#ede9fe;
  --rose:#ef4444;  --rose-s:#fee2e2; --amber:#f59e0b; --amber-s:#fef3c7;
  --indigo:#6366f1; --indigo-s:#e0e7ff;
  --teal:#0d9488;   --teal-s:#ccfbf1;
  --cyan:#0891b2;   --cyan-s:#cffafe;
  --pink:#db2777;   --pink-s:#fce7f3;
  --lime:#4d7c0f;   --lime-s:#ecfccb;
  --plum:#7e22ce;   --plum-s:#f3e8ff;
  --forest:#166534; --forest-s:#dcfce7;
  --sky:#0369a1; --slate:#475569;    --sky-s:#e0f2fe; --slate-s:#e2e8f0;
  --paper:#fff; --page:#f4f6fa; --ink:#1e293b; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px -8px rgba(15,23,42,.10);
  --shadow-lg:0 2px 6px rgba(15,23,42,.08),0 20px 44px -14px rgba(15,23,42,.22);
  --radius:16px;
}
[data-theme="dark"]{
  --blue-s:#1e3a5f; --mint-s:#064e3b; --coral-s:#4a2610; --violet-s:#2e1065;
  --rose-s:#4c1d1d; --amber-s:#453005; --indigo-s:#312e81; --teal-s:#0f3d38; --cyan-s:#083344; --pink-s:#500724; --lime-s:#1a2e05; --plum-s:#3b0764; --slate-s:#1e293b; --forest-s:#052e16; --sky-s:#082f49;
  --paper:#151b26; --page:#0b0f16; --ink:#e5e9f0; --ink-2:#a8b3c4; --ink-3:#6b7688;
  --line:#28303d; --line-2:#3a4453;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 20px 44px -14px rgba(0,0,0,.7);
}
*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html{ font-size:18px; /* --drson-root-font */  scroll-behavior:smooth }
body{
  margin:0;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:var(--page); color:var(--ink);
  font-size:1rem; line-height:1.78; letter-spacing:-.011em;
  word-break:keep-all; overflow-wrap:anywhere;
}
a{ color:inherit; text-decoration:none }

/* ── 상단바 ───────────────────────────────── */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.top-in{
  max-width:1180px; margin:0 auto; min-height:56px; padding:0 clamp(.9rem,3vw,1.6rem);
  display:flex; align-items:center; gap:.75rem;
}
.brand{ font-weight:800; font-size:1.05rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.45rem }
.brand-logo{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; background:var(--paper);
  box-shadow:0 0 0 1px var(--line-2), 0 1px 3px rgba(0,0,0,.12);
}
.brand b{
  font-weight:800;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.top .spacer{ margin-left:auto }
.icon-btn{
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
  border-radius:10px; padding:.32rem .6rem; font-size:.95rem; cursor:pointer;
  line-height:1.4; transition:border-color .15s, color .15s;
}
.icon-btn:hover{ border-color:var(--blue); color:var(--blue) }

/* 언어 토글 — 오른쪽 위. 기본은 한국어이고, 지금 누르면 갈 언어를 배지로 보여 준다.
   좁은 화면에서는 지구본만 남기고 배지를 접는다. */
.lang-btn{
  display:inline-flex; align-items:center; gap:.3rem;
  font-weight:700; font-size:.82rem; letter-spacing:.02em;
  padding:.32rem .55rem; text-decoration:none;
}
.lang-btn .lang-globe{ font-size:.95rem; line-height:1 }
.lang-btn b{ font-weight:800 }
@media (max-width:520px){
  .lang-btn b{ display:none }
  .lang-btn{ padding:.32rem .5rem }
}

/* ── 히어로 ───────────────────────────────── */
.hero{
  max-width:1180px; margin:0 auto; padding:clamp(2.4rem,7vw,4.6rem) clamp(.9rem,3vw,1.6rem) clamp(1.4rem,4vw,2.4rem);
  text-align:center;
}
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--violet); background:var(--violet-s);
  padding:.3rem .8rem; border-radius:99px; margin-bottom:1.1rem;
}
.hero h1{
  margin:0 0 .9rem; font-weight:800; letter-spacing:-.035em; line-height:1.32;
  font-size:clamp(1.65rem,4.6vw,2.9rem);
}
.hero h1 .g{
  background:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  margin:0 auto; max-width:44rem; color:var(--ink-2); font-size:clamp(.98rem,2.2vw,1.1rem);
}
/* 랜딩 히어로 삽화 — 원본이 흰 바탕이라 어두운 테마에서는 살짝 눌러 준다 */
.hero-art{
  display:block; width:100%; max-width:28rem; height:auto; margin:1.7rem auto 0;
  border:1px solid var(--line); border-radius:18px; background:#fff;
  box-shadow:var(--shadow);
}
[data-theme="dark"] .hero-art{ filter:brightness(.88) saturate(.94) }
.stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .55rem; margin-top:1.5rem;
}
.stat{
  background:var(--paper); border:1px solid var(--line); border-radius:99px;
  padding:.34rem .9rem; font-size:.85rem; color:var(--ink-2); box-shadow:var(--shadow);
}
.stat b{ color:var(--ink); font-variant-numeric:tabular-nums }

/* ── 카드 격자 ────────────────────────────── */
/* ── 거르개 단추 — 튜터별로 카드를 추린다 ─────────────────────
   .filters 는 hidden 으로 그려지고 JS 가 벗긴다.
   자바스크립트가 꺼져 있으면 아예 안 보이고 카드는 모두 남는다. */
.filters{
  max-width:1180px; margin:0 auto;
  padding:.2rem clamp(.9rem,3vw,1.6rem) .2rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .75rem;
}
.filters[hidden]{ display:none }
.filt-h{ font-size:.9rem; color:var(--ink-3); font-weight:600 }
.filt-row{ display:flex; flex-wrap:wrap; gap:.45rem }
.filt{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .85rem; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:600; line-height:1.2;
  color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.filt:hover{ border-color:var(--accent,var(--ink-3)); color:var(--ink) }
.filt:focus-visible{ outline:2px solid var(--accent,var(--ink-3)); outline-offset:2px }
.filt[aria-pressed="true"]{
  color:#fff; background:var(--accent,var(--ink)); border-color:var(--accent,var(--ink));
}
.filt-n{
  font-size:.8rem; font-weight:700; opacity:.72;
  font-variant-numeric:tabular-nums;
}
.filt[aria-pressed="true"] .filt-n{ opacity:.85 }
.filt-reset{ font-weight:500; color:var(--ink-3) }
.filt-reset[hidden]{ display:none }
.filt-copy{ font-weight:600; color:var(--blue); border-color:var(--blue) }
.filt-copy:hover{ background:var(--blue-s) }
.filt-copy[hidden]{ display:none }
.filt-copy.done{ color:#fff; background:var(--mint); border-color:var(--mint) }
.filt-count{
  font-size:.85rem; color:var(--ink-3); margin-left:auto;
  font-variant-numeric:tabular-nums;
}
.card[hidden]{ display:none }
@media (max-width:560px){
  .filt-h{ width:100% }
  .filt-count{ margin-left:0; width:100% }
}

.grid{
  max-width:1180px; margin:0 auto;
  padding:1rem clamp(.9rem,3vw,1.6rem) clamp(2.6rem,6vw,4rem);
  display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,.card:focus-visible{
  transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent);
  outline:none;
}
.card-img{ position:relative; aspect-ratio:16/9; background:var(--line); overflow:hidden }
.card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.card:hover .card-img img{ transform:scale(1.045) }
/* 삽화에 이미 제목이 그려져 있어, 번호는 글자가 없는 왼쪽 아래에 둔다 */
.card-no{
  position:absolute; left:.75rem; bottom:.75rem;
  width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:800; font-size:.9rem;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(15,23,42,.4);
}
.card-body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1 }
.card h2{
  margin:0 0 .15rem; font-size:1.18rem; font-weight:800; letter-spacing:-.025em;
  display:flex; align-items:center; gap:.45rem;
}
.card .host{
  font-size:.78rem; color:var(--ink-3); font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  margin-bottom:.7rem;
}
.card .lead{ margin:0 0 .85rem; font-size:.94rem; color:var(--ink-2); line-height:1.68 }
.parts{ list-style:none; margin:0 0 1.05rem; padding:0; display:grid; gap:.42rem }
.parts li{ font-size:.855rem; color:var(--ink-2); display:flex; gap:.5rem; line-height:1.55 }
.parts .p{
  flex:0 0 auto; font-weight:700; font-size:.72rem; color:var(--accent);
  background:var(--accent-s, var(--blue-s)); border-radius:6px; padding:.05rem .42rem; height:fit-content;
  margin-top:.16rem; white-space:nowrap;
}
.card-foot{ margin-top:auto; display:flex; align-items:center; gap:.6rem }
.go{
  flex:1; text-align:center; font-weight:700; font-size:.94rem;
  background:var(--accent, var(--blue)); color:#fff; border-radius:11px; padding:.62rem 1rem;
  transition:filter .15s;
}
.card:hover .go{ filter:brightness(1.08) }
.tag{
  font-size:.76rem; color:var(--ink-3); border:1px solid var(--line);
  border-radius:8px; padding:.3rem .55rem; white-space:nowrap;
}

/* ── SPOW 카드 — 격자 맨 앞의 한 장 ────────────
   과목 카드에는 저마다 삽화가 있지만 이 카드에는 없다. 이 한 장을 위해
   그림을 새로 그릴 까닭이 없어서, 덮개를 CSS 로 짰다 — 기울기 위에 이름만
   얹는다. 색은 토큰에서 오므로 어두운 화면에서도 규칙이 그대로 산다.
   글자는 흰색 하나로 고정한다: 두 색 모두 짙어 어느 화면에서든 읽힌다. */
.spow-cover{
  display:grid; place-content:center; gap:.28rem; text-align:center;
  background:linear-gradient(135deg,var(--indigo) 0%,var(--violet) 100%);
}
.spow-cover-mark{
  font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:2.1rem; font-weight:800; letter-spacing:.14em; color:#fff;
}
.spow-cover-sub{ font-size:.73rem; letter-spacing:.05em; color:rgba(255,255,255,.86) }

/* 주소는 과목 카드에서 회색이다. 여기서는 짧은 이름 자체가 자랑거리라 강조한다. */
.spow-card .host{ color:var(--indigo) }
/* 안에 무엇이 있는지 — 과목 카드의 parts 자리를 대신하는 한 줄 */
.spow-card-in{ margin:0 0 1.05rem; font-size:.82rem; color:var(--ink-3); line-height:1.6 }

/* ── 안내 ────────────────────────────────── */
.note{
  max-width:1180px; margin:0 auto clamp(2.4rem,6vw,3.6rem);
  padding:0 clamp(.9rem,3vw,1.6rem);
}
.note-in{
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--radius); padding:1.25rem clamp(1.1rem,3vw,1.8rem); box-shadow:var(--shadow);
}
.note-in h3{ margin:0 0 .5rem; font-size:1.02rem; font-weight:800; letter-spacing:-.02em }
.note-in p{ margin:0 0 .5rem; font-size:.92rem; color:var(--ink-2) }
.note-in p:last-child{ margin-bottom:0 }
.note-in .order{ font-weight:600; color:var(--ink) }

/* ── 바닥 ────────────────────────────────── */
.foot{
  border-top:1px solid var(--line); padding:1.8rem clamp(.9rem,3vw,1.6rem) 2.6rem;
  text-align:center; color:var(--ink-3); font-size:.86rem;
}
.foot a{ color:var(--ink-2); border-bottom:1px solid var(--line-2) }
.foot a:hover{ color:var(--blue); border-color:var(--blue) }

/* ══════════════════════════════════════════════════════════════
   로그인 · 관리자 (2026-08-21, 여섯 과목 통합 로그인)
   ══════════════════════════════════════════════════════════════ */

/* ── 상단 바의 로그인 상태 ── */
.who{
  font-size:.86rem; color:var(--ink-2); font-weight:600;
  padding:.3rem .1rem; white-space:nowrap;
}
.who.guest{ color:var(--ink-3); font-weight:500 }
.btn{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.4rem .8rem; border-radius:10px; border:1px solid var(--line-2);
  background:var(--paper); color:var(--ink); font:inherit; font-size:.86rem;
  font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.btn:hover{ border-color:var(--blue); color:var(--blue) }
.btn.ghost{ border-color:transparent; color:var(--ink-2); font-weight:500 }
.btn.ghost:hover{ border-color:var(--line-2); color:var(--ink) }
.btn.primary{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.btn.primary:hover{ filter:brightness(1.08); color:#fff }
.btn.wide{ width:100%; justify-content:center; padding:.62rem 1rem; font-size:.95rem }

/* ── 카드의 진도 뱃지 ── */
.prog{
  display:inline-block; margin-left:.45rem; padding:.14rem .5rem;
  border-radius:999px; font-size:.74rem; font-weight:700;
  background:var(--accent-s); color:var(--accent);
}

/* ── 로그인 화면 ── */
.auth{
  max-width:1120px; margin:0 auto; padding:4rem 1.2rem 5rem;
  display:flex; justify-content:center;
}
.auth-box{
  width:100%; max-width:380px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:2rem 1.8rem 1.6rem;
}
.auth-box h1{ margin:0 0 .4rem; font-size:1.5rem; letter-spacing:-.02em }
.auth-sub{ margin:0 0 1.3rem; color:var(--ink-2); font-size:.9rem; line-height:1.6 }
.auth-err{
  margin:0 0 1rem; padding:.6rem .8rem; border-radius:10px;
  background:var(--rose-s); color:var(--rose); font-size:.86rem; font-weight:600;
}
.auth-form{ display:flex; flex-direction:column; gap:.9rem }
.auth-form label{
  display:flex; flex-direction:column; gap:.35rem;
  font-size:.82rem; font-weight:600; color:var(--ink-2);
}
.auth-form input{
  padding:.6rem .75rem; border:1px solid var(--line-2); border-radius:10px;
  background:var(--page); color:var(--ink); font:inherit; font-size:.95rem;
}
.auth-form input:focus{ outline:2px solid var(--blue); outline-offset:-1px; border-color:var(--blue) }
.auth-alt{ margin-top:1.1rem; text-align:center; font-size:.86rem }
.auth-alt a{ color:var(--ink-2); text-decoration:none }
.auth-alt a:hover{ color:var(--blue) }
/* 로그인 아래 두 단추 — 회원가입 · 비밀번호 찾기 */
.auth-more{ display:flex; flex-direction:column; gap:.5rem; margin-top:.9rem }
.auth-ok{
  margin:0 0 1rem; padding:.6rem .8rem; border-radius:10px;
  background:var(--mint-s); color:var(--mint); font-size:.86rem; line-height:1.6;
}

/* ── 사용자의견 ── */
.fb-box{ max-width:560px }
.auth-form textarea{
  padding:.7rem .8rem; border:1px solid var(--line-2); border-radius:10px;
  background:var(--page); color:var(--ink); font:inherit; font-size:.95rem;
  line-height:1.7; resize:vertical; min-height:8rem;
}
.auth-form textarea:focus{ outline:2px solid var(--blue); outline-offset:-1px; border-color:var(--blue) }
.fb-hint{ margin:0 0 .8rem; color:var(--ink-3); font-size:.84rem; line-height:1.6 }
.fb-as{
  margin:0; padding:.5rem .75rem; border-radius:10px;
  background:var(--blue-s); color:var(--ink-2); font-size:.84rem; font-weight:600;
}
/* '또는' — 로그인 단추와 이메일 칸 사이를 가르는 줄 */
.fb-or{
  display:flex; align-items:center; gap:.7rem;
  margin:1rem 0 .2rem; color:var(--ink-3); font-size:.78rem;
}
.fb-or::before, .fb-or::after{ content:''; flex:1; height:1px; background:var(--line) }

/* 관리자 화면의 의견 표 */
.fb-adm .fb-when{ white-space:nowrap; color:var(--ink-3); font-size:.8rem }
.fb-adm .fb-who{ white-space:nowrap; font-weight:600 }
.fb-adm .fb-body{
  min-width:18rem; max-width:46rem; white-space:pre-wrap;
  word-break:keep-all; overflow-wrap:anywhere; line-height:1.7;
}
.fb-adm .fb-none{ color:var(--ink-3); padding:1rem .2rem }

/* ── 관리자 ── */
.admin{ max-width:1120px; margin:0 auto; padding:2.5rem 1.2rem 5rem }
.admin h1{ margin:0 0 .4rem; font-size:1.6rem; letter-spacing:-.02em }
.admin h2{ margin:2rem 0 .8rem; font-size:1.02rem; color:var(--ink-2) }
.adm-add{ display:flex; gap:.5rem; flex-wrap:wrap }
.adm-add input, .adm-add select{
  padding:.5rem .7rem; border:1px solid var(--line-2); border-radius:10px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:.9rem;
}
.adm-msg{
  margin-top:.8rem; padding:.55rem .8rem; border-radius:10px; font-size:.86rem;
  background:var(--mint-s); color:var(--mint); font-weight:600;
}
.adm-msg.bad{ background:var(--rose-s); color:var(--rose) }
.adm-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem }
.adm-tab{
  padding:.38rem .8rem; border-radius:999px; border:1px solid var(--line-2);
  background:var(--paper); color:var(--ink-2); font:inherit; font-size:.84rem;
  font-weight:600; cursor:pointer;
}
.adm-tab.on{ background:var(--blue); border-color:var(--blue); color:#fff }
.adm-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius) }
table.adm{ width:100%; border-collapse:collapse; font-size:.88rem; background:var(--paper) }
table.adm th, table.adm td{
  padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.adm th{ font-size:.78rem; color:var(--ink-3); font-weight:700; background:var(--page) }
table.adm tr:last-child td{ border-bottom:0 }
table.adm td.has{ color:var(--mint); font-weight:700 }
table.adm select{
  padding:.25rem .4rem; border:1px solid var(--line-2); border-radius:8px;
  background:var(--page); color:var(--ink); font:inherit; font-size:.82rem;
}
.adm-act{ display:flex; gap:.35rem }
.mini{
  padding:.3rem .6rem; border-radius:8px; border:1px solid var(--line-2);
  background:var(--paper); color:var(--ink-2); font:inherit; font-size:.78rem;
  cursor:pointer;
}
.mini:hover{ border-color:var(--blue); color:var(--blue) }
.mini.del:hover{ border-color:var(--rose); color:var(--rose) }

/* ══════════════════════════════════════════════════════════
   왜 만들었나 (/why) — DDX54 발견 과정 네 단계
   ══════════════════════════════════════════════════════════ */
.why{ padding:clamp(2rem,6vw,3.4rem) clamp(.9rem,3vw,1.6rem) 4rem }
.why-in{ max-width:820px; margin:0 auto }
.why-in h1{
  margin:.55rem 0 1rem; font-size:clamp(1.75rem,4.6vw,2.5rem);
  font-weight:800; letter-spacing:-.035em; line-height:1.28;
}
.why-lead{
  margin:0 0 1.1rem; font-size:1.06rem; line-height:1.8;
  padding:.95rem 1.15rem; border-radius:var(--radius);
  background:var(--blue-s); border:1px solid transparent;
}
.why-in > p{ margin:0 0 1.5rem; color:var(--ink-2) }
.why-in > p b{ color:var(--ink) }

/* ── 단계 카드 ── */
.stage{
  position:relative; margin:0 0 1.1rem; padding:1.25rem 1.35rem 1.15rem;
  background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.stage-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.85rem }
.stage-no{
  flex:0 0 auto; width:1.85rem; height:1.85rem; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:#fff;
  font-weight:800; font-size:.95rem; font-variant-numeric:tabular-nums;
}
.stage-head h2{
  margin:0; font-size:1.09rem; font-weight:800; letter-spacing:-.025em;
  line-height:1.4; flex:1 1 12rem;
}
.stage-kind{
  flex:0 0 auto; padding:.2rem .55rem; border-radius:999px;
  background:var(--accent-s); color:var(--accent);
  font-size:.76rem; font-weight:700; white-space:nowrap;
}
[data-theme="dark"] .stage-kind{ color:var(--ink) }
.stage-steps{ list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.6rem }
.stage-steps li{
  position:relative; padding-left:1.05rem;
  font-size:.94rem; color:var(--ink-2); line-height:1.72;
}
.stage-steps li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.stage-steps b{ color:var(--ink) }
.stage-out{
  margin:0 0 .75rem; padding:.7rem .9rem; border-radius:10px;
  background:var(--accent-s); font-size:.92rem; line-height:1.7;
}
.stage-out b{ color:var(--ink) }
.stage-courses{
  margin:0; padding-top:.7rem; border-top:1px dashed var(--line-2);
  font-size:.86rem; color:var(--ink-3);
}
.stage-courses a{
  color:var(--accent); font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .15s;
}
.stage-courses a:hover{ border-bottom-color:currentColor }
[data-theme="dark"] .stage-courses a{ filter:brightness(1.35) }
.stage-base{ color:var(--ink-3) }

/* ── 바닥 · 얻는 것 ── */
.why-base,.why-get{
  margin-top:1.6rem; padding:1.2rem 1.35rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.why-base h3,.why-get h3{
  margin:0 0 .6rem; font-size:1.05rem; font-weight:800; letter-spacing:-.025em;
}
.why-base p{ margin:0; font-size:.94rem; color:var(--ink-2); line-height:1.75 }
.why-base a{ color:var(--blue); font-weight:600 }
.why-base a:hover{ text-decoration:underline }
.why-get ul{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.65rem }
.why-get li{
  position:relative; padding-left:1.35rem;
  font-size:.94rem; color:var(--ink-2); line-height:1.72;
}
.why-get li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--mint); font-weight:800;
}
.why-get li b{ color:var(--ink) }
.why-honest{
  margin:0 0 1.15rem; padding:.75rem .95rem; border-radius:10px;
  background:var(--page); border:1px dashed var(--line-2);
  font-size:.885rem; color:var(--ink-2); line-height:1.72;
}
.why-honest b{ color:var(--ink) }
.why-cta{ display:flex; justify-content:center }

/* 상단바에서 지금 보고 있는 메뉴 */
.btn.ghost.on{ border-color:var(--line-2); color:var(--ink); font-weight:700 }
/* ── 추천 경로 ─────────────────────────────────────────────── */
.paths{ list-style:none; margin:.9rem 0 1rem; padding:0; display:grid; gap:.7rem }
.path{
  display:grid; gap:.28rem;
  padding:.85rem 1rem; border-radius:calc(var(--radius) * .7);
  background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--accent,var(--ink-3));
}
.path-t{ font-size:.95rem; font-weight:800; color:var(--accent,var(--ink)); letter-spacing:-.01em }
.path-who{ font-size:.86rem; color:var(--ink-3) }
.path .order{
  font-size:.88rem; font-weight:600; color:var(--ink);
  line-height:1.75; word-break:keep-all;
}
.path-go{
  justify-self:start; margin-top:.35rem;
  padding:.4rem .8rem; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.84rem; font-weight:700; line-height:1.2;
  color:var(--accent,var(--ink)); background:var(--paper);
  border:1px solid var(--accent,var(--line));
  transition:background .15s ease, color .15s ease;
}
.path-go:hover{ background:var(--accent-s,var(--line)) }
.path-go:focus-visible{ outline:2px solid var(--accent,var(--ink-3)); outline-offset:2px }
.path-go[aria-pressed="true"]{ color:#fff; background:var(--accent,var(--ink)) }
.path-go[hidden]{ display:none }
.path-why{ font-size:.88rem; color:var(--ink-2); line-height:1.7 }
@media (max-width:560px){
  .path{ padding:.75rem .85rem }
  .path .order{ font-size:.84rem }
}

.note-in .note-link{ color:var(--blue); font-weight:600 }
.note-in .note-link:hover{ text-decoration:underline }

@media (max-width:560px){
  .stage{ padding:1.05rem 1rem 1rem }
  .stage-head h2{ font-size:1.02rem }
}

/* ══════════════════════════════════════════════════════════════
   SPOW 저널 — /spow/ 의 표지 · 한 호 · 보관소

   네이처 온라인판의 뼈대를 따른다: 이번 호 하나를 크게, 그 아래 지난 호를
   찾아 들어가는 문. 여기에 하나가 더 붙는다 — 이 논문을 읽기 위한 강의.

   위의 토큰(--paper/--ink/--line/--radius)만 쓰므로 어두운 화면은 저절로
   따라온다. 색을 여기서 직접 적지 않는 이유가 그것이다.
   ══════════════════════════════════════════════════════════════ */
.jr{ max-width:1120px; margin:0 auto; padding:1.4rem 1.1rem 4rem }

/* ── 제호 ─────────────────────────────────────────────────── */
.jr-mast{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem;
  padding-bottom:.7rem; margin-bottom:1.5rem; border-bottom:2px solid var(--ink);
  font-size:.78rem; color:var(--ink-3);
}
.jr-brand{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; color:inherit }
.jr-brand b{ font-size:1.15rem; letter-spacing:.14em; color:var(--indigo); font-weight:800 }
.jr-brand span{ letter-spacing:.05em; color:var(--ink-3) }
.jr-vol,.jr-week,.jr-ed{ letter-spacing:.03em }
.jr-vol{ color:var(--ink-2); font-weight:600 }
.jr-ed{ margin-left:auto }
.jr-back{ margin:-.6rem 0 1.2rem; font-size:.85rem }
.jr-back a{ color:var(--ink-3); text-decoration:none }
.jr-back a:hover{ color:var(--indigo) }

/* ── 이번 호 ──────────────────────────────────────────────── */
.jr-hero{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1.6rem; align-items:start; margin-bottom:2.6rem;
}
@media (max-width:800px){ .jr-hero{ grid-template-columns:1fr } }
.jr-fig{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--paper); box-shadow:var(--shadow); aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
}
.jr-fig img{ width:100%; height:100%; object-fit:cover; display:block }
[data-theme="dark"] .jr-fig img{ filter:brightness(.92) }
.jr-fig-none{
  font-size:1.6rem; font-weight:800; letter-spacing:.18em; color:var(--ink-3);
  background:linear-gradient(135deg,var(--indigo),var(--plum));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.jr-eyebrow{
  display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--indigo); font-weight:700; margin-bottom:.5rem;
}
.jr-t{ margin:0 0 .4rem; font-size:clamp(1.4rem,3.2vw,2rem); line-height:1.3; letter-spacing:-.02em }
.jr-orig{ margin:0 0 .8rem; font-size:.83rem; color:var(--ink-3); line-height:1.55 }
.jr-meta{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:0 0 1rem; font-size:.82rem; color:var(--ink-2) }
.jr-badge{
  font-size:.7rem; padding:.1rem .45rem; border-radius:6px;
  border:1px solid var(--line-2); color:var(--ink-3); letter-spacing:.02em;
}
.jr-badge.free{ border-color:var(--mint); color:var(--mint); background:var(--mint-s) }
.jr-why{
  border-left:3px solid var(--indigo); background:var(--paper);
  padding:.7rem .95rem; border-radius:0 10px 10px 0; margin:0 0 1rem;
}
.jr-why b{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--indigo); margin-bottom:.3rem }
.jr-why p{ margin:0; font-size:.88rem; line-height:1.7; color:var(--ink-2) }

/* ── 판본 탭 ──────────────────────────────────────────────── */
.jr-eds{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem }
.jr-ed-tab{
  font-size:.8rem; font-weight:600; padding:.3rem .7rem; border-radius:9px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
  text-decoration:none; transition:border-color .15s, color .15s;
}
.jr-ed-tab:hover{ border-color:var(--indigo); color:var(--indigo) }
.jr-ed-tab.on{ background:var(--indigo); border-color:var(--indigo); color:#fff }
.jr-ed-tab.locked{ opacity:.55 }
.jr-lock{ font-size:.72em; margin-left:.2rem }
.jr-lic-note{ margin:0 0 1rem; font-size:.76rem; color:var(--ink-3); line-height:1.6 }
.jr-acts{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem }
.jr-note{ margin:0; font-size:.78rem; color:var(--ink-3); line-height:1.6 }

/* ── 절 머리 ──────────────────────────────────────────────── */
.jr-sh{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem;
  padding-bottom:.5rem; margin-bottom:1rem; border-bottom:1px solid var(--line);
}
.jr-sh h1,.jr-sh h2{ margin:0; font-size:1.08rem; letter-spacing:-.015em }
.jr-sh-top h1{ font-size:1.5rem }
.jr-sh span{ margin-left:auto; font-size:.78rem; color:var(--ink-3) }
.jr-sh a{ color:var(--indigo); text-decoration:none }

/* ── 이 논문을 읽기 위한 강의 ─────────────────────────────── */
.jr-crs{ margin-bottom:2.6rem }
.jr-aud{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-bottom:1rem }
.jr-aud-h{ font-size:.76rem; color:var(--ink-3); margin-right:.2rem }
.jr-aud-b{
  font-size:.78rem; font-weight:600; padding:.25rem .6rem; border-radius:8px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
  text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
}
.jr-aud-b:hover{ border-color:var(--accent,var(--indigo)); color:var(--accent,var(--indigo)) }
.jr-aud-b.on{ background:var(--accent-s); border-color:var(--accent); color:var(--accent) }
.jr-aud-b i{ font-style:normal; font-size:.72em; opacity:.7 }

.jr-path{
  border:1px solid var(--line); border-left:3px solid var(--accent,var(--indigo));
  border-radius:0 var(--radius) var(--radius) 0; background:var(--paper);
  padding:.9rem 1.05rem; margin-bottom:1.2rem;
}
.jr-path-who{ margin:0 0 .7rem; font-size:.84rem; color:var(--ink-2) }
.jr-steps{ list-style:none; margin:0 0 .7rem; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem }
.jr-steps li{ display:flex; align-items:center; gap:.3rem }
.jr-steps a{
  display:inline-flex; align-items:baseline; gap:.35rem; text-decoration:none;
  padding:.25rem .55rem; border-radius:8px; background:var(--accent-s); color:var(--ink);
  border:1px solid transparent; transition:border-color .15s;
}
.jr-steps a:hover{ border-color:var(--accent) }
.jr-step-n{ font-size:.68rem; font-weight:700; color:var(--accent) }
.jr-step-t{ font-size:.83rem; font-weight:600 }
.jr-step-m{ font-size:.68rem; color:var(--ink-3) }
.jr-arr{ color:var(--ink-3); font-size:.8rem }
.jr-path-note{ margin:0; font-size:.75rem; color:var(--ink-3); line-height:1.6 }

/* 51과목. 이 논문에 걸리지 않은 것은 지우지 않고 흐린다. */
.jr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:.4rem }
.jr-c{
  display:flex; flex-direction:column; gap:.1rem; text-decoration:none;
  padding:.45rem .55rem; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); transition:border-color .15s, opacity .15s;
}
.jr-c:hover{ border-color:var(--accent,var(--indigo)) }
.jr-c-no{ font-size:.62rem; font-weight:700; color:var(--accent,var(--ink-3)) }
.jr-c-t{ font-size:.76rem; font-weight:600; line-height:1.35 }
.jr-c-n{ font-size:.62rem; color:var(--ink-3) }
.jr-c.off{ opacity:.34 }
.jr-c.off:hover{ opacity:.75 }

/* ── 방법 ↔ 과목 ──────────────────────────────────────────── */
.jr-meth{ margin-bottom:2.6rem }
.jr-meth-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper) }
.jr-meth-t{ border-collapse:collapse; width:100%; font-size:.83rem; min-width:30rem }
.jr-meth-t td{ padding:.5rem .8rem; border-bottom:1px solid var(--line); vertical-align:top }
.jr-meth-t tr:last-child td{ border-bottom:none }
.jr-meth-t .mth{ color:var(--ink-2) }
.jr-meth-t .crs{ white-space:nowrap }
.jr-meth-t .crs a{ color:var(--indigo); text-decoration:none; font-weight:600 }

/* ── 지난 호 ──────────────────────────────────────────────── */
.jr-arch{ display:flex; flex-direction:column }
.jr-row{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.5rem .9rem;
  align-items:center; padding:.6rem .1rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.jr-row:hover{ background:var(--accent-s,var(--indigo-s)) }
.jr-row-wk{ font-size:.7rem; color:var(--indigo); font-weight:700; letter-spacing:.03em }
.jr-row-ti b{ display:block; font-size:.88rem; font-weight:600; line-height:1.45 }
.jr-row-ti em{ font-style:normal; font-size:.74rem; color:var(--ink-3) }
.jr-row-lic{ font-size:.68rem; color:var(--ink-3); white-space:nowrap;
  border:1px solid var(--line-2); border-radius:6px; padding:.08rem .4rem }
.jr-row-lic.free{ border-color:var(--mint); color:var(--mint) }

/* ── 찾기 ─────────────────────────────────────────────────── */
.jr-find{ display:flex; gap:.4rem; margin-bottom:.9rem }
.jr-find input{
  flex:1; min-width:0; padding:.45rem .7rem; border-radius:10px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
  font:inherit; font-size:.86rem;
}
.jr-find input:focus{ outline:2px solid var(--indigo); outline-offset:1px }
.jr-facets{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:1.2rem }
.jr-fc{
  font-size:.75rem; padding:.2rem .55rem; border-radius:8px; text-decoration:none;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:.3rem;
}
.jr-fc:hover{ border-color:var(--indigo); color:var(--indigo) }
.jr-fc.on{ background:var(--indigo); border-color:var(--indigo); color:#fff }
.jr-fc i{ font-style:normal; font-size:.72em; opacity:.7 }
.jr-none{ padding:2.4rem 0; text-align:center; color:var(--ink-3) }

/* 어휘가 겹치는 강 — 과목 단위보다 한 단 아래. lesson_tag 가 채워져야 뜬다. */
.jr-les{ margin:1.2rem 0 1.4rem }
.jr-les-h{ display:block; font-size:.76rem; color:var(--ink-3); margin-bottom:.5rem }
.jr-les-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px }
.jr-les-list a{
  display:grid; grid-template-columns:5.2rem 3rem minmax(0,1fr) auto; gap:.5rem .8rem;
  align-items:baseline; padding:.4rem .5rem; border-radius:8px;
  text-decoration:none; color:inherit; font-size:.8rem;
}
.jr-les-list a:hover{ background:var(--indigo-s) }
.jr-les-c{ font-size:.72rem; color:var(--indigo); font-weight:700 }
.jr-les-n{ font-size:.72rem; color:var(--ink-3); font-variant-numeric:tabular-nums }
.jr-les-t{ line-height:1.45 }
.jr-les-w{ font-size:.68rem; color:var(--ink-3); white-space:nowrap }
@media (max-width:640px){
  .jr-les-list a{ grid-template-columns:4.4rem 2.6rem minmax(0,1fr) }
  .jr-les-w{ display:none }
}

/* 계산 등급 — 읽기(기본)와 재현(신청). 상자를 헐고 다시 짓는 일이다. */
.jr-tier{ margin:1.2rem 0 1.6rem; padding:.9rem 1rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper) }
.jr-tier-h{ display:block; font-size:.76rem; color:var(--ink-3); margin-bottom:.6rem }
.jr-tier-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.6rem }
.jr-tier-b{ border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem;
  transition:border-color .15s, background .15s }
.jr-tier-b.on{ border-color:var(--indigo); background:var(--indigo-s) }
.jr-tier-b b{ font-size:.85rem }
.jr-tier-b p{ margin:.25rem 0 0; font-size:.76rem; color:var(--ink-2); line-height:1.6 }
.jr-tier-b code{ font-size:.92em; background:var(--page); padding:.05em .3em; border-radius:4px }
.jr-tier-act{ display:flex; align-items:center; gap:.6rem; margin-top:.7rem; flex-wrap:wrap }
.jr-tier-msg{ font-size:.76rem; color:var(--ink-3) }

/* 편집실 — 편집위원 일곱 분의 자리 */
.jr-desk-note{ border-left:3px solid var(--indigo); background:var(--paper);
  padding:.7rem 1rem; border-radius:0 10px 10px 0; margin:0 0 1rem;
  font-size:.86rem; color:var(--ink-2); line-height:1.7 }
.jr-desk-note b{ color:var(--ink) }
#deskTable textarea.imp{ width:100%; min-width:14rem; font:inherit; font-size:.8rem;
  padding:.35rem .5rem; border:1px solid var(--line-2); border-radius:8px;
  background:var(--paper); color:var(--ink); resize:vertical }

/* ══════════════════════════════════════════════════════════
   워크샾 알림 팝업 (.adv) — 랜딩에서만, 하루 한 번
   문구는 hub/hub_text.py 의 adv_* · 켜고 끄는 것은 거기 adv_on
   ══════════════════════════════════════════════════════════ */
.adv{
  width:min(600px, calc(100vw - 2rem));
  max-height:min(88vh, 900px);
  padding:0; border:0; border-radius:var(--radius);
  background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow-lg);
  overflow:auto; overscroll-behavior:contain;
}
.adv::backdrop{ background:rgba(15,23,42,.55); backdrop-filter:blur(3px) }
[data-theme="dark"] .adv::backdrop{ background:rgba(0,0,0,.68) }
.adv[open]{ animation:advIn .22s cubic-bezier(.22,1,.36,1) both }
@keyframes advIn{ from{ opacity:0; transform:translateY(14px) scale(.985) } }
@media (prefers-reduced-motion: reduce){ .adv[open]{ animation:none } }

/* 닫기 × — 머리 위에 겹쳐 둔다 */
.adv-x-form{ position:sticky; top:0; height:0; z-index:2; text-align:right }
.adv-x{
  position:relative; top:.5rem; right:.55rem;
  width:2rem; height:2rem; padding:0; line-height:1;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.72); color:var(--ink-2);
  font-size:1.35rem; backdrop-filter:blur(6px);
}
[data-theme="dark"] .adv-x{ background:rgba(21,27,38,.72) }
.adv-x:hover{ background:var(--rose-s); color:var(--rose) }

/* 머리 — 접두 문구 · 제목 · 한 문단 */
.adv-head{
  padding:1.2rem 1.5rem .95rem;
  background:linear-gradient(160deg, var(--coral-s), transparent 78%);
  border-bottom:1px solid var(--line);
}
.adv-eyebrow{
  display:inline-block; margin-bottom:.4rem;
  padding:.16rem .6rem; border-radius:999px;
  background:var(--coral); color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
}
.adv-head h2{
  margin:0 0 .4rem; font-size:1.3rem; line-height:1.28;
  letter-spacing:-.02em; padding-right:2rem;
}
.adv-lead{ margin:0; font-size:.86rem; line-height:1.6; color:var(--ink-2) }

/* 장소 · 일시 · 시간 · 주최 */
.adv-meta{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.45rem; margin:0; padding:.85rem 1.5rem;
}
.adv-m{
  padding:.45rem .65rem; border-radius:10px;
  background:var(--page); border:1px solid var(--line);
}
.adv-m dt{
  display:flex; align-items:center; gap:.3rem; margin:0 0 .12rem;
  font-size:.72rem; font-weight:700; color:var(--ink-3);
}
.adv-ico{ font-size:.85rem; line-height:1 }
.adv-m dd{ margin:0; font-size:.86rem; font-weight:700; line-height:1.4 }
.adv-soft{ font-weight:600; color:var(--ink-3) }

/* 워크샾 내용 */
.adv-h{
  margin:0; padding:0 1.5rem .35rem;
  font-size:.78rem; font-weight:800; letter-spacing:.02em; color:var(--ink-3);
}
.adv-body{ list-style:none; margin:0; padding:0 1.5rem .35rem }
.adv-body li{
  display:grid; grid-template-columns:3.1rem 1fr; gap:.6rem;
  padding:.4rem 0; border-top:1px solid var(--line);
}
.adv-body li:first-child{ border-top:0 }
.adv-t{
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.78rem; font-weight:700; color:var(--coral);
  padding-top:.1rem; font-variant-numeric:tabular-nums;
}
.adv-c > b{ display:block; font-size:.89rem; line-height:1.4 }
.adv-c > i{ display:block; font-style:normal; font-size:.79rem; line-height:1.55; color:var(--ink-2) }
.adv-c i b{ font-weight:800; color:var(--ink) }

.adv-need{
  margin:.7rem 1.5rem 0; padding:.5rem .75rem;
  border-radius:10px; background:var(--mint-s);
  font-size:.79rem; line-height:1.55;
}

/* 선행 강의 두 개 */
.adv-cta{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; padding:.75rem 1.5rem .1rem }
.adv-cta-h{ width:100%; font-size:.75rem; font-weight:800; color:var(--ink-3) }
.adv-btn{
  flex:1 1 12rem; padding:.5rem .8rem; border-radius:10px;
  border:1.5px solid var(--line-2); background:var(--paper);
  font-size:.83rem; font-weight:700; text-align:center;
  transition:border-color .14s, color .14s;
}
.adv-btn:hover{ border-color:var(--coral); color:var(--coral) }

/* 바닥 — 오늘 하루 보지 않기 · 닫기 */
.adv-foot{
  position:sticky; bottom:0;
  display:flex; align-items:center; gap:.75rem;
  margin-top:.85rem; padding:.7rem 1.5rem;
  background:var(--paper); border-top:1px solid var(--line);
}
.adv-hide{
  flex:1 1 100%; display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:var(--ink-2); cursor:pointer;
}
.adv-hide input{ accent-color:var(--coral); width:.95rem; height:.95rem; cursor:pointer }
.adv-done{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.48rem 1.05rem; border:0; border-radius:10px; cursor:pointer;
  background:var(--coral); color:#fff; font-size:.85rem; font-weight:800;
  font-family:inherit; white-space:nowrap;
}
.adv-done:hover{ filter:brightness(1.08); color:#fff }
.adv-done.ghost{
  background:transparent; color:var(--ink-2);
  border:1.5px solid var(--line-2); padding:.4rem .85rem;
}
.adv-done.ghost:hover{ filter:none; border-color:var(--ink-3); color:var(--ink) }

@media (max-width:520px){
  /* 좁아도 2열을 지킨다 — 1열로 풀면 세로가 250px 쯤 늘어난다 */
  .adv-meta{ gap:.4rem }
  .adv-m{ padding:.4rem .55rem }
  .adv-m dd{ font-size:.8rem }
  .adv-head{ padding:1.25rem 1.15rem 1rem }
  .adv-head h2{ font-size:1.24rem }
  .adv-meta, .adv-h, .adv-body, .adv-cta, .adv-foot{ padding-left:1.15rem; padding-right:1.15rem }
  .adv-need{ margin-left:1.15rem; margin-right:1.15rem }
}

/* 바닥 — 넓으면 한 줄, 좁으면 체크박스가 위로 접힌다 */
.adv-foot{ flex-wrap:wrap; row-gap:.5rem }
@media (min-width:430px){ .adv-hide{ flex:1 1 auto } }