/* Main overview: preserve anatomy scale, use wide screens, keep charts nearby. */
.sound-dock{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);gap:12px;margin:12px 0 18px;align-items:start}
.sound-dock>.panel{margin:0;padding:12px 14px;min-width:0;background:#fcfaf5}
.sound-dock h2{font-size:14px;margin:0}
.sound-dock .map-intro,.sound-dock .map-readouts,.sound-dock .map-legend,.sound-dock .step,.sound-dock .spectrogram-details{display:none}
.sound-dock .map-layout{display:block}.sound-dock #vowelMapSvg{height:150px;width:100%}
.sound-dock #vowelMapSvg text{font-size:18px}.sound-dock .map-reference text{font-size:23px;font-weight:600}
.sound-dock .map-footnote{margin:0;font-size:11px;line-height:1.4}
.sound-dock .canvas-wrap{height:150px;margin-top:5px}.sound-dock .chart-foot{font-size:10px}
.sound-dock .empty-chart{display:none}.sound-dock .legend{font-size:11px;gap:8px}
.sound-current{font-size:13px;color:#bc7058;white-space:nowrap;margin-right:auto}
#mapCurrent{transition:transform .12s linear}
@media(min-width:1000px){
 main{max-width:1720px;padding:12px 28px 0}.topbar{padding-left:28px;padding-right:28px}
 .intro{margin-bottom:10px}.intro h1{font-size:25px;margin:0}.intro-copy,.intro-index{display:none}
 .transport{padding:9px 16px}.transport .play-button{height:38px}.tone-compare{margin:7px 0}
 .message:empty{display:none}.message{margin:4px 0;min-height:0}
 .workspace{grid-template-columns:215px minmax(0,1fr);gap:18px}
 .controls{padding:16px}.controls .vowels{margin:16px 0}.controls .helper,.controls .step{display:none}
 .controls .pair-select{margin-bottom:8px}.controls .advanced-sound{padding-top:0;margin-top:0}
 #anatomy{padding:14px 16px 0}.articulation-station{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
 .articulation-station .anatomy-real{grid-template-columns:minmax(0,1fr) 112px;gap:10px;padding-top:0}
 .articulation-station .anatomy-art{max-width:540px;margin:auto}
 .anatomy-figure figcaption,.fold-length-note,.anatomy-detail #vowelDesc{display:none}
 .articulation-station .part-study{padding:12px}.study-deltas{gap:5px}
 .anatomy-detail #foldStatus{font-size:11px;line-height:1.4}
 .anatomy>.section-top>.pill{display:none}
}
@media(min-width:1450px){.articulation-station .anatomy-art{width:min(100%,calc(100dvh - 395px));min-width:440px}.sound-dock{grid-template-columns:minmax(260px,.8fr) minmax(0,1.7fr)}}
@media(max-width:999px){.sound-dock{grid-template-columns:1fr 1.4fr}.sound-dock .legend{display:none}}
@media(max-width:600px){.sound-dock{grid-template-columns:1fr}.sound-dock #vowelMapSvg{height:180px}.sound-dock .canvas-wrap{height:170px}.sound-dock .legend{display:flex}}
@media(min-width:1000px){
 .intro{display:none}.topbar{height:48px}.tone-compare{margin:5px 0;font-size:11px}.tone-compare small{display:none}
 .airflow-panel{padding:7px 10px!important;margin:8px 0!important}.airflow-panel p{display:none}
 .articulation-station .study-deltas{display:none}
 .articulation-station .anatomy-art{max-width:480px}
 .sound-dock{margin-top:8px}.sound-dock #vowelMapSvg,.sound-dock .canvas-wrap{height:132px}
 .articulation-station .part-study{min-height:0}.articulation-station .study-extras{margin-top:7px}
}
@media(min-width:1450px){.articulation-station .anatomy-art{width:clamp(440px,calc(100dvh - 490px),480px)}}
.sound-dock #vowelMapSvg text{font-size:12px}.sound-dock .map-reference text{font-size:16px;font-weight:600}
@media(min-width:1000px){.sound-dock #vowelMapSvg{height:132px}.articulation-station .anatomy-art{max-width:470px}}
@media(min-width:1000px){.message:not(:empty){position:fixed;bottom:18px;left:28px;z-index:60;max-width:480px;padding:10px 14px;border:1px solid #e6dccd;border-radius:9px;background:#fffdf6f2;pointer-events:none;font-size:12px}.anatomy>.spectrogram-details{margin:0 0 14px}.anatomy>.spectrogram-details:not([open]){border:0}.anatomy>.spectrogram-details summary{padding:0;font-size:11px}}
/* Use the former whitespace for two synchronized anatomical views. */
.articulation-station .anatomy-detail{display:none}
.main-larynx{margin:0;padding:8px 10px;border-radius:12px;min-width:0}
.main-larynx header{gap:6px}.main-larynx h3{font-size:13px;margin:0}.main-larynx header p,.main-larynx>.larynx-note,.main-larynx>small{display:none}
.main-larynx header button{font-size:11px;white-space:nowrap}.main-larynx .larynx-columns{grid-template-columns:1fr;gap:10px;margin-top:10px}
.main-larynx h4{font-size:12px;margin:0;text-align:center}.main-larynx .larynx-top,.main-larynx .larynx-side{width:100%;max-width:225px}
.main-larynx .larynx-photo{inset:4% 8% 8%;height:88%}.main-larynx .larynx-direction{font-size:10px;left:20%;bottom:0}
.main-larynx .larynx-status{font-size:10px;line-height:1.4;margin:5px 0 0;min-height:0}.main-larynx .larynx-label{font-size:10px;padding:3px 4px}.main-larynx .larynx-label span{left:auto;right:0}
.sound-dock{grid-template-columns:140px minmax(0,1.6fr) minmax(250px,1fr)}
.lip-card{text-align:center;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.lip-card .vowel-readout{display:grid;width:auto;padding:0}.lip-card .vowel-readout strong{font-size:34px}.lip-card #vowelDesc{display:none}.lip-card .lip-inset{display:flex;flex-direction:column}.lip-card .lip-inset svg{width:90px;height:60px}
@media(min-width:1000px){.articulation-station .anatomy-real{grid-template-columns:minmax(0,1fr) 240px;gap:12px}.articulation-station .anatomy-art{width:100%;min-width:0;max-width:490px}.main-larynx .larynx-top,.main-larynx .larynx-side{max-width:200px}}
@media(min-width:1450px){.articulation-station .anatomy-real{grid-template-columns:minmax(440px,1fr) 250px}.main-larynx .larynx-top,.main-larynx .larynx-side{max-width:210px}.articulation-station .anatomy-art{width:clamp(460px,calc(100dvh - 450px),500px);max-width:500px}}
@media(max-width:1199px){.articulation-station .anatomy-real{grid-template-columns:minmax(0,1fr)}.main-larynx .larynx-columns{grid-template-columns:1fr 1fr}.main-larynx .larynx-top,.main-larynx .larynx-side{max-width:220px}.sound-dock{grid-template-columns:120px minmax(0,1fr)}.sound-dock .vowel-map{grid-column:1/-1}}
@media(max-width:600px){.sound-dock{grid-template-columns:1fr}.sound-dock .vowel-map{grid-column:auto}.lip-card{flex-direction:row}.main-larynx .larynx-columns{gap:4px}.main-larynx .larynx-label{font-size:9px}}
/* Side-by-side larynx views, with lips below the superior view. */
.main-larynx .larynx-columns{grid-template-columns:minmax(140px,.8fr) minmax(200px,1.2fr);gap:12px;align-items:start}
.main-larynx .larynx-top{max-width:220px}.main-larynx .larynx-side{max-width:340px;margin-top:20px}
.main-larynx .lip-card{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:10px 0;margin-top:12px;gap:2px}
.main-larynx .lip-card .vowel-readout{gap:2px}.main-larynx .lip-card .mini-label{display:none}.main-larynx .lip-card .vowel-readout strong{font-size:27px}
.sound-dock{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
.sound-dock .canvas-wrap,.sound-dock #vowelMapSvg{height:225px}
.sound-dock .vowel-map{grid-column:auto}.sound-dock>.panel{align-self:stretch}
@media(min-width:1450px){.workspace{grid-template-columns:200px minmax(0,1fr);gap:14px}.articulation-station{grid-template-columns:minmax(0,1fr) 280px;gap:12px}.articulation-station .anatomy-real{grid-template-columns:minmax(430px,1fr) minmax(400px,1fr);gap:12px}.articulation-station .anatomy-art{width:100%;max-width:500px;min-width:0}.main-larynx .larynx-side{max-width:none;width:100%}}
@media(max-width:1449px){.articulation-station .anatomy-real{grid-template-columns:1fr}.main-larynx .larynx-top{max-width:230px}.main-larynx .larynx-side{max-width:320px}.main-larynx .larynx-columns{grid-template-columns:1fr 1.2fr}}
@media(max-width:600px){.sound-dock{grid-template-columns:1fr}.main-larynx .larynx-columns{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.main-larynx .lip-card{flex-direction:column}.sound-dock .canvas-wrap,.sound-dock #vowelMapSvg{height:210px}}
.main-larynx .larynx-side{aspect-ratio:4/5}.main-larynx .larynx-dots circle{r:4.5px}
/* Larger frontal lips without changing the larynx/workstation order. */
.main-larynx .lip-card .lip-inset svg{width:130px;height:87px}
.main-larynx .lip-card .lip-inset span{font-size:12px}
@media(max-width:600px){.main-larynx .lip-card .lip-inset svg{width:105px;height:70px}}
/* Put articulation controls between the main anatomy and larynx views. */
@media(min-width:1450px){
 .articulation-station{grid-template-columns:minmax(430px,1fr) 280px minmax(400px,1fr);gap:14px;align-items:start}
 .articulation-station .anatomy-real{display:contents}
 .articulation-station .anatomy-figure{grid-column:1;grid-row:1;min-width:0;margin:0}
 .articulation-station>.part-study{grid-column:2;grid-row:1}
 .articulation-station .main-larynx{grid-column:3;grid-row:1}
}
.measured-formants{font-size:14px;font-weight:600;color:#496f65;padding:8px 0;white-space:normal;word-break:keep-all}
#micPoint{transition:transform .12s linear,opacity .2s}.sound-dock .legend{flex-wrap:wrap;font-size:10px}
.main-larynx .lip-card .lip-inset .lip-photo{display:none;width:150px;height:150px;border-radius:12px;border:1px solid #eadbca}
.main-larynx .lip-card .lip-inset.lip-photo-ready .lip-photo{display:block}
.main-larynx .lip-card .lip-inset.lip-photo-ready>svg{display:none}
.main-larynx .lip-card .lip-inset span{font-size:11px;margin-top:5px}
@media(max-width:600px){.main-larynx .lip-card .lip-inset .lip-photo{width:110px;height:110px}}

[hidden]{display:none!important}
.part-study .compact-comparison{display:block;margin:10px 0 0;padding:10px 0 0;border:0;border-top:1px solid #e4ddd2;border-radius:0;background:transparent;box-shadow:none}
.compact-comparison .compare-title{margin:0 0 7px}.compact-comparison .compare-title h2{font-size:14px;margin:0}.compact-comparison .compare-title .step,.compact-comparison .compare-title p,.compact-comparison #comparePlay{display:none}
.compact-comparison .snapshot{padding:6px 0;border:0;display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center;min-width:0}
.compact-comparison .snapshot>div:first-child{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px;flex-wrap:wrap}
.compact-comparison .snapshot-letter{font-size:13px;margin:0}.compact-comparison .snapshot-actions{display:flex;gap:4px}
.compact-comparison .snapshot-actions button{font-size:12px;padding:6px;white-space:nowrap;min-height:32px}
.comparison-result-link{display:inline-block;font-size:12px;color:#456b5f;margin-top:5px}
.main-larynx .larynx-names-toggle{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;padding:7px;border:1px solid #ddd9cf;border-radius:8px;background:#fffdf8;cursor:pointer}
.larynx-names-toggle input{accent-color:#456b5f;width:14px;height:14px;margin:0}
#saved-comparison{scroll-margin-top:90px}.study-extras{margin-top:10px}

.lab-info-dialog{width:min(440px,calc(100vw - 36px));max-height:80dvh;overflow:auto;box-sizing:border-box;border:1px solid #ded6c9;border-radius:16px;background:#fffdf8;color:#38574e;padding:22px;box-shadow:0 18px 80px #243d4033}
.lab-info-dialog::backdrop{background:#263d3a66}
.lab-info-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.lab-info-dialog h3{font-size:18px;margin:0}
.lab-info-dialog p{font-size:14px;line-height:1.7;word-break:keep-all}.lab-info-dialog .dialog-note{color:#777b73;font-size:13px}
.dialog-close{border:0;background:transparent;padding:8px;cursor:pointer;font-size:18px;color:#456b5f}
.mic-confirm{background:#3c6256;color:white;border:0;border-radius:8px;padding:12px 18px;font-size:14px;cursor:pointer}
.part-study .lab-info-dialog .part-location,.part-study .lab-info-dialog .part-reason{display:block}
.compact-comparison .snapshot{margin:0;min-height:0}.compact-comparison .snapshot-actions{margin:0}
@media(min-width:1450px){
 .articulation-station{align-items:stretch}
 .articulation-station .anatomy-figure,.articulation-station>.part-study,.articulation-station .main-larynx{align-self:stretch}
 .articulation-station .anatomy-figure{display:flex;flex-direction:column;justify-content:center;background:#fcfaf6;border-radius:14px}
 .articulation-station>.part-study{display:flex;flex-direction:column}
 .articulation-station .study-extras{margin-top:auto;padding-top:8px}
 .main-larynx{display:flex;flex-direction:column}.main-larynx>.larynx-status{margin-top:auto;padding-top:8px}
}

.nasal-actions{display:flex;gap:8px;flex-wrap:wrap}.nasal-actions button{border:1px solid #a3b9ad;border-radius:8px;background:#eef3ed;color:#365e50;padding:10px 12px;font-size:14px;cursor:pointer}

.compact-comparison .compare-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.comparison-help{border:1px solid #cbd7ce;border-radius:6px;background:#f6f8f2;color:#456b5f;padding:4px 7px;font-size:12px;cursor:pointer;white-space:nowrap}.comparison-steps{padding-left:23px;margin:18px 0}.comparison-steps li{font-size:14px;line-height:1.7;margin:10px 0;word-break:keep-all}

.about .about-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-top:18px}
.about-guide .guide-card{padding:18px 20px;border:1px solid #e4ddd3;border-radius:12px;background:#faf9f5;min-width:0}
.about-guide .guide-card h3{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 12px;font-size:17px;color:#304e45;line-height:1.5}
.about-guide .guide-card h3 span{font-size:12px;padding:3px 8px;border-radius:5px;background:#e8ece5;color:#466353}
.about-guide .guide-model{background:#fff7f0;border-color:#eddacb}.about-guide .guide-model h3 span{background:#f9e2d4;color:#a04c34}
.about-guide .guide-mic{background:#f0f8f5;border-color:#cddfd6}.about-guide .guide-mic h3 span{background:#dceee6;color:#326451}
.about-guide .guide-card p{font-size:15px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word;margin:0 0 10px;color:#4a5751}
.about-guide .guide-card p:last-child{margin-bottom:0}.about-guide .guide-card strong{font-weight:650;color:#304e45}
.about-guide .guide-card .guide-detail{font-size:13px;color:#68736b;padding-top:10px;border-top:1px solid #dedfd5}
@media(max-width:700px){.about .about-guide{grid-template-columns:1fr;gap:10px}.about-guide .guide-card{padding:16px}.about-guide .guide-card h3{font-size:16px}}

/* Show only the current rendered portrait during startup. Keep failure fallback. */
#anatomyFigure:not(.portrait-ready):not(.portrait-failed)>*{visibility:hidden}
#anatomyFigure:not(.portrait-ready):not(.portrait-failed)::after{content:'조음기관 그림을 준비하고 있습니다…';position:absolute;inset:0;display:grid;place-items:center;background:#faf7f0;color:#5b7066;font-size:14px;padding:24px;text-align:center;z-index:30}
.controls .advanced-sound{margin-top:12px;padding:12px;border:1px solid #e6d7cb;border-radius:10px;background:#fff6ee}
.controls .advanced-sound summary{font-size:13px;line-height:1.6;color:#725849;font-weight:600;word-break:keep-all}
.controls .advanced-sound .control-block{margin-top:14px}
.articulation-station>.part-study{background:linear-gradient(160deg,#fff7ee,#fcfaf5 60%);border-color:#e4d5c6}
.main-larynx{background:linear-gradient(150deg,#f0f7f3,#fffdf8 65%);border-color:#d4dfd6}
.sound-dock .spectrum-panel{border-top:3px solid #db957b}.sound-dock .vowel-map{border-top:3px solid #7fae9e}
.articulation-station .art-control label,.articulation-station .art-control output{font-size:13px;color:#53675c}
.articulation-station .art-control .range-ends,.controls .range-ends{font-size:12px;color:#697369;line-height:1.5}
.part-tabs button{font-size:13px}.study-title b{font-size:14px}
.compact-comparison .snapshot>div:first-child,.compact-comparison .snapshot-actions button,.comparison-result-link,.study-extras summary{font-size:13px}
.sound-dock .legend,.sound-dock .chart-foot,.sound-dock .map-footnote{font-size:12px;color:#627267;line-height:1.5}
.main-larynx h3{font-size:15px}.main-larynx h4{font-size:13px}.main-larynx .larynx-status,.main-larynx .larynx-direction{font-size:12px;color:#687369}
.main-larynx .larynx-label{font-size:11px}.main-larynx .lip-card .lip-inset span{font-size:12px;color:#687369}
.about>summary{font-size:16px;font-weight:600;color:#3c5c50}.ab-help,.gallery-intro,.gallery-note{font-size:13px;line-height:1.7;color:#637266}

.anatomy>.spectrogram-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;font-size:14px;font-weight:600;color:#3d6356;background:#edf4ef;border:1px solid #cedfd3;border-radius:10px;cursor:pointer;list-style:none}.spectrogram-details summary::-webkit-details-marker{display:none}.spectrogram-action{font-size:13px;white-space:nowrap}.spectrogram-details[open] summary{margin-bottom:12px;background:#e1eee6}

.recent-analysis{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:#eef5f0;border:1px solid #ccdfd4;border-radius:10px}.recent-analysis button{padding:8px 12px;border:1px solid #a7c3b5;border-radius:7px;background:#fffdf8;color:#365e50;font-size:13px}.recent-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1}.recent-controls label{flex:1;min-width:180px;font-size:13px}.recent-controls input{width:100%}.recent-controls span{font-size:12px;color:#617267}
.canvas-wrap{position:relative}.frequency-cursor{position:absolute;top:9px;bottom:21px;border-left:1px dashed #365e50;pointer-events:none}.frequency-cursor span{position:absolute;top:12px;left:6px;white-space:nowrap;background:#365e50;color:white;border-radius:5px;padding:4px 7px;font-size:12px}.frequency-cursor.near-right span{left:auto;right:6px}
.spectrogram-wrap{height:240px}.spectrogram-label{position:absolute;top:0;bottom:0;left:5px;line-height:26px;font-size:11px;color:#fff;text-shadow:0 1px 3px #000}.color-scale{background:linear-gradient(90deg,#101734,#1c5b90,#25b1a4,#efdd53,#f46c2d)!important}

.spectrogram-label{display:flex;flex-direction:column;justify-content:space-between;top:4px;bottom:4px;line-height:1;font-size:11px;background:#10173499;padding:3px;border-radius:4px}

.recent-audio{width:260px;max-width:100%;height:40px}
@media(max-width:1449px) and (min-width:1000px){.workspace{grid-template-columns:190px minmax(0,1fr);gap:12px}.articulation-station{grid-template-columns:minmax(0,1fr) 270px}.controls{padding:12px}}
@media(max-width:760px){
 .topbar{padding:10px 14px;height:auto}.vobal-name{font-size:17px}
 .transport{position:sticky;top:0;z-index:45;padding:9px 12px;gap:10px;flex-wrap:wrap}.transport .play-button{min-height:44px}
 .workspace{display:flex;flex-direction:column;gap:12px}.controls{position:static;width:100%;box-sizing:border-box}
 #anatomy{padding:12px;min-width:0}.articulation-station{display:flex;flex-direction:column;gap:12px}.articulation-station .anatomy-real{display:flex;flex-direction:column;width:100%}
 .articulation-station .anatomy-figure{width:100%}.articulation-station .anatomy-art{max-width:460px;width:100%}.articulation-station>.part-study{width:100%;box-sizing:border-box}
 .main-larynx{width:100%;box-sizing:border-box}.main-larynx .larynx-columns{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
 .part-tabs button,.snapshot-actions button,.comparison-help,.mic-start,.recent-analysis button{min-height:40px}
 .art-control input[type=range],.recent-controls input{min-height:32px;touch-action:pan-y}
 .sound-dock{grid-template-columns:minmax(0,1fr)}.sound-dock .canvas-wrap{overflow-x:auto}.sound-dock #spectrum{min-width:540px}
 .sound-dock .vowel-map{min-width:0}.recent-controls{display:flex;flex-direction:column;align-items:stretch;width:100%}.recent-controls label{width:100%;min-width:0}.recent-audio{width:100%}
 .spectrogram-details summary{flex-wrap:wrap;font-size:13px!important}.lab-info-dialog{max-height:85dvh;padding:18px}.lab-info-dialog h3{font-size:17px}
 .anatomy>.section-top{flex-wrap:wrap;gap:10px}.mic-start{font-size:13px}.main-larynx .larynx-label span{max-width:160px}
 .ab-portraits{grid-template-columns:1fr}.muscle-workbench{min-width:0}.guide-card{min-width:0}
}

@media(max-width:760px){
 .intro{display:none}.workspace{margin-top:12px}
 .articulation-station .anatomy-real{display:contents}
 .articulation-station .anatomy-figure{order:1;position:sticky;top:74px;z-index:8;background:#fffdf8;border:1px solid #e5ded2;border-radius:12px}
 .articulation-station .anatomy-art{width:min(100%,34dvh);margin:auto}
 .articulation-station>.part-study{order:2}.articulation-station>.controls{order:3}.articulation-station .main-larynx{order:4}
 .controls .vowels{margin:12px 0}.controls .advanced-sound{padding:10px}.main-larynx .larynx-label{font-size:10px}
}
@media(max-width:760px){#anatomy{overflow:visible}.articulation-station .anatomy-art{max-width:30dvh!important;min-width:0!important}.articulation-station .anatomy-figure figcaption{display:none}.articulation-station .study-deltas{display:none}.articulation-station .anatomy-figure{top:64px}.articulation-station .art-control{scroll-margin-top:calc(30dvh + 90px)}}