/* 트랙 서브페이지 대시보드 — design_handoff_track_gisa (메인 v3 연동) */
:root{
  --indigo:#4d5bf0;
  --indigo-deep:#3b48d8;
  --indigo-soft:#eef0fe;
  --indigo-line:#dfe2fb;
  --bg:#f6f7fc;
  --card:#fff;
  --text:#1B1F2E;
  --sub:#5b6070;
  --muted:#8990a3;
  --faint:#9196a3;
  --dim:#a4a9b8;
  --border:#e6e8ef;
  --border-soft:#e2e4ee;
  --ok:#118049;
  --ok-soft:#e7f5ee;
  --violet:#7c3aed;
  --violet-soft:#f3ebfe;
  --g9:#4d5bf0;
  --g7:#118049;
  --hae:#0369a1;
  --energy:#c85a1c;
  --energy-soft:#fdefe4;
  /* 1120 → 1200: 랜딩과 같은 본문 폭. 상단 바(site-shell.css `--site-nav-max`)도 1200 이라
     로고·메뉴·본문 왼쪽 선이 한 줄에 선다 (2026-08-21 · 「조화롭지 않다」) */
  --page-max:1200px;
  --nav-max:1440px;   /* site-shell.css 가 상단 바를 --site-nav-max 로 덮는다 */
  --radius:16px;
  --radius-sm:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);color:var(--text);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--indigo-deep)}
button,input{font-family:inherit}

/* —— Nav —— */
.td-nav{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid #eceef2;
}
.td-nav-inner{
  max-width:var(--nav-max);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
@media(min-width:900px){.td-nav-inner{padding:14px 48px}}
.td-brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;min-width:0;flex-shrink:0;
}
.td-brand:hover{text-decoration:none;color:inherit}
.td-brand img{width:26px;height:26px;object-fit:contain;display:block}
.td-brand .nm{font-size:16px;font-weight:800;color:#1B6FB4;letter-spacing:.3px;white-space:nowrap}
.td-brand .badge{
  font-size:12.5px;font-weight:700;color:#1B6FB4;background:#eaf3fb;
  padding:3px 10px;border-radius:8px;white-space:nowrap;
}
/* 데스크톱: 부가 링크 / 모바일: 숨김 → 우측 Google 로그인만 (site-nav-auth) */
.td-nav-links{display:none;align-items:center;gap:14px;flex-shrink:0}
@media(min-width:721px){
  .td-nav-links{display:flex;gap:18px}
}
.td-nav-links a{
  font-size:13.5px;font-weight:700;color:#6b7180;text-decoration:none;white-space:nowrap;
}
.td-nav-links a:hover{color:var(--text)}
.td-nav-links a.on{color:var(--text);font-weight:800;border-bottom:2px solid var(--indigo);padding-bottom:2px}
.td-nav-links .shop{
  font-size:13px;font-weight:800;padding:8px 14px;border-radius:999px;
  background:var(--indigo);color:#fff !important;border:0;
  display:inline-flex;
}
.td-nav-links .shop:hover{filter:brightness(1.04);color:#fff !important}
/* 우측 계정 슬롯 */
.td-nav-inner > [data-site-nav-auth]{margin-left:auto;flex-shrink:0}
@media(max-width:720px){
  .td-brand .nm{display:none !important}
  .td-nav-crumb{display:none !important}
  .td-brand .badge{font-size:13px;padding:5px 10px}
  .td-brand img{width:30px;height:30px}
}

/* —— Breadcrumb (depth path) —— */
.td-crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 4px;
  margin:0 0 10px;padding:0;
  font-size:12.5px;font-weight:600;line-height:1.35;
  color:var(--muted);list-style:none;
}
.td-crumb li{
  display:inline-flex;align-items:center;gap:6px;min-width:0;
}
.td-crumb li:not(:last-child)::after{
  content:"›";margin-left:2px;color:#c0c4d0;font-weight:700;font-size:13px;
}
.td-crumb a{
  color:var(--muted);text-decoration:none;font-weight:600;
  max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-crumb a:hover{color:var(--indigo);text-decoration:none}
.td-crumb .cur{
  color:var(--text);font-weight:800;
  max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 네비 안(좌상단 브랜드 옆) 축약 경로 — 넓은 화면 */
.td-nav-crumb{
  display:none;align-items:center;gap:6px;min-width:0;flex:1;
  margin-left:4px;padding-left:12px;border-left:1px solid #eceef2;
  font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.3;
}
@media(min-width:720px){.td-nav-crumb{display:inline-flex}}
.td-nav-crumb a{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
.td-nav-crumb a:hover{color:var(--indigo);text-decoration:none}
.td-nav-crumb .sep{color:#c0c4d0;font-weight:700;flex-shrink:0}
.td-nav-crumb .cur{color:var(--text);font-weight:800;white-space:nowrap;
  max-width:14em;overflow:hidden;text-overflow:ellipsis}

/* —— Page header —— */
/* 좌우 여백은 .td-body(16/24) 와 같아야 로고·제목·본문 왼쪽 선이 한 줄에 선다.
   48px 이던 시절엔 제목만 24px 안쪽으로 밀려 있었다 (2026-08-21 실측). */
.td-page-hd{
  background:#fff;border-bottom:1px solid #eceef2;
  padding:18px 0 22px;
}
@media(min-width:900px){.td-page-hd{padding:22px 0 26px}}
/* 좌우 여백은 **안쪽**에 준다 — .td-body 처럼 max-width 와 padding 이 같은 요소에 있어야
   콘텐츠 왼쪽 선이 사이드바·로고와 같은 x 에 선다. 바깥에 주던 시절엔 24px 어긋났다. */
.td-page-hd-inner{
  max-width:var(--page-max);margin:0 auto;padding:0 16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
@media(min-width:900px){.td-page-hd-inner{padding:0 24px}}
.td-page-hd-main{min-width:0;flex:1}
.td-page-hd h1{
  margin:0;font-size:clamp(1.25rem,3vw,1.5rem);font-weight:900;
  letter-spacing:-.5px;line-height:1.25;color:var(--text);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
}
.td-pill{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.td-pill.cat-cert{color:var(--violet);background:var(--violet-soft)}
.td-pill.cat-g9{color:var(--g9);background:var(--indigo-soft)}
.td-pill.cat-g7{color:var(--g7);background:var(--ok-soft)}
.td-pill.cat-hae{color:var(--hae);background:#e6f2fb}
.td-pill.cat-energy{color:var(--energy);background:var(--energy-soft)}
.td-pill.free{color:var(--ok);background:var(--ok-soft)}
.td-page-hd .lead{
  margin:8px 0 0;font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.5;max-width:40em;
}
.td-btn-dark{
  flex-shrink:0;border:0;background:#1B1F2E;color:#fff;font-weight:800;font-size:13.5px;
  padding:13px 22px;border-radius:12px;cursor:pointer;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.td-btn-dark:hover{filter:brightness(1.08);color:#fff;text-decoration:none}

/* —— Body pad —— */
.td-body{max-width:var(--page-max);margin:0 auto;padding:20px 16px 48px}
@media(min-width:900px){.td-body{padding:24px 24px 56px}}

/* —— Quick menu —— */
.td-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
@media(min-width:720px){.td-quick{grid-template-columns:repeat(8,1fr);gap:10px}}

/* —— 퀵메뉴 아이콘 (A′ · 2026-08-23 전하 확정) ——
   전용 글리프 9종. 모양은 여기 마스크 한 벌뿐이고 색은 background-color 가 준다.
   ⛔ 이모지로 되돌리지 말 것 — 기기마다 다르게 그려지고(획 굵기·원근·채도) 한 세트로 안 묶인다.
      북마크만 인라인 SVG 로 떠 있던 것도 이 한 벌 안으로 들어왔다.
   ⛔ 파스텔 8색(.ico.c1~.c8)을 되살리지 말 것 — 위계 없이 흩어져 시선이 갈 곳을 못 찾는다.
   글리프 규칙: 뼈대 2.1px / 세부 1.5px · 채움은 셋뿐(주사위 눈·과녁 중심·성적 내 막대) */
.td-quick .ico{
  background-color:var(--indigo);
  -webkit-mask-image:var(--td-gi);mask-image:var(--td-gi);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
.td-quick .ico[data-ico="solve"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.1 9.2v9.7a2.2 2.2 0 0 1-2.2 2.2H7.1a2.2 2.2 0 0 1-2.2-2.2V5.1A2.2 2.2 0 0 1 7.1 2.9h9.8a2.2 2.2 0 0 1 2.2 2.2' stroke-width='2.1'/%3E%3Cpath d='M8.6 18.2h5.2' stroke-width='1.5'/%3E%3Cpath d='M9.2 12.9l2.6 2.6 8.8-10' stroke-width='2.1'/%3E%3C/svg%3E")}  /* 과목별 풀이 */
.td-quick .ico[data-ico="mock"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='16.8' height='16.8' rx='4' stroke-width='2.1'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.1' stroke-width='1.5'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.1' stroke-width='1.5'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.1' stroke-width='1.5'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.1' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.55' fill='%23000' stroke='none'/%3E%3C/svg%3E")}  /* 랜덤 모의고사 */
.td-quick .ico[data-ico="search"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.4' cy='10.4' r='6.9' stroke-width='2.1'/%3E%3Cpath d='M15.6 15.6l4.4 4.4' stroke-width='2.6'/%3E%3C/svg%3E")}  /* 문제 검색 */
.td-quick .ico[data-ico="custom"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='4.3' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.75' fill='%23000' stroke='none'/%3E%3C/svg%3E")}  /* 맞춤 학습 */
.td-quick .ico[data-ico="mine"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.8' width='17.6' height='4.6' rx='1.5' stroke-width='2.1'/%3E%3Cpath d='M5.1 8.6v10.3A2.1 2.1 0 0 0 7.2 21h9.6a2.1 2.1 0 0 0 2.1-2.1V8.6' stroke-width='2.1'/%3E%3Cpath d='M10.1 12.7h3.8' stroke-width='1.5'/%3E%3C/svg%3E")}  /* 내 학습 기록 */
.td-quick .ico[data-ico="wrong"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.9' y='2.9' width='14.2' height='18.2' rx='2.4' stroke-width='2.1'/%3E%3Cpath d='M9.4 8.9l5.2 5.2M14.6 8.9l-5.2 5.2' stroke-width='2.1'/%3E%3Cpath d='M8.6 18.1h5.2' stroke-width='1.5'/%3E%3C/svg%3E")}  /* 오답노트 */
.td-quick .ico[data-ico="bookmark"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 5.4A2.4 2.4 0 0 1 9.1 3h5.8a2.4 2.4 0 0 1 2.4 2.4V21l-5.3-3.9L6.7 21z' stroke-width='2.1'/%3E%3C/svg%3E")}  /* 북마크 */
.td-quick .ico[data-ico="scores"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='13.4' width='4.2' height='6.8' rx='1.3' stroke-width='1.5'/%3E%3Crect x='9.9' y='7.4' width='4.2' height='12.8' rx='1.3' fill='%23000' stroke='none'/%3E%3Crect x='15.3' y='10.4' width='4.2' height='9.8' rx='1.3' stroke-width='1.5'/%3E%3C/svg%3E")}  /* 시험 성적 */
/* ⛔ 북마크만 코랄이다 — 아홉 중 유일한 예외 (2026-08-01 전하 지시 「모양(리본)만이 아니라
   색까지 문제 화면과 같아야 한다」). #e2554a 는 .chkbtn.on .bm-fill · .omr-flag.on ·
   문제 검색 카드 · 관리자 패널이 모두 쓰는 「북마크 켜짐」 의미색이다.
   ⛔ 인디고로 통일하지 말 것 — 풀이 화면에서 누르던 그 빨간 리본과 끊긴다.
   ⛔ ★ 로도 되돌리지 말 것 (S2-P52). */
.td-quick .ico[data-ico="bookmark"]{background-color:#e2554a}
.td-quick .ico[data-ico="notes"]{--td-gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.4' y='2.9' width='13.2' height='18.2' rx='2.4' stroke-width='2.1'/%3E%3Cpath d='M9.1 2.9v18.2' stroke-width='2.1'/%3E%3Cpath d='M11.9 9.4h3.9M11.9 13h3.9' stroke-width='1.5'/%3E%3C/svg%3E")}  /* 메모·연습장 */

/* 비로그인 — ⛔ 숨기지 않는다 (2026-08-01 운영자 지시).
   있는 기능을 감추면 없는 줄 안다. 자물쇠로 표시하고, 누르면 로그인으로 안내한다.
   ⛔ `.td-qitem.td-need-login{display:none}` 로 되돌리지 말 것 — 격자 열 수도 같이 흔들린다. */
.td-qitem.td-need-login{position:relative}
.td-qitem.td-need-login .ico{filter:grayscale(.55);opacity:.7}
.td-qitem.td-need-login .lab{color:var(--muted,#8b92a6)}
.td-qitem.td-need-login::after{
  content:"🔒";position:absolute;top:6px;right:8px;font-size:10px;line-height:1;opacity:.55;
}
/* 로그인 안내 줄 — 잠긴 칸을 눌렀을 때만 나타난다 */
.td-quick-note{
  display:none;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--indigo-soft,#eef0fe);border:1px solid var(--border,#e7e9f0);
  border-radius:var(--radius-sm,12px);padding:11px 14px;margin:8px 0 0;
  font-size:13px;font-weight:700;color:var(--text,#1B1F2E);
}
.td-quick-note.show{display:flex}
.td-quick-note b{font-weight:900}
.td-quick-note .td-btn{margin-left:auto}
.td-qitem{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:18px 10px 16px;text-align:center;cursor:pointer;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s,transform .12s,background .12s;
  display:block;
}
.td-qitem:hover{
  text-decoration:none;color:inherit;border-color:var(--indigo-line);
  box-shadow:0 8px 20px -12px rgba(77,91,240,.35);transform:translateY(-1px);
}
.td-qitem .ico{width:32px;height:32px;margin:0 auto;display:block}
.td-qitem .lab{
  font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--text);
  margin-top:12px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 좁은 화면(4열·칸 폭 76px) — 12px 로 낮추고 두 줄까지 편다.
   ⛔ word-break:keep-all 을 빼지 말 것 — 기본값이면 「랜덤 모의고/사」로 어절 중간이 잘린다.
   ⛔ white-space:nowrap 으로 되돌리지 말 것 — 12px 한 줄이면 「랜덤 모의고사」가 말줄임된다. */
@media(max-width:719px){
  .td-qitem:not(.td-qmine) .lab{
    font-size:12px;white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;
  }
}

/* —— 판 하나 (A′ · 2026-08-23 전하 확정) ——
   흰 상자 넷을 한 판으로 묶고 안쪽은 헤어라인으로만 나눈다.
   ⛔ 다시 카드 넷으로 쪼개지 말 것 — 「작고 올드하다」의 절반이 상자가 너무 많다는 것이었다.
   ⛔ .td-qplate 를 격자 밖으로 빼지 말 것 — .td-quick 의 열 수(4 / 8)를 그대로 타야 한다. */
.td-qplate{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
@media(min-width:720px){.td-qplate{grid-column:span 4}}
.td-qplate .td-qitem{border:0;border-left:1px solid #eef0f5;border-radius:0}
.td-qplate .td-qitem:first-child{border-left:0}
/* 판 안에서는 카드가 뜨지 않는다 — 들썩이면 판이 깨져 보인다 */
.td-qplate .td-qitem:hover{
  background:#f7f8ff;box-shadow:none;transform:none;border-left-color:#eef0f5;
}

/* —— 「내 학습 기록」 배너 + 아코디언 (S2-P213) ——
   개인 기록 넷(시험 성적·오답노트·북마크·메모·연습장)을 한 칸으로 묶었다.
   ⛔ 위 163·166 줄의 `grid-template-columns` 를 고쳐 5칸 균등으로 만들지 말 것 —
      360px 에서 셀이 59px 로 줄어 「과목별 풀이」까지 잘린다(라벨 박스 47px).
      전폭 배너는 작은 칸 폭을 76px 그대로 두고, 데스크톱 8열에서 4+4 로 나뉜다.
   ⛔ 배너 높이를 .td-qitem(≈87px) 과 맞추지 말 것 — 로그인 시 위아래로
      #tdReviewHero · #tdPlanBand 가 붙어 가로 띠가 셋 연속이 된다. 「행」으로 읽혀야 한다. */
.td-qitem.td-qmine{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;
  padding:12px 14px;text-align:left;
}
@media(min-width:720px){.td-qitem.td-qmine{grid-column:span 4}}
.td-qmine .ico{width:32px;height:32px;margin:0;flex-shrink:0;display:block}
.td-qmine .qmine-txt{min-width:0;flex:1}
.td-qmine .lab{display:block;margin-top:0;font-size:14px;font-weight:800;letter-spacing:-.02em}
.td-qmine .sub{
  display:block;font-size:12px;font-weight:700;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;
}
.td-qmine .qmine-n{
  font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;white-space:nowrap;
}
.td-qmine .qmine-caret{
  color:var(--muted);font-weight:900;flex-shrink:0;
  transition:transform .12s;
}
/* 펼침 표시는 테두리·화살표로만 — 배경까지 물들이면 같은 인디고인 글리프가 묻힌다 */
.td-qitem.td-qmine[aria-expanded="true"]{border-color:var(--indigo-line)}
.td-qmine[aria-expanded="true"] .qmine-caret{transform:rotate(90deg)}

.td-mine-panel{grid-column:1/-1;display:grid;gap:8px;margin-top:2px}
@media(min-width:640px){.td-mine-panel{grid-template-columns:repeat(2,1fr)}}
.td-mine-panel[hidden]{display:none}
.td-mine-row{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  background:#fff;border:1px solid var(--border);border-radius:11px;
  text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s;
}
.td-mine-row:hover{
  text-decoration:none;color:inherit;border-color:var(--indigo-line);
  box-shadow:0 8px 20px -12px rgba(77,91,240,.35);
}
.td-mine-row .ico{width:24px;height:24px;flex-shrink:0;display:block}
.td-mine-row .lab{
  flex:1;min-width:0;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.td-mine-row .chev{color:var(--muted);font-weight:900;flex-shrink:0}

/* —— Sections —— */
.td-sec{margin-top:32px}
/* 제목과 곁버튼은 **붙여 둔다** (2026-08-23 전하: 「진행 중인 회차 바로 옆에 전체 회차
   확인하기 가까이 붙이는 게 낫지 않나」). space-between 이면 1280px 에서 둘이 화면 양 끝으로
   갈라져 버튼이 무엇에 딸린 것인지 읽히지 않았다. 왼쪽에 모아 gap 하나로 잇는다. */
.td-sec-hd{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.td-sec-hd h2{
  margin:0;font-size:18px;font-weight:900;letter-spacing:-.3px;color:var(--text);
}
.td-link-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--indigo-soft);border:1px solid var(--indigo-line);color:var(--indigo-deep);
  font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:10px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
}
.td-link-pill:hover{text-decoration:none;color:var(--indigo-deep);filter:brightness(.98)}

/* —— Progress cards —— */
.td-prog-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
}
/* ⛔ 열 수를 고정하지 않는다 (2026-08-21 피드백 4차 · 전하 재확인 2026-08-22).
   3열을 고집하면 1280px 에서 한 칸이 좁아져 「화학공학일반(국가)」 같은 과목명이 잘렸다.
   최소 330px 를 주고 들어가는 만큼만 넣는다 — 좁은 화면은 자동으로 2열·1열이 된다. */
@media(min-width:640px){.td-prog-grid{gap:14px}}
@media(min-width:640px){.td-prog-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}}
.td-prog-grid > *{min-width:0}
.td-prog{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  position:relative;overflow:hidden;
}
/* 상태 액센트 — 수십 장 중 손댄 회차를 색으로 먼저 찾는다 */
.td-prog::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.td-prog.is-doing::before{background:var(--indigo)}
.td-prog.is-done::before{background:var(--ok)}
.td-prog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.td-prog .t{font-size:15px;font-weight:800;color:var(--text);line-height:1.3}
.td-prog .s{font-size:11.5px;color:var(--faint);margin-top:3px;font-weight:600}
.td-ring{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.td-ring > i{
  width:34px;height:34px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:var(--indigo);font-style:normal;
}
.td-ring.zero > i{color:var(--faint)}
.td-prog-acts{display:flex;gap:8px;margin-top:14px}
.td-prog-acts a,.td-prog-acts button{
  flex:1;text-align:center;border-radius:10px;padding:10px 6px;
  font-size:12.5px;font-weight:800;cursor:pointer;text-decoration:none;border:1px solid transparent;
  white-space:nowrap;
}
.td-prog-acts .study{
  border-color:var(--indigo-line);background:var(--indigo-soft);color:var(--indigo-deep);
}
.td-prog-acts .study:hover{text-decoration:none;color:var(--indigo-deep);filter:brightness(.98)}
.td-prog-acts .test{
  border-color:var(--border);background:#fff;color:var(--sub);font-weight:700;
}
.td-prog-acts .test:hover{text-decoration:none;color:var(--text);border-color:#d0d4e0}

/* Guest / empty card */
.td-empty-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 20px;text-align:center;
}
.td-empty-card b{display:block;font-size:15px;font-weight:800;color:var(--text)}
.td-empty-card p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}
.td-empty-card .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}

/* —— Year chips + picker —— */
.td-year-chips{
  display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;
}
.td-year-chips button{
  border:1px solid var(--border-soft);background:#fff;color:#6b7180;
  padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;line-height:1.2;
}
.td-year-chips button.on{
  border-color:#1B1F2E;background:#1B1F2E;color:#fff;font-weight:700;
}
.td-year-chips button:not(.on):hover{background:#f4f5fb;color:var(--text)}
/* 개편 경계 — 연도를 낱개로 펴면서(2026-08-22) 「여기부터 구 과목」을 한 번만 알린다.
   ⛔ 예전엔 구 과목 연도를 「~2021 (구 과목)」 한 칩으로 접었는데, 그 칩이 개편 직전 해만
      열어서 그 이전 연도가 통째로 도달 불가였다(공조냉동 2016~2020 다섯 해). */
.td-year-chips .td-year-sep{
  flex:0 0 100%;margin:6px 0 2px;
  font-size:var(--fs-sm);font-weight:700;color:var(--muted);letter-spacing:-.01em;
}
.td-year-chips button.lg:not(.on){color:#8990a3;border-color:#eceef2}

.td-picker{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;
}
.td-picker .ptitle{
  font-size:15px;font-weight:800;color:var(--text);
}
.td-rounds{
  display:flex;gap:8px;margin-top:12px;
}
.td-rounds button{
  flex:1;text-align:center;padding:9px 0;border:0;border-radius:11px;
  font-size:13.5px;font-weight:700;cursor:pointer;background:#f1f2f6;color:var(--dim);
}
.td-rounds button.on{background:var(--indigo);color:#fff;font-weight:800}
.td-rounds button:not(.on):hover{background:#e8eaef;color:var(--sub)}
.td-sublab{
  font-size:11.5px;font-weight:700;color:var(--sub);margin:14px 0 7px;
}
.td-subs{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.td-subs button{
  display:flex;align-items:center;gap:8px;text-align:left;
  border:0;border-radius:10px;padding:11px 12px;cursor:pointer;
  background:#f1f2f6;color:var(--dim);font-weight:700;font-size:var(--fs-md,14px);
  min-width:0;
}
.td-subs button .n{
  flex:none;width:19px;height:19px;border-radius:6px;
  background:#e2e4ee;color:var(--dim);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;
}
.td-subs button .lab{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-subs button.on{background:var(--indigo);color:#fff;font-weight:800}
.td-subs button.on .n{background:rgba(255,255,255,.25);color:#fff}
.td-subs button:not(.on):hover{background:#e8eaef;color:var(--sub)}
.td-subs button.wide{grid-column:1 / -1}
.td-picker-acts{display:flex;gap:9px;margin-top:14px}
.td-picker-acts a{
  flex:1;text-align:center;border-radius:12px;padding:12px;font-size:14px;
  font-weight:800;text-decoration:none;border:1px solid transparent;
}
.td-picker-acts .study{
  border-color:var(--indigo-line);background:var(--indigo-soft);color:var(--indigo-deep);
}
.td-picker-acts .study:hover{text-decoration:none;color:var(--indigo-deep)}
.td-picker-acts .test{
  border-color:var(--border);background:#fff;color:var(--sub);font-weight:700;
}
.td-picker-acts .test:hover{text-decoration:none;color:var(--text)}
.td-picker-meta{
  margin-top:10px;font-size:var(--fs-sm,12px);color:var(--faint);font-weight:600;
}

/* —— Analytics —— */
.td-analytics{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media(min-width:720px){.td-analytics{grid-template-columns:1fr 1fr}}
.td-chart-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;
}
.td-chart-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.td-chart-hd b{font-size:14px;font-weight:800;color:var(--text)}
.td-chart-hd span{font-size:11px;color:var(--faint);white-space:nowrap}
.td-chart-svg{width:100%;height:auto;margin-top:10px;display:block}
.td-legend{
  display:flex;gap:14px;margin-top:6px;justify-content:center;flex-wrap:wrap;
}
.td-legend span{
  display:flex;align-items:center;gap:5px;font-size:11px;color:#6b7180;
}
.td-legend i{
  width:9px;height:9px;border-radius:3px;display:inline-block;font-style:normal;
}
.td-cap{font-size:11.5px;color:var(--faint);margin-top:10px;font-weight:500}

/* —— Others + footer —— */
/* 다른 시험 — 기본 접힘 + 펼치면 격자로 정돈 (링크는 DOM 유지: SEO·add_track.py 계약) */
.td-others-toggle{
  font:inherit;font-size:var(--fs-sm,12px);font-weight:700;color:var(--sub);cursor:pointer;
  background:var(--card,#fff);border:1px solid var(--border);border-radius:10px;padding:7px 13px;
  white-space:nowrap;
}
.td-others-toggle:hover{border-color:var(--indigo-line);color:var(--indigo-deep)}
.td-others-toggle .cv{margin-left:5px;font-size:var(--fs-xs,10px);color:var(--muted)}
.td-others[hidden]{display:none !important}
.td-others{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:4px;margin-top:8px;
  max-height:min(52vh,420px);overflow:auto;
  background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;padding:8px;
}
.td-others a{
  font-size:var(--fs-sm,12px);font-weight:600;padding:8px 10px;border-radius:8px;
  background:transparent;border:0;color:var(--sub);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.td-others a:hover{background:var(--indigo-soft);border-color:transparent;color:var(--indigo-deep);text-decoration:none}
.td-others a.cur{background:var(--indigo-soft);color:var(--indigo-deep);font-weight:800}

.td-foot{
  background:#fff;border-top:1px solid #eceef2;padding:28px 20px 36px;margin-top:40px;
}
@media(min-width:900px){.td-foot{padding:32px 24px}}
.td-foot-inner{max-width:var(--page-max);margin:0 auto}
.td-foot-links{
  display:flex;gap:20px;font-size:12.5px;font-weight:700;color:#5b6070;flex-wrap:wrap;
}
.td-foot-links a{color:#5b6070;text-decoration:none}
.td-foot-links a:hover{color:var(--indigo)}
.td-foot-corp{
  font-size:11.5px;color:#9aa1ae;margin-top:14px;line-height:1.8;
}

/* small utils */
.td-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:11px;padding:11px 18px;font-weight:800;font-size:13.5px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
}
.td-btn-primary{background:var(--indigo);color:#fff}
.td-btn-primary:hover{filter:brightness(1.04);color:#fff;text-decoration:none}
.td-btn-ghost{
  background:#fff;color:var(--sub);border:1px solid var(--border);
}
.td-btn-ghost:hover{color:var(--text);text-decoration:none}

/* Phase A: 학습 분석 실데이터 · 로그인 게이트 */
.td-stat-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
@media(min-width:640px){.td-stat-row{grid-template-columns:repeat(4,1fr)}}
.td-stat{
  background:#fff;border:1px solid var(--border,#e6e8ef);border-radius:14px;
  padding:14px 12px;text-align:center;
}
.td-stat .n{font-size:1.35rem;font-weight:900;color:var(--text,#1B1F2E);letter-spacing:-.03em}
.td-stat .l{font-size:11.5px;font-weight:700;color:var(--muted,#8990a3);margin-top:4px}
.td-bar-track{
  height:10px;border-radius:999px;background:#eef0f4;overflow:hidden;margin-top:12px;
}
.td-bar-fill{
  height:100%;border-radius:999px;background:linear-gradient(90deg,#4d5bf0,#7c8cff);
  min-width:4px;
}
.td-login-gate{
  background:#fff;border:1px solid var(--border,#e6e8ef);border-radius:16px;padding:22px 18px;
}
.td-login-gate-inner{max-width:420px;margin:0 auto;text-align:center}
.td-login-gate b{display:block;font-size:15px;font-weight:800;color:var(--text,#1B1F2E)}
.td-login-gate p{margin:8px 0 0;font-size:13.5px;color:var(--muted,#8990a3);line-height:1.55}
.td-login-gate .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.td-cap{font-size:12px;color:var(--faint,#9196a3);font-weight:600;line-height:1.45}

/* Phase C: 이용권 밴드 · 후기·FAQ */
.td-plan-band{
  margin:18px 0 8px;
  background:linear-gradient(135deg,#f7f8ff 0%,#fff 50%,#f8fafc 100%);
  border:1px solid #e6e8ef;border-radius:16px;padding:16px 16px 14px;
}
@media(min-width:720px){.td-plan-band{padding:18px 20px 16px}}
.td-plan-hd{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.td-plan-hd .kicker{
  font-size:11px;font-weight:800;color:#4d5bf0;letter-spacing:.04em;text-transform:uppercase;
}
.td-plan-hd b{display:block;font-size:15px;font-weight:900;color:#1B1F2E;margin-top:2px;letter-spacing:-.02em}
.td-plan-all{font-size:12.5px;font-weight:800;color:#4d5bf0;text-decoration:none;white-space:nowrap}
.td-plan-all:hover{text-decoration:underline}
.td-plan-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
@media(min-width:720px){.td-plan-grid{grid-template-columns:repeat(4,1fr);gap:10px}}
.td-plan-card{
  background:#fff;border:1px solid #e6e8ef;border-radius:12px;padding:12px 12px 11px;
  display:flex;flex-direction:column;gap:6px;min-height:100%;
}
.td-plan-card.std{border-color:#c9d2ff;box-shadow:0 6px 16px -12px rgba(77,91,240,.45)}
.td-plan-card .tier{font-size:13px;font-weight:900;color:#1B1F2E;display:flex;align-items:center;gap:6px}
.td-plan-card .tier .hot{
  font-size:9.5px;font-weight:800;color:#4d5bf0;background:#eef0fe;
  padding:2px 6px;border-radius:999px;
}
.td-plan-card .desc{font-size:12px;font-weight:600;color:#6b7180;line-height:1.4;flex:1}
.td-plan-card .desc b{color:#1B1F2E;font-weight:800}
.td-plan-card .act{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:4px;padding:8px 10px;border-radius:9px;font-size:12.5px;font-weight:800;
  text-decoration:none;border:1px solid #e2e4ee;color:#3b48d8;background:#f8f9ff;
}
.td-plan-card .act:hover{border-color:#c9d2ff;text-decoration:none}
.td-plan-card .act.primary{background:#4d5bf0;border-color:#4d5bf0;color:#fff}
.td-plan-card .act.primary:hover{color:#fff;filter:brightness(1.05)}
.td-plan-card .act.ghost{
  background:#fff;border:1px solid #e2e4ee;color:#5b6070;font-size:12px;padding:7px 10px;
}
.td-plan-card .act.ghost:hover{border-color:#c9d2ff;color:#4d5bf0}
.td-plan-card .act.primary + .act.ghost,
.td-plan-card .act + .act.ghost{margin-top:6px}

.td-plan-note{
  margin:12px 0 0;font-size:11.5px;color:#9196a3;font-weight:600;line-height:1.5;
}
.td-plan-note a{color:#4d5bf0;font-weight:700;text-decoration:none}
.td-plan-note a:hover{text-decoration:underline}

.td-trust{margin:8px 0 20px}
.td-trust-inner{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media(min-width:800px){.td-trust-inner{grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}}
.td-trust-col{
  background:#fff;border:1px solid #e6e8ef;border-radius:16px;padding:16px 16px 14px;
}
.td-trust-col .th{
  font-size:13px;font-weight:900;color:#1B1F2E;margin-bottom:12px;letter-spacing:-.02em;
}
.td-story{
  border-top:1px solid #f0f1f5;padding:11px 0;
}
.td-story:first-of-type{border-top:0;padding-top:0}
.td-story .who{font-size:11.5px;font-weight:800;color:#4d5bf0;margin-bottom:4px}
.td-story p{margin:0;font-size:13px;font-weight:600;color:#5b6070;line-height:1.5}
.td-faq{
  display:block;border-top:1px solid #f0f1f5;padding:11px 0;text-decoration:none;color:inherit;
}
.td-faq:first-of-type{border-top:0;padding-top:0}
.td-faq:hover{text-decoration:none}
.td-faq b{display:block;font-size:13px;font-weight:800;color:#1B1F2E}
.td-faq span{display:block;font-size:12px;font-weight:600;color:#8990a3;margin-top:3px;line-height:1.4}
.td-faq.more{border-top:1px dashed #e6e8ef;margin-top:4px;padding-top:12px;font-size:12.5px;font-weight:800;color:#4d5bf0}
.td-faq.more:hover{text-decoration:underline}

/* Phase D: 오늘의 복습 히어로 · 취약 과목 */
.td-review-hero{
  margin:0 0 14px;
  background:linear-gradient(120deg,#1a1f3a 0%,#2a3270 55%,#3b48d8 100%);
  border-radius:16px;padding:16px 16px;
  color:#fff;
  box-shadow:0 12px 28px -16px rgba(59,72,216,.55);
}
.td-review-hero-inner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.td-review-hero .lab{
  font-size:11px;font-weight:800;letter-spacing:.06em;color:#a8b0ff;text-transform:uppercase;
}
.td-review-hero .ttl{
  font-size:clamp(17px,2.4vw,20px);font-weight:900;margin-top:4px;letter-spacing:-.03em;
}
.td-review-hero .ttl em{font-style:normal;color:#9ef0c8}
.td-review-hero .sub{
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72);margin-top:4px;line-height:1.4;
}
.td-review-hero .cta{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:#22c58b;color:#0d2b1e;font-weight:900;font-size:13.5px;
  padding:12px 18px;border-radius:12px;text-decoration:none;white-space:nowrap;
}
.td-review-hero .cta:hover{filter:brightness(1.06);color:#0d2b1e;text-decoration:none}

/* 분석 섹션 과목 막대 (2026-08-28 취약 스트립 흡수 — 구 .td-weak 컨테이너는 폐기) */
.td-weak-list{display:flex;flex-direction:column;gap:0}
.td-weak-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 4px;border-top:1px solid #f0f1f5;text-decoration:none;color:inherit;
}
.td-weak-row:first-child{border-top:0}
.td-weak-row:hover{text-decoration:none;background:#fafbfe}
.td-weak-row .grow{flex:1;min-width:0}
.td-weak-row .nm{font-size:14px;font-weight:800;color:#1B1F2E}
.td-weak-row .bar{height:6px;background:#edf0f7;border-radius:4px;margin-top:7px;overflow:hidden}
.td-weak-row .bar i{display:block;height:100%;border-radius:4px;background:var(--indigo,#3D5AFE)}
.td-weak-row .meta{font-size:12px;font-weight:600;color:#8990a3;margin-top:5px}
.td-weak-row .go{font-size:12.5px;font-weight:800;color:#4d5bf0;flex-shrink:0}
.td-an-sum{font-size:13.5px;font-weight:600;color:#5a6172;margin:0 0 6px}
.td-an-sum b{font-weight:900;color:#1B1F2E;font-size:15.5px}
.td-an-sum .sep{margin:0 8px;color:#c3c8d4}
.td-an-more{display:block;width:100%;margin-top:10px;padding:9px 0;border:1px solid #e3e7f0;border-radius:10px;background:#fff;font-size:13.5px;font-weight:700;color:#5a6172;cursor:pointer}
.td-an-more:hover{background:#f7f8fc}
.td-an-cta{display:flex;align-items:center;justify-content:center;margin-top:8px;padding:11px 0;border-radius:10px;background:var(--indigo,#3D5AFE);color:#fff;font-size:14px;font-weight:800;text-decoration:none}
.td-an-cta:hover{color:#fff;filter:brightness(1.06);text-decoration:none}
.td-plan-card .desc .mini{font-size:11px;font-weight:600;color:#a4a9b8}


/* 트랙 페이지 이용권 iframe 오버레이 — 페이지 이탈 없이 */
.td-shop-embed{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(20,24,44,.48);align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  backdrop-filter:blur(3px);
}
.td-shop-embed.show{display:flex}
body.td-shop-open{overflow:hidden}
/* 전체 화면 iframe — 뒤 트랙/풀이 화면이 비치지 않게 */
.td-shop-embed{
  padding:0 !important;
  background:#eef0f6 !important;
  backdrop-filter:none !important;
}
.td-shop-embed-panel{
  position:relative;width:100%;height:100%;
  max-width:none;background:#eef0f6;border-radius:0;
  box-shadow:none;
}
.td-shop-embed-frame{
  width:100%;height:100%;border:0;border-radius:0;background:#eef0f6;
  display:block;
}
@media(max-width:560px){
  .td-shop-embed-panel{width:100%;height:100%;border-radius:0;align-self:stretch}
  .td-shop-embed-frame{border-radius:0}
}

/* 동일 연도 복수 회차(국가·지방 등) 분리 선택 */
.td-exam-rows{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.td-exam-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid #e8eaf2;border-radius:14px;background:#fafbff;
}
.td-exam-lab{font-size:13.5px;font-weight:700;color:#1b1f2a;letter-spacing:-.02em;line-height:1.35;min-width:0;flex:1}
.td-exam-acts{margin-top:0!important;flex-shrink:0}
@media(max-width:520px){
  .td-exam-row{flex-direction:column;align-items:stretch}
  .td-exam-acts a{flex:1;text-align:center}
}

/* —— 현재 학습 중 (홈 카드와 동일 톤, 트랙 허브) —— */
.td-now-learn{margin:0 0 14px}
.td-now-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:16px 18px 14px;text-decoration:none;color:inherit;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  transition:border-color .15s, box-shadow .15s;
}
.td-now-card:hover{border-color:#c7cde8;box-shadow:0 6px 18px rgba(61,90,254,.08);text-decoration:none;color:inherit}
.td-now-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.td-now-pill{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:800;line-height:1.2;
  background:#eef0fe;color:#4d5bf0;
}
.td-now-pill.gisa{background:#f3ebfe;color:#7c3aed}
.td-now-pill.energy{background:#fdefe4;color:#c85a1c}
.td-now-pill.g7{background:#e7f5ee;color:#118049}
.td-now-pill.hae{background:#e6f2fb;color:#0369a1}
.td-now-pill.gongjo{background:#eef2ff;color:#4338ca}
.td-now-status{font-size:12.5px;font-weight:800;color:#dc2626}
.td-now-status.review{color:#c2410c}
.td-now-title{font-size:17px;font-weight:900;letter-spacing:-.3px;color:var(--text);line-height:1.25}
.td-now-sub{margin-top:4px;font-size:13px;font-weight:600;color:var(--faint)}
.td-now-go{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:800;color:var(--indigo)}
.td-prog-grid-after-now{margin-top:4px}
@media(min-width:720px){
  .td-now-card{max-width:420px}
}

/* —— 최근에 진행한 학습(레거시 클래스 유지) —— */
.td-recent-list{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media(min-width:640px){
  .td-recent-list{grid-template-columns:repeat(2,1fr);gap:14px}
}
.td-recent-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:16px 18px 14px;text-decoration:none;color:inherit;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  transition:border-color .15s, box-shadow .15s;min-height:120px;
}
.td-recent-card:hover{
  border-color:#c7cde8;box-shadow:0 6px 18px rgba(61,90,254,.08);
  text-decoration:none;color:inherit;
}
.td-recent-top{margin-bottom:8px}
.td-recent-badge{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:800;background:var(--indigo-soft);color:var(--indigo);
}
.td-recent-title{font-size:16px;font-weight:900;letter-spacing:-.3px;line-height:1.3;color:var(--text)}
.td-recent-sub{margin-top:4px;font-size:13px;font-weight:600;color:var(--faint);flex:1}
.td-recent-go{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:800;color:var(--indigo)}

/* —— 진행 중인 회차 카드 (학습/시험 모드) —— */
.td-prog-txt{min-width:0;flex:1}
.td-prog .t{font-size:16px;font-weight:900;letter-spacing:-.3px;line-height:1.3}
.td-prog .s{font-size:12.5px;color:var(--faint);margin-top:6px;font-weight:600}
/* SVG 진행 링 — dasharray 기준 퍼센트와 텍스트 일치 */
.td-ring-wrap{
  position:relative;flex:none;width:56px;height:56px;
}
.td-ring-svg{width:56px;height:56px;display:block}
.td-ring-bg,.td-ring-fg{fill:none}
.td-ring-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  pointer-events:none;
}
.td-ring-wrap.is-zero .td-ring-pct{color:#9196a3}
.td-prog-acts .study,.td-prog-acts .test{font-size:13px;padding:11px 8px}

/* —— 회차 전체 풀기 (기사·산업기사) ——
   ⛔ 과목 행보다 **위**에 둔다. 아래 두면 과목 행을 다 지나야 보여서, 정작
      기본 동선인 「회차 통으로 풀기」가 숨는다. */
.td-whole{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  padding:11px 12px;border-radius:11px;
  background:#f5f6ff;border:1px solid #e3e6fb;
}
.td-whole-lb{flex:1;font-size:13px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.td-whole-acts{flex:none;display:flex;gap:6px}
.td-whole-acts a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;padding:8px 12px;border-radius:9px;
  font-size:12.5px;font-weight:800;text-decoration:none;
}
.td-whole-acts .study{background:var(--indigo);color:#fff}
.td-whole-acts .test{background:#fff;color:var(--indigo);border:1px solid #d6daf6}
.td-whole-acts a:hover{opacity:.92}

/* —— 공무원 회차 카드: 과목 행 (링 없음 · 진행바가 진도) —— */
.td-prog-multi .td-prog-txt{flex:none}
.td-sub-rows{margin-top:14px;border-top:1px solid #f0f1f6}
.td-sub-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid #f0f1f6;
}
.td-sub-row:last-child{border-bottom:0}
.td-sub-nm{
  flex:none;width:86px;font-size:13px;font-weight:800;color:var(--text);
  letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-sub-bar{
  flex:1;min-width:28px;height:6px;border-radius:999px;
  background:#eceef4;overflow:hidden;
}
.td-sub-bar > i{display:block;height:100%;border-radius:999px;background:var(--indigo)}
/* 완료 = 초록 (기존 링의 100% 신호 유지) */
.td-sub-bar.is-done > i{background:var(--ok)}
.td-sub-cnt{
  flex:none;width:42px;text-align:right;
  font-size:11.5px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums;
}
.td-sub-cnt.is-done{color:var(--ok)}
/* 안 푼 과목: 바 대신 문항 수만 (빈 회색 바를 그리지 않는다) */
.td-sub-cnt.is-zero{flex:1;width:auto;color:#b9bdc9;font-weight:700}
.td-sub-go{display:flex;gap:6px;flex:none}
.td-sub-go a{
  font-size:11.5px;font-weight:800;padding:7px 11px;border-radius:8px;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;
  min-height:32px;display:inline-flex;align-items:center;justify-content:center;
}
.td-sub-go .study{border-color:var(--indigo-line);background:var(--indigo-soft);color:var(--indigo-deep)}
.td-sub-go .study:hover{text-decoration:none;color:var(--indigo-deep);filter:brightness(.98)}
.td-sub-go .test{border-color:var(--border);background:#fff;color:var(--sub);font-weight:700}
.td-sub-go .test:hover{text-decoration:none;color:var(--text);border-color:#d0d4e0}
/* 좁은 폰: 과목명 폭을 흘려 버튼을 지킨다 (터치 타깃 32px 는 유지) */
@media(max-width:380px){
  .td-sub-row{gap:8px}
  .td-sub-nm{width:auto;max-width:78px}
  .td-sub-go{gap:5px}
  .td-sub-go a{padding:7px 8px}
}
@media(max-width:340px){
  .td-sub-nm{max-width:62px}
}

/* —— 전체 회차 확인 (회차별 학습 모달) —— */
body.td-rounds-open{overflow:hidden}
.td-rounds-ov{
  position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.35);
  display:none;align-items:stretch;justify-content:center;
  padding:0;backdrop-filter:blur(2px);
}
.td-rounds-ov.show{display:flex}
.td-rounds-panel{
  width:min(720px,100%);margin:0 auto;background:var(--bg);
  display:flex;flex-direction:column;max-height:100vh;
  box-shadow:0 0 40px rgba(15,23,42,.12);
}
@media(min-width:760px){
  .td-rounds-ov{padding:24px 16px;align-items:center}
  .td-rounds-panel{border-radius:18px;max-height:min(90vh,920px);overflow:hidden}
}
.td-rounds-hd{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:14px 16px;background:#fff;border-bottom:1px solid var(--border);
}
.td-rounds-hd h2{margin:0;flex:1;text-align:center;font-size:16px;font-weight:900;letter-spacing:-.2px}
.td-rounds-back{
  width:36px;height:36px;border:0;border-radius:10px;background:transparent;
  font-size:22px;font-weight:700;color:var(--text);cursor:pointer;line-height:1;
}
.td-rounds-back:hover{background:#f1f2f6}
.td-rounds-hd-sp{width:36px;flex:none}
.td-rounds-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px 28px;
}
/* ⛔ 모달 안 그리드는 뷰포트가 아니라 패널 폭을 따른다.
   `.td-prog-grid` 의 열 수는 `@media(min-width:960px)` 로 정해지는데 패널은
   `min(720px,100%)` 고정이라, 데스크톱에서 3열이 켜지면 한 칸이 220px 로 좁아진다.
   과목 행의 min-content 가 271px 라 `1fr` 이 더 못 줄고 그리드가 패널 밖으로
   266px 밀려나 가로 스크롤바가 생기고 3번째 카드가 잘렸다 (2026-07-31). */
.td-rounds-body .td-prog-grid{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
}
.td-cat-sec{margin-bottom:22px}
.td-cat-sec-t{
  font-size:13px;font-weight:800;color:var(--sub);margin:0 0 10px;
}
.td-cat-year-block{margin-top:18px}
.td-cat-year-lab{
  font-size:14px;font-weight:900;color:var(--text);margin:0 0 10px;letter-spacing:-.2px;
}
/* 스크롤 중 지금 몇 년도를 보는지 잃지 않는다 */
.td-rounds-body .td-cat-year-lab{
  position:sticky;top:0;z-index:3;
  margin:0 -16px 10px;padding:6px 16px 8px;
  background:linear-gradient(var(--bg) 72%,rgba(246,247,252,0));
}
.td-cat-year-lab .n{font-size:11.5px;font-weight:700;color:var(--faint);margin-left:7px}
.td-cat-years{margin-bottom:8px}

/* 트랙 전체 규모 한 줄 */
.td-cat-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;margin:0 0 14px;font-size:12.5px;font-weight:700;color:var(--sub);
}
.td-cat-summary .big{font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.3px}
.td-cat-summary .dot{color:#d4d7e2}
.td-cat-summary b{color:var(--indigo);font-weight:800}
.td-cat-summary .mute{color:var(--faint);font-weight:600}

/* 아무것도 안 푼 사람에게 주는 시작점 */
.td-cat-start{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px 16px;
  border-radius:14px;background:linear-gradient(135deg,#4d5bf0,#6b52e8);
  color:#fff;text-decoration:none;
}
.td-cat-start:hover{text-decoration:none;color:#fff;filter:brightness(1.05)}
.td-cat-start .txt{flex:1;min-width:0}
.td-cat-start .k{display:block;font-size:11px;font-weight:800;opacity:.82;letter-spacing:.2px}
.td-cat-start .v{
  display:block;font-size:15px;font-weight:900;letter-spacing:-.3px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-cat-start .go{
  flex:none;background:#fff;color:var(--indigo-deep);font-size:12.5px;font-weight:800;
  padding:9px 15px;border-radius:10px;
}

/* 상태 필터 (전체 · 진행 중 · 안 푼 · 완료) */
.td-cat-states{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.td-cat-states button{
  border:1px solid var(--border-soft);background:#fff;color:#6b7180;
  padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  cursor:pointer;line-height:1.25;white-space:nowrap;
}
.td-cat-states button.on{border-color:var(--indigo);background:var(--indigo-soft);color:var(--indigo-deep)}
.td-cat-states button[disabled]{opacity:.42;cursor:default}
.td-cat-states button:not(.on):not([disabled]):hover{background:#f4f5fb;color:var(--text)}
.td-cat-states .cnt{margin-left:4px;opacity:.62;font-variant-numeric:tabular-nums}


/* saneop / gas track pills */
.td-pill.cat-saneop{color:#be123c;background:#ffe4e6}
.td-pill.cat-jeongbo{color:#334155;background:#e2e8f0}
.td-pill.cat-chemanal{color:#15803d;background:#dcfce7}
.td-pill.cat-gas{color:#0f766e;background:#ccfbf1}


/* v2 정돈 패스: [hidden] 이 컴포넌트 display 규칙에 지지 않게 (배너·헤더 CTA 실측 사고) */
.td-btn-dark[hidden]{display:none!important;}
.td-nav-crumb[hidden],.td-crumb[hidden],.td-nav-links a[hidden],.td-link-pill[hidden]{display:none!important;}

/* td-v2(다산 구조) 블록은 2026-08-22 에 걷었다 — 운영자가 v1 레이아웃을 택했다.
   그때 v2 에서만 되던 것(개편 전 연도 낱개·시행처 탭·후기 제거·밴드 문구)은
   레이아웃과 떼어내 v1 에서도 켜지게 했으므로 이 블록에 남은 기능은 없다.
   되살릴 일이 있으면 커밋 4e9d95250 앞을 볼 것. */