/* Drill — 숏폼 학습 피드. 세로 9:16, 어두운 시네마틱 톤, 장마다 색상(--h) */
html.dr-lock, html.dr-lock body { overflow: hidden; overscroll-behavior: none; }

.dr-root {
  --h: 218;
  --acc: hsl(var(--h) 95% 68%);
  --acc2: hsl(calc(var(--h) + 40) 95% 72%);
  --good: #5ef0a6;
  --bad: #ff7a8a;
  --glass: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .16);
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: #05070d; color: #fff;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  word-break: keep-all; -webkit-user-select: none; user-select: none;
}
.dr-root button { font: inherit; color: inherit; }
/* 주변광: 데스크톱에서 폰 바깥으로 장 색이 번진다 */
.dr-amb { position: absolute; inset: -20%; background:
  radial-gradient(40% 40% at 35% 40%, hsl(var(--h) 80% 45% / .45), transparent 70%),
  radial-gradient(35% 35% at 70% 65%, hsl(calc(var(--h) + 50) 80% 45% / .35), transparent 70%);
  filter: blur(40px); transition: background 1s; pointer-events: none; }

.dr-phone {
  position: relative; width: 100%; height: 100%; overflow: hidden; outline: none;
  touch-action: none; container-type: size; background: #070a14;
}
@media (min-width: 640px) and (min-aspect-ratio: 4/5) {
  .dr-phone { height: min(calc(100dvh - 48px), 940px); width: auto; aspect-ratio: 9 / 16; border-radius: 30px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 120px rgba(0,0,0,.6); }
}
.dr-track { position: absolute; inset: 0; }
.dr-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

/* ── 슬라이드 ── */
.dr-slide { position: absolute; inset: 0; overflow: hidden; background: #070a14; will-change: transform; transform-origin: 50% 50%; }
.dr-bg { position: absolute; inset: 0; overflow: hidden; }
.dr-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drDrift 16s ease-in-out infinite alternate; animation-play-state: paused; }
.dr-slide.live .dr-blob, .drl-hero .dr-blob { animation-play-state: running; }
.dr-blob.a { width: 80cqw; height: 80cqw; left: -30cqw; top: -10cqh; background: hsl(var(--h) 85% 50%); }
.dr-blob.b { width: 70cqw; height: 70cqw; right: -35cqw; top: 35cqh; background: hsl(calc(var(--h) + 45) 85% 50%); animation-duration: 21s; animation-delay: -6s; }
.dr-blob.c { width: 60cqw; height: 60cqw; left: 10cqw; bottom: -30cqh; background: hsl(calc(var(--h) - 40) 80% 45%); animation-duration: 18s; animation-delay: -3s; opacity: .4; }
@keyframes drDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12cqw, 6cqh) scale(1.15); }
  100% { transform: translate(-8cqw, -4cqh) scale(.92); }
}
.dr-grain { position: absolute; inset: 0; opacity: .1; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dr-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,13,.55) 0, transparent 18%, transparent 62%, rgba(5,7,13,.8) 100%); }
.dr-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9; }

.dr-body { position: absolute; z-index: 2; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 84px); bottom: 150px;
  padding: 0 max(16px, 5.5cqw); padding-right: max(64px, 16cqw); display: flex; flex-direction: column; }
.dr-t-intro .dr-body, .dr-t-end .dr-body, .dr-t-milestone .dr-body { padding-right: max(16px, 5.5cqw); }
.dr-kick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 2.4cqh; font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.dr-type { color: var(--acc); }
.dr-no { color: rgba(255,255,255,.5); letter-spacing: .08em; }
.dr-badge { padding: 3px 8px; border-radius: 99px; letter-spacing: .02em; font-size: 11px; }
.dr-badge.again { background: rgba(255,209,102,.18); color: #ffd166; }
.dr-badge.wrong { background: rgba(255,122,138,.2); color: var(--bad); animation: drPulse 1.4s ease-in-out infinite; }
@keyframes drPulse { 50% { box-shadow: 0 0 0 6px rgba(255,122,138,0); background: rgba(255,122,138,.35); } }
.dr-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.2cqh; }

/* 단어 마스크 */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .12em; margin-bottom: -.12em; }
.wi { display: inline-block; will-change: transform; }

.dr-q { font-weight: 800; letter-spacing: -.035em; line-height: 1.22; font-size: clamp(22px, 7.6cqw, 40px); }
.dr-q.big { font-size: clamp(26px, 9cqw, 46px); }
.dr-q.small { font-size: clamp(14px, 4.4cqw, 20px); color: rgba(255,255,255,.65); font-weight: 700; }
.dr-q.len-l { font-size: clamp(20px, 6.4cqw, 34px); }
.dr-q.len-xl { font-size: clamp(18px, 5.6cqw, 30px); }
.dr-q.len-xxl, .dr-q.bank { font-size: clamp(16px, 4.8cqw, 24px); line-height: 1.38; }
.dr-q.bank.len-s, .dr-q.bank.len-m { font-size: clamp(18px, 5.8cqw, 28px); }
/* 사료 제시형 지문(> 인용) — 질문보다 작게, 상자로 */
.dr-q blockquote { margin: .5em 0; padding: .55em .8em; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; font-size: .74em; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.dr-q blockquote p { margin: 0 0 .3em; } .dr-q blockquote p:last-child { margin: 0; }
.dr-q b { color: var(--acc); }
.dr-qn { display: inline-block; font-size: 11px; letter-spacing: .1em; color: var(--acc); font-weight: 800; vertical-align: middle; margin-right: 4px; }
.dr-hint { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 600; margin-top: -1cqh; }

/* 요약 카드 */
.dr-sum { margin-top: auto; opacity: 0; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dr-sum:empty { display: none; }
.dr-sum-k { font-size: 10.5px; letter-spacing: .2em; font-weight: 800; color: var(--acc); margin-bottom: 4px; }
.dr-sum-t { font-size: clamp(14px, 4.4cqw, 19px); font-weight: 700; line-height: 1.45; letter-spacing: -.02em; }
.dr-sum-t b { color: var(--acc); }

/* 하단 캡션·체크·다음 */
.dr-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 0 max(16px, 5.5cqw) calc(env(safe-area-inset-bottom) + 18px); padding-right: max(70px, 18cqw); }
.dr-cap-t { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.88); }
.dr-cap-t b { color: #fff; }
.dr-sec { color: rgba(255,255,255,.5); font-weight: 500; margin-left: 4px; }
.dr-tags { font-size: 13px; color: var(--acc2); font-weight: 600; margin-top: 2px; min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-check { display: flex; gap: 8px; margin-bottom: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.16,1,.3,1); }
.dr-slide.need-check .dr-check, .dr-slide.checked .dr-check { opacity: 1; transform: none; pointer-events: auto; }
.dr-pill { flex: 1; border: 1px solid var(--line); background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 99px; padding: 11px 10px; font-weight: 800; font-size: 14.5px; cursor: pointer; transition: background .2s, opacity .3s; }
.dr-pill.ok { background: rgba(94,240,166,.16); border-color: rgba(94,240,166,.45); }
.dr-pill.again { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.4); }
.dr-slide.checked .dr-pill { opacity: .35; pointer-events: none; }
.dr-next { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 76px); transform: translateX(-50%); display: none; align-items: center; gap: 2px; flex-direction: column;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.75); pointer-events: none; }
.dr-slide.can-next:not(.need-check) .dr-next { display: flex; animation: drNudge 1.6s ease-in-out infinite; }
@keyframes drNudge { 0%, 100% { transform: translate(-50%, 0); opacity: .6; } 50% { transform: translate(-50%, -8px); opacity: 1; } }

/* 오른쪽 레일 */
.dr-rail { position: absolute; z-index: 6; right: max(8px, 2.5cqw); bottom: calc(env(safe-area-inset-bottom) + 24px); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.dr-rail > * { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; color: #fff; text-decoration: none; cursor: pointer; }
.dr-rail svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .2s; }
.dr-rail span { font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.dr-rail .on svg { fill: #ffd166; stroke: #ffd166; background: rgba(255,209,102,.2); }

/* ── 상단 HUD ── */
.dr-top { position: absolute; z-index: 10; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top) + 10px) max(12px, 4cqw) 0; pointer-events: none; }
.dr-segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dr-segs i { height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.dr-segs b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.dr-head { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dr-x { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); display: grid; place-items: center; cursor: pointer; }
.dr-x svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.dr-ttl { flex: 1; min-width: 0; line-height: 1.2; }
.dr-ttl b { display: block; font-size: 15px; font-weight: 800; }
.dr-pos { font-size: 12px; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.dr-goal { position: relative; width: 38px; height: 38px; }
.dr-goal svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.dr-goal circle { fill: none; stroke-width: 3.5; }
.dr-goal .trk { stroke: rgba(255,255,255,.18); }
.dr-goal .arc { stroke: #ffd166; stroke-dasharray: 94.25; stroke-linecap: round; }
.dr-goal b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }

.dr-pause { position: absolute; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: .25s; display: flex; gap: 10px; pointer-events: none; }
.dr-pause i { width: 14px; height: 52px; border-radius: 4px; background: rgba(255,255,255,.9); }
.dr-root.paused .dr-pause { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dr-root.paused .dr-slide { filter: saturate(.6) brightness(.8); transition: filter .3s; }
.dr-heart { position: absolute; z-index: 21; width: 110px; height: 110px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.dr-heart svg { width: 100%; height: 100%; fill: #ffd166; filter: drop-shadow(0 6px 24px rgba(255,209,102,.6)); }
.dr-toast { position: absolute; z-index: 22; left: 50%; top: calc(env(safe-area-inset-top) + 70px); transform: translateX(-50%); opacity: 0; pointer-events: none;
  background: rgba(255,255,255,.95); color: #0b1324; font-weight: 800; font-size: 13px; padding: 8px 14px; border-radius: 99px; white-space: nowrap; }

.dr-desk, .dr-keys { display: none; }
@media (min-width: 640px) and (min-aspect-ratio: 4/5) {
  .dr-desk { display: flex; flex-direction: column; gap: 12px; position: absolute; right: max(24px, calc(50% - 330px)); top: 50%; transform: translate(50%, -50%); }
  .dr-desk button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); cursor: pointer; display: grid; place-items: center; }
  .dr-desk button:hover { background: rgba(255,255,255,.18); }
  .dr-desk svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .dr-keys { display: block; position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.4); }
}

/* ── 템플릿: 공통 칩 ── */
.dr-chip { display: inline-block; padding: 8px 13px; border-radius: 99px; font-weight: 800; font-size: clamp(13px, 3.9cqw, 16px);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.dr-chip.float { animation: drFloat 3.2s ease-in-out infinite; }
@keyframes drFloat { 50% { translate: 0 -5px; } }

/* 분류 */
.dr-cloud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; overflow: visible; }
.dr-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.dr-bin { border-radius: 18px; padding: 10px; min-height: 22cqh; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.28); }
.dr-bin.b0 { border-color: hsl(var(--h) 90% 70% / .7); background: hsl(var(--h) 90% 60% / .1); }
.dr-bin.b1 { border-color: hsl(calc(var(--h) + 60) 90% 70% / .6); background: hsl(calc(var(--h) + 60) 90% 60% / .08); }
.dr-bin-h { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 14px; margin-bottom: 8px; }
.dr-bin-h .cnt { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: #fff; color: #0b1324; font-size: 12px; }
.dr-bin-in { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-bin-in .dr-chip { font-size: 12.5px; padding: 6px 10px; }
.dr-bin.b0 .dr-bin-in .dr-chip { background: hsl(var(--h) 90% 60% / .35); }

/* OX */
.dr-ox { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2cqh; }
.dr-oxb { aspect-ratio: 1 / .92; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.07); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .3s, border-color .3s; }
.dr-oxb svg { width: 52%; fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.dr-oxb span { font-weight: 800; font-size: 14px; color: rgba(255,255,255,.75); }
.dr-oxb.right { background: rgba(94,240,166,.16); border-color: var(--good); }
.dr-oxb.right svg { stroke: var(--good); filter: drop-shadow(0 0 14px rgba(94,240,166,.7)); }
.dr-oxb.picked:not(.right) { border-color: var(--bad); }
.dr-ex { font-size: clamp(14px, 4.3cqw, 18px); line-height: 1.5; font-weight: 600; opacity: 0; color: rgba(255,255,255,.88); }
.dr-ex.small { font-size: clamp(12.5px, 3.7cqw, 15px); line-height: 1.5; }
.dr-ex b { color: var(--acc); }
.dr-verdict { display: inline-block; font-weight: 900; color: var(--good); margin-right: 4px; }
.dr-slide.is-bad .dr-verdict { color: #ffd166; }

/* 4지선다 */
.dr-opts { display: flex; flex-direction: column; gap: 8px; }
.dr-opt { position: relative; overflow: hidden; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.07); font-weight: 700; font-size: clamp(14px, 4.3cqw, 18px); line-height: 1.35; cursor: pointer; }
.dr-opts.small .dr-opt { padding: 9px 12px; font-size: clamp(13px, 3.9cqw, 16px); }
.dr-opt .k { color: var(--acc); font-weight: 900; }
.dr-opt .t, .dr-opt .k { position: relative; z-index: 1; }
.dr-opt .fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(94,240,166,.35), rgba(94,240,166,.15)); clip-path: inset(0 100% 0 0); }
.dr-opt.right { border-color: var(--good); }
.dr-opt.right .k { color: var(--good); }
.dr-opt.picked:not(.right) { border-color: var(--bad); }
.dr-opt:active { transform: scale(.98); }

/* 공식 */
.dr-given { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-gv { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dr-gv i { font-style: italic; font-weight: 700; color: var(--acc); font-family: "Times New Roman", serif; font-size: 17px; }
.dr-gv b { font-size: 17px; }
.dr-gv small { color: rgba(255,255,255,.6); font-size: 12px; }
.dr-fbox { opacity: 0; margin-top: auto; padding: 16px; border-radius: 20px; background: rgba(5,8,18,.45); border: 1px solid rgba(255,255,255,.12); }
.dr-fline { display: flex; flex-wrap: wrap; gap: .22em; align-items: baseline; font-size: clamp(22px, 7.4cqw, 38px); font-weight: 800; perspective: 400px; line-height: 1.3; }
.dr-fline .tk { display: inline-block; transform-origin: 50% 60%; }
.dr-fline .op { color: rgba(255,255,255,.5); font-weight: 500; }
.dr-fline .var, .dr-fline .lhs { font-family: "Times New Roman", serif; font-style: italic; }
.dr-fline .var { color: var(--acc); }
.dr-fline .num { font-family: inherit; font-style: normal; color: #fff; background: hsl(var(--h) 90% 60% / .25); border-radius: 8px; padding: 0 .15em; }
.dr-fline:has(.tk:nth-child(9)) { font-size: clamp(17px, 5.4cqw, 28px); }
.dr-fline:has(.tk:nth-child(14)) { font-size: clamp(14px, 4.4cqw, 22px); }
.dr-fsteps { font-size: clamp(16px, 5cqw, 24px); font-weight: 700; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.dr-fstep { margin-top: 6px; }
.dr-fsteps .eq, .dr-fres .eq { color: rgba(255,255,255,.45); font-weight: 500; }
.dr-fres { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; opacity: 0; }
.dr-fres .v { font-size: clamp(44px, 16cqw, 84px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.dr-fres .u { font-size: clamp(22px, 7cqw, 36px); font-weight: 900; color: var(--acc); display: inline-block; }


/* 오도미터 */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo-c { position: relative; display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; }
.odo-s { display: flex; flex-direction: column; position: absolute; left: 0; top: 0; }
.odo-s span { display: block; height: 1.1em; line-height: 1.1em; }
.odo-g { visibility: hidden; display: inline-block; }
.odo-x { display: inline-block; }

/* 비교 */
.dr-cmp { display: flex; flex-direction: column; gap: 10px; }
.dr-cmp-h { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dr-cmp.c3 .dr-cmp-h, .dr-cmp.c3 .dcells { grid-template-columns: repeat(3, 1fr); }
.dr-cmp-h .col { padding: 12px 8px; border-radius: 14px; text-align: center; font-weight: 900; font-size: clamp(15px, 4.8cqw, 22px); }
.dr-cmp-h .k0 { background: hsl(var(--h) 90% 60% / .35); }
.dr-cmp-h .k1 { background: hsl(calc(var(--h) + 70) 90% 60% / .3); }
.dr-cmp-h .k2 { background: hsl(calc(var(--h) + 140) 80% 60% / .3); }
.dr-cmp-h .vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #0b1324; font-weight: 900; font-size: 13px; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.dr-cmp-r .lb { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-bottom: 4px; text-align: center; }
.dr-cmp-r .dcells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dr-cmp-r .dcell { padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); text-align: center;
  font-weight: 700; font-size: clamp(13px, 4cqw, 17px); line-height: 1.35; }
.dr-cmp.c3 .dcell { font-size: clamp(11.5px, 3.5cqw, 15px); padding: 8px 6px; }

/* 순서 */
.dr-seq { position: relative; display: flex; flex-direction: column; gap: 7px; padding-left: 4px; }
.dr-seq-line { position: absolute; left: 21px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--acc), var(--acc2)); transform-origin: 50% 0; transform: scaleY(0); }
.dr-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 8px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.09); font-weight: 800; font-size: clamp(14px, 4.4cqw, 18px); }
.dr-seq:has(.dr-tile:nth-of-type(6)) .dr-tile { padding-top: 6px; padding-bottom: 6px; font-size: clamp(13px, 4cqw, 16px); }
.dr-tile .no { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(255,255,255,.12); border: 1px dashed rgba(255,255,255,.35); }
.dr-tile.set { border-color: hsl(var(--h) 90% 70% / .7); }
.dr-tile.set .no { background: var(--acc); color: #0b1324; border: 0; }
.dr-tile.late .no { background: #ffd166; }

/* 빈칸 */
.dr-blank { font-size: clamp(20px, 6.6cqw, 34px); font-weight: 800; line-height: 1.6; letter-spacing: -.03em; }
.dr-blank.len-xl, .dr-blank.len-xxl { font-size: clamp(16px, 5cqw, 26px); }
.dr-blank .slot { position: relative; display: inline-block; padding: 0 .2em; margin: 0 .05em; border-radius: 8px; vertical-align: baseline;
  background: linear-gradient(90deg, hsl(var(--h) 90% 60% / .45), hsl(calc(var(--h) + 40) 90% 60% / .45)) no-repeat 0 0 / 0% 100%;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.55); }
.dr-blank .slot .ghost { visibility: hidden; }
.dr-blank .slot .val { position: absolute; left: .2em; top: 0; white-space: nowrap; color: #fff; }
.dr-blank .slot:not(.on) { animation: drShimmer 1.8s linear infinite; background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 200% 100%; }
@keyframes drShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* 숫자 */
.dr-nums { display: grid; gap: 12px; margin: auto 0; }
.dr-nums.n1 { grid-template-columns: minmax(0, 72cqw); justify-content: center; }
.dr-nums.n2 { grid-template-columns: 1fr 1fr; }
.dr-nums.n3 { grid-template-columns: 1fr 1fr 1fr; }
.dr-num { position: relative; text-align: center; }
.dr-num svg { width: 100%; transform: rotate(-90deg); }
.dr-num circle { fill: none; stroke-width: 5; }
.dr-num .trk { stroke: rgba(255,255,255,.1); }
.dr-num .arc { stroke: var(--acc); stroke-linecap: round; filter: drop-shadow(0 0 6px hsl(var(--h) 95% 65%)); }
.dr-num .mid { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 2px; }
.dr-num .v { font-weight: 900; letter-spacing: -.04em; font-size: clamp(30px, 13cqw, 70px); line-height: 1; }
.dr-nums.n2 .v { font-size: clamp(24px, 9cqw, 46px); }
.dr-nums.n3 .v { font-size: clamp(18px, 6.4cqw, 32px); }
.dr-num .u { font-weight: 800; color: var(--acc); font-size: clamp(14px, 4.4cqw, 22px); }
.dr-num .lb { margin-top: 6px; font-weight: 700; font-size: clamp(12px, 3.7cqw, 16px); color: rgba(255,255,255,.85); }


/* 눈금 */
.dr-scale { position: relative; flex: 1; display: flex; gap: 16px; min-height: 30cqh; max-height: 46cqh; }
.dr-sbar { position: relative; width: 16px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; transform-origin: 50% 100%; }
.dr-sbar .fill { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(0); border-radius: 10px;
  background: linear-gradient(0deg, hsl(var(--h) 90% 60%), hsl(calc(var(--h) - 60) 95% 60%)); box-shadow: 0 0 20px hsl(var(--h) 95% 60% / .6); }
.dr-t-scale.dr-slide[style*="--h:2"] .dr-sbar .fill { background: linear-gradient(0deg, #5ef0a6, #ffd166, #ff5a6e); }
.dr-smarks { position: relative; flex: 1; }
.dr-mark { position: absolute; left: 0; right: 0; transform: translateY(50%); display: flex; align-items: baseline; gap: 6px; opacity: .22; }
.dr-mark::before { content: ""; position: absolute; left: -24px; top: 50%; width: 14px; height: 2px; background: rgba(255,255,255,.4); }
.dr-mark .v { font-size: clamp(22px, 7.6cqw, 38px); font-weight: 900; letter-spacing: -.03em; }
.dr-mark .u { font-weight: 800; color: var(--acc); font-size: 14px; }
.dr-mark .nm { font-weight: 800; font-size: clamp(13px, 4cqw, 17px); margin-left: 4px; }
.dr-mark .nm small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); font-weight: 600; }
.dr-mark.on::before { background: #fff; }

/* 순위 막대 */
.dr-rank { display: flex; flex-direction: column; gap: 10px; margin-top: 1cqh; }
.dr-rank-l { height: 1.5em; overflow: hidden; font-weight: 900; font-size: clamp(16px, 5cqw, 22px); color: var(--acc); }
.dr-rank-l span { display: inline-block; }
.dr-rank-r .nm { font-weight: 800; font-size: clamp(14px, 4.4cqw, 18px); margin-bottom: 5px; }
.dr-rank-r .rbar { position: relative; height: 30px; border-radius: 10px; background: rgba(255,255,255,.08); }
.dr-rank-r .rbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: linear-gradient(90deg, hsl(var(--h) 90% 55%), hsl(calc(var(--h) + 40) 90% 65%)); }
.dr-rank-r.top .bar i { box-shadow: 0 0 22px hsl(var(--h) 95% 65% / .7); }
.dr-rank-r .pos { position: absolute; right: 8px; top: 50%; translate: 0 -50%; font-size: 13px; font-weight: 900; }

/* 짝 잇기 */
.dr-pairs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.dr-pairs .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dr-pairs .wire { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px hsl(var(--h) 95% 65%)); }
.dr-pairs .wdot { fill: #fff; }
.dr-pairs .col { display: flex; flex-direction: column; gap: 8px; }
.dr-pairs .it { padding: 10px 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid var(--line); font-weight: 800; font-size: clamp(12.5px, 3.8cqw, 16px); line-height: 1.3; min-height: 44px; display: flex; align-items: center; }
.dr-pairs .r .it { justify-content: flex-end; text-align: right; }
.dr-pairs .it.on { border-color: hsl(var(--h) 90% 70% / .8); background: hsl(var(--h) 90% 60% / .18); }

/* 카드 */
.dr-deck { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.dr-qn.ess { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.dr-scroll { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.dr-ess { max-height: 54cqh; border-radius: 20px; padding: 16px 16px 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: max-height .5s; }
.dr-ess.done { max-height: 24cqh; }
.dr-ess-q { font-size: 15px; line-height: 1.6; font-weight: 600; }
.dr-ess-q p { margin: 0 0 8px; }
.dr-ess-q pre, .dr-ess-a pre { margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.35); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.dr-ess-q code, .dr-ess-a code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dr-ess-q table, .dr-ess-a table { border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.dr-ess-q td, .dr-ess-q th, .dr-ess-a td, .dr-ess-a th { border: 1px solid rgba(255,255,255,.2); padding: 3px 7px; }
.dr-ess-q img, .dr-ess-a img { max-width: 100%; }
.dr-ess-tap { margin-top: 10px; text-align: center; font-size: 12px; color: rgba(255,255,255,.6); }
.dr-ess.done .dr-ess-tap { display: none; }
.dr-ess-a { max-height: 40cqh; border-radius: 20px; padding: 0 16px; font-size: 14px; line-height: 1.6; }
.dr-ess-a:not(:empty) { padding: 14px 16px; background: hsl(var(--h) 70% 40% / .32); border: 1px solid hsl(var(--h) 80% 70% / .35); }
.dr-ess-a .k { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: rgba(255,255,255,.6); margin: 8px 0 4px; }
.dr-ess-a .k:first-child { margin-top: 0; }
.dr-ess-a .k.warn { color: #ffb4a8; }
.dr-ess-a .v p, .dr-ess-a .trap p { margin: 0 0 6px; }
.dr-ess-a .kw { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-ess-a .kw span { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 800; }
.dr-ess-a .trap { color: #ffd9d2; font-size: 13px; }
.dr-relfig { align-self: center; margin-top: 4px; max-width: 100%; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.dr-sheet { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(4,8,18,.55); }
.dr-sheet-in { width: 100%; max-height: 88%; overflow: auto; background: #0e1525; color: #fff; border-radius: 20px 20px 0 0; border-top: 1px solid rgba(255,255,255,.14); padding: 14px 14px 22px; }
.dr-sheet-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dr-sheet-hd b { flex: 1; font-size: 14px; line-height: 1.35; }
.dr-sheet-hd .x { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.dr-card { flex: 1; max-height: 56cqh; perspective: 1200px; }
.dr-card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.dr-card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; padding: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px; border: 1px solid rgba(255,255,255,.2); }
.dr-card .f { background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dr-card .b { transform: rotateY(180deg); background: linear-gradient(160deg, hsl(var(--h) 80% 45% / .75), hsl(calc(var(--h) + 50) 80% 40% / .6)); }
.dr-card .lbl { position: absolute; top: 16px; left: 20px; font-size: 13px; font-weight: 900; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.dr-card .tx { font-weight: 800; letter-spacing: -.03em; line-height: 1.3; font-size: clamp(22px, 7.4cqw, 38px); }
.dr-card .tx.len-l { font-size: clamp(19px, 6.2cqw, 32px); }
.dr-card .tx.len-xl, .dr-card .tx.len-xxl { font-size: clamp(16px, 5cqw, 26px); }
.dr-card .x { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.dr-card .tap { position: absolute; bottom: 16px; left: 20px; right: 20px; font-size: 12px; color: rgba(255,255,255,.5); font-weight: 700; }

/* 그림 */
.dr-fig { flex: 1 1 0; min-height: 90px; display: flex; align-items: center; justify-content: center; opacity: 0; }
.dr-svg { width: 100%; height: 100%; overflow: visible; }
.dr-svg text { fill: #fff; font-family: inherit; font-weight: 800; }
.dr-svg .lbl { font-size: 12px; }
.dr-svg .sm { font-size: 11px; fill: rgba(255,255,255,.75); }
.dr-svg .xs { font-size: 9.5px; fill: rgba(255,255,255,.85); }
.dr-svg .big { font-size: 22px; font-weight: 900; fill: rgba(255,255,255,.9); }
.dr-svg .val { font-size: 18px; font-weight: 900; fill: var(--acc); }
.dr-svg .val2 { font-size: 13px; font-weight: 900; fill: var(--acc2); }
.dr-svg .warn, .dr-svg .warnT { font-size: 14px; font-weight: 900; fill: #ff8a5c; }
.dr-svg .okT { font-size: 14px; font-weight: 900; fill: var(--good); }
.dr-svg .nreg { fill: rgba(110,160,255,.28); stroke: rgba(140,180,255,.6); }
.dr-svg .preg { fill: rgba(255,110,140,.24); stroke: rgba(255,140,160,.55); }
.dr-svg .dep { fill: rgba(255,255,255,.1); }
.dr-svg .grid { fill: #cfd8ea; }
.dr-svg .photon { fill: none; stroke: #ffd166; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px #ffd166); }
.dr-svg .e { fill: #7fb0ff; } .dr-svg .h { fill: #ff7a8a; }
.dr-svg .wire2, .dr-svg .dwire, .dr-svg .leg { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2; }
.dr-svg .load { fill: rgba(255,255,255,.1); stroke: #fff; stroke-width: 1.5; transition: fill .4s; }
.dr-svg .load.on { fill: #ffd166; filter: drop-shadow(0 0 12px #ffd166); }
.dr-svg .wire2[style*="dasharray: 6"] { stroke: #ffd166; }
.dr-svg .ground { stroke: rgba(255,255,255,.5); stroke-width: 2; }
.dr-svg .orbit { fill: none; stroke: rgba(255,255,255,.25); stroke-dasharray: 3 5; }
.dr-svg .obs { fill: #fff; }
.dr-svg .ray { stroke: #ffd166; stroke-width: 1.5; stroke-dasharray: 4 4; }
.dr-svg .ang { fill: none; stroke: var(--acc); stroke-width: 3; }
.dr-svg .sunc { fill: #ffd166; filter: drop-shadow(0 0 10px #ffb84d); }
.dr-svg .sunr { stroke: #ffd166; stroke-width: 2; stroke-linecap: round; }
.dr-svg .panel { stroke: var(--acc); stroke-width: 5; stroke-linecap: round; }
.dr-svg .shade { fill: rgba(0,0,0,.45); }
.dr-svg .dim { fill: none; stroke: var(--acc2); stroke-width: 2; }
.dr-svg .axis { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.dr-svg .curve { fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px hsl(var(--h) 95% 60%)); }
.dr-svg .curve2 { fill: none; stroke: #ffd166; stroke-width: 2; stroke-dasharray: 5 4; }
.dr-svg .guide { fill: none; stroke: rgba(255,255,255,.4); stroke-dasharray: 3 3; }
.dr-svg .mpp { fill: #fff; stroke: var(--acc); stroke-width: 3; }
.dr-svg .thb { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.4); }
.dr-svg .thf { fill: #7fb0ff; transition: fill .6s; }
.dr-svg .thf.hot { fill: #ff5a6e; }
.dr-svg .pcell { fill: rgba(80,120,220,.4); stroke: rgba(160,190,255,.6); transition: fill .6s; }
.dr-svg .shaded .pcell { fill: rgba(30,40,60,.85); }
.dr-svg .cg { stroke: rgba(200,220,255,.25); }
.dr-svg .diode { fill: rgba(255,255,255,.2); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; transition: .4s; }
.dr-svg .on .diode { fill: var(--good); stroke: var(--good); filter: drop-shadow(0 0 8px var(--good)); }
.dr-svg .flowp, .dr-svg .flowc { fill: none; stroke: #ffd166; stroke-width: 3; stroke-linecap: round; }
.dr-svg .flowb { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; }
.dr-svg .leaf { fill: #4caf50; stroke: #2e7d32; stroke-width: 1; }
.dr-svg .hot { fill: radial-gradient(#f00, transparent); fill: rgba(255,90,60,.55); filter: blur(6px); }
.dr-svg .ibox { fill: rgba(255,255,255,.1); stroke: var(--acc); stroke-width: 2; }
.dr-svg .dc { fill: none; stroke: #7fb0ff; stroke-width: 4; stroke-linecap: round; }
.dr-svg .ac { fill: none; stroke: var(--acc2); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 5px hsl(calc(var(--h) + 40) 95% 65%)); }
.dr-svg .chipr { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.35); }
.dr-svg .rms { stroke: var(--acc2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dr-svg .pk { stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dr-svg .phase { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dr-svg .lineV { stroke: var(--acc2); stroke-width: 4; stroke-linecap: round; }
.dr-svg .lineI { fill: none; stroke: var(--acc2); stroke-width: 4; }
.dr-caps { display: flex; flex-direction: column; gap: 6px; }
.dr-caps .cap { display: flex; gap: 8px; align-items: flex-start; opacity: 0; font-weight: 700; font-size: clamp(13px, 4cqw, 17px); line-height: 1.35; color: rgba(255,255,255,.55); transition: color .4s; }
.dr-caps .cap .n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255,255,255,.14); }
.dr-caps .cap.cur { color: #fff; }
.dr-caps .cap.cur .n { background: var(--acc); color: #0b1324; }

/* 직렬·병렬 */
.dr-sp { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dr-sp .mods { display: flex; gap: 10px; justify-content: center; }
.dr-sp .mods.series { flex-direction: row; }
.dr-sp .mods.parallel { flex-direction: column; gap: 6px; }
.dr-sp .mod { width: 17cqw; max-width: 90px; aspect-ratio: 1 / 1.3; border-radius: 8px; background: rgba(80,120,220,.35); border: 1.5px solid rgba(160,190,255,.6);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 4px; position: relative; transition: background .3s, box-shadow .3s; }
.dr-sp .parallel .mod { aspect-ratio: auto; width: 46cqw; max-width: 220px; height: 32px; flex-direction: row; align-items: center; }
.dr-sp .mod i { position: absolute; inset: 4px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.12) 8px 9px), repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.12) 8px 9px); }
.dr-sp .mod span { position: relative; font-size: 9.5px; font-weight: 800; }
.dr-sp .mod.on { background: hsl(var(--h) 90% 55% / .6); box-shadow: 0 0 20px hsl(var(--h) 95% 60% / .7); }
.dr-sp .meter { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.8); }
.dr-sp .meter b { display: inline-block; font-size: 28px; font-weight: 900; color: #fff; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.dr-sp .meter .u { color: var(--acc); font-weight: 900; }

/* 장 표지 */
.dr-intro { margin: auto 0; display: flex; flex-direction: column; gap: 10px; }
.dr-intro-part { font-size: 12px; letter-spacing: .24em; font-weight: 800; color: var(--acc); }
.dr-intro-num { display: flex; align-items: baseline; gap: 4px; font-weight: 900; line-height: .9; }
.dr-intro-num .n { font-size: clamp(90px, 38cqw, 200px); letter-spacing: -.06em;
  background: linear-gradient(180deg, #fff, hsl(var(--h) 90% 70%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dr-intro-num .n .odo-s span { color: #fff; }
.dr-intro-num .u { font-size: clamp(28px, 10cqw, 52px); color: rgba(255,255,255,.7); }
.dr-intro-line { height: 3px; width: 40%; background: linear-gradient(90deg, var(--acc), transparent); transform-origin: 0 50%; }
.dr-intro-title { font-size: clamp(28px, 10cqw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1.12; }
.dr-intro-meta { font-weight: 700; color: rgba(255,255,255,.7); }
.dr-intro-mix { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-intro-mix .dchip, .drl-type { --c: 218; }
.dr-intro-mix .dchip { color: #fff; padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: hsl(var(--c) 80% 60% / .22); border: 1px solid hsl(var(--c) 80% 70% / .45); }
.t-concept { --c: 210 !important; } .t-question { --c: 150 !important; } .t-formula { --c: 275 !important; } .t-memory { --c: 40 !important; } .t-wrong { --c: 352 !important; }
.dr-intro-flow { display: flex; align-items: center; gap: 6px; margin-top: 3cqh; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); }
.dr-intro-flow i { flex: 1; height: 1px; background: rgba(255,255,255,.3); max-width: 30px; }

/* 끝 화면 */
.dr-end { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.dr-end .ring { position: relative; width: min(56cqw, 260px); }
.dr-end .ring svg { width: 100%; transform: rotate(-90deg); }
.dr-end .ring circle { fill: none; stroke-width: 10; }
.dr-end .ring .trk { stroke: rgba(255,255,255,.1); }
.dr-end .ring .arc { stroke: #ffd166; stroke-dasharray: 553; stroke-linecap: round; filter: drop-shadow(0 0 10px #ffd166); }
.dr-end .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dr-end .mid .v { font-size: clamp(54px, 20cqw, 96px); font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.dr-end .mid .u { font-weight: 800; color: rgba(255,255,255,.7); font-size: 14px; }
.dr-end .ttl { font-size: clamp(18px, 5.8cqw, 26px); font-weight: 800; letter-spacing: -.03em; }
.dr-end .ttl b { color: #ffd166; }
.dr-end .rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.dr-end .rows > div { padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.08); }
.dr-end .rows b { display: block; font-size: 22px; font-weight: 900; }
.dr-end .rows b.ok { color: var(--good); } .dr-end .rows b.bad { color: #ffd166; }
.dr-end .rows span { font-size: 11.5px; color: rgba(255,255,255,.65); font-weight: 700; }
.dr-end .acts { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dr-btn { display: block; padding: 13px; border-radius: 99px; font-weight: 800; text-align: center; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid var(--line); }
.dr-btn.main { background: #fff; color: #0b1324; }
.dr-btn.ghost { background: none; }
.dr-btn:hover { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .dr-blob, .dr-chip.float, .dr-next, .dr-blank .slot, .dr-badge.wrong { animation: none !important; }
}

/* ════════ 런처 (사이트 안, 라이트·다크 공통) ════════ */
.drl { display: flex; flex-direction: column; gap: 18px; }
.drl-hero { --h: 218; position: relative; overflow: hidden; border-radius: 20px; background: #070a14; color: #fff; container-type: inline-size;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 28px; min-height: 340px; }
.drl-hero .dr-blob { filter: blur(50px); }
.drl-hero .dr-blob.a { width: 60cqw; height: 60cqw; top: -30cqw; }
.drl-hero .dr-blob.b { width: 50cqw; height: 50cqw; top: 10cqw; }
.drl-hero .dr-blob.c { width: 40cqw; height: 40cqw; bottom: -30cqw; }
.drl-bg { position: absolute; inset: 0; }
.drl-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.drl-kick { font-size: 11.5px; letter-spacing: .2em; font-weight: 800; color: hsl(var(--h) 95% 75%); }
.drl-logo { margin: 0; font-size: clamp(64px, 16vw, 120px); line-height: .9; font-weight: 900; letter-spacing: -.06em; display: flex; overflow: hidden; padding-bottom: .06em; }
.drl-logo span { display: inline-block; }
.drl-logo em { font-style: normal; color: hsl(var(--h) 95% 65%); display: inline-block; }
.drl-slogan { margin: 0; font-size: clamp(17px, 2.6vw, 22px); font-weight: 600; color: rgba(255,255,255,.8); }
.drl-slogan b { color: #fff; font-weight: 900; }
.drl-today { display: flex; align-items: center; gap: 12px; }
.drl-today svg { width: 52px; height: 52px; transform: rotate(-90deg); flex: none; }
.drl-today circle { fill: none; stroke-width: 5; }
.drl-today .trk { stroke: rgba(255,255,255,.15); }
.drl-today .arc { stroke: #ffd166; stroke-dasharray: 163.4; stroke-linecap: round; }
.drl-today b { display: block; font-size: 16px; }
.drl-today span { font-size: 13px; color: rgba(255,255,255,.65); }
.drl-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.drl-cta a { text-decoration: none; border-radius: 16px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; }
.drl-cta a:hover { text-decoration: none; transform: translateY(-1px); }
.drl-go { background: #fff; color: #0b1324; box-shadow: 0 10px 40px hsl(var(--h) 90% 60% / .45); }
.drl-go .pl { width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h) 90% 55%); color: #fff; display: grid; place-items: center; font-size: 14px; }
.drl-go b, .drl-today-btn b { display: block; font-size: 16px; }
.drl-go small, .drl-today-btn small { display: block; font-size: 12px; opacity: .7; font-weight: 600; }
.drl-today-btn { flex-direction: column; align-items: flex-start !important; gap: 0 !important; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
/* 미니 폰 데모 */
.drl-demo { position: relative; z-index: 1; width: 190px; aspect-ratio: 9 / 16; border-radius: 26px; padding: 6px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.5); align-self: center; transform: rotate(3deg); }
.drl-demo .scr { position: relative; height: 100%; border-radius: 21px; overflow: hidden; padding: 14px 12px; background: radial-gradient(120% 70% at 20% 10%, hsl(var(--h) 80% 35%), #070a14 70%);
  display: flex; flex-direction: column; gap: 8px; font-weight: 800; }
.drl-demo .sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.drl-demo .sg i { height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.drl-demo .sg i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; animation: drlSeg 8s linear infinite; }
.drl-demo .sg i:nth-child(2)::after { animation-name: drlSeg2; } .drl-demo .sg i:nth-child(3)::after { animation-name: drlSeg3; } .drl-demo .sg i:nth-child(4)::after { animation-name: drlSeg4; }
@keyframes drlSeg { 0% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
@keyframes drlSeg2 { 0%, 20% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes drlSeg3 { 0%, 40% { transform: scaleX(0); } 65%, 100% { transform: scaleX(1); } }
@keyframes drlSeg4 { 0%, 65% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
.drl-demo .k { margin-top: 12px; font-size: 8px; letter-spacing: .14em; color: hsl(var(--h) 95% 75%); }
.drl-demo .q { font-size: 15px; line-height: 1.25; letter-spacing: -.03em; animation: drlQ 8s infinite; }
.drl-demo .f { margin-top: auto; font-size: 20px; font-family: "Times New Roman", serif; font-style: italic; animation: drlF 8s infinite; }
.drl-demo .f .v { color: hsl(var(--h) 95% 72%); }
.drl-demo .a { font-size: 48px; font-weight: 900; letter-spacing: -.04em; line-height: 1; animation: drlA 8s infinite; }
.drl-demo .a small { font-size: 22px; color: hsl(var(--h) 95% 72%); margin-left: 2px; }
.drl-demo .nx { margin-top: 10px; text-align: center; font-size: 9px; color: rgba(255,255,255,.7); animation: drlA 8s infinite; }
@keyframes drlQ { 0% { opacity: 0; transform: translateY(12px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes drlF { 0%, 38% { opacity: 0; transform: translateY(10px); filter: blur(6px); } 46%, 92% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; } }
@keyframes drlA { 0%, 62% { opacity: 0; transform: scale(1.8); } 68% { opacity: 1; transform: scale(.94); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 640px) {
  .drl-hero { grid-template-columns: 1fr; padding: 22px 18px; }
  .drl-demo { display: none; }
  .drl-cta a { flex: 1 1 100%; }
}
.drl-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .drl-quick { grid-template-columns: 1fr 1fr; } }
.drl-quick a, .drl-type, .drl-ch { text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: transform .2s, border-color .2s; }
.drl-quick a:hover, .drl-type:hover, .drl-ch:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.drl-quick a { padding: 14px; }
.drl-quick b { display: block; }
.drl-quick small, .drl-type small { color: var(--muted); font-size: 12.5px; }
.drl-quick a.off, .drl-type.off { opacity: .45; pointer-events: none; }
.drl-h { margin: 10px 0 0; font-size: 18px; }
.drl-h small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.drl-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .drl-types { grid-template-columns: 1fr 1fr; } }
.drl-type { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid hsl(var(--c) 75% 55%); }
.drl-type .en { font-size: 10px; letter-spacing: .14em; font-weight: 800; color: hsl(var(--c) 70% 45%); }
.drl-chs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) { .drl-chs { grid-template-columns: 1fr; } }
.drl-ch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.drl-ch .no { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 75% 50%), hsl(calc(var(--h) + 40) 75% 45%)); }
.drl-ch .tt { flex: 1; min-width: 0; }
.drl-ch .tt b { display: block; }
.drl-ch .tt small { color: var(--muted); font-size: 12px; }
.drl-ch .dbar { display: block; height: 4px; border-radius: 4px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.drl-ch .dbar i { display: block; height: 100%; background: hsl(var(--h) 75% 50%); }
.drl-ch .pc { font-size: 13px; font-weight: 800; color: var(--muted); }
.drl-ch.full .pc { color: var(--good); }
.drl-ch .go { color: var(--muted); font-size: 12px; }
.drl-how ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; margin: 10px 0; list-style: none; counter-reset: s; }
@media (max-width: 640px) { .drl-how ol { grid-template-columns: 1fr 1fr; } }
.drl-how li { counter-increment: s; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.drl-how li::before { content: counter(s, decimal-leading-zero); font-weight: 900; color: var(--accent); font-size: 12px; }
.drl-how li b { display: block; }
.drl-how li span { font-size: 13px; color: var(--muted); }
.drl-how p { font-size: 13.5px; }

/* 사이트 서브탭의 Drill 강조 */
.subtabs a.sub-drill { font-weight: 900; letter-spacing: -.01em; color: var(--text); }
.subtabs a.sub-drill::before { content: "▶"; font-size: 9px; margin-right: 5px; color: var(--accent); vertical-align: 1px; }
.subtabs a.sub-drill.on { color: var(--ink-text); }
.subtabs a.sub-drill.on::before { color: inherit; }

.dr-t-intro .dr-rail [data-act="save"], .dr-t-intro .dr-rail [data-act="replay"] { display: none; }
.subtabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subtabs a { white-space: nowrap; }
.dr-fres.zap .u, .dr-num.zap .u { text-shadow: 0 0 18px hsl(var(--h) 95% 65%); }
.dr-num.zap .arc { stroke-width: 7; transition: stroke-width .4s; }

/* ════════ 그림 Drill (assets/viz 그림을 세로 화면에) ════════ */
.dr-root {
  --vz-ink: #eef3fb; --vz-muted: #a9b8d2; --vz-line: #3a4866; --vz-soft: rgba(255,255,255,.08); --vz-bg: rgba(8,12,24,.55);
  --vz-sun: #ffc94d; --vz-dc: #ff9a4a; --vz-ac: #5ee09a; --vz-e: #7fb0ff; --vz-h: #ff7d73;
  --vz-panel: #3a5f99; --vz-panel2: #7fa3df; --vz-n: rgba(110,160,255,.22); --vz-p: rgba(255,120,110,.2); --vz-warn: #ff7d73; --vz-ok: #5ee09a;
  --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.12); --border: rgba(255,255,255,.18);
  --text: #fff; --muted: rgba(255,255,255,.72); --ink: #fff; --ink-text: #0b1324; --accent: hsl(var(--h) 95% 70%);
}
.dr-t-figure .dr-body { padding-right: max(16px, 5.5cqw); bottom: 128px; }
.dr-t-figure .dr-stage { gap: 1.4cqh; }
.dr-fhead { padding-right: max(48px, 12cqw); }
.dr-ftitle { font-size: clamp(22px, 7.2cqw, 38px); }
.dr-ftitle.len-l, .dr-ftitle.len-xl { font-size: clamp(19px, 6cqw, 32px); }
.dr-fsub { margin-top: 4px; font-size: clamp(13px, 4cqw, 18px); font-weight: 700; color: var(--acc); letter-spacing: -.02em; }
.dr-viz { flex: 1 1 0; min-height: 0; opacity: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  border-radius: 22px; background: rgba(6,10,22,.42); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dr-viz .viz { min-height: 0; display: flex; flex-direction: column; max-height: 100%; }
.dr-viz .vz { margin: 0 !important; width: auto !important; border: 0; background: none; border-radius: 0; display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.dr-viz .vz-head, .dr-viz .vz-cap, .dr-viz .vz-play { display: none; }
.dr-viz .vz-stage { padding: 6px 8px; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.dr-viz .vz-svg { --vz-fs: 1.3; width: 100%; max-width: none !important; max-height: 100%; height: auto; flex: 0 1 auto; min-height: 0; }
.dr-viz .vz-ctrl { padding: 2px 12px 10px; gap: 8px 14px; }
.dr-viz .vz-slider { font-size: 12.5px; flex-basis: 140px; }
.dr-viz .vz-slider input[type=range] { accent-color: var(--acc); }
.dr-viz .vz-seg { border-color: rgba(255,255,255,.2); border-radius: 99px; }
.dr-viz .vz-seg button { font-size: 12.5px; padding: 5px 11px; color: rgba(255,255,255,.75); }
.dr-viz .vz-seg button.on { background: #fff; color: #0b1324; }
.dr-viz .vz-readout { font-size: 11.5px; gap: 2px 10px; color: rgba(255,255,255,.85); }
.dr-viz .vz-readout span { white-space: normal; }
.dr-viz .vz-readout b { color: #fff; }
/* 만화: 한 컷씩 크게 */
.dr-viz.k-comic .vz-comic { display: block !important; }
.dr-viz.k-comic .vz-panel { display: none; border: 0; background: none; padding: 4px 10px; }
.dr-viz.k-comic .vz-panel.cur { display: flex; }
.dr-viz.k-comic .vz-panel .vz-svg { max-height: 34cqh; --vz-fs: 1.15; }
.dr-viz.k-comic .vz-bubble { display: none; }
.dr-viz.k-comic .vz-pno { position: static; width: auto; height: auto; padding: 2px 10px; border-radius: 99px; background: var(--acc); color: #0b1324; align-self: flex-start; font-size: 12px; }
.dr-viz.k-comic .vz-pcap { font-size: clamp(14px, 4.4cqw, 19px); font-weight: 800; color: #fff; text-align: center; }
.dr-viz.k-comic .vz-pcap b { color: var(--acc); }
/* 자막 */
.dr-subs { position: relative; flex: none; min-height: 16cqh; margin-right: max(48px, 12cqw); display: flex; flex-direction: column; justify-content: flex-start; }
.dr-subs .sub { position: absolute; left: 0; right: 0; top: 0; font-weight: 800; letter-spacing: -.025em; line-height: 1.42;
  font-size: clamp(16px, 5cqw, 23px); text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.dr-subs .sub.len-xl { font-size: clamp(14.5px, 4.4cqw, 20px); }
.dr-subs .sub.len-xxl { font-size: clamp(13.5px, 4cqw, 18px); line-height: 1.45; }
.dr-subs .sub b { color: #fff; background: linear-gradient(transparent 60%, hsl(var(--h) 95% 60% / .65) 60%) no-repeat 0 100% / 0% 40%; }
.dr-keys2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dr-keys2 .lb { width: 100%; font-size: 10.5px; letter-spacing: .2em; font-weight: 800; color: var(--acc); }
.dr-keys2 .kw { padding: 6px 11px; border-radius: 99px; font-weight: 800; font-size: 13.5px; background: hsl(var(--h) 90% 60% / .22); border: 1px solid hsl(var(--h) 90% 70% / .5); }
.dr-keys2 .try { width: 100%; margin-top: 4px; font-size: 13px; font-weight: 700; color: #ffd166; }
.dr-slide.touched .dr-keys2 .try { display: none; }
/* 12장 전압 구분 그림 */
.dr-svg .vseg.low { fill: hsl(150 70% 45% / .55); } .dr-svg .vseg.mid { fill: hsl(40 90% 55% / .6); } .dr-svg .vseg.hi { fill: hsl(355 85% 60% / .6); }
.dr-svg .vhl { fill: none; stroke: #ffd166; stroke-width: 2; stroke-dasharray: 5 4; }
.drl-type.t-visual { --c: 190 !important; }
.t-visual { --c: 190 !important; }

/* 오류 신고 */
.dr-report { pointer-events: auto; flex: none; margin-right: 8px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: 12px; cursor: pointer; }
.dr-sheet-report .report-form { margin: 0; border: 0; padding: 4px 2px; background: transparent; color: #fff; }
.dr-sheet-report .report-form .muted { color: rgba(255,255,255,.65); }
.dr-sheet-report .report-form a { color: #9fc0ff; }
.dr-sheet-report textarea.answer, .dr-sheet-report .report-contact { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.22); }
.dr-sheet-report .report-kinds .chip { background: transparent; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.25); }
.dr-sheet-report .report-kinds .chip.on { background: rgba(143,179,255,.2); border-color: #8fb3ff; color: #cfe0ff; }
.dr-sheet-report .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); }