:root{--navy:#082b68;--blue:#1768e9;--orange:#ff6a10;--ink:#183455;--muted:#687b92;--line:#dbe5f1;--mint:#e5f8eb;--paper:#f8faf9;--shadow:0 18px 45px rgba(24,52,85,.1)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Inter,"Noto Sans KR",system-ui,sans-serif;background:var(--paper);background-image:radial-gradient(#d9e5f0 1px,transparent 1px);background-size:24px 24px}.top{min-height:78px;position:sticky;top:0;z-index:5;background:#fffffff2;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:12px}.brand a{display:flex;min-width:44px;min-height:44px;align-items:center}.brand img{width:76px;height:58px;object-fit:contain}.brand b{color:var(--navy)}.back{min-height:44px;display:flex;align-items:center;color:var(--blue);text-decoration:none;font-size:12px;font-weight:850}.wrap{max-width:1100px;margin:auto;padding:48px 24px 88px}.ey{font-size:11px;letter-spacing:.14em;font-weight:900;color:#248153}h1{font-size:clamp(42px,6vw,66px);line-height:.98;color:var(--navy);letter-spacing:-.055em;margin:10px 0 18px}.intro{max-width:770px;color:var(--muted);font-size:16px;line-height:1.75}.method{margin:34px 0 50px;padding:25px 27px;border:1px solid #c9e7d3;border-radius:22px;background:linear-gradient(145deg,#fff,#edf9f1);box-shadow:var(--shadow)}.method h2{margin:0 0 15px;color:var(--navy);font-size:24px}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.flow.story-flow{grid-template-columns:repeat(6,minmax(0,1fr))}.flow div{position:relative;padding:15px 10px;border-radius:14px;background:#fff;color:#4d6981;text-align:center;font-size:11px;line-height:1.55;font-weight:850}.flow div:not(:last-child):after{content:"→";position:absolute;right:-9px;color:var(--orange)}.choose h2{color:var(--navy);font-size:29px;margin:0 0 20px}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.level-card{position:relative;display:block;min-height:205px;padding:23px;border:2px solid #cfe6d7;border-radius:21px;background:#fff;color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,border-color .16s}.level-card:hover{transform:translateY(-4px);border-color:#3b9a66;box-shadow:0 22px 50px rgba(24,52,85,.16)}.level-card:focus-visible{outline:3px solid #8bd0aa;outline-offset:3px}.level-card:nth-child(5),.level-card:nth-child(6){background:#edf9f1}.level-card:after{content:"↗";position:absolute;right:18px;top:16px;color:#248153;font-size:18px;font-weight:950}.level{font-size:11px;font-weight:950;letter-spacing:.12em;color:#248153}.level-card h3{font-size:23px;color:var(--navy);margin:10px 0}.level-card p{color:var(--muted);font-size:13px;line-height:1.58}.open{position:absolute;left:23px;bottom:21px;color:var(--orange);font-size:11px;font-weight:900}.notice{margin-top:28px;color:#748397;font-size:11px;line-height:1.6}
    .camp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:34px 0 50px}.camp-card{position:relative;min-height:245px;padding:26px;border:2px solid var(--line);border-radius:24px;background:#fff;color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}.camp-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(24,52,85,.16)}.camp-card.vocal{background:linear-gradient(145deg,#fff,#eaf3ff);border-color:#cfe0f7}.camp-card.story{background:linear-gradient(145deg,#fff,#edf9f1);border-color:#cfe6d7}.camp-kicker{font-size:10px;font-weight:950;letter-spacing:.14em;color:var(--blue)}.camp-card.story .camp-kicker{color:#248153}.camp-card h2{margin:34px 0 9px;color:var(--navy);font-size:34px}.camp-card p{max-width:430px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.camp-open{position:absolute;left:26px;bottom:23px;color:var(--orange);font-size:10px;font-weight:950;letter-spacing:.08em}
@media(max-width:950px){.flow.story-flow{grid-template-columns:repeat(3,1fr)}.flow.story-flow div:nth-child(3):after{display:none}}@media(max-width:850px){.levels{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.top{min-height:68px;padding:0 12px}.brand img{width:58px}.brand b{font-size:12px}.wrap{padding:31px 16px 62px}.camp-grid,.levels,.flow,.flow.story-flow{grid-template-columns:1fr}.camp-card{min-height:220px}.level-card{min-height:180px}.flow.story-flow div:nth-child(3):after{display:block}.flow div:not(:last-child):after{content:"↓";right:auto;left:50%;bottom:-12px}.method{padding:21px 18px}}
.camp-card{display:flex;flex-direction:column}.levels .level-card{display:block!important;align-items:initial;justify-content:initial}.camp-open{position:static;display:block;margin-top:auto;padding-top:24px}.top{gap:12px}.back{flex-shrink:0}.camp-card:focus-visible{outline:3px solid #1768e9;outline-offset:4px}
.family-catalog{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}.family-catalog>.family-card,.family-catalog>.tt-completion-card{flex:1 1 210px;max-width:calc(25% - 9px)}.family-card{min-height:158px;padding:17px 16px 68px;background:linear-gradient(145deg,#fff,#edf9f1)!important;border-radius:17px}.family-card h3{margin:7px 0 5px;font-size:22px}.family-card p{display:-webkit-box;max-width:420px;margin:0;font-size:11px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.family-card .open{display:none}.family-card:after{right:14px;top:12px;font-size:15px}.family-catalog>.tt-completion-card.is-completed{flex:0 0 88px;width:88px;max-width:88px;height:88px}.family-catalog>.tt-completion-card.is-completed>.family-card{min-height:88px;height:88px;padding:13px 10px!important;border-radius:16px}.family-catalog>.tt-completion-card.is-completed .family-kind,.family-catalog>.tt-completion-card.is-completed .family-card h3,.family-catalog>.tt-completion-card.is-completed .family-card p,.family-catalog>.tt-completion-card.is-completed .family-card:after{display:none}.family-catalog>.tt-completion-card.is-completed .family-number{font-size:15px;letter-spacing:.08em}.catalog-tools{display:grid;grid-template-columns:minmax(0,520px) auto;align-items:end;gap:10px;margin:0 0 20px}.catalog-tools label{grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:850}.catalog-tools input{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:16px;box-shadow:0 8px 20px rgba(24,52,85,.06)}.catalog-tools input:focus{outline:3px solid color-mix(in srgb,var(--blue) 24%,transparent);border-color:var(--blue)}.catalog-status{color:var(--muted);font-size:12px}.catalog-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}.catalog-pages button{min-width:96px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);font:inherit;font-size:12px;font-weight:900;cursor:pointer}.catalog-pages button:disabled{opacity:.4;cursor:default}.catalog-pages span{min-width:64px;text-align:center;color:var(--muted);font-size:12px;font-weight:850}@media(max-width:950px){.family-catalog>.family-card,.family-catalog>.tt-completion-card{max-width:calc(33.333% - 8px)}}@media(max-width:700px){.family-catalog{gap:10px}.family-catalog>.family-card,.family-catalog>.tt-completion-card{flex-basis:calc(50% - 5px);max-width:calc(50% - 5px)}.family-card{min-height:150px;padding:15px 13px 66px}.family-card h3{font-size:20px}.family-card p{-webkit-line-clamp:2}.family-catalog>.tt-completion-card.is-completed{flex-basis:82px;width:82px;max-width:82px;height:82px}.family-catalog>.tt-completion-card.is-completed>.family-card{min-height:82px;height:82px}.catalog-tools{grid-template-columns:1fr}.catalog-status{min-height:20px}}
@media(prefers-reduced-motion:reduce){.camp-card,.level-card{transition:none}}
/* Long episode titles must not collide with the level action. */
.levels .level-card{height:auto!important;min-height:205px}
.levels .level-card .open{position:static;display:block;margin-top:16px}
html[data-appearance=dark] body .levels.tt-level-postits .level-card{background:#14253d!important;border-color:#344960!important;filter:none}
html[data-appearance=dark] body .levels.tt-level-postits .level-card :is(h3,p,.open,.level){background:transparent!important;color:#e6ecf6!important}
html[data-appearance=dark] .tt-route-tools :is(button,a){background:#14253d!important;color:#e6ecf6!important}
@media(max-width:650px){html[data-appearance] body .levels.tt-level-postits{grid-template-columns:1fr!important}}