/* 아그만 개념 지도(#/stars) — 지하철 노선도 모양 (2026-11-12 홈피 제안)
   읽는 법: 학년 띠(색) > 단원 = 노선 하나(세로 선) > 개념 = 역.
   역 모양 = 상태(색만으로 구분하지 않음): 확인 통과 ●✓ / 추정 통과 반쯤 찬 원 / 배우는 중 ◎ / 아직 몰라요 ◆! / 아직 안 봤어요 ○
   복습 표시는 역 오른쪽 글자 배지(틀림·2주·느림). 선은 통과한 구간만 진하게.
   app.css·adult.css 뒤에 불러옴. 선택자는 .cm-* .cn* .rv* 안에서만. */

/* ── 역 점(복습 칸·지도 공통) ── */
.cn i{width:16px;height:16px;border-radius:50%;flex:none;position:relative;box-sizing:border-box;
  background:var(--paper);border:3px solid var(--ink-3);display:grid;place-items:center}
.cn.st-pass i{background:var(--ok);border-color:var(--ok)}
.cn.st-pass i::after{content:"";width:4px;height:7px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.cn.st-guess i{background:linear-gradient(90deg,var(--ok) 50%,var(--paper) 50%);border:3px solid var(--ok)}
.cn.st-learning i{background:var(--paper);border-color:var(--fill)}
.cn.st-learning i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--fill)}
.cn.st-fail i{border-radius:3px;transform:rotate(45deg);background:var(--no);border-color:var(--no);width:15px;height:15px}
.cn.st-fail i::after{content:"!";transform:rotate(-45deg);color:var(--paper);font:900 11px/1 var(--ui)}
.cn.st-start i{background:var(--ink);border-color:var(--ink)}
.cn.st-unknown i{background:var(--paper);border-color:color-mix(in srgb,var(--ink-3) 70%,transparent)}

/* ── 복습할 개념(위 칸): 칩 그대로, 덜 빽빽하게 ── */
.rv .rv-grp{gap:8px}
.rv .rv-grp h3{font-size:.95rem;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.rv .cn-row{gap:8px}
.rv .cn{min-height:44px;padding:8px 14px;border-radius:999px;background:var(--paper);font-weight:600}
.rv .cn.rv-wrong{border-color:var(--no)}

/* 범례도 역 모양에 맞춤(지도 화면 위 범례: 통과·추정·배우는 중·몰라요·안 봤어요 순) */
.stack:has(> section.rv) > .row .legend{gap:6px 16px}
.stack:has(> section.rv) > .row .legend i{width:14px!important;height:14px!important;border-radius:50%!important;border-width:3px!important;vertical-align:-2px}
.stack:has(> section.rv) > .row .legend span:nth-child(1) i{background:var(--ok)}
.stack:has(> section.rv) > .row .legend span:nth-child(2) i{background:linear-gradient(90deg,var(--ok) 50%,transparent 50%);border-style:solid!important}
.stack:has(> section.rv) > .row .legend span:nth-child(3) i{background:radial-gradient(circle,var(--fill) 0 2.5px,transparent 3px)}
.stack:has(> section.rv) > .row .legend span:nth-child(4) i{border-radius:2px!important;transform:rotate(45deg);background:var(--no);width:12px!important;height:12px!important}
.stack:has(> section.rv) > .row .legend span:nth-child(5) i{border-color:var(--ink-3)!important}

/* ── 도구·학년 바로가기 ── */
.cm-tools .seg button{min-height:44px;min-width:44px}
.cm-jump{gap:8px}
.cm-jump button{min-height:44px;padding:8px 18px;font-size:.95rem}

/* ── 학년 띠: 굵은 머리 + 접으면 머리만 ── */
.cm-map{gap:20px}
.cm-band{display:block;border-width:0;border-left:6px solid var(--bc);border-radius:14px;
  background:color-mix(in srgb,var(--bc) 7%,var(--paper));box-shadow:0 0 0 1px color-mix(in srgb,var(--bc) 35%,transparent)}
.cm-band{--lc:var(--bc)}
.cm-bh{min-height:64px;padding:12px 18px;border-radius:0}
.cm-band:not([open]) .cm-bh{border-radius:0 8px 8px 0}
.cm-bt b{font-size:1.35rem;letter-spacing:-.02em}
.cm-bsub{font-size:.78rem;opacity:.9}
.cm-bprog{height:10px;border-radius:5px}
.cm-chev{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);font-size:.8rem}
.cm-topics{display:block;background:transparent;padding:16px;columns:2 300px;column-gap:14px}
.cm-topics > .cm-topic{break-inside:avoid;margin:0 0 14px;display:block}

/* ── 단원 = 노선 카드 ── */
.cm-band .cm-topic{padding:14px 14px 10px;border-radius:14px;background:var(--paper);
  border:1px solid color-mix(in srgb,var(--lc) 22%,var(--line))}
.cm-topic h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.95em;line-height:1.3}
.cm-band .cm-topic h3{color:var(--ink)}
.cm-topic h3::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:5px solid var(--lc);box-sizing:border-box}
.cm-topic h3 .small{margin-left:auto;font-weight:700;font-size:.78em;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--lc) 14%,transparent);color:var(--ink-2)}

/* 노선: 세로 선 + 역 */
.cm-topic .cn-row{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin-left:0}
.cm-topic .cn-arr{display:none}
.cm-topic .cn{--seg:color-mix(in srgb,var(--lc) 38%,var(--paper));
  position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:max(44px,2.9em);width:100%;max-width:none;margin:0;padding:4px 8px 4px 0;
  border:0;border-radius:10px;background:transparent;font-size:.92em;line-height:1.3;color:var(--ink);text-align:left}
.cm-topic .cn.st-pass,.cm-topic .cn.st-guess{--seg:var(--lc);background:transparent}
.cm-topic .cn::before{content:"";position:absolute;left:8.5px;width:5px;top:-1px;bottom:-1px;background:var(--seg)}
.cm-topic .cn-row > .cn:first-child::before{top:50%}
.cm-topic .cn-row > .cn:last-child::before{bottom:50%}
.cm-topic .cn-row > .cn:only-child::before{display:none}
.cm-topic .cn i{position:relative;z-index:1;justify-self:center;width:18px;height:18px;box-shadow:0 0 0 3px var(--paper)}
.cm-topic .cn.st-fail i{width:16px;height:16px}
.cm-topic .cn > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cm-topic .cn.st-unknown > span{color:var(--ink-2)}
.cm-topic .cn.st-fail > span{font-weight:700}
.cm-topic .cn:hover{background:color-mix(in srgb,var(--lc) 10%,transparent)}
.cm-topic .cn[aria-pressed="true"]{outline:0;background:color-mix(in srgb,var(--lc) 18%,transparent);box-shadow:inset 0 0 0 2px var(--lc)}
.cm-topic .cn[aria-pressed="true"] > span{font-weight:800}
.cm-topic .cn:focus-visible{outline:3px solid var(--plum);outline-offset:0}

/* 복습 배지(글자로) */
.cm-topic .cn:is(.rv-wrong,.rv-due,.rv-slow)::after{font-size:.72rem;font-weight:800;line-height:1;padding:4px 7px;border-radius:999px;white-space:nowrap}
.cm-topic .cn.rv-wrong::after{content:"틀림";background:var(--no);color:var(--paper)}
.cm-topic .cn.rv-due::after{content:"2주";background:var(--fill);color:#2A1A00}
.cm-topic .cn.rv-slow::after{content:"느림";border:1.5px dashed var(--fill);color:var(--ink)}
.cm-topic .cn:is(.rv-wrong,.rv-due,.rv-slow){border:0}

/* 어두운 화면: 띠 색을 밝혀 선이 보이게 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cm-band{--lc:color-mix(in srgb,var(--bc) 62%,#fff)}
}
:root:is([data-theme="dark"],[data-room="gallery"],[data-room="yard"],[data-room="observatory"]) .cm-band{--lc:color-mix(in srgb,var(--bc) 62%,#fff)}
:root:is([data-theme="dark"],[data-room="gallery"],[data-room="yard"],[data-room="observatory"]) .cm-topics{background:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cm-topics{background:transparent}}

/* 폰 */
@media (max-width:599px){
  .cm-topics{padding:12px 10px;columns:1}
  .cm-topics > .cm-topic{margin-bottom:12px}
  .cm-band .cm-topic{padding:12px 10px 8px}
  .cm-bh{padding:10px 14px}
  .cm-band{border-left-width:5px}
}
@media (prefers-reduced-motion:reduce){.cm-chev{transition:none}}