/* Toddle TOPIK pages (/topik, /topik/topik-i, /topik/topik-ii). Uses tokens from toddle-home.css */
.tp-crumb{font-size:14px;color:rgba(255,255,255,.75);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tp-crumb a{color:inherit;text-decoration:none;font-weight:600}
.tp-crumb a:hover{color:#fff;text-decoration:underline}
.tp-hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tp-hero-acts .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.tp-hero-acts .btn-ghost:hover{border-color:#fff}

.tp-wrap{margin-top:0;padding-top:44px;padding-bottom:20px}
.tp-sec{margin-top:44px}
.tp-sec:first-child{margin-top:0}
.tp-sec > h2{font-size:clamp(22px,2.6vw,28px);font-weight:800}
.tp-sec > .lead{color:var(--muted);margin:6px 0 0;max-width:70ch;font-size:16px}
.tp-prose{max-width:75ch}
.tp-prose p{margin:12px 0 0;font-size:16px;line-height:1.65}

/* two test cards on the hub */
.tp-two{display:grid;gap:16px;margin-top:18px}
@media (min-width:820px){.tp-two{grid-template-columns:1fr 1fr}}
.tp-card{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
a.tp-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(23,22,58,.08)}
.tp-card .lv{display:inline-flex;align-self:flex-start;font-size:12.5px;font-weight:800;letter-spacing:.04em;background:var(--cs);color:var(--ct);border-radius:99px;padding:4px 12px}
.tp-card h3{font-size:22px;font-weight:800}
.tp-card p{margin:0;color:var(--muted);font-size:15px}
.tp-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:14.5px}
.tp-card .go{margin-top:auto;font-weight:700;color:var(--ct)}

/* tables */
.tp-table-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.tp-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tp-table th,.tp-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tp-table thead th{background:var(--sunk);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tp-table tbody tr:last-child td{border-bottom:0}
.tp-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-table tfoot td{background:var(--sunk);font-weight:700}
.tp-note{font-size:13.5px;color:var(--muted);margin-top:8px}

/* level score bars */
.tp-levels{display:grid;gap:10px;margin-top:16px}
@media (min-width:640px){.tp-levels{grid-template-columns:repeat(var(--n,2),1fr)}}
.tp-lv{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.tp-lv b{font-family:var(--display);font-size:20px}
.tp-lv span{color:var(--muted);font-size:14px}
.tp-lv .bar{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden;margin-top:4px}
.tp-lv .bar i{display:block;height:100%;background:var(--c,var(--blue));border-radius:99px}

/* facts grid */
.tp-facts{display:grid;gap:12px;margin-top:16px}
@media (min-width:640px){.tp-facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.tp-facts{grid-template-columns:repeat(4,1fr)}}
.tp-fact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.tp-fact small{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tp-fact b{display:block;font-family:var(--display);font-size:19px;margin-top:4px}
.tp-fact span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}

/* course ladder from the backend */
.tp-ladder{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.tp-ladder{grid-template-columns:repeat(2,1fr)}}
.tp-ladder li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:14px;padding:14px 16px}
.tp-ladder li.dim{opacity:.6}
.tp-ladder .n{width:32px;height:32px;border-radius:50%;background:var(--cs);color:var(--ct);display:grid;place-items:center;font-weight:800;font-family:var(--display);flex-shrink:0}
.tp-ladder b{display:block;font-size:16px}
.tp-ladder span{display:block;color:var(--muted);font-size:13.5px}
.tp-ladder em{font-style:normal;font-weight:700;color:var(--ink)}

/* steps */
.tp-steps{counter-reset:s;list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:860px){.tp-steps{grid-template-columns:repeat(2,1fr)}}
.tp-steps li{counter-increment:s;display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px}
.tp-steps li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--display);flex-shrink:0;font-size:14px}
.tp-steps b{display:block}
.tp-steps span{color:var(--muted)}

/* side-by-side related links */
.tp-links{display:grid;gap:10px;margin-top:16px}
@media (min-width:700px){.tp-links{grid-template-columns:repeat(3,1fr)}}
.tp-links a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px}
.tp-links a span{display:block;color:var(--muted);font-weight:500;font-size:13.5px;margin-top:2px}
.tp-links a:hover{border-color:var(--ink)}

.tp-cta{display:grid;gap:16px;margin-top:44px;background:var(--navy);color:#fff;border-radius:20px;padding:24px}
@media (min-width:860px){.tp-cta{grid-template-columns:1fr auto;align-items:center;padding:30px 34px}}
.tp-cta h2{font-size:22px;font-weight:800;color:#fff}
.tp-cta p{margin:6px 0 0;color:rgba(255,255,255,.8)}
.tp-cta .acts{display:flex;flex-wrap:wrap;gap:10px}
.tp-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

.tp-faq{margin-top:16px}