/* =====================================================================
   듀오링고식 UI — 메인톤 mediumvioletred #C71585 (branch: duolingo-ui)
   구조·클래스명은 그대로, 값만 교체. 둥근 폰트·통통한 3D 버튼·색 피드백.
   ===================================================================== */
:root{
  /* 배경·표면 */
  --bg:#fff6fb;            /* 옅은 핑크 크림 배경 */
  --panel:#ffffff;         /* 카드·패널 흰색 */
  --ink:#3c3c3c;           /* 본문 글자 */
  --muted:#9a9a9a;         /* 흐린 글자 */
  --line:#e8e2e6;          /* 기본 선 */
  --line-strong:#d8cdd4;   /* 카드 밑선·버튼 눌림용 진한 선 */

  /* 브랜드·상태 색 */
  --accent:#c71585;        /* 메인 마젠타 */
  --accent-dark:#9e1069;   /* 3D 버튼 밑그림자 */
  --accent2:#c71585;       /* 기존 var 호환(포인트 텍스트) */
  --blue:#1cb0f6; --blue-dark:#1594d6;
  --ok:#58cc02; --ok-dark:#58a700;    /* 정답 초록 */
  --err:#ff4b4b; --err-dark:#e63946;  /* 오답 빨강 */
  --gold:#ffc800;          /* XP·성취 */

  /* 콜아웃 틴트 */
  --tint-warm:#fbe9f3;     /* 옅은 마젠타 (why·팁) */
  --tint-green:#e7f8d8;    /* 옅은 초록 (goal·모범답안·대상) */
  --tint-green-line:#cdeab0;
  --tint-blue:#e3f5fe;
  --tint-gold:#fff7db;
  --tint-sand:#f4ecf1;     /* 태그·뱃지 (연분홍 회색) */
  --track:#efe6ec;         /* 진행바 트랙 */

  --shadow:0 2px 0 rgba(154,16,105,.05), 0 6px 18px rgba(120,20,90,.06);

  /* 타이포: Nunito(둥근 라틴) + 한글 폴백 */
  --font-serif:"Nunito","Pretendard","Noto Sans KR",system-ui,sans-serif;
  --font-sans:"Nunito","Pretendard","Noto Sans KR",system-ui,sans-serif;

  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:22px;
  --radius:16px; --radius-sm:12px; --radius-pill:999px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-weight:600;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  /* 상단에만 은은한 컬러 워시. background-attachment:fixed는 iOS 렌더 버그·버벅임이 있어 미사용 */
  background-image:radial-gradient(1200px 600px at 12% -5%, #ffe9f5 0, transparent 60%),
                   radial-gradient(1000px 500px at 92% -8%, #efe7ff 0, transparent 55%);
  background-repeat:no-repeat}

header{position:sticky;top:0;z-index:10;background:rgba(255,246,251,.9);
  backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}
#nav{display:flex;gap:8px;padding:12px 0;flex-wrap:wrap}
#nav button{border:2px solid var(--line);background:var(--panel);color:var(--ink);
  padding:9px 16px;border-radius:var(--radius-pill);cursor:pointer;font-size:14px;
  font-weight:800;font-family:inherit;border-bottom-width:3px;transition:transform .05s}
#nav button:hover{border-color:var(--accent)}
#nav button:active{transform:translateY(1px);border-bottom-width:2px}
#nav button.on{background:var(--accent);color:#fff;border-color:var(--accent-dark);border-bottom-color:var(--accent-dark)}
#nav button b{background:var(--gold);color:#7a5b00;border-radius:var(--radius-pill);padding:0 7px;margin-left:5px;font-size:12px}
main{max-width:820px;margin:0 auto;padding:20px 18px 40px}

h1,h2,h3{font-family:var(--font-serif);letter-spacing:-.01em;font-weight:900;color:#2f2b2e}
h1{font-size:26px;margin:.2em 0 .3em} h2{font-size:20px;margin:1.4em 0 .5em} h3{font-size:17px;margin:1.3em 0 .4em}
.muted{color:var(--muted);font-weight:600} .ok{color:var(--ok-dark);font-weight:800} .err{color:var(--err);font-weight:800}
button{font-family:inherit}

/* 통통한 3D 버튼 (시그니처) */
.primary{background:var(--accent);color:#fff;border:none;border-bottom:4px solid var(--accent-dark);
  padding:13px 22px;border-radius:var(--radius);cursor:pointer;font-size:15px;font-weight:900;
  letter-spacing:.01em;transition:transform .05s,filter .1s}
.primary:hover{filter:brightness(1.05)}
.primary:active{transform:translateY(2px);border-bottom-width:2px}
.primary:disabled{opacity:.45;cursor:not-allowed;border-bottom-width:4px;transform:none}

.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.row button:not(.primary){background:var(--panel);border:2px solid var(--line);border-bottom-width:4px;
  border-bottom-color:var(--line-strong);padding:12px 18px;border-radius:var(--radius);cursor:pointer;
  font-weight:800;color:var(--ink);transition:transform .05s}
.row button:not(.primary):hover{border-color:var(--accent)}
.row button:not(.primary):active{transform:translateY(2px);border-bottom-width:2px}
.danger{color:var(--err)!important;border-color:#f4bcbc!important;border-bottom-color:#eaa!important}
.back{background:none;border:none;color:var(--accent);cursor:pointer;padding:6px 0;margin-bottom:8px;font-size:14px;font-weight:800}
.link{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;margin-top:10px;font-weight:700}

/* 히어로·카드 */
.hero{background:var(--panel);border:2px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.hero h1{font-family:var(--font-serif)}

/* 대시보드 첫 화면: 통계는 한 줄로 접고, '오늘의 수업'과 학습 경로를 위로 */
.brandline{font-size:19px;line-height:1.3;margin:0 0 14px;letter-spacing:-.4px}
.statbar{display:flex;gap:8px;margin:0 0 14px}
.stat{flex:1;min-width:0;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;
  padding:10px 6px;text-align:center}
.stat b{display:block;font-size:22px;font-weight:900;color:var(--accent);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .unit{font-size:12px;font-weight:800;margin-left:1px}
.statlabel{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.is-due{border-color:var(--accent);background:#fff0f8}
.stat.is-due b{color:var(--accent-dark)}
@media (max-width:360px){
  .stat{padding:9px 4px}
  .stat b{font-size:19px}
  .stat .unit{font-size:10.5px}
  .statlabel{font-size:10.5px}
}

/* API 키 안내는 접어둔다 — 첫 화면을 잡아먹지 않게 */
.keynote{margin-top:14px}
.keynote>summary{cursor:pointer;font-size:13.5px;color:var(--muted);padding:6px 2px;list-style:none}
.keynote>summary::-webkit-details-marker{display:none}
.keynote>summary::before{content:"▸ ";font-size:11px}
.keynote[open]>summary::before{content:"▾ "}
.keynote .warn{margin-top:6px}

.cards{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}
.card{flex:1;min-width:150px;background:var(--panel);border:2px solid var(--line);border-radius:18px;
  padding:16px 14px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.03)}
.card .big{font-size:32px;font-weight:900;color:var(--accent);line-height:1.1}
.tip{background:var(--tint-gold);border:2px solid #f2e3a6;border-radius:16px;padding:12px 16px;margin:10px 0;font-weight:700}

.stages{display:flex;flex-direction:column;gap:16px}
.stage{background:var(--panel);border:2px solid var(--line);border-top:6px solid var(--accent);
  border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.stage.locked{opacity:.6}
.stage h3{margin:0;font-size:26px;font-weight:900;color:var(--accent)}

/* 단원 헤더 = 접고 펼치는 클릭 영역 (details/summary) */
.stagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;user-select:none}
.stagehead::-webkit-details-marker{display:none}   /* 사파리 기본 삼각형 제거 */
.stagemeta{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  color:var(--muted);font-size:14px;font-weight:800;white-space:nowrap}
.chev{font-size:15px;color:var(--muted);transition:transform .2s var(--ease-out)}
.stage[open] .chev{transform:rotate(180deg)}
@media (hover:hover){ .stagehead:hover .chev{color:var(--accent)} }
/* 접혔을 땐 src·path 숨김(details 기본), 펼치면 살짝 아래로 나타남 */
.stage[open] .src{animation:riseIn .25s var(--ease-out) both}
.stage[open] .path{animation:riseIn .3s var(--ease-out) both}

/* 단원마다 다른 색 (듀오링고식 유닛 컬러) — 상단 캡 + 제목 */
.stage:nth-child(6n+2){border-top-color:#1594d6} .stage:nth-child(6n+2) h3{color:#1594d6}
.stage:nth-child(6n+3){border-top-color:#58a700} .stage:nth-child(6n+3) h3{color:#58a700}
.stage:nth-child(6n+4){border-top-color:#e07b00} .stage:nth-child(6n+4) h3{color:#e07b00}
.stage:nth-child(6n+5){border-top-color:#9b4dca} .stage:nth-child(6n+5) h3{color:#9b4dca}
.stage:nth-child(6n+6){border-top-color:#0e9594} .stage:nth-child(6n+6) h3{color:#0e9594}
.stage .src{color:var(--muted);font-size:13px;margin:10px 0 10px;font-weight:700}
.soon{font-size:12px;background:var(--tint-sand);color:var(--muted);padding:2px 10px;border-radius:var(--radius-pill);font-weight:800}

.lesson{background:var(--panel);border:2px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.crumb{color:var(--muted);font-size:13px;font-weight:800}
.goal{background:var(--tint-green);border:2px solid var(--tint-green-line);border-radius:14px;padding:10px 14px;margin:10px 0;font-weight:700}
.advitem{border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;background:var(--panel)}
.advitem .ko{color:var(--muted);font-size:14px} .advitem .en{font-weight:800;font-size:16px;margin:2px 0}
.advitem .note{font-size:13px;color:var(--accent);font-weight:700}

/* 단계 스텝퍼(INPUT/OUTPUT/TP) */
.stepper{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 16px;font-size:14px;color:var(--muted);font-weight:800}
/* 단계 칩은 진짜 버튼이다(클릭해서 이동). TP는 드릴을 다 풀기 전엔 disabled. */
.stepper button{padding:8px 14px;border:2px solid var(--line);border-bottom-width:3px;
  border-radius:var(--radius-pill);background:var(--panel);color:var(--muted);
  font-family:inherit;font-size:inherit;font-weight:800;cursor:pointer}
.stepper button.on{background:var(--accent);color:#fff;border-color:var(--accent-dark);font-weight:900}
@media (hover:hover){
  .stepper button:not(.on):hover{border-color:var(--accent);color:var(--accent)}
}
.stepper button:active{transform:translateY(2px);border-bottom-width:1px}
.stepper i{color:#d9c9d4;font-style:normal}

/* TP · 문형전환훈련 (한국어 보고 소리 내어 영어로) */
.tpsec{background:var(--panel);border:2px solid var(--line);border-radius:18px;
  padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)}
.tpsec .tphead{font-weight:900;color:var(--accent);margin-bottom:6px}
.tpsec .progress{margin:12px 0 4px}
.tplist{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}

.tpitem{background:var(--tint-blue);border:2px solid #cbeafd;border-radius:14px;padding:12px 14px}
.tpitem.said{background:var(--tint-green);border-color:var(--tint-green-line)}
.tpko{font-weight:800;font-size:16px;line-height:1.5}
.tpitem.said .tpko{color:var(--ok-dark)}
.tpans{margin-top:8px;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:9px 12px}
.tpans .en{font-weight:800;font-size:15.5px}
.tpans .muted{font-size:13px;margin-top:2px}
.tprow{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.tpsaid{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:800;font-size:14px;min-height:28px}
.tpsaid input[type="checkbox"]{width:22px;height:22px;accent-color:var(--ok);cursor:pointer;flex:0 0 22px}

.tpdone{margin-top:12px;background:var(--tint-green);border:2px solid var(--tint-green-line);
  border-radius:14px;padding:12px 14px;font-weight:800;color:var(--ok-dark)}

@media (max-width:480px){
  .tpko{font-size:15.5px}
  .tpsaid{min-height:44px}
  .tpsaid input[type="checkbox"]{width:24px;height:24px;flex-basis:24px}
  .tpshow{min-height:44px}
}

/* INPUT 수업 본문 */
.inputbody{margin-top:6px}
.isec{margin:20px 0;padding-top:2px}
.isec h3{font-size:18px;margin:0 0 8px;border-left:5px solid var(--accent);padding-left:10px;color:var(--accent)}
.isec p{margin:7px 0;line-height:1.8;font-weight:600}
.exs{margin:10px 0;display:flex;flex-direction:column;gap:6px}
.ex{background:var(--tint-blue);border:2px solid #cbeafd;border-radius:14px;padding:10px 14px;display:flex;flex-direction:column}
.ex .en{font-weight:800;font-size:15.5px} .ex .ko{color:#5a6b74;font-size:13.5px;font-weight:600}
.mk{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:11px 14px;margin:8px 0;display:flex;flex-direction:column;gap:3px}
.mk .bad{color:var(--err);font-weight:700} .mk .good{color:var(--ok-dark);font-weight:800} .mk .why{font-size:13.5px;color:var(--muted);font-weight:600}
.dlg{display:flex;flex-direction:column;gap:8px}
.dl{background:#faf5f9;border:2px solid var(--line);border-radius:14px;padding:10px 14px}
.dl b{color:var(--accent);margin-right:8px;font-weight:900} .dl .en{font-weight:800} .dl .ko{display:block;color:var(--muted);font-size:13.5px;margin-top:2px;font-weight:600}

/* INPUT 섹션 스텝퍼 (한 번에 한 섹션) */
.istep-wrap{margin-top:12px}
.istep-bar-row{display:flex;align-items:center;gap:12px}
.istep-bar-row .progress{flex:1;margin:0}
.istep-count{font-size:13px;white-space:nowrap;font-weight:800;color:var(--accent)}
.istep-chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 2px}
.istep-chip{width:32px;height:32px;border:2px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:var(--radius-pill);cursor:pointer;font-size:13px;font-weight:800;font-family:inherit;padding:0;transition:transform .05s}
.istep-chip:hover{border-color:var(--accent)}
.istep-chip.on{background:var(--accent);color:#fff;border-color:var(--accent-dark);font-weight:900}
.istep-chip:active{transform:translateY(1px)}
.istep-nav{align-items:center}
.istep-nav button:disabled{opacity:.4;cursor:not-allowed}

/* 오늘의 수업 */
.todaybox{background:linear-gradient(135deg,#fff0f8,#f3ecff);border:2px solid #f0d3e8;border-radius:20px;padding:18px 20px;margin:16px 0}
.todaybox .todaytitle{font-family:var(--font-serif);font-size:18px;font-weight:900;margin:2px 0 12px;color:#2f2b2e}

/* 진행바 (두껍고 글로시) */
.progress{height:16px;background:var(--track);border-radius:var(--radius-pill);overflow:hidden;margin:8px 0 4px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.06)}
.progress .bar{height:100%;width:0;background:linear-gradient(180deg,#e04aa8,var(--accent));border-radius:var(--radius-pill);
  transition:width .35s ease;box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}

/* 드릴 */
.drill{border:2px solid var(--line);border-radius:18px;padding:14px 16px;margin:12px 0;background:var(--panel);box-shadow:0 2px 0 rgba(0,0,0,.03)}
.drill .ko{font-size:16px;margin-bottom:10px;font-weight:800}
.tag{display:inline-block;background:var(--tint-sand);color:var(--accent);font-size:12px;padding:2px 10px;border-radius:var(--radius-pill);margin-left:4px;font-weight:800}
.inrow{display:flex;gap:8px}
.drill input{flex:1;padding:12px 14px;border:2px solid var(--line);border-radius:14px;font-size:15px;background:#fffdff;font-family:inherit;font-weight:700}
.drill input:focus{outline:none;border-color:var(--accent)}
.drill input.done{background:var(--tint-green);border-color:var(--tint-green-line)}
.drill .check{background:var(--accent);color:#fff;border:none;border-bottom:4px solid var(--accent-dark);
  padding:11px 20px;border-radius:14px;cursor:pointer;white-space:nowrap;font-weight:900;transition:transform .05s}
.drill .check:hover{filter:brightness(1.05)}
.drill .check:active{transform:translateY(2px);border-bottom-width:2px}
.drill .check:disabled{opacity:.45;cursor:default}
.fb{margin-top:10px;font-size:15px}
.fbok{color:var(--ok-dark);font-weight:900} .fbno{color:var(--err);font-weight:900}
.fbtext{margin-top:4px;color:var(--ink);font-size:14.5px;line-height:1.6;font-weight:600}
.selfg{margin-top:8px}
.g{background:var(--panel);border:2px solid var(--line);border-bottom-width:3px;padding:8px 16px;border-radius:12px;cursor:pointer;margin-right:6px;font-weight:800;transition:transform .05s}
.g:hover{border-color:var(--accent)} .g:active{transform:translateY(1px);border-bottom-width:2px}
/* 빈 상태 — 허전하지 않게 친근한 점선 카드 (복습 탭 등) */
.empty{text-align:center;color:#8a6b7f;padding:30px 20px;font-weight:800;font-size:15.5px;
  background:var(--tint-warm);border:2px dashed #f0cfe3;border-radius:18px;margin:16px 0;line-height:1.7}

/* 완주 화면 */
.complete{text-align:center}
.complete .bigemoji{font-size:64px;animation:pop .5s ease} .complete h1{font-family:var(--font-serif)}
.complete .cards{justify-content:center}
.complete .cards .card{flex:0 1 200px}   /* flex:1이면 늘어나 justify-content:center가 무의미해짐 */
.complete .row{justify-content:center}   /* .row는 flex라 text-align:center가 안 먹음 */
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.paulnote{background:var(--tint-warm);border:2px solid #f2cee3;border-radius:16px;padding:16px 18px;margin:16px 0;line-height:1.7;font-weight:600}

/* 채팅 */
.chat{background:var(--panel);border:2px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.warn{background:var(--tint-gold);border:2px solid #f2e3a6;border-radius:14px;padding:11px 15px;margin:8px 0;font-weight:700}
.ctx{background:var(--tint-green);border:2px solid var(--tint-green-line);border-radius:12px;padding:8px 14px;font-size:14px;margin-bottom:10px;font-weight:700}
.ctx button{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;font-weight:800}
.msgs{min-height:200px;max-height:52vh;overflow-y:auto;padding:6px 0;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;flex-direction:column} .msg .who{font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:800}
.msg.user{align-items:flex-end} .msg.user .who{margin-right:4px}
.bubble{max-width:85%;padding:12px 16px;border-radius:18px;font-size:15px;font-weight:600;line-height:1.55}
.msg.user .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.msg.assistant .bubble{background:#faf5f9;border:2px solid var(--line);border-bottom-left-radius:5px}
.bubble code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:6px;font-size:.92em}
.chatform{display:flex;gap:8px;margin-top:14px}
.chatform textarea{flex:1;padding:12px;border:2px solid var(--line);border-radius:14px;font-size:15px;font-family:inherit;resize:vertical;background:#fffdff;font-weight:600}
.chatform textarea:focus{outline:none;border-color:var(--accent)}
input,select,textarea{font-family:inherit}
/* 일반 입력칸(설정 API 키 등)도 통통한 스타일로 통일 */
input:not([type=checkbox]):not([type=radio]):not([type=file]){
  padding:12px 14px;border:2px solid var(--line);border-radius:14px;font-size:15px;
  background:#fffdff;font-weight:700;color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#c3b8c0;font-weight:600}
select{padding:11px 14px;border:2px solid var(--line);border-radius:14px;font-size:15px;background:#fffdff;font-weight:700}
select:focus{outline:none;border-color:var(--accent)}

/* 접근성: 키보드로 이동할 땐 어디에 있는지 반드시 보여야 한다.
   마우스 클릭(:focus)엔 링을 안 그리고, 키보드(:focus-visible)에만 그린다. */
button:focus-visible,
summary:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
  border-radius:10px;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible{
  outline:3px solid var(--blue);outline-offset:1px;border-color:var(--accent)}

/* 맞힌 드릴 카드는 초록 테두리로 성취 표시 (듀오링고식 즉각 피드백) */
.drill:has(input.done){border-color:var(--tint-green-line);background:#fcfff8}
.drill .check:disabled{border-bottom-width:4px;transform:none}

/* Paul '왜 배우나' 콜아웃 */
.whybox{background:var(--tint-warm);border:2px solid #f2cee3;border-left:6px solid var(--accent);padding:14px 16px;
  border-radius:14px;margin:12px 0 6px;line-height:1.7;font-size:.97rem;color:#5a2545;font-weight:600}

/* 오프라인 채점 — 모범답안 (초록) */
.model{margin-top:8px;padding:10px 12px;background:var(--tint-green);border:2px solid var(--tint-green-line);border-radius:12px;font-size:.93rem;color:#2e5417;font-weight:700}
.model b{color:#1f3d0f}

/* 정답 보기 버튼 */
.peek,.hint{background:var(--tint-gold);border:2px solid #f2e3a6;border-bottom-width:3px;color:#8a6d00;border-radius:12px;
  padding:6px 12px;margin-left:6px;font-size:.85rem;cursor:pointer;white-space:nowrap;font-weight:800;transition:transform .05s}
.peek:hover,.hint:hover{filter:brightness(.98)}
.peek:active,.hint:active{transform:translateY(1px);border-bottom-width:2px}
/* 힌트는 정답보다 한 단계 약하게 — 통째로 보기 전에 손이 가는 쪽 */
.hint{background:#eef6ff;border-color:#c9e2fb;color:#1565a8}
.hint:disabled{opacity:.45;cursor:default}

/* 복습에서 여러 번 틀린 문장 — 부끄럽게가 아니라 "여기 약하다"는 표시 */
.tag.lapse{background:#fff0f0;border-color:#ffd0d0;color:#c62828}

/* 예문 듣기(TTS) */
.tts-btn{background:none;border:none;cursor:pointer;padding:0 3px;margin-left:6px;
  font-size:.9em;line-height:1;opacity:.75;vertical-align:baseline;border-radius:var(--radius-sm);
  transition:opacity .12s ease,transform .12s var(--ease-bounce)}
.tts-btn:hover{opacity:1;transform:scale(1.12)} .tts-btn:active{opacity:1;transform:scale(1.2)}

.cards{align-items:stretch}
@media(max-width:560px){ .cards{flex-direction:column} .bubble{max-width:92%} }

/* =====================================================================
   모바일 (480px 이하): 하단 탭바(듀오링고식) + 터치 44px + 세로 스택
   ===================================================================== */
@media (max-width: 480px){
  /* 네비를 화면 하단에 고정 = 듀오링고 바텀 탭바 */
  header{position:fixed;top:auto;bottom:0;left:0;right:0;border-bottom:none;border-top:2px solid var(--line);
    background:rgba(255,246,251,.97)}
  #nav{justify-content:space-around;gap:2px;padding:6px 4px 8px}
  #nav button{flex:1;border:none;border-bottom:none;background:none;padding:6px 2px;min-height:48px;border-radius:12px;
    font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted)}
  #nav button.on{background:var(--tint-warm);color:var(--accent)}
  #nav button:active{transform:none}
  body{padding-bottom:70px}   /* 하단바에 콘텐츠 안 가리게 */

  .wrap{padding:0 12px} main{padding:14px 12px 24px}
  img,pre,table,textarea{max-width:100%} pre{overflow-x:auto}
  h1{word-break:keep-all;overflow-wrap:anywhere}
  body{font-size:15px} .isec p{font-size:15px} .ex .en{font-size:15px} .dl .en{font-size:15px}

  .cards{flex-direction:column} .card{min-width:0;width:100%}
  .card .big{font-size:34px}
  /* 단계 칩: 좁은 화면에선 화살표 빼고 촘촘하게 (줄바꿈 시 › 가 붕 뜨는 문제) */
  .stepper{gap:6px}
  .stepper i{display:none}
  .stepper button{min-height:44px;display:inline-flex;align-items:center;padding:8px 12px;font-size:13px}
  /* 섹션 진행바+라벨: 좁은 화면에선 세로로 (라벨이 옆에 끼어 답답한 문제) */
  .istep-bar-row{flex-direction:column;align-items:stretch;gap:6px}
  .istep-count{white-space:normal;font-size:12.5px;line-height:1.4}
  .istep-chips{gap:6px} .istep-chip{width:44px;height:44px;font-size:14px}
  .ex{padding:11px 13px} .dl{padding:11px 13px}

  /* 드릴 입력행 세로 스택 (가로 넘침 방지) */
  .inrow{flex-wrap:wrap}
  .drill input{flex:1 1 100%;min-height:48px}
  .drill .check{flex:1 1 auto;min-height:48px}
  .peek{flex:1 1 auto;margin-left:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .tts-btn{min-width:44px;min-height:44px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}

  .primary{min-height:50px;width:100%} .row{gap:8px} .row button:not(.primary){min-height:48px}
  .g{min-height:44px;display:inline-flex;align-items:center}
  .chatform button{min-height:48px} select{min-height:48px}
}

/* =====================================================================
   모션 레이어 — 듀오링고식 "통통함"
   색·구조는 그대로 두고 이징·눌림·리프트만 얹는다.
   기존 트랜지션이 전부 `transform .05s`(기본 이징)라 사람 눈엔 모션이 아니라
   순간이동이었다. 밑선도 3px이라 3D 두께가 안 읽힘. 여기서 교체한다.
   ※ 이 블록은 파일 맨 끝 = 위 모바일 미디어쿼리보다 나중이므로,
     하단 탭바를 되돌리는 재보호 블록을 아래(10번)에 반드시 둔다.
   ===================================================================== */
:root{
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);   /* 살짝 튀어나갔다 돌아옴 */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --press:transform .14s var(--ease-bounce), border-bottom-width .12s var(--ease-out),
          box-shadow .18s var(--ease-out), filter .12s var(--ease-out);
}

/* 1) 밑선을 두껍게 — 3D 두께가 눈에 보이게 */
.peek{border-bottom-width:4px}

/* 2) 공통 트랜지션 (튀는 이징) */
.primary,.drill .check,.row button:not(.primary),#nav button,.peek,.stepper button{
  transition:var(--press)}

/* 3) 호버 리프트 — 마우스 있는 기기에서만 (터치에서 hover 고착 방지) */
@media (hover:hover){
  .primary:hover,.drill .check:hover{transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:0 6px 14px rgba(199,21,133,.30)}
  .row button:not(.primary):hover,.peek:hover{transform:translateY(-2px);
    box-shadow:0 5px 12px rgba(120,20,90,.10)}
}

/* 4) 눌림 — 밑선이 통째로 들어가고 버튼이 그만큼 내려앉는다.
      translateY 값 == 줄어드는 밑선 두께라야 아랫모서리가 제자리에 고정된다. */
.primary:active,.drill .check:active{transform:translateY(4px);border-bottom-width:0;
  box-shadow:none;filter:brightness(.98)}
.row button:not(.primary):active,.peek:active{transform:translateY(3px);
  border-bottom-width:1px;box-shadow:none}
#nav button:active{transform:translateY(2px);border-bottom-width:1px}

/* 5) 진행바: 유리 광택 + 채워질 때 튕김 */
.progress{box-shadow:inset 0 2px 4px rgba(120,20,90,.10)}
.progress .bar{transition:width .55s var(--ease-bounce);position:relative}
.progress .bar::after{content:"";position:absolute;left:5px;right:5px;top:3px;height:4px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.45);pointer-events:none}

/* 6) 화면 진입: 살짝 떠오르며 나타남 (스태거) */
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero,.lesson,.stage,.cards>.card,.todaybox{animation:riseIn .34s var(--ease-out) both}
.stages .stage:nth-child(2){animation-delay:.04s}
.stages .stage:nth-child(3){animation-delay:.08s}
.stages .stage:nth-child(4){animation-delay:.12s}
.stages .stage:nth-child(5){animation-delay:.16s}
.stages .stage:nth-child(6){animation-delay:.20s}
.stages .stage:nth-child(n+7){animation-delay:.24s}
.cards>.card:nth-child(2){animation-delay:.06s}

/* 7) 정답 순간 드릴 카드가 톡 튄다 */
@keyframes correctPop{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
.drill:has(input.done){animation:correctPop .36s var(--ease-bounce)}

/* 8) 단계 칩이 활성화될 때도 톡 */
.stepper button.on{animation:correctPop .32s var(--ease-bounce)}

/* 9) 완주 이모지: 튕긴 뒤 살짝 흔들며 축하 */
@keyframes cheer{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.complete .bigemoji{animation:pop .5s var(--ease-bounce), cheer .9s .5s ease-in-out 2}

/* ===== 한 문제씩 드릴 (renderOutput) ===== */

/* 진행 표시와 콤보 배지를 한 줄 좌우로 */
.drillmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;margin-bottom:2px}

/* 연속 정답 배지 — 등장할 때 톡 튄다 */
.combo{display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--radius-pill);
  background:#fff2e0;color:#c2560a;border:1.5px solid #ffd8a8;
  font-weight:800;font-size:13px;letter-spacing:-.2px;
  animation:comboPop .32s var(--ease-bounce)}
.combo[hidden]{display:none}   /* display:inline-flex가 hidden 속성을 이기지 않도록 */
@keyframes comboPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* 새 문제 카드가 오른쪽에서 미끄러져 들어온다 */
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.drill.drill-in{animation:slideIn .26s var(--ease-out) both}

/* 오답이면 좌우로 흔들린다 (정답의 correctPop과 짝) */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px)} 30%{transform:translateX(7px)}
  45%{transform:translateX(-5px)} 60%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}}
.drill.is-wrong{animation:shake .42s ease-in-out; border-color:var(--err)}

/* 세트 쉬어가기 / 이어서 하기 카드 */
.setdone{margin:18px 0;padding:22px 18px;text-align:center;
  border:2px solid var(--line-strong);border-radius:18px;background:var(--panel);
  box-shadow:0 3px 0 rgba(0,0,0,.04);animation:pop .4s var(--ease-bounce)}
.setdone-head{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.3px}
.setdone-sub{margin-top:6px;font-size:14.5px;color:var(--muted)}
.setdone-sub b{color:var(--accent)}
.setdone-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.setdone-note{margin-top:10px;font-size:12.5px}
@media (max-width:420px){ .setdone-row{flex-direction:column} .setdone-row button{width:100%} }

/* 완주 카드 */
.drilldone{margin:18px 0;padding:22px 16px;text-align:center;
  border:2px solid var(--ok);border-radius:18px;background:#f2fbe8;
  font-size:18px;font-weight:800;color:var(--ok-dark);
  animation:pop .45s var(--ease-bounce)}
.drilldone b{color:var(--accent)}

/* 완주 색종이 — DOM 조각 몇 개가 흩날리고 스스로 사라진다 */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;
  animation:fall var(--dur,1.5s) linear forwards}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(var(--spin,540deg));opacity:.15}}

/* 설정: 효과음 토글 줄 */
.sfxrow{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:15px;cursor:pointer}
.sfxrow input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

/* 10) 모바일 하단 탭바 재보호 — 위 미디어쿼리를 이 블록이 덮기 때문 */
@media (max-width:480px){
  #nav button{border-bottom-width:0}
  #nav button:active{transform:none}
  .primary:active,.drill .check:active{transform:translateY(3px)}
}

/* =====================================================================
   레슨 패스 — 동그란 노드가 좌우로 흐른다 (듀오링고 시그니처)
   기존 체크박스 목록(ul.mods/.modbtn)을 대체. 잠금 개념이 없으므로 전부 클릭 가능하고,
   '오늘의 수업'만 current로 강조한다. 노드 색은 단원 컬러(--unit)를 따른다.
   지그재그는 `translate`로, 호버·눌림은 `transform`으로 → 서로 안 덮어씀.
   ===================================================================== */
.stage{--unit:var(--accent)}
.stage:nth-child(6n+2){--unit:#1594d6} .stage:nth-child(6n+3){--unit:#58a700}
.stage:nth-child(6n+4){--unit:#e07b00} .stage:nth-child(6n+5){--unit:#9b4dca}
.stage:nth-child(6n+6){--unit:#0e9594}

/* 오른쪽 여백 = 최대진폭(34px). 라벨이 오른쪽으로 밀려도 카드 밖으로 안 나가게. */
.path{list-style:none;margin:8px 0 0;padding:4px 34px 4px 0;display:flex;flex-direction:column;gap:12px}
/* 노드 칼럼 폭 >= 중심(64) + 최대진폭(34) + 반지름(30) = 128px. 안 그러면 3번 노드가 라벨을 침범한다. */
.pnode{--x:0px;position:relative;display:grid;grid-template-columns:128px 1fr;align-items:center;gap:12px;
  animation:riseIn .3s var(--ease-out) both;animation-delay:calc(min(var(--i),6) * 30ms)}
.pnode.is-current{margin-top:20px}

.pdot{position:relative;justify-self:center;translate:var(--x) 0;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:18px;color:#fff;
  background:var(--line);border-bottom:6px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s var(--ease-bounce),border-bottom-width .12s var(--ease-out),
             box-shadow .18s var(--ease-out),filter .12s var(--ease-out)}

/* 좌우로 흐르는 물결 (8박자). --x는 줄(.pnode) 전체에 걸어서
   동그라미·제목·START가 같은 만큼 함께 움직인다. */
.pnode:nth-child(8n+1){--x:0px}    .pnode:nth-child(8n+2){--x:22px}
.pnode:nth-child(8n+3){--x:34px}   .pnode:nth-child(8n+4){--x:22px}
.pnode:nth-child(8n+5){--x:0px}    .pnode:nth-child(8n+6){--x:-22px}
.pnode:nth-child(8n+7){--x:-34px}  .pnode:nth-child(8n+8){--x:-22px}

/* 상태별 색 */
.pnode.is-todo    .pdot{background:#e9e4e7;border-bottom-color:#d2c9cf;color:#9a9a9a;font-size:15px}
.pnode.is-done    .pdot{background:var(--ok);border-bottom-color:var(--ok-dark);font-size:22px}
.pnode.is-started .pdot{background:var(--gold);border-bottom-color:#d9a800;color:#7a5b00}
.pnode.is-current .pdot{background:var(--unit);border-bottom-color:rgba(0,0,0,.24);font-size:20px}

/* 현재 노드에서 퍼져나가는 링 */
@keyframes ring{0%{transform:scale(.92);opacity:.5}100%{transform:scale(1.3);opacity:0}}
.pnode.is-current .pdot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:3px solid var(--unit);animation:ring 1.7s ease-out infinite;pointer-events:none}

/* START 말풍선 */
.pstart{position:absolute;left:0;width:128px;top:-2px;text-align:center;
  translate:var(--x) 0;   /* 동그라미와 같이 움직임 (transform은 세로 이동에 쓰는 중) */
  transform:translateY(-72%);background:var(--panel);border:2px solid var(--unit);
  border-bottom-width:4px;color:var(--unit);font-size:11px;font-weight:900;letter-spacing:.07em;
  padding:3px 0;border-radius:var(--radius-pill);pointer-events:none}

.plabel{translate:var(--x) 0;font-weight:700;font-size:14px;color:var(--ink);line-height:1.45}
.pnode.is-todo .plabel{color:var(--muted)}
.pnode.is-current .plabel{font-weight:900;color:var(--unit)}
.pscore{color:var(--muted);font-size:12.5px;font-weight:700;white-space:nowrap}

@media (hover:hover){
  .pdot:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 8px 16px rgba(120,20,90,.18)}
}
/* 눌림: 밑선 6px이 통째로 들어감 → translateY도 정확히 6px */
.pdot:active{transform:translateY(6px);border-bottom-width:0;box-shadow:none;filter:brightness(.98)}

@media (max-width:480px){
  /* 칼럼 폭 >= 중심(48) + 최대진폭(20) + 반지름(26) = 94 → 96px */
  .path{padding-right:20px}
  .pnode{grid-template-columns:96px 1fr;gap:10px}
  .pdot{width:52px;height:52px;border-bottom-width:5px;font-size:16px}
  .pdot:active{transform:translateY(5px)}
  .pnode:nth-child(8n+3){--x:20px}  .pnode:nth-child(8n+7){--x:-20px}
  .pnode:nth-child(8n+2),.pnode:nth-child(8n+4){--x:13px}
  .pnode:nth-child(8n+6),.pnode:nth-child(8n+8){--x:-13px}
  .pstart{width:96px;font-size:10px}
  .plabel{font-size:13.5px}
}

/* =====================================================================
   정답/오답 배너 — 화면 아래에서 쑥 올라오는 띠 (듀오링고 핵심 경험)
   header(z-index:10)보다 위에 있어야 모바일 하단 탭바를 덮는다.
   ===================================================================== */
.fbbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  transform:translateY(100%);transition:transform .3s var(--ease-bounce);
  border-top:2px solid transparent}
.fbbar.show{transform:translateY(0)}
.fbbar-in{max-width:820px;margin:0 auto;padding:16px 18px 20px;display:flex;align-items:center;gap:14px}
.fbbar.is-ok{background:var(--tint-green);border-top-color:var(--tint-green-line)}
.fbbar.is-no{background:#ffe9e9;border-top-color:#f4bcbc}

.fbbar-icon{flex:0 0 44px;width:44px;height:44px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900}
.fbbar.is-ok .fbbar-icon{background:var(--ok)}
.fbbar.is-no .fbbar-icon{background:var(--err)}

.fbbar-txt{flex:1;min-width:0}
.fbbar-title{font-weight:900;font-size:17px}
.fbbar.is-ok .fbbar-title{color:var(--ok-dark)}
.fbbar.is-no .fbbar-title{color:var(--err-dark)}
.fbbar-sub{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:2px;overflow-wrap:anywhere}

.fbbar-btn{flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;color:#fff;
  font-weight:900;font-size:15px;padding:13px 26px;border-radius:var(--radius);
  transition:transform .14s var(--ease-bounce),border-bottom-width .12s var(--ease-out),filter .12s}
.fbbar.is-ok .fbbar-btn{background:var(--ok);border-bottom:4px solid var(--ok-dark)}
.fbbar.is-no .fbbar-btn{background:var(--err);border-bottom:4px solid var(--err-dark)}
.fbbar-btn:active{transform:translateY(4px);border-bottom-width:0}
@media (hover:hover){ .fbbar-btn:hover{filter:brightness(1.06)} }

@media (max-width:480px){
  .fbbar-in{padding:12px 12px 14px;gap:10px}
  .fbbar-icon{flex-basis:38px;width:38px;height:38px;font-size:20px}
  .fbbar-title{font-size:15px} .fbbar-sub{font-size:12.5px}
  .fbbar-btn{padding:12px 16px;min-height:48px}
}

/* 접근성: 모션 최소화 설정 존중 (애니메이션 끄되 내용은 반드시 보이게) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .hero,.lesson,.stage,.cards>.card,.todaybox,.pnode{animation:none;opacity:1;transform:none}
  .pnode.is-current .pdot::after{animation:none;opacity:.4}
  /* 한 문제씩 드릴: 흔들림·슬라이드는 끄고, 상태는 색으로만 알린다 */
  .drill.drill-in,.drill.is-wrong,.drilldone,.combo,.setdone{animation:none;opacity:1;transform:none}
  .confetti{display:none}
}