@import "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap";
:root{--dp-bg:#f6f7f4;--dp-surface:#fff;--dp-fill:#ecf1ee;--dp-line:#e2e7e3;--dp-ink:#22312c;--dp-ink-2:#44514c;--dp-muted:#5c6863;--dp-subtle:#7a8681;--dp-track:#d2dcd6;--dp-teal:#3e7266;--dp-teal-press:#335f55;--dp-on-teal:#fff;--dp-teal-tint:#dce9e4;--dp-teal-soft:#e3eeea;--dp-teal-line:#a9c5bc;--dp-pink:#f3d3e6;--dp-pink-soft:#f7e5ef;--dp-pink-ink:#8e2f6e;--dp-rose:#d9577a;--dp-rose-soft:#f9c9d3;--dp-sage:#dde3cf;--dp-sage-dot:#c7cdb5;--dp-butter:#ffd66b;--dp-score-clear:var(--dp-ink);--dp-score-practice:var(--dp-pink);--dp-score-retry:var(--dp-rose-soft);--dp-danger:#b23a48;--dp-danger-soft:#fbe4e6;--dp-focus:#3e7266;--dp-font-display:"Instrument Serif", Georgia, serif;--dp-font-body:"Plus Jakarta Sans", "Noto Sans KR", system-ui, sans-serif;--dp-font-ko:"Noto Sans KR", "Plus Jakarta Sans", sans-serif;--dp-display-xl:42px;--dp-display-l:40px;--dp-display-m:34px;--dp-display-s:24px;--dp-display-xs:19px;--dp-body-l:16px;--dp-body:15px;--dp-body-s:14px;--dp-caption:13px;--dp-micro:12px;--dp-r-tail:4px;--dp-r-sm:14px;--dp-r-md:22px;--dp-r-lg:26px;--dp-r-xl:30px;--dp-r-sheet:34px;--dp-r-pill:999px;--dp-1:4px;--dp-2:8px;--dp-3:12px;--dp-4:16px;--dp-5:20px;--dp-6:24px;--dp-7:28px;--dp-8:32px;--dp-10:40px;--dp-gutter:22px;--dp-tap:44px;--dp-btn-h:54px;--dp-icon-btn:44px;--dp-play:80px;--dp-record:76px;--dp-tabbar-h:68px;--dp-shadow-bubble:0 2px 6px #22312c14;--dp-shadow-sheet:0 -8px 24px #22312c0f;--dp-ease:cubic-bezier(.2, .8, .2, 1);--dp-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--dp-dur-fast:.12s;--dp-dur:.22s;--dp-dur-slow:.36s;--dp-typing-cycle:1.2s}@keyframes dp-typing{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}.dp-typing{align-items:center;gap:5px;display:inline-flex}.dp-typing>i{background:var(--dp-sage-dot);width:9px;height:9px;animation:dp-typing var(--dp-typing-cycle) var(--dp-ease) infinite;border-radius:50%}.dp-typing>i:nth-child(2){background:var(--dp-rose);animation-delay:.15s}.dp-typing>i:nth-child(3){animation-delay:.3s}.dp-typing.on-teal>i{background:#ffffff8c}.dp-typing.on-teal>i:nth-child(2){background:var(--dp-butter)}@media (prefers-reduced-motion:reduce){.dp-typing>i{animation:none}*{transition-duration:0s!important}}
*{box-sizing:border-box}html{background:var(--dp-bg);color:var(--dp-ink);font-family:var(--dp-font-body);font-size:15px;line-height:1.6}body{margin:0}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--dp-teal);outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--dp-font-display);letter-spacing:-.02em;font-weight:400;line-height:1.12}h1{max-width:650px;font-size:48px}h2{font-size:32px}h3{font-size:24px}.page{max-width:760px;min-height:100svh;margin:auto;padding:32px 32px 130px}.page.wide{max-width:1120px}.page>*+*{margin-top:24px}.topbar{justify-content:space-between;align-items:center;gap:16px;min-height:44px;display:flex}.logo{font-family:var(--dp-font-display);align-items:center;gap:10px;font-size:34px;line-height:1;display:inline-flex}.logo img{flex:none}.rose{color:var(--dp-rose)}.page-heading{gap:12px;margin-top:36px;margin-bottom:28px;display:grid}.page-heading .muted{max-width:560px}.muted,.caption{color:var(--dp-muted)}.caption{font-size:13px}.eyebrow{text-transform:uppercase;letter-spacing:.06em;color:var(--dp-muted);font-size:12px;font-weight:700}.card{background:var(--dp-surface);border:1.5px solid var(--dp-line);border-radius:26px;padding:24px}.card>*+*{margin-top:16px}.card h3:not(:first-child){margin-top:28px}.row,.between{align-items:center;gap:12px;display:flex}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.button{border:1.5px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-height:54px;padding:12px 22px;font-size:15px;font-weight:700;line-height:1.3;transition:background .15s,transform .15s;display:inline-flex}.button:active:not(:disabled){transform:scale(.98)}.primary{background:var(--dp-teal);color:var(--dp-on-teal)}.primary:hover:not(:disabled){background:var(--dp-teal-press)}.secondary{background:var(--dp-surface);border-color:var(--dp-line)}.danger{background:var(--dp-danger);color:#fff}.block{width:100%;display:flex}.icon-button{border:1.5px solid var(--dp-line);background:var(--dp-surface);border-radius:50%;flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.icon-button[aria-pressed=true],.chip[aria-pressed=true]{background:var(--dp-teal-soft);border-color:var(--dp-teal-line);color:var(--dp-teal-press)}.text-button{min-height:44px;text-decoration:underline;-webkit-text-decoration-color:var(--dp-teal-line);text-decoration-color:var(--dp-teal-line);text-underline-offset:4px;background:0 0;border:0;align-items:center;gap:6px;padding:6px 0;font-size:14px;font-weight:600;display:inline-flex}.centered{justify-content:center;display:flex}.chip{background:var(--dp-surface);border:1.5px solid var(--dp-line);border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:8px 16px;font-size:14px;display:inline-flex}.hero{background:var(--dp-pink);border-radius:30px;padding:26px;position:relative}.hero h2{max-width:500px;margin-top:60px;font-size:38px}.hero>*+*{margin-top:12px}.hero .button{margin-top:22px}.hero .caption{color:var(--dp-pink-ink)}.tag{color:var(--dp-pink-ink);background:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;display:inline-block}.hero-chat{justify-items:end;gap:6px;display:grid;position:absolute;top:12px;right:24px}.chat-bubble{box-shadow:var(--dp-shadow-bubble);background:#fff;border-radius:18px 18px 4px;padding:8px 14px;font-size:13px}.reply{background:var(--dp-teal);color:#fff;border-radius:18px 18px 18px 4px}.hero-chat .chat-bubble:first-child{transform:rotate(-3deg)}.hero-chat .reply{transform:rotate(2deg)}.section-heading{margin-top:32px}.section-heading h2{font-size:27px}.collection-card{background:var(--dp-sage);align-items:center;gap:20px;display:flex}.collection-card>*+*{margin-top:0}.bottom-nav{bottom:max(20px,env(safe-area-inset-bottom));z-index:10;background:var(--dp-surface);border:1.5px solid var(--dp-line);border-radius:34px;justify-content:space-between;gap:4px;width:min(600px,100% - 32px);padding:8px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #22312c0d}.bottom-nav a{min-height:48px;color:var(--dp-muted);border-radius:26px;justify-content:center;align-items:center;gap:8px;padding:8px 18px;font-size:14px;display:flex}.bottom-nav [aria-current=page]{background:var(--dp-teal);color:#fff}.list-stack{gap:14px;display:grid}.list-card{border:1.5px solid var(--dp-line);background:#fff;border-radius:22px;align-items:center;gap:16px;padding:20px;display:flex}.list-card>span:last-child{min-width:0}.list-card h3{margin:6px 0}.list-card p{font-size:14px}.thumb{background:var(--dp-pink);width:56px;height:56px;color:var(--dp-teal);border-radius:18px;flex:none;place-items:center;display:grid}.quiet-card{text-align:center;background:0 0;border-style:dashed}.steps{gap:6px;display:flex}.steps span{background:var(--dp-track);border-radius:8px;width:8px;height:8px}.steps .current{background:var(--dp-teal);width:28px}.steps .done{background:var(--dp-ink)}.audio-player{gap:16px;display:grid}.wave{justify-content:center;align-items:center;gap:6px;height:100px;display:flex}.wave span{border-radius:6px;width:6px}.transport{justify-content:center;align-items:center;gap:20px;display:flex}.transport .primary{min-width:120px}.audio-player:not(.compact) .transport .primary{height:72px}.speed{align-items:center;gap:8px;font-size:13px;display:flex}.speed select{border:1px solid var(--dp-line);min-height:44px;color:var(--dp-ink);background:#fff;border-radius:12px;padding:4px 8px}.notice{background:var(--dp-teal-soft);border-radius:18px;padding:14px 16px;font-size:13px;line-height:1.65}.notice.warning{background:var(--dp-danger-soft);color:var(--dp-danger)}.next-action{margin-top:32px}.practice-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);align-items:start;gap:24px;display:grid}.sentence-list{gap:12px;display:grid}.sentence-card{border:1.5px solid var(--dp-line);cursor:pointer;background:#fff;border-radius:22px;padding:20px}.sentence-card.active{border-color:var(--dp-teal);border-radius:26px}.sentence-card>*+*{margin-top:12px}.sentence-text{font-size:17px;line-height:1.7}.active .sentence-text,.feedback-text{font:400 26px/1.4 var(--dp-font-display);letter-spacing:-.01em}.expression{font:inherit;color:inherit;line-height:inherit;background:var(--dp-pink);border:0;border-radius:5px;padding:0 3px;display:inline}.translation{font-family:var(--dp-font-ko);color:var(--dp-muted);font-size:14px;line-height:1.7}.expression-panel{background:var(--dp-pink-soft);cursor:default;border-radius:18px;padding:18px}.expression-panel>*+*{margin-top:12px}.expression-panel h3{font-size:24px}.expression-panel .eyebrow{color:var(--dp-pink-ink)}.expressions-list{margin-top:16px}.expressions-list .text-button{text-align:left;display:flex}.practice-controls{gap:16px;display:grid;position:sticky;top:24px}.practice-controls>.card{padding:20px}.practice-controls .transport{gap:12px}.practice-controls .transport .button{flex:1;min-width:0;padding-inline:12px}.record-card{text-align:center}.record-button{background:var(--dp-teal);color:#fff;border:0;border-radius:50%;place-items:center;width:76px;height:76px;display:inline-grid}.record-button.recording{background:var(--dp-rose)}.record-button svg{width:30px;height:30px}.mobile-focus{display:none}.sample-disclosure{padding:0 12px}.sample-disclosure>*+*{margin-top:12px}.sample-disclosure summary{color:var(--dp-muted);font-size:13px}summary{cursor:pointer;align-content:center;min-height:44px;font-weight:600}.segment{background:var(--dp-fill);border-radius:999px;gap:6px;padding:5px;display:flex}.segment button{background:0 0;border:0;border-radius:999px;flex:1;min-height:44px;padding:10px 8px;font-size:14px}.segment button[aria-pressed=true]{background:#fff;font-weight:700;box-shadow:0 2px 4px #22312c0a}.scores{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;display:grid}.scores>div{background:var(--dp-teal-tint);border-radius:26px;padding:20px}.scores>div:nth-child(2){background:var(--dp-pink-soft)}.scores span{color:var(--dp-muted);font-size:13px}.scores strong{font:400 48px/1.2 var(--dp-font-display);display:block}.scores small{font:500 14px var(--dp-font-body);color:var(--dp-muted)}.scores+.caption{margin-top:8px}.word{font:inherit;line-height:inherit;color:inherit;background:0 0;border:0;border-radius:5px;padding:0 2px;display:inline}.word.practice{background:var(--dp-pink)}.word.retry{background:var(--dp-rose-soft);text-underline-offset:3px;text-decoration:underline}.word.unscored{color:var(--dp-muted);text-underline-offset:3px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.action-stack{gap:12px;margin-top:24px;display:grid}.practice-grid>section>*+*{margin-top:20px}.state-card{text-align:center;justify-items:center;gap:20px;padding:48px 24px;display:grid}.state-card p{max-width:460px}.state-art{background:var(--dp-teal);color:#fff;width:96px;height:92px;box-shadow:18px -16px 0 var(--dp-pink);border-radius:32px 32px 32px 8px;place-items:center;margin:20px;display:grid}.settings-list{border:1.5px solid var(--dp-line);background:#fff;border-radius:26px;padding:0 20px}.settings-row{align-items:center;gap:14px;min-height:82px;padding:16px 0;display:flex}.settings-row+.settings-row{border-top:1.5px solid var(--dp-line)}.settings-row>span:nth-child(2){flex:1}.settings-row strong{font-size:15px;font-weight:600;display:block}.settings-row small{color:var(--dp-muted);font-size:13px;display:block}.icon-tile{background:var(--dp-fill);border-radius:50%;flex:none;place-items:center;width:40px;height:40px;display:grid}.welcome{max-width:550px}.welcome-chat{background:var(--dp-pink);border-radius:30px;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;min-height:250px;padding:32px;display:flex}.welcome-chat .reply{align-self:flex-end}.welcome h1{margin-top:32px}.welcome footer{justify-content:center;gap:24px;font-size:13px;text-decoration:underline;display:flex}.welcome>.caption{text-align:center}.typing{background:#fff;border-radius:16px;gap:6px;padding:10px 12px;display:flex}.typing i{background:var(--dp-sage-dot);border-radius:50%;width:8px;height:8px}.typing i:nth-child(2){background:var(--dp-rose)}.skip-link{z-index:20;background:#fff;padding:12px;position:absolute;top:-100px;left:16px}.skip-link:focus{top:12px}.assessment-unavailable{margin-top:20px}@media (min-width:1100px){.page{padding-top:48px}.page.wide .page-heading{margin-bottom:32px}}@media (max-width:760px){.page{padding:22px 20px 120px}h1{font-size:40px}h2{font-size:29px}.hero{padding:22px}.hero h2{font-size:34px}.page-heading{margin-top:28px}.practice-grid{flex-direction:column;display:flex}.practice-grid>section,.passage-column,.practice-controls{width:100%;min-width:0}.practice-controls{order:-1;position:static}.mobile-focus{display:block}.passage-column .sentence-card.active{display:none}.practice-controls .record-card{text-align:left;grid-template-columns:1fr 76px;gap:6px;display:grid}.record-card>*+*{margin:0}.record-card .record-button{grid-area:1/2/4}.record-card .warning{grid-column:1/-1}.bottom-nav a{padding-inline:14px}.bottom-nav a:not([aria-current]) span{display:none}.bottom-nav a[aria-current] span{display:inline}.card{padding:20px}.wave{gap:5px}.wave span{width:5px}.hero-chat{right:16px}.topbar .logo{font-size:30px}.transport{gap:14px}.sentence-text{font-size:16px}.active .sentence-text{font-size:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.form-card{gap:16px;display:grid}.field{color:var(--dp-ink-2);gap:8px;font-size:14px;font-weight:600;display:grid}.field input{border:1.5px solid var(--dp-line);border-radius:var(--dp-r-sm);background:var(--dp-surface);height:54px;color:var(--dp-ink);padding:0 16px;font-size:17px;font-weight:400}.field input:focus-visible{border-color:var(--dp-teal);box-shadow:0 0 0 3px var(--dp-teal-tint);outline:none}.practice-toolbar,.row.wrap,.between.wrap{flex-wrap:wrap}.sentence-card.collapsed{align-items:center;gap:14px;padding:14px 16px;display:flex}.sentence-card.collapsed>*+*{margin-top:0}.sentence-card.collapsed .sentence-text{min-width:0;font:400 16px/1.55 var(--dp-font-body);color:var(--dp-ink-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;display:-webkit-box;overflow:hidden}.score-badge{background:var(--dp-teal-tint);min-width:44px;color:var(--dp-teal-press);font:400 18px/1.3 var(--dp-font-display);text-align:center;border-radius:999px;flex:none;padding:4px 10px}.sentence-card.active{cursor:default}.passage-text{font-size:22px}.take-controls{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;display:grid}.take-controls .button{min-height:48px;margin-top:0;padding-inline:14px}.take-controls .take-status,.take-controls .notice{grid-column:1/-1;margin:0}.take-controls .record-button{width:68px;height:68px}.inline-message{background:var(--dp-teal-soft);border-radius:18px;padding:16px}.inline-message.warning{background:var(--dp-danger-soft)}.inline-message>*+*,.inline-message .button{margin-top:8px}.inline-result>*+*{margin-top:12px}.inline-result .scores{margin-top:0}.inline-result .scores strong{font-size:38px}@media (max-width:760px){.take-controls{gap:10px}.card-hint{display:none}.passage-text{font-size:19px}.active .feedback-text{font-size:22px}}.social-sign-in{gap:10px;display:grid}.button.social{border-color:var(--dp-line);width:100%;margin-top:0}.button.social.google{background:var(--dp-surface);color:var(--dp-ink)}.button.social.kakao{color:#000000d9;background:#fee500;border-color:#fee500}.divider{color:var(--dp-muted);align-items:center;gap:12px;display:flex}.divider:before,.divider:after{content:"";background:var(--dp-line);flex:1;height:1px}