:root{
  --bg:#0e0e12;--bg2:#131318;--panel:#17171e;--border:#26262f;--border2:#32323e;
  --ink:#d7d7e0;--muted:#8b8b9a;--faint:#5c5c6a;
  --vio:#a78bfa;--vio2:#c4b5fd;--vio-deep:#7c5cff;--vio-bg:rgba(139,92,246,.10);
  --code-bg:#1a1a24;--sidebar-w:294px;
  --good:#34d399;--good-bg:rgba(52,211,153,.12);--good-ink:#a7f3d0;
  --bad:#f87171;--bad-bg:rgba(248,113,113,.12);--bad-ink:#fecaca;
  --icon-cut:#0e0e12;--tile-ink:#fff;--strong:#ffffff;
}
/* ---- 테마 (설정에서 고른다. 앱도 같은 키를 쓴다) ---- */
:root[data-theme="abyss"]{
  --bg:#07121a;--bg2:#0b1a24;--panel:#0f2230;--border:#183241;--border2:#22455a;
  --ink:#d3e6ef;--muted:#7fa3b4;--faint:#54798a;
  --vio:#3ec9c0;--vio2:#7ff0e6;--vio-deep:#12a89f;--vio-bg:rgba(62,201,192,.12);
  --code-bg:#0c1f2b;--icon-cut:#07121a;--strong:#eefaff;
  --good:#4ade80;--good-bg:rgba(74,222,128,.14);--good-ink:#bbf7d0;
  --bad:#fb7185;--bad-bg:rgba(251,113,133,.14);--bad-ink:#fecdd3;
}
:root[data-theme="paper"]{
  --bg:#fbfaf7;--bg2:#ffffff;--panel:#f3f2ee;--border:#e2e0d9;--border2:#cfccc2;
  --ink:#23212c;--muted:#5f5c6b;--faint:#8c8998;
  --vio:#6d47d9;--vio2:#5a35c4;--vio-deep:#7c5cff;--vio-bg:rgba(124,92,255,.10);
  --code-bg:#f1efe9;--icon-cut:#ffffff;--tile-ink:#fff;--strong:#0d0b14;
  --good:#128a5b;--good-bg:rgba(18,138,91,.12);--good-ink:#0d6b46;
  --bad:#c93b3b;--bad-bg:rgba(201,59,59,.10);--bad-ink:#9d2b2b;
}
:root[data-theme="sepia"]{
  --bg:#f4ecdc;--bg2:#fbf5e9;--panel:#efe4cf;--border:#ded0b6;--border2:#c9b895;
  --ink:#3b3025;--muted:#6d5c46;--faint:#93816a;
  --vio:#9a5b2c;--vio2:#7d4620;--vio-deep:#b26a33;--vio-bg:rgba(154,91,44,.12);
  --code-bg:#eee2ca;--icon-cut:#fbf5e9;--tile-ink:#fff;--strong:#241a0f;
  --good:#4f7a34;--good-bg:rgba(79,122,52,.14);--good-ink:#3c5e27;
  --bad:#a8452f;--bad-bg:rgba(168,69,47,.12);--bad-ink:#83341f;
}
:root[data-theme="contrast"]{
  --bg:#000000;--bg2:#0a0a0a;--panel:#141414;--border:#3a3a3a;--border2:#5a5a5a;
  --ink:#ffffff;--muted:#d0d0d0;--faint:#a0a0a0;
  --vio:#ffd166;--vio2:#ffe49b;--vio-deep:#f2b705;--vio-bg:rgba(255,209,102,.16);
  --code-bg:#101010;--icon-cut:#000000;--strong:#ffffff;
  --good:#5ef08a;--good-bg:rgba(94,240,138,.18);--good-ink:#c8ffd8;
  --bad:#ff8a8a;--bad-bg:rgba(255,138,138,.18);--bad-ink:#ffd5d5;
}
/* 밀도(모바일·앱 대비) */
:root[data-density="compact"]{--sidebar-w:264px}
:root[data-density="roomy"]{--sidebar-w:320px}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.75;letter-spacing:-.01em}
a{color:var(--vio);text-decoration:none}
a:hover{color:var(--vio2)}
/* ---- layout ---- */
.wrap{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:1.4rem 1.1rem 2rem}
.main{flex:1;min-width:0}
.content{max-width:47rem;margin:0 auto;padding:3.2rem 2rem 5rem}
/* ---- sidebar ---- */
.brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.brand .dot{width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#7c5cff,#c084fc);box-shadow:0 0 18px rgba(139,92,246,.45)}
.brand a{font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.02em}
.brand a:hover{color:var(--vio2)}
.nav-sec{margin:1.2rem 0 .3rem;font-size:.72rem;font-weight:700;color:var(--faint);
  text-transform:uppercase;letter-spacing:.12em}
/* 루트(서가) 접이식 메뉴 */
.nav details.nav-root{margin:.25rem 0}
.nav summary.nav-sec{margin:0;padding:.4rem .6rem;font-size:.74rem;color:var(--muted)}
.nav summary.nav-sec:hover{color:var(--ink)}
.nav details.nav-root[open]>summary.nav-sec{color:var(--vio2)}
.nav .nav-root>details,.nav .nav-root>a{margin-left:.55rem}
.nav a{display:block;padding:.32rem .6rem;margin:.1rem 0;border-radius:7px;color:var(--muted);
  font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav a:hover{background:var(--panel);color:var(--ink)}
.nav a.active{background:var(--vio-bg);color:var(--vio2);font-weight:600}
.nav details{margin:.1rem 0}
.nav summary{padding:.3rem .6rem;border-radius:7px;color:var(--muted);font-size:.88rem;
  font-weight:600;cursor:pointer;list-style:none;user-select:none}
.nav summary::-webkit-details-marker{display:none}
.nav summary::before{content:"▸ ";color:var(--faint)}
/* 자식 선택자여야 한다. 후손으로 두면 탐험이 열린 순간 그 안의 접힌 범주까지 펼친 표시가 된다 */
.nav details[open]>summary::before{content:"▾ "}
.nav summary:hover{background:var(--panel);color:var(--ink)}
.nav details a{margin-left:.85rem;font-size:.86rem}
/* ---- typography ---- */
.content h1{font-size:2.05rem;font-weight:800;letter-spacing:-.03em;line-height:1.3;
  padding-bottom:.7rem;border-bottom:1px solid var(--border);margin-bottom:1.4rem}
.content h2{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin:2.4rem 0 .8rem}
.content h3{font-size:1.08rem;font-weight:700;margin:1.8rem 0 .6rem;color:var(--vio2)}
.content p{margin:.85rem 0}
.content ul,.content ol{margin:.85rem 0 .85rem 1.5rem}
.content li{margin:.35rem 0}
.content strong{color:var(--strong)}
.content blockquote{margin:1.3rem 0;padding:.75rem 1.2rem;border-left:3px solid var(--vio-deep);
  background:var(--vio-bg);border-radius:0 10px 10px 0;color:var(--vio2)}
.content blockquote p{margin:.3rem 0}
.content code{font-family:"D2Coding","SF Mono",Menlo,monospace;font-size:.88em;
  background:var(--code-bg);border:1px solid var(--border);border-radius:5px;padding:.12em .4em}
.content pre{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;
  padding:1rem 1.2rem;overflow-x:auto;margin:1.2rem 0}
.content pre code{background:none;border:none;padding:0}
.content hr{border:none;border-top:1px solid var(--border);margin:2.2rem 0}
.content table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.92rem;display:block;overflow-x:auto}
.content th{text-align:left;color:var(--muted);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em}
.content th,.content td{padding:.55rem .8rem;border-bottom:1px solid var(--border)}
.content tr:hover td{background:rgba(139,92,246,.04)}
a.wikilink{border-bottom:1px dashed rgba(167,139,250,.5)}
/* ---- interactive quiz ---- */
.quiz{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:1.2rem 1.3rem;margin:1.5rem 0}
.qz-q{margin:0 0 1.3rem}
.qz-text{font-weight:600;margin-bottom:.55rem}
.qz-opt{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--border);color:var(--ink);border-radius:9px;
  padding:.55rem .9rem;margin:.4rem 0;cursor:pointer;font:inherit;font-size:.93rem;
  transition:border-color .12s}
.qz-opt:hover{border-color:var(--vio-deep)}
.qz-q.done .qz-opt{cursor:default;opacity:.7}
.qz-opt.right{border-color:var(--good);background:var(--good-bg);color:var(--good-ink);opacity:1!important}
.qz-opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink);opacity:1!important}
.qz-exp{display:none;margin:.6rem 0 0;padding:.7rem 1rem;background:var(--vio-bg);
  border-left:3px solid var(--vio-deep);border-radius:0 8px 8px 0;font-size:.92rem;color:var(--vio2)}
.qz-exp.show{display:block}
.qz-foot{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--border);padding-top:.8rem;font-size:.88rem;color:var(--muted)}
.qz-score{color:var(--vio2);font-weight:600}
.qz-prev{font-size:.78rem;color:var(--faint);margin-left:.5rem}
/* 전에 푼 기록. 새로 푼 문제와 구별되게 조금 가라앉히고, 고른 보기에 표시를 남긴다 */
.qz-q.was .qz-opt{opacity:.82}
.qz-q.was .qz-opt.right,.qz-q.was .qz-opt.picked{opacity:1}
.qz-opt.picked{position:relative}
:root[data-lang="en"] .qz-opt.picked::after{content:"Your pick"}
.qz-opt.picked::after{content:"고르셨던 답";position:absolute;right:.7rem;top:50%;
  transform:translateY(-50%);font-size:.68rem;font-weight:700;letter-spacing:.02em;opacity:.85}
.qz-was{display:inline-block;margin-left:.5rem;padding:.08rem .45rem;border-radius:99px;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;vertical-align:middle;
  border:1px solid var(--border);color:var(--faint)}
.qz-was.ok{border-color:var(--good);color:var(--good)}
.qz-was.no{border-color:var(--bad);color:var(--bad)}
.qz-reset{background:none;border:1px solid var(--border2);color:var(--muted);
  border-radius:8px;padding:.3rem .8rem;cursor:pointer;font:inherit;font-size:.82rem}
.qz-reset:hover{color:var(--ink);border-color:var(--vio-deep)}
/* ---- quiz (details fallback) ---- */
.content details{margin:.7rem 0 1.3rem;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:.6rem 1rem}
.content details[open]{border-color:var(--vio-deep)}
.content summary{cursor:pointer;font-weight:600;color:var(--vio);font-size:.9rem;
  list-style:none;user-select:none}
.content summary::before{content:"▸ ";transition:transform .15s}
.content details[open] summary::before{content:"▾ "}
.content summary::-webkit-details-marker{display:none}
.content details p{margin:.6rem 0 .2rem;font-size:.95rem}
/* ---- chrome ---- */
.crumbs{font-size:.82rem;color:var(--faint);margin-bottom:1.1rem}
.crumbs a{color:var(--faint)} .crumbs a:hover{color:var(--vio)}
.backlinks{margin-top:3.5rem;padding:1rem 1.2rem;background:var(--panel);
  border:1px solid var(--border);border-radius:12px}
.backlinks h4{font-size:.75rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.backlinks a{display:inline-block;margin-right:1rem;font-size:.9rem}
.foot{margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.foot a{color:var(--faint)} .foot a:hover{color:var(--vio)}
/* ---- hero (home) ---- */
.hero{position:relative;text-align:center;padding:4.5rem 0 3rem;overflow:hidden}
.hero .mark{font-size:4.2rem;font-weight:900;letter-spacing:-.04em;line-height:1.1;
  background:linear-gradient(120deg,#e9e4ff 10%,#a78bfa 45%,#7c5cff 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 32px rgba(139,92,246,.35))}
.hero .tag{margin-top:.9rem;font-size:1.15rem;color:var(--muted);letter-spacing:.02em}
.hero .sub{margin-top:.4rem;font-size:.85rem;color:var(--faint)}
.constellation{position:absolute;inset:0;z-index:-1;opacity:.5}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;margin:2rem 0}
.card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:1.1rem 1.2rem;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--vio-deep);transform:translateY(-2px)}
.card .t{font-weight:700;color:var(--ink);margin-bottom:.25rem}
.card .d{font-size:.84rem;color:var(--muted);line-height:1.55}
.card.ghost{opacity:.45;pointer-events:none}
/* ---- mobile ---- */
.menu-btn{display:none}
@media(max-width:860px){
  .sidebar{position:fixed;z-index:50;left:0;transform:translateX(-100%);transition:transform .2s;width:min(80vw,300px)}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
  .menu-btn{display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:40;width:100%;
    background:rgba(14,14,18,.85);backdrop-filter:blur(10px);border:none;border-bottom:1px solid var(--border);
    color:var(--ink);font-size:.95rem;font-weight:700;padding:.8rem 1.2rem;cursor:pointer}
  .content{padding:2rem 1.2rem 4rem}
  .hero .mark{font-size:3rem}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ── 콤보 연출 ─────────────────────────────────────────────
   연속 정답이 셋을 넘으면 화면 위쪽에 잠깐 떴다 사라진다.
   숫자를 세어 주는 것만으로 다음 문제를 풀 이유가 하나 생긴다. */
.mj-combo{
  position:fixed;left:50%;top:14vh;transform:translate(-50%,12px) scale(.86);
  z-index:60;pointer-events:none;
  padding:.5rem 1.1rem;border-radius:999px;
  background:linear-gradient(135deg,#7c5cff,#a78bfa);
  color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.02em;
  box-shadow:0 8px 30px rgba(124,92,255,.45);
  opacity:0;transition:opacity .18s ease, transform .28s cubic-bezier(.2,1.4,.4,1);
}
.mj-combo.go{opacity:1;transform:translate(-50%,0) scale(1)}
@media (prefers-reduced-motion: reduce){
  .mj-combo{transition:opacity .18s ease}
  .mj-combo.go{transform:translate(-50%,0) scale(1)}
}
/* 정답을 맞힌 보기가 한 번 튄다. 화면이 반응했다는 신호다. */
@keyframes mj-pop{0%{transform:scale(1)}42%{transform:scale(1.035)}100%{transform:scale(1)}}
.qz-opt.right{animation:mj-pop .34s ease}
@keyframes mj-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.qz-opt.wrong.picked{animation:mj-shake .26s ease}
@media (prefers-reduced-motion: reduce){
  .qz-opt.right,.qz-opt.wrong.picked{animation:none}
}

/* ---- 로고 ---- */
.brand .mark-svg{width:28px;height:28px;flex-shrink:0;border-radius:9px;
  filter:drop-shadow(0 0 14px rgba(139,92,246,.35))}
.hero .logo-big{width:76px;height:76px;margin:0 auto .8rem;display:block;border-radius:22px;
  filter:drop-shadow(0 0 34px rgba(139,92,246,.45))}
/* ---- 사이드바 탐험가 카드 ---- */
.mj-user{margin:.2rem 0 1.1rem;padding:.75rem .8rem;background:var(--panel);
  border:1px solid var(--border);border-radius:12px}
.mj-lv{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem}
.mj-lvname{font-size:.86rem;font-weight:700;color:var(--vio2)}
.mj-xp{font-size:.74rem;color:var(--faint)}
.mj-bar{height:5px;background:#20202a;border-radius:3px;overflow:hidden;margin:.45rem 0 .5rem}
.mj-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#7c5cff,#c4b5fd);transition:width .4s}
.mj-bar.big{height:8px;margin:.5rem 0 .35rem}
.mj-bar.sm{height:4px;margin:.4rem 0 .25rem}
.mj-mini{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.74rem;color:var(--muted)}
.mj-who{display:flex;align-items:center;gap:.45rem;margin-top:.6rem;
  padding-top:.55rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.mj-who img{width:20px;height:20px;border-radius:50%}
/* ---- 아바타 ---- */
.mj-av{position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;border-radius:50%;overflow:hidden;vertical-align:middle;line-height:0}
.mj-av svg,.mj-av img{width:100%;height:100%;display:block;object-fit:cover}
/* 클래스 둘로 잡는 이유가 있다. .lb-who b 가 뒤에 와서 display:block으로 덮어
   글자가 원 왼쪽 위로 몰렸다. 특이도를 한 단계 올려 그 규칙을 넘어선다. */
.mj-av .mj-ini{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;line-height:1;width:auto}
.lb-who .lb-face{margin-right:.5rem}
.lb-who{display:flex;align-items:center;gap:0}
.lb-who>b{margin-right:.4rem}
/* ---- 아바타 고르기 ---- */
.av-wrap{margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--border)}
.av-now{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.av-now>div{display:flex;flex-direction:column;min-width:0}
.av-now b{font-size:.86rem}
.av-now span{font-size:.74rem;color:var(--muted);line-height:1.5}
.av-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.av-pick{padding:3px;border:2px solid transparent;border-radius:50%;background:none;
  cursor:pointer;line-height:0;transition:border-color .15s}
.av-pick:hover{border-color:var(--border2)}
.av-pick.on{border-color:var(--vio)}
.av-pick:focus-visible{outline:2px solid var(--vio);outline-offset:2px}
.av-acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.av-up{cursor:pointer}
.lb-flag{margin-left:auto;background:none;border:none;color:var(--faint);cursor:pointer;
  font-size:.8rem;padding:0 .2rem;line-height:1;opacity:.45;transition:opacity .15s,color .15s}
.lb-flag:hover{opacity:1;color:var(--bad,#f87171)}
.lb-flag:disabled{opacity:.2;cursor:default}
.lb-flag:focus-visible{outline:2px solid var(--vio);outline-offset:2px;opacity:1}
.mj-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-who.mj-anon{font-size:.72rem;color:var(--faint);display:block}
.mj-out{margin-left:auto;background:none;border:1px solid var(--border2);color:var(--faint);
  border-radius:6px;padding:.1rem .4rem;font:inherit;font-size:.68rem;cursor:pointer}
.mj-out:hover{color:var(--ink);border-color:var(--vio-deep)}
/* ---- 아이콘 ---- */
.mi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:20px;height:20px;color:currentColor;vertical-align:-4px}
.mi svg{width:100%;height:100%;display:block}
.mi-sm{width:16px;height:16px;margin-right:.4rem;vertical-align:-3px;opacity:.75}
.mi-xs{width:13px;height:13px;margin-right:.22rem;vertical-align:-2px;opacity:.8}
.mj-mini span{display:inline-flex;align-items:center}
.q-tile .t-i .mi,.cards .t .mi{width:18px;height:18px;margin-right:.35rem;vertical-align:-3px}
.mj-toast .i .mi,.mj-toast .i svg{width:22px;height:22px}
.q-goal .g-i{font-size:1.1rem}
/* ---- 사이드바 3메뉴 ---- */
.nav-top{display:flex!important;align-items:center;gap:.55rem;padding:.5rem .6rem!important;
  border-radius:9px;color:var(--ink)!important;font-weight:700;font-size:.95rem;
  cursor:pointer;list-style:none;user-select:none}
.nav-top::-webkit-details-marker{display:none}
.nav-top:hover{background:var(--panel)}
.nav-top.active{background:var(--vio-bg);color:var(--vio2)!important}
.nav details.nav-root>summary.nav-top::after{content:"";width:0;height:0;margin-left:auto;
  border:4px solid transparent;border-left-color:var(--faint);transition:transform .15s}
.nav details.nav-root[open]>summary.nav-top::after{transform:rotate(90deg) translateX(-2px)}
.nav details.nav-root[open]>summary.nav-top{color:var(--vio2)!important}
.nav-sep{height:1px;background:var(--border);margin:.8rem .3rem}
/* 탐험 안의 범주 층. 서가는 여기 접혀 있고, 보고 있는 서가의 범주만 펼쳐진다 */
.nav details.nav-cat>summary{font-size:.84rem;font-weight:700;color:var(--faint);letter-spacing:.01em}
.nav details.nav-cat>summary:hover{color:var(--ink)}
.nav details.nav-cat[open]>summary{color:var(--muted)}
.nav .nav-cat>a,.nav .nav-cat>details{margin-left:.7rem}
.nav .nav-cat details a{margin-left:.7rem}
/* ---- 페이지 전환 (사이드바를 다시 그리지 않고 본문만 바꾼다) ---- */
@view-transition{navigation:auto}
.sidebar{view-transition-name:mj-sidebar}
.main{view-transition-name:mj-main}
::view-transition-group(mj-sidebar){animation:none}
::view-transition-old(mj-sidebar),::view-transition-new(mj-sidebar){animation:none;mix-blend-mode:normal}
::view-transition-old(mj-main){animation:mj-fade-out .1s ease both}
::view-transition-new(mj-main){animation:mj-fade-in .16s ease both}
@keyframes mj-fade-out{to{opacity:0}}
@keyframes mj-fade-in{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(mj-main),::view-transition-new(mj-main){animation:none}
}
/* 사용자 카드 자리를 미리 잡아 두어 늦게 그려져도 화면이 밀리지 않는다 */
.mj-skel{display:flex;align-items:center;gap:.5rem;height:104px;padding:.1rem .1rem .6rem}
.mj-skel i{width:34px;height:34px;border-radius:10px;background:var(--panel);flex-shrink:0}
.mj-skel b{flex:1;height:12px;border-radius:6px;background:var(--panel)}
.mj-user:has(.mj-lv) .mj-skel{display:none}
/* ---- 탐험 타일 ---- */
.ex-cat{margin:2.2rem 0}
.ex-cat-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.ex-cat-head h2{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.ex-cat-sub{font-size:.85rem;color:var(--muted)}
.ex-cat-n{margin-left:auto;font-size:.78rem;color:var(--faint);
  border:1px solid var(--border);border-radius:99px;padding:.05rem .55rem}
.ex-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.ex-tile{position:relative;display:flex;flex-direction:column;gap:.15rem;overflow:hidden;
  min-height:148px;padding:.9rem .95rem 1rem;border-radius:16px;text-decoration:none;
  color:var(--tile-ink);isolation:isolate;
  background:linear-gradient(150deg,var(--t1,#333),var(--t2,#666));
  box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .16s,box-shadow .16s}
.ex-tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42))}
.ex-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.4);color:var(--tile-ink)}
.ex-tile:focus-visible{outline:2px solid var(--vio2);outline-offset:2px}
.ex-art{position:absolute;right:-14px;bottom:-16px;width:96px;height:96px;z-index:-1;
  opacity:.22;color:#fff;transform:rotate(-8deg)}
.ex-art svg{width:100%;height:100%}
.ex-ico{width:26px;height:26px;margin-bottom:.35rem;color:#fff;opacity:.95;display:block}
.ex-ico svg{width:100%;height:100%}
.ex-name{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.ex-tag{font-size:.76rem;line-height:1.45;opacity:.82;margin-bottom:.5rem}
.ex-meta{display:flex;align-items:center;gap:.4rem;margin-top:auto;font-size:.74rem;opacity:.9}
.ex-pct{margin-left:auto;font-weight:700}
.ex-bar{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.25);margin-top:.35rem}
.ex-bar i{display:block;height:100%;width:0;border-radius:99px;background:#fff;
  transition:width .5s ease}
.ex-tile.ex-done{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 10px 26px rgba(0,0,0,.35)}
.ex-soon{background:var(--panel);color:var(--faint);box-shadow:none;
  border:1px dashed var(--border2);cursor:default}
.ex-soon .ex-ico,.ex-soon .ex-art{color:var(--faint)}
.ex-soon:hover{transform:none;box-shadow:none}
/* ---- 설정 ---- */
.set-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin:.9rem 0 1.6rem}
.set-theme{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;
  padding:.75rem .8rem;border-radius:13px;border:1px solid var(--border);background:var(--bg2);
  color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.set-theme:hover{border-color:var(--vio-deep);transform:translateY(-2px)}
.set-theme[aria-pressed="true"]{border-color:var(--vio);box-shadow:0 0 0 1px var(--vio)}
.set-swatch{width:100%;height:34px;border-radius:9px;margin-bottom:.35rem;position:relative;
  border:1px solid var(--border2);overflow:hidden}
.set-swatch i{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%}
.set-theme-name{font-weight:700;font-size:.92rem}
.set-theme-desc{font-size:.75rem;color:var(--muted);line-height:1.45}
.set-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 1.6rem}
.set-opt{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);color:var(--ink);font:inherit;
  font-size:.9rem;cursor:pointer;transition:border-color .15s}
.set-opt:hover{border-color:var(--vio-deep)}
.set-opt[aria-pressed="true"]{border-color:var(--vio);background:var(--vio-bg);color:var(--vio2)}
/* 켜짐 상태. 소리·진동 토글처럼 두 상태를 오가는 버튼이 쓴다. */
.set-opt.on{border-color:var(--vio);background:var(--vio-bg);color:var(--vio2)}
.set-opt[role="switch"]{position:relative;padding-right:2.5rem}
.set-opt[role="switch"]::after{content:"";position:absolute;right:.7rem;top:50%;
  transform:translateY(-50%);width:26px;height:15px;border-radius:99px;
  background:var(--border);transition:background .16s ease}
.set-opt[role="switch"]::before{content:"";position:absolute;right:1.55rem;top:50%;
  transform:translateY(-50%);width:11px;height:11px;border-radius:99px;z-index:1;
  background:var(--faint);transition:transform .16s ease,background .16s ease}
.set-opt[role="switch"].on::after{background:var(--vio-deep)}
.set-opt[role="switch"].on::before{background:#fff;transform:translate(11px,-50%)}
.set-opt.set-danger{color:var(--bad);border-color:var(--bad)}
.set-opt.set-danger:hover{background:var(--bad-bg)}
.set-help{font-size:.86rem;color:var(--muted);margin:.2rem 0 0}
@media(max-width:860px){
  .ex-grid{gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
  .ex-tile{min-height:132px;padding:.75rem .8rem .85rem;border-radius:14px}
  .ex-art{width:78px;height:78px;right:-10px;bottom:-12px}
  .ex-name{font-size:.95rem}.ex-tag{font-size:.72rem}
  .ex-cat-head h2{font-size:1.12rem}
  .set-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
/* ---- 등급표·랭킹 ---- */
.rk-wrap{overflow-x:auto;margin:.9rem 0 1.6rem}
.rk-table{width:100%;border-collapse:collapse;font-size:.92rem}
/* build.py의 .content table은 display:block이라 표가 내용 폭까지만 늘어난다.
   가로 스크롤은 .rk-wrap/.lb-wrap이 이미 맡으므로 표 자체는 table로 되돌린다. */
.content .rk-table,.content .lb-table{display:table;width:100%;margin:0}
.rk-table th{text-align:left;font-size:.74rem;color:var(--faint);text-transform:uppercase;
  letter-spacing:.08em;padding:.4rem .7rem;border-bottom:1px solid var(--border)}
.rk-table td{padding:.5rem .7rem;border-bottom:1px solid var(--border)}
.rk-table tr.rk-done td{color:var(--muted)}
.rk-table tr.rk-now{background:var(--vio-bg)}
.rk-table tr.rk-now td{color:var(--vio2);font-weight:700}
.rk-lv{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.rk-name{font-weight:600}
.rk-xp{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.rk-tag{font-size:.68rem;font-weight:700;background:var(--vio-deep);color:#fff;
  border-radius:99px;padding:.05rem .45rem;margin-left:.3rem;vertical-align:2px}
.rk-xp-rules{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:.9rem 0 1.4rem}
.rk-rule{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:.55rem .8rem;font-size:.9rem}
.rk-rule b{color:var(--vio2);white-space:nowrap}
.lb-tabs{display:flex;gap:.4rem;margin:.2rem 0 1rem;flex-wrap:wrap}
.lb-tab{padding:.35rem .85rem;border-radius:99px;border:1px solid var(--border);
  color:var(--muted);font-size:.88rem}
.lb-tab.on{border-color:var(--vio);background:var(--vio-bg);color:var(--vio2);font-weight:700}
.lb-table .lb-n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-who b{display:block;font-weight:700}
.lb-who span{font-size:.76rem;color:var(--faint)}
.lb-rank{width:3rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.lb-me{background:var(--vio-bg)}
.lb-m{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font-size:.76rem;font-weight:800;color:#1a1a1a}
.lb-m1{background:#f5c451}.lb-m2{background:#cbd5e1}.lb-m3{background:#d8a06a}
/* ---- 닉네임 ---- */
.nick{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;margin:.9rem 0}
.nick-row{display:flex;gap:.5rem;flex-wrap:wrap}
.nick input{flex:1;min-width:180px;background:var(--panel);border:1px solid var(--border2);
  color:var(--ink);border-radius:10px;padding:.5rem .8rem;font:inherit;font-size:.95rem}
.nick input:focus{outline:none;border-color:var(--vio)}
.nick-msg{margin-top:.5rem;font-size:.84rem;color:var(--muted)}
/* 랭킹 노출 스위치. 이름과 별개로 순위표에 설지 말지를 고른다 */
/* 홈 책갈피. 카드 그리드 위에 좌우로 길게 눕는다 */
#mj-resume{margin:0 0 .9rem}
.resume{display:flex;align-items:center;gap:.85rem;width:100%;padding:.85rem 1.05rem;
  border:1px solid var(--border);border-radius:13px;background:var(--bg2);
  text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s,background .15s}
.resume:hover,.resume:focus-visible{border-color:var(--vio);background:var(--vio-bg);transform:translateY(-1px)}
.resume-k{display:inline-flex;align-items:center;gap:.4rem;flex:none;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;color:var(--vio2);padding-right:.85rem;border-right:1px solid var(--border)}
.resume-k .mi{width:15px;height:15px}
.resume-t{flex:1 1 auto;min-width:0;font-weight:650;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resume-w{flex:none;font-size:.8rem;color:var(--faint)}
.resume-go{flex:none;display:inline-flex;color:var(--muted)}
.resume-go .mi{width:16px;height:16px}
@media (max-width:640px){
  .resume{flex-wrap:wrap;gap:.45rem .7rem;padding:.8rem .9rem}
  .resume-k{border-right:0;padding-right:0}
  .resume-t{flex:1 0 100%;white-space:normal;line-height:1.45}
  .resume-go{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.resume{transition:none}.resume:hover{transform:none}}
.nick-switch{margin-top:.9rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.nick-switch .set-opt{display:inline-flex;align-items:center;gap:.5rem}
.nick-switch .set-opt .dot{width:26px;height:15px;border-radius:99px;background:var(--border);
  position:relative;transition:background .16s;flex:none}
.nick-switch .set-opt .dot::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;
  border-radius:50%;background:var(--faint);transition:transform .16s,background .16s}
.nick-switch .set-opt.on{border-color:var(--vio);color:var(--vio2)}
.nick-switch .set-opt.on .dot{background:var(--vio-deep)}
.nick-switch .set-opt.on .dot::after{transform:translateX(11px);background:#fff}
.nick-switch .set-opt[disabled]{opacity:.55;cursor:not-allowed}
.nick-switch .nick-msg{margin-top:0}
@media (prefers-reduced-motion:reduce){.nick-switch .set-opt .dot,
  .nick-switch .set-opt .dot::after{transition:none}}
.nick-msg.err{color:var(--bad)}
.nick-msg.ok{color:var(--good)}
/* ---- 로그인 카드 ---- */
.mj-signin{margin-top:.7rem;padding:.8rem .55rem .7rem;border-radius:14px;
  background:linear-gradient(165deg,rgba(124,92,255,.14),rgba(124,92,255,.03));
  border:1px solid rgba(139,92,246,.28);position:relative;overflow:hidden}
.mj-signin::after{content:"";position:absolute;inset:-40% -30% auto;height:70%;
  background:radial-gradient(closest-side,rgba(167,139,250,.22),transparent);pointer-events:none}
.mj-signin-head{display:flex;align-items:center;gap:.42rem;font-size:.82rem;
  font-weight:700;color:var(--vio2);letter-spacing:-.01em}
.mj-signin-head svg{width:17px;height:17px;flex-shrink:0;
  filter:drop-shadow(0 0 7px rgba(139,92,246,.55))}
.mj-signin-desc{margin:.32rem 0 .62rem;font-size:.71rem;line-height:1.5;color:var(--muted)}
#mj-gsi{display:flex;justify-content:center}
#mj-gsi > div{border-radius:99px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(139,92,246,.32),0 6px 18px rgba(0,0,0,.35);
  transition:box-shadow .16s,transform .16s}
#mj-gsi > div:hover{box-shadow:0 0 0 1px rgba(167,139,250,.8),0 0 22px rgba(124,92,255,.38),
  0 6px 18px rgba(0,0,0,.4);transform:translateY(-1px)}
/* ---- 계정 관리 카드(개인정보 처리방침 페이지) ---- */
.mj-account{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:1.1rem 1.2rem;margin:1.4rem 0}
.mj-acc-who{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.7rem}
.mj-acc-who span{font-weight:400;font-size:.85rem;color:var(--muted);margin-left:.35rem}
.mj-acc-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.mj-acc-b{background:var(--panel);border:1px solid var(--border2);color:var(--ink);
  border-radius:9px;padding:.45rem .9rem;font:inherit;font-size:.88rem;cursor:pointer}
.mj-acc-b:hover{border-color:var(--vio-deep)}
.mj-acc-b.mj-acc-danger{color:#fecaca;border-color:rgba(248,113,113,.45)}
.mj-acc-b.mj-acc-danger:hover{background:rgba(248,113,113,.12);border-color:#f87171}
.mj-acc-note{margin:.7rem 0 0;font-size:.82rem;color:var(--faint)}
/* ---- 토스트(업적 획득) ---- */
.mj-toasts{position:fixed;right:1.1rem;bottom:1.1rem;z-index:200;display:flex;
  flex-direction:column;gap:.5rem;max-width:min(92vw,340px)}
.mj-toast{display:flex;gap:.7rem;align-items:center;background:#1b1b25;
  border:1px solid var(--vio-deep);border-radius:13px;padding:.75rem .9rem;
  box-shadow:0 12px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);
  transition:opacity .25s,transform .25s}
.mj-toast.go{opacity:1;transform:none}
.mj-toast .i{font-size:1.4rem;line-height:1}
.mj-toast b{display:block;font-size:.9rem;color:var(--ink)}
.mj-toast span{display:block;font-size:.78rem;color:var(--muted);line-height:1.45}
/* ---- 퀘스트 공통 ---- */
.q-lead{color:var(--muted);margin-top:-.6rem}
.q-empty{padding:2rem 1rem;text-align:center;color:var(--faint);
  background:var(--panel);border:1px dashed var(--border2);border-radius:14px}
.q-empty.big{font-size:2rem;line-height:1.5;color:var(--vio2);padding:3rem 1rem}
.q-empty.big small{display:block;font-size:.85rem;color:var(--faint);margin-top:.6rem}
.q-note{background:var(--vio-bg);border-left:3px solid var(--vio-deep);border-radius:0 10px 10px 0;
  padding:.7rem 1rem;color:var(--vio2);font-size:.92rem;margin:1.2rem 0}
.q-btn{display:inline-block;background:var(--panel);border:1px solid var(--border2);
  color:var(--ink);border-radius:10px;padding:.55rem 1rem;font:inherit;font-size:.9rem;cursor:pointer}
.q-btn:hover{border-color:var(--vio-deep);color:var(--vio2)}
.q-btn.big{padding:.8rem 1.2rem;font-weight:700}
.q-btn.ghost{color:var(--faint)}
.q-dice{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.5rem}
.q-more{margin-top:1.6rem}
/* ---- 허브 ---- */
.q-hero{display:flex;gap:1.2rem;align-items:center;background:var(--panel);
  border:1px solid var(--border);border-radius:16px;padding:1.2rem 1.3rem;margin:1.4rem 0}
.q-rank{text-align:center;flex-shrink:0}
.q-rank-lv{font-size:1.6rem;font-weight:900;color:var(--vio2);line-height:1}
.q-rank-name{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.q-rank-bar{flex:1;min-width:0}
.q-rank-sub{font-size:.78rem;color:var(--faint)}
.q-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin:1rem 0 1.6rem}
.q-tile{background:var(--bg2);border:1px solid var(--border);border-radius:13px;
  padding:.85rem .7rem;text-align:center}
.q-tile .t-i{display:block;font-size:1.1rem}
.q-tile b{display:block;font-size:1.05rem;color:var(--ink);margin:.2rem 0 .1rem}
.q-tile span{font-size:.74rem;color:var(--faint)}
.q-goal{display:flex;gap:.7rem;align-items:center;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;margin:.5rem 0}
.q-goal .g-i{font-size:1.2rem}
.q-goal b{display:block;font-size:.92rem}
.q-goal span{display:block;font-size:.8rem;color:var(--muted);line-height:1.5}
/* ---- 러너 ---- */
.q-run{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.3rem;margin:1.4rem 0}
.q-run .qz-q{margin:0 0 1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border)}
.q-run .qz-q:last-of-type{border-bottom:none;margin-bottom:.6rem;padding-bottom:0}
.q-no{display:inline-block;min-width:1.5rem;color:var(--faint);font-weight:700}
.q-src{margin-top:.5rem;font-size:.76rem}
.q-src a{color:var(--faint)}
.q-src a:hover{color:var(--vio)}
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  border-top:1px solid var(--border);padding-top:.8rem;font-size:.86rem;color:var(--muted)}
.q-result{display:flex;gap:1rem;align-items:center;margin:1.2rem 0;padding:1.1rem 1.2rem;
  background:var(--vio-bg);border:1px solid var(--vio-deep);border-radius:14px}
.q-result.perfect{border-color:#34d399;background:rgba(52,211,153,.1)}
.r-pct{font-size:2.2rem;font-weight:900;color:var(--vio2);line-height:1}
.q-result.perfect .r-pct{color:#6ee7b7}
.r-pct small{font-size:1rem;font-weight:700}
.r-txt b{display:block;color:var(--ink)}
.r-txt span{display:block;font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:.15rem}
/* ---- 오늘의 문제 ---- */
.q-daylead{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 .2rem}
.q-date{font-size:1.05rem;font-weight:800;color:var(--vio2)}
.q-from{font-size:.86rem;color:var(--muted)}
.q-back{margin-left:auto;font-size:.82rem;color:var(--faint)}
/* ---- 문제집 ---- */
.q-examrow{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 1rem}
.q-cnt{font-size:.75rem;color:var(--faint);font-weight:500}
.q-setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;margin:.6rem 0 1.4rem}
.q-set{display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:.8rem .9rem;transition:border-color .15s,transform .15s}
.q-set:hover{border-color:var(--vio-deep);transform:translateY(-2px)}
.q-set.wide{grid-column:1/-1;background:var(--vio-bg);border-color:rgba(139,92,246,.35)}
.q-set b{display:block;font-size:.92rem;color:var(--ink)}
.q-set span{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}
.q-note.sm{background:none;border-left:none;padding:.2rem 0;font-size:.78rem;color:var(--faint)}
/* ---- 무한 문제풀기 ---- */
.e-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0 .2rem;
  padding:.7rem .9rem;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.e-scope{font-weight:700;font-size:.92rem;color:var(--ink)}
.e-scope small{display:block;font-weight:400;font-size:.74rem;color:var(--faint)}
.e-stats{display:flex;gap:1rem;margin-left:auto}
.e-stat{font-size:.72rem;color:var(--faint);text-align:center;line-height:1.35}
.e-stat b{display:block;font-size:1.05rem;font-weight:800;color:var(--ink)}
.e-stat.hot b{color:#fbbf24}
.e-q{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:1.2rem 1.3rem;margin:1rem 0 .6rem}
.e-opts .qz-opt{display:flex;align-items:flex-start;gap:.55rem}
.e-key{flex-shrink:0;width:1.15rem;height:1.15rem;margin-top:.12rem;border-radius:5px;
  background:var(--code-bg);border:1px solid var(--border);font-size:.7rem;font-weight:700;
  color:var(--faint);display:inline-flex;align-items:center;justify-content:center}
.qz-opt.right .e-key,.qz-opt.wrong .e-key{opacity:.55}
.e-act{display:flex;align-items:center;gap:.8rem;min-height:2.2rem}
.e-lap{font-size:.76rem;color:var(--faint)}
.e-prog{height:4px;border-radius:99px;background:var(--border);overflow:hidden;margin:0 0 .2rem}
.e-prog>i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--vio-deep),var(--vio2));transition:width .3s}
.e-stat b small{font-size:.72rem;font-weight:600;color:var(--faint)}
.e-where{font-size:.72rem;font-weight:700;color:var(--vio2);margin-bottom:.5rem}
.e-done{background:var(--vio-bg);border:1px solid rgba(139,92,246,.35);border-radius:14px;
  padding:1.6rem 1.3rem;margin:1rem 0;text-align:center}
.e-done .mi{width:2rem;height:2rem;color:var(--vio2)}
.e-done b{display:block;font-size:1.05rem;color:var(--ink);margin:.4rem 0 .25rem}
.e-done span{display:block;font-size:.85rem;color:var(--muted)}
.e-done-act{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.1rem}
/* ---- 단원 고르기 ---- */
.u-card{display:flex;flex-direction:column}
.u-main{display:block;flex:1}
.u-sub{display:block;margin-top:.5rem;font-size:.74rem;color:var(--faint);
  border-top:1px dashed var(--border);padding-top:.45rem}
.u-sub:hover{color:var(--vio2)}
.u-whole{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:1.2rem 0 1.4rem}
.u-wsum{font-size:.78rem;color:var(--faint)}
.u-wsum b{display:block;font-size:.92rem;color:var(--ink)}
.u-course{margin:0 0 1.3rem}
.u-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 .5rem}
.u-head b{font-size:.95rem;color:var(--ink)}
.u-head .q-btn{margin-left:auto}
.u-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem}
.u-item{display:block;background:var(--panel);border:1px solid var(--border);border-radius:11px;
  padding:.7rem .85rem;transition:border-color .15s,transform .15s}
.u-item:hover{border-color:var(--vio-deep);transform:translateY(-2px)}
.u-item b{display:block;font-size:.86rem;color:var(--ink);line-height:1.45}
.u-bar{display:block;height:4px;border-radius:99px;background:var(--border);
  overflow:hidden;margin:.45rem 0 .3rem;min-width:70px;flex:0 1 120px}
.u-bar>i{display:block;height:100%;border-radius:99px;background:var(--vio-deep)}
.u-n{font-size:.74rem;color:var(--faint)}
.u-open{font-style:normal;color:#f59e0b;margin-left:.45rem}
/* ---- 자격증 ---- */
.ct-shelf{font-size:.72rem;font-weight:500;color:var(--faint);margin-left:.5rem;vertical-align:middle}
.ct-banner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.8rem;
  padding:.9rem 1.1rem;background:var(--vio-bg);border:1px solid rgba(139,92,246,.35);border-radius:13px}
.ct-banner b{display:block;font-size:.95rem;color:var(--ink)}
.ct-banner-d{display:block;font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:.15rem}
.ct-banner .q-btn{margin-left:auto;white-space:nowrap}
.ct-track{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:1rem 1.15rem;margin:.9rem 0 1.4rem}
.ct-head{display:flex;align-items:baseline;gap:.6rem}
.ct-head b{font-size:1.02rem;letter-spacing:-.02em}
.ct-head span{font-size:.78rem;color:var(--faint)}
.ct-rule{margin:.45rem 0 .9rem;font-size:.82rem;color:var(--muted);line-height:1.6}
.ct-subs{display:grid;gap:.35rem;margin-bottom:.9rem}
.ct-sub{display:flex;align-items:center;gap:.6rem;padding:.45rem .7rem;border-radius:9px;
  background:var(--panel);font-size:.85rem}
.ct-sub b{font-weight:600;color:var(--ink)}
.ct-sub span{color:var(--faint);font-size:.76rem}
.ct-go{margin-left:auto;font-size:.76rem;white-space:nowrap}
.ct-acts{display:flex;gap:.6rem;flex-wrap:wrap}
/* ---- 모의고사 ---- */
.ex-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin:1rem 0;padding:.7rem .9rem;background:rgba(20,20,28,.92);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:12px}
.ex-bar.done{position:static}
.ex-name{font-weight:700;font-size:.9rem}
.ex-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem;color:var(--vio2)}
.ex-timer.hot{color:#fb7185}
.ex-count{font-size:.78rem;color:var(--faint);margin-left:auto}
.q-btn.sm{padding:.35rem .8rem;font-size:.82rem}
.ex-sub{margin:1.6rem 0 .9rem;font-size:.95rem;color:var(--vio2)}
.ex-sub small{font-weight:400;font-size:.75rem;color:var(--faint)}
.ex-q .qz-opt.ex-picked{border-color:var(--vio-deep);background:var(--vio-bg);color:var(--vio2)}
.ex-src{opacity:0}
.ex-q.done .ex-src{opacity:1}
.ex-card{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:1.2rem 0;
  padding:1.1rem 1.3rem;border-radius:14px;border:1px solid var(--border);background:var(--panel)}
.ex-card.pass{border-color:#34d399;background:rgba(52,211,153,.1)}
.ex-card.fail{border-color:#fb7185;background:rgba(251,113,133,.08)}
.ex-verdict{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.ex-card.pass .ex-verdict{color:#6ee7b7}
.ex-card.fail .ex-verdict{color:#fda4af}
.ex-score b{font-size:2.1rem;font-weight:900;letter-spacing:-.03em}
.ex-score small{font-size:.8rem;color:var(--faint);margin-left:.25rem}
.ex-why{flex:1;min-width:14rem;font-size:.84rem;color:var(--muted);line-height:1.6}
.ex-table{border-collapse:collapse;width:100%;margin:.8rem 0 1.2rem;font-size:.86rem}
.ex-table th{text-align:left;color:var(--faint);font-weight:600;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.06em;padding:.45rem .7rem}
.ex-table td{padding:.5rem .7rem;border-top:1px solid var(--border)}
.ex-table tr.ex-fail td{color:#fda4af}
/* ---- 업적 ---- */
.q-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem;margin:1.2rem 0}
.q-badge{display:flex;gap:.75rem;background:var(--panel);border:1px solid var(--border);
  border-radius:13px;padding:.85rem .9rem;opacity:.62}
.q-badge.on{opacity:1;border-color:var(--vio-deep);background:var(--vio-bg)}
.q-badge .b-i{font-size:1.5rem;line-height:1.2;filter:grayscale(1)}
.q-badge.on .b-i{filter:none}
.b-body{min-width:0;flex:1}
.b-body b{display:block;font-size:.92rem;color:var(--ink)}
.b-body span{display:block;font-size:.78rem;color:var(--muted);line-height:1.5;margin-top:.1rem}
.b-got{color:#6ee7b7!important;font-weight:600;margin-top:.35rem!important}
.b-p{font-size:.72rem!important;color:var(--faint)!important}
/* ---- 미니 게임 「허성 지우기」 ---- */
.g-hero{display:flex;gap:.9rem;align-items:center;background:var(--panel);border:1px solid var(--border);
  border-radius:16px;padding:1.1rem 1.2rem;margin:1.4rem 0}
.g-hero-i{flex-shrink:0;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--vio-bg);color:var(--vio2)}
.g-hero-i .mi{width:24px;height:24px}
.g-hero b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.g-hero span{display:block;font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:.1rem}
.g-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1rem 1.15rem;margin:1rem 0}
.g-card-h{display:flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:700;margin-bottom:.5rem}
.g-card-h .mi{width:18px;height:18px;color:var(--vio)}
.g-rules{margin:.2rem 0 0 1.15rem;padding:0}
.g-rules li{margin:.3rem 0;font-size:.92rem;line-height:1.65}
.g-note{font-size:.84rem;color:var(--muted);line-height:1.6;margin:.55rem 0 0}
.g-startrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.g-sel{flex:1;min-width:170px;background:var(--panel);border:1px solid var(--border2);color:var(--ink);
  border-radius:10px;padding:.6rem .8rem;font:inherit;font-size:.95rem}
.g-sel:focus{outline:none;border-color:var(--vio)}
.g-last{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.g-last li{display:flex;gap:.35rem;align-items:baseline;background:var(--panel);
  border:1px solid var(--border);border-radius:99px;padding:.2rem .7rem;font-size:.8rem}
.g-last b{color:var(--vio2)}
.g-last span{color:var(--faint);font-size:.74rem}
.g-err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad-ink);border-radius:12px;
  padding:.8rem 1rem;font-size:.92rem;line-height:1.6;margin:1rem 0}
/* 플레이 */
.g-top{display:flex;align-items:center;gap:.9rem;margin:1.4rem 0 .8rem}
.g-prog{flex:1;min-width:0}
.g-step{font-size:.8rem;color:var(--faint);font-variant-numeric:tabular-nums}
.g-score{display:flex;align-items:baseline;gap:.15rem;flex-shrink:0}
.g-score b{font-size:1.5rem;font-weight:900;color:var(--vio2);font-variant-numeric:tabular-nums;
  display:inline-block;transition:transform .25s}
.g-score b.pop{transform:scale(1.22)}
.g-score span{font-size:.78rem;color:var(--faint)}
.g-src-top{font-size:.78rem;color:var(--faint)}
.g-q{font-size:1.08rem;font-weight:600;line-height:1.7;margin:.5rem 0 1rem}
.g-mode{display:flex;gap:.5rem;align-items:flex-start;background:var(--panel);border:1px solid var(--border);
  border-left:3px solid var(--border2);border-radius:0 11px 11px 0;padding:.6rem .85rem;
  font-size:.84rem;color:var(--muted);line-height:1.55}
.g-mode b{color:var(--ink)}
.g-mode .mi{width:18px;height:18px;flex-shrink:0;color:var(--faint);margin-top:.1rem}
.g-mode.on{background:var(--vio-bg);border-color:var(--vio-deep);border-left-color:var(--vio);color:var(--vio2)}
.g-mode.on b{color:var(--vio2)}
.g-mode.on .mi{color:var(--vio)}
.g-mode.off{display:none}
.g-opts{display:grid;gap:.55rem;margin:.9rem 0}
.g-opts.wait{opacity:.6;pointer-events:none}
.g-opt{display:flex;align-items:center;gap:.7rem;width:100%;min-height:58px;text-align:left;
  background:var(--panel);border:1px solid var(--border);color:var(--ink);border-radius:13px;
  padding:.75rem .9rem;font:inherit;font-size:.98rem;line-height:1.5;cursor:pointer;
  transition:border-color .14s,background .14s,opacity .25s}
.g-opt:hover:not(:disabled){border-color:var(--vio-deep)}
.g-opt:focus-visible{outline:2px solid var(--vio2);outline-offset:2px}
.g-opt .k{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--faint)}
.g-opt .t{flex:1;min-width:0}
.g-opt .a{flex-shrink:0;font-size:.72rem;color:var(--faint);white-space:nowrap}
.g-opt:disabled{cursor:default}
.g-opts.commit .g-opt:not(.out){border-color:var(--vio);background:var(--vio-bg)}
.g-opts.commit .g-opt:not(.out) .a{color:var(--vio2);font-weight:700}
.g-opt.out{opacity:.5;border-style:dashed;background:transparent;color:var(--faint)}
.g-opt.out .t{text-decoration:line-through}
.g-opt.right{border-color:var(--good);background:var(--good-bg);color:var(--good-ink);opacity:1}
.g-opt.right .k{border-color:var(--good);color:var(--good-ink)}
.g-opt.right .a{color:var(--good-ink);font-weight:700}
.g-opt.right .t{text-decoration:none}
.g-opt.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink);opacity:1}
.g-opt.bad .k{border-color:var(--bad);color:var(--bad-ink)}
.g-opt.bad .a{color:var(--bad-ink)}
.g-act{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0}
.g-fb{display:flex;gap:.9rem;align-items:center;border-radius:14px;padding:.9rem 1.1rem;margin:1.2rem 0 .6rem;
  background:var(--vio-bg);border:1px solid var(--vio-deep)}
.g-fb.good{border-color:var(--good);background:var(--good-bg)}
.g-fb.zero{border-color:var(--bad);background:var(--bad-bg)}
.g-fb-n{font-size:1.7rem;font-weight:900;line-height:1;color:var(--vio2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.g-fb.good .g-fb-n{color:var(--good-ink)}
.g-fb.zero .g-fb-n{color:var(--bad-ink)}
.g-fb-n small{font-size:.8rem;font-weight:700;margin-left:.1rem}
.g-fb-t b{display:block;font-size:.95rem;line-height:1.5}
.g-fb-t span{display:block;font-size:.85rem;color:var(--muted);line-height:1.55;margin-top:.15rem}
.g-exp{background:var(--vio-bg);border-left:3px solid var(--vio-deep);border-radius:0 10px 10px 0;
  padding:.7rem 1rem;font-size:.9rem;color:var(--vio2);line-height:1.65;margin:.6rem 0}
/* 결과 */
.g-res{display:flex;gap:1.1rem;align-items:center;background:var(--vio-bg);border:1px solid var(--vio-deep);
  border-radius:16px;padding:1.2rem 1.3rem;margin:1.4rem 0}
.g-res.perfect{border-color:var(--good);background:var(--good-bg)}
.g-res-n{font-size:2.3rem;font-weight:900;line-height:1;color:var(--vio2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.g-res.perfect .g-res-n{color:var(--good-ink)}
.g-res-n small{font-size:.95rem;font-weight:700;color:var(--muted)}
.g-res-t b{display:block;color:var(--ink);font-size:.98rem;line-height:1.5}
.g-res-t span{display:block;font-size:.86rem;color:var(--muted);margin-top:.2rem}
.g-rev{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem;margin:.7rem 0}
.g-rev.zero{border-color:var(--bad)}
.g-rev-h{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
.g-rev-i{font-size:.76rem;font-weight:700;color:var(--faint)}
.g-rev-s{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--vio2);font-variant-numeric:tabular-nums}
.g-rev.zero .g-rev-s{color:var(--bad-ink)}
.g-rev-q{font-size:.95rem;font-weight:600;line-height:1.65}
.g-rev-o{list-style:none;margin:.55rem 0 0;padding:0;display:grid;gap:.3rem}
.g-rev-o li{display:flex;gap:.5rem;align-items:baseline;font-size:.88rem;color:var(--muted);
  border:1px solid transparent;border-radius:9px;padding:.28rem .5rem;line-height:1.55}
.g-rev-o .k{flex-shrink:0;font-weight:700;color:var(--faint)}
.g-rev-o .t{flex:1;min-width:0}
.g-rev-o .a{flex-shrink:0;margin-left:auto;font-size:.72rem;white-space:nowrap;opacity:.85}
.g-rev-o li.right{border-color:var(--good);background:var(--good-bg);color:var(--good-ink)}
.g-rev-o li.right .k{color:var(--good-ink)}
.g-rev-o li.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)}
.g-rev-o li.bad .k{color:var(--bad-ink)}
.g-rev-o li.out .t{text-decoration:line-through}
.g-rev-o li.out{color:var(--faint);opacity:.75}
@media(max-width:640px){
  .g-hero{padding:.95rem 1rem;gap:.75rem}
  .g-q{font-size:1.02rem}
  .g-opt{min-height:64px;font-size:1rem;padding:.85rem;gap:.6rem}
  .g-opt .k{width:30px;height:30px}
  .g-opt .a{font-size:.68rem}
  .g-act .q-btn{flex:1;text-align:center}
  .g-startrow{flex-direction:column;align-items:stretch}
  .g-startrow .q-btn{width:100%;text-align:center}
  .g-res{gap:.8rem;padding:1rem}
  .g-res-n{font-size:1.9rem}
  .g-fb{padding:.85rem .9rem;gap:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .g-opt,.g-score b{transition:none}
  .g-score b.pop{transform:none}
}
/* ---- 서가 성좌 지도 ----
   과목 하나가 별자리 하나. 색은 전부 테마 토큰에서 가져오므로 밝은 테마에서도
   미탐사·관측·정복이 그대로 구별된다.
   성능 규칙: 별 하나에 filter나 blur를 걸지 않는다. 빛무리는 문서에 한 벌만 둔
   radialGradient 네 개를 모든 별이 나눠 쓰고, 끝없이 도는 애니메이션은 화면에
   들어온 카드(.is-near)에서만 돈다. */
.mjmap{margin:1.3rem 0 2.6rem}
.mjmap-defs{position:absolute;width:0;height:0;overflow:hidden}
/* 별빛 네 벌. 색은 여기서 토큰으로 채우므로 테마를 바꾸면 빛도 같이 바뀐다. */
.mjg .s0,.mjg .s1,.mjg .s2{stop-color:var(--muted)}
#mjg-void .s0{stop-opacity:.5}
#mjg-void .s1{stop-opacity:.16}
#mjg-void .s2{stop-opacity:0}
#mjg-seen .s0,#mjg-seen .s1,#mjg-seen .s2{stop-color:var(--vio)}
#mjg-seen .s0{stop-opacity:.8}
#mjg-seen .s1{stop-opacity:.28}
#mjg-seen .s2{stop-opacity:0}
#mjg-won .s0,#mjg-won .s1,#mjg-won .s2{stop-color:var(--good)}
#mjg-won .s0{stop-opacity:.92}
#mjg-won .s1{stop-opacity:.34}
#mjg-won .s2{stop-opacity:0}
#mjg-next .s0,#mjg-next .s1,#mjg-next .s2{stop-color:var(--vio2)}
#mjg-next .s0{stop-opacity:.7}
#mjg-next .s1{stop-opacity:.22}
#mjg-next .s2{stop-opacity:0}
.mjmap p{margin:0}
.mjmap ul,.mjmap ol{margin:0;padding:0;list-style:none}
.mjmap li{margin:0}
.mjmap h3{margin:0;font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.mjmap [hidden]{display:none!important}
.mjmap-lead{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:.9rem!important}
/* 넓은 화면에서는 본문 폭을 넘어 지도답게 펼친다 */
@media(min-width:1180px){
  .mjmap{--mjmap-w:min(60rem,calc(100vw - var(--sidebar-w) - 6rem));
    margin-inline:calc((100% - var(--mjmap-w)) / 2)}
}
/* 항해 요약판 */
.mjmap-deck{background:var(--bg2);border:1px solid var(--border);border-radius:16px;
  padding:1rem 1.1rem .95rem;margin-bottom:.8rem}
.mjmap-deck-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.mjmap-score{font-size:.9rem;color:var(--muted)}
.mjmap-score b{font-size:1.5rem;font-weight:900;color:var(--vio2);letter-spacing:-.03em;
  margin-right:.2rem;font-variant-numeric:tabular-nums}
.mjmap-rank{margin-left:auto;font-size:.76rem;color:var(--faint);
  border:1px solid var(--border2);border-radius:99px;padding:.05rem .65rem;white-space:nowrap}
.mjmap-bar{height:8px;background:var(--border);border-radius:99px;overflow:hidden;
  display:flex;margin:.65rem 0 .6rem}
.mjmap-bar i{display:block;height:100%;transition:width .5s ease}
.mjmap-bar i.is-won{background:var(--good)}
.mjmap-bar i.is-seen{background:var(--vio)}
.mjmap-legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--muted)}
.mjmap-legend li{display:inline-flex;align-items:center;gap:.4rem}
.mjmap-legend b{color:var(--ink);font-weight:700}
.mjmap-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.mjmap-legend .is-void .mjmap-dot{background:var(--muted);opacity:.8}
.mjmap-legend .is-seen .mjmap-dot{background:var(--vio);box-shadow:0 0 0 3px var(--vio-bg)}
.mjmap-legend .is-won .mjmap-dot{background:var(--good);box-shadow:0 0 0 3px var(--good-bg)}
/* 이어서 갈 별. 진행이 0인 방문자에게는 이 줄이 화면에서 제일 밝은 곳이 된다. */
.mjmap-next{position:relative;display:flex;align-items:center;gap:.5rem;margin-top:.8rem;
  padding:.6rem .8rem;border-radius:12px;background:var(--vio-bg);overflow:hidden;
  border:1px solid var(--border2);color:var(--vio2);font-size:.86rem;font-weight:700;
  line-height:1.5;transition:border-color .18s,transform .18s}
.mjmap-next:hover{border-color:var(--vio-deep);color:var(--vio2);transform:translateY(-1px)}
.mjmap-next .mi-sm{opacity:1;margin-right:0;flex-shrink:0}
.mjmap-next-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mjmap-next-go{margin-left:auto;flex-shrink:0;font-size:.78rem;font-weight:700;
  color:var(--vio2);opacity:.8}
.mjmap.is-fresh .mjmap-next{border-color:var(--vio);font-size:.92rem;padding:.72rem .85rem}
/* 별빛이 한 번 훑고 지나간다. 화면 밖이면 돌지 않는다. */
.mjmap-next::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-38%;width:34%;
  pointer-events:none;opacity:0;transform:skewX(-14deg);
  background:linear-gradient(to right,transparent,var(--vio-bg),transparent)}
.mjmap.is-anim.is-fresh.is-near .mjmap-next::after{
  animation:mjmap-sheen 5s ease-in-out 1.2s infinite}
@keyframes mjmap-sheen{
  0%{transform:translateX(0) skewX(-14deg);opacity:0}
  12%{opacity:1}
  42%{transform:translateX(420%) skewX(-14deg);opacity:0}
  100%{transform:translateX(420%) skewX(-14deg);opacity:0}}
/* 거르기 */
.mjmap-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.mjmap-chip{background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  border-radius:99px;padding:.32rem .85rem;font:inherit;font-size:.82rem;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.mjmap-chip:hover{border-color:var(--vio-deep);color:var(--ink)}
.mjmap-chip[aria-pressed="true"]{background:var(--vio-bg);border-color:var(--vio);
  color:var(--vio2);font-weight:700}
/* 구획 */
.mjmap-era-box{margin:0 0 1.5rem}
.mjmap-era{display:flex;align-items:center;gap:.6rem;margin:1.8rem 0 .75rem}
.mjmap-era-n{font-size:.72rem;color:var(--faint);border:1px solid var(--border);
  border-radius:99px;padding:.02rem .55rem;white-space:nowrap}
.mjmap-era-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.mjmap-era-box:first-of-type .mjmap-era{margin-top:0}
/* 성좌 카드 */
.mjmap-grid{display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
.mjmap-cst{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,var(--vio-bg),transparent 68%),var(--bg2);
  border:1px solid var(--border);border-radius:16px;padding:.9rem .95rem .95rem;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.mjmap-cst:hover{border-color:var(--vio-deep);transform:translateY(-2px)}
.mjmap-cst[data-state="done"]{border-color:var(--good);
  background:radial-gradient(120% 80% at 50% -10%,var(--good-bg),transparent 68%),var(--bg2)}
.mjmap-cst[hidden]{display:none}
/* 이번에 시작할 성좌. 하늘에서 딱 한 곳만 이 표시를 받는다. */
.mjmap-cst.is-here{border-color:var(--vio)}
.mjmap-cst.is-here .mjmap-sky{background:
  radial-gradient(130% 105% at 50% 0%,var(--vio-bg),transparent 72%)}
/* 이름이 붙은 성좌. 카드가 아래로 옅은 빛을 흘리고, 별빛이 비스듬히 훑고 지나간다. */
.mjmap-cst.is-named{box-shadow:0 12px 34px -20px var(--good)}
.mjmap-cst.is-named:hover{box-shadow:0 16px 40px -18px var(--good)}
.mjmap-cst.is-named::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-38%;
  width:34%;pointer-events:none;opacity:0;transform:skewX(-14deg);
  background:linear-gradient(to right,transparent,var(--good-bg),transparent)}
.mjmap.is-anim .mjmap-cst.is-named.is-near::after{
  animation:mjmap-sheen 6.5s ease-in-out infinite}
.mjmap-cst-h{display:flex;align-items:flex-start;gap:.55rem}
.mjmap-no{flex-shrink:0;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--vio-bg);border:1px solid var(--border2);color:var(--vio2);
  font-size:.71rem;font-weight:800;font-variant-numeric:tabular-nums}
.mjmap-cst[data-state="done"] .mjmap-no{background:var(--good-bg);border-color:var(--good);
  color:var(--good-ink)}
.mjmap-cst-t{flex:1;min-width:0}
.mjmap-cst-t b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.025em;
  line-height:1.4;color:var(--ink)}
.mjmap-cst-t span{display:block;font-size:.74rem;color:var(--faint);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mjmap-cst-n{flex-shrink:0;font-size:.71rem;color:var(--faint);padding-top:.25rem;
  font-variant-numeric:tabular-nums}
/* 성좌 이름표 */
.mjmap-tags{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.55rem}
.mjmap-name{display:inline-flex;align-items:center;gap:.32rem;margin:0!important;
  font-size:.76rem;font-weight:700;color:var(--faint);border:1px dashed var(--border2);
  border-radius:99px;padding:.05rem .6rem}
.mjmap-cst[data-state="done"] .mjmap-name{color:var(--good-ink);border-style:solid;
  border-color:var(--good);background:var(--good-bg)}
.mjmap-spark{width:11px;height:11px;flex-shrink:0;opacity:.55;
  transform-origin:center;transition:opacity .3s}
.mjmap-cst[data-state="done"] .mjmap-spark{opacity:1}
.mjmap.is-anim .mjmap-cst.is-named.is-near .mjmap-spark{
  animation:mjmap-spark-turn 9s linear infinite}
@keyframes mjmap-spark-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.mjmap-here{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;
  color:var(--vio2);background:var(--vio-bg);border:1px solid var(--vio);
  border-radius:99px;padding:.05rem .55rem;white-space:nowrap}
.mjmap-here::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--vio2);flex-shrink:0}
.mjmap.is-anim .mjmap-cst.is-near .mjmap-here::before{
  animation:mjmap-blink 2.2s ease-in-out infinite}
@keyframes mjmap-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
/* ---- 밤하늘 ----
   별 하나 없는 하늘도 하늘로 보여야 한다. 성좌가 비어 있는 카드에는 성진(星塵)이
   깔리고, 위쪽에서 옅은 빛이 내려온다. */
.mjmap-sky{position:relative;margin:.5rem -.2rem .15rem;border-radius:12px;overflow:hidden;
  background:radial-gradient(125% 100% at 50% 0%,var(--vio-bg),transparent 72%)}
.mjmap-cst[data-state="done"] .mjmap-sky{background:
  radial-gradient(125% 100% at 50% 0%,var(--good-bg),transparent 72%)}
.mjmap-sky::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1.1px 1.1px at 17% 24%,var(--faint),transparent),
    radial-gradient(1px 1px at 68% 61%,var(--faint),transparent),
    radial-gradient(1.3px 1.3px at 41% 82%,var(--faint),transparent),
    radial-gradient(1px 1px at 88% 13%,var(--faint),transparent),
    radial-gradient(1.5px 1.5px at 9% 71%,var(--faint),transparent),
    radial-gradient(1px 1px at 55% 36%,var(--faint),transparent);
  background-size:53px 47px,71px 61px,89px 43px,67px 79px,101px 67px,43px 91px}
.mjmap-sky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 80% at 50% 45%,transparent 55%,var(--bg2) 100%);opacity:.45}
.mjmap-svg{position:relative;display:block;width:100%;height:auto}

/* ---- 항로 ----
   아직 안 간 구간은 성긴 점선, 지나온 구간은 이어진 빛줄기. 빛무리는 같은 좌표에
   깔아 둔 굵고 옅은 선(.mjseg-aura)이 만든다. filter를 쓰지 않는 이유가 이것이다. */
.mjseg{fill:none;stroke:var(--faint);stroke-width:.42;stroke-linecap:round;
  stroke-dasharray:.6 2.1;opacity:.62;transition:stroke .35s,opacity .35s,stroke-width .35s}
.mjseg.is-seen{stroke:var(--vio);stroke-dasharray:none;stroke-width:.55;opacity:.6}
.mjseg.is-won{stroke:var(--good);stroke-dasharray:none;stroke-width:.72;opacity:.82}
.mjseg-aura{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:0;
  transition:opacity .4s}
.mjseg-aura.is-seen{stroke:var(--vio);opacity:.11}
.mjseg-aura.is-won{stroke:var(--good);opacity:.16}

/* ---- 별 ----
   빛무리·회절 십자·중심핵을 겹쳐 하나의 별을 만든다. 밝기(--m)는 별마다 조금씩
   다르게 박혀 있어 같은 크기의 점이 늘어서는 일이 없다. */
.mjs{color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mjs.is-seen{color:var(--vio)}
.mjs.is-won{color:var(--good)}
.mjs.is-next{color:var(--vio2)}
.mjs-glow{fill:url(#mjg-void);r:calc(var(--m,1) * 4.2px);
  transition:r .3s ease,opacity .3s}
.mjs.is-seen .mjs-glow{fill:url(#mjg-seen);r:calc(var(--m,1) * 7px)}
.mjs.is-won .mjs-glow{fill:url(#mjg-won);r:calc(var(--m,1) * 8.6px)}
.mjs.is-next .mjs-glow{fill:url(#mjg-next);r:calc(var(--m,1) * 5.6px)}
.mjmap-cst.is-here .mjs.is-next .mjs-glow{r:calc(var(--m,1) * 8.4px)}
.mjs-spike{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;
  transform:scale(.28);transition:opacity .3s ease,transform .3s ease}
.mjs.is-seen .mjs-spike{opacity:.3;transform:scale(.52)}
.mjs.is-next .mjs-spike{opacity:.28;transform:scale(.5)}
.mjmap-cst.is-here .mjs.is-next .mjs-spike{opacity:.5;transform:scale(.72)}
.mjs.is-won .mjs-spike{opacity:.72;transform:scale(1)}
.mjs-ring{fill:none;stroke:currentColor;stroke-width:.42;opacity:0;
  r:calc(var(--m,1) * 4.1px);transition:opacity .25s ease,r .25s ease,stroke-width .25s}
.mjs.is-won .mjs-ring{opacity:.55}
/* 성좌마다 다음 별은 있지만, 서가에서 지금 갈 곳은 한 곳(.is-here)뿐이다.
   나머지 성좌의 다음 별은 들머리를 알려 주는 정도로만 밝힌다. */
.mjs.is-next .mjs-ring{opacity:.3;stroke-width:.34}
.mjmap-cst.is-here .mjs.is-next .mjs-ring{opacity:.85;stroke-width:.5}
.mjs-core{fill:currentColor;r:calc(var(--m,1) * 1.28px);
  transition:r .2s ease,fill-opacity .3s}
.mjs.is-void .mjs-core{fill-opacity:.9}
.mjs.is-seen .mjs-core{r:calc(var(--m,1) * 1.85px)}
.mjs.is-won .mjs-core{r:calc(var(--m,1) * 2.05px)}
.mjs.is-next .mjs-core{r:calc(var(--m,1) * 1.7px);fill-opacity:1}
.mjmap-cst.is-here .mjs.is-next .mjs-core{r:calc(var(--m,1) * 2.2px)}
.mjs-pulse{fill:none;stroke:currentColor;stroke-width:.5;opacity:0}
.mjs-hit{fill:transparent}
/* 별은 희미해도 강 번호는 읽혀야 한다. 번호가 안 보이면 그 별이 몇 강인지 알 길이
   손가락으로 짚어 보는 것밖에 남지 않는다. */
.mjs-lbl{font-size:3.2px;font-weight:700;fill:var(--muted);text-anchor:middle;
  pointer-events:none;letter-spacing:-.06px;opacity:.95;
  transition:opacity .25s,fill .25s}
.mjs.is-seen .mjs-lbl{fill:var(--vio2);opacity:.9}
.mjs.is-won .mjs-lbl{fill:var(--good-ink);opacity:1}
.mjs.is-next .mjs-lbl{fill:var(--vio2);opacity:.8}
.mjmap-cst.is-here .mjs.is-next .mjs-lbl{opacity:1}
/* 손이 닿았을 때. 누를 수 있는 것이라는 게 분명해야 한다. */
.mjs:focus{outline:none}
.mjs:hover .mjs-core,.mjs:focus-visible .mjs-core,.mjs.is-sel .mjs-core{
  r:calc(var(--m,1) * 2.7px)}
.mjs:hover .mjs-ring,.mjs:focus-visible .mjs-ring,.mjs.is-sel .mjs-ring{
  opacity:1;stroke-width:.62;r:calc(var(--m,1) * 5.2px)}
.mjs:hover .mjs-glow,.mjs:focus-visible .mjs-glow,.mjs.is-sel .mjs-glow{
  r:calc(var(--m,1) * 10px)}
.mjs:hover .mjs-spike,.mjs:focus-visible .mjs-spike,.mjs.is-sel .mjs-spike{
  opacity:.85;transform:scale(1.06)}
.mjs:hover .mjs-lbl,.mjs:focus-visible .mjs-lbl,.mjs.is-sel .mjs-lbl{
  opacity:1;fill:var(--ink)}
.mjs.is-sel{color:var(--vio2)}

/* ---- 성좌가 떠오른다 ----
   카드가 화면에 들어오면 별이 순번대로 하나씩 켜지고, 지나온 항로가 그 뒤를 따라
   그려진다. 애니메이션은 fill-mode를 backwards로 두어 끝난 뒤에는 평소 규칙이
   다시 주도권을 갖는다. */
.mjmap.is-anim .mjmap-cst:not(.is-lit) .mjmap-stars,
.mjmap.is-anim .mjmap-cst:not(.is-lit) .mjmap-lines,
.mjmap.is-anim .mjmap-cst:not(.is-lit) .mjmap-aura{opacity:0}
@keyframes mjs-rise{
  from{opacity:0;transform:scale(.3)}
  60%{opacity:1}
  to{opacity:1;transform:none}}
.mjmap.is-anim .mjmap-cst.is-lit .mjs{
  transform-box:fill-box;transform-origin:center;
  animation:mjs-rise .5s cubic-bezier(.2,.9,.3,1) backwards;
  animation-delay:calc(var(--i,0) * .045s)}
@keyframes mjseg-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.mjmap.is-anim .mjmap-cst.is-lit .mjseg.is-seen,
.mjmap.is-anim .mjmap-cst.is-lit .mjseg.is-won,
.mjmap.is-anim .mjmap-cst.is-lit .mjseg-aura.is-seen,
.mjmap.is-anim .mjmap-cst.is-lit .mjseg-aura.is-won{
  stroke-dasharray:var(--len);
  animation:mjseg-draw .75s cubic-bezier(.35,0,.2,1) backwards;
  animation-delay:calc(var(--i,0) * .06s + .22s)}
/* 끝없이 도는 것은 화면 안(.is-near)에서만 돈다 */
@keyframes mjmap-ping{
  0%{r:calc(var(--m,1) * 2.4px);opacity:.8;stroke-width:.55}
  70%{r:calc(var(--m,1) * 8.2px);opacity:0;stroke-width:.2}
  100%{r:calc(var(--m,1) * 8.2px);opacity:0;stroke-width:.2}}
.mjmap.is-anim .mjmap-cst.is-here.is-near .mjs.is-next .mjs-pulse{
  animation:mjmap-ping 2.9s cubic-bezier(.2,.6,.35,1) infinite}
@keyframes mjs-twinkle{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:.4;transform:scale(.88)}}
.mjmap.is-anim .mjmap-cst.is-near .mjs.is-won .mjs-spike{
  animation:mjs-twinkle 4.6s ease-in-out var(--tw,0s) infinite}
/* ---- 카드 읽기창 ----
   별에 손을 올리면 여기에 그 강의 이름이 뜬다. 손가락에는 hover가 없으므로 별을
   한 번 누르면 이 자리가 그 별로 가는 링크로 바뀐다. 한 번 눌러 확인하고 한 번 더
   눌러 이동하는 구조라, 별 이름을 다시 목록으로 늘어놓을 필요가 없다. */
.mjmap-cap{min-height:3.1em;margin:.45rem 0 .1rem;font-size:.78rem;
  line-height:1.6;color:var(--muted)}
.mjmap-cap b{color:var(--ink);font-weight:700}
.mjmap-tag{color:var(--faint)}
.mjmap-tag.is-seen{color:var(--vio2)}
.mjmap-tag.is-won{color:var(--good-ink)}
.mjmap-cst.is-brink .mjmap-cap{color:var(--vio2)}
.mjmap-pick{display:flex;align-items:center;gap:.2rem .45rem;flex-wrap:wrap;width:100%;
  padding:.4rem .55rem;margin:0 -.55rem;border-radius:10px;line-height:1.5;
  background:var(--vio-bg);border:1px solid transparent;color:var(--muted);
  transition:border-color .15s}
.mjmap-pick:hover{border-color:var(--vio-deep)}
.mjmap-pick b{color:var(--ink);font-weight:700}
.mjmap-pick-n{flex-shrink:0;font-size:.72rem;font-weight:800;color:var(--vio2);
  font-variant-numeric:tabular-nums}
.mjmap-pick-go{margin-left:auto;flex-shrink:0;font-size:.73rem;font-weight:800;
  color:var(--vio2);white-space:nowrap}
.mjmap-pick.is-won{background:var(--good-bg)}
.mjmap-pick.is-won .mjmap-pick-n,.mjmap-pick.is-won .mjmap-pick-go{color:var(--good-ink)}
.mjmap-pick.is-won:hover{border-color:var(--good)}
/* 이번에 갈 곳이 아닌 카드는 조용히 있는다. 화면에서 채워진 상자는 한 곳뿐이다. */
.mjmap-pick.is-quiet{background:none;padding-left:0;padding-right:0;margin-inline:0}
.mjmap-pick.is-quiet .mjmap-pick-go{opacity:0;transition:opacity .15s}
.mjmap-cst:hover .mjmap-pick.is-quiet .mjmap-pick-go,
.mjmap-pick.is-quiet:focus-visible .mjmap-pick-go{opacity:1}
.mjmap-pick.is-quiet:hover{background:var(--vio-bg);padding-inline:.55rem;
  margin-inline:-.55rem;border-color:var(--vio-deep)}
.mjmap-foot{display:flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:.5rem}
.mjmap-cst-bar{flex:1;height:4px;background:var(--border);border-radius:99px;
  overflow:hidden;display:flex}
.mjmap-cst-bar i{display:block;height:100%;transition:width .5s ease}
.mjmap-cst-bar i.is-won{background:var(--good)}
.mjmap-cst-bar i.is-seen{background:var(--vio)}
.mjmap-cst-pct{font-size:.71rem;color:var(--faint);font-variant-numeric:tabular-nums}
.mjmap-empty{color:var(--faint);font-size:.88rem;text-align:center;padding:2rem 0}
@media(max-width:860px){
  .mjmap-grid{grid-template-columns:1fr}
  .mjmap-deck{padding:.9rem .95rem}
  .mjmap-score b{font-size:1.3rem}
  .mjmap-rank{margin-left:0;order:9}
  .mjmap-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;
    scrollbar-width:none;-ms-overflow-style:none}
  .mjmap-chips::-webkit-scrollbar{display:none}
  .mjmap-chip{flex-shrink:0;white-space:nowrap;padding:.4rem .9rem}
  /* 손가락으로 별을 짚어야 하므로 하늘을 키우고 과녁을 넓힌다 */
  .mjmap-svg{min-height:186px}
  .mjs-hit{r:7}
  .mjs-lbl{font-size:3.6px}
  .mjmap-cap{min-height:3.6em;font-size:.82rem}
  .mjmap-pick{padding:.5rem .6rem;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .mjmap-cst,.mjmap-bar i,.mjmap-cst-bar i,.mjs-core,.mjs-glow,.mjs-ring,.mjs-spike,
  .mjseg,.mjseg-aura,.mjmap-next{transition:none}
  .mjmap-cst:hover,.mjmap-next:hover{transform:none}
  .mjmap.is-anim .mjmap-cst:not(.is-lit) .mjmap-stars,
  .mjmap.is-anim .mjmap-cst:not(.is-lit) .mjmap-lines,
  .mjmap.is-anim .mjmap-cst:not(.is-lit) .mjmap-aura{opacity:1}
  .mjmap .mjs,.mjmap .mjseg,.mjmap .mjseg-aura,.mjmap .mjs-pulse,.mjmap .mjs-spike,
  .mjmap .mjmap-spark,.mjmap-here::before,.mjmap-cst.is-named::after,
  .mjmap-next::after{animation:none!important}
  .mjmap .mjseg,.mjmap .mjseg-aura{stroke-dashoffset:0}
  .mjs.is-next .mjs-pulse{opacity:.5;r:calc(var(--m,1) * 5.4px)}
  .mjmap-cst.is-named::after,.mjmap-next::after{display:none}
}

/* ---- 의식 전용 토큰. 다섯 테마 전부에 값이 있어야 한다 ---- */
:root{
  --mjo-star:#e7e7f2;          /* 밤하늘 별의 바탕색 */
  --mjo-floor:#08080b;         /* 화면 아래를 누르는 지평선 */
  --mjo-btn-ink:#12101c;       /* 강조 버튼 위의 글자 */
  --mjo-neb1:var(--vio-bg);
  --mjo-neb2:var(--good-bg);
  --mjo-line:var(--border2);   /* 아직 잇지 않은 성좌선 */
  --mjo-lift:0;                /* 단계가 깊어질수록 하늘이 열린다 (0~1) */
}
:root[data-theme="abyss"]{--mjo-star:#dff3fb;--mjo-floor:#030a10;--mjo-btn-ink:#04161c}
:root[data-theme="paper"]{--mjo-star:#6b6580;--mjo-floor:#eceae4;--mjo-btn-ink:#ffffff}
:root[data-theme="sepia"]{--mjo-star:#8a765c;--mjo-floor:#e6dbc4;--mjo-btn-ink:#fff8ec}
:root[data-theme="contrast"]{--mjo-star:#ffffff;--mjo-floor:#000000;--mjo-btn-ink:#000000}
/* 의식이 열린 동안 뒤 페이지는 움직이지 않는다 */
html.mjo-lock,html.mjo-lock body{overflow:hidden}

/* ---- 무대 ---- */
.mjo{position:fixed;inset:0;z-index:9000;background:var(--bg);color:var(--ink);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  font-size:16px;line-height:1.75;letter-spacing:-.01em}
.mjo[hidden]{display:none}
.mjo *{box-sizing:border-box}
.mjo-sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:calc(.6 + .4 * var(--mjo-lift));transition:opacity 1.1s ease}
.mjo-neb{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:calc(.55 + .45 * var(--mjo-lift));transition:opacity 1.1s ease;
  background:
    radial-gradient(62vw 48vw at 14% 6%, var(--mjo-neb1), transparent 62%),
    radial-gradient(54vw 42vw at 90% 30%, var(--mjo-neb2), transparent 60%),
    radial-gradient(74vw 54vw at 50% 106%, var(--mjo-neb1), transparent 64%)}
.mjo-horizon{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--mjo-floor))}
.mjo-shell{position:relative;z-index:1;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  opacity:0;transform:scale(.985);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.mjo.is-in .mjo-shell{opacity:1;transform:none}
.mjo.is-out .mjo-shell{opacity:0;transform:scale(1.03)}
.mjo-stage{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;
  max-width:62rem;margin:0 auto;padding:1.2rem 1.4rem 2.4rem}
.mjo-step{width:100%;display:none}
.mjo-step.is-on{display:block;margin-top:auto;margin-bottom:auto}
/* 나가는 단계는 하늘 위로 흘러 올라간다 */
.mjo-step.is-off{display:block;margin-top:auto;margin-bottom:auto;pointer-events:none;
  animation:mjo-drift .22s cubic-bezier(.4,0,1,1) forwards}
@keyframes mjo-drift{to{opacity:0;transform:translateY(-16px) scale(.99)}}
.mjo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mjo [hidden]{display:none!important}
.mjo [tabindex="-1"]:focus,.mjo [tabindex="-1"]:focus-visible{outline:none}
.mjo :focus-visible{outline:2px solid var(--vio2);outline-offset:3px;border-radius:6px}

/* ---- 상단 성좌 진행바 ---- */
.mjo-rail{position:sticky;top:0;z-index:5;width:100%;padding:.9rem 1.4rem 1.5rem;
  background:linear-gradient(180deg,var(--bg) 40%,transparent)}
.mjo-rail-in{max-width:34rem;margin:0 auto}
.mjo-brand{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.85rem}
.mjo-brand svg{width:22px;height:22px;flex-shrink:0;border-radius:7px}
.mjo-brand b{font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.mjo-track{position:relative;display:flex;justify-content:space-between}
.mjo-track::before,.mjo-fill{content:"";position:absolute;left:12.5%;top:9px;height:1px}
.mjo-track::before{right:12.5%;background:var(--mjo-line);opacity:.7}
/* 폭이 아니라 transform으로 늘린다. 폭 애니메이션은 매 프레임 레이아웃을 다시 잰다 */
.mjo-fill{width:75%;transform-origin:left center;transform:scaleX(var(--mjo-fill,0));
  background:linear-gradient(90deg,var(--vio-deep),var(--vio2));
  transition:transform .7s cubic-bezier(.4,0,.2,1)}
.mjo-node{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  gap:.35rem}
.mjo-node .d{width:18px;height:18px;display:grid;place-items:center}
.mjo-node .d i{width:6px;height:6px;border-radius:50%;background:var(--faint);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1),background .4s ease,box-shadow .4s ease}
.mjo-node[data-s="on"] .d i{background:var(--vio2);transform:scale(1.85);
  box-shadow:0 0 0 4px var(--vio-bg)}
.mjo-node[data-s="done"] .d i{background:var(--vio);transform:scale(1.35)}
.mjo-node b{font-size:.68rem;font-weight:700;color:var(--faint);white-space:nowrap;
  transition:color .3s ease}
.mjo-node[data-s="on"] b{color:var(--vio2)}
.mjo-node[data-s="done"] b{color:var(--muted)}

/* ---- 등장 연출: 요소가 순서대로 하늘에서 내려온다 ---- */
.mjo-rise{opacity:0;transform:translateY(14px)}
.mjo-step.is-on .mjo-rise{animation:mjo-rise .72s cubic-bezier(.22,1,.36,1) forwards}
@keyframes mjo-rise{to{opacity:1;transform:none}}
.mjo-d1{animation-delay:.05s}.mjo-d2{animation-delay:.16s}.mjo-d3{animation-delay:.28s}
.mjo-d4{animation-delay:.42s}.mjo-d5{animation-delay:.56s}.mjo-d6{animation-delay:.72s}

/* ---- 공통 타이포 ---- */
.mjo-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.2em;color:var(--faint);
  text-transform:uppercase}
.mjo h1{font-size:2.35rem;font-weight:900;letter-spacing:-.04em;line-height:1.24;
  margin:.7rem 0 .1rem}
.mjo h2{font-size:1.7rem;font-weight:900;letter-spacing:-.035em;line-height:1.3;
  margin:.55rem 0 .1rem}
.mjo h1 em,.mjo h2 em{font-style:normal;color:var(--vio2)}
.mjo-lede{color:var(--muted);font-size:1rem;line-height:1.8;max-width:35rem;
  margin:.8rem auto 0;word-break:keep-all}
.mjo-lede b{color:var(--ink);font-weight:700}
.mjo-sub{color:var(--faint);font-size:.85rem;margin-top:.5rem}
.mjo-center{text-align:center}

/* ---- 버튼 ---- */
.mjo-btn{border:1px solid var(--border2);background:var(--panel);color:var(--ink);
  border-radius:99px;padding:.8rem 1.6rem;font:inherit;font-size:.92rem;font-weight:700;
  cursor:pointer;min-height:48px;display:inline-flex;align-items:center;
  justify-content:center;gap:.5rem;white-space:nowrap;
  transition:border-color .16s,color .16s,background .16s,transform .16s}
.mjo-btn:hover{border-color:var(--vio-deep);color:var(--vio2)}
.mjo-btn:active{transform:translateY(1px)}
.mjo-btn svg{width:15px;height:15px;flex-shrink:0}
.mjo-btn[disabled]{opacity:.5;cursor:not-allowed}
.mjo-btn.is-primary{position:relative;overflow:hidden;border-color:transparent;
  background:linear-gradient(135deg,var(--vio-deep),var(--vio));
  color:var(--mjo-btn-ink);font-weight:800}
.mjo-btn.is-primary:hover{color:var(--mjo-btn-ink);filter:brightness(1.08)}
/* 제출하는 동안 빛이 버튼을 한 번씩 훑는다. 폭이 아니라 이동이라 값이 싸다 */
.mjo-btn.is-busy::after{content:"";position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(90deg,transparent,var(--mjo-btn-ink),transparent);
  opacity:.22;animation:mjo-sweep 1.1s linear infinite}
@keyframes mjo-sweep{from{transform:translateX(-160%)}to{transform:translateX(360%)}}
.mjo-btn.is-ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.mjo-btn.is-ghost:hover{color:var(--ink);border-color:var(--border2)}

/* ---- 하단 조작단 ---- */
.mjo-dock{position:sticky;bottom:0;z-index:4;
  padding:.9rem 1.4rem calc(.9rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--bg) 42%,var(--bg))}
.mjo-dock-in{max-width:44rem;margin:0 auto;display:flex;align-items:center;gap:.7rem;
  flex-wrap:wrap}
.mjo-dock .mjo-back{flex-shrink:0}
.mjo-dock .mjo-go{flex:1}
.mjo-later{flex-shrink:0;background:none;border:0;color:var(--faint);font:inherit;
  font-size:.8rem;cursor:pointer;padding:.6rem .3rem;min-height:44px;
  text-decoration:underline;text-underline-offset:3px}
.mjo-later:hover{color:var(--muted)}
/* 나중에 하겠다고 하면 무슨 일이 벌어지는지 먼저 알린다 */
.mjo-bye{max-width:44rem;margin:.7rem auto 0;border:1px solid var(--border2);
  border-radius:13px;background:var(--panel);padding:.8rem .9rem;text-align:left;
  font-size:.82rem;color:var(--muted);line-height:1.65;
  animation:mjo-rise .3s cubic-bezier(.22,1,.36,1) both}
.mjo-bye-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.mjo-bye-btns button{background:var(--bg2);border:1px solid var(--border2);color:var(--ink);
  border-radius:99px;padding:.35rem .9rem;font:inherit;font-size:.8rem;font-weight:700;
  cursor:pointer;min-height:40px}
.mjo-bye-btns button:hover{border-color:var(--vio-deep);color:var(--vio2)}

/* 보석 표식이 별 여섯에서 선으로 이어져 그려진다 */
.mjo-mark{width:132px;height:132px;margin:0 auto .2rem;display:block}
.mjo-mark .gem{stroke:url(#mjo-g);stroke-width:3.2;fill:none;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;
  animation:mjo-draw 1.5s .35s cubic-bezier(.4,0,.2,1) forwards}
.mjo-mark .web{stroke:url(#mjo-g);stroke-width:2.2;fill:none;opacity:0;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:mjo-draw 1.3s 1.15s cubic-bezier(.4,0,.2,1) forwards,
            mjo-web .4s 1.15s forwards}
@keyframes mjo-draw{to{stroke-dashoffset:0}}
@keyframes mjo-web{to{opacity:.45}}
.mjo-mark .vtx{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:mjo-pop .55s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes mjo-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.25)}
  100%{opacity:1;transform:scale(1)}}
.mjo-mark .core{animation-delay:1.95s}
.mjo-mark .halo{opacity:0;animation:mjo-fade 1s 2.1s forwards}
@keyframes mjo-fade{to{opacity:1}}

.mjo-who{display:inline-flex;align-items:center;gap:.5rem;margin-top:.2rem;
  border:1px solid var(--border);background:var(--bg2);border-radius:99px;
  padding:.32rem .8rem .32rem .35rem;font-size:.78rem;color:var(--muted);max-width:100%}
.mjo-who .av{width:24px;height:24px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--vio-deep),var(--vio2));display:grid;
  place-items:center;font-size:.72rem;font-weight:800;color:var(--mjo-btn-ink)}
.mjo-who .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mjo-who b{color:var(--ink);font-weight:700}
.mjo-who .ok{width:13px;height:13px;color:var(--good);flex-shrink:0}

.mjo-facts{display:flex;justify-content:center;margin:1.9rem auto 0;max-width:32rem;
  border:1px solid var(--border);border-radius:16px;background:var(--panel);overflow:hidden}
.mjo-fact{flex:1;padding:.9rem .4rem;text-align:center;border-right:1px solid var(--border)}
.mjo-fact:last-child{border-right:0}
.mjo-fact b{display:block;font-size:1.32rem;font-weight:900;color:var(--vio2);
  letter-spacing:-.03em;line-height:1.3;font-variant-numeric:tabular-nums}
.mjo-fact span{display:block;font-size:.72rem;color:var(--faint)}

/* ---- 2단계 · 하늘 명판 ---- */
.mjo-plate{position:relative;margin:1.5rem auto 0;max-width:32rem;overflow:hidden;
  border:1px solid var(--border);border-radius:16px;border-style:dashed;
  background:linear-gradient(170deg,var(--bg2),var(--panel));padding:1.5rem 1.2rem 1.1rem;
  transition:border-color .3s,box-shadow .3s}
.mjo-plate::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 70% at 50% 20%,var(--vio-bg),transparent 70%);
  transition:opacity .45s ease}
.mjo-plate.is-live{border-style:solid;border-color:var(--vio);
  box-shadow:0 0 0 1px var(--vio-bg),0 12px 34px rgba(0,0,0,.22)}
.mjo-plate.is-live::after{opacity:1}
/* 이름이 처음 유효해지는 순간에만 한 번 번쩍인다. 타자 한 글자마다 켜지지 않는다 */
.mjo-plate .flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 30%,var(--vio2),transparent 70%)}
.mjo-plate.is-engrave .flash{animation:mjo-engrave .68s cubic-bezier(.3,0,.2,1) forwards}
@keyframes mjo-engrave{
  0%{opacity:0;transform:translateX(-60%)}
  35%{opacity:.28}
  100%{opacity:0;transform:translateX(60%)}}
.mjo-plate .kk{position:relative;font-size:.66rem;font-weight:800;letter-spacing:.22em;
  color:var(--faint);text-transform:uppercase}
.mjo-plate .nm{position:relative;font-size:2rem;font-weight:900;letter-spacing:-.03em;
  line-height:1.35;margin:.35rem 0 .1rem;min-height:1.35em;color:var(--faint);
  word-break:break-all;transition:color .3s,text-shadow .3s}
.mjo-plate.is-live .nm{color:var(--strong);text-shadow:0 0 26px var(--vio-bg)}
.mjo-plate.is-engrave .nm{animation:mjo-bump .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes mjo-bump{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
.mjo-strip{position:relative;display:block;width:100%;height:36px;margin:.2rem 0 .35rem;
  overflow:visible}
.mjo-strip .lk{stroke:var(--vio);stroke-width:.8;fill:none;stroke-linecap:round;opacity:.55}
.mjo-strip .lk.off{stroke:var(--mjo-line);stroke-dasharray:2 3;opacity:.7}
.mjo-strip .pt{fill:var(--vio2)}
.mjo-strip .halo{fill:url(#mjo-lit)}
.mjo-strip .ph{fill:var(--faint);opacity:.5}
.mjo-strip .on{transform-box:fill-box;transform-origin:center;
  animation:mjo-pop .42s cubic-bezier(.2,1.4,.4,1) backwards}
.mjo-plate .note{position:relative;font-size:.78rem;color:var(--muted);line-height:1.6;
  min-height:2.4em}
.mjo-plate .note b{color:var(--vio2);font-weight:700}

.mjo-field{max-width:32rem;margin:1.1rem auto 0;text-align:left}
.mjo-field label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);
  margin-bottom:.4rem}
.mjo-box{display:flex;align-items:center;gap:.5rem;background:var(--bg2);
  border:1px solid var(--border2);border-radius:13px;padding:.15rem .9rem;
  transition:border-color .18s,box-shadow .18s}
.mjo-box:focus-within{border-color:var(--vio);box-shadow:0 0 0 3px var(--vio-bg)}
.mjo-box[data-s="bad"]{border-color:var(--bad)}
.mjo-box[data-s="ok"]{border-color:var(--good)}
.mjo-box input{flex:1;min-width:0;background:none;border:0;outline:none;padding:.85rem 0;
  font:inherit;color:inherit;font-size:1.05rem;font-weight:600}
.mjo-box input::placeholder{color:var(--faint);font-weight:400}
.mjo-box .cnt{font-size:.75rem;color:var(--faint);font-variant-numeric:tabular-nums;
  flex-shrink:0}
.mjo-msg{min-height:1.5em;margin-top:.5rem;font-size:.79rem;line-height:1.55;
  color:var(--faint)}
.mjo-msg[data-t="bad"]{color:var(--bad-ink)}
.mjo-msg[data-t="ok"]{color:var(--good-ink)}
.mjo-sugg{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.mjo-sugg button{background:var(--vio-bg);border:1px solid var(--border2);color:var(--vio2);
  border-radius:99px;padding:.28rem .75rem;font:inherit;font-size:.78rem;font-weight:600;
  cursor:pointer;min-height:36px}
.mjo-sugg button:hover{border-color:var(--vio)}

.mjo-forks{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:32rem;
  margin:1.1rem auto 0;text-align:left}
.mjo-fork{border:1px solid var(--border);border-radius:13px;background:var(--panel);
  padding:.75rem .85rem;transition:border-color .2s,background .2s}
.mjo-fork[data-act="1"]{border-color:var(--vio);background:var(--vio-bg)}
.mjo-fork h3{font-size:.83rem;font-weight:800;color:var(--ink);display:flex;
  align-items:center;gap:.4rem}
.mjo-fork h3 svg{width:13px;height:13px;flex-shrink:0;color:var(--vio)}
.mjo-fork p{font-size:.75rem;color:var(--faint);line-height:1.6;margin-top:.25rem}

.mjo-picked{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;max-width:52rem;
  margin:1.4rem auto .7rem;min-height:38px}
.mjo-picked .lb{font-size:.76rem;font-weight:700;color:var(--faint);flex-shrink:0}
.mjo-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  border:1px solid var(--vio);background:var(--vio-bg);color:var(--vio2);border-radius:99px;
  padding:.2rem .5rem .2rem .62rem;min-height:34px;cursor:pointer;font-family:inherit;
  animation:mjo-pop .34s cubic-bezier(.2,1.4,.4,1) both}
.mjo-chip .o{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--t1),var(--t2))}
.mjo-chip .x{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;
  background:var(--panel);flex-shrink:0;font-size:.7rem;line-height:1;color:var(--muted)}
.mjo-chip:hover .x{color:var(--ink)}
.mjo-picked .none{font-size:.78rem;color:var(--faint)}
.mjo-picked .n{margin-left:auto;font-size:.76rem;color:var(--faint);white-space:nowrap;
  border:1px solid var(--border);border-radius:99px;padding:.05rem .65rem;
  font-variant-numeric:tabular-nums}
.mjo-picked .n.is-full{color:var(--vio2);border-color:var(--vio)}

.mjo-nebs{display:grid;gap:.5rem;max-width:52rem;margin:0 auto}
.mjo-neb-card{border:1px solid var(--border);border-radius:14px;background:var(--panel);
  overflow:hidden;transition:border-color .2s}
.mjo-neb-card.is-open{border-color:var(--vio-deep)}
.mjo-neb-card.is-has{border-color:var(--vio)}
.mjo-neb-head{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  background:none;border:0;padding:.7rem .85rem;cursor:pointer;font:inherit;color:inherit;
  min-height:64px}
.mjo-neb-head:hover{background:var(--vio-bg)}
.mjo-glyph{width:46px;height:34px;flex-shrink:0}
.mjo-glyph .l{stroke:var(--mjo-line);stroke-width:.7;fill:none;stroke-linecap:round;
  transition:stroke .3s}
.mjo-neb-card.is-has .mjo-glyph .l{stroke:var(--vio);opacity:.7}
.mjo-glyph .s{fill:var(--faint);transition:fill .3s}
.mjo-neb-card.is-has .mjo-glyph .s{fill:var(--vio2)}
.mjo-neb-card.is-open .mjo-glyph .s{fill:var(--vio2)}
.mjo-neb-t{min-width:0;flex:1}
.mjo-neb-t b{display:block;font-size:.95rem;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.4}
.mjo-neb-card.is-open .mjo-neb-t b,.mjo-neb-card.is-has .mjo-neb-t b{color:var(--vio2)}
.mjo-neb-t span{display:block;font-size:.75rem;color:var(--faint);line-height:1.5;
  word-break:keep-all}
.mjo-neb-n{flex-shrink:0;font-size:.72rem;color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mjo-neb-cnt{flex-shrink:0;min-width:22px;height:22px;border-radius:99px;display:none;
  place-items:center;background:var(--vio);color:var(--mjo-btn-ink);font-size:.72rem;
  font-weight:800;padding:0 .4rem}
.mjo-neb-card.is-has .mjo-neb-cnt{display:grid}
.mjo-chev{width:14px;height:14px;flex-shrink:0;color:var(--faint);
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.mjo-neb-card.is-open .mjo-chev{transform:rotate(180deg);color:var(--vio2)}
/* 여는 높이는 grid-template-rows로 흐른다. max-height를 눈대중으로 잡지 않는다 */
.mjo-neb-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.mjo-neb-card.is-open .mjo-neb-body{grid-template-rows:1fr}
.mjo-neb-body>div{overflow:hidden;min-height:0}
.mjo-neb-in{display:grid;gap:.45rem;padding:.15rem .85rem .85rem;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.mjo-shelf{display:flex;align-items:flex-start;gap:.55rem;text-align:left;font:inherit;
  color:inherit;background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:.6rem .7rem;cursor:pointer;min-height:58px;
  transition:border-color .16s,background .16s,transform .16s}
.mjo-neb-card.is-open .mjo-shelf{animation:mjo-rise .4s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * .035s + .06s)}
.mjo-shelf:hover{border-color:var(--border2);transform:translateY(-1px)}
.mjo-shelf .orb{position:relative;width:17px;height:17px;border-radius:50%;flex-shrink:0;
  margin-top:.22rem;background:linear-gradient(135deg,var(--t1),var(--t2));
  transition:box-shadow .25s}
.mjo-shelf .orb::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--t2);opacity:0;transform:scale(.6);
  transition:opacity .25s,transform .25s}
.mjo-shelf .tx{min-width:0}
.mjo-shelf .nm{display:block;font-size:.85rem;font-weight:700;color:var(--ink);
  line-height:1.4;letter-spacing:-.015em;word-break:keep-all}
.mjo-shelf .tg{display:block;font-size:.7rem;color:var(--faint);line-height:1.45;
  word-break:keep-all}
.mjo-shelf[aria-pressed="true"]{border-color:var(--vio);background:var(--vio-bg)}
.mjo-shelf[aria-pressed="true"] .orb{box-shadow:0 0 16px 1px var(--t2)}
.mjo-shelf[aria-pressed="true"] .orb::after{opacity:.85;transform:scale(1)}
.mjo-shelf[aria-pressed="true"] .nm{color:var(--vio2)}
.mjo-shelf[disabled]{opacity:.4;cursor:not-allowed;transform:none}

.mjo-pickhead{display:flex;align-items:baseline;gap:.6rem;max-width:52rem;
  margin:1.7rem auto .6rem}
.mjo-pickhead h3{font-size:.88rem;font-weight:800;color:var(--ink)}
.mjo-pickhead span{margin-left:auto;font-size:.76rem;color:var(--faint)}
.mjo-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:52rem;
  margin:0 auto}
.mjo-goal{background:var(--panel);border:1px solid var(--border);border-radius:13px;
  padding:.75rem .7rem;cursor:pointer;text-align:center;min-height:82px;font:inherit;
  color:inherit;transition:border-color .16s,background .16s}
.mjo-goal:hover{border-color:var(--border2)}
.mjo-goal .q{display:block;font-size:1.15rem;font-weight:900;color:var(--faint);
  line-height:1.5;font-variant-numeric:tabular-nums;transition:color .2s}
.mjo-goal b{display:block;font-size:.85rem;font-weight:800;color:var(--ink)}
.mjo-goal small{display:block;font-size:.68rem;color:var(--faint);line-height:1.5}
.mjo-goal[aria-pressed="true"]{border-color:var(--vio);background:var(--vio-bg)}
.mjo-goal[aria-pressed="true"] b,.mjo-goal[aria-pressed="true"] .q{color:var(--vio2)}

.mjo-cert{position:relative;max-width:44rem;margin:1.3rem auto 0;overflow:hidden;
  border:1px solid var(--border2);border-radius:20px;
  background:radial-gradient(90% 60% at 50% -10%,var(--vio-bg),transparent 62%),
    linear-gradient(172deg,var(--bg2),var(--panel));
  box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px var(--vio-bg)}
/* 등록증은 위에서 한 번 눌러 찍힌다 */
.mjo-step.is-on .mjo-cert{animation:mjo-seal .8s cubic-bezier(.2,1,.3,1) both}
@keyframes mjo-seal{from{opacity:0;transform:scale(.955) translateY(16px)}to{opacity:1;transform:none}}
/* 찍힌 뒤 빛이 한 번 훑고 지나간다 */
.mjo-step.is-on .mjo-cert::before{content:"";position:absolute;top:-20%;bottom:-20%;
  width:38%;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(100deg,transparent,var(--vio2),transparent);
  animation:mjo-shine 1.15s .55s cubic-bezier(.35,0,.25,1) forwards}
@keyframes mjo-shine{
  0%{opacity:0;transform:translateX(-180%) skewX(-12deg)}
  25%{opacity:.16}
  100%{opacity:0;transform:translateX(360%) skewX(-12deg)}}
.mjo-cert-edge{position:absolute;inset:9px;border:1px solid var(--vio-bg);border-radius:13px;
  pointer-events:none}
.mjo-cert-in{position:relative;z-index:1;padding:1.5rem 1.5rem 1.35rem}
.mjo-cert-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-bottom:.85rem;border-bottom:1px solid var(--border)}
.mjo-cert-top .mk{width:26px;height:26px;border-radius:8px;flex-shrink:0}
.mjo-cert-top .ti{font-size:.72rem;font-weight:800;letter-spacing:.2em;color:var(--vio2);
  text-transform:uppercase}
.mjo-cert-top .no{margin-left:auto;font-size:.7rem;color:var(--faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
.mjo-cert-hero{text-align:center;padding:1.4rem 0 1.15rem}
.mjo-cert-hero .kk{font-size:.7rem;font-weight:800;letter-spacing:.2em;color:var(--faint);
  text-transform:uppercase}
.mjo-cert-hero .nm{font-size:2.1rem;font-weight:900;letter-spacing:-.04em;line-height:1.35;
  margin:.3rem 0 .55rem;color:var(--strong);text-shadow:0 0 30px var(--vio-bg);
  word-break:break-all}
.mjo-cert-hero .nm.is-quiet{color:var(--muted);text-shadow:none;font-size:1.6rem}
/* 이름은 한 글자씩 새겨진다 */
.mjo-cert-hero .nm i{display:inline-block;font-style:normal;white-space:pre;
  animation:mjo-letter .5s cubic-bezier(.2,1.2,.35,1) backwards;
  animation-delay:calc(var(--i,0) * .05s + .35s)}
@keyframes mjo-letter{from{opacity:0;transform:translateY(.32em) scale(.9)}to{opacity:1;transform:none}}
.mjo-lv{position:relative;display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--vio);background:var(--vio-bg);border-radius:99px;
  padding:.28rem .85rem;font-size:.82rem;font-weight:800;color:var(--vio2)}
.mjo-lv svg{width:13px;height:13px}
.mjo-step.is-on .mjo-lv{animation:mjo-pop .6s .8s cubic-bezier(.2,1.4,.4,1) both}
/* 계속 도는 것은 이 빛무리 하나뿐이다. opacity만 바뀌므로 합성으로 끝난다 */
.mjo-lv::before{content:"";position:absolute;inset:-5px;border-radius:99px;
  border:1px solid var(--vio);opacity:0;pointer-events:none}
.mjo-step.is-on .mjo-lv::before{animation:mjo-halo 3.2s 1.4s ease-in-out infinite}
@keyframes mjo-halo{0%,100%{opacity:0;transform:scale(1)}45%{opacity:.5;transform:scale(1.06)}}

.mjo-lad-h{display:flex;align-items:baseline;gap:.5rem;margin:.2rem 0 .9rem}
.mjo-lad-h b{font-size:.76rem;font-weight:800;color:var(--muted)}
.mjo-lad-h span{font-size:.72rem;color:var(--faint)}
.mjo-lad-h .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.mjo-ladder{position:relative;display:grid;
  grid-template-columns:repeat(var(--mjo-rungs,11),1fr);
  padding-top:.2rem;list-style:none;margin:0}
.mjo-ladder::before,.mjo-ladder::after{content:"";position:absolute;
  left:calc(50% / var(--mjo-rungs,11));right:calc(50% / var(--mjo-rungs,11));
  top:11px;height:1px}
.mjo-ladder::before{background:var(--mjo-line);opacity:.6}
.mjo-ladder::after{background:linear-gradient(90deg,var(--vio2),transparent);
  transform-origin:left center;transform:scaleX(0)}
.mjo-step.is-on .mjo-ladder::after{animation:mjo-lad-line 1.1s .5s cubic-bezier(.3,0,.2,1) forwards}
@keyframes mjo-lad-line{to{transform:scaleX(.22)}}
.mjo-rung{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  min-width:0;text-align:center}
.mjo-rung .dot{width:22px;height:22px;display:grid;place-items:center;flex-shrink:0}
.mjo-rung .dot i{display:block;width:5px;height:5px;border-radius:50%;background:var(--faint);
  opacity:.55}
.mjo-rung .rn{font-size:.63rem;font-weight:700;color:var(--faint);line-height:1.35;
  letter-spacing:-.02em;word-break:keep-all}
.mjo-rung .rx{font-size:.58rem;color:var(--faint);font-variant-numeric:tabular-nums;
  line-height:1.2;opacity:.85}
.mjo-rung.is-now .dot i{width:11px;height:11px;background:var(--vio2);opacity:1;
  box-shadow:0 0 0 4px var(--vio-bg)}
.mjo-rung.is-now .rn{color:var(--vio2);font-weight:800}
.mjo-rung.is-now .rx{color:var(--vio2);opacity:1}
.mjo-rung.is-top .dot i{width:8px;height:8px;background:var(--good);opacity:.85}
.mjo-rung.is-top .rn{color:var(--good-ink)}
.mjo-step.is-on .mjo-rung .dot i{transform-origin:center;
  animation:mjo-light .5s cubic-bezier(.2,1.4,.4,1) backwards;
  animation-delay:calc(var(--i,0) * .075s + .55s)}
@keyframes mjo-light{from{transform:scale(.2);opacity:0}to{transform:scale(1)}}

.mjo-rows{margin-top:1.15rem;border-top:1px solid var(--border);padding-top:.95rem;
  display:grid;gap:.7rem}
.mjo-row{display:flex;align-items:flex-start;gap:.75rem}
.mjo-row .k{flex-shrink:0;width:5.4rem;font-size:.75rem;font-weight:700;color:var(--faint);
  padding-top:.15rem}
.mjo-row .v{min-width:0;flex:1;font-size:.85rem;color:var(--ink);line-height:1.65}
.mjo-row .v .none{color:var(--faint)}
.mjo-tags{display:flex;flex-wrap:wrap;gap:.32rem}
.mjo-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;
  border:1px solid var(--border2);border-radius:99px;padding:.12rem .62rem;color:var(--ink);
  background:var(--bg2)}
.mjo-tag .o{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--t1),var(--t2))}
.mjo-first{margin-top:1.05rem;display:flex;align-items:center;gap:.75rem;
  border:1px solid var(--good);background:var(--good-bg);border-radius:13px;padding:.75rem .85rem}
.mjo-first svg{width:26px;height:26px;flex-shrink:0;color:var(--good)}
.mjo-first b{display:block;font-size:.85rem;font-weight:800;color:var(--good-ink)}
.mjo-first span{display:block;font-size:.76rem;color:var(--muted);line-height:1.55}
.mjo-cert-foot{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;font-size:.71rem;
  color:var(--faint)}

/* 제출이 막혔을 때. 고른 것은 그대로 두고 다시 시도할 자리만 연다 */
.mjo-err{max-width:44rem;margin:1rem auto 0;border:1px solid var(--bad);
  background:var(--bad-bg);border-radius:13px;padding:.85rem 1rem;text-align:left;
  animation:mjo-rise .32s cubic-bezier(.22,1,.36,1) both}
.mjo-err b{display:block;font-size:.85rem;font-weight:800;color:var(--bad-ink)}
.mjo-err p{font-size:.79rem;color:var(--muted);line-height:1.6;margin-top:.2rem}

@media(max-width:720px){
  .mjo-stage{padding:.6rem 1rem 1.4rem}
  .mjo-rail{padding:.75rem 1rem 1.15rem}
  .mjo h1{font-size:1.72rem;letter-spacing:-.035em}
  .mjo h2{font-size:1.4rem}
  .mjo-lede{font-size:.92rem}
  .mjo-mark{width:104px;height:104px}
  .mjo-facts{margin-top:1.4rem;border-radius:14px}
  .mjo-fact{padding:.7rem .25rem}
  .mjo-fact b{font-size:1.1rem}
  .mjo-fact span{font-size:.66rem}
  .mjo-plate{padding:1.2rem .95rem .9rem;border-radius:14px}
  .mjo-plate .nm{font-size:1.55rem}
  .mjo-forks{grid-template-columns:1fr;gap:.5rem}
  .mjo-neb-head{gap:.55rem;padding:.6rem .7rem}
  .mjo-neb-n{display:none}
  .mjo-glyph{width:38px;height:28px}
  .mjo-neb-in{grid-template-columns:1fr 1fr;gap:.4rem;padding:.15rem .7rem .7rem}
  .mjo-shelf{padding:.5rem .55rem;min-height:54px}
  .mjo-shelf .nm{font-size:.79rem}
  .mjo-shelf .tg{display:none}
  .mjo-goals{grid-template-columns:1fr;gap:.4rem}
  .mjo-goal{display:flex;align-items:center;gap:.7rem;text-align:left;min-height:60px;
    padding:.6rem .8rem}
  .mjo-goal .q{font-size:1.1rem;flex-shrink:0;width:2.4rem;text-align:center}
  .mjo-goal .gt{min-width:0}
  .mjo-cert{border-radius:17px;margin-top:1rem}
  .mjo-cert-in{padding:1.15rem 1rem 1.1rem}
  .mjo-cert-edge{inset:7px;border-radius:11px}
  .mjo-cert-hero{padding:1.1rem 0 .95rem}
  .mjo-cert-hero .nm{font-size:1.65rem}
  .mjo-cert-hero .nm.is-quiet{font-size:1.3rem}
  .mjo-cert-top .no{width:100%;margin-left:0;order:9}
  /* 사다리를 세로 성좌로 세운다 */
  .mjo-ladder{grid-template-columns:1fr;padding-top:0}
  .mjo-ladder::before,.mjo-ladder::after{left:11px;right:auto;top:11px;bottom:11px;
    height:auto;width:1px}
  .mjo-ladder::after{background:linear-gradient(180deg,var(--vio2),transparent);
    transform-origin:center top;transform:scaleY(0)}
  @keyframes mjo-lad-line{to{transform:scaleY(.16)}}
  .mjo-rung{flex-direction:row;align-items:center;gap:.6rem;text-align:left;min-height:34px}
  .mjo-rung .rn{font-size:.78rem}
  .mjo-rung .rx{margin-left:auto;font-size:.68rem;flex-shrink:0}
  .mjo-row{gap:.6rem}
  .mjo-row .k{width:4.4rem;font-size:.72rem}
  .mjo-dock{padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom))}
  .mjo-dock-in{gap:.5rem}
  .mjo-dock .mjo-back{order:1}
  .mjo-dock .mjo-go{order:2;flex:1;min-width:0}
  .mjo-later{order:3;width:100%;min-height:38px;padding:.2rem 0 0}
  .mjo-btn{padding:.75rem 1.15rem;font-size:.88rem}
}
@media(max-width:359px){
  .mjo-neb-in{grid-template-columns:1fr}
  .mjo-neb-t span{display:none}
}
/* 모션을 꺼도 하늘은 그대로 열려 있어야 한다. 사라지는 것은 움직임뿐이다 */
@media(prefers-reduced-motion:reduce){
  .mjo,.mjo *,.mjo *::before,.mjo *::after{animation:none!important;transition:none!important}
  .mjo-shell{opacity:1;transform:none}
  .mjo-step.is-off{display:none}
  .mjo-rise{opacity:1;transform:none}
  .mjo-mark .gem,.mjo-mark .web{stroke-dashoffset:0}
  .mjo-mark .web{opacity:.45}
  .mjo-mark .vtx,.mjo-mark .halo{opacity:1}
  .mjo-cert-hero .nm i{opacity:1;transform:none}
  .mjo-ladder::after{transform:scaleX(.22)}
  .mjo-sky,.mjo-neb{opacity:1}
  .mjo-step.is-on .mjo-cert::before{display:none}
}

#mj-room{margin-top:1rem}
.rm-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.2rem;align-items:start}
.rm-stage{border-radius:22px;overflow:hidden;border:1px solid var(--border);background:var(--bg2)}
.rm-scene{display:block;width:100%;height:auto}
.rm-info{display:flex;flex-direction:column;gap:.3rem}
.rm-info p{margin:.2rem 0}
.rm-drops{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;color:var(--strong)}
.rm-drop{width:18px;height:22px;background:#7cc8ff;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  transform:rotate(180deg);display:inline-block}
.rm-help{color:var(--muted);font-size:.88rem}
.rm-h{margin:1.6rem 0 .6rem}
.rm-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.rm-tab{background:var(--panel);border:1px solid var(--border2);color:var(--muted);border-radius:99px;
  padding:.28rem .8rem;font-size:.86rem;cursor:pointer;font-family:inherit}
.rm-tab.on{background:var(--vio-bg);color:var(--vio);border-color:var(--vio)}
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.rm-card{display:flex;flex-direction:column;gap:.3rem;padding:.7rem;border:1px solid var(--border);
  border-radius:18px;background:var(--bg2);min-width:0}
.rm-card.is-on{border-color:var(--vio)}
.rm-card b{font-size:.92rem;color:var(--ink)}
.rm-pv{border-radius:12px;overflow:hidden;background:#f6f2ff;aspect-ratio:4/3;max-width:100%}
.rm-pv svg{display:block;width:100%;height:100%}
.rm-price{font-size:.8rem;color:var(--muted)}
.rm-sm{font-size:.82rem;padding:.25rem .6rem}
.rm-on{font-size:.82rem;color:var(--good)}
.rm-short{font-size:.8rem;color:var(--faint)}
@media (prefers-reduced-motion: no-preference){
  .rm-scene .moji{animation:rm-bob 3.2s ease-in-out infinite}
  @keyframes rm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
}
@media (max-width:640px){.rm-top{grid-template-columns:1fr}}

:root[data-theme="clear"]{
  --bg:#f6f7f9;--bg2:#ffffff;--panel:#ffffff;--border:#dde1e8;--border2:#c8cdd8;
  --ink:#1c2230;--muted:#5d6677;--faint:#8a92a1;
  --vio:#2f5bd3;--vio2:#2449ad;--vio-deep:#2f5bd3;--vio-bg:#e8eefc;
  --code-bg:#eef0f4;--icon-cut:#ffffff;--tile-ink:#fff;--strong:#10141d;
  --good:#1f8a4c;--good-bg:#e4f5ea;--good-ink:#166b3a;
  --bad:#c53b3b;--bad-bg:#fbe9e9;--bad-ink:#9d2b2b;
}
@media (prefers-color-scheme:dark){:root[data-theme="clear"]{
  --bg:#12151b;--bg2:#1b1f27;--panel:#1b1f27;--border:#2c323d;--border2:#3b4250;
  --ink:#e6e9ef;--muted:#9aa3b2;--faint:#6f7886;
  --vio:#7d9cf0;--vio2:#a5bcf6;--vio-deep:#7d9cf0;--vio-bg:#222c44;
  --code-bg:#20252f;--icon-cut:#12151b;--strong:#ffffff;
  --good:#5ccb8a;--good-bg:#17301f;--good-ink:#a8e6c1;
  --bad:#f07b7b;--bad-bg:#3a1d1d;--bad-ink:#f7bcbc;
}}
body{background:var(--bg)}
.topbar{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:1.4rem;padding:.6rem 1.2rem;
  background:var(--bg2);border-bottom:1px solid var(--border)}
.topbrand{font-weight:800;font-size:1.05rem;color:var(--strong);text-decoration:none}
.topnav{display:flex;gap:.2rem;flex-wrap:wrap}
.topnav a,.tabbar a{display:flex;align-items:center;gap:.35rem;color:var(--muted);text-decoration:none;
  padding:.35rem .7rem;border-radius:8px;font-size:.95rem}
.topnav a:hover{background:var(--vio-bg);color:var(--vio)}
.topnav a.on,.tabbar a.on{color:var(--vio);font-weight:700}
.tabbar{display:none}
.wrap{min-height:calc(100vh - 53px)}
.sidebar{position:sticky;top:53px;height:calc(100vh - 53px)}
.sidebar:not(:has(.nav-tree)){display:none}
.menu-btn{display:none!important}
.p-btn.tree-btn{display:none}
.content ul.p-list,.content ol.p-list{margin:0;padding:0}
[hidden]{display:none!important}
.sidebar .mj-user{display:none}
#me-user .mj-user{display:block}
.content{max-width:52rem}
body[data-page="q"] .main{max-width:52rem;margin:0 auto}
@media(max-width:860px){
  .topnav{display:none}
  .topbar{padding:.55rem 1rem}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:var(--bg2);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0)}
  .tabbar a{flex-direction:column;gap:.1rem;font-size:.72rem;padding:.45rem .1rem;text-align:center}
  body{padding-bottom:4rem}
  .sidebar{position:fixed;top:0;height:100vh}
  .wrap:has(.nav-tree) .p-btn.tree-btn{display:inline-flex;margin:0 0 .8rem}
}
.p-hero{padding:.6rem 0 1.2rem}
.p-hero h1{font-size:1.9rem;line-height:1.3;margin:0 0 .4rem;text-wrap:balance}
.p-hero p{color:var(--muted);margin:0}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.8rem}
.p-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;
  color:var(--ink);text-decoration:none;min-width:0}
a.p-card:hover{border-color:var(--vio)}
.p-card h3{margin:0 0 .25rem;font-size:1.05rem;color:var(--strong)}
.p-card p{margin:0;color:var(--muted);font-size:.9rem}
.p-sec{margin:1.8rem 0 .7rem;font-size:1.15rem;color:var(--strong)}
.p-btn{display:inline-block;background:var(--vio);color:var(--icon-cut);border:1px solid var(--vio);border-radius:8px;
  padding:.55rem 1.1rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.p-btn:hover{filter:brightness(1.08);color:var(--icon-cut)}
.p-btn.ghost{background:transparent;color:var(--vio)}
.p-btn.sm{padding:.3rem .7rem;font-size:.88rem;font-weight:600}
.p-btn:disabled{opacity:.45;cursor:default}
.p-note{color:var(--muted);font-size:.88rem}
.p-next{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--vio-bg);border-radius:10px;padding:1rem 1.2rem;margin:.8rem 0}
.p-next>div{flex:1;min-width:12rem}
.p-next b{display:block;color:var(--strong);font-size:1.05rem}
.p-dday{display:inline-block;font-weight:800;color:var(--vio);font-variant-numeric:tabular-nums;margin-right:.4rem}
.p-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin:.5rem 0}
.p-bar i{display:block;height:100%;background:var(--vio)}
.p-tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:1rem 0}
.p-tabs a{padding:.5rem .8rem;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.p-tabs a.on{color:var(--vio);border-color:var(--vio);font-weight:700}
.p-list{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--border);border-radius:10px}
.p-list li{display:flex;gap:.7rem;align-items:center;padding:.6rem .9rem;border-bottom:1px solid var(--border)}
.p-list li:last-child{border-bottom:0}
.p-list li>span:first-child{flex:1;min-width:0}
.p-list .ok{color:var(--good);font-weight:700}
.p-list .cur{background:var(--vio-bg)}
.p-field{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.p-field input[type=date],.p-field select,.p-report textarea{font:inherit;color:var(--ink);background:var(--bg2);
  border:1px solid var(--border2);border-radius:8px;padding:.4rem .6rem}
.p-check{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.p-check label{display:flex;gap:.35rem;align-items:center}
.s-bar{position:sticky;top:53px;z-index:20;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;background:var(--bg);
  padding:.6rem 0;border-bottom:1px solid var(--border);margin-bottom:.9rem}
.s-bar .s-title{flex:1;min-width:8rem;font-weight:700;color:var(--strong)}
.s-time{font-variant-numeric:tabular-nums;font-weight:700}
.s-time.hot{color:var(--bad)}
.s-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.3rem,1fr));gap:.3rem;margin:0 0 1rem}
.s-board button{font:inherit;font-size:.85rem;padding:.3rem 0;border:1px solid var(--border2);border-radius:6px;background:var(--panel);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.s-board button.done{background:var(--vio-bg);border-color:var(--vio);color:var(--vio)}
.s-board button.cur{outline:2px solid var(--vio)}
.s-q{font-size:1.08rem;line-height:1.65;margin:0 0 .8rem;color:var(--strong);white-space:pre-wrap}
.s-opt{display:flex;gap:.5rem;align-items:stretch;margin:.4rem 0}
.s-opt button.c{flex:1;min-width:0;text-align:left;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--border2);border-radius:8px;padding:.6rem .8rem;cursor:pointer}
.s-opt button.c:hover{border-color:var(--vio)}
.s-opt.pick button.c{border-color:var(--vio);background:var(--vio-bg)}
.s-opt.right button.c{border-color:var(--good);background:var(--good-bg);color:var(--good-ink)}
.s-opt.wrong button.c{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)}
.s-opt.erased button.c{text-decoration:line-through;opacity:.5}
.s-opt button.x{width:2.2rem;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--faint);cursor:pointer;font:inherit}
.s-rate{display:block;height:4px;background:var(--border);border-radius:2px;margin-top:.35rem;overflow:hidden}
.s-rate i{display:block;height:100%;background:var(--vio)}
.s-exp{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem;margin:.9rem 0}
.s-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0}
.s-tools button.on{background:var(--vio-bg);color:var(--vio)}
.s-nav{display:flex;justify-content:space-between;gap:.5rem;margin-top:1rem}
.p-report textarea{width:100%;min-height:5rem;box-sizing:border-box}
.p-flash{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.4rem;min-height:9rem;cursor:pointer}
.p-score{font-size:2.2rem;font-weight:800;color:var(--strong);font-variant-numeric:tabular-nums}
.p-shelf{display:flex;gap:.8rem;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1rem;min-height:5rem}
.p-trophy{text-align:center;width:6.5rem;font-size:.85rem}
.p-trophy svg{width:2.6rem;height:2.6rem;display:block;margin:0 auto .3rem}
.p-moji{display:flex;gap:.8rem;align-items:center}
.p-moji svg{width:6.5rem;height:6.5rem;flex:none}
.p-moji-sm svg{width:4.5rem;height:4.5rem}
.mjm-eyes{transform-box:fill-box;transform-origin:center;animation:mjm-blink 5s infinite}
@keyframes mjm-blink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.mjm-eyes{animation:none}}
.q-page-opts{padding-left:1.4rem}
.q-page-h{font-size:1.25rem;line-height:1.6;white-space:pre-wrap}
.q-page-a{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem;margin:1rem 0}
.q-page-a summary{cursor:pointer;font-weight:700;color:var(--vio)}