/* 문제 유형 8개 (qtypes.js). 색·둥글기·눌림·빛남은 테마 변수만 씀 (themes/a.css 오니기리 · b.css 네온).
   :where(...) 규칙 = 앱(app/index.html)·테마에 같은 이름(.btn .opt .card .spk .tag .skip)이 있으면 그쪽이 이김 → 앱과 같은 모양.
   앱 밖(qtypes.demo.html)에서는 이 값이 보이고, 값은 app/index.html 과 같게 맞춤. */
:where(.qt button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
:where(.qt h3) { font-size: 22px; margin: 6px 0 16px; }
:where(.qt .tag) { display: inline-block; margin-top: 22px; color: var(--p); font-weight: 800; font-size: 14px; }
:where(.qt .btn) { display: block; width: 100%; text-align: center; font: 800 18px/1 inherit; font-family: inherit; padding: 16px; border-radius: var(--rad, 16px); border: 0; color: #fff; background: var(--g); box-shadow: 0 5px 0 var(--gd); cursor: pointer; transition: transform .08s, box-shadow .08s; }
:where(.qt .btn:active, .qt .opt:active) { transform: translateY(var(--press)); box-shadow: 0 1px 0 var(--gd); }
:where(.qt .btn:disabled) { background: var(--line); color: var(--mute); box-shadow: 0 5px 0 var(--lined); cursor: default; transform: none; }
:where(.qt .skip) { flex: none; border: 2px solid var(--line); border-radius: var(--rad, 16px); box-shadow: 0 5px 0 var(--line); padding: 0 14px; font-weight: 800; font-size: 15px; color: var(--mute); }
:where(.qt .card) { position: relative; border: 2px solid var(--line); border-radius: var(--rad-l, 20px); display: grid; place-items: center; background: var(--card); }
:where(.qt .kana) { line-height: 1.1; font-weight: 600; text-align: center; padding: 0 16px; animation: qt-drop .4s cubic-bezier(.3,1.6,.6,1) both; }
:where(.qt .spk) { position: relative; flex: none; width: 48px; height: 48px; border-radius: var(--rad-s, 12px); background: var(--b); box-shadow: 0 4px 0 var(--bd); display: grid; place-items: center; font-size: 22px; }
:where(.qt .spk)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid var(--b); animation: qt-ring 1.4s ease-out infinite; }
:where(.qt .spk:active) { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--bd); }
:where(.qt .spk.big) { width: 104px; height: 104px; border-radius: 28px; font-size: 48px; box-shadow: 0 6px 0 var(--bd); animation: qt-drop .4s cubic-bezier(.3,1.6,.6,1) both; }
:where(.qt .say) { position: absolute; bottom: 14px; font-size: 13px; font-weight: 700; color: var(--mute); }
:where(.qt .opts) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
:where(.qt .opts.one) { grid-template-columns: 1fr; gap: 10px; }
:where(.qt .opt) { border: 2px solid var(--line); border-radius: var(--rad, 16px); box-shadow: 0 4px 0 var(--line); padding: 14px 8px; text-align: center; font-size: 26px; font-weight: 800; background: var(--bg); transition: transform .08s, box-shadow .08s; }
:where(.qt .opts.one .opt) { font-size: 17px; padding: 13px 8px; }
:where(.qt .opt.sel) { border-color: var(--sel); background: var(--selbg); color: var(--bd); box-shadow: 0 4px 0 var(--sel); }
:where(.qt .opt:disabled) { cursor: default; }

/* 틀: 확인·건너뛰기는 아래에 붙고, 내용이 길면 밀려 내려감(겹치지 않음) */
.qt { display: flex; flex-direction: column; min-height: calc(100vh - 72px); }
.qt-foot { margin-top: auto; padding-top: 24px; padding-bottom: 8px; display: flex; gap: 12px; }
.qt-foot .btn { flex: 1; }
.qt-foot .skip { min-height: 52px; }
.qt[data-t=match] .qt-foot .skip { margin-left: auto; }
.qt.ok .qt-foot, .qt.ng .qt-foot, .qt.off .qt-foot { visibility: hidden; }
.qt .card { height: auto; min-height: 150px; padding: 20px 16px; }
.qt .card.row { display: flex; align-items: center; gap: 14px; min-height: 0; place-items: initial; }
.qt .card .spk { position: relative; left: auto; top: auto; }
.qt .sent { font-size: 22px; font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
.qt .card .spk.big { margin-bottom: 26px; }

/* 힌트: 외국어 낱말 점선 밑줄, 누르면(마우스는 올리면) 뜻 */
.qt .hw { position: relative; font-weight: inherit; border-bottom: 2px dashed var(--mute); line-height: 1.3; }
.qt .hw::after { content: attr(data-h); display: none; position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg); color: var(--ink); border: 2px solid var(--line); border-radius: var(--rad-s, 12px); box-shadow: 0 4px 0 var(--line), 0 0 var(--glow) var(--sel); padding: 6px 10px; font-size: 15px; font-weight: 700; line-height: 1.3; animation: qt-pop .25s both; }
.qt .hw.r::after { left: auto; right: 0; }
.qt .hw.on { border-bottom-color: var(--b); color: var(--bd); }
.qt .hw.on::after { display: block; }
@media (hover: hover) { .qt .hw:hover::after { display: block; } }

/* 고르기: pic 그림 3칸, kana·fill 3칸 */
.qt .opts.pics, .qt .opts.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qt .pics .opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 4px 12px; font-size: 16px; overflow-wrap: anywhere; }
.qt .pics .pic { font-size: 52px; line-height: 1; }
.qt .three .opt { font-size: 22px; padding: 14px 4px; overflow-wrap: anywhere; }

/* 대화 */
.qt .chat { display: grid; gap: 14px; }
.qt .ca, .qt .cb { display: flex; align-items: flex-end; gap: 8px; }
.qt .cb { justify-content: flex-end; }
.qt .who { flex: none; font-size: 34px; line-height: 1; }
.qt .bubl { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 84%; border: 2px solid var(--line); border-radius: var(--rad, 16px); padding: 10px 14px; background: var(--card); }
.qt .bubl .sent { font-size: 19px; }
.qt .me { min-width: 96px; min-height: 52px; justify-content: center; border-style: dashed; color: var(--mute); font-size: 17px; font-weight: 800; }
.qt .me.on { border-style: solid; border-color: var(--sel); background: var(--selbg); color: var(--bd); animation: qt-pop .3s both; }

/* 빈칸 */
.qt .fillc { min-height: 120px; text-align: center; }
.qt .blank { display: inline-block; min-width: 2.4em; margin: 0 4px; border-bottom: 3px solid var(--mute); text-align: center; color: var(--bd); }
.qt .blank.on { border-bottom-color: var(--sel); animation: qt-pop .3s both; }
.qt.ok .blank { color: var(--gd); border-bottom-color: var(--g); } .qt.ng .blank { color: var(--rd); border-bottom-color: var(--r); }

/* 단어 버튼: 위 줄(만든 문장) + 아래 단어 모음 */
.qt .line { min-height: 106px; margin-top: 18px; padding: 4px 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; background: repeating-linear-gradient(transparent 0 50px, var(--line) 50px 52px); }
.qt .bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.qt .tile { border: 2px solid var(--line); border-radius: var(--rad-s, 12px); box-shadow: 0 3px 0 var(--line); background: var(--card); padding: 8px 12px; font-size: 17px; font-weight: 700; line-height: 1.3; transition: transform .08s; }
.qt .tile:active { transform: translateY(calc(var(--press) / 2)); }
.qt .line .tile { animation: qt-pop .25s cubic-bezier(.3,1.8,.5,1) both; }
.qt .bank .tile.used { background: var(--line); border-color: transparent; color: transparent; box-shadow: none; }
.qt.ok .line .tile { border-color: var(--g); color: var(--gd); box-shadow: 0 3px 0 var(--g), 0 0 var(--glow) var(--g); }
.qt.ng .line { animation: qt-shake .5s ease-in-out both; } .qt.ng .line .tile { border-color: var(--r); color: var(--rd); box-shadow: 0 3px 0 var(--r); }
.qt .nolisten { display: block; margin: 18px auto 0; color: var(--bd); font-weight: 800; font-size: 14px; }

/* 짝 맞추기 */
.qt .mcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qt .mcols > div { display: grid; gap: 10px; }
.qt .mt { font-size: 18px; padding: 14px 6px; min-height: 58px; overflow-wrap: anywhere; }
.qt .mt.hit { border-color: var(--g); background: var(--okbg); color: var(--gd); box-shadow: 0 4px 0 var(--g), 0 0 var(--glow) var(--g); animation: qt-pop .4s cubic-bezier(.3,1.8,.5,1) both; }
.qt .mt.gone { opacity: .3; box-shadow: none; transition: opacity .3s; }
.qt .mt.miss { border-color: var(--r); background: var(--ngbg); color: var(--rd); box-shadow: 0 4px 0 var(--r); animation: qt-shake .45s ease-in-out both; }

/* 확인 뒤: 고른 것 초록 튀어오름 / 빨강 흔들림 + 정답 초록 테두리 (앱 #quiz.ok·ng 과 같은 모양) */
.qt.ok .opt.sel { border-color: var(--g); background: var(--okbg); color: var(--gd); box-shadow: 0 4px 0 var(--g), 0 0 var(--glow) var(--g); animation: qt-pop .45s cubic-bezier(.3,1.8,.5,1) both; }
.qt.ng .opt.sel { border-color: var(--r); background: var(--ngbg); color: var(--rd); box-shadow: 0 4px 0 var(--r), 0 0 var(--glow) var(--r); animation: qt-shake .5s ease-in-out both; }
.qt.ng .opt.right { border-color: var(--g); color: var(--gd); box-shadow: 0 4px 0 var(--g), 0 0 var(--glow) var(--g); }

@keyframes qt-drop { from { transform: translateY(-30px); opacity: 0; } }
@keyframes qt-ring { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.35); opacity: 0; } }
@keyframes qt-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes qt-shake { 15% { transform: translateX(-9px); } 35% { transform: translateX(8px); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } 100% { transform: none; } }