@import url("./chrome.css");
@import url("./pairing.css");

/* 웹 도구(옛 화면) 9쪽 공통: 사이트 머리·푸터·관련 앱 띠 + 바탕 정리.
   _src/tools/chrome_tools.py 가 각 도구의 <style> 뒤에 이 파일을 넣는다. 도구 자체의 변수(--line 등)를
   덮지 않도록 사이트 값은 머리·푸터·관련 앱 띠 안에서만 정의한다. 값은 assets/site.css 와 같다. */
body{display:block;background:#f4f5f3}
.app{margin-left:auto;margin-right:auto;line-height:1.6}
.topbar .home-link{display:none}            /* 옛 "← 홈으로": 사이트 머리가 대신한다 */
body>nav{display:none}                      /* 문제풀이의 옛 상단 막대 */

/* 언어: 도구의 언어 선택(i18n-core.js)이 <html lang> 을 바꾼다. 한국어면 ko 머리, 그 밖은 영어 머리. */
.chrome-en{display:none}
html:not(:lang(ko)) .chrome-en{display:block}
html:not(:lang(ko)) .chrome-ko{display:none}

/* The app panel shares its component with /tools/. Tokens stay scoped. */
.tool-related{margin:0;padding:0}
.app-promo{display:none!important}


html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
html:lang(ja) body,html:lang(zh-Hans) body{word-break:normal;line-break:strict}
body :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #23695c;outline-offset:3px}
/* Override the more specific legacy range rule that removes its outline. */
.app input[type=range]:focus-visible{outline:3px solid #23695c;outline-offset:3px}
.app .startbtn{color:#fff}
.app :where(button,input:not([type=range]),select,textarea){border-color:#7a858a}
.app .topbar{flex-wrap:wrap}
.app .topbar .title{min-width:0}
.app .topbar h1.title{line-height:inherit}
.app .control-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--text-primary);opacity:.9;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
/* Numeric fields must shrink inside two-column grids at 320px. */
.app .field,.app .input-row{min-width:0}
.app input:not([type=range]){min-width:0}
.app .music-filename{word-break:keep-all;overflow-wrap:anywhere}
.app button.active{border-color:#5b6468}
@media(max-width:480px){
  .app .modepicker{flex-wrap:wrap}
  .app .modepicker button{white-space:normal}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Keep the analyzer usable in tall embeds as well as real phone viewports. */
@media(max-width:700px){
  .app .console:not(.spl-console),body.line-view .app .console:not(.spl-console){height:clamp(240px,44svh,360px);min-height:240px;max-height:360px;aspect-ratio:auto}
  .app .range-panel{gap:12px;justify-content:flex-start}
  .app .range-field{flex:1 1 120px;min-width:0}
  .app .range-panel>.range-field:nth-child(3){flex-basis:100%}
  .app .range-panel>.toolbar-btn{flex:1 1 130px;font-size:14px;padding:9px 10px}
  .app :where(button,select,input:not([type=range]),summary){min-height:44px}
  .app input:not([type=range]),.app select{font-size:16px}
  .lang-switch-btn{min-height:44px}
}

@media(max-width:700px){
  .app .topbar .title{font-size:16px}
  .app .topbar .title small{font-size:12px;line-height:1.5}
  .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chapter-card{min-width:0;padding:14px 12px;min-height:96px}
  .disclaimer{font-size:14px}
}