/* Layout and tokens mirror BaseScreen, ProblemCard, ChoiceCard and PrimaryButton. */
:root{color-scheme:light;--font-scale:1;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;color:#18241f;background:#f5f7f3}*{box-sizing:border-box}html,body,#main{margin:0;height:100%;min-height:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,.choice:has(input:focus-visible){outline:3px solid #103d2d;outline-offset:3px}button:disabled{cursor:default;opacity:.45}
.practice{height:100dvh;min-height:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0);padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.navigation-header{width:100%;max-width:760px;align-self:center;padding:20px 20px 0;display:flex;align-items:center;flex:none;min-height:64px}.navigation-header h1{flex:1;min-width:0;text-align:center;margin:0;font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:800}.header-side,.icon-button{width:44px;min-width:44px;height:44px}.icon-button{display:flex;align-items:center;justify-content:center;flex:none;border:0;border-radius:8px;background:transparent;color:#18241f;padding:0}.practice-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.practice-content{width:100%;max-width:760px;margin:auto;padding:16px 20px 48px;display:flex;flex-direction:column;gap:16px}.notice{font-size:calc(14px * var(--font-scale));line-height:calc(21px * var(--font-scale));color:#606e65;margin:0}.card{background:#fff;border:1px solid #dce5de;border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:12px}.metadata{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:calc(14px * var(--font-scale));line-height:calc(21px * var(--font-scale))}.skill{flex:1;color:#16724d;font-weight:800}.progress{color:#606e65;font-weight:700;max-width:100%}.prompt{font-size:calc(20px * var(--font-scale));line-height:calc(30px * var(--font-scale));font-weight:600}.math-text{white-space:pre-wrap;overflow-wrap:break-word;min-width:0}.math-text>span{display:block;overflow-x:auto;max-width:100%}.math-text[data-math-overflow=true]>span{padding-bottom:8px}.math-text svg{max-width:none;vertical-align:middle;flex-shrink:0}.help-trigger-footer{border-top:1px solid #dce5de;padding-top:8px;margin-top:4px;align-self:stretch}.link-button{display:flex;align-items:center;gap:4px;align-self:flex-start;max-width:100%;min-height:44px;min-width:44px;background:transparent;border:1px solid transparent;border-radius:8px;padding:8px;color:#16724d;text-align:left;font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:600}.help-trigger-footer .link-button{margin-left:-8px;font-size:calc(14px * var(--font-scale));line-height:calc(21px * var(--font-scale));font-weight:700}.link-button svg{flex-shrink:0}
.answer-panel{display:flex;flex-direction:column;gap:12px}.choices{display:grid;grid-template-columns:1fr;gap:8px;border:0;margin:0;padding:0;min-width:0}.choices legend{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));margin-bottom:12px;font-weight:600;padding:0}.choices.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.choices legend{grid-column:1/-1}.choice{position:relative;min-height:56px;width:100%;min-width:0;border:1px solid #dce5de;background:#fff;border-radius:8px;padding:12px 16px;display:flex;align-items:center;text-align:left;color:#18241f;cursor:pointer}.choice[data-selected=true]{background:#e4f3e9;border-color:#16724d;color:#16724d}.choice-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.choice:has(input:disabled){cursor:default}.choice .math-text{pointer-events:none;width:100%}.math-choice .choice-text{font-size:calc(24px * var(--font-scale));line-height:calc(33.6px * var(--font-scale));font-weight:700}.prose-choice .choice-text{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:600}.input-label{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:600}.answer-input{width:100%;min-height:56px;border:1px solid #dce5de;border-radius:8px;padding:12px;color:#18241f;background:#fff;font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));opacity:1;-webkit-text-fill-color:#18241f}
.actions{flex:none;overflow-y:auto;max-height:50%;width:100%;max-width:760px;align-self:center;display:flex;flex-direction:column;gap:12px;border-top:1px solid #dce5de;background:#f5f7f3;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0))}.primary,.secondary{min-height:56px;padding:12px 16px;border-radius:16px;border:0;font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:700;text-align:center}.primary{background:#16724d;color:#fff;width:100%}.secondary{background:#e4f3e9;color:#16724d}
.feedback{padding:16px;display:flex;flex-direction:column;gap:8px;border-radius:8px;border:1px solid #16724d;background:#e4f3e9}.feedback.correct{background:#dcfce7;border-color:#16a34a}.feedback.incorrect{background:#fee2e2;border-color:#dc2626}.feedback h2{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:900;margin:0;color:#16724d}.feedback.correct h2{color:#166534}.feedback.incorrect h2{color:#18241f}.feedback .answer-value{font-size:calc(18px * var(--font-scale));line-height:calc(28px * var(--font-scale));font-weight:400}.feedback-text{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:400}.solution{padding:16px;display:flex;flex-direction:column;gap:12px;border-radius:8px;border:1px solid #dce5de;background:#fff}.solution h2{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:900;margin:0}.steps{display:flex;flex-direction:column;gap:12px}.step-row{display:flex;align-items:flex-start;gap:12px}.step-number{width:24px;height:24px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:#606e65;font-size:calc(12px * var(--font-scale));font-weight:900}.solution-step{flex:1;font-size:calc(15px * var(--font-scale));line-height:calc(23px * var(--font-scale));font-weight:400}.error{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));color:#b91c1c;background:#fee2e2;border-radius:8px;padding:12px;margin:0}
.overlay{position:fixed;inset:0;z-index:10;background:rgba(10,18,14,.48);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.dialog{background:#fff;border-radius:24px;max-width:560px;width:100%;max-height:min(88dvh,calc(100dvh - env(safe-area-inset-top,0px) - 24px));display:flex;flex-direction:column;overflow:hidden}.handle-region{display:none;height:28px;flex:none;align-items:center;justify-content:center}.handle{width:36px;height:4px;border-radius:2px;background:#dce5de}.dialog-header{display:flex;align-items:flex-start;gap:8px;padding:24px 24px 8px;flex:none}.dialog h2{flex:1;display:flex;align-items:center;min-height:44px;font-size:calc(24px * var(--font-scale));line-height:calc(32px * var(--font-scale));font-weight:800;margin:0}.dialog-header .icon-button{margin-right:-8px;color:#606e65}.dialog-body{overflow-y:auto;min-height:0;padding:0 24px 16px;display:flex;flex-direction:column;gap:24px}.hint-copy{display:flex;flex-direction:column;gap:16px}.hint{font-size:calc(16px * var(--font-scale));line-height:calc(28px * var(--font-scale));font-weight:400}.dialog-footer{padding:16px 24px;flex:none}.loading{padding:20px;max-width:760px;margin:auto;font-size:16px;line-height:24px}.card:focus{outline:3px solid #103d2d;outline-offset:3px}
@media(max-width:599px){.overlay{justify-content:flex-end;padding:0}.dialog{max-width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}.handle-region{display:flex}.dialog-header{padding-top:0}.dialog-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}}@media(max-width:399px){.metadata{flex-direction:column;gap:4px}.skill{flex:none;width:100%}}.practice[data-large-text=true] .metadata{flex-direction:column;gap:4px}.practice[data-large-text=true] .skill{flex:none;width:100%}.practice[data-large-text=true] .choices{grid-template-columns:1fr}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.hint-drag-region{flex:none}
@media(max-width:599px){
  .hint-drag-region{min-height:88px;touch-action:none;user-select:none}
  .app-study-notification-time-heading [data-time-drag]{touch-action:none;user-select:none}
  .overlay[data-sheet-motion]{background-color:rgba(10,18,14,calc(.48 * var(--sheet-backdrop-opacity,1)))}
}
@media(max-width:599px) and (prefers-reduced-motion:no-preference){
  .overlay[data-sheet-motion]>.dialog,.app-study-notification-dialog[data-sheet-motion]{transform:translateY(var(--sheet-offset,0px))}
  .overlay:is([data-sheet-motion=settling],[data-sheet-motion=closing]){transition:background-color 180ms ease-out}
  .app-study-notification-dialog[data-sheet-motion]::backdrop{opacity:var(--sheet-backdrop-opacity,1)}
  .app-study-notification-dialog:is([data-sheet-motion=settling],[data-sheet-motion=closing])::backdrop{transition:opacity 180ms ease-out}
  .overlay[data-sheet-motion=settling]>.dialog,.app-study-notification-dialog[data-sheet-motion=settling]{transition:transform 180ms cubic-bezier(.22,.72,.28,1)}
  .overlay[data-sheet-motion=closing]>.dialog,.app-study-notification-dialog[data-sheet-motion=closing]{transition:transform 200ms cubic-bezier(.55,.055,.675,.19)}
}
.unavailable-panel{padding:16px;border:1px solid #dce5de;border-radius:16px;background:#fff}.unavailable-panel h2{margin:0;font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:700;color:#18241f}
/* ProblemDataDisplay / BasicLearningDiagram / PointAnswer roles. */
.prompt-data{width:100%;display:flex;flex-direction:column;gap:20px}.data-figure,.data-visual{width:100%;display:flex;flex-direction:column;gap:8px}.data-caption{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:600}.table-viewport{width:100%;overflow-x:auto}.data-table{width:100%;border-left:1px solid #dce5de;border-top:1px solid #dce5de;display:table;table-layout:fixed}.data-row{display:table-row}.data-cell{display:table-cell;width:auto;min-width:80px;vertical-align:middle;padding:12px 10px;border-right:1px solid #dce5de;border-bottom:1px solid #dce5de}.data-cell-text{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));font-weight:400}.data-header{background:#f5f7f3}.data-header .data-cell-text{font-weight:600}.chart-axis-title{color:#606e65;font-size:calc(14px * var(--font-scale));line-height:calc(22px * var(--font-scale));margin-top:8px;margin-bottom:16px}.chart{display:flex;padding-right:4px}.chart-ticks{position:relative;width:32px;flex:none}.chart-ticks span{position:absolute;right:8px;font-size:calc(14px * var(--font-scale));line-height:calc(20px * var(--font-scale))}.chart-plot-column{flex:1;min-width:0}.chart-plot{display:flex;position:relative;border-left:1px solid #606e65;border-bottom:1px solid #606e65}.chart-gridline{position:absolute;left:0;right:0;height:1px;background:#dce5de}.chart-bar-column{position:relative;flex:1;display:flex;align-items:center;justify-content:flex-end;flex-direction:column}.chart-bar{width:48%;max-width:44px;background:#16724d}.chart-categories{display:flex;padding-top:8px}.chart-categories span{flex:1;text-align:center;font-size:calc(14px * var(--font-scale));line-height:calc(22px * var(--font-scale))}.chart-x-title{text-align:right;color:#606e65;font-size:calc(14px * var(--font-scale));line-height:calc(22px * var(--font-scale));margin-top:8px}
.basic-diagram{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid #dce5de;border-radius:8px;background:#fff}.basic-diagram h2{margin:0;font-size:calc(16px * var(--font-scale));font-weight:700}.diagram-label{font-size:calc(14px * var(--font-scale));line-height:calc(22px * var(--font-scale));font-weight:700}.diagram-description{margin:0;font-size:calc(14px * var(--font-scale));line-height:calc(22px * var(--font-scale));color:#606e65}.diagram-step,.diagram-focus{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px}.diagram-step{border:1px solid #dce5de}.diagram-focus{background:#e4f3e9}.diagram-math{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale))}.strong{font-weight:700}.fraction-whole,.percent-bar{display:flex;height:30px;border:1px solid #606e65}.fraction-cell{flex:1;min-width:0;border-right:1px solid #606e65;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:12px}.diagram-legend{display:flex;flex-wrap:wrap;gap:12px}.diagram-legend-item{display:flex;align-items:center;gap:4px}.diagram-swatch{width:14px;height:14px;flex:none;border:1px solid #606e65}.percent-segment{flex-basis:0;min-width:0}.choice-checkbox{height:22px;width:22px;flex:none;margin-right:8px;border:1px solid #dce5de;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}.choice[data-selected=true] .choice-checkbox{background:#16724d;border-color:#16724d;color:#fff}.point-answer{display:flex;flex-direction:column;gap:12px}.point-plot{width:100%;max-width:480px;aspect-ratio:1;align-self:center;touch-action:manipulation}.point-plot svg{display:block}.point-status{font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));margin:0}.worked-example{display:flex;flex-direction:column;gap:16px}.worked-example h3{font-size:calc(14px * var(--font-scale));font-weight:700;color:#16724d;margin:0}.example-steps{display:flex;flex-direction:column;gap:12px}.example-steps h3{font-size:calc(16px * var(--font-scale));font-weight:900;color:#18241f}
.inline-control{color:#18241f}.inline-control[aria-pressed=true],.inline-control[aria-expanded=true]{color:#16724d;border-color:#16724d;background:#e4f3e9}.choice-checkbox{border:2px solid #606e65;border-radius:3px}
/* AnswerReflection's optional, raw working field. */
.reflection-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.reasoning-input{width:100%;min-height:96px;font-family:inherit;font-size:calc(16px * var(--font-scale));line-height:calc(24px * var(--font-scale));padding:12px;border:1px solid #dce5de;border-radius:8px;color:#18241f;background:#fff;text-align:left;resize:none;white-space:pre-wrap;opacity:1;-webkit-text-fill-color:#18241f}.reasoning-counter{font-size:calc(12px * var(--font-scale));color:#606e65;text-align:right}