:root{font-family:Arial,"Malgun Gothic","Apple SD Gothic Neo","Noto Sans","Noto Sans Myanmar","Noto Sans Khmer","Noto Sans Sinhala","Noto Sans Bengali","Noto Sans Devanagari","Noto Naskh Arabic",sans-serif;color:#101522;background:#fff}
*{box-sizing:border-box}body{margin:0}.app{width:min(100%,728px);margin:auto;padding:24px 18px 34px}
.top{display:grid;grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);align-items:center;gap:8px;margin:0 0 10px}
.logo{width:150px;height:160px;object-fit:contain;justify-self:center}
select{width:100%;font:700 clamp(13px,2.8vw,20px) Arial,"Malgun Gothic",sans-serif;color:#17263b;background:#f5f8fc;border:1px solid #cfd7e3;border-radius:13px;padding:17px 9px;min-height:64px;cursor:pointer}
.progress{display:flex;align-items:center;gap:18px;background:#f7f9fc;border:1px solid #d5dce7;border-radius:18px;padding:25px 22px;margin:5px 0 16px}
.count{font-size:clamp(21px,4vw,29px);font-weight:750;white-space:nowrap}
input[type=range]{flex:1;min-width:0;accent-color:#05c857;cursor:pointer}
.korean,.translation{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:20px;padding:18px 12px}
.korean{min-height:181px;border:1px solid #d8dee9;font-size:clamp(36px,9.4vw,72px);font-weight:850;letter-spacing:-2px;margin-bottom:16px}
.translation{min-height:130px;background:#effff8;border:1px solid #bfe9d8;font-size:clamp(31px,7vw,54px);font-weight:750;margin-bottom:16px}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.mode{min-height:111px;border:2px solid #09b63c;border-radius:18px;background:#91e69b;color:#102c18;font-size:clamp(15px,3.7vw,26px);font-weight:750;line-height:1.2;cursor:pointer}
.mode.active{background:#4fd873;box-shadow:inset 0 0 0 3px #fff}
.controls{display:flex;align-items:center;justify-content:space-around;gap:12px;margin:22px 0}
.nav,.stop{display:grid;place-items:center;border-radius:50%;cursor:pointer}
.nav{width:124px;height:124px;border:1px solid #cbd4df;background:#f2f5fa;color:#33465f;font-size:60px}
.stop{width:156px;height:156px;border:2px solid #f08e9a;background:#ffc9d0;color:#ff303d;font-size:65px}
.stop svg{width:66px;height:66px;fill:currentColor}
.talk{display:flex;align-items:center;gap:15px;width:100%;min-height:78px;padding:13px 18px;border:1px solid #d9c7ef;border-radius:18px;background:#f7f2ff;color:#27145b;font-size:clamp(18px,4vw,29px);font-weight:750;cursor:pointer;text-align:left}
.talk .bot{font-size:37px}.paid{background:#f2557b;color:white;border-radius:30px;font-size:18px;padding:6px 13px}.arrow{margin-left:auto;font-size:40px}
.note{font-size:13px;color:#596779;text-align:center;min-height:22px;margin:12px 0 0}
@media(max-width:470px){.app{padding:14px 12px 25px}.top{grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);gap:5px}.logo{width:100px;height:125px}select{min-height:52px;padding:10px 3px;font-size:13px}.progress{padding:18px 12px;gap:10px}.korean{min-height:140px}.translation{min-height:105px}.mode{min-height:83px}.nav{width:80px;height:80px;font-size:42px}.stop{width:108px;height:108px}.stop svg{width:49px;height:49px}.talk{min-height:70px;padding:10px}.talk .bot{font-size:27px}.paid{font-size:13px}.arrow{font-size:29px}}

/* 28-lesson homepage connection additions */
.korean{word-break:keep-all;line-height:1.45;flex-wrap:wrap;gap:0 .15em}
.cue{display:inline-block;transition:color .08s ease;text-decoration:none}
.cue.active{color:#e44721;text-decoration:underline;text-underline-offset:7px}
.progress{position:relative}.count{min-width:68px}
.mode{padding:8px 3px}.mode.active{background:#55d87a}
.note{line-height:1.45}
@media(max-width:470px){.count{min-width:57px}.korean{font-size:clamp(28px,8.6vw,58px)}.translation{font-size:clamp(23px,6.5vw,44px)}}

/* phone: fit the whole screen without scrolling */
@media(max-width:470px){
html,body{height:100%}
.app{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding:8px 12px 10px}
.top{flex:none;margin:0 0 6px}
.logo{width:auto;max-width:100px;height:11dvh;max-height:125px}
select{min-height:5.8dvh;padding:6px 4px}
.progress{flex:none;min-height:6.5dvh;padding:0 12px;margin:0 0 8px}
.korean{flex:1.3 1 0;min-height:0;margin-bottom:8px;padding:6px;overflow:auto;line-height:1.3;font-size:clamp(24px,min(8.6vw,5.2dvh),58px)}
.translation{flex:1 1 0;min-height:0;margin-bottom:8px;padding:6px;overflow:auto;line-height:1.25;font-size:clamp(16px,min(6vw,3.5dvh),44px)}
.modes{flex:none}.mode{min-height:9dvh}
.controls{flex:none;margin:8px 0}
.nav{width:10.5dvh;height:10.5dvh;font-size:34px}
.stop{width:13.5dvh;height:13.5dvh}.stop svg{width:50%;height:50%}
.talk{flex:none;min-height:7dvh;padding:6px 10px}
.note{flex:none;margin:4px 0 0;min-height:14px;font-size:12px}
}

/* AI 대화 + 선생님 대화 두 줄 (2026-11-09) */
.talks{display:flex;flex-direction:column;gap:10px}
.soon{background:#8a96a8;color:#fff;border-radius:30px;font-size:18px;padding:6px 13px}
.talk.teacher{background:#f1f7ff;border-color:#c5d8f0;color:#163256}
@media(max-width:470px){
.soon{font-size:13px}
.app{padding:8px 12px max(18px,env(safe-area-inset-bottom))}
.logo{height:9.5dvh}
.mode{min-height:8dvh}
.controls{margin:6px 0}
.nav{width:9.6dvh;height:9.6dvh}
.stop{width:12.4dvh;height:12.4dvh}
.talks{flex:none;gap:7px}
.talk{min-height:6.8dvh}
.note{margin:8px 0 0;min-height:18px}
}

/* 2026-11-10 터치 칸 세로 확대: 위 선택 칸·아래 대화 띠를 높이고, 한글 칸과 번역 칸 높이를 같게 */
@media(max-width:470px){
select{min-height:7.6dvh;padding:8px 4px}
.korean{flex:1 1 0}
.talk{min-height:8.4dvh}
}
@media(min-width:471px){
.korean,.translation{min-height:150px}
select{min-height:72px}
.talk{min-height:88px}
}

/* 2026-11-14 전체 문장 세부 메뉴: 예전 장르 선택 칸과 같은 자리·같은 크기의 버튼 + 펼침 메뉴 */
.menu-btn{width:100%;min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;font:700 clamp(13px,2.8vw,20px) Arial,"Malgun Gothic",sans-serif;color:#17263b;background:#f5f8fc;border:1px solid #cfd7e3;border-radius:13px;padding:17px 9px;min-height:64px;cursor:pointer;line-height:1.2}
.menu-label{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere}
.menu-caret{flex:none;font-size:.8em;color:#596779}
@media(max-width:470px){.menu-btn{min-height:7.6dvh;padding:8px 4px;font-size:13px}}
@media(min-width:471px){.menu-btn{min-height:72px}}
[hidden]{display:none!important}
.menu-back{position:fixed;inset:0;background:rgba(16,21,34,.35);z-index:1000}
.menu-panel{position:fixed;z-index:1001;left:8px;right:8px;top:8px;max-width:560px;margin:0 auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);display:flex;flex-direction:column;background:#fff;color:#101522;border:1px solid #cfd7e3;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.22);overflow:hidden}
.menu-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #e3e8ef;font-size:17px}
.menu-close{flex:none;min-height:40px;padding:6px 12px;border:1px solid #cfd7e3;border-radius:10px;background:#f5f8fc;color:#17263b;font:700 15px Arial,"Malgun Gothic",sans-serif;cursor:pointer}
.menu-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 12px 14px}
.menu-sec h3{margin:12px 0 6px;font-size:15px;color:#33465f}
.menu-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;padding:7px 10px;border:1px solid #cfd7e3;border-radius:11px;background:#f5f8fc;color:#17263b;font:700 15px Arial,"Malgun Gothic",sans-serif;text-align:start;cursor:pointer;line-height:1.25}
.opt .t{min-width:0;overflow-wrap:anywhere}
.opt .n{flex:none;font-size:12px;font-weight:600;color:#596779;white-space:nowrap}
.opt.zero .n{color:#9aa4b2}
.opt[aria-pressed="true"]{background:#4fd873;border-color:#09b63c;color:#102c18}
.opt[aria-pressed="true"] .n{color:#102c18}
.opt.wide{grid-column:1/-1}
.opt.back{justify-content:center;margin-top:12px}
.menu-guide{margin:12px 0 0;padding-inline-start:24px;font-size:17px;line-height:1.55}
.menu-guide li{margin:0 0 8px}
.menu-draft{margin:12px 0 0;font-size:12px;color:#8a5a00}
@media(max-width:470px){.opt{font-size:14px;min-height:42px;padding:6px 8px}.menu-guide{font-size:16px}}

/* 2026-11-14 코무코 선생님과 함께 공부하기 (추천 학습 모드에서만 보이는 안내 칸 + 메뉴 안 화면). 기존 버튼 크기는 바꾸지 않음 */
.lesson{flex:none;margin:0 0 12px;padding:10px 12px;border:1px solid #c5d8f0;border-radius:16px;background:#f1f7ff;color:#163256}
.tc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tc-title{min-width:0;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.tc-btn{min-height:44px;padding:8px 12px;border:1px solid #9fbbe0;border-radius:12px;background:#fff;color:#163256;font:700 15px Arial,"Malgun Gothic",sans-serif;cursor:pointer;line-height:1.25}
.tc-btn:disabled{opacity:.5}
.tc-exit{flex:none;min-height:36px;padding:4px 10px;font-size:13px}
.tc-guide{margin:6px 0 8px}
.tc-step{margin:2px 0;font-size:14px;line-height:1.4}
.tc-n{display:inline-block;min-width:2.2em;margin-inline-end:4px;padding:0 4px;border-radius:8px;background:#d7e6fa;font-size:12px;font-weight:700;text-align:center}
.tc-big{margin:2px 0;font-size:18px;font-weight:800}
.tc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.tc-main{background:#2f6fd6;border-color:#2f6fd6;color:#fff}
.tc-ok{background:#4fd873;border-color:#09b63c;color:#102c18}
.tc-again{background:#fff3d6;border-color:#e8b84a;color:#5a3b00}
.tc-warn{margin:8px 0 0;font-size:13px;color:#b42318;line-height:1.4}
.korean.ko-hide,.translation.ko-hide{position:relative;color:transparent}
.korean.ko-hide .cue{color:transparent;text-decoration:none}
.korean.ko-hide::after,.translation.ko-hide::after{content:attr(data-hide);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px;color:#7b8798;font-size:clamp(18px,5vw,30px);font-weight:700;letter-spacing:0}
.tc-opt{flex-direction:column;align-items:stretch}
.tc-ot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:16px}
.tc-od{display:block;margin-top:3px;font-size:13px;font-weight:500;color:#596779}
.opt[aria-pressed="true"] .tc-od{color:#102c18}
.tc-badge{padding:1px 8px;border-radius:20px;background:#f2557b;color:#fff;font-size:12px}
.tc-small{margin:8px 2px 0;font-size:12.5px;color:#596779;line-height:1.45}
.tc-why{margin:12px 0 4px;padding:10px;border:1px solid #c5d8f0;border-radius:12px;background:#f1f7ff;font-size:15px;line-height:1.5}
.tc-why p{margin:0 0 8px}
.tc-today{margin:10px 0 4px;padding:10px 12px;border:1px solid #e3e8ef;border-radius:12px;background:#f7f9fc}
.tc-stat{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:4px 0;font-size:15px}
.tc-sl{flex:1 1 auto;min-width:0}
.tc-sv{flex:none;font-size:17px}
.tc-bar{flex:1 0 100%;height:10px;border-radius:6px;background:#e3e8ef;overflow:hidden}
.tc-fill{display:block;height:100%;background:#4fd873}
.tc-note{margin:6px 2px 0;font-size:13.5px;color:#33465f;line-height:1.45}
.tc-amt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tc-amt .opt{justify-content:center}
@media(max-width:470px){.lesson{margin:0 0 6px;padding:6px 8px}.tc-step{font-size:12.5px;line-height:1.3}.tc-guide{margin:3px 0 5px}.tc-btn{min-height:40px;font-size:14px;padding:6px 8px}.tc-title{font-size:13px}}
.tc-opt:disabled{opacity:.5;cursor:default}