* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body { color: #333333; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #ffffff; }

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

.viewport-center { width: 100%; max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 7vh clamp(16px, 5vw, 72px); display: grid; place-items: center; }

.primary-button { border: 0; border-radius: 10px; background: #5f82e9; color: #ffffff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }

.primary-button:hover:not(:disabled) { background: #4870ea; box-shadow: 0 8px 18px rgba(95, 130, 233, 0.22); transform: translateY(-1px); }

.home-panel, .auth-panel { width: 100%; max-width: 1440px; min-height: 86vh; background: #fafbff; border-radius: 56px; }

.home-panel { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 741px); gap: 7vw; align-items: center; justify-content: center; padding: 8vh clamp(24px, 8vw, 115px); }

.home-panel__welcome { display: flex; flex-direction: column; align-items: center; text-align: center; }

.bubble { position: relative; width: 273px; height: 103px; margin-bottom: -8px; }

.bubble img { width: 100%; height: 100%; display: block; }

.bubble span { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); color: #4870ea; font-size: 42px; font-weight: 800; white-space: nowrap; }

.mascot { width: 212px; height: 201px; object-fit: contain; }

.welcome-text { margin: 43px 0 10px; color: #666666; font-size: 40px; font-weight: 600; }

.home-panel h1 { margin: 0; color: #000000; font-size: 46px; font-weight: 700; line-height: 1.22; white-space: nowrap; }

.home-panel h1 strong { color: #5f82e9; }

.home-login-button { width: 292px; height: 62px; margin-top: 91px; font-size: 30px; }

.brand-wordmark { width: 194px; height: 31px; margin-top: 90px; }

.feature-list { display: flex; flex-direction: column; gap: 52px; }

.feature-card { position: relative; width: 100%; max-width: 741px; min-height: 183px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 37px 70px 34px; background: #ffffff; border-radius: 15px; box-shadow: 0 4px 19.7px rgba(192, 195, 216, 0.9); transition: box-shadow 160ms ease, transform 160ms ease; }

.feature-card:hover { box-shadow: 0 12px 28px rgba(137, 148, 191, 0.35); transform: translateY(-2px); }

.feature-card__bar { position: absolute; top: 0; bottom: 0; left: -6px; width: 19px; background: #5f82e9; }

.feature-card__title { color: #5f82e9; font-size: 37px; font-weight: 800; line-height: 1.15; }

.feature-card__desc { margin-top: 14px; color: #3b4256; font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }

.auth-panel { display: grid; place-items: center; padding: 72px 24px; }

.auth-form { width: 100%; max-width: 561px; display: flex; flex-direction: column; align-items: stretch; }

.auth-form h1 { margin: 0 0 68px; color: #000000; font-size: 44px; font-weight: 800; line-height: 56px; letter-spacing: 0; text-align: center; }

.auth-fields { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 12px; }

.field span { color: #000000; font-size: 16px; font-weight: 700; line-height: 24px; }

.field input { width: 100%; height: 58px; padding: 16px 12px; border: 1px solid #c0c3d8; border-radius: 4px; background: #ffffff; color: #262626; font-size: 18px; line-height: 24px; outline: none; }

.field input::placeholder { color: #6b7280; }

.field input:focus { border-color: #5f82e9; box-shadow: 0 0 0 3px rgba(95, 130, 233, 0.14); }

.auth-submit { width: 100%; height: 56px; margin-top: 40px; border-radius: 6px; font-size: 18px; font-weight: 700; }

.auth-link { display: flex; justify-content: center; padding: 16px 12px; color: #262626; font-size: 18px; font-weight: 700; line-height: 24px; text-decoration: underline; }

.required-note { margin: -17px 0 16px; color: #6b7280; font-size: 16px; font-weight: 700; line-height: 24px; }

.consent { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #6b7280; font-size: 16px; line-height: 24px; cursor: pointer; }

.consent input { position: absolute; opacity: 0; pointer-events: none; }

.consent__icon { width: 20px; height: 20px; border: 1.5px solid #6b7280; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

.consent__icon::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); opacity: 0; }

.consent input:checked + .consent__icon { border-color: #5f82e9; background: #5f82e9; }

.consent input:checked + .consent__icon::after { opacity: 1; }

.auth-submit--disabled, .auth-submit:disabled { background: #d1d5db; box-shadow: none; cursor: not-allowed; transform: none; }

.page-study, .page-feature { background: #fafbff; }

.study-page { width: 100%; max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 126px clamp(24px, 8vw, 115px) 100px; }

.study-heading { width: 100%; max-width: 1440px; margin: 0 auto 48px; }

.study-heading h1 { margin: 0 0 68px; color: #333333; font-size: 54px; font-weight: 800; line-height: 71px; letter-spacing: 0; text-align: center; }

.level-tabs { display: flex; gap: 12px; }

.level-tabs__item { min-width: 156px; height: 57px; border: 0; border-radius: 99px; background: #eaefff; color: #9cafe6; cursor: pointer; font-size: 27px; font-weight: 800; letter-spacing: 0; }

.level-tabs__item.is-active { background: #5f82e9; color: #ffffff; }

.lesson-grid { width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 56px 40px; }

.lesson-card { min-height: 469px; overflow: hidden; border-radius: 15px; background: #ffffff; box-shadow: 0 4px 19.7px rgba(192, 195, 216, 0.9); display: flex; flex-direction: column; transition: box-shadow 160ms ease, transform 160ms ease; }

.lesson-card:hover { box-shadow: 0 12px 28px rgba(137, 148, 191, 0.35); transform: translateY(-2px); }

.lesson-card__thumb { flex: 0 0 302px; background-color: #d9d9d9; background-size: cover; background-position: center; background-repeat: no-repeat; }

.lesson-card__body { min-height: 153px; border-bottom: 14px solid #5f82e9; padding: 33px 48px 26px; display: flex; flex-direction: column; gap: 16px; }

.lesson-card__body strong { color: #5f82e9; font-size: 30px; font-weight: 800; }

.lesson-card__body span { color: #868686; font-size: 24px; line-height: 36px; letter-spacing: 0; }

.page-learning { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #fafbff; }

.learning-page { width: 1440px; max-width: 100vw; height: 900px; max-height: 100vh; min-height: 0; margin: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 46px; align-items: start; padding: 74px 101px 84px; }

.learning-page:has(.learning-card--learn) { height: auto; min-height: 900px; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 64px 56px 72px; align-items: center; }

.coach-panel { min-height: 0; height: fit-content; position: relative; align-self: start; }

.coach-messages { width: 280px; margin-top: 25px; position: relative; display: flex; flex-direction: column; gap: 12px; }

.coach-avatar { position: absolute; left: 0; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #5f82e9; object-fit: cover; object-position: center; }

.coach-bubble { width: 250px; margin: 0 0 0 32px; padding: 17px 16px; border-radius: 6px; background: #ffffff; box-shadow: 0 0 3.5px rgba(0, 0, 0, 0.17); color: #222222; font-size: 15px; line-height: 24px; }

.page-learning .bottom-nav { left: 7.3vw; right: auto; bottom: 40px; width: 306px; height: 38px; transform: none; }

.page-learning .bottom-nav svg { width: 18px; height: 18px; }

@media (min-width: 1441px) { .page-learning .bottom-nav { left: calc((100vw - 1440px) / 2 + 105px); } }

@media (min-height: 901px) { .page-learning .bottom-nav { bottom: calc((100vh - 900px) / 2 + 40px); } }

.learning-card { position: relative; width: 100%; max-width: 760px; min-height: 584px; justify-self: center; padding: 48px 64px 50px; border: 1.5px solid #c7cfe6; border-radius: 36px; background: #ffffff; text-align: center; }

.learning-card--learn { max-width: 920px; min-height: 760px; padding: 56px 80px 72px; border-radius: 44px; }

.learning-card--learn .lesson-badge { width: 168px; height: 40px; margin-bottom: 36px; border-radius: 10px; font-size: 18px; }

.learning-card--learn .learning-instruction { font-size: 24px; font-weight: 700; line-height: 36px; }

.learning-card--learn .image-prompt { width: 420px; height: 230px; margin: 32px auto 28px; border-radius: 8px; }

.learning-card--learn .image-prompt svg { width: 64px; height: 64px; }

.learning-card--learn .korean-prompt { margin: 0 0 36px; font-size: 28px; line-height: 40px; }

.learning-card--learn .answer-form { max-width: 520px; height: 60px; padding: 0 8px 0 26px; }

.learning-card--learn .answer-form input { font-size: 20px; }

.learning-card--learn .answer-form button { width: 46px; height: 46px; }

.learning-card--learn .answer-form button svg { width: 22px; height: 22px; }

.learning-card--learn .feedback { margin-top: 24px; font-size: 16px; gap: 10px; }

.learning-card--learn .feedback span { width: 18px; height: 18px; font-size: 12px; }

.learning-card--learn .answer-hint { margin-top: 14px; }

.learning-card--learn .answer-hint small { color: #868686; font-size: 16px; font-weight: 600; }

.learning-card--learn .retry-link { margin-top: 40px; font-size: 16px; gap: 10px; }

.learning-card--learn .retry-link span { width: 22px; height: 22px; font-size: 12px; }

.learning-card--learn .next-button { bottom: 48px; width: 400px; height: 56px; border-radius: 10px; font-size: 18px; }

.learning-card--learn .lesson-empty { margin-top: 80px; color: #868686; font-size: 20px; }

.lesson-badge { width: 137px; height: 29px; margin: 0 auto 31px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: #5f82e9; color: #ffffff; cursor: pointer; font-size: 14px; font-weight: 800; }

.help-button { position: absolute; top: 38px; right: 34px; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #5f82e9; border-radius: 50%; color: #5f82e9; font-size: 16px; font-weight: 800; }

.sentence-progress { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; color: #b6b6b6; font-size: 10px; font-weight: 700; }

.sentence-progress span { position: relative; padding-left: 11px; }

.sentence-progress span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #d9d9d9; transform: translateY(-50%); }

.sentence-progress .is-active { color: #5f82e9; }

.sentence-progress .is-active::before { background: #5f82e9; }

.learning-instruction { margin: 0; color: #000000; font-size: 18px; font-weight: 600; line-height: 34px; }

.image-prompt { width: 280px; height: 154px; margin: 22px auto 20px; display: grid; overflow: hidden; place-items: center; position: relative; border-radius: 2px; background: #d4d4d4; }

.image-prompt img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }

.image-prompt svg { width: 46px; height: 46px; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.korean-prompt { margin: 0 0 28px; color: #888888; font-size: 21px; font-weight: 600; line-height: 34px; }

.answer-form { width: 100%; max-width: 420px; height: 52px; margin: 0 auto; padding: 0 6px 0 22px; display: flex; align-items: center; gap: 8px; border: 1.5px solid #d5d5d5; border-radius: 100px; background: #ffffff; box-shadow: 0 4px 14px rgba(164, 174, 210, 0.28); }

.answer-form input { flex: 1; min-width: 0; width: auto; height: 100%; border: 0; padding: 0; color: #333333; font-size: 16px; outline: none; background: transparent; }

.answer-form input::placeholder { color: #acacac; }

.answer-form button { position: relative; width: 40px; height: 40px; margin-right: 0; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #edf3ff; color: #5f82e9; cursor: pointer; }

.answer-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.answer-form button[data-recording] { background: #ffe8e8; color: #ef4444; }

.answer-form button[data-recording]::after { content: ''; position: absolute; inset: -4px; border: 2px solid #ef4444; border-radius: 50%; animation: pic-talk-topic-mic-pulse 1.2s ease-in-out infinite; }

.is-correct .answer-form, .is-wrong .answer-form { border-color: #5f82e9; }

.feedback { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 700; }

.feedback span { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; color: #ffffff; font-size: 10px; line-height: 1; }

.feedback--correct { color: #008720; }

.feedback--correct span { background: #008720; }

.feedback--wrong { color: #ff4141; }

.feedback--wrong span { background: #ff4141; }

.next-button { position: absolute; left: 50%; bottom: 42px; width: 320px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: #5f82e9; color: #ffffff; cursor: pointer; font-size: 14px; font-weight: 700; transform: translateX(-50%); }

.next-button:focus { outline: none; }

.retry-link { margin-top: 54px; display: inline-flex; align-items: center; gap: 8px; color: #868686; font-size: 13px; font-weight: 600; }

.retry-link span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #c7cfe6; border-radius: 50%; color: #5f82e9; font-size: 10px; }

.learning-card--apply .learning-instruction { margin-top: 42px; }

.apply-korean { margin: 67px auto 0; padding-left: 0; display: inline-block; color: #888888; font-size: 21px; font-weight: 600; line-height: 34px; text-align: center; }

.apply-korean li { padding-left: 8px; }

.apply-question { margin: 28px 0 0; color: #000000; font-size: 17px; font-weight: 800; line-height: 1.4; }

.apply-feedback { margin-top: 32px; }

.answer-label { margin-top: 32px; display: inline-flex; align-items: center; gap: 8px; color: #5f82e9; font-size: 13px; font-weight: 700; }

.sound-button { width: 22px; height: 22px; margin: 21px auto 0; display: grid; place-items: center; border: 1px solid #d3d3d3; border-radius: 50%; background: #ffffff; color: #5f82e9; }

.sound-button svg { width: 12px; height: 12px; fill: currentColor; }

.apply-korean--result { margin-top: 21px; }

.word-line { margin-top: 22px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.word-line span { min-height: 32px; padding: 7px 11px; border-radius: 4px; background: #e2efff; color: #5f82e9; font-size: 16px; font-weight: 800; line-height: 1.1; }

.word-line--wrong span { background: #fdf1f1; color: #ff4141; }

.answer-actions { margin-top: 30px; display: flex; justify-content: center; gap: 22px; }

.answer-actions a { display: inline-flex; align-items: center; gap: 7px; color: #868686; font-size: 13px; font-weight: 600; }

.answer-actions span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #c7cfe6; border-radius: 50%; color: #5f82e9; font-size: 10px; }

.record-controls { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); display: grid; grid-template-columns: 58px 46px; gap: 22px; justify-content: center; align-items: center; }

.record-controls p { grid-column: 1 / -1; margin: -10px 0 0; color: #5f82e9; font-size: 18px; font-weight: 700; }

.record-button, .keyboard-button { display: grid; place-items: center; border-radius: 50%; }

.record-button { width: 58px; height: 58px; border: 5px solid #edf2ff; color: #5f82e9; background: #ffffff; }

.record-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.keyboard-button { width: 46px; height: 46px; background: #f1f4fd; color: #5f82e9; }

.keyboard-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.record-controls--review { grid-template-columns: 44px 58px 46px; }

.record-controls--review .skip-button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #5f82e9; color: #ffffff; font-size: 12px; font-weight: 700; }

.choice-board { margin-top: 48px; }

.choice-slots, .choice-bank { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.choice-slots { margin-bottom: 48px; }

.choice-slots span { height: 32px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: #ececec; color: transparent; font-size: 16px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }

.choice-slots span.is-filled { width: auto; padding: 0 11px; background: #e2efff; color: #5f82e9; }

.choice-bank a { min-height: 32px; padding: 7px 11px; border-radius: 4px; background: #ececec; color: #a0a0a0; font-size: 16px; font-weight: 800; line-height: 1.1; }

.choice-backspace { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 4px; background: #ececec; color: #a0a0a0; cursor: pointer; }

.choice-backspace svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.choice-clear { width: 18px; height: 18px; margin: 17px auto 0; display: grid; place-items: center; border-radius: 50%; background: #e2e2e2; color: #ffffff; font-size: 14px; font-weight: 800; }

.choice-board--compact { margin-top: 22px; }

.mode-switch { position: absolute; left: 50%; bottom: 36px; width: 320px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 6px; background: #f1f4fd; color: #5f82e9; font-size: 16px; font-weight: 800; transform: translateX(-50%); }

.mode-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.learning-card--practice { min-height: 710px; padding-top: 27px; }

.learning-card--practice .lesson-badge { width: 136px; margin-bottom: 18px; }

.practice-heading { margin-bottom: 14px; font-size: 17px; font-weight: 600; line-height: 32px; }

.practice-dialogue { width: 100%; max-width: 420px; height: 372px; margin: 0 auto; position: relative; border: 1px solid #c7cfe6; border-radius: 14px; background: #fafbff; }

.practice-turn { position: absolute; display: flex; align-items: flex-start; text-align: left; }

.practice-turn--coach { left: 26px; top: 24px; gap: 8px; }

.practice-turn--user { right: 24px; top: 150px; }

.practice-turn img { width: 28px; height: 28px; border-radius: 50%; }

.practice-turn__body { display: flex; flex-direction: column; gap: 6px; }

.practice-speaker { color: #868686; font-size: 12px; line-height: 1; }

.practice-bubble { width: 276px; min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px 18px; border: 1px solid #c7cfe6; border-radius: 10px; background: #ffffff; }

.practice-turn--user .practice-bubble { width: 260px; }

.practice-bubble small { color: #868686; font-size: 12px; line-height: 16px; }

.practice-bubble strong { color: #222222; font-size: 15px; font-weight: 800; line-height: 19px; }

.slot-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }

.slot-line span { min-width: 40px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 4px; background: #ececec; color: transparent; font-size: 15px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }

.slot-line span.is-filled { width: auto; padding: 0 10px; background: #e2efff; color: #5f82e9; }

.practice-record-controls { bottom: 34px; }

.practice-choice-bank { margin-top: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }

.practice-choice-bank a, .practice-choice-bank span:not(.choice-clear) { min-height: 27px; padding: 6px 8px; border-radius: 4px; background: #ececec; color: #a0a0a0; font-size: 14px; font-weight: 800; line-height: 1; }

.practice-choice-bank .choice-backspace { width: 27px; height: 27px; }

.practice-choice-bank .choice-backspace svg { width: 16px; height: 16px; }

.practice-choice-bank .choice-clear { margin: 0; }

.practice-choice-bank--selected { margin-top: 17px; }

.practice-choice-bank--selected span:not(.choice-clear) { border: 1px dashed #d2d2d2; background: #ffffff; color: #d2d2d2; }

.practice-mode-switch, .practice-grade-button { bottom: 26px; }

.practice-grade-button { width: 320px; }

.learning-card--master { min-height: 584px; padding-top: 38px; }

.learning-card--master .lesson-badge { width: 136px; margin-bottom: 22px; }

.master-question { margin: 0 0 18px; color: #000000; font-size: 18px; font-weight: 600; line-height: 34px; }

.master-question strong, .master-question span { color: #5f82e9; font-weight: 800; }

.master-image { margin-top: 0; margin-bottom: 17px; }

.master-prompt { margin: 0 0 25px; color: #5f82e9; font-size: 18px; font-weight: 800; line-height: 34px; }

.master-answer-form { margin-top: 0; }

.learning-card--master.is-done .master-answer-form { border-color: #5f82e9; }

.master-retry { margin-top: 70px; }

.conversation-page, .pronunciation-page { width: 100%; max-width: 1440px; min-height: 100vh; margin: 0 auto; position: relative; padding: 188px 24px 160px; }

.feature-heading { text-align: center; }

.feature-heading h1 { margin: 0; color: #333333; font-size: 54px; font-weight: 800; line-height: 1.2; letter-spacing: 0; }

.feature-heading p { margin: 31px 0 0; color: #666666; font-size: 40px; line-height: 1.2; letter-spacing: 0; }

.mode-list { width: 100%; max-width: 858px; margin: 124px auto 0; display: flex; flex-direction: column; gap: 31px; }

.mode-card { min-height: 185px; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 40px; padding: 32px 54px; border: 1px solid #dee4fb; border-radius: 18px; background: #ffffff; box-shadow: 0 7px 9.8px rgba(205, 214, 233, 0.9); transition: box-shadow 160ms ease, transform 160ms ease; }

.mode-card:hover { box-shadow: 0 12px 22px rgba(177, 189, 224, 0.42); transform: translateY(-2px); }

.mode-card img { width: 126px; height: 98px; object-fit: contain; justify-self: center; }

.mode-card strong { display: block; color: #333333; font-size: 28px; font-weight: 800; line-height: 1.2; }

.mode-card small { display: block; margin-top: 19px; color: #868686; font-size: 24px; line-height: 36px; letter-spacing: 0; }

.bottom-nav { position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%); width: calc(100vw - 48px); max-width: 530px; height: 66px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border: 1px solid #e2e6f2; border-radius: 999px; background: #ffffff; box-shadow: 0 4px 10px rgba(164, 174, 210, 0.42); z-index: 10; }

.bottom-nav a { height: 100%; display: grid; place-items: center; color: #5f82e9; }

.bottom-nav svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.bottom-nav__home svg { fill: currentColor; stroke: none; }

.pronunciation-page { padding-top: 102px; }

.pronunciation-panel { width: 100%; max-width: 1240px; min-height: 1118px; margin: 0 auto; padding: 150px 6vw 76px; border: 1.5px solid #c7cfe6; border-radius: 56px; background: #ffffff; }

.pronunciation-tabs { width: 100%; max-width: 684px; margin: 0 auto 32px; display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid #dddddd; }

.pronunciation-tabs button { height: 66px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #dddddd; cursor: pointer; font-size: 22px; font-weight: 700; }

.pronunciation-tabs .is-active { border-bottom-color: #222222; color: #000000; }

.pronunciation-grid { width: 100%; max-width: 684px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.pron-card { position: relative; height: 116px; padding: 29px 18px 16px; display: flex; flex-direction: column; align-items: center; border: 1px solid #dddddd; border-radius: 8px; background: #ffffff; color: #222222; text-align: center; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }

.pron-card:hover { border-color: rgba(0, 193, 170, 0.45); box-shadow: 0 8px 18px rgba(0, 164, 145, 0.12); transform: translateY(-1px); }

.pron-card strong { font-size: 16px; font-weight: 800; line-height: 1; }

.pron-card small { margin-top: 12px; color: #868686; font-size: 14px; line-height: 1; }

.pron-card em { margin-top: 13px; padding: 4px 12px; border-radius: 4px; background: #e6f6f4; color: #00c1aa; font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.1; }

.pron-card__category { position: absolute; top: -1px; left: -1px; padding: 2px 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; background: #00c1aa; color: #ffffff; font-size: 12px; font-weight: 800; line-height: 20px; }

.pron-card--dip .pron-card__category { background: #00a491; }

.pron-card--dip em { color: #00a491; }

.intro-panel { display: flex; flex-direction: column; align-items: center; text-align: center; }

.intro-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 50px; padding: 0 32px; border-radius: 10px; background: #5f82e9; color: #ffffff; font-size: 24px; font-weight: 700; white-space: nowrap; }

.intro-key { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: #5f82e9; font-size: 16px; font-weight: 600; }

.intro-key__dot { width: 11px; height: 11px; border-radius: 50%; background: #5f82e9; }

.intro-media { width: 100%; max-width: 610px; height: 280px; margin-top: 56px; display: grid; place-items: center; border-radius: 12px; background: #d9d9d9; overflow: hidden; }

.intro-media video { width: 100%; height: 100%; object-fit: cover; }

.intro-media svg { width: 56px; height: 56px; fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.intro-tip { display: inline-flex; align-items: center; justify-content: center; margin-top: 48px; padding: 12px 24px; border-radius: 8px; background: #f1f4fd; color: #5f82e9; font-size: 22px; font-weight: 700; }

.intro-notes { width: 100%; max-width: 640px; margin: 24px 0 0; padding: 0; list-style: none; color: #000000; font-size: 22px; line-height: 40px; text-align: left; }

.intro-notes li { position: relative; padding-left: 18px; }

.intro-notes li::before { content: '\00b7'; position: absolute; left: 0; }

.intro-notes--plain { text-align: center; }

.intro-next { width: 100%; max-width: 494px; height: 70px; margin-top: 64px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: #5f82e9; color: #ffffff; font-family: inherit; font-size: 22px; font-weight: 600; cursor: pointer; }

.pic-talk-title { margin: 32px 0 0; color: #000000; font-size: 34px; font-weight: 700; line-height: 56px; }

.pic-talk-change { display: inline-flex; align-items: center; gap: 10px; height: 40px; margin-top: 24px; padding: 2px 20px; border: 2px solid #5f82e9; border-radius: 100px; background: #ffffff; color: #5f82e9; font-size: 16px; font-weight: 600; }

.pic-talk-change img { width: 18px; height: 18px; }

.pic-talk-illustration { width: 260px; height: auto; margin-top: 56px; }

.pic-talk-desc { margin: 32px 0 0; color: #868686; font-size: 26px; line-height: 40px; text-align: center; }

.pic-talk-modes { width: 100%; max-width: 656px; margin-top: 48px; display: flex; flex-direction: column; gap: 20px; }

.pic-talk-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 23px 30px 25px; border: 2px solid #d3d3d3; border-radius: 8px; background: #ffffff; text-align: left; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }

.pic-talk-mode:hover { border-color: #5f82e9; box-shadow: 0 8px 18px rgba(95, 130, 233, 0.16); transform: translateY(-1px); }

.pic-talk-mode__label { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 4px 8px; border-radius: 4px; background: #5f82e9; color: #ffffff; font-size: 17px; font-weight: 700; }

.pic-talk-mode__label img { width: 18px; height: 18px; }

.pic-talk-mode__desc { color: #868686; font-size: 20px; line-height: 1.5; }

.topic-talk-illustration { width: 220px; height: auto; margin-top: 64px; }

.topic-talk-desc { margin: 40px 0 0; color: #000000; font-size: 24px; font-weight: 500; line-height: 1.4; }

.topic-display { width: 100%; max-width: 466px; min-height: 62px; margin-top: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; border: 1px dashed #868686; border-radius: 4px; background: #ffffff; }

.topic-display__topic { margin: 0; color: #5f82e9; font-size: 24px; font-weight: 700; text-align: center; }

.topic-display__desc { margin: 0; color: #949495; font-size: 16px; line-height: 1.5; text-align: center; }

.pic-talk-topic-photo { position: relative; width: 100%; max-width: 610px; height: 280px; margin: 40px auto 0; border-radius: 12px; background: #d9d9d9; overflow: hidden; }

.pic-talk-topic-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pic-talk-topic-photo__placeholder { width: 100%; height: 100%; display: grid; place-items: center; }

.pic-talk-topic-photo__placeholder svg { width: 56px; height: 56px; fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pic-talk-topic-photo__refresh { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.pic-talk-topic-photo__refresh img { width: 100%; height: 100%; }

.pic-talk-topic-prompt { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 0; color: #000000; font-size: 24px; font-weight: 500; text-align: center; }

.pic-talk-topic-prompt img { width: 20px; height: 20px; }

.pic-talk-topic-input { width: 100%; max-width: 466px; min-height: 62px; margin: 32px auto 0; padding: 12px 14px 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed #868686; border-radius: 4px; background: #ffffff; }

.pic-talk-topic-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #333333; font-size: 20px; }

.pic-talk-topic-input input::placeholder { color: #949495; }

.pic-talk-topic-input input:focus { outline: none; }

.pic-talk-topic-mic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 41px; padding: 0; border: 0; background: transparent; flex-shrink: 0; cursor: pointer; }

.pic-talk-topic-mic img { width: 100%; height: 100%; }

.pic-talk-topic-mic::after { content: ''; position: absolute; inset: -5px; border: 2px solid #ef4444; border-radius: 50%; opacity: 0; }

.pic-talk-topic-mic[data-recording]::after { opacity: 1; animation: pic-talk-topic-mic-pulse 1.2s ease-in-out infinite; }

.pic-talk-topic-mic:disabled { opacity: 0.5; cursor: not-allowed; }

@keyframes pic-talk-topic-mic-pulse { 0%, 100% { transform: scale(0.92);
    opacity: 0.5; }
  50% { transform: scale(1.08);
    opacity: 1; } }

.topic-chat-panel { height: calc(100vh - 230px); min-height: 520px; max-height: 1118px; }

.topic-chat-banner { width: 100%; max-width: 704px; margin: 32px auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 24px; border-radius: 11px; background: #e2efff; }

.topic-chat-banner svg { width: 24px; height: 24px; fill: none; stroke: #5f82e9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.topic-chat-banner p { margin: 0; color: #5f82e9; font-size: 20px; font-weight: 600; text-align: center; }

.topic-chat-messages { width: 100%; max-width: 704px; flex: 1 1 auto; min-height: 0; margin: 24px auto 0; padding-right: 4px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; text-align: left; }

.pic-talk-chat-photo { position: relative; width: 100%; max-width: 704px; height: 180px; margin: 24px auto 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #c0c3d8; border-radius: 20px; background: #ffffff; overflow: hidden; }

.pic-talk-chat-photo img { max-width: 70%; max-height: 80%; object-fit: contain; }

.pic-talk-chat-photo__refresh { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.pic-talk-chat-photo__refresh img { width: 100%; height: 100%; max-width: none; max-height: none; }

.pic-talk-chat-panel .topic-chat-bubble--user { border: 0; border-radius: 16px; background: #f1f4ff; padding: 10px 16px; font-size: 20px; color: #333333; }

.pic-talk-speak-divider { width: 100%; max-width: 290px; height: 1px; margin: 0 auto; background: #ececec; }

.pic-talk-speak-panel .record-controls { margin-top: 0; }

.pic-talk-speak-panel .record-controls p { color: #5f82e9; font-weight: 600; }

.topic-chat-empty { margin: 0; padding: 24px 0; color: #acacac; font-size: 18px; text-align: center; }

.topic-chat-bubble { max-width: 82%; padding: 16px 20px; border: 1px solid #c7cfe6; border-radius: 0 16px 16px 16px; background: #ffffff; color: #222222; font-size: 20px; line-height: 1.4; }

.topic-chat-bubble--user { align-self: flex-end; padding: 12px 20px; border: 1px solid #d3d3d3; border-radius: 100px; color: #333333; font-size: 18px; }

.topic-chat-bubble--ai { align-self: flex-start; }

.topic-chat-bubble--loading .topic-chat-bubble__text { color: #a4a4a4; font-style: italic; animation: topic-chat-pulse 1.2s ease-in-out infinite; }

@keyframes topic-chat-pulse { 0%, 100% { opacity: 0.4; }
  50% { opacity: 1; } }

.topic-chat-bubble__text { margin: 0; }

.topic-chat-bubble__translation { margin: 12px 0 0; color: #a4a4a4; font-size: 18px; }

.topic-chat-bubble__translation[hidden] { display: none; }

.topic-chat-bubble__actions { display: flex; align-items: center; gap: 5px; margin-top: 12px; }

.topic-chat-sound { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }

.topic-chat-sound img { width: 24px; height: 24px; }

.topic-chat-translate { height: 24px; padding: 0 10px; border: 1px solid #d3d3d3; border-radius: 100px; background: #ffffff; color: #868686; font-size: 12px; font-weight: 500; cursor: pointer; }

.topic-chat-footer { flex: 0 0 auto; width: 100%; max-width: 704px; margin: 24px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.topic-chat-input { width: 100%; max-width: 704px; height: 48px; margin: 0; padding: 0 16px 0 20px; display: flex; align-items: center; gap: 12px; border: 1.5px solid #d5d5d5; border-radius: 100px; background: #ffffff; box-shadow: 0 4px 14px rgba(164, 174, 210, 0.28); }

.topic-chat-input input { flex: 1; height: 100%; border: 0; background: transparent; color: #333333; font-size: 18px; }

.topic-chat-input input::placeholder { color: #acacac; }

.topic-chat-input input:focus { outline: none; }

.topic-chat-send { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.topic-chat-send img { width: 20px; height: 20px; }

.topic-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.topic-chat-complete { width: 100%; max-width: 100%; height: 56px; margin: 0; box-shadow: 0 4px 14px rgba(95, 130, 233, 0.32); }

.topic-chat-complete.intro-next[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }

.words-heading { width: 100%; max-width: 684px; margin: 40px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.words-heading__title { margin: 0; color: #666666; font-size: 24px; font-weight: 500; }

.words-listen-all { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #868686; cursor: pointer; font-size: 16px; font-weight: 500; white-space: nowrap; }

.words-listen-all__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #f1f4fd; color: #5f82e9; }

.words-listen-all__icon svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

.words-grid { width: 100%; max-width: 684px; margin: 28px auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; text-align: left; }

.word-card { padding: 12px 16px; border: 1px solid #dee4fb; border-radius: 8px; background: #ffffff; transition: border-color 160ms ease; }

.word-card__text { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.word-card__text strong { color: #000000; font-size: 16px; font-weight: 700; line-height: 20px; }

.word-card__text span { color: #636363; font-size: 14px; font-weight: 500; line-height: 24px; }

.word-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.word-card__meaning { color: #868686; font-size: 12px; font-weight: 500; line-height: 14px; }

.word-card__sound { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #c0c3d8; border-radius: 50%; background: #ffffff; color: #5f82e9; cursor: pointer; }

.word-card__sound svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }

.word-card.is-playing { border-color: #5f82e9; }

.word-card.is-playing .word-card__sound { border-color: #5f82e9; background: #5f82e9; color: #ffffff; }

.words-empty { grid-column: 1 / -1; padding: 32px 0; color: #868686; font-size: 16px; text-align: center; }

.quiz-question { width: 100%; max-width: 700px; margin: 40px 0 0; color: #000000; font-size: 30px; font-weight: 500; line-height: 1.4; text-align: center; }

.quiz-instruction { display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; color: #5f82e9; font-size: 28px; font-weight: 600; }

.quiz-instruction svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.quiz-instruction.is-correct { color: #008720; }

.quiz-instruction.is-wrong { color: #ff4141; }

.quiz-sound { width: 52px; height: 52px; margin-top: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #5f82e9; color: #ffffff; cursor: pointer; }

.quiz-sound svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }

.quiz-options { width: 100%; max-width: 520px; margin-top: 48px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }

.quiz-option { min-width: 242px; height: 61px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; background: #f9f9f9; color: #aeaeae; font-size: 24px; font-weight: 500; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }

.quiz-option:hover { border-color: #dee4fb; color: #666666; }

.quiz-option.is-correct { border-color: #008720; background: #eafbf0; color: #008720; }

.quiz-option.is-wrong { border-color: #ff4141; background: #fff0f0; color: #ff4141; }

.intro-next--disabled { background: #e9e9e9; color: #919191; cursor: default; }

.speak-sentence { margin-top: 40px; }

.speak-sentence__meaning { margin: 0; color: #888888; font-size: 24px; font-weight: 500; line-height: 1.5; }

.speak-sentence__text { margin: 12px 0 0; color: #000000; font-size: 24px; font-weight: 700; line-height: 1.5; }

.speak-panel .record-controls, .speed-panel .record-controls { position: static; left: auto; bottom: auto; margin-top: 56px; transform: none; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.speak-panel .record-controls p, .speed-panel .record-controls p { grid-column: auto; margin: 0; font-size: 26px; }

.speak-panel .record-controls[hidden], .speed-panel .record-controls[hidden] { display: none; }

.speak-record__button { width: 117px; height: 117px; display: grid; place-items: center; border: 1px solid #dbe3fb; border-radius: 50%; background: #f4f7ff; color: #5f82e9; transition: background-color 160ms ease, color 160ms ease; }

.speak-record__button svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.speak-record__button[data-recording] { background: #5f82e9; color: #ffffff; }

.speak-feedback { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 20px; font-weight: 500; }

.speak-feedback[hidden] { display: none; }

.speak-feedback__icon { display: inline-flex; }

.speak-feedback__icon svg { display: none; width: 24px; height: 24px; }

.speak-feedback.is-correct { color: #008720; }

.speak-feedback.is-correct .speak-feedback__icon--correct { display: block; }

.speak-feedback.is-wrong { color: #ff4141; }

.speak-feedback.is-wrong .speak-feedback__icon--wrong { display: block; }

.speak-result-box { width: 100%; max-width: 530px; min-height: 73px; margin-top: 28px; padding: 16px 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #5f82e9; border-radius: 10px; background: #ffffff; color: #000000; font-size: 22px; text-align: center; }

.speak-result-box p { margin: 0; }

.speak-result-box[hidden] { display: none; }

.speak-result-actions { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 24px; }

.speak-result-actions[hidden] { display: none; }

.speak-result-action { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #868686; font-size: 16px; font-weight: 500; cursor: pointer; }

.speak-result-action:disabled { opacity: 0.5; cursor: default; }

.speak-result-action__icon { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #c7cfe6; border-radius: 6px; color: #5f82e9; }

.speak-result-action__icon svg { width: 11px; height: 11px; }

.speed-progress { color: #5f82e9; font-weight: 700; }

.speed-timer { margin: 24px 0 0; color: #bebebe; font-size: 28px; font-weight: 700; }

.speed-word { margin: 56px 0 0; color: #000000; font-size: 34px; font-weight: 700; }

.speed-summary { margin-top: 8px; text-align: center; }

.speed-summary__title { margin: 0; color: #000000; font-size: 30px; font-weight: 700; }

.speed-summary__time { margin: 12px 0 0; color: #5f82e9; font-size: 28px; font-weight: 500; }

.speed-columns { width: 100%; max-width: 649px; margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-height: 460px; overflow-y: auto; padding-right: 4px; }

.speed-column__header { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.speed-column__label { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 500; }

.speed-column__label svg { width: 20px; height: 20px; }

.speed-column--correct .speed-column__label { color: #008720; }

.speed-column--wrong .speed-column__label { color: #ff4141; }

.speed-column__rate { font-size: 14px; font-weight: 500; white-space: nowrap; }

.speed-column--correct .speed-column__rate { color: #5f82e9; }

.speed-column--wrong .speed-column__rate { color: #ff4141; }

.speed-word-list { display: flex; flex-direction: column; gap: 14px; }

.speed-word-card { min-height: 62px; padding: 12px 20px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #c7cfe6; border-radius: 10px; background: #ffffff; color: #000000; font-size: 20px; font-weight: 600; text-align: center; }

.speed-empty { padding: 12px 0; color: #868686; font-size: 14px; text-align: center; }

@media (max-width: 1500px) { .viewport-center { padding: 7vh 5vw; } .home-panel, .auth-panel { min-height: 72vh; border-radius: 36px; } .home-panel { grid-template-columns: 380px 520px; gap: 70px; padding: 56px 64px; } .bubble { width: 190px; height: 72px; } .bubble span { top: 9px; font-size: 28px; } .mascot { width: 146px; height: 138px; } .welcome-text { margin: 28px 0 7px; font-size: 28px; } .home-panel h1 { font-size: 32px; } .home-login-button { width: 220px; height: 52px; margin-top: 54px; font-size: 21px; } .brand-wordmark { width: 138px; height: 22px; margin-top: 54px; } .feature-list { gap: 28px; } .feature-card { min-height: 120px; padding: 24px 44px; border-radius: 10px; } .feature-card__bar { width: 13px; left: -4px; } .feature-card__title { font-size: 27px; } .feature-card__desc { margin-top: 9px; font-size: 20px; } .auth-form { max-width: 360px; } .auth-form h1 { margin-bottom: 36px; font-size: 29px; line-height: 36px; } .auth-fields { gap: 12px; } .field { gap: 7px; } .field span { font-size: 12px; line-height: 18px; } .field input { height: 38px; padding: 9px 10px; font-size: 13px; line-height: 18px; } .auth-submit { height: 42px; margin-top: 28px; font-size: 13px; } .auth-link { padding: 11px; font-size: 13px; line-height: 18px; } .required-note { margin: -11px 0 12px; font-size: 12px; line-height: 18px; } .consent { margin-top: 16px; gap: 7px; font-size: 12px; line-height: 18px; } .consent__icon { width: 14px; height: 14px; } .study-page { padding: 72px 11vw 80px; } .study-heading { max-width: 900px; margin-bottom: 30px; } .study-heading h1 { margin-bottom: 42px; font-size: 32px; line-height: 42px; } .level-tabs__item { min-width: 92px; height: 35px; font-size: 16px; } .lesson-grid { max-width: 900px; gap: 26px; } .lesson-card { min-height: 278px; border-radius: 10px; } .lesson-card__thumb { flex-basis: 178px; } .lesson-card__body { min-height: 92px; border-bottom-width: 8px; padding: 20px 26px 16px; gap: 8px; } .lesson-card__body strong { font-size: 18px; } .lesson-card__body span { font-size: 14px; line-height: 20px; } .conversation-page, .pronunciation-page { padding-bottom: 94px; } .conversation-page { padding-top: 95px; } .feature-heading h1 { font-size: 30px; } .feature-heading p { margin-top: 18px; font-size: 19px; } .mode-list { max-width: 500px; margin-top: 64px; gap: 15px; } .mode-card { grid-template-columns: 82px 1fr; gap: 24px; min-height: 86px; padding: 18px 28px; border-radius: 10px; } .mode-card img { width: 70px; height: 56px; } .mode-card strong { font-size: 16px; } .mode-card small { margin-top: 8px; font-size: 12px; line-height: 18px; } .bottom-nav { bottom: 42px; max-width: 306px; height: 38px; } .bottom-nav svg { width: 18px; height: 18px; } .pronunciation-page { padding-top: 47px; } .pronunciation-panel { max-width: 570px; min-height: 513px; padding: 72px 70px 60px; border-radius: 28px; } .pronunciation-tabs { max-width: 315px; margin-bottom: 17px; } .pronunciation-tabs button { height: 36px; font-size: 12px; } .pronunciation-grid { max-width: 315px; gap: 13px; } .pron-card { height: 54px; padding: 13px 8px 7px; border-radius: 4px; } .pron-card strong { font-size: 8px; } .pron-card small { margin-top: 6px; font-size: 7px; } .pron-card em { margin-top: 6px; padding: 2px 6px; font-size: 6px; } .pron-card__category { padding: 1px 4px; border-bottom-right-radius: 4px; font-size: 6px; line-height: 10px; } }

@media (max-width: 1180px) { .home-panel { grid-template-columns: 1fr; gap: 48px; } .feature-list { width: 100%; max-width: 741px; margin: 0 auto; } .lesson-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }

@media (max-width: 760px) { .viewport-center { padding: 24px 16px; } .home-panel, .auth-panel, .pronunciation-panel { border-radius: 28px; } .home-panel { padding: 44px 20px; } .bubble { width: 190px; height: 72px; } .bubble span { top: 9px; font-size: 28px; } .mascot { width: 146px; height: 138px; } .welcome-text { margin-top: 28px; font-size: 26px; } .home-panel h1 { white-space: normal; font-size: 30px; } .home-login-button { width: 220px; height: 54px; margin-top: 48px; font-size: 21px; } .feature-list { gap: 22px; } .feature-card { min-height: 142px; padding: 28px 28px 26px 42px; } .feature-card__title { font-size: 27px; } .feature-card__desc { font-size: 19px; } .auth-form h1 { margin-bottom: 44px; font-size: 34px; } .study-page { padding: 72px 20px 70px; } .study-heading h1, .feature-heading h1 { font-size: 34px; line-height: 1.3; } .study-heading h1 { margin-bottom: 40px; } .level-tabs { justify-content: center; flex-wrap: wrap; } .level-tabs__item { min-width: 112px; height: 45px; font-size: 18px; } .lesson-grid { grid-template-columns: 1fr; gap: 28px; } .lesson-card { min-height: 360px; } .lesson-card__thumb { flex-basis: 220px; } .lesson-card__body { padding: 24px 28px; } .page-learning { display: block; min-height: 100%; } .learning-page { width: 100%; max-width: none; height: auto; max-height: none; min-height: 100vh; margin: 0 auto; display: block; padding: 32px 16px 112px; } .coach-panel { min-height: 0; } .coach-messages { width: 100%; margin: 0 0 20px; padding-left: 32px; } .coach-avatar { left: 0; } .coach-bubble { width: 100%; max-width: 320px; margin-left: 0; font-size: 13px; line-height: 20px; } .page-learning .bottom-nav { left: 50%; bottom: 24px; width: calc(100vw - 48px); height: 58px; transform: translateX(-50%); } .page-learning .bottom-nav svg { width: 22px; height: 22px; } .learning-card { min-height: 610px; padding: 34px 18px 86px; border-radius: 22px; } .learning-card--learn { min-height: 680px; padding: 40px 20px 96px; border-radius: 28px; } .learning-card--learn .lesson-badge { width: 148px; height: 34px; margin-bottom: 28px; font-size: 15px; } .learning-card--learn .learning-instruction { font-size: 18px; line-height: 28px; } .learning-card--learn .image-prompt { width: 100%; max-width: 320px; height: 176px; margin: 24px auto 20px; } .learning-card--learn .korean-prompt { margin-bottom: 28px; font-size: 20px; line-height: 30px; } .learning-card--learn .answer-form { max-width: 100%; height: 52px; } .learning-card--learn .answer-form input { font-size: 16px; } .learning-card--learn .answer-form button { width: 40px; height: 40px; } .learning-card--learn .feedback { font-size: 14px; } .learning-card--learn .answer-hint small { font-size: 14px; } .learning-card--learn .retry-link { margin-top: 32px; font-size: 14px; } .learning-card--learn .next-button { bottom: 84px; width: 100%; max-width: 320px; height: 50px; font-size: 16px; } .learning-card--learn .lesson-empty { margin-top: 48px; font-size: 16px; } .lesson-badge { margin-bottom: 26px; } .help-button { top: 28px; right: 20px; } .sentence-progress { top: 77px; } .learning-card--apply .learning-instruction { margin-top: 38px; } .learning-instruction { font-size: 16px; line-height: 26px; } .image-prompt, .answer-form, .next-button, .mode-switch { width: 100%; max-width: 280px; } .korean-prompt, .apply-korean { font-size: 18px; line-height: 30px; } .apply-question { font-size: 15px; } .choice-slots { margin-bottom: 36px; } .record-controls, .next-button, .mode-switch { bottom: 84px; } .word-line span, .choice-bank a { font-size: 14px; } .learning-card--master { min-height: 650px; } .learning-card--practice { min-height: 740px; } .practice-heading { margin-bottom: 16px; font-size: 15px; line-height: 24px; } .practice-dialogue { width: 100%; max-width: 340px; height: 360px; } .practice-turn--coach { left: 14px; top: 18px; gap: 6px; } .practice-turn--user { right: 12px; top: 146px; } .practice-turn img { width: 26px; height: 26px; } .practice-speaker { font-size: 11px; } .practice-bubble { width: 238px; min-height: 68px; gap: 8px; padding: 14px 15px; } .practice-turn--user .practice-bubble { width: 226px; } .practice-bubble small { font-size: 11px; line-height: 15px; } .practice-bubble strong { font-size: 14px; line-height: 18px; } .slot-line { gap: 7px; } .slot-line span { min-width: 36px; height: 28px; font-size: 14px; } .slot-line span.is-filled { padding: 0 9px; } .practice-mode-switch, .practice-grade-button { width: 100%; max-width: 280px; } .practice-choice-bank { max-width: 280px; margin: 18px auto 0; } .master-question { font-size: 16px; line-height: 28px; } .master-prompt { font-size: 18px; line-height: 28px; } .master-retry { margin-top: 58px; } .conversation-page, .pronunciation-page { padding: 72px 16px 132px; } .feature-heading p { margin-top: 18px; font-size: 24px; } .mode-list { margin-top: 56px; } .mode-card { grid-template-columns: 84px 1fr; gap: 22px; min-height: 140px; padding: 22px; } .mode-card img { width: 78px; height: 70px; } .mode-card strong { font-size: 21px; } .mode-card small { margin-top: 9px; font-size: 16px; line-height: 1.45; } .pronunciation-panel { min-height: auto; padding: 48px 18px; } .pronunciation-grid { grid-template-columns: 1fr; } .intro-badge { height: 38px; padding: 0 20px; font-size: 16px; } .intro-key { margin-top: 16px; font-size: 12px; } .intro-media { height: 180px; margin-top: 32px; } .intro-tip { margin-top: 28px; padding: 8px 16px; font-size: 15px; } .intro-notes { margin-top: 16px; font-size: 15px; line-height: 28px; } .intro-next { height: 52px; margin-top: 36px; font-size: 16px; } .pic-talk-title { margin-top: 20px; font-size: 22px; line-height: 32px; } .pic-talk-change { height: 32px; margin-top: 16px; padding: 2px 16px; font-size: 13px; } .pic-talk-change img { width: 15px; height: 15px; } .pic-talk-illustration { width: 160px; margin-top: 28px; } .pic-talk-desc { margin-top: 20px; font-size: 16px; line-height: 26px; } .pic-talk-modes { margin-top: 28px; gap: 14px; } .pic-talk-mode { gap: 12px; padding: 16px 18px; } .pic-talk-mode__label { height: 26px; font-size: 13px; } .pic-talk-mode__label img { width: 14px; height: 14px; } .pic-talk-mode__desc { font-size: 14px; } .topic-talk-illustration { width: 140px; margin-top: 32px; } .topic-talk-desc { margin-top: 20px; font-size: 16px; } .topic-display { margin-top: 20px; padding: 12px 16px; gap: 6px; } .topic-display__topic { font-size: 17px; } .topic-display__desc { font-size: 13px; } .pic-talk-topic-photo { margin-top: 24px; height: 180px; } .pic-talk-topic-photo__refresh { top: 8px; right: 8px; width: 32px; height: 32px; } .pic-talk-topic-prompt { margin-top: 20px; gap: 6px; font-size: 16px; } .pic-talk-topic-prompt img { width: 16px; height: 16px; } .pic-talk-topic-input { margin-top: 20px; min-height: 50px; padding: 10px 12px 10px 16px; } .pic-talk-topic-input input { font-size: 15px; } .pic-talk-topic-mic { width: 32px; height: 32px; } .topic-chat-panel { height: calc(100vh - 172px); min-height: 420px; max-height: none; } .topic-chat-banner { margin-top: 20px; padding: 14px 16px; } .topic-chat-banner svg { width: 20px; height: 20px; } .topic-chat-banner p { font-size: 15px; } .topic-chat-messages { margin-top: 16px; } .topic-chat-bubble { max-width: 92%; padding: 12px 16px; font-size: 15px; } .topic-chat-bubble--user { padding: 10px 16px; font-size: 14px; } .pic-talk-chat-photo { height: 130px; margin-top: 16px; border-radius: 14px; } .pic-talk-chat-photo__refresh { top: 8px; right: 8px; width: 26px; height: 26px; } .pic-talk-speak-divider { max-width: 200px; } .topic-chat-bubble__translation { margin-top: 8px; font-size: 14px; } .topic-chat-footer { margin-top: 16px; gap: 10px; } .topic-chat-input { height: 44px; padding: 0 12px 0 16px; } .topic-chat-input input { font-size: 15px; } .topic-chat-complete { height: 48px; font-size: 16px; } .words-heading { margin-top: 24px; } .words-heading__title { font-size: 15px; } .words-listen-all { font-size: 11px; } .words-listen-all__icon { width: 22px; height: 22px; } .words-listen-all__icon svg { width: 11px; height: 11px; } .words-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; } .word-card__text strong { font-size: 13px; } .word-card__text span { font-size: 11px; } .quiz-question { margin-top: 24px; font-size: 18px; } .quiz-instruction { margin-top: 22px; gap: 8px; font-size: 15px; } .quiz-instruction svg { width: 20px; height: 20px; } .quiz-sound { width: 40px; height: 40px; margin-top: 16px; } .quiz-sound svg { width: 17px; height: 17px; } .quiz-options { margin-top: 28px; gap: 12px; } .quiz-option { min-width: 0; width: 100%; max-width: 160px; height: 44px; padding: 0 16px; font-size: 15px; } .speak-sentence__meaning, .speak-sentence__text { font-size: 15px; } .speak-panel .record-controls, .speed-panel .record-controls { margin-top: 32px; gap: 10px; } .speak-panel .record-controls p, .speed-panel .record-controls p { font-size: 16px; } .speak-record__button { width: 72px; height: 72px; } .speak-record__button svg { width: 26px; height: 26px; } .speak-feedback { margin-top: 12px; font-size: 14px; } .speak-feedback .speak-feedback__icon svg { width: 18px; height: 18px; } .speak-result-box { margin-top: 18px; padding: 12px 20px; font-size: 15px; } .speak-result-actions { margin-top: 12px; gap: 16px; } .speak-result-action { font-size: 13px; } .speed-timer { margin-top: 16px; font-size: 18px; } .speed-word { margin-top: 32px; font-size: 22px; } .speed-summary__title { font-size: 18px; } .speed-summary__time { margin-top: 8px; font-size: 15px; } .speed-columns { margin-top: 20px; gap: 12px; max-height: 320px; } .speed-column__label { font-size: 13px; } .speed-column__label svg { width: 15px; height: 15px; } .speed-column__rate { font-size: 11px; } .speed-word-card { min-height: 44px; padding: 8px 10px; font-size: 14px; } .bottom-nav { bottom: 24px; height: 58px; } }

/*# sourceMappingURL=asutalk.css.map */