/* Shared PineLingo typography and learning composition. */
:root{--sans:"Noto Sans KR",sans-serif}
body,body *{font-family:var(--sans)!important}
button.word-study-inline{display:inline!important;min-height:0!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;font:inherit!important;letter-spacing:inherit!important;line-height:inherit!important;text-align:inherit!important;vertical-align:baseline!important}
button.word-study-inline:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.selection-study-view{max-width:900px;padding:16px 0 40px}
.selection-study-header{margin-bottom:22px}
.selection-study-header h1{font-size:28px;line-height:1.4;letter-spacing:-.6px}
.selection-study-detail{padding:28px;border-radius:22px;border:1px solid var(--line);background:var(--surface);box-shadow:0 8px 28px #16474305}
.selection-study-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.selection-study-order{padding-top:22px}
.studio-route-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.studio-route-settings-heading h3{margin:0;font-size:18px}
.studio-route-selection-count{font-size:13px;font-weight:600;color:var(--pine);background:var(--soft);border-radius:20px;padding:5px 10px;white-space:nowrap}
.studio-route-settings .settings-note{margin:0 0 16px;font-size:14px;line-height:1.7}
.studio-route-settings-list{gap:8px;margin:0}
.studio-route-settings-row{padding:8px 10px;border-radius:12px;gap:12px;min-height:64px}
.studio-route-settings-row[data-selected=false]{background:#f8faf9;border-color:#e4ebe7}
.studio-route-mode-label{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:44px;cursor:pointer}
.studio-route-mode-label input{width:20px;height:20px;min-height:20px;padding:0;margin:0;flex:none;accent-color:var(--pine)}
.studio-route-mode-label .studio-mode-icon{width:38px;height:38px;flex:none;color:var(--pine)}
.studio-mode-icon svg{display:block;width:100%;height:100%}
.studio-route-settings-number{flex:0 0 16px;font-size:12px}
.studio-route-settings-title{font-size:15px;font-weight:600;line-height:1.5;word-break:keep-all}
.studio-route-settings-row[data-selected=false] .studio-route-settings-title{font-weight:400;color:var(--muted)}
.studio-route-settings .studio-route-order-move{display:inline-flex;align-items:center;justify-content:center;min-width:44px;width:44px;min-height:44px;padding:0;border-radius:9px;color:var(--pine)}
.studio-route-order-move svg{flex:none}
.studio-route-settings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.studio-route-settings-footer button{min-height:44px}
.studio-route-settings-status:empty,.selection-study-status:empty{display:none}
.selection-study-start{display:flex;justify-content:flex-end;gap:12px;padding-top:22px;margin-top:4px;border-top:1px solid var(--line)}
.selection-study-start button{min-height:48px;min-width:132px;padding:12px 20px;font-size:15px}
.selection-study-start .primary-button{width:auto}
.selection-study-status{margin:12px 0 0;color:var(--pine)}
.selection-study-extras{justify-content:space-between;gap:8px;font-size:14px}
.selection-study-extras button{padding:6px 0;font-size:14px}
body[data-view=studio]:has(.studio-audio-player){height:auto;min-height:100svh;overflow:auto}
body[data-view=studio]:has(.studio-audio-player) #workspace{padding:12px 24px 36px;flex:1}
body[data-view=studio]:has(.studio-audio-player) #main{height:auto}
#studio-view:has(.studio-audio-player){height:auto;min-height:0;max-width:1020px;grid-template-rows:auto auto auto;gap:16px;padding:0}
#studio-view:has(.studio-audio-player)>.studio-heading{min-height:48px}
#studio-view:has(.studio-audio-player) .studio-heading h1{font-size:26px;letter-spacing:-.5px}
#studio-view:has(.studio-audio-player)>.studio-audio-player{height:auto;min-height:380px;padding:36px 32px 26px;grid-template-rows:auto auto auto auto auto auto auto;align-content:center;justify-items:center;gap:12px;border-radius:24px;background:var(--surface);box-shadow:0 8px 28px #16474306}
#studio-view .studio-audio-player>.studio-audio-visual{height:30px;margin:0 0 12px;grid-row:1}
#studio-view .studio-audio-player>[data-audio-current]{grid-row:2;width:100%;max-width:780px;height:auto;min-height:0;max-height:none;margin:0;text-align:center;display:block;font-size:clamp(24px,2.6vw,36px);font-weight:600;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
#studio-view .studio-audio-player>[data-audio-phonetics]{grid-row:3;height:auto;min-height:0;margin:0 0 16px;max-width:720px;font-size:18px;line-height:1.7;text-align:center}
#studio-view .studio-audio-player>.studio-audio-actions{grid-row:4;grid-template-columns:100px minmax(150px,190px) 100px;gap:12px;margin:0}
#studio-view .studio-audio-player>.studio-audio-actions button{font-size:16px;min-height:48px}
#studio-view .studio-audio-player>.studio-shortcut{grid-row:5;font-size:13px;margin:0;line-height:1.6;text-align:center}
#studio-view .studio-audio-player>.studio-audio-position{grid-row:6;font-size:14px!important;line-height:1.6;margin:0;color:var(--muted)}
#studio-view .studio-audio-player>.studio-speech-status,#studio-view .studio-audio-player>[data-studio-wait]{grid-row:auto;position:static!important;font-size:13px!important;text-align:center;margin:0;line-height:1.7;padding:0}
#studio-view .studio-audio-player>.studio-stop{position:static!important;grid-row:auto;justify-self:center;margin:0}
#studio-view:has(.studio-audio-player)>.studio-audio-advanced{position:static;width:100%;max-height:none;max-width:none;box-shadow:none;border-radius:14px}
#studio-view:has(.studio-audio-player)>.studio-audio-advanced:not([open]){width:100%}
#studio-view:has(.studio-audio-player)>.studio-audio-advanced>summary{font-size:14px;min-height:44px;padding:10px 16px}
#studio-view:has(.studio-audio-player) .studio-mode-icon{width:40px;height:40px}
#studio-view:has(.studio-exercise)>.studio-heading h1{font-size:26px;line-height:1.4}
#studio-view:has(.studio-exercise)>.studio-heading .studio-mode-icon{width:38px;height:38px}
#studio-view:has(.studio-exercise)>.studio-heading{gap:12px}
.studio-toolbar button,.studio-toolbar summary{font-size:14px;gap:6px;padding:8px 10px;border-radius:10px}
.studio-toolbar .studio-route-progress{font-size:14px;font-weight:600}
.studio-toolbar .studio-route-time{font-size:14px}
.studio-toolbar .studio-route-status{gap:10px}
.studio-toolbar .studio-path button,.studio-toolbar .studio-route-skip,.studio-toolbar .studio-study-options>summary{border-radius:10px}
.studio-automatic .studio-phase-label{font-size:15px;line-height:1.7;max-width:none}
.studio-automatic .studio-pause-toggle{font-size:16px;min-width:158px;min-height:46px}
.studio-automatic .studio-shortcut{max-width:none;font-size:13px;line-height:1.6;white-space:nowrap}
.studio-automatic .studio-actions{gap:10px}
@media(max-width:760px){
 .selection-study-view{padding-top:8px}.selection-study-header h1{font-size:24px}
 .selection-study-detail{padding:18px 14px;border-radius:18px}
 .selection-study-fields{gap:12px}.selection-study-field{font-size:14px}
 .studio-route-settings-row{gap:8px;padding:8px}.studio-route-mode-label{gap:8px}
 .studio-route-mode-label .studio-mode-icon{width:32px;height:32px}
 .studio-route-settings-number{display:none}.studio-route-settings-title{font-size:14px}
 .studio-route-settings-actions{gap:2px}
 .selection-study-start{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
 .selection-study-start button{width:100%;min-width:0;padding:10px 8px;font-size:14px;white-space:normal}
 .selection-study-extras{align-items:flex-start;flex-direction:column}
 #studio-view:has(.studio-audio-player){grid-template-rows:auto auto auto;gap:12px}
 body[data-view=studio]:has(.studio-audio-player) #workspace{padding:8px 12px 24px}
 #studio-view:has(.studio-audio-player) .studio-heading h1{font-size:23px}
 #studio-view:has(.studio-audio-player)>.studio-audio-player{min-height:340px;padding:24px 16px;grid-template-rows:auto auto auto auto auto auto auto;gap:12px}
 #studio-view .studio-audio-player>[data-audio-current]{font-size:26px}
 #studio-view .studio-audio-player>[data-audio-phonetics]{font-size:17px}
 #studio-view .studio-audio-player>.studio-audio-actions{grid-template-columns:64px minmax(120px,160px) 64px;gap:8px;width:100%}
 #studio-view .studio-audio-player>.studio-audio-actions button{padding:8px;font-size:15px}
 #studio-view .studio-audio-player>.studio-shortcut{font-size:12px}
 .studio-toolbar{flex-wrap:wrap;gap:8px}.studio-toolbar .studio-route-status{flex-wrap:wrap;min-width:0}
 .studio-toolbar button,.studio-toolbar summary{font-size:13px;min-height:42px}
 .studio-toolbar .studio-route-progress,.studio-toolbar .studio-route-time{font-size:13px}
 .studio-automatic .studio-shortcut{white-space:normal;font-size:12px}
}
@media(max-width:380px){.studio-route-mode-label .studio-mode-icon{width:28px;height:28px}.studio-route-settings-title{font-size:13px}.studio-route-settings-row{padding:6px}.studio-route-mode-label{gap:6px}}

/* Content determines lesson height: long answers must never scroll above the card. */
body[data-view=studio]:has(.studio-exercise){height:auto;min-height:100svh;display:block}
body[data-view=studio]:has(.studio-exercise) #workspace{flex:none;padding:12px 24px 32px}
body[data-view=studio]:has(.studio-exercise) #main{height:auto}
#studio-view:has(.studio-exercise){display:flex;flex-direction:column;gap:12px;height:auto;min-height:0;padding:0}
#studio-view:has(.studio-exercise)>.studio-heading{min-height:46px}
#studio-view:has(.studio-exercise)>.studio-progress{margin:0}
#studio-view:has(.studio-exercise)>.studio-item-meta{white-space:normal;overflow:visible;font-size:13px;line-height:1.5;gap:8px}
#studio-view:has(.studio-exercise)>.studio-automatic{min-height:70px;height:auto;flex-wrap:wrap;padding:14px 18px;gap:10px}
#studio-view:has(.studio-exercise) .studio-automatic .studio-actions{flex-wrap:wrap;gap:8px}
#studio-view:has(.studio-exercise) .studio-automatic .studio-phase-label{font-size:15px;line-height:1.6;flex:1 1 220px;margin:0}
#studio-view:has(.studio-exercise) .studio-automatic .studio-shortcut{font-size:12px}
#studio-view:has(.studio-exercise)>.studio-exercise{height:auto;min-height:0;overflow:visible;margin:0}
#studio-view:has(.studio-exercise)>.studio-exercise>.studio-task{height:auto;max-height:none;min-height:300px;overflow:visible;justify-content:flex-start;padding:28px;gap:16px}
#studio-view:has(.studio-exercise) .studio-task>*{flex-shrink:0;min-width:0}
#studio-view:has(.studio-exercise) .studio-prompt{min-height:0;margin:0;padding:0 0 18px}
#studio-view:has(.studio-exercise) .studio-prompt .studio-phrase,#studio-view .studio-answer>.studio-phrase{font-size:28px;line-height:1.65;overflow-wrap:break-word;word-break:normal;text-wrap:pretty}
#studio-view .studio-answer{gap:8px 20px;text-align:start}
#studio-view .studio-answer>.studio-meaning,#studio-view .studio-answer>.studio-example{font-size:20px;line-height:1.7;overflow-wrap:break-word}
#studio-view .studio-answer>.studio-phonetics{font-size:17px;line-height:1.7}
#studio-view .studio-answer>button{font-size:14px;min-height:44px;max-width:100%;white-space:normal}
#studio-view .studio-task>h2{font-size:20px;line-height:1.6}
#studio-view .studio-task>.studio-note{font-size:16px!important;line-height:1.7}
#studio-view .studio-task>.studio-eyebrow{display:none}
#studio-view .studio-countdown{position:static;width:100%;margin-top:4px;font-size:13px}
#studio-view .studio-audio-reveal{font-size:14px;min-height:44px}
@media(max-width:760px){
 body[data-view=studio]:has(.studio-exercise) #workspace{padding:10px 12px 28px}
 #studio-view:has(.studio-exercise)>.studio-exercise>.studio-task{padding:22px 18px;min-height:260px;gap:14px}
 #studio-view:has(.studio-exercise) .studio-prompt .studio-phrase,#studio-view .studio-answer>.studio-phrase{font-size:24px}
 #studio-view .studio-answer{grid-template-columns:minmax(0,1fr)}
 #studio-view .studio-answer>button,#studio-view .studio-answer>button:first-of-type,#studio-view .studio-answer>button:nth-of-type(2){grid-column:1;grid-row:auto;justify-self:start}
 #studio-view .studio-answer>.studio-example{margin-top:12px}
 #studio-view:has(.studio-exercise)>.studio-automatic{padding:14px}
 #studio-view:has(.studio-exercise) .studio-automatic .studio-actions{width:100%}
 #studio-view:has(.studio-exercise) .studio-automatic .studio-shortcut{display:none}
 #studio-view .studio-task>h2{font-size:18px}
}