/* v3.10 approved mobile composition. This is the single visual authority layer. */
:root{--paper:#fffefa;--bg:#f6f4ef;--text:#242824;--muted:#747872;--line:#e5e1d9;--green:#22543f;--orange:#dc5d18;--orangebg:#fff0e5;--blue:#267cad;--bluebg:#e8f5fb;--red:#d45b60;--redbg:#fcedee;font-family:"Noto Sans JP","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html,body{background:var(--paper);color:var(--text)}button,input,select,textarea{font-family:inherit}

/* One-line app header. */
.app>header{height:58px!important;min-height:58px!important;padding:7px 11px!important;gap:5px!important;background:#173f2e!important}
.app>header .identity{min-width:0!important;flex:1 1 auto!important}
.app>header .brand{min-width:0!important;flex:1 1 auto!important;gap:7px!important}
.app>header .avatar{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;padding:2px!important;background:#fff5e8!important}
.app>header #brandTitle{display:flex!important;min-width:0!important;flex:1 1 auto!important;gap:4px!important}
.app>header #brandTitle .title-name{min-width:0!important;max-width:min(26vw,112px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:0!important;background:transparent!important;color:#fff!important;font-size:13px!important;line-height:1.35!important}
.app>header #brandTitle .streak-badge{height:27px!important;min-height:27px!important;padding:0 7px!important;border-radius:14px!important;background:#ffffff10!important;color:#ffe6c2!important;font-size:10px!important}
.app>header .header-right{height:44px!important;gap:0!important;flex:0 0 auto!important}
.app>header .header-right>.iconbtn,.app>header .header-more{width:37px!important;min-width:37px!important;height:44px!important;flex:0 0 37px!important}
.app>header .header-right svg{width:19px!important;height:19px!important}

/* First screen density follows the approved 390px teacher preview. */
.workspace-nav{width:218px!important;height:36px!important;margin:6px 11px 0!important;padding:3px!important;border-radius:11px!important}
.workspace-nav button{min-height:28px!important;height:28px!important;padding:0 10px!important;border-radius:8px!important;font-size:12px!important}
.app main{padding:8px 11px 30px!important}
.teacherpanel{margin:0 0 8px!important}
.workspace-heading{height:36px!important;margin:0!important;align-items:center!important}
.workspace-heading>div{display:flex!important;align-items:center!important;gap:7px!important}
.workspace-heading .section-kicker{font-size:0!important;margin:0!important}.workspace-heading .section-kicker::after{content:'학생';font-size:10px;letter-spacing:.12em;color:var(--muted)}
.workspace-heading h1{font-size:0!important;margin:0!important}.workspace-heading h1::after{content:''}
.workspace-heading .text-button{height:34px!important;min-height:34px!important;padding:0 2px!important;font-size:11px!important}
.teacher .studentstrip{height:41px!important;margin:0!important;padding:1px 0 6px!important;gap:6px!important}
.teacher .studentstrip .studentchip{height:34px!important;min-height:34px!important;width:max-content!important;padding:0 12px!important;border-radius:10px!important;font-size:12px!important}
.teacher .managebox{min-height:50px!important;margin:2px 0 0!important;padding:5px 0!important;border-width:0 0 1px!important;border-radius:0!important;background:transparent!important;flex-wrap:nowrap!important;gap:5px!important}
.teacher .selected-student{margin-right:auto!important}.teacher .student-title strong{font-size:15px!important}.teacher .student-preview{width:28px!important;height:28px!important;min-height:28px!important}.teacher .shared-count{font-size:10px!important;margin-top:0!important}
.teacher .manageactions{gap:5px!important;margin:0!important}.teacher .manageactions button{height:38px!important;min-height:38px!important;padding:0 10px!important;border-radius:10px!important;font-size:11px!important}.teacher .manageactions button:first-child{font-size:0!important}.teacher .manageactions button:first-child::after{content:'공유';font-size:11px}.teacher .manageactions button:last-child{font-size:0!important}.teacher .manageactions button:last-child::after{content:'재촉';font-size:11px}
.teacher .management-links{height:36px!important;margin:0!important;padding:0!important;display:flex!important;flex-wrap:nowrap!important;gap:0!important;overflow-x:auto!important;border-bottom:1px solid var(--line)!important;scrollbar-width:none}.teacher .management-links::-webkit-scrollbar{display:none}.teacher .management-links button{height:36px!important;min-height:36px!important;flex:0 0 auto!important;padding:0 9px!important;font-size:10.5px!important}.teacher .management-links button:first-child{padding-left:0!important}
.source-tabs{height:42px!important;margin:9px 0 8px!important;padding:3px!important;border-radius:11px!important;gap:3px!important}.source-tabs button{min-height:34px!important;height:34px!important;border-radius:8px!important;font-size:12px!important}

/* Deck/add/search/tools. */
.toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) 112px!important;gap:8px!important;margin:0 0 8px!important;align-items:stretch!important}
.toolbar .lesson-picker{grid-column:1!important;grid-row:1!important;min-width:0!important;width:auto!important}.toolbar .lesson-button{height:44px!important;min-height:44px!important;padding:0 13px!important;border-radius:11px!important;font-size:13px!important;white-space:nowrap!important}.toolbar .lesson-button>span:first-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.toolbar .teacher-add{grid-column:2!important;grid-row:1!important;height:44px!important;min-height:44px!important;padding:0 8px!important;border-radius:11px!important;font-size:13px!important}
.teacher:not(.personal-space) .toolbar .learning-buttons{display:none!important}
.personal-space .toolbar,.student .toolbar{display:flex!important;flex-wrap:wrap!important}.personal-space .toolbar .lesson-picker,.student .toolbar .lesson-picker{width:100%!important;flex:1 1 100%!important}.personal-space .toolbar .learning-buttons,.student .toolbar .learning-buttons{display:grid!important;width:100%!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.searchbox{height:42px!important;min-height:42px!important;margin:0 0 4px!important;padding:0 12px!important;border-radius:11px!important}.searchbox input{font-size:12px!important}.searchbox svg{width:18px!important;height:18px!important}
.filter-line{min-height:44px!important;margin:0!important;display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:nowrap!important}.filter-line .filters{gap:5px!important;min-width:0!important;flex:0 0 auto!important}.filter-line .filter{height:34px!important;min-width:34px!important;padding:0 10px!important;border-radius:9px!important;font-size:11px!important}.filter-line .filter svg{width:18px!important;height:18px!important}.filter-line #passageButton{margin-left:auto!important}.filter-line .passage-button,.filter-line .kana-compact{height:34px!important;min-height:34px!important;padding:0 7px!important;font-size:10.5px!important;border-radius:9px!important}
.statline{min-height:36px!important;padding:0 0 5px!important;gap:6px!important;font-size:10px!important;flex-wrap:nowrap!important}.statline strong{font-size:11px!important}.statline .export-button{margin-left:auto!important;min-height:32px!important;font-size:10.5px!important;white-space:nowrap!important}.statline .add-compact{display:none!important}

/* Compact word table. */
.tablehead,.wordrow{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 26px!important;gap:10px!important}.tablehead{height:34px!important;margin:0!important;padding:0 8px!important;border-radius:8px!important;font-size:10px!important}.wordrow{min-height:94px!important;padding:20px 9px!important}.wordrow .jp{font-size:var(--word-size,16px)!important;line-height:1.5!important}.wordrow rt{font-size:var(--reading-size,8px)!important}.wordrow .meaning{font-size:var(--meaning-size,12px)!important;line-height:1.5!important;min-height:44px!important;text-align:left!important}.wordrow .status,.wordrow .badge{width:26px!important;height:44px!important}.wordrow .badge svg{width:19px!important;height:19px!important}.word-swipe>.wordrow.new-word:not(.own){background:color-mix(in srgb,var(--orangebg) 48%,var(--paper))!important;box-shadow:inset 2px 0 var(--orange)}

/* Quick review stays centered and reachable, with swipe as primary navigation. */
#modal.dialog:has(.quick-detail){width:min(94vw,480px)!important;max-width:480px!important;max-height:min(82dvh,700px)!important;margin:auto!important;border-radius:18px!important}
#modal.dialog:has(.quick-detail) .dialogtop{position:absolute!important;right:8px!important;top:7px!important;width:38px!important;min-height:38px!important;padding:0!important;border:0!important;background:transparent!important;z-index:30}
#modal.dialog:has(.quick-detail) #modalBody{padding:18px 18px 16px!important}
.quick-detail{min-height:min(62dvh,520px)!important;max-height:min(74dvh,650px)!important}.quick-detail .detail-counter{padding:0 0 7px!important;font-size:11px!important}.quick-detail .detail-scroll{display:flex!important;flex-direction:column!important;justify-content:center!important;padding:5px 2px 10px!important}.quick-detail .word-detail{text-align:center!important}.quick-detail .studydetail{font-size:clamp(30px,10vw,48px)!important}.quick-detail .detail-meaning{font-size:18px!important}.quick-detail .detail-footer{padding-top:9px!important}.quick-detail .detail-rate button{min-height:58px!important}.quick-detail .detail-nav{display:none!important}.quick-detail .detail-undo{min-height:28px!important;margin-top:4px!important;padding:3px 8px!important}

/* Quiz: bounded visible answer control, raised into the thumb zone. */
.study .studycontent{top:40%!important}.study .quiz-answer-zone{top:58%!important;left:20px!important;right:20px!important}.study .quiz-answer-zone button{width:min(100%,420px)!important;min-height:62px!important;border-radius:14px!important}.study .studybottom{top:58%!important}.study .statusactions button{min-height:70px!important}.study .quiz-wordgroup{grid-template-columns:36px minmax(0,1fr) 36px!important}

/* Centered walking mascot: actual frame sequence + gentle approach. */
#accountGate:not([hidden]):has(.loading-shiba){position:fixed!important;inset:0!important;min-height:100dvh!important;display:grid!important;place-items:center!important;background:var(--paper)!important}
#accountGate .account-card:has(.loading-shiba){width:164px!important;height:164px!important;min-width:164px!important;min-height:164px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:hidden!important}
#accountGate .loading-shiba{width:148px!important;height:148px!important;max-width:none!important;max-height:none!important;background-image:url('shiba-walk.png')!important;background-repeat:no-repeat!important;background-size:400% 200%!important;background-position:0 0;animation:poli-walk 1.05s steps(1) infinite,poli-approach 1.8s cubic-bezier(.2,.75,.25,1) both!important;transform-origin:50% 82%!important}
@keyframes poli-walk{0%{background-position:0 0}12.5%{background-position:33.333% 0}25%{background-position:66.666% 0}37.5%{background-position:100% 0}50%{background-position:0 100%}62.5%{background-position:33.333% 100%}75%{background-position:66.666% 100%}87.5%,100%{background-position:100% 100%}}
@keyframes poli-approach{0%{transform:translateY(18px) scale(.78);opacity:.75}65%{transform:translateY(0) scale(1.02);opacity:1}100%{transform:translateY(0) scale(1)}}

/* Every native popover remains readable in dark mode. */
body.dark{--paper:#242720;--bg:#1d201b;--text:#f3f0e7;--muted:#b7b8ae;--line:#43483d;--orange:#f1a06b;--orangebg:#493324;color-scheme:dark}
body.dark :is(.dialog,.floating-menu,.deck-popover,.notification-dropdown,.header-more-menu,select,option,input,textarea){color:var(--text)!important;background-color:var(--paper)!important;border-color:var(--line)!important}

@media(max-width:375px){.app>header{padding-inline:7px!important}.app>header #brandTitle .title-name{max-width:23vw!important;font-size:12px!important}.app>header .header-right>.iconbtn,.app>header .header-more{width:34px!important;min-width:34px!important;flex-basis:34px!important}.teacher .manageactions button{padding-inline:8px!important}.toolbar{grid-template-columns:minmax(0,1fr) 104px!important}}
@media(prefers-reduced-motion:reduce){#accountGate .loading-shiba{animation:none!important;background-position:100% 100%!important}.word-swipe>.wordrow{transition:none!important}}

/* Integrated mobile layout repairs, maintained in this authority layer. */
#accountGate[hidden],#study[hidden],#app [hidden],#modal [hidden]{display:none!important}
#accountGate:not([hidden]):has(.loading-shiba){z-index:5000!important}
#app>header #brandTitle .title-name{flex:0 1 auto!important;max-width:min(32vw,150px)!important;min-height:44px!important}
#app>header #brandTitle .streak-badge{margin-left:2px!important}
.workspace-nav{margin-top:7px!important;margin-bottom:3px!important}
.workspace-heading{min-height:28px!important;height:auto!important}
.workspace-heading p{margin:0!important;font-size:11px!important;line-height:1.5}
.personal-space .workspace-heading .section-kicker{display:none!important}
.teacher .studentstrip{height:44px!important;align-items:center!important}
.teacher .studentstrip .studentchip{min-height:36px!important}
.teacher .management-links button{font-size:11px!important;min-height:40px!important}
.toolbar .learning-buttons:not([hidden]){grid-template-columns:1fr!important}
.student .toolbar .learning-buttons .studybtn{width:100%!important;min-height:44px!important}
.personal-space .toolbar .learning-buttons{grid-template-columns:1fr 1fr!important}
.personal-space .toolbar #missionButton{grid-column:auto!important;min-height:44px!important;padding:7px!important}
.personal-space .toolbar .teacher-add{min-height:42px!important}
#app .wordrow{min-height:94px!important;padding:20px 9px!important}
#app .wordrow .jp{font-weight:500!important;line-height:1.6!important}
#app .wordrow rt{font-size:var(--reading-size,10px)!important;line-height:1.6!important}
#app .wordrow .meaning{font-weight:400!important}
#study:not([hidden]){z-index:300!important;isolation:isolate;background:var(--paper)!important}
#study .studyhead{top:max(10px,env(safe-area-inset-top))!important;left:12px!important;right:12px!important;height:44px!important;gap:6px!important}
#study .studyhead .study-brand{font-size:13px!important;white-space:nowrap;margin-right:auto}
#study .studyhead .study-brand img{width:23px;height:23px}
#study .studyhead button{min-height:40px!important;white-space:nowrap}
#study .shuffle-top{font-size:11px!important;padding:5px 8px!important}
#study .studyoptions{top:max(65px,calc(env(safe-area-inset-top) + 57px))!important;left:14px!important;right:14px!important;display:grid!important;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:8px!important;align-items:start}
#study .studyoptions label{display:block;min-width:0;margin:0}
#study .studyoptions select,#study .studyoptions .select-trigger{width:100%!important;min-width:0!important;height:42px!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#study .studycontent{left:12px!important;right:12px!important;max-height:30dvh!important}
#study .quiz-wordgroup{grid-template-columns:30px minmax(0,1fr) 30px!important;gap:3px!important}
#study .quiz-wordgroup .prompt{overflow-wrap:anywhere;font-size:clamp(26px,7.5vw,46px)!important}
#study .quiz-wordgroup .study-edge{width:30px!important;min-height:52px!important;font-size:28px!important}
#study .quiz-answer-zone{top:58%!important;bottom:auto!important;min-height:62px!important;max-height:26dvh;overflow:auto}
#study .quiz-answer-zone button{min-height:62px!important;width:100%!important}
#study .study-complete{top:48%!important;max-height:65dvh!important;overflow:auto;pointer-events:auto}
#modal.dialog:has(.quick-detail){max-height:84dvh!important}
#modal.dialog:has(.quick-detail) #modalBody{overflow:auto!important;max-height:80dvh!important}
.quick-detail{min-height:min(56dvh,440px)!important;max-height:none!important;display:flex!important;flex-direction:column!important}
.quick-detail .detail-scroll{flex:1 1 auto;min-height:0;padding-block:16px!important;overflow:auto}
.quick-detail .detail-footer{flex:0 0 auto;position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line)}
.quick-detail .detail-rate button{min-height:60px!important}
#modal .kana-detail{min-height:0!important;height:auto!important;display:flex!important;flex-direction:column;justify-content:center;gap:8px;padding:18px 0 8px!important;overflow:visible!important}
#modal .kana-detail .kana-big{font-size:clamp(90px,25vw,125px)!important;line-height:1.2!important}
#modal .kana-detail>p{margin:0!important}
#modal .kana-speaker{position:static!important;transform:none!important;display:flex!important;flex:0 0 44px;align-items:center;justify-content:center;width:44px!important;height:44px!important;margin:8px auto 14px!important}
#modal .kana-statusactions{position:static!important;margin-top:8px!important;padding:0!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
#modal .kana-statusactions button{min-height:60px!important;padding:8px!important}
#modal .passage-tools{position:sticky;top:0;z-index:5;background:var(--paper);margin-bottom:6px!important;padding:6px 0!important;gap:6px}
#modal .reader-sentence{margin:0!important;padding:10px 0!important;gap:5px 7px!important}
#modal .passage-original{font-size:14px!important;line-height:1.8!important;margin:0!important}
#modal .passage-translation{font-size:12px!important;line-height:1.7!important;margin:3px 0 0!important;grid-column:1/-1}
#modal .reader-number{padding:4px 0 0!important;border-bottom:0!important;font-size:12px;color:var(--muted)}
#modal .sentence-translate{width:28px;height:30px;min-height:30px;padding:0}
@media(max-width:700px){
 #modal.dialog:has(#composeForm),#modal.dialog:has(#pasteGrid),#modal.dialog:has(.import-review){position:fixed!important;inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;margin:0!important;border:0!important;border-radius:0!important;padding:0!important;display:flex;flex-direction:column;overflow:hidden!important}
 #modal.dialog:has(#composeForm) .dialogtop,#modal.dialog:has(#pasteGrid) .dialogtop{margin:0!important;padding:7px 14px!important;min-height:50px!important}
 #modal.dialog:has(#composeForm) #modalBody,#modal.dialog:has(#pasteGrid) #modalBody{padding:10px 12px 0!important;max-height:none!important;flex:1;overflow:auto!important;min-height:0}
 #composeForm>.field{margin:5px 0 10px!important}
 #composeForm .work-date-title{gap:8px;margin:0!important}
 #composeForm .work-date-title .field{margin:0!important}
 #composeForm .work-tabs{margin:12px 0!important}
 #composeForm .field{margin-block:10px!important}
 #composeForm .field input,#composeForm .field textarea{font-size:14px}
 #composeForm .work-footer{bottom:0!important;margin:14px -12px 0!important;padding:9px 12px max(9px,env(safe-area-inset-bottom))!important}
}
body.dark .select-trigger,body.dark .custom-select-menu,body.dark .custom-select-menu button{color:var(--text)!important;background-color:var(--paper)!important;border-color:var(--line)!important}
@media(prefers-reduced-motion:reduce){#study *,#modal *,#app *{animation:none!important;transition:none!important}}

#modal.dialog:has(.quick-detail) .dialogtop h2{display:none!important}
.quick-detail .detail-rate-o{background:var(--bluebg)!important;color:var(--blue)!important;border:1px solid color-mix(in srgb,var(--blue) 25%,var(--line))!important}
.quick-detail .detail-rate-x{background:var(--redbg)!important;color:var(--red)!important;border:1px solid color-mix(in srgb,var(--red) 25%,var(--line))!important}
.quick-detail .detail-rate button.active{box-shadow:inset 0 0 0 2px currentColor!important;font-weight:700!important}
body.dark .quick-detail .detail-rate-o{background:#193c4c!important;color:#86c7ed!important}
body.dark .quick-detail .detail-rate-x{background:#492b30!important;color:#f3a2a8!important}