/* One screen, no page scroll (loaded last).
   Desktop views are laid out as fixed-height grids sized to the viewport.
   body zoom scales viewport units too, so heights divide by the zoom factor. */
:root{--pl-zoom:1;--fit-h:calc(100dvh / var(--pl-zoom));--fit-head:64px;--fit-foot:30px;--fit-bar:0px}

/* Zoom only when the screen is tall enough for it; short laptop screens keep 100%. */
@media (min-width:1000px){body{zoom:1}}
@media (min-width:1000px) and (min-height:780px){:root{--pl-zoom:1.12}body{zoom:1.12}}
@media (min-width:1360px) and (min-height:880px){:root{--pl-zoom:1.22}body{zoom:1.22}}
@media (min-width:1700px) and (min-height:1040px){:root{--pl-zoom:1.32}body{zoom:1.32}}

@media (min-width:1000px) and (min-height:560px){
  html:has(>body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words])){overflow:hidden}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]){height:var(--fit-h);overflow:hidden}
  body:has(#audio-bar:not([hidden])){--fit-bar:var(--fit-audio-bar,184px);--fit-foot:0px}
  body[data-view=words]:has(#wordbook-study-bar:not([hidden])){--fit-bar:128px;--fit-foot:0px}
  body[data-view=words]:has(#wordbook-study-bar:not([hidden])) .site-utility-footer{display:none!important}

  /* header: one slim row */
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .site-header{height:var(--fit-head)!important;min-height:0!important;box-sizing:border-box;padding-top:6px!important;padding-bottom:6px!important;align-items:center!important}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .home-language-settings,body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .home-language-settings .site-language{min-height:0!important;height:auto!important;margin:0!important;padding:0!important}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .home-language-settings .site-language>span{display:none}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .home-language-settings .language-pair{align-items:center!important}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .home-language-settings select{min-height:38px!important}

  /* workspace fills what is left */
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) #workspace{height:calc(var(--fit-h) - var(--fit-head) - var(--fit-foot) - var(--fit-bar));box-sizing:border-box;padding:10px 24px 14px!important;overflow:hidden}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) #main{height:100%;min-height:0}

  /* footer strip */
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .site-utility-footer{position:fixed;right:0;bottom:0;left:auto;height:30px;box-sizing:border-box;padding:0 24px!important;display:flex;align-items:center;max-width:none;margin:0;z-index:5}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .site-utility-footer p{margin:0;font-size:12px;color:var(--pl-muted)}
  body:has(#audio-bar:not([hidden])) .site-utility-footer{display:none!important}

  /* ---------- home ---------- */
  body[data-view=library] #library-view{height:100%;display:flex;flex-direction:column;gap:12px;padding:0 24px!important;box-sizing:border-box}
  body[data-view=library] #library-view>*{flex:none}
  body[data-view=library] #learning-studio{margin:0!important}
  body[data-view=library] .studio-learning-entry{min-height:76px!important;padding:12px 16px!important}
  body[data-view=library] .library-heading{flex:1 1 auto!important;min-height:0;margin:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px!important;align-items:stretch!important}
  body[data-view=library] .home-curiosity,body[data-view=library] .daily-quote{min-height:0!important;height:auto!important;overflow:hidden;padding:14px 20px!important}
  body[data-view=library] .daily-learning-heading{padding-bottom:8px!important;margin-bottom:4px!important}
  body[data-view=library] .home-curiosity .daily-learning-content,body[data-view=library] .daily-quote .daily-learning-content{flex:1 1 auto;min-height:0!important;overflow:auto;scrollbar-width:thin}
  body[data-view=library] .home-curiosity .curiosity-paper{min-height:0!important}
  body[data-view=library] .daily-learning-actions{padding-top:8px!important}
  /* the home footer is the last row of the view; the location note (fixed, right) shares that line */
  body[data-view=library]{--fit-foot:0px}
  body[data-view=library] #workspace{padding-bottom:2px!important}
  body[data-view=library] .forest-footer{height:28px;box-sizing:border-box;margin:-4px 0 0!important;padding:0!important;border:0!important;display:flex!important;justify-content:flex-start!important;align-items:center;gap:14px;max-width:calc(100% - 360px);font-size:12px;color:var(--pl-muted)}
  body[data-view=library] .forest-footer *{font-size:12px!important;line-height:1.2!important;margin:0!important;padding:0!important;min-height:0!important}
  body[data-view=library] .forest-footer>span{display:inline-flex!important;align-items:baseline;gap:5px;white-space:nowrap;font-weight:700}
  body[data-view=library] .forest-footer small{display:inline!important;font-weight:400}
  body[data-view=library] .forest-footer .learning-design-entry{display:flex!important;flex-direction:row!important;align-items:baseline;gap:8px;white-space:nowrap;border:0!important;background:none!important;box-shadow:none!important}
  body[data-view=library] .forest-footer .learning-design-entry p{display:inline!important}
  body[data-view=library] .forest-footer .learning-design-entry button{border:0;background:none;color:var(--pl-pine);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  body[data-view=library] .daily-quote .outro-quote{font-size:clamp(19px,1.7vw,24px)!important;margin-bottom:4px!important}
  body[data-view=library] .daily-quote .quote-meaning{font-size:15px!important;margin:4px 0!important}
  body[data-view=library] .daily-quote .quote-audio{margin:6px 0!important}
  body[data-view=library] .daily-quote .quote-vocabulary{margin-top:4px!important;padding:8px 12px!important}
  body:has(#audio-bar:not([hidden])) .forest-footer{display:none!important}

  /* ---------- 골라서 학습: settings left, the full route as a 3-column grid right ---------- */
  body[data-view=selection] .selection-study-view{height:100%;max-width:1240px;margin:0 auto!important;padding:0 24px!important;box-sizing:border-box}
  body[data-view=selection] .selection-study-shell{height:100%;display:flex;flex-direction:column;gap:12px}
  body[data-view=selection] .selection-study-header{flex:none;margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  body[data-view=selection] .selection-study-header h1{margin:0;font-size:26px}
  body[data-view=selection] .selection-study-header p{font-size:14.5px}
  body[data-view=selection] .selection-study-detail{flex:1 1 auto;min-height:0;max-width:none;margin:0;padding:18px 20px;box-sizing:border-box;display:grid;grid-template-columns:304px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"fields order" "start order" "status order" "extras order";column-gap:22px;row-gap:12px;align-content:start}
  body[data-view=selection] .selection-study-fields{grid-area:fields;grid-template-columns:1fr;gap:10px;margin:0}
  body[data-view=selection] .selection-study-field{gap:5px;font-size:14px}
  body[data-view=selection] .selection-study-field select{min-height:40px;padding:7px 10px}
  body[data-view=selection] .selection-study-studied{min-height:36px;font-size:14px}
  body[data-view=selection] .selection-study-start{grid-area:start;margin:0;gap:8px;display:grid;grid-template-columns:auto minmax(0,1fr)}
  body[data-view=selection] .selection-study-start button{min-height:44px!important;width:100%;padding:0 12px!important;white-space:nowrap!important}
  body[data-view=selection] .selection-study-status{grid-area:status;margin:0;min-height:0}
  body[data-view=selection] .selection-study-status:empty{display:none}
  body[data-view=selection] .selection-study-extras{grid-area:extras;align-self:end;margin:0;padding-top:12px;flex-direction:column;align-items:stretch;gap:4px}
  body[data-view=selection] .selection-study-extras button{min-height:38px;margin:0;width:100%;justify-content:flex-start;text-align:left}
  body[data-view=selection] .selection-study-order{grid-area:order;min-height:0;overflow:auto;padding:0 0 0 22px;border-top:0;border-left:1px solid var(--line,#dce7de);scrollbar-width:thin}
}

/* ---------- 내 정보: identity + stats on top, insight panels fill the rest ---------- */
@media (min-width:1000px) and (min-height:560px){
  body[data-view=profile] #profile-view{height:100%;max-width:1240px;margin:0 auto;padding:0 24px!important;box-sizing:border-box;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px 14px;align-content:stretch}
  body[data-view=profile] #profile-view>*{grid-column:1/-1;margin:0!important;min-width:0}
  body[data-view=profile] #profile-view>.pf-hero{grid-column:1/8;grid-row:1;padding:18px 22px!important;align-self:stretch}
  body[data-view=profile] #profile-view>.pf-stats{grid-column:8/13;grid-row:1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;align-self:stretch}
  body[data-view=profile] .pf-stat{padding:10px 14px!important;display:flex!important;flex-direction:column;justify-content:center;gap:2px}
  body[data-view=profile] .pf-stat strong{font-size:24px!important;line-height:1.2}
  body[data-view=profile] #profile-view>:is(#profile-error,#profile-signin,#account-status,.account-actions,#profile-metrics){grid-row:2}
  body[data-view=profile] #profile-view>#profile-error{padding:10px 14px!important;font-size:14px}
  body[data-view=profile] #profile-view>:is(#account-status,#profile-metrics):empty{display:none}
  body[data-view=profile] #profile-view>.profile-insights{grid-column:1/9;grid-row:3;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important;min-height:0}
  body[data-view=profile] #profile-view>.profile-history{grid-column:9/13;grid-row:3}
  body[data-view=profile] .profile-panel{min-height:0;overflow:auto;padding:16px 18px!important;box-sizing:border-box;scrollbar-width:thin}
  body[data-view=profile] .profile-panel h2{font-size:17px!important;margin:0 0 8px!important}
  body[data-view=profile] #profile-view>.profile-record-note{grid-row:4;font-size:13px}
  body[data-view=profile] #profile-view>.profile-record-note summary{min-height:28px!important;padding:0!important}
  body[data-view=profile] #profile-view>.profile-record-note[open]{position:relative}
  body[data-view=profile] #profile-view>.profile-record-note[open] p{position:absolute;left:0;bottom:100%;z-index:6;max-width:640px;margin:0 0 6px;padding:12px 14px;border:1px solid var(--pl-line);border-radius:12px;background:var(--pl-surface);box-shadow:0 10px 30px rgba(20,40,32,.12)}
}

/* ---------- 단어장: tools on the left, the word list scrolls inside its own panel ---------- */
@media (min-width:1000px) and (min-height:560px){
  body[data-view=words] #words-view{height:100%;max-width:1240px;margin:0 auto;padding:0 24px!important;box-sizing:border-box;display:grid!important;grid-template-columns:320px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"side main" "credits main";gap:10px 22px}
  body[data-view=words] .wordbook-side{grid-area:side;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;scrollbar-width:thin}
  body[data-view=words] .wordbook-side>*{margin:0!important;flex:none}
  body[data-view=words] .wordbook-side h2{font-size:26px!important;line-height:1.25}
  body[data-view=words] .wordbook-side .wordbook-note{font-size:14px}
  body[data-view=words] .wordbook-top-tools{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  body[data-view=words] .wordbook-top-tools>*{width:100%;min-height:42px!important;height:auto!important;padding-inline:12px!important;white-space:nowrap}
  body[data-view=words] .wordbook-side .eyebrow{font-size:11px}
  body[data-view=words] .wordbook-sync{font-size:13px}
  body[data-view=words] .wordbook-sync :is(button,a){min-height:34px!important;padding:0 12px!important}
  body[data-view=words] .wordbook-settings,body[data-view=words] .wordbook-filter-panel{padding:0!important}
  body[data-view=words] .wordbook-settings>summary{min-height:40px!important}
  body[data-view=words] .wordbook-settings .appearance-field{width:auto!important}
  body[data-view=words] .wordbook-settings .wordbook-view-options{flex-wrap:wrap}
  body[data-view=words] .wordbook-sync{padding:12px 14px!important;flex-wrap:wrap;gap:8px}
  body[data-view=words] .wordbook-filter-grid{grid-template-columns:1fr!important}
  body[data-view=words] .wordbook-main{grid-area:main;min-height:0;display:flex;flex-direction:column;gap:12px}
  body[data-view=words] .wordbook-main>#word-recall{flex:none;margin:0!important}
  body[data-view=words] .wordbook-main>#wordbook{flex:1 1 auto;min-height:0;overflow:auto;margin:0!important;padding:14px;box-sizing:border-box;border:1px solid var(--pl-line);border-radius:18px;background:var(--pl-surface);scrollbar-width:thin}
  body[data-view=words] .wordbook-main>#wordbook>.wordbook-empty{height:100%;box-sizing:border-box;margin:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
  body[data-view=words] .wordbook-credits{grid-area:credits;display:flex;gap:16px;position:relative}
  body[data-view=words] .wordbook-credits>details{margin:0!important;padding:0!important;border:0!important}
  body[data-view=words] .wordbook-credits summary{min-height:28px!important;padding:0!important;font-size:13px}
  body[data-view=words] .wordbook-credits>details[open]{position:absolute!important;left:0;bottom:0;z-index:6;width:min(680px,calc(100vw - 80px));max-height:min(440px,70vh);overflow:auto;box-sizing:border-box;padding:10px 14px!important;border:1px solid var(--pl-line)!important;border-radius:12px;background:var(--pl-surface);box-shadow:0 10px 30px rgba(20,40,32,.14);font-size:13px}
}

/* ---------- 학습 설정: a centred wide panel, every tab laid out in columns ---------- */
#reading-dialog .settings-tabs [role=tab]::before{content:none!important}
@media (min-width:1000px) and (min-height:560px){
  #reading-dialog[open]{inset:0!important;margin:auto!important;width:min(1120px,calc(100vw / var(--pl-zoom) - 48px))!important;height:min(700px,calc(var(--fit-h) - 40px))!important;max-height:none!important;border-radius:20px!important;box-shadow:0 30px 80px rgba(10,30,24,.25)!important;animation:fit-dialog-in .22s ease both!important}
  @keyframes fit-dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  #reading-dialog>.dialog-header{position:static!important;padding:12px 24px 2px!important}
  #reading-dialog>.settings-note{margin:0 24px 6px!important}
  #reading-dialog .settings-tabs{position:static!important;margin:0 24px 8px!important;max-width:620px;flex:none}
  #reading-dialog [role=tabpanel]{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 24px 8px!important;gap:12px!important;scrollbar-width:thin}
  #reading-dialog>footer,#reading-dialog .dialog-actions{position:static!important;flex:none;padding:10px 24px 14px!important;background:none!important;border-top:1px solid var(--pl-line);display:flex;justify-content:flex-end}

  /* 화면 */
  #settings-pane-reading{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  #settings-pane-reading>.reading-preview{grid-column:span 1}
  #settings-pane-reading>#reset-reading{grid-column:1/-1}
  /* 듣기 */
  #settings-pane-listening{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  #settings-pane-listening>:is(.voice-test-note,.settings-language-pair,.voice-test-buttons){grid-column:span 3}
  /* 학습: options left, the route order right */
  #settings-pane-learning{grid-template-columns:340px minmax(0,1fr);grid-template-rows:repeat(8,auto) minmax(0,1fr);column-gap:22px!important;row-gap:8px!important}
  #settings-pane-learning>*{grid-column:1}
  #settings-pane-learning>#settings-route-order{grid-column:2;grid-row:1/-1;min-height:0;align-self:start}
  #settings-pane-learning .settings-toggle{min-height:0!important;padding:10px 14px!important}
  /* 문의 */
  #settings-pane-feedback{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:repeat(5,auto) minmax(0,1fr);column-gap:22px!important}
  #settings-pane-feedback>*{grid-column:1}
  #settings-pane-feedback>#feedback-form,#settings-pane-feedback>.feedback-form{grid-column:2;grid-row:1/-1;align-self:start}
  /* 정보: the research summary reads in its own column */
  #settings-pane-developer{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:22px!important;overflow:hidden!important}
  #settings-pane-developer>*{grid-column:2}
  #settings-pane-developer>.learning-evidence{grid-column:1;grid-row:1/-1;min-height:0;overflow:auto;padding-right:8px;scrollbar-width:thin}
}

/* Route order list (골라서 학습 and 학습 설정 › 학습): a compact multi-column grid on wide screens. */
@media (min-width:1000px) and (min-height:560px){
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings-heading{margin-bottom:2px}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings>.settings-note{margin:0 0 10px;font-size:13px}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings-row{min-height:0;padding:6px 6px 6px 2px!important;gap:4px;border-radius:12px}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-drag{width:28px;min-width:28px;height:36px;min-height:36px;padding:0}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-mode-label{min-width:0;min-height:36px;gap:6px}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings{border-top:0!important;padding-top:0!important;margin:0!important}
  :is(.selection-study-order,#settings-pane-learning) .studio-mode-icon{display:none!important}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings-title{font-size:14px;line-height:1.3;min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:keep-all}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings-actions{gap:2px;flex:none}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-order-move{width:30px;min-width:30px;height:30px;min-height:30px!important;padding:0!important}
  #settings-pane-learning .studio-route-settings-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #settings-pane-learning .studio-route-settings{padding:12px 14px!important}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-settings-footer{margin-top:8px;padding:0}
  :is(.selection-study-order,#settings-pane-learning) .studio-route-order-reset{min-height:36px}
}

/* ---------- phones: vertical flow is fine, but keep it tight ---------- */
@media (max-width:760px){
  #library-view{padding-left:12px!important;padding-right:12px!important}
  .studio-learning-entries{gap:8px!important}
  .studio-learning-entry{min-height:64px!important;padding:10px 14px!important;grid-template-columns:40px minmax(0,1fr) 16px!important;gap:12px!important}
  .studio-learning-entry img{width:40px!important;height:40px!important;border-radius:12px!important}
  .studio-entry-copy strong{font-size:16px!important}.studio-entry-copy span{font-size:13px!important}
  #learning-studio{margin-bottom:14px!important}
  .library-heading{gap:12px!important;margin-bottom:14px!important}
  .home-curiosity,.daily-quote{padding:14px 16px!important;border-radius:18px!important}
  .home-curiosity .curiosity-paper,.home-curiosity .daily-learning-content{min-height:150px!important}
  .home-curiosity .curiosity-prompt h2{font-size:22px!important}
  .daily-quote .outro-quote{font-size:20px!important}
  .daily-quote .quote-meaning{font-size:15px!important}
  .forest-footer{margin-top:12px!important;padding:12px 0!important}
  .selection-study-detail{padding:16px!important}
  .selection-study-header{margin-bottom:12px!important}
  .studio-route-settings-row{padding-top:5px!important;padding-bottom:5px!important}
  #profile-view>.pf-hero{padding:16px!important}
  .pf-stats{gap:8px!important}
}

/* Whatever sits between header and workspace (e.g. the loading-error notice) takes its
   own height; the workspace fills the rest instead of using a fixed calc(). */
@media (min-width:1000px) and (min-height:560px){
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]){display:flex;flex-direction:column}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words])>*{flex:none}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) #workspace{flex:1 1 0!important;height:auto!important;min-height:0!important;padding-bottom:calc(14px + var(--fit-foot) + var(--fit-bar))!important}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) #language-loading-error:not([hidden]){margin:6px auto 0!important;padding:8px 14px!important;min-height:0!important}
  /* header never wider than the screen */
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .site-header{max-width:100%!important;box-sizing:border-box;overflow:hidden}
  body:is([data-view=library],[data-view=selection],[data-view=profile],[data-view=words]) .site-header .pl-auth-row{flex:none}
}