:root{color:#17201b;background:#fff;font-size:14px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit}.app{min-height:100vh;padding:18px}.app--center{display:grid;place-items:center}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.landing{background:#f7f7f7;min-height:100vh;position:relative}.site-header{align-items:center;display:grid;grid-template-columns:180px auto 1fr;column-gap:36px;height:68px;padding:0 36px;position:fixed;top:0;left:0;right:0;z-index:5;background:#fff;border-bottom:1px solid #e5e5e5}.site-header__actions{align-items:center;display:flex;flex-direction:row;gap:10px;justify-content:flex-end}.site-header__actions .login-button{white-space:nowrap}.site-nav{align-items:center;display:flex;gap:8px;justify-content:flex-start}.site-nav__item{align-items:center;background:transparent;border:0;border-radius:999px;color:#777;cursor:pointer;display:inline-flex;font-size:.88rem;font-weight:800;justify-content:center;line-height:1;min-height:36px;padding:0 14px}.site-nav__item--active{background:#111;color:#fff}.brand-button,.login-button{align-items:center;border:0;cursor:pointer;display:inline-flex;font-weight:800}.brand-button{background:transparent;color:#555;font-size:.95rem}.login-button{background:#111;border:1px solid #111111;border-radius:999px;color:#fff;gap:7px;justify-content:center;min-height:38px;padding:0 16px;white-space:nowrap}.primary-button,.ghost-button{align-items:center;border-radius:999px;cursor:pointer;display:inline-flex;font-size:.92rem;font-weight:800;justify-content:center;min-height:44px;padding:0 18px}.primary-button{background:#111;border:1px solid #111111;color:#fff}.ghost-button,.ghost-button--light{background:#fff;border:1px solid #d8d8d8;color:#333}.marketing{background:#fff;min-height:100vh}.marketing-hero{align-items:center;display:grid;gap:32px;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);margin:0 auto;max-width:1320px;padding:128px 36px 56px}.marketing-copy{display:grid;gap:18px}.marketing-eyebrow{color:#8b6b1b;font-size:.78rem;font-weight:900;margin:0;text-transform:uppercase}.marketing-copy h1{color:#17201b;font-size:clamp(2.7rem,5vw,4.8rem);line-height:.96;margin:0;max-width:760px}.marketing-copy>p{color:#4b564c;font-size:1rem;line-height:1.75;margin:0;max-width:640px}.marketing-actions{display:flex;flex-wrap:wrap;gap:12px}.marketing-badges{display:flex;flex-wrap:wrap;gap:10px}.marketing-badges span{align-items:center;background:#fffefa;border:1px solid #ddd6c5;border-radius:999px;color:#405144;display:inline-flex;font-size:.84rem;font-weight:800;min-height:34px;padding:0 13px}.marketing-preview{background:linear-gradient(180deg,#faf6ef,#ebe3d0);border:1px solid #ddd4c2;border-radius:18px;min-height:420px;overflow:hidden;padding:16px;position:relative}.marketing-preview__label{align-items:center;background:#17201be6;border-radius:999px;color:#fffefa;display:inline-flex;font-size:.82rem;font-weight:800;left:24px;min-height:32px;padding:0 12px;position:absolute;top:24px;z-index:1}.marketing-preview img{border-radius:14px;display:block;height:100%;max-height:520px;object-fit:cover;width:100%}.marketing-section{margin:0 auto;max-width:1320px;padding:0 36px 36px}.marketing-section--muted{padding-top:8px}.marketing-section__header{margin-bottom:18px}.marketing-section__header p{color:#7c7f73;font-size:.8rem;font-weight:900;margin:0 0 8px;text-transform:uppercase}.marketing-section__header h2{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;margin:0;max-width:760px}.marketing-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}.marketing-grid--sections{grid-template-columns:repeat(2,minmax(0,1fr))}.marketing-card{background:#fffefa;border:1px solid #ddd6c5;border-radius:12px;display:grid;gap:10px;min-height:180px;padding:20px}.marketing-card strong{font-size:1.14rem;line-height:1.25}.marketing-card p,.marketing-card span{color:#5d665d;margin:0}.marketing-card--section{min-height:140px}.marketing-steps{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}.marketing-step{background:#ede5d5;border-radius:12px;display:grid;gap:12px;min-height:150px;padding:20px}.marketing-step span{color:#8d7538;font-size:.84rem;font-weight:900}.marketing-step p{color:#253129;line-height:1.6;margin:0}.marketing-notice{margin-bottom:0;max-width:1248px}.board-shell{background:#fff;min-height:100vh}.board-page{margin:0 auto;max-width:1320px;padding:112px 36px 56px}.board-page__hero{display:grid;gap:8px;margin-bottom:22px}.board-page__hero p{color:#484848;font-size:.82rem;font-weight:900;margin:0;text-transform:uppercase}.board-page__hero h1{font-size:clamp(2.2rem,4vw,3.4rem);margin:0}.board-page__hero span{color:#5d665d}.board-page__layout{display:grid;gap:18px;grid-template-columns:240px minmax(0,1fr)}.board-sidebar,.board-placeholder{background:#fafafa;border:1px solid #ffffff;border-radius:12px}.board-sidebar{padding:18px}.board-sidebar strong{display:block;font-size:.96rem;margin-bottom:14px}.board-sidebar ul{display:grid;gap:10px;list-style:none;margin:0;padding:0}.board-sidebar li{color:#4c5a4f;font-weight:700}.board-placeholder{min-height:420px;padding:18px}.board-placeholder__toolbar{align-items:center;display:flex;justify-content:space-between;margin-bottom:18px}.board-placeholder__toolbar span{font-weight:800}.board-placeholder__toolbar button{background:#fff;border:1px solid #ffffff;border-radius:999px;color:#7c7f73;min-height:36px;padding:0 14px}.board-placeholder__empty{border:1px dashed #d5cebf;border-radius:10px;display:grid;gap:8px;min-height:300px;padding:24px;place-content:center;text-align:center}.board-placeholder__empty p,.board-placeholder__empty strong{margin:0}.landing{background:#f6f7f9;min-height:100vh;position:relative}.section-browser{margin:0 auto;max-width:1080px;padding:42px 28px 72px}.section-browser-layout{align-items:start;column-gap:48px;display:grid;grid-template-columns:620px 300px;justify-content:center}.section-stack{display:grid;gap:12px}.section-accordion{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}.section-trigger{align-items:center;background:#f3f4f6;border:0;border-radius:12px;color:#111827;cursor:pointer;display:flex;font-size:.92rem;font-weight:800;justify-content:space-between;min-height:48px;padding:0 16px;width:100%}.section-trigger svg{transition:transform .18s ease}.section-trigger--open svg{transform:rotate(180deg)}.section-grid,.section-grid--compact{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.section-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;color:#111827;cursor:pointer;display:grid;gap:8px;min-height:118px;padding:18px;text-align:left;transition:background-color .22s ease,box-shadow .22s ease,transform .22s ease}.section-card--compact{min-height:112px;padding:18px}.section-card:disabled{cursor:default;opacity:.62}.section-card:not(:disabled):hover{background:#f8fafc;border-color:#e5e7eb;box-shadow:inset 0 0 0 999px #11182706;transform:translateY(-1px)}.section-card span{color:#6b7280;font-size:.82rem;font-weight:800}.section-card strong{color:#111827;font-size:1.22rem;letter-spacing:0}.section-card em{align-self:end;color:#157f58;font-size:.86rem;font-style:normal;font-weight:800}.section-empty{color:#6b7280;font-size:.9rem;font-weight:700;padding:16px 14px 8px}.landing-summary-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 8px 22px #1118270b;display:grid;gap:18px;padding:24px;position:sticky;top:92px;transition:box-shadow .22s ease,transform .22s ease}.landing-summary-card:hover{box-shadow:0 12px 28px #11182712;transform:translateY(-1px)}.landing-summary-card p{color:#6b7280;font-size:.88rem;font-weight:900;margin:0}.landing-summary-card h2{color:#111827;font-size:2.4rem;line-height:1;margin:0}.landing .summary-progress{background:#e5e7eb;border-radius:999px;height:10px;overflow:hidden}.landing-summary-meta{display:grid;gap:4px}.landing-summary-meta span{color:#6b7280;font-size:.84rem;font-weight:800}.landing-summary-meta strong{color:#111827;font-size:1.05rem}.landing-summary-card button{background:#2563eb;border:0;border-radius:10px;color:#fff;cursor:pointer;font-weight:800;min-height:48px;transition:background-color .22s ease,box-shadow .22s ease,transform .22s ease}.landing-summary-card button:hover{background:#60a5fa;box-shadow:0 10px 24px #2563eb38;transform:translateY(-1px)}.landing-notice{bottom:24px;left:44px;margin:0;position:absolute;right:44px;z-index:2}.login-backdrop{align-items:center;animation:backdrop-fade .18s ease-out;background:#17201b70;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:24px;position:fixed;z-index:10}.login-panel{background:#fffefa;border:1px solid #e4e8ef;border-radius:18px;box-shadow:0 24px 80px #17201b38;animation:modal-rise .22s cubic-bezier(.2,.8,.2,1);max-width:390px;min-height:500px;padding:30px 28px;position:relative;width:min(100%,390px)}.login-close{align-items:center;background:#f5f4f0;border:0;border-radius:999px;color:#17201b;cursor:pointer;display:inline-flex;height:34px;justify-content:center;position:absolute;right:18px;top:18px;transition:background .16s ease,transform .16s ease;width:34px}.login-close:hover{background:#ece9df;transform:rotate(90deg)}.login-visual{display:grid;justify-items:center;min-height:220px;padding-top:108px;text-align:center}.login-visual p{color:#383838;font-size:.78rem;font-weight:900;letter-spacing:0;margin:0 0 8px;text-transform:uppercase}.kakao-login{align-items:center;background:#fee500;border:0;border-radius:12px;color:#171717;cursor:pointer;display:inline-flex;font-size:.98rem;font-weight:900;gap:8px;justify-content:center;min-height:48px;transition:filter .16s ease,transform .16s ease;width:100%}.kakao-login:hover{filter:brightness(.98);transform:translateY(-1px)}.kakao-login img{height:18px;width:18px}.login-divider{align-items:center;color:#a5a7ad;display:flex;font-size:.78rem;font-weight:700;gap:12px;margin:18px 0 0}.login-divider:before,.login-divider:after{background:#e3e4e8;content:"";flex:1;height:1px}.social-login-row{align-items:center;display:flex;gap:14px;justify-content:center;margin-top:16px}.social-login-row button{align-items:center;background:#fff;border:1px solid #d7dbe2;border-radius:999px;cursor:pointer;display:inline-flex;height:46px;justify-content:center;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;width:46px}.social-login-row button:hover{border-color:#b9c0ca;box-shadow:0 10px 24px #17201b1a;transform:translateY(-2px)}.social-login-row img{display:block;height:27px;object-fit:contain;width:27px}.social-separator{background:#e1e3e8;display:inline-block;height:24px;width:1px}@keyframes backdrop-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-rise{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.home-button{align-items:center;background:#fffefa;border:1px solid #ded8c9;border-radius:999px;color:#17201b;cursor:pointer;display:inline-flex;font-size:.92rem;font-weight:800;gap:8px;min-height:44px;padding:0 16px}.home-button:hover{background:#f5f0e5}.eyebrow{color:#5e6b60;font-size:.82rem;font-weight:700;letter-spacing:0;margin:0 0 6px;text-transform:uppercase}h1{font-size:clamp(1.2rem,2vw,2rem);line-height:1.02;letter-spacing:0;margin:0}.page-title-button{background:transparent;border:0;color:#17201b;cursor:pointer;display:block;margin:0 0 8px;padding:0;text-align:left;width:fit-content;transition:color .18s ease,transform .18s ease}.page-title-button h1{margin:0;transition:color .18s ease}.page-title-button:disabled{cursor:default;opacity:1}.page-title-button:hover h1{color:#6b7280}.notice{background:#fff6ed;border:1px solid #e0b28d;border-radius:8px;color:#823716;margin:0 auto 18px;max-width:1200px;padding:12px 14px}.celebration-backdrop{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(circle at top,rgba(255,212,103,.06),transparent 26%),#17201b14;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:24px;position:fixed;z-index:40}.celebration-modal{background:#fffefa;border:1px solid #ddd6c5;border-radius:16px;box-shadow:0 18px 48px #17201b1f,0 2px 8px #17201b0f;display:grid;gap:12px;max-width:360px;overflow:hidden;padding:34px 28px 28px;position:relative;text-align:center;width:100%}.celebration-modal strong{color:#17201b;font-size:1.8rem;line-height:1.05}.celebration-modal p{color:#546257;font-size:1rem;margin:0}.celebration-burst{height:120px;left:50%;pointer-events:none;position:absolute;top:-20px;transform:translate(-50%);width:120px}.celebration-piece{animation:burst .9s ease-out forwards;animation-delay:var(--piece-delay);background:#ffcf5c;border-radius:999px;box-shadow:0 0 10px #ffcf5c52;height:14px;left:50%;opacity:0;position:absolute;top:50%;transform:rotate(var(--piece-angle)) translateY(-10px);transform-origin:center -18px;width:7px}.celebration-piece:nth-child(3n){background:#1f9968}.celebration-piece:nth-child(3n+1){background:#ff8e66}@keyframes burst{0%{opacity:0;transform:rotate(var(--piece-angle)) translateY(-4px) scale(.7)}20%{opacity:1}to{opacity:0;transform:rotate(var(--piece-angle)) translateY(-72px) scale(1)}}.celebration-button{align-items:center;background:#f4f0e7;border:1px solid #d8d0bf;border-radius:10px;box-shadow:inset 0 1px #ffffffb3;color:#17201b;cursor:pointer;display:inline-flex;font-size:.96rem;font-weight:800;height:48px;justify-content:center;margin-top:8px;width:100%}.celebration-button:hover{background:#ece6d9}.mode-tab{background:#ddd9cf;border:1px solid #cec8b9;border-radius:6px;color:#253129;cursor:pointer;font-size:.86rem;font-weight:800;min-height:34px;padding:0 14px}.mode-tab--active{background:#17201b;border-color:#17201b;color:#fffefa}.workspace{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 320px;margin:0 auto}.mode-panel{margin:0 auto;max-width:980px}.mode-card{background:#fffefa;border:1px solid #ded8c9;border-radius:10px;padding:18px}.mode-card h2{font-size:1.1rem;margin:0 0 14px}.panel-kicker{color:#7b806f;font-size:.78rem;font-weight:900;margin:0 0 6px;text-transform:uppercase}.mode-preview{background:#f4f0e7;border:1px solid #d9d2c0;border-radius:8px;margin-bottom:12px;overflow:hidden;position:relative}.mode-preview img{display:block;max-height:220px;object-fit:cover;width:100%}.image-title-badge{background:#181c18e0;border-radius:7px;color:#fffefa;font-size:.82rem;font-weight:800;left:10px;padding:6px 9px;position:absolute;top:10px;z-index:2}.image-title-badge--compact{font-size:.78rem;left:8px;top:8px}.setting-stack{display:grid;gap:10px}.loop-row{align-items:center;background:#f4f0e7;border-radius:8px;display:flex;flex-wrap:wrap;gap:8px;padding:10px}.loop-row strong{margin-right:6px}.loop-row button{background:#fffefa;border:1px solid #d3cebf;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:700;min-height:28px;padding:0 9px}.loop-row span{background:#fffefa;border:1px solid #e1dccf;border-radius:6px;font-size:.82rem;padding:4px 8px}.setting-row{align-items:center;display:grid;gap:12px;grid-template-columns:90px 1fr}.setting-row label{color:#5a665d;font-size:.86rem;font-weight:800}.setting-control{align-items:center;display:grid;gap:8px;grid-template-columns:34px minmax(0,200px) 34px}.setting-control button{align-items:center;background:#17201b;border:0;border-radius:6px;color:#fffefa;cursor:pointer;display:inline-flex;height:34px;justify-content:center}.setting-value{background:#f6f2e8;border:1px solid #d7d0bf;border-radius:6px;font-weight:800;min-height:34px;padding:6px 10px}.primary-wide{background:#17201b;border:0;border-radius:8px;color:#fffefa;cursor:pointer;font-weight:800;min-height:40px;padding:0 14px}.primary-wide:disabled,.transport-controls button:disabled,.page-selector button:disabled,.toggle-button:disabled{cursor:not-allowed;opacity:.5}.learning-config-header{align-items:flex-start;display:flex;gap:12px;justify-content:space-between}.page-chip{align-items:center;justify-content:center;background:#f4f0e7;border:1px solid #ddd5c4;border-radius:999px;color:#243128;display:inline-flex;font-size:.8rem;font-weight:800;min-height:32px;padding:0 12px}.page-selector{align-items:center;background:#f8f5ed;border:1px solid #e1dbce;border-radius:8px;display:grid;gap:12px;grid-template-columns:36px minmax(0,1fr) 36px;margin-top:14px;padding:10px}.page-selector button,.transport-controls button,.toggle-button{align-items:center;background:#fffefa;border:1px solid #d4cebe;border-radius:7px;color:#17201b;cursor:pointer;display:inline-flex;font-weight:800;gap:6px;justify-content:center;min-height:34px;padding:0 10px}.page-selector__label{min-width:0;align-items:center}.page-selector__label strong,.page-selector__label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-selector__label span{color:#667067;font-size:.82rem;margin-top:4px}.learning-option-grid{display:grid;gap:12px;margin-top:14px}.form-field,.toggle-field{display:grid;gap:7px}.form-field span,.toggle-field span,.audio-order-card strong{color:#56635a;font-size:.84rem;font-weight:800}.form-field input,.form-field select{background:#fffefa;border:1px solid #d4cebe;border-radius:8px;color:#17201b;font:inherit;min-height:40px;padding:0 12px}.toggle-button{justify-content:flex-start}.toggle-button--active{background:#17201b;border-color:#17201b;color:#fffefa}.audio-order-card{background:#f8f5ed;border:1px solid #e0d8ca;border-radius:8px;display:grid;gap:12px;margin-top:14px;padding:12px}.audio-order-grid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.learning-controls{display:grid;gap:10px;margin-top:5px}.transport-controls{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.learning-status-row{align-items:center;color:#5d675f;display:flex;flex-wrap:wrap;gap:8px}.status-badge{border-radius:999px;font-size:.78rem;font-weight:800;min-height:28px;padding:5px 10px}.status-badge--idle,.status-badge--stopped{background:#e7e2d6;color:#4e5a50}.status-badge--starting{background:#efe6c7;color:#725700}.status-badge--playing{background:#d7f0e3;color:#126846}.status-badge--paused{background:#f9dfb6;color:#8b4c00}.status-badge--completed{background:#d9e9ff;color:#23539b}.stopwatch-wrap{display:grid;gap:10px}.timer-face{align-items:center;background:#f4f0e7;border-radius:8px;display:inline-flex;font-size:1.28rem;font-weight:900;gap:8px;min-height:54px;padding:0 14px}.timer-actions{display:flex;flex-wrap:wrap;gap:8px}.timer-actions button{background:#fffefa;border:1px solid #cec8b9;border-radius:6px;cursor:pointer;font-weight:800;min-height:34px;padding:0 10px}.lap-list{background:#f8f5ed;border-radius:8px;display:grid;gap:4px;max-height:200px;overflow-y:auto;padding:10px}.lap-list p{color:#6f7c73;margin:0}.image-panel,.study-panel{min-width:0}.image-shell{background:#d8d2c4;border:1px solid #d7cfbd;border-radius:8px;aspect-ratio:640 / 460;max-height:560px;overflow:hidden;position:relative}.image-shell img{display:block;height:100%;object-fit:contain;width:100%}.marker{align-items:center;background:#fffefa;border:2px solid #28352e;border-radius:999px;box-shadow:0 10px 24px #17201b2e;color:#17201b;cursor:pointer;display:inline-flex;font-size:.78rem;font-weight:800;min-width:30px;height:30px;justify-content:center;padding:0 6px;position:absolute;transform:translate(-50%,-50%);transition:background .16s ease,border-color .16s ease,transform .16s ease}.marker:hover,.marker--active{background:#ffda68;border-color:#17201b;transform:translate(-50%,-50%) scale(1.08)}.marker--done{background:#b9ead5}.marker--ghost{background:#fffefadb;border-style:dashed;cursor:default}.learning-focus{align-items:center;background:#ffda68f2;border:3px solid #17201b;border-radius:999px;box-shadow:0 0 0 10px #ffda6833;color:#17201b;display:inline-flex;font-size:.92rem;font-weight:900;min-width:44px;height:44px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);padding:0 8px;z-index:2}.study-panel{display:flex;flex-direction:column;gap:14px}.progress-card,.word-card{background:#fffefa;border:1px solid #ded8c9;border-radius:8px;padding:16px}.progress-meta{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.progress-meta span{color:#5e6b60;font-weight:700}.progress-meta strong{font-size:1.12rem}.progress-track{background:#e8e2d5;border-radius:999px;height:10px;overflow:hidden}.progress-track span{background:#157f58;display:block;height:100%;transition:width .18s ease}.word-heading{align-items:center;display:flex;gap:14px}.item-index{align-items:center;background:#17201b;border-radius:999px;color:#fffefa;display:inline-flex;flex:0 0 auto;font-weight:800;height:38px;justify-content:center;min-width:38px;padding:0 10px}.word-heading h2{font-size:1.45rem;letter-spacing:0;line-height:1.1;margin:0}.word-heading p{color:#5e6b60;font-weight:800;margin:4px 0 0}.meaning{border-top:1px solid #e5e7eb;color:#39453e;font-size:.95rem;margin:15px 0 0;padding-top:12px}.sentence{background:#edf6ef;border-left:4px solid #157f58;border-radius:6px;color:#24362d;line-height:1.55;margin:12px 0 0;padding:7px 12px;font-size:.95rem}.word-card--empty{display:grid;gap:8px}.word-card--empty p,.word-card--empty strong{margin:0}.learning-meta-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}.learning-meta-grid div{background:#f8f5ed;border:1px solid #e1dbc9;border-radius:8px;display:grid;gap:5px;padding:10px 12px}.learning-meta-grid span{color:#657067;font-size:.8rem;font-weight:800}.learning-meta-grid strong{color:#1d2a22;font-size:.95rem}.play-queue{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.play-queue span{align-items:center;justify-content:center;background:#fff6de;border:1px solid #ecd598;border-radius:999px;color:#775400;display:inline-flex;font-size:.8rem;font-weight:800;min-height:30px;padding:0 12px}.audio-actions{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}.audio-actions button,.nav-actions button{align-items:center;background:#17201b;border:0;border-radius:7px;color:#fffefa;cursor:pointer;display:inline-flex;font-weight:800;font-size:.9rem;gap:7px;justify-content:center;min-height:38px;padding:0 12px}.audio-actions button:hover,.nav-actions button:hover:not(:disabled){background:#2d4839}.item-list{background:#fffefa;border:1px solid #ded8c9;border-radius:8px;display:grid;overflow:hidden}.item-row{align-items:center;background:transparent;border:0;border-bottom:1px solid #eee7d8;color:#17201b;cursor:pointer;display:grid;gap:10px;grid-template-columns:28px minmax(64px,1fr) minmax(70px,1fr) 18px;font-size:.92rem;min-height:42px;padding:0 12px;text-align:left}.item-row:last-child{border-bottom:0}.item-row span{align-items:center;background:#efe8da;border-radius:999px;display:inline-flex;font-size:.78rem;font-weight:800;height:24px;justify-content:center;min-width:24px;padding:0 7px}.item-row strong,.item-row em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-row em{color:#617268;font-style:normal;font-weight:700}.item-row--active,.item-row:hover{background:#f5f0e5}.nav-actions{display:grid;gap:8px;grid-template-columns:1fr 1fr 1fr}.nav-actions button:disabled{cursor:not-allowed;opacity:.45}@media(max-width:1080px){.marketing-hero,.marketing-grid,.marketing-grid--sections,.marketing-steps,.board-page__layout,.workspace{grid-template-columns:1fr}.section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setting-row,.audio-order-grid,.transport-controls{grid-template-columns:1fr}}@media(max-width:680px){.app{padding:18px}.site-header{padding:0 20px}.site-nav{display:none}.site-header__actions{display:flex;align-items:flex-end;justify-content:center;gap:8px}.site-header__actions .ghost-button,.site-header__actions .login-button{width:120px;justify-content:center}.marketing-hero,.marketing-section,.board-page{padding-left:18px;padding-right:18px}.marketing-hero{padding-top:112px}.marketing-preview{min-height:320px}.landing-hero{min-height:68vh;padding:84px 24px 36px}.landing-content h1{font-size:3.2rem}.section-browser{padding:32px 18px 52px}.section-grid{grid-template-columns:1fr}.setting-control{grid-template-columns:30px minmax(0,1fr) 30px}.login-panel{min-height:520px}.login-visual{min-height:250px}.landing-notice{bottom:16px;left:24px;right:24px}.audio-actions,.nav-actions,.learning-meta-grid{grid-template-columns:1fr}}:root{font-size:14px}.app{min-height:100vh;padding:16px}h1{font-size:clamp(1.14rem,1.65vw,1.65rem)}.page-title-button{margin:0 0 7px}.workspace{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 300px;margin:0 auto}.image-shell{aspect-ratio:640 / 460;max-height:520px}.study-panel{gap:10px}.item-index{height:34px;min-width:34px;padding:0 9px}.marker{font-size:.72rem;height:26px;min-width:26px;padding:0 5px}.learning-focus{font-size:.84rem;height:38px;min-width:38px}.mode-panel{max-width:860px}.word-subtitle-row{align-items:center;display:flex;gap:6px;min-width:0}.word-subtitle-row p{margin:4px 0 0}.word-title-badges{align-items:center;display:flex;gap:3px;margin-top:4px}.word-title-badges span{align-items:center;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;color:#6b7280;display:inline-flex;font-size:.58rem;font-weight:800;justify-content:center;line-height:1;min-height:16px;padding:0 5px;white-space:nowrap}.landing .summary-progress{background:#e5e7eb;border-radius:999px;height:10px;overflow:hidden;position:relative}.landing .summary-progress span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4,#22c55e 40%,#eab308 65%,#f97316 82%,#ef4444);background-size:calc(10000% / var(--progress-percent, 100)) 100%;background-position:left center}@media(max-width:1080px){.workspace{grid-template-columns:1fr;max-width:760px}.image-shell{max-height:none}.audio-order-grid,.transport-controls{grid-template-columns:1fr}}@media(max-width:680px){.app{padding:14px}.workspace,.notice{max-width:100%}.image-shell{max-height:none}}.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.app-sidebar{background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;min-height:100vh;padding:36px 24px;position:sticky;top:0}.app-sidebar__brand{background:transparent;border:0;color:#000;cursor:pointer;font-size:2rem;font-weight:950;margin-bottom:36px;text-align:left}.app-sidebar__nav{display:grid;gap:10px}.app-sidebar__item{align-items:center;background:transparent;border:2px solid transparent;border-radius:16px;color:#6b7280;cursor:pointer;display:flex;font-size:1.05rem;font-weight:900;gap:14px;min-height:58px;padding:0 16px;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.app-sidebar__item:hover{background:#f3f4f6;color:#111827}.app-sidebar__item--active{background:#e0f2fe;border-color:#7dd3fc;color:#0284c7}.app-sidebar__icon{font-size:1.6rem;width:34px}.app-sidebar__profile{border:1px solid #e5e7eb;border-radius:18px;display:grid;gap:10px;margin-top:auto;padding:18px;text-align:center}.app-sidebar__avatar{font-size:2rem}.app-sidebar__profile strong{color:#111827}.profile-page{background:#f6f7f9}.profile-content{align-items:start;display:grid;justify-content:center;padding:56px 32px}.profile-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 14px 34px #1118270f;display:grid;gap:22px;padding:40px;width:min(100%,640px)}.profile-kicker{color:#6b7280;font-size:.9rem;font-weight:900;margin:0}.profile-card h1{color:#111827;font-size:2.5rem;line-height:1;margin:0}.profile-field{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;display:grid;gap:8px;padding:20px}.profile-field span{color:#6b7280;font-size:.9rem;font-weight:800}.profile-field strong{color:#111827;font-size:1.25rem}.profile-logout-button{background:#111827;border:0;border-radius:14px;color:#fff;cursor:pointer;font-size:1rem;font-weight:900;min-height:54px;transition:background-color .18s ease,transform .18s ease}.profile-logout-button:hover{background:#374151;transform:translateY(-1px)}.app{background:#f6f7f9}.home-button{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:999px;box-shadow:0 6px 18px #1118270a;color:#111827;display:inline-flex;font-weight:900;min-height:42px;padding:0 16px}.mode-tabs{display:flex;gap:8px;margin:0 auto 14px;max-width:1160px}.mode-tabs button,.mode-tab{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;color:#6b7280;cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:900;justify-content:center;line-height:1;min-height:34px;padding:0 13px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.mode-tabs button:hover,.mode-tab:hover{background:#f8fafc;border-color:#d1d5db;color:#111827;transform:translateY(-1px)}.mode-tabs button[aria-selected=true],.mode-tabs .mode-tab--active,.mode-tabs .active{background:#eceef0;border-color:#e4e4e4;color:#000}.workspace{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:48px;align-items:start;max-width:1120px;margin:0 auto}.image-shell{background:transparent;border:0;box-shadow:none;aspect-ratio:auto;max-height:none}.image-shell img{display:block;width:100%;height:auto;border:1px solid #e5e7eb;border-radius:14px}.study-panel,.study-pane{background:transparent}.page-selector{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 22px #1118270a;padding:10px}.page-selector button{background:#fff;border:1px solid #e5e7eb;border-radius:12px;color:#111827}.page-selector__label strong{color:#111827}.page-selector__label span{color:#6b7280}.learning-controls{background:transparent}.primary-wide{background:#2563eb;border:0;border-radius:12px;color:#fff;cursor:pointer;font-weight:900;min-height:48px;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}.primary-wide:hover{background:#60a5fa;box-shadow:0 10px 24px #2563eb38;transform:translateY(-1px)}.transport-controls{gap:8px}.transport-controls button{background:#fff;border:1px solid #e5e7eb;border-radius:12px;color:#6b7280;cursor:pointer;font-weight:800;min-height:38px;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.transport-controls button:not(:disabled):hover{background:#f8fafc;border-color:#d1d5db;color:#111827}.word-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 8px 22px #1118270a}.word-heading h2{color:#111827}.word-heading p,.meaning{color:#6b7280}.sentence{background:#eff6ff;border-left:4px solid #38bdf8;border-radius:12px;color:#111827}.learning-meta-grid>div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px}.learning-meta-grid span{color:#6b7280}.learning-meta-grid strong{color:#111827}.item-list{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden}.item-row{background:#fff;border-bottom:1px solid #e5e7eb;color:#111827;transition:background-color .16s ease}.item-row:hover{background:#f8fafc}.item-row--active{background:#eff6ff}.item-row span{background:#f3f4f6;color:#6b7280}.item-row strong{color:#111827}.item-row em{color:#6b7280}.play-queue span{background:#f3f4f6;border:1px solid #e5e7eb;color:#6b7280}.learning-config-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:22px}.learning-config-header h2{color:#111827;font-size:2rem;margin:0}.panel-kicker{color:#6b7280;font-size:.82rem;font-weight:900;margin:0 0 8px}.page-chip{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;color:#111827;font-weight:900;padding:8px 14px}.learning-option-grid{display:grid;gap:16px}.toggle-field,.form-field,.audio-order-card{color:#111827}.toggle-field span,.form-field span,.audio-order-card strong{color:#6b7280;font-size:.84rem;font-weight:900}.toggle-button{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;color:#111827;min-height:44px;transition:background-color .18s ease,transform .18s ease}.toggle-button--active{background:#111827;border-color:#111827;color:#fff}.form-field input,.form-field select{background:#fff;border:1px solid #d1d5db;border-radius:12px;color:#111827;min-height:46px;padding:0 14px}.audio-order-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;margin-top:16px;padding:18px}.audio-order-grid{gap:12px}.word-card--empty{background:#fff;border:1px solid #e5e7eb;border-radius:16px;margin-top:20px;padding:18px}.word-card--empty strong{color:#111827}.word-card--empty p{color:#4b5563}