:root { /* LingoFlow master brand tokens — see lingoflow-brand-guidelines.html */ --ink: #10201d; --ink-2: #60726e; --teal-950: #0b3734; --teal-900: #0b3734; --teal-800: #15514d; --teal-700: #176c5c; --mint: #59ceaf; --mint-bright: #72dfc2; --mint-dark: #2bae91; --mint-soft: #dff4ec; --cream: #fff9ef; --paper: #fffefb; --line: #cadbd4; --coral: #e76e5a; --coral-soft: #fff0eb; --gold: #d6a232; --success: #08775f; --warning: #d6a232; --error: #c85543; --shadow: 0 18px 50px rgba(11, 55, 52, .11); --radius: 24px; --radius-card: 16px; --motion-standard: 220ms cubic-bezier(.2,.8,.2,1); } * { box-sizing: border-box; } html { font-family: Inter, Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); } body { margin: 0; min-width: 320px; min-height: 100vh; } button, textarea, input { font: inherit; } button { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } .svg-sprite { position: fixed; width: 0; height: 0; overflow: hidden; } svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .app-shell { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; } .sidebar { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 28px 18px 18px; color: #ecf8f4; background: var(--teal-950); overflow-y: auto; z-index: 20; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 32px; color: white; text-decoration: none; font-size: 21px; font-weight: 760; letter-spacing: -.7px; } .brand > span:last-child span { color: var(--mint); } .brand-symbol { display: block; width: 34px; height: 34px; flex: none; } .main-nav { display: grid; gap: 6px; } .nav-item { position: relative; width: 100%; border: 0; background: transparent; color: #a8c1bd; display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 11px; text-align: left; font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s; } .nav-item:hover { color: white; background: rgba(255,255,255,.05); } .nav-item.active { color: white; background: rgba(100,210,182,.14); } .nav-item.active:before { content: ""; position: absolute; left: -18px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 5px 5px 0; background: var(--mint); } .nav-badge { margin-left: auto; font-size: 10px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,.1); } .side-section { margin-top: 30px; } .side-label { margin: 0 13px 11px; color: #668884; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; } .quick-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: #9db7b2; background: transparent; text-align: left; cursor: pointer; } .quick-item:hover, .quick-item.selected { color: #effbf7; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.05); } .quick-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; color: white; font-weight: 800; font-size: 11px; }.quick-icon.coral { background: #b95348; }.quick-icon.mint { background: #337a70; }.quick-icon.gold { background: #96743a; } .quick-item > span:nth-child(2) { display: grid; gap: 3px; }.quick-item b { font-size: 12px; font-weight: 650; }.quick-item small { color: #668884; font-size: 10px; } .side-spacer { flex: 1; min-height: 20px; } .level-card { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid rgba(100,210,182,.15); border-radius: 13px; padding: 11px; color: white; background: rgba(100,210,182,.07); text-align: left; cursor: pointer; } .level-ring { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--mint); border-radius: 50%; font-size: 12px; font-weight: 800; } .level-card > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }.level-card b { font-size: 11px; }.level-card small { color: #789b96; font-size: 9px; }.level-card svg { width: 15px; color: #6c928c; } .profile-row { margin-top: 13px; display: flex; align-items: center; gap: 10px; border: 0; border-top: 1px solid rgba(255,255,255,.07); padding: 16px 5px 2px; color: #eaf6f3; background: transparent; text-align: left; cursor: pointer; } .profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--teal-950); background: #d8a960; font-weight: 800; font-size: 11px; }.profile-row span:nth-child(2) { flex: 1; display: grid; gap: 2px; }.profile-row b { font-size: 11px; }.profile-row small { color: #72938f; font-size: 9px; }.profile-row svg { width: 16px; color: #6c928c; } .main-content { min-width: 0; display: flex; flex-direction: column; } .topbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 28px; background: var(--paper); border-bottom: 1px solid var(--line); } .eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--teal-700); font-size: 9px; font-weight: 850; letter-spacing: 1.7px; }.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(100,210,182,.16); }.coral-text { color: #bc5e4f; }.coral-text span { background: var(--coral); box-shadow: 0 0 0 3px rgba(239,115,95,.13); } .session-title-row { display: flex; align-items: center; gap: 11px; }.session-title-row h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 2vw, 27px); font-weight: 600; letter-spacing: -.4px; }.edit-goal { border: 0; border-bottom: 1px solid #9bb1ad; padding: 2px 0; color: #6b817e; background: transparent; font-size: 10px; cursor: pointer; } .mobile-menu { display: none; } .top-actions { display: flex; align-items: center; gap: 9px; }.language-select, .ghost-button { height: 40px; border: 1px solid #d7e2dc; border-radius: 10px; padding: 0 13px; display: flex; align-items: center; gap: 8px; background: #fbfcf8; cursor: pointer; font-size: 11px; font-weight: 650; }.language-select small { color: #78908c; }.ghost-button { color: var(--teal-700); }.ghost-button svg { width: 16px; } .backend-status { height: 30px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 20px; padding: 0 10px; color: #54706b; background: #eef3ef; font-size: 8px; cursor: pointer; }.backend-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }.backend-status.live { color: #266b5e; background: var(--mint-soft); }.backend-status.live span { background: #34ad90; box-shadow: 0 0 0 3px rgba(52,173,144,.13); }.backend-status.error span { background: var(--coral); } .workspace { flex: 1; display: grid; grid-template-columns: minmax(520px, 1.55fr) minmax(340px, .9fr); min-height: 0; } .conversation-panel { position: relative; padding: 22px 28px 20px; min-width: 0; background: #eff0eb; } .call-stage { position: relative; min-height: 390px; height: calc(100vh - 366px); max-height: 550px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius); background: radial-gradient(circle at 50% 28%, #26645e 0, #154943 36%, #0c3533 78%); box-shadow: var(--shadow); isolation: isolate; } .session-start { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; overflow-y: auto; padding: 26px 30px 34px; color: white; text-align: center; background: rgba(7, 38, 37, .82); backdrop-filter: blur(10px); } .session-start[hidden] { display: none; } .session-start .start-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 50%; color: var(--teal-950); background: var(--mint); box-shadow: 0 14px 34px rgba(0,0,0,.25); } .session-start .start-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; } .session-start b { font-size: 20px; } .session-start p { max-width: 460px; margin: 0 0 8px; color: #c4dcda; font-size: 12px; line-height: 1.7; } .session-start .primary-button { width: auto; min-width: 180px; } .start-planner { width: min(680px, 96%); padding: 15px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: white; background: rgba(255,255,255,.08); box-shadow: 0 14px 34px rgba(0,0,0,.16); text-align: left; } .start-planner-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .start-planner-head small { color: #7ed9c6; font-size: 9px; font-weight: 850; letter-spacing: .12em; } .start-planner-head b { font-size: 14px; } .start-language-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; } .start-language-tabs button { min-height: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: #c6ddd8; background: rgba(0,0,0,.16); font-size: 11px; font-weight: 750; cursor: pointer; } .start-language-tabs button.active { border-color: #75d7c0; color: #092d2b; background: #75d7c0; } .start-planner-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(120px, .6fr); gap: 8px; } .start-planner-grid label { display: grid; gap: 4px; } .start-planner-grid label > span { color: #a9c8c1; font-size: 9px; font-weight: 800; } .start-planner-grid select { width: 100%; min-height: 39px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; padding: 0 30px 0 10px; color: white; background: var(--teal-950); font-size: 11px; font-weight: 700; outline: none; } .start-planner-grid select:focus { border-color: #75d7c0; box-shadow: 0 0 0 3px rgba(117,215,192,.13); } .start-lesson-field { grid-column: 1 / -1; } .start-planner.attention { animation: planner-attention .7s ease-out; } @keyframes planner-attention { 50% { border-color: #75d7c0; box-shadow: 0 0 0 5px rgba(117,215,192,.13); } } .call-stage:after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.1) .8px, transparent .8px); background-size: 12px 12px; opacity: .08; z-index: -1; } .exam-stimulus { position: absolute; inset: 54px 24px 118px; z-index: 2; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: #082c2b; box-shadow: 0 16px 36px rgba(0,0,0,.28); } .exam-stimulus[hidden] { display: none; } .exam-stimulus > button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #082c2b; cursor: zoom-in; } .exam-stimulus img { display: block; width: 100%; height: 100%; object-fit: contain; } .exam-stimulus figcaption { position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; color: white; background: rgba(3,27,26,.78); backdrop-filter: blur(7px); pointer-events: none; } .exam-stimulus figcaption b { font-size: 11px; }.exam-stimulus figcaption span { color: #b9d4ce; font-size: 9px; } .exam-material-document { position: absolute; inset: 0; overflow-y: auto; padding: 34px 36px 72px; color: #173d39; background: #fbfaf4; text-align: left; } .exam-material-document[hidden] { display: none; } .exam-material-document > small { display: block; margin-bottom: 9px; color: #b35d4c; font-size: 10px; font-weight: 800; letter-spacing: .08em; } .exam-material-document h2 { margin: 0 0 18px; color: #0d3431; font: 700 clamp(21px, 2.4vw, 31px)/1.2 Georgia, serif; } .exam-material-document p { max-width: 900px; margin: 0; font-size: clamp(17px, 1.75vw, 23px); line-height: 1.62; } .exam-material-document pre { max-width: 900px; margin: 0; overflow-x: auto; padding: 18px; border: 1px solid #c9ddd7; border-radius: 12px; color: #143d38; background: white; font: 700 clamp(13px, 1.35vw, 17px)/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; } .exam-material-document ul, .exam-material-document ol { margin: 18px 0 0; padding-left: 24px; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.55; } .exam-material-topic { font-weight: 700; } .exam-material-summary { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; padding: 14px 16px; border-radius: 11px; color: #1e5c55; background: #e7f4ef; } .exam-material-summary span { font-size: 13px; line-height: 1.45; } .exam-data-chart { display: grid; gap: 12px; max-width: 900px; margin-top: 20px; padding: 18px; border: 1px solid #c9ddd7; border-radius: 13px; background: white; } .exam-data-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) auto; align-items: center; gap: 12px; font-size: clamp(13px, 1.25vw, 17px); } .exam-data-row span { min-width: 0; font-weight: 700; } .exam-data-row b { min-width: 54px; color: #176c5c; text-align: right; } .exam-data-row progress { width: 100%; height: 13px; overflow: hidden; border: 0; border-radius: 999px; background: #e3efeb; } .exam-data-row progress::-webkit-progress-bar { border-radius: 999px; background: #e3efeb; } .exam-data-row progress::-webkit-progress-value { border-radius: 999px; background: #5bcbb1; } .exam-data-row progress::-moz-progress-bar { border-radius: 999px; background: #5bcbb1; } .exam-source-task { max-width: 900px; margin: 0 0 22px; padding: 14px 16px; border-left: 4px solid #e67563; border-radius: 10px; background: #fff1ec; } .exam-source-task > b { display: block; margin-bottom: 5px; color: #a94f40; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .exam-source-task > p { font-size: 15px; line-height: 1.5; } .exam-source-article { max-width: 900px; padding: 26px clamp(18px, 3vw, 38px) 34px; border: 1px solid #d8e2dc; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(19,61,56,.07); } .exam-source-article header { position: relative; margin-bottom: 23px; padding: 0 90px 17px 0; border-bottom: 1px solid #dce8e2; } .exam-source-article header small { display: block; margin-bottom: 7px; color: #b45c4b; font-size: 11px; font-weight: 800; letter-spacing: .06em; } .exam-source-article h3 { margin: 0; color: #0e3733; font: 700 clamp(24px, 2.5vw, 34px)/1.18 Georgia, serif; } .exam-source-article header span { position: absolute; top: 0; right: 0; padding: 5px 8px; border-radius: 12px; color: #4c716a; background: #e7f3ef; font-size: 10px; font-weight: 800; } .exam-material-document .exam-source-article > p { margin: 0 0 1.15em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.72; text-wrap: pretty; } .exam-material-document .exam-source-article > p:last-child { margin-bottom: 0; } .exam-stimulus.document-task > button { display: none; } .picture-task .coach-portrait, .picture-task .coach-name { display: none; } .exam-stimulus.expanded { position: fixed; inset: 14px; z-index: 120; border-radius: 18px; background: rgba(2,20,19,.97); } .exam-stimulus.expanded > button { cursor: zoom-out; }.exam-stimulus.expanded img { object-fit: contain; } .ambient { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(45px); opacity: .19; z-index: -1; }.ambient-a { left: -60px; top: -40px; background: #7cd3bb; }.ambient-b { right: -80px; bottom: -90px; background: #e8a060; } .stage-top { position: absolute; top: 17px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; z-index: 5; } .live-pill, .caption-toggle { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 100px; color: #def0eb; background: rgba(5,30,29,.4); backdrop-filter: blur(10px); } .live-pill { gap: 7px; padding: 7px 10px; font-size: 9px; }.live-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(100,210,182,.15); animation: live 1.7s infinite; }.live-pill b { font-weight: 650; }.live-pill em { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.15); font-style: normal; color: #a7c0bb; font-variant-numeric: tabular-nums; } .exam-clock { position: absolute; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; min-width: 108px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; color: white; background: rgba(3,27,26,.82); box-shadow: 0 8px 24px rgba(0,0,0,.18); backdrop-filter: blur(12px); } .exam-clock[hidden] { display: none; }.exam-clock small { color: var(--mint); font-size: 8px; font-weight: 800; letter-spacing: .5px; }.exam-clock b { font: 750 17px/1 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }.exam-clock span { grid-column: 1 / -1; margin-top: 2px; overflow: hidden; color: #b7cdc8; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.exam-clock.warning { border-color: rgba(244,183,93,.78); }.exam-clock.warning b { color: #ffd18d; }.exam-clock.danger { border-color: rgba(242,119,101,.9); animation: clock-pulse .8s ease-in-out infinite alternate; }.exam-clock.danger b { color: #ff9c8d; } .exam-clock button { grid-column: 1 / -1; min-height: 26px; margin-top: 6px; border: 1px solid rgba(126,221,202,.46); border-radius: 7px; padding: 0 9px; color: #d9fff5; background: rgba(100,210,182,.14); font-size: 9px; font-weight: 800; cursor: pointer; }.exam-clock button:hover { border-color: var(--mint); background: rgba(100,210,182,.24); }.exam-clock button[hidden] { display: none; } .conversation-flow { position: absolute; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; min-width: 108px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: white; background: rgba(3,27,26,.76); backdrop-filter: blur(12px); }.conversation-flow[hidden] { display: none; }.conversation-flow small { color: var(--mint); font-size: 8px; font-weight: 800; }.conversation-flow b { font: 750 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }.conversation-flow span { grid-column: 1/-1; margin-top: 2px; color: #b7cdc8; font-size: 7px; } @keyframes clock-pulse { to { box-shadow: 0 0 0 4px rgba(242,119,101,.13); } } .caption-toggle { gap: 6px; border: 0; padding: 7px 10px; font-size: 9px; cursor: pointer; }.caption-toggle.active { color: white; background: rgba(100,210,182,.18); }.caption-toggle span { color: #a9c5bf; } .coach-portrait { position: relative; width: clamp(132px, 12vw, 174px); height: clamp(132px, 12vw, 174px); flex: none; margin-top: 5px; border: 0; border-radius: 50%; padding: 5px; color: inherit; background: linear-gradient(135deg, var(--mint), #d2aa62, var(--mint)); box-shadow: 0 18px 55px rgba(0,0,0,.3); cursor: pointer; } .coach-portrait:focus-visible { outline: 3px solid white; outline-offset: 5px; }.portrait-edit { position: absolute; right: 3px; bottom: 8px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--teal-900); border-radius: 50%; color: white; background: var(--teal-700); font: 800 16px/1 Arial; box-shadow: 0 4px 12px rgba(0,0,0,.24); } .character-face, .mini-character-face, .character-option-face { display: block; background-image: url('assets/coach-characters-v1.png'); background-repeat: no-repeat; background-size: 300% 300%; background-position: var(--face-x, 0%) var(--face-y, 0%); } [data-character-sprite="en"] { background-image: url('assets/coach-characters-en-v1.png'); background-size: 500% 200%; } [data-character-sprite="es"] { background-image: url('assets/coach-characters-es-v1.png'); background-size: 500% 200%; } [data-character-sprite="zh"] { background-image: url('assets/coach-characters-zh-v1.png'); background-size: 500% 200%; } [data-character-sprite="ko"] { background-image: url('assets/coach-characters-ko-v1.png'); background-size: 300% 100%; } [data-character-index="0"] { --face-x: 0%; --face-y: 0%; } [data-character-index="1"] { --face-x: 50%; --face-y: 0%; } [data-character-index="2"] { --face-x: 100%; --face-y: 0%; } [data-character-index="3"] { --face-x: 0%; --face-y: 50%; } [data-character-index="4"] { --face-x: 50%; --face-y: 50%; } [data-character-index="5"] { --face-x: 100%; --face-y: 50%; } [data-character-index="6"] { --face-x: 0%; --face-y: 100%; } [data-character-index="7"] { --face-x: 50%; --face-y: 100%; } [data-character-index="8"] { --face-x: 100%; --face-y: 100%; } [data-character-sprite="en"][data-character-index="0"] { --face-x: 0%; --face-y: 0%; } [data-character-sprite="en"][data-character-index="1"] { --face-x: 25%; --face-y: 0%; } [data-character-sprite="en"][data-character-index="2"] { --face-x: 50%; --face-y: 0%; } [data-character-sprite="en"][data-character-index="3"] { --face-x: 75%; --face-y: 0%; } [data-character-sprite="en"][data-character-index="4"] { --face-x: 100%; --face-y: 0%; } [data-character-sprite="en"][data-character-index="5"] { --face-x: 0%; --face-y: 100%; } [data-character-sprite="en"][data-character-index="6"] { --face-x: 25%; --face-y: 100%; } [data-character-sprite="en"][data-character-index="7"] { --face-x: 50%; --face-y: 100%; } [data-character-sprite="en"][data-character-index="8"] { --face-x: 75%; --face-y: 100%; } [data-character-sprite="en"][data-character-index="9"] { --face-x: 100%; --face-y: 100%; } [data-character-sprite="es"][data-character-index="0"], [data-character-sprite="zh"][data-character-index="0"] { --face-x: 0%; --face-y: 0%; } [data-character-sprite="es"][data-character-index="1"], [data-character-sprite="zh"][data-character-index="1"] { --face-x: 25%; --face-y: 0%; } [data-character-sprite="es"][data-character-index="2"], [data-character-sprite="zh"][data-character-index="2"] { --face-x: 50%; --face-y: 0%; } [data-character-sprite="es"][data-character-index="3"], [data-character-sprite="zh"][data-character-index="3"] { --face-x: 75%; --face-y: 0%; } [data-character-sprite="es"][data-character-index="4"], [data-character-sprite="zh"][data-character-index="4"] { --face-x: 100%; --face-y: 0%; } [data-character-sprite="es"][data-character-index="5"], [data-character-sprite="zh"][data-character-index="5"] { --face-x: 0%; --face-y: 100%; } [data-character-sprite="es"][data-character-index="6"], [data-character-sprite="zh"][data-character-index="6"] { --face-x: 25%; --face-y: 100%; } [data-character-sprite="es"][data-character-index="7"], [data-character-sprite="zh"][data-character-index="7"] { --face-x: 50%; --face-y: 100%; } [data-character-sprite="es"][data-character-index="8"], [data-character-sprite="zh"][data-character-index="8"] { --face-x: 75%; --face-y: 100%; } [data-character-sprite="es"][data-character-index="9"], [data-character-sprite="zh"][data-character-index="9"] { --face-x: 100%; --face-y: 100%; } [data-character-sprite="ko"][data-character-index="0"] { --face-x: 0%; --face-y: 0%; } [data-character-sprite="ko"][data-character-index="1"] { --face-x: 50%; --face-y: 0%; } [data-character-sprite="ko"][data-character-index="2"] { --face-x: 100%; --face-y: 0%; } .coach-portrait .character-face { display: block; width: 100%; height: 100%; border: 4px solid var(--teal-900); border-radius: inherit; } .speaking-ring { position: absolute; inset: -8px; border: 1px solid rgba(100,210,182,.4); border-radius: 50%; animation: ring 2.2s ease-out infinite; } .coach-portrait.hidden-avatar .character-face { opacity: 0; }.coach-portrait.hidden-avatar:after { content: attr(data-initial); position: absolute; inset: 5px; display: grid; place-items: center; border-radius: 50%; color: var(--mint); background: #174844; font: 600 54px Georgia; } .coach-name { display: grid; justify-items: center; margin-top: 12px; color: white; }.coach-name span { font: 600 18px Georgia, serif; }.coach-name small { margin-top: 3px; color: #82a8a2; font-size: 7px; font-weight: 800; letter-spacing: 1.4px; } .coach-caption { max-width: 500px; width: calc(100% - 40px); margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #f8fffc; text-align: center; }.coach-caption p { margin: 0; font-family: Georgia, serif; font-size: clamp(16px, 1.55vw, 22px); line-height: 1.3; }.quote-mark { align-self: flex-start; color: var(--mint); font: 38px/1 Georgia; opacity: .7; }.coach-caption button { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--mint); background: rgba(100,210,182,.13); cursor: pointer; }.coach-caption svg { width: 14px; } .korean-hint { margin: 7px 0 0; color: #8dacaa; font-size: 10px; } .transcript-card { position: relative; margin: -4px 22px 0; z-index: 6; padding: 14px 17px 13px; border: 1px solid rgba(22,70,66,.08); border-radius: 15px; background: var(--paper); box-shadow: 0 10px 28px rgba(18,53,50,.1); } .transcript-head { display: flex; align-items: center; gap: 10px; }.transcript-head > div:first-child { min-width: 123px; display: grid; grid-template-columns: 10px auto; align-items: center; }.pulse-dot { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: live 1.6s infinite; }.transcript-head b { font-size: 10px; }.transcript-head small { color: #899b98; font-size: 8px; } .waveform { flex: 1; height: 23px; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }.waveform i { width: 2px; height: 6px; border-radius: 4px; background: #6bc2ae; animation: wave .8s ease-in-out infinite alternate; }.waveform i:nth-child(2n) { animation-delay: -.3s; }.waveform i:nth-child(3n) { animation-delay: -.55s; }.waveform i:nth-child(4n) { height: 13px; } .pace { color: #899b98; font-size: 8px; }.pace b { color: var(--teal-700); font-size: 11px; } .live-transcript { min-height: 44px; margin: 9px 0 8px; color: #243b39; font-family: Georgia, serif; font-size: 14px; line-height: 1.55; }.live-transcript mark { position: relative; color: inherit; background: transparent; }.live-transcript .good { border-bottom: 2px solid #79ccb6; }.live-transcript .fix { border-bottom: 2px solid var(--coral); color: #b45448; }.correction { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 2px 5px; border-radius: 4px; color: white; background: var(--coral); font: 7px sans-serif; opacity: 0; transition: .2s; }.fix:hover .correction { opacity: 1; } .micro-tip { display: flex; align-items: center; gap: 7px; padding-top: 7px; border-top: 1px solid #edf0ec; color: #617572; font-size: 9px; }.micro-tip svg { width: 13px; color: #d48c47; }.micro-tip b { color: #a46737; margin-right: 4px; } .call-controls { display: flex; align-items: flex-start; justify-content: center; gap: clamp(10px, 2vw, 22px); padding-top: 15px; } .round-control { width: 54px; display: grid; justify-items: center; gap: 4px; border: 0; color: #536b68; background: transparent; font-size: 8px; cursor: pointer; }.round-control > svg, .round-control > .dots { width: 36px; height: 36px; display: grid; place-items: center; padding: 9px; border: 1px solid #d3deda; border-radius: 50%; background: #fafbf7; transition: .2s; }.round-control:hover > svg, .round-control:hover > .dots { border-color: var(--teal-700); color: var(--teal-700); transform: translateY(-2px); }.round-control.off > svg { color: white; border-color: var(--coral); background: var(--coral); }.dots { padding: 7px!important; font-weight: 800; letter-spacing: 1px; } .end-call { min-width: 126px; height: 44px; border: 0; border-radius: 25px; display: flex; align-items: center; justify-content: center; gap: 7px; color: white; background: var(--coral); box-shadow: 0 8px 20px rgba(239,115,95,.25); font-size: 10px; cursor: pointer; transition: .2s; }.end-call:hover { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(239,115,95,.35); }.end-icon { transform: rotate(-45deg); font-size: 17px; } .insight-panel { min-width: 0; padding: 22px 23px; background: var(--paper); border-left: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 94px); } .insight-head { display: flex; align-items: center; justify-content: space-between; }.insight-head h2 { margin: 0; font: 600 23px Georgia, serif; }.score-chip { border-radius: 20px; padding: 7px 10px; color: #6f807d; background: #f1f4ef; font-size: 8px; }.score-chip b { color: var(--teal-700); font-size: 12px; } .score-overview { display: flex; align-items: center; gap: 15px; padding: 18px 0; }.score-gauge { position: relative; width: 78px; height: 78px; flex: none; }.score-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-width: 7; }.score-gauge circle { fill: none; stroke: #e9efeb; }.score-gauge .score-progress { stroke: var(--mint); stroke-dasharray: 301.6; stroke-dashoffset: 54; stroke-linecap: round; animation: scoreIn 1.3s ease both; }.score-gauge strong { position: absolute; inset: 0; display: grid; place-content: center; font: 600 26px Georgia; }.score-gauge small { color: #9aadab; font: 8px sans-serif; }.score-overview > div:last-child span { color: var(--coral); font-size: 9px; font-weight: 800; }.score-overview h3 { margin: 3px 0 4px; font-size: 13px; }.score-overview p { margin: 0; color: #879895; font-size: 9px; }.score-overview p b { color: var(--teal-700); } .score-gauge.empty .score-progress { stroke-dashoffset: 301.6; } .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.metric-card { position: relative; min-width: 0; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 2px 5px; padding: 10px 9px; border: 1px solid #e1e8e3; border-radius: 11px; background: white; cursor: pointer; text-align: left; }.metric-card.active { border-color: #8ed3c2; background: #f5fbf8; box-shadow: inset 0 0 0 1px rgba(100,210,182,.15); }.metric-icon { grid-row: 1/3; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: var(--teal-700); background: var(--mint-soft); font-weight: 800; }.metric-card small { color: #718582; font-size: 8px; }.metric-card b { grid-column: 3; grid-row: 1/3; font: 600 18px Georgia; }.metric-card i { grid-column: 1/4; display: block; height: 2px; margin-top: 5px; border-radius: 3px; background: #e8eeea; }.metric-card em { display: block; height: 100%; border-radius: inherit; background: var(--mint); }.metric-card.score-86 em { width: 86%; }.metric-card.score-78 em { width: 78%; }.metric-card.score-84 em { width: 84%; } .metric-card.score-empty i em { width: 0; } .analysis-empty { padding: 18px; border: 1px dashed #d7e1dc; border-radius: 12px; color: #78908c; background: #fafbf8; font-size: 11px; line-height: 1.6; } .empty-copy { color: #81918e !important; } .divider { height: 1px; margin: 18px 0; background: var(--line); } .section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }.section-title h3 { margin: 0; font-size: 11px; }.section-title button { display: flex; align-items: center; border: 0; color: #7a8e8a; background: transparent; font-size: 8px; cursor: pointer; }.section-title button svg { width: 11px; }.issue-count { padding: 3px 6px; border-radius: 10px; color: #bc5c50; background: var(--coral-soft); font-size: 7px; font-weight: 700; } .word-row { display: flex; align-items: center; min-height: 37px; padding: 6px 8px; border-bottom: 1px solid #edf0ec; }.word-row > div { flex: 1; display: flex; align-items: baseline; gap: 8px; }.word-row b { font: 600 12px Georgia; }.word-row span:not(.word-score) { color: #829390; font-size: 8px; }.word-score { min-width: 26px; padding: 3px 5px; border-radius: 6px; font-size: 8px; font-weight: 800; text-align: center; }.word-score.great { color: #287666; background: #dcf4ec; }.word-score.good-score { color: #56746e; background: #edf2ef; }.word-score.warn { color: #b15a4e; background: var(--coral-soft); }.needs-work { margin-top: 4px; border: 1px solid #f0c8bf; border-radius: 8px; background: #fff9f7; }.mini-play { width: 22px; height: 22px; margin-left: 5px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #af5b4f; background: #ffe7e1; cursor: pointer; }.mini-play svg { width: 10px; } .grammar-section { margin-top: 17px; }.grammar-card { padding: 11px 12px; border: 1px solid #eee2dc; border-radius: 10px; background: #fffaf7; }.grammar-card p { margin: 0 0 6px; color: #927b76; font: 10px Georgia; }.grammar-card del b { color: #b25349; }.grammar-card .correct { display: flex; align-items: center; gap: 5px; color: #284d47; }.grammar-card .correct svg { width: 12px; color: #3aa78e; }.grammar-card small { display: flex; align-items: center; gap: 5px; padding-top: 7px; border-top: 1px solid #f0e3dc; color: #8a706a; font-size: 8px; }.grammar-card small svg { width: 11px; color: #d38f4a; } .content-section { margin-top: 17px; }.content-score { color: var(--teal-700); font: 700 9px Georgia; }.content-feedback { display: grid; gap: 6px; padding: 10px 11px; border: 1px solid #dbe8e2; border-radius: 10px; background: #f8fbf8; }.content-feedback span { display: flex; align-items: center; gap: 6px; color: #415c57; font-size: 8px; }.content-feedback span svg { width: 11px; color: #37a38b; }.content-feedback p { margin: 2px 0 0; padding-top: 7px; border-top: 1px solid #e1eae5; color: #71837f; font-size: 8px; line-height: 1.45; }.content-feedback strong { color: var(--teal-700); } .adaptive-card { position: relative; display: flex; gap: 9px; margin-top: 17px; padding: 11px 11px 13px; border: 1px solid #cce8df; border-radius: 11px; background: linear-gradient(135deg, #f0faf6, #fbfdf9); }.adaptive-icon { flex: none; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--teal-700); background: #d9f2e9; }.adaptive-icon svg { width: 13px; }.adaptive-card b { font-size: 9px; }.adaptive-card p { max-width: 250px; margin: 3px 0 0; color: #708681; font-size: 8px; line-height: 1.5; }.difficulty { position: absolute; top: 9px; right: 9px; color: #2f796c; font-size: 7px; font-weight: 800; } .dropdown { position: fixed; z-index: 60; min-width: 210px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }.dropdown[hidden] { display: none; }.dropdown button { width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; align-items: center; border: 0; border-radius: 8px; padding: 9px; background: transparent; text-align: left; cursor: pointer; }.dropdown button:hover { background: #f1f7f3; }.dropdown button > span { grid-row: 1/3; font-size: 19px; }.dropdown b { font-size: 11px; }.dropdown small { color: #8a9a97; font-size: 8px; } .modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(4,25,24,.62); backdrop-filter: blur(7px); animation: fadeIn .2s both; }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 31px; border-radius: 22px; background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.3); animation: modalIn .28s ease both; }.modal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #657b77; background: #edf2ee; cursor: pointer; }.modal-close svg { width: 16px; }.modal h2 { margin: 0; font: 600 27px Georgia, serif; }.modal-sub { margin: 8px 0 20px; color: #6f8380; font-size: 11px; line-height: 1.6; } .goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.goal-option { position: relative; min-height: 115px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 13px; border: 1px solid #dce5df; border-radius: 12px; background: white; text-align: left; cursor: pointer; transition: .2s; }.goal-option:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(18,53,50,.08); }.goal-option.selected { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: #f5fbf8; }.goal-emoji { font-size: 19px; margin-bottom: 3px; }.goal-option b { font-size: 11px; }.goal-option small { color: #80918e; font-size: 8px; line-height: 1.4; }.goal-option i { position: absolute; top: 9px; right: 9px; border-radius: 10px; padding: 3px 6px; color: #ad5549; background: var(--coral-soft); font-size: 7px; font-style: normal; font-weight: 800; } .practice-kind-switch { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.22); }.practice-kind-switch button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px; color: #9fc0ba; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }.practice-kind-switch button.active { color: var(--teal-950); background: var(--mint); } .practice-kind-switch[hidden], .conversation-style-panel[hidden] { display: none; } .start-character { display: flex; align-items: center; gap: 9px; min-width: 210px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: white; background: rgba(0,0,0,.18); text-align: left; cursor: pointer; }.start-character:hover { border-color: rgba(100,210,182,.55); background: rgba(100,210,182,.1); }.mini-character-face { width: 34px; height: 34px; flex: none; border-radius: 50%; }.start-character > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }.start-character b { font-size: 11px; }.start-character small { color: #a9c9c4; font-size: 8px; }.start-character i { color: var(--mint); font-size: 8px; font-style: normal; font-weight: 800; } .conversation-style-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }.conversation-style-panel button { display: grid; gap: 4px; min-height: 66px; padding: 11px 13px; border: 1px solid #d8e4de; border-radius: 11px; color: var(--teal-900); background: white; text-align: left; cursor: pointer; }.conversation-style-panel button.active { border-color: var(--mint-dark); box-shadow: inset 0 0 0 1px var(--mint-dark); background: #f0faf6; }.conversation-style-panel b { font-size: 12px; }.conversation-style-panel small { color: #718681; font-size: 9px; line-height: 1.4; } .character-picker { margin-bottom: 14px; }.character-picker > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; max-height: 238px; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; }.character-option { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid #dce5e0; border-radius: 11px; color: var(--teal-900); background: white; text-align: left; cursor: pointer; }.character-option.selected { border-color: var(--mint-dark); box-shadow: inset 0 0 0 1px var(--mint-dark); background: #f1faf6; }.character-option-face { width: 43px; height: 43px; flex: none; border-radius: 50%; }.character-option > span:last-child { display: grid; gap: 2px; min-width: 0; }.character-option b { font-size: 11px; }.character-option small { overflow: hidden; color: #718681; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .modal-level { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 18px 0; padding: 13px; border-radius: 11px; background: #f1f4ef; }.modal-level > span { display: grid; gap: 2px; min-width: 0; }.modal-level b { font-size: 10px; }.modal-level small { max-width: 330px; color: #82928f; font-size: 8px; line-height: 1.45; }.level-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }.level-pills button { border: 1px solid #d6e0db; border-radius: 7px; padding: 6px 9px; color: #728582; background: white; font-size: 9px; cursor: pointer; white-space: nowrap; }.level-pills button.active { color: white; border-color: var(--teal-700); background: var(--teal-700); } .primary-button, .secondary-button { min-height: 42px; border-radius: 10px; padding: 0 18px; font-size: 10px; font-weight: 700; cursor: pointer; }.primary-button { border: 0; color: white; background: var(--teal-700); box-shadow: 0 8px 18px rgba(27,107,99,.2); }.goal-modal > .primary-button, .upload-modal > .primary-button { width: 100%; }.secondary-button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d7e2dc; color: var(--teal-700); background: white; }.secondary-button svg { width: 14px; } .drop-zone { min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed #a9c6be; border-radius: 14px; background: #f6fbf8; cursor: pointer; }.drop-zone.dragging { border-color: var(--coral); background: #fff8f6; }.upload-orb { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; color: var(--teal-700); background: var(--mint-soft); }.upload-orb svg { width: 19px; }.drop-zone b { font-size: 11px; }.drop-zone small { color: #859793; font-size: 8px; }.or-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #a0aeab; font-size: 8px; }.or-divider:before, .or-divider:after { content: ""; flex: 1; height: 1px; background: #e4eae6; }.brief-label { display: grid; gap: 7px; color: #324b48; font-size: 10px; font-weight: 700; }.brief-label textarea { min-height: 84px; resize: vertical; border: 1px solid #d7e2dc; border-radius: 10px; padding: 11px; outline: 0; color: var(--ink); background: white; font-size: 10px; line-height: 1.5; }.brief-label textarea:focus { border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(27,107,99,.08); }.detected-requirements { margin: 12px 0; padding: 11px; border-radius: 10px; background: var(--mint-soft); }.detected-requirements > b { display: flex; align-items: center; gap: 5px; color: var(--teal-700); font-size: 9px; }.detected-requirements svg { width: 12px; }.detected-requirements div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }.detected-requirements span { padding: 4px 7px; border: 1px solid #b5ddd1; border-radius: 20px; color: #315f57; background: white; font-size: 8px; } .detected-requirements { cursor: pointer; }.detected-requirements p { margin: 9px 0 0; color: #375d56; font-size: 10px; line-height: 1.5; }.detected-requirements ul { display: grid; gap: 3px; margin: 7px 0 0; padding-left: 17px; color: #56736d; font-size: 9px; line-height: 1.45; } .summary-modal { width: min(570px, 100%); text-align: center; }.summary-check { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; color: white; background: var(--teal-700); box-shadow: 0 0 0 8px var(--mint-soft); }.summary-check svg { width: 25px; }.centered { justify-content: center; }.summary-score { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 20px 0; }.summary-score strong { font: 600 48px Georgia; }.summary-score span { padding-left: 18px; border-left: 1px solid var(--line); color: #788b87; font-size: 9px; text-align: left; line-height: 1.55; }.summary-score span b { color: var(--ink); font-size: 12px; }.summary-score em { padding: 5px 8px; border-radius: 14px; color: #277a69; background: var(--mint-soft); font-size: 9px; font-style: normal; font-weight: 800; }.summary-stats { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }.summary-stats div { display: grid; gap: 4px; padding: 13px 6px; border-right: 1px solid var(--line); }.summary-stats div:last-child { border: 0; }.summary-stats small { color: #7e918d; font-size: 8px; }.summary-stats b { font: 600 20px Georgia; }.summary-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; margin-top: 19px; } .character-modal { width: min(690px, 100%); }.quick-character-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: min(62vh, 520px); margin-top: 18px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; } .assessment-loader { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 14px; margin: 18px 0 8px; padding: 13px 15px; border: 1px solid #cfe5dd; border-radius: 13px; background: linear-gradient(110deg,#f5fbf8,#edf7f3,#f5fbf8); background-size: 220% 100%; animation: assessmentShimmer 2.2s linear infinite; text-align: left; }.assessment-loader[hidden] { display: none; }.assessment-orb { position: relative; width: 42px; height: 42px; border: 3px solid #cce8df; border-top-color: var(--teal-700); border-radius: 50%; animation: assessmentSpin 1s linear infinite; }.assessment-orb i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--mint-dark); }.assessment-orb i:nth-child(1) { left: 7px; top: 17px; }.assessment-orb i:nth-child(2) { left: 16px; top: 17px; }.assessment-orb i:nth-child(3) { left: 25px; top: 17px; }.assessment-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.assessment-steps > span { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 6px; color: #8a9b97; }.assessment-steps b { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #ccd9d4; border-radius: 50%; font-size: 9px; }.assessment-steps em { font-size: 9px; font-style: normal; line-height: 1.35; }.assessment-steps .active { color: var(--teal-800); font-weight: 750; }.assessment-steps .active b { border-color: var(--mint-dark); background: white; animation: assessmentPulse 1.2s ease-in-out infinite; }.assessment-steps .done { color: #32806f; }.assessment-steps .done b { border-color: #bfe3d8; color: white; background: #4bae95; }.summary-modal.is-assessing .summary-score strong { color: var(--mint-dark); letter-spacing: 5px; animation: assessmentPulse 1.1s ease-in-out infinite; }.summary-modal.is-assessing .optimistic-stat { position: relative; overflow: hidden; }.summary-modal.is-assessing .optimistic-stat:after, .assessment-loading .score-overview:after { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation: optimisticSweep 1.5s ease-in-out infinite; }.settings-grid.single { grid-template-columns: 1fr; } .settings-modal { width: min(590px, 100%); }.settings-status { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding: 13px; border: 1px solid #e1e7e3; border-radius: 11px; background: #f5f7f4; }.settings-status > span { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(226,185,95,.14); }.settings-status.live > span { background: #35ad90; box-shadow: 0 0 0 5px rgba(53,173,144,.13); }.settings-status div { display: grid; gap: 3px; }.settings-status b { font-size: 10px; }.settings-status small { color: #7f918e; font-size: 8px; }.settings-field { display: grid; gap: 7px; margin-bottom: 15px; }.settings-field > span { font-size: 9px; font-weight: 750; }.settings-field > div { display: flex; }.settings-field input, .settings-field select { width: 100%; height: 41px; border: 1px solid #d7e2dc; border-radius: 9px; padding: 0 11px; outline: 0; color: var(--ink); background: white; font-size: 10px; }.settings-field input:focus, .settings-field select:focus { border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(27,107,99,.08); }.settings-field > div input { border-radius: 9px 0 0 9px; }.settings-field > div button { width: 54px; border: 1px solid #d7e2dc; border-left: 0; border-radius: 0 9px 9px 0; color: #5f7772; background: #f3f6f3; font-size: 9px; cursor: pointer; }.settings-field small { color: #899a97; font-size: 8px; }.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.data-location { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; padding: 12px; border: 1px solid #dce5df; border-radius: 10px; }.data-location div { min-width: 0; display: grid; gap: 3px; }.data-location b { font-size: 9px; }.data-location small { overflow: hidden; color: #80918e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.data-location .secondary-button { min-height: 32px; flex: none; }.settings-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 9px; } .history-modal { width: min(720px, 100%); min-height: 500px; }.history-list { display: grid; gap: 8px; }.history-empty { display: grid; place-items: center; min-height: 220px; border: 1px dashed #cddbd5; border-radius: 12px; color: #879995; font-size: 10px; }.history-item { width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid #dce5df; border-radius: 12px; padding: 11px; background: white; text-align: left; cursor: pointer; transition: .2s; }.history-item:hover { transform: translateY(-1px); border-color: #9fcfc2; box-shadow: 0 7px 20px rgba(18,53,50,.07); }.history-date { width: 44px; height: 44px; display: grid; place-content: center; border-radius: 10px; color: var(--teal-700); background: var(--mint-soft); text-align: center; }.history-date b { font: 600 17px Georgia; }.history-date small { font-size: 7px; }.history-main { min-width: 0; display: grid; gap: 4px; }.history-main b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.history-main small { color: #849491; font-size: 8px; }.history-score { display: grid; justify-items: end; gap: 3px; }.history-score b { font: 600 19px Georgia; }.history-score small { color: #82938f; font-size: 7px; }.history-back { border: 0; margin: 0 0 14px; padding: 0; color: var(--teal-700); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }.history-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; border-radius: 12px; background: var(--teal-950); color: white; }.history-detail-head h3 { margin: 0 0 3px; font: 600 18px Georgia; }.history-detail-head small { color: #85a9a3; font-size: 8px; }.history-detail-head strong { font: 600 31px Georgia; }.history-turns { display: grid; gap: 7px; margin-top: 14px; max-height: 255px; overflow-y: auto; }.history-turn { max-width: 85%; padding: 9px 11px; border-radius: 10px 10px 10px 2px; background: #f0f4f1; }.history-turn.user { justify-self: end; border-radius: 10px 10px 2px 10px; background: var(--mint-soft); }.history-turn b { display: block; margin-bottom: 3px; color: #718680; font-size: 7px; text-transform: uppercase; }.history-turn p { margin: 0; font-size: 9px; line-height: 1.5; }.history-audio-button { margin-top: 13px; }.history-detail audio { width: 100%; margin-top: 12px; height: 38px; } .vocabulary-modal { width: min(820px, 100%); min-height: 560px; }.vocabulary-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) 130px 120px; gap: 8px; margin-bottom: 14px; }.vocabulary-toolbar label { position: relative; }.vocabulary-toolbar label span { position: absolute; left: 11px; top: 9px; color: #6f837f; }.vocabulary-toolbar input, .vocabulary-toolbar select { width: 100%; height: 36px; border: 1px solid #d7e2dc; border-radius: 9px; padding: 0 10px; outline: 0; color: var(--ink); background: white; font-size: 9px; }.vocabulary-toolbar input { padding-left: 30px; }.vocabulary-toolbar input:focus, .vocabulary-toolbar select:focus { border-color: var(--teal-700); }.vocabulary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; max-height: 410px; overflow-y: auto; padding-right: 3px; }.vocab-card { position: relative; display: grid; gap: 8px; padding: 14px; border: 1px solid #dce5df; border-radius: 13px; background: white; }.vocab-card.review { border-color: #efc7bd; background: #fffaf8; }.vocab-card.mastered { opacity: .7; }.vocab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.vocab-term { display: grid; gap: 3px; }.vocab-term b { font: 600 17px Georgia, serif; }.vocab-term span { color: #718781; font-size: 8px; }.vocab-type { padding: 3px 6px; border-radius: 10px; color: #287466; background: var(--mint-soft); font-size: 7px; font-weight: 750; }.vocab-meaning { margin: 0; color: #2b4641; font-size: 10px; font-weight: 700; }.vocab-usage { margin: 0; color: #728581; font-size: 8px; line-height: 1.55; }.vocab-example { padding: 9px; border-radius: 8px; background: #f3f6f3; }.vocab-example b { display: block; margin-bottom: 3px; color: var(--teal-800); font: 10px Georgia, serif; }.vocab-example small { color: #80918e; font-size: 8px; }.vocab-source { overflow: hidden; color: #9aa7a4; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.vocab-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding-top: 2px; }.vocab-actions button { height: 27px; border: 1px solid #dce4df; border-radius: 7px; color: #71837f; background: #fafbf9; font-size: 7px; cursor: pointer; }.vocab-actions button:hover, .vocab-actions button.active { color: white; border-color: var(--teal-700); background: var(--teal-700); } .toast { position: fixed; left: 50%; bottom: 25px; z-index: 110; display: flex; align-items: center; gap: 7px; transform: translate(-50%, 100px); opacity: 0; padding: 10px 14px; border-radius: 24px; color: white; background: var(--teal-950); box-shadow: var(--shadow); font-size: 10px; transition: .3s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }.toast svg { width: 13px; color: var(--mint); } @keyframes live { 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(100,210,182,0); } } @keyframes wave { to { height: 18px; } } @keyframes ring { from { transform: scale(.98); opacity: .8; } to { transform: scale(1.1); opacity: 0; } } @keyframes scoreIn { from { stroke-dashoffset: 301.6; } } @keyframes fadeIn { from { opacity: 0; } } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } } @keyframes assessmentSpin { to { transform: rotate(360deg); } } @keyframes assessmentPulse { 50% { opacity: .45; transform: scale(.94); } } @keyframes assessmentShimmer { to { background-position: -220% 0; } } @keyframes optimisticSweep { to { transform: translateX(110%); } } @media (max-width: 1120px) { .app-shell { grid-template-columns: 210px minmax(0,1fr); } .sidebar { padding-left: 12px; padding-right: 12px; } .workspace { grid-template-columns: minmax(470px, 1.35fr) 320px; } .conversation-panel { padding-left: 18px; padding-right: 18px; } .insight-panel { padding-left: 17px; padding-right: 17px; } .metric-card { grid-template-columns: 1fr auto; }.metric-icon { display: none; }.metric-card i { grid-column: 1/3; } .ghost-button span, .backend-status b { display: none; } } @media (max-width: 860px) { .app-shell { display: block; } .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 246px; transition: .25s; box-shadow: 10px 0 40px rgba(0,0,0,.25); }.sidebar.open { transform: none; } .mobile-menu { display: inline-grid; place-items: center; float: left; width: 35px; height: 35px; margin-right: 10px; border: 0; border-radius: 8px; color: var(--teal-700); background: #eef4f0; cursor: pointer; } .topbar { padding: 15px 18px; }.workspace { grid-template-columns: 1fr; }.insight-panel { max-height: none; border-left: 0; border-top: 1px solid var(--line); }.call-stage { height: 455px; } .insight-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }.insight-head, .score-overview, .metric-grid, .divider, .adaptive-card { grid-column: 1/-1; } } @media (max-width: 600px) { .topbar { align-items: flex-start; }.top-actions { gap: 5px; }.language-select { padding: 0 9px; }.language-select #languageName { display: none; }.ghost-button { padding: 0 10px; }.session-title-row h1 { font-size: 18px; }.edit-goal { display: none; } .conversation-panel { padding: 12px 10px 16px; }.call-stage { min-height: 380px; height: 53vh; border-radius: 16px; }.coach-caption p { font-size: 17px; }.transcript-card { margin-left: 8px; margin-right: 8px; }.waveform { display: none; }.pace { margin-left: auto; } .call-controls { gap: 5px; }.round-control { width: 49px; }.end-call { min-width: 110px; }.round-control > svg, .round-control > .dots { width: 34px; height: 34px; } .insight-panel { display: block; padding: 20px 16px; }.metric-grid { margin-top: 3px; }.analysis-section { margin-top: 17px; }.goal-grid { grid-template-columns: 1fr 1fr; }.modal { padding: 26px 18px; }.modal-level { align-items: flex-start; flex-direction: column; }.summary-stats { grid-template-columns: 1fr 1fr; }.summary-stats div:nth-child(2) { border-right: 0; }.summary-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.summary-actions { grid-template-columns: 1fr; } .settings-grid { grid-template-columns: 1fr; gap: 0; } .vocabulary-toolbar { grid-template-columns: 1fr 1fr; }.vocabulary-toolbar label { grid-column: 1/-1; }.vocabulary-list { grid-template-columns: 1fr; } .character-picker > div:last-child { grid-template-columns: 1fr; } .character-option { min-height: 62px; padding: 9px 11px; } .character-option-face { width: 46px; height: 46px; } .character-option b { font-size: 13px; } .character-option small { font-size: 10px; } .practice-kind-switch { width: min(100%, 320px); } .practice-kind-switch button { flex: 1; min-height: 40px; font-size: 12px; } .session-start { justify-content: flex-start; } .session-start .start-icon { display: none; } .start-planner { width: 100%; padding: 12px; } .start-language-tabs button { min-height: 38px; font-size: 10px; } .start-planner-grid { grid-template-columns: 1fr 92px; } .start-planner-grid select { min-height: 42px; font-size: 12px; } .exam-stimulus { inset: 48px 8px 112px; border-radius: 11px; } .exam-stimulus figcaption { align-items: flex-start; flex-direction: column; gap: 2px; padding: 7px 8px; } .exam-stimulus figcaption b { font-size: 10px; }.exam-stimulus figcaption span { font-size: 8px; } .exam-material-document { padding: 22px 18px 76px; } .exam-material-document h2 { margin-bottom: 13px; font-size: 21px; } .exam-material-document p { font-size: 17px; line-height: 1.5; } .exam-material-document pre { padding: 12px; font-size: 12px; } .exam-source-task { margin-bottom: 14px; padding: 11px 12px; } .exam-source-task > p { font-size: 14px; } .exam-source-article { padding: 19px 16px 28px; } .exam-source-article header { padding-right: 0; padding-bottom: 14px; } .exam-source-article header span { position: static; display: inline-block; margin-top: 9px; } .exam-source-article h3 { font-size: 24px; } .exam-material-document .exam-source-article > p { font-size: 16px; line-height: 1.65; } .exam-stimulus.expanded { inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); } } /* Readable post-session report */ .insight-panel { padding: 24px; container-type: inline-size; } .insight-head { gap: 14px; }.insight-head h2 { font-size: 25px; }.score-chip { flex: none; padding: 8px 11px; font-size: 12px; }.score-chip b { font-size: 15px; } .score-overview { gap: 18px; padding: 22px 0; }.score-gauge { width: 92px; height: 92px; }.score-gauge strong { text-align: center; font-size: 27px; line-height: 1.05; }.score-gauge small { display: block; max-width: 72px; margin-top: 4px; font-size: 10px; line-height: 1.15; }.score-overview > div:last-child { min-width: 0; }.score-overview > div:last-child span { font-size: 12px; }.score-overview h3 { margin: 5px 0 6px; overflow-wrap: anywhere; font-size: 16px; line-height: 1.35; }.score-overview p { font-size: 13px; line-height: 1.55; } .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.metric-card { grid-template-columns: 32px minmax(0, 1fr); gap: 3px 9px; min-height: 104px; padding: 14px; overflow: hidden; }.metric-icon { grid-row: 1/3; width: 32px; height: 32px; border-radius: 9px; }.metric-card small { grid-column: 2; min-width: 0; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }.metric-card b { grid-column: 2; grid-row: 2; min-width: 0; font-size: 22px; overflow-wrap: anywhere; }.metric-card i { grid-column: 1/3; height: 3px; margin-top: 8px; } .section-title { gap: 12px; margin-bottom: 11px; }.section-title h3 { font-size: 16px; }.section-title button { font-size: 12px; }.issue-count, .review-badge { flex: none; padding: 4px 8px; border-radius: 12px; color: #bc5c50; background: var(--coral-soft); font-size: 11px; font-weight: 700; } .analysis-empty { padding: 18px; font-size: 13px; line-height: 1.65; } .grammar-section { margin-top: 22px; }.grammar-card { padding: 16px; border-radius: 13px; }.grammar-card + .grammar-card { margin-top: 10px; }.grammar-card p { margin-bottom: 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }.grammar-card .correct { align-items: flex-start; gap: 7px; font-size: 15px; }.grammar-card .correct svg { width: 15px; flex: none; }.grammar-card small { align-items: flex-start; gap: 7px; padding-top: 11px; font-size: 12px; line-height: 1.55; }.grammar-card small svg { width: 14px; flex: none; } .content-section { margin-top: 22px; }.content-score { font-size: 13px; } .adaptive-card { position: static; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 7px 12px; margin-top: 22px; padding: 16px; overflow: hidden; }.adaptive-icon { grid-row: 1/3; width: 38px; height: 38px; border-radius: 10px; }.adaptive-icon svg { width: 17px; }.adaptive-card > div { min-width: 0; }.adaptive-card b { font-size: 14px; }.adaptive-card p { max-width: none; margin-top: 5px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }.difficulty { grid-column: 2; position: static; justify-self: start; padding: 4px 8px; border-radius: 10px; color: #2f796c; background: #dcf3eb; font-size: 12px; } .summary-modal { width: min(780px, 100%); }.summary-score span { font-size: 12px; }.summary-score span b { font-size: 15px; }.summary-stats small { font-size: 11px; line-height: 1.35; }.summary-stats b { font-size: 22px; } .review-materials { margin-top: 22px; }.review-badge { color: #287466; background: var(--mint-soft); }.review-summary { margin: 0 0 12px; color: #49635e; font-size: 13px; line-height: 1.65; }.review-lessons { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; }.review-lessons li { padding-left: 18px; color: #3c5752; font-size: 13px; line-height: 1.5; }.review-lessons li:before { content: "✓"; float: left; margin-left: -18px; color: #2e9c83; font-weight: 800; }.retry-list, .drill-list { display: grid; gap: 10px; }.retry-card, .drill-card { padding: 14px; border: 1px solid #dbe7e1; border-radius: 12px; background: #f8fbf8; text-align: left; }.retry-card > b, .drill-card > b { display: block; margin-bottom: 6px; font-size: 14px; line-height: 1.45; }.retry-card p, .drill-card p { margin: 5px 0; color: #617873; font-size: 12px; line-height: 1.55; }.retry-model { padding: 10px; border-radius: 9px; color: #214b44 !important; background: white; font-family: Georgia, serif; }.review-points { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }.review-points span { padding: 4px 7px; border-radius: 12px; color: #3e7067; background: #dff3ec; font-size: 11px; }.review-actions { display: flex; gap: 7px; margin-top: 10px; }.review-actions button { min-height: 36px; padding: 0 12px; font-size: 12px; }.drill-items { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 20px; color: #405c57; font-size: 12px; line-height: 1.5; }.review-pack { margin-top: 20px; text-align: left; } @container (max-width: 520px) { .metric-grid { grid-template-columns: 1fr; } .metric-card { min-height: 84px; } } @media (max-width: 600px) { .insight-panel { padding: 20px 16px; } .summary-modal { text-align: left; }.summary-check, .summary-modal .centered { margin-left: auto; margin-right: auto; }.summary-modal > h2, .summary-modal > .modal-sub { text-align: center; } .summary-stats { grid-template-columns: 1fr 1fr; } .review-actions { flex-direction: column; } } @media (max-width: 400px) { .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }.mobile-menu { margin-right: 6px; }.top-actions { position: absolute; top: 14px; right: 12px; }.session-title-row h1 { max-width: 205px; font-size: 17px; }.ghost-button { display: none; } .call-controls { gap: 1px; }.round-control { width: 45px; }.end-call { min-width: 96px; }.round-control#videoButton { display: none; } } @media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; } } .login-page, .offline-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; color: var(--teal-950); background: radial-gradient(circle at 50% 0, var(--mint-soft), var(--cream) 58%); } .login-card { width: min(100%, 440px); display: grid; gap: 18px; padding: 36px; border: 1px solid #dce6e0; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); } .login-card .brand-symbol, .offline-page .brand-symbol { width: 34px; height: 34px; } .login-card h1, .offline-page h1 { margin: 0; font: 600 28px/1.2 Georgia, serif; } .login-card > p, .offline-page p { margin: 0; color: #6d817d; font-size: 12px; line-height: 1.7; } .login-card label { display: grid; gap: 8px; color: var(--teal-800); font-size: 11px; font-weight: 750; } .login-card input { height: 54px; border: 1px solid #ccdcd4; border-radius: 12px; color: var(--teal-950); background: #fbfcf9; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 8px; outline: none; } .login-card input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(100,210,182,.18); } .offline-page { align-content: center; text-align: center; } .offline-page .brand-symbol { margin: 0 auto; } .offline-page .primary-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; } .mobile-insights-toggle, .mobile-sheet-close { display: none; } .call-controls[hidden] { display: none; } .expression-coaching { margin-top: 18px; text-align: left; } .coaching-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .coaching-heading div { display: grid; gap: 3px; }.coaching-heading b { color: var(--teal-900); font-size: 13px; }.coaching-heading small { color: #81928f; font-size: 9px; } .upgrade-list { display: grid; gap: 8px; } .upgrade-card { padding: 12px; border: 1px solid #d9e5df; border-radius: 12px; background: #fbfcf9; } .upgrade-card .upgrade-from { margin: 0 0 5px; color: #8a9a96; font-size: 9px; }.upgrade-card .upgrade-from del { text-decoration-color: #daa79c; } .upgrade-card .upgrade-to { display: flex; gap: 7px; margin: 0 0 9px; color: var(--teal-900); font: 600 14px/1.45 Georgia, serif; }.upgrade-card .upgrade-to svg { width: 13px; flex: none; color: var(--mint-dark); } .upgrade-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.upgrade-notes span { padding: 8px; border-radius: 8px; color: #607570; background: #f0f5f1; font-size: 8px; line-height: 1.5; }.upgrade-notes b { display: block; margin-bottom: 2px; color: #375f58; font-size: 8px; } .shadowing-practice { margin-top: 12px; padding: 15px; border-radius: 14px; color: white; background: linear-gradient(145deg, #0d3936, #15514d); } .shadowing-head { display: flex; justify-content: space-between; color: #8fc8bc; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; }.shadowing-head small { letter-spacing: 0; } .shadowing-title { display: block; margin-top: 12px; color: #c5f0e4; font-size: 11px; } .shadowing-sentence { margin: 14px 0 5px; font: 600 20px/1.4 Georgia, serif; }.shadowing-translation { margin: 0; color: #b7d1cc; font-size: 9px; } .shadowing-focus { display: inline-block; margin-top: 10px; padding: 5px 8px; border-radius: 8px; color: #c5f0e4; background: rgba(100,210,182,.12); font-size: 8px; } .shadowing-result { min-height: 34px; margin: 12px 0; padding: 9px; border-radius: 9px; color: #d6e7e3; background: rgba(0,0,0,.14); font-size: 9px; line-height: 1.55; } .shadowing-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.shadowing-controls .secondary-button { border-color: rgba(255,255,255,.18); color: white; background: rgba(255,255,255,.08); }.shadowing-controls .primary-button { color: var(--teal-950); background: var(--mint); }.shadowing-controls svg { width: 14px; }.shadowing-next { grid-column: 1/-1; } .caption-control b { font-size: 11px; letter-spacing: .5px; }.caption-control:not(.active) { opacity: .58; } .caption-control > b { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d3deda; border-radius: 50%; background: #fafbf7; } .captions-hidden #coachCaption { display: none; } /* Keep captions out of the avatar layout flow. */ .call-stage { padding: 64px 20px 122px; } .coach-portrait { margin-top: 0; } .coach-caption { position: absolute; left: 20px; right: 20px; bottom: 48px; z-index: 4; width: auto; min-height: 72px; max-width: 680px; margin: 0 auto; padding: 9px 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(4,31,29,.68); backdrop-filter: blur(8px); } .exam-audio-only-prompt .coach-caption { visibility: hidden; } .exam-audio-only-prompt #captionToggle, .exam-audio-only-prompt #captionControl { opacity: .45; cursor: not-allowed; } .coach-caption p { display: grid; grid-template-rows: repeat(2, 1.42em); min-width: 0; height: 2.84em; flex: 1; overflow: hidden; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.42; text-align: center; }.caption-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.caption-line:empty { visibility: hidden; }.coach-caption .quote-mark { align-self: center; font-size: 28px; } .coach-caption button.audio-playing, .secondary-button.audio-playing { color: white; border-color: #ef806c; background: #b84e42; } .session-roadmap { width: min(620px, 100%); margin: 8px auto 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; color: #d7e9e5; background: rgba(4,31,29,.32); text-align: left; }.session-roadmap[hidden] { display: none; }.session-roadmap > b { display: block; margin-bottom: 7px; color: #b8d4ce; font-size: 9px; letter-spacing: .04em; }.session-roadmap p { margin: 7px 0 0; overflow: hidden; color: #93b8b0; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .journey-steps { display: grid; grid-template-columns: .72fr 1.45fr 1.35fr; gap: 5px; }.journey-steps span { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 7px 8px; border-radius: 8px; color: #a8c4be; background: rgba(255,255,255,.055); font-size: 9px; font-weight: 700; line-height: 1.3; }.journey-steps span.active { color: white; background: rgba(100,210,182,.14); }.journey-steps i { width: 17px; height: 17px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #9ec7be; font-size: 8px; font-style: normal; }.journey-steps .active i { border-color: var(--mint); color: #092f2c; background: var(--mint); } .next-action-guide { display: flex; align-items: center; gap: 10px; margin: 8px 22px 0; padding: 9px 12px; border: 1px solid #d8e5df; border-radius: 12px; color: #294e48; background: rgba(246,250,247,.94); }.next-action-guide[hidden] { display: none; }.next-action-guide > span { flex: none; padding: 4px 7px; border-radius: 999px; color: #176c5c; background: #dff3eb; font-size: 9px; font-weight: 800; }.next-action-guide > div { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 2px 9px; min-width: 0; }.next-action-guide b { font-size: 11px; }.next-action-guide small { overflow: hidden; color: #758984; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.next-action-guide[data-kind="listen"] > span, .next-action-guide[data-kind="review"] > span, .next-action-guide[data-kind="prep"] > span { color: #755512; background: #fff0c8; }.next-action-guide[data-kind="paused"] > span, .next-action-guide[data-kind="retry"] > span { color: #a14d42; background: #ffe5df; } .review-path { margin: 12px 0 4px; padding: 11px 12px; border: 1px solid #d9e5df; border-radius: 11px; background: #f7faf7; }.review-path small { display: block; margin-bottom: 7px; color: #728581; font-size: 10px; font-weight: 750; }.review-path p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; color: #78908a; font-size: 11px; }.review-path b { color: #2e5f56; }.review-path span { color: #aac0ba; } .ai-voice-disclosure { display: block; margin-top: 8px; color: #9ebbb5; font-size: 9px; line-height: 1.5; } .korean-hint { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 4; overflow: hidden; margin: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .post-session-nav { position: sticky; top: -24px; z-index: 4; display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 7px; margin: 16px 0 4px; padding: 8px 0; background: var(--paper); }.post-session-nav[hidden] { display: none; }.post-session-nav button { min-height: 40px; border: 1px solid #cfe0d9; border-radius: 10px; color: var(--teal-700); background: #f4faf7; font-size: 12px; font-weight: 750; cursor: pointer; } .current-coaching-materials { margin-top: 22px; }.current-shadowing { padding: 15px; border-radius: 12px; color: #e8f6f2; background: var(--teal-950); }.current-shadowing b { display: block; font-size: 14px; }.current-shadowing p { margin: 8px 0; font: 600 17px/1.5 Georgia, serif; }.current-shadowing small { display: block; color: #a8c6bf; font-size: 12px; line-height: 1.55; }.current-shadowing button { margin-top: 11px; min-height: 38px; }.current-upgrades { display: grid; gap: 8px; margin-top: 10px; }.current-upgrades article { padding: 12px; border: 1px solid #dce6e1; border-radius: 10px; background: #f8faf7; }.current-upgrades del { color: #9a7a74; }.current-upgrades b { display: block; margin-top: 6px; color: #245e54; font-size: 14px; }.current-upgrades small { display: block; margin-top: 5px; color: #6e817d; font-size: 11px; line-height: 1.5; } @media (max-width: 600px) { body { padding-bottom: env(safe-area-inset-bottom); } .main-content { min-width: 0; } .topbar { position: sticky; top: 0; z-index: 20; min-height: 72px; padding-top: max(12px, env(safe-area-inset-top)); background: rgba(250,250,246,.94); backdrop-filter: blur(14px); } .backend-status, .ghost-button { display: none; } .workspace { display: block; } .conversation-panel { min-width: 0; padding: 8px 8px calc(82px + env(safe-area-inset-bottom)); } .call-stage { height: min(56dvh, 520px); min-height: 350px; border-radius: 15px; } .stage-top { top: 10px; left: 10px; right: 10px; } .exam-clock { position: static; transform: none; order: -1; min-width: 102px; padding: 5px 7px; }.exam-clock b { font-size: 15px; }.exam-clock span { display: none; }.exam-clock button { min-height: 24px; margin-top: 4px; padding: 0 6px; font-size: 8px; }.caption-toggle span { display: none; } .conversation-flow { position: static; transform: none; order: -1; min-width: 82px; padding: 5px 7px; }.conversation-flow b { font-size: 13px; }.conversation-flow span { display: none; }.session-roadmap { padding: 8px 9px; }.session-roadmap p { font-size: 8px; }.journey-steps { grid-template-columns: 1fr; gap: 4px; }.journey-steps span { min-height: 29px; padding: 5px 7px; font-size: 8px; }.journey-steps i { width: 15px; height: 15px; } .session-start { padding: 24px 18px; }.session-start .primary-button { min-height: 50px; font-size: 12px; } .coach-portrait { width: 104px; height: 104px; }.coach-caption { left: 10px; right: 10px; bottom: 44px; min-height: 66px; padding: 8px 10px; }.coach-caption p { font-size: 15px; }.korean-hint { bottom: 18px; font-size: 9px; } .transcript-card { max-height: 150px; overflow-y: auto; margin: 8px 3px 0; padding: 12px; }.live-transcript { font-size: 12px; line-height: 1.65; }.micro-tip { display: none; }.next-action-guide { margin: 7px 3px 0; padding: 8px 9px; }.next-action-guide > div { display: grid; grid-template-columns: 1fr; gap: 1px; }.next-action-guide b { font-size: 10px; }.next-action-guide small { font-size: 8px; }.review-path { padding: 10px; }.review-path p { font-size: 10px; } .call-controls { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 30; justify-content: space-around; gap: 5px; margin: 0; padding: 9px 8px; border: 1px solid rgba(210,225,218,.9); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 36px rgba(10,45,42,.2); backdrop-filter: blur(14px); } .round-control { width: 54px; }.round-control > svg { color: var(--teal-800); background: #edf5f1; }.end-call { min-width: 122px; min-height: 49px; } .mobile-insights-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid #d6e3dd; border-radius: 11px; color: var(--teal-700); background: white; font-size: 10px; font-weight: 750; }.mobile-insights-toggle svg { width: 14px; } .insight-panel { position: fixed; inset: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)); z-index: 50; display: none; overflow-y: auto; padding: 22px 16px; border: 0; border-radius: 20px; background: white; box-shadow: 0 20px 70px rgba(5,30,28,.38); } .insight-panel.mobile-open { display: block; } .mobile-sheet-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--teal-800); background: #edf4f0; }.mobile-sheet-close svg { width: 16px; } .insight-head { padding-right: 44px; } .summary-modal { min-height: 100dvh; width: 100%; border-radius: 0; overflow-y: auto; text-align: left; }.summary-modal .centered { justify-content: flex-start; }.summary-check { margin-left: 8px; }.summary-score { justify-content: flex-start; } .quick-character-grid { grid-template-columns: 1fr; max-height: 68vh; }.character-modal { min-height: 100dvh; width: 100%; border-radius: 0; overflow-y: auto; } .assessment-loader { grid-template-columns: 38px minmax(0,1fr); padding: 11px; }.assessment-orb { width: 36px; height: 36px; }.assessment-orb i:nth-child(1) { left: 5px; top: 14px; }.assessment-orb i:nth-child(2) { left: 13px; top: 14px; }.assessment-orb i:nth-child(3) { left: 21px; top: 14px; }.assessment-steps { gap: 4px; }.assessment-steps > span { grid-template-columns: 18px minmax(0,1fr); gap: 4px; }.assessment-steps b { width: 18px; height: 18px; }.assessment-steps em { font-size: 8px; } .upgrade-notes { grid-template-columns: 1fr; }.shadowing-sentence { font-size: 18px; }.shadowing-controls { grid-template-columns: 1fr; } .modal-backdrop { padding: 0; align-items: stretch; } } @media (max-width: 400px) { .insight-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; } .insight-head h2 { white-space: nowrap; font-size: 21px; line-height: 1.25; } .score-chip { padding: 7px 9px; } } /* Larger coaching and review copy */ .expression-coaching { margin-top: 24px; text-align: left; }.coaching-heading b { font-size: 17px; }.coaching-heading small { font-size: 12px; } .upgrade-list { gap: 12px; }.upgrade-card { padding: 16px; }.upgrade-card .upgrade-from { font-size: 12px; line-height: 1.5; }.upgrade-card .upgrade-to { font-size: 17px; }.upgrade-notes { gap: 10px; }.upgrade-notes span { padding: 11px; font-size: 12px; line-height: 1.55; }.upgrade-notes b { margin-bottom: 4px; font-size: 12px; } .shadowing-practice { margin-top: 16px; padding: 18px; }.shadowing-head { font-size: 11px; }.shadowing-title { font-size: 14px; }.shadowing-sentence { font-size: 22px; line-height: 1.5; }.shadowing-translation { font-size: 12px; line-height: 1.55; }.shadowing-focus, .shadowing-result { font-size: 12px; line-height: 1.55; }.shadowing-controls .primary-button, .shadowing-controls .secondary-button { font-size: 13px; } .review-context { display: block; margin-top: 12px; color: #81938f; font-size: 11px; }.history-review { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }.history-detail { font-size: 13px; } .recognized-copy { margin: 10px 0; padding: 9px; border-radius: 8px; color: #496963; background: rgba(255,255,255,.75); font-size: 12px; line-height: 1.55; }.result-subhead { display: block; margin-top: 12px; font-size: 13px; }.progress-up { color: #16735f; }.progress-down { color: #bd584b; } .capability-note { margin: 7px 0 0; color: #718681; font-size: 11px; line-height: 1.5; } /* Language-first curriculum */ .curriculum-catalog { display: grid; gap: 3px; } .lesson-context { display: grid; gap: 4px; width: min(420px, 88%); margin: 14px auto 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #d7ebe5; background: rgba(255,255,255,.07); text-align: left; } .lesson-context span { color: #81d9c5; font-size: 10px; font-weight: 800; letter-spacing: .06em; }.lesson-context b { font-size: 14px; }.lesson-context small { color: #9dbdb6; font-size: 11px; line-height: 1.5; } .lesson-context-score { width: max-content; margin-top: 3px; padding: 4px 7px; border-radius: 999px; color: #ffe3a0; background: rgba(255,227,160,.1); font-size: 9px; font-style: normal; font-weight: 800; } .curriculum-language-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 18px 0 12px; }.curriculum-language-tabs button { min-height: 40px; border: 1px solid #d4e1db; border-radius: 10px; color: #58716c; background: white; font-weight: 750; cursor: pointer; }.curriculum-language-tabs button.active { border-color: var(--mint); color: var(--teal-800); background: var(--mint-soft); } .lesson-search { position: relative; display: block; margin-top: 14px; }.lesson-search span { position: absolute; left: 13px; top: 50%; color: #69807b; font-size: 18px; transform: translateY(-52%); }.lesson-search input { width: 100%; height: 44px; padding: 0 14px 0 38px; border: 1px solid #d4e2dc; border-radius: 11px; color: var(--teal-900); background: white; font-size: 13px; outline: none; }.lesson-search input:focus { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(91,203,177,.13); } .lesson-list { display: grid; gap: 7px; max-height: min(42vh, 390px); margin: 10px 0 20px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; }.lesson-list-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 7px 2px; background: var(--paper); }.lesson-list-head small { color: #718681; }.lesson-empty { padding: 28px 14px; border: 1px dashed #cadbd4; border-radius: 11px; color: #758984; text-align: center; font-size: 12px; } .lesson-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; min-height: 64px; padding: 7px; border: 1px solid #dce6e1; border-radius: 11px; color: var(--teal-900); background: #fbfcf9; text-align: left; }.lesson-select { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 3px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }.lesson-select > span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: #39786c; background: #e3f3ed; font-weight: 800; }.lesson-select > div { display: grid; gap: 3px; min-width: 0; }.lesson-item b { font-size: 13px; }.lesson-item small { color: #70827e; font-size: 11px; line-height: 1.4; }.lesson-item.selected { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(91,203,177,.12); }.lesson-progress-meta { display: flex !important; flex-flow: row wrap; gap: 4px !important; margin-top: 3px; }.lesson-progress-meta span { padding: 3px 6px; border-radius: 999px; color: #58736d; background: #edf3f0; font-size: 9px; font-weight: 700; }.lesson-progress-meta .lesson-clear { color: #176c5c; background: #dff3eb; }.lesson-progress-meta .lesson-score { color: #755512; background: #fff0c8; }.lesson-retry { min-height: 34px; padding: 7px 9px; border: 1px solid #bcded3; border-radius: 9px; color: #176c5c; background: #f1faf6; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }.lesson-retry:hover { border-color: #63bea7; background: #e2f5ee; } .account-settings { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 11px; border: 1px solid #dce6e1; border-radius: 12px; background: #f8faf7; }.account-settings > div { display: grid; gap: 2px; min-width: 0; flex: 1; }.account-settings small { overflow: hidden; color: #748783; text-overflow: ellipsis; }.account-settings button { min-height: 34px; } /* Firebase login */ .login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 20%, var(--mint-soft) 0, transparent 35%), var(--cream); }.login-card { width: min(440px,100%); padding: 42px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,254,251,.93); box-shadow: 0 24px 70px rgba(11,55,52,.12); }.login-card .brand-symbol { margin-bottom: 28px; }.login-card h1 { margin: 10px 0; font: 600 32px/1.35 Georgia,"Noto Serif KR","AppleMyungjo","Batang",serif; color: var(--teal-950); }.login-card > p:not(.eyebrow):not(.login-error) { color: var(--ink-2); font-size: 14px; line-height: 1.7; }.google-signin { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 25px; border: 1px solid var(--line); border-radius: 11px; color: #233e39; background: var(--paper); cursor: pointer; }.google-mark { color: #4285f4; font: 800 19px Arial; }.login-error { margin: 12px 0 0; padding: 10px; border-radius: 8px; color: var(--error); background: var(--coral-soft); font-size: 12px; line-height: 1.5; }.login-privacy { display: block; margin-top: 18px; color: #80918d; font-size: 11px; line-height: 1.55; } @media (max-width: 600px) { .lesson-context { width: min(330px, 92%); margin: 10px auto 13px; } .goal-modal { width: 100%; min-height: 100dvh; border-radius: 0; overflow-y: auto; } .curriculum-language-tabs { position: sticky; top: 0; z-index: 2; padding: 6px 0; background: white; } .login-page { padding: 12px; }.login-card { padding: 28px 22px; } } /* Focused practice workspace: evaluation and review open only after the session. */ .workspace { grid-template-columns: minmax(0,1fr); } .conversation-panel { width: 100%; max-width: 1160px; margin: 0 auto; } .insight-panel, .mobile-insights-toggle { display: none !important; } .score-overview { position: relative; overflow: hidden; } @media (max-width: 600px) { .quick-character-grid { grid-template-columns: 1fr; max-height: 68vh; } .character-modal { min-height: 100dvh; width: 100%; border-radius: 0; overflow-y: auto; } .assessment-loader { grid-template-columns: 38px minmax(0,1fr); padding: 11px; } .assessment-orb { width: 36px; height: 36px; } .assessment-orb i:nth-child(1) { left: 5px; top: 14px; }.assessment-orb i:nth-child(2) { left: 13px; top: 14px; }.assessment-orb i:nth-child(3) { left: 21px; top: 14px; } .assessment-steps { gap: 4px; }.assessment-steps > span { grid-template-columns: 18px minmax(0,1fr); gap: 4px; }.assessment-steps b { width: 18px; height: 18px; }.assessment-steps em { font-size: 8px; } } /* Attachment workflow: two calm, explicit inputs with a visible selected-file state. */ .upload-modal { width: min(820px,100%); } .upload-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .upload-source-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #dce6e1; border-radius: 14px; background: #fff; } .upload-step { display: flex; align-items: center; justify-content: space-between; color: #244e47; font-size: 13px; font-weight: 800; } .upload-step small { padding: 3px 7px; border-radius: 999px; color: #718681; background: #edf3f0; font-size: 10px; } .upload-modal .drop-zone { min-height: 142px; padding: 16px 12px; text-align: center; } .upload-modal .drop-zone.has-file { border-style: solid; border-color: #70c5b0; background: #f1faf6; } .upload-modal .drop-zone b { max-width: 100%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .upload-modal .drop-zone small { font-size: 11px; line-height: 1.45; } .upload-modal .brief-label { gap: 8px; font-size: 13px; } .upload-modal .brief-label textarea { min-height: 142px; padding: 13px; font-size: 13px; line-height: 1.55; } .upload-helper, .upload-privacy { margin: 0; color: #748783; font-size: 11px; line-height: 1.55; } .upload-privacy { margin: 12px 2px 8px; } .selected-file { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; background: #e9f7f1; } .selected-file[hidden] { display: none; } .selected-file > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #176c5c; background: #d3eee5; } .selected-file svg { width: 15px; }.selected-file > div { min-width: 0; display: grid; gap: 2px; } .selected-file b, .selected-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.selected-file b { font-size: 12px; }.selected-file small { color: #6c827d; font-size: 10px; } .selected-file button { min-height: 32px; border: 1px solid #c5ddd5; border-radius: 8px; padding: 0 9px; color: #456b64; background: white; font-size: 11px; cursor: pointer; } .detected-requirements { margin: 12px 0; padding: 14px; }.detected-requirements > b { font-size: 12px; }.detected-requirements span { font-size: 11px; }.detected-requirements p { font-size: 12px; }.detected-requirements ul { gap: 5px; font-size: 11px; } /* Archive cards keep the description from stealing the title column. */ .history-modal { width: min(900px,100%); }.history-list { max-height: min(68vh,720px); overflow-y: auto; padding-right: 3px; } .history-item { grid-template-columns: 64px minmax(0,1fr) minmax(130px,190px); gap: 16px; min-height: 92px; padding: 14px 16px; } .history-date { width: 58px; height: 58px; }.history-date b { font-size: 21px; }.history-date small { font-size: 10px; } .history-main { align-self: center; gap: 6px; }.history-main b { font-size: 14px; line-height: 1.35; }.history-main small { overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; white-space: normal; } .history-score { min-width: 0; align-self: center; justify-items: end; text-align: right; }.history-score b { max-width: 100%; overflow-wrap: anywhere; font-size: 17px; line-height: 1.25; }.history-score small { display: -webkit-box; max-width: 190px; overflow: hidden; font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .history-back { font-size: 12px; }.history-detail-head small { font-size: 11px; }.history-turn b { font-size: 10px; }.history-turn p { font-size: 13px; } /* Readability floor for live controls and common dialogs. */ .eyebrow { font-size: 11px; }.backend-status { font-size: 11px; }.edit-goal { font-size: 12px; } .live-pill, .caption-toggle { font-size: 11px; }.exam-clock small, .conversation-flow small { font-size: 10px; }.exam-clock span, .conversation-flow span { font-size: 9px; } .coach-name small { font-size: 9px; }.transcript-head b { font-size: 12px; }.transcript-head small, .pace { font-size: 10px; }.micro-tip { font-size: 11px; } .round-control { font-size: 10px; }.end-call { font-size: 12px; }.primary-button, .secondary-button { font-size: 12px; } .settings-status b, .settings-field > span, .data-location b { font-size: 12px; }.settings-status small, .settings-field small, .data-location small { font-size: 10px; } @media (max-width: 600px) { .upload-modal, .history-modal { width: 100%; min-height: 100dvh; border-radius: 0; } .upload-input-grid { grid-template-columns: 1fr; }.upload-source-card { padding: 12px; } .upload-modal .drop-zone, .upload-modal .brief-label textarea { min-height: 116px; } .history-list { max-height: none; } .history-item { grid-template-columns: 52px minmax(0,1fr); gap: 10px; min-height: 96px; padding: 12px; } .history-date { width: 48px; height: 48px; }.history-score { grid-column: 2; justify-items: start; text-align: left; } .history-score b { font-size: 13px; }.history-score small { max-width: none; font-size: 10px; } .history-main b { font-size: 13px; }.history-main small { font-size: 11px; } .next-action-guide b { font-size: 12px; }.next-action-guide small { font-size: 10px; } } /* The start screen confirms one current setup; detailed choices live in the modal. */ .current-practice-summary { width: min(620px,94%); padding: 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; color: white; background: rgba(255,255,255,.08); box-shadow: 0 14px 34px rgba(0,0,0,.15); text-align: left; } .current-practice-summary header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; } .current-practice-summary header small { color: #82ddca; font-size: 11px; font-weight: 850; letter-spacing: .1em; } .current-practice-summary header button { min-height: 34px; border: 1px solid rgba(126,221,202,.45); border-radius: 9px; padding: 0 12px; color: #c9f4e9; background: rgba(100,210,182,.1); font-size: 12px; font-weight: 800; cursor: pointer; } .current-practice-main { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; } .current-practice-main > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #092f2c; background: var(--mint); font-size: 21px; } .current-practice-main > div { min-width: 0; display: grid; gap: 4px; }.current-practice-main b { overflow: hidden; font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .current-practice-main small { color: #a9c9c2; font-size: 12px; }.session-start .current-practice-main p { max-width: none; margin: 2px 0 0; color: #d5e7e3; font-size: 12px; line-height: 1.5; } .session-start #lessonContext, .session-start #sessionRoadmap, .session-start #practiceKindSwitch { display: none !important; } .modal-phrase-kit { margin: 14px 0; padding: 13px; border: 1px solid #d5e5de; border-radius: 12px; background: #f5faf7; }.modal-phrase-kit[hidden] { display: none; } .modal-phrase-kit header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }.modal-phrase-kit header b { font-size: 14px; }.modal-phrase-kit header small { color: #718681; font-size: 12px; } .modal-phrase-flow { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #e6f4ee; color: #315f56; font-size: 12px; font-weight: 700; line-height: 1.55; } .modal-phrase-kit > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.modal-phrase-kit article { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #dce8e2; border-radius: 9px; background: white; } .modal-phrase-kit article b { overflow-wrap: anywhere; color: #204e46; font-size: 14px; }.modal-phrase-kit article small { color: #748783; font-size: 12px; line-height: 1.45; } .phrase-hint-control .hint-bulb { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d3deda; border-radius: 50%; background: #fafbf7; font-size: 16px; transition: .2s; }.phrase-hint-control.active .hint-bulb { border-color: #e0b653; background: #fff0c8; transform: translateY(-2px); } @media (max-width: 600px) { .session-start { justify-content: flex-start; gap: 12px; padding: 20px 15px; }.session-start .start-icon { width: 48px; height: 48px; } .current-practice-summary { width: 100%; padding: 13px; }.current-practice-main b { font-size: 14px; white-space: normal; }.current-practice-main small, .session-start .current-practice-main p { font-size: 11px; } .modal-phrase-kit > div { grid-template-columns: 1fr; }.modal-phrase-kit header { align-items: flex-start; flex-direction: column; } #videoButton { display: none; } } /* -------------------------------------------------------------------------- LingoFlow brand compliance layer · Brand Guidelines v1.0 Focus = Deep Forest, action = Live Mint, feedback = Coach Coral. -------------------------------------------------------------------------- */ body { color: var(--ink); background: var(--cream); line-height: 1.5; } .sidebar { background: var(--teal-950); } .brand { gap: 12px; letter-spacing: -.55px; } .brand-symbol { width: 36px; height: 36px; } .topbar { background: var(--paper); border-color: var(--line); } .conversation-panel { background: color-mix(in srgb, var(--paper) 72%, var(--line)); } .call-stage { border-radius: var(--radius); background: radial-gradient(circle at 50% 22%, #15514d 0, var(--teal-950) 62%); } .call-stage:before { content: ""; position: absolute; width: 430px; height: 430px; right: -210px; top: -200px; z-index: 0; border: 48px solid rgba(255,255,255,.035); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.018); pointer-events: none; } .session-start { background: rgba(11,55,52,.9); } .session-start .start-icon { color: var(--teal-950); background: var(--mint-bright); } .session-start .primary-button { color: var(--teal-950); background: var(--mint-bright); box-shadow: 0 10px 26px rgba(89,206,175,.2); } .session-start .primary-button:hover { background: #86e6cc; } .transcript-card, .modal, .history-item, .vocab-card, .goal-option, .upload-source-card { background: var(--paper); border-color: var(--line); } .transcript-card { border-radius: var(--radius-card); } .modal { border: 1px solid var(--line); border-radius: var(--radius); } .modal-backdrop { background: rgba(11,32,29,.66); } .metric-card, .analysis-empty, .adaptive-card, .grammar-card, .content-feedback { border-radius: var(--radius-card); } .metric-card.active, .goal-option.selected, .character-option.selected, .lesson-item.selected { border-color: var(--mint-dark); background: #f0faf6; box-shadow: inset 0 0 0 1px var(--mint-dark); } .primary-button { color: white; background: var(--teal-950); box-shadow: 0 8px 20px rgba(11,55,52,.16); transition: transform var(--motion-standard), background var(--motion-standard), box-shadow var(--motion-standard); } .primary-button:hover { background: var(--teal-800); transform: translateY(-1px); box-shadow: 0 11px 24px rgba(11,55,52,.2); } .secondary-button, .ghost-button, .language-select { border-color: var(--line); background: var(--paper); } .end-call { background: var(--coral); box-shadow: 0 8px 20px rgba(231,110,90,.24); transition: transform var(--motion-standard), box-shadow var(--motion-standard); } .end-call:hover { box-shadow: 0 11px 25px rgba(231,110,90,.32); } .eyebrow { color: var(--teal-700); letter-spacing: .16em; } .eyebrow span, .live-pill span { background: var(--mint); } .coral-text { color: #b95445; }.coral-text span, .pulse-dot { background: var(--coral); } .session-title-row h1, .insight-head h2, .modal h2, .login-card h1, .offline-page h1 { font-family: Georgia,"Noto Serif KR","AppleMyungjo","Batang",serif; line-height: 1.34; letter-spacing: -.035em; word-break: keep-all; } .coach-caption p, .live-transcript, .grammar-card p, .upgrade-card .upgrade-to, .current-shadowing p { font-family: Georgia,"Noto Serif KR","AppleMyungjo","Batang",serif; line-height: 1.5; } .score-gauge .score-progress, .metric-card em { stroke: var(--mint); background: var(--mint); } .backend-status.live { color: var(--success); background: var(--mint-soft); }.backend-status.live span { background: var(--success); } .backend-status.error span, .progress-down { background: var(--error); color: var(--error); } .settings-status > span { background: var(--warning); } .nav-item, .quick-item, .primary-button, .secondary-button, .ghost-button, .language-select, .metric-card, .goal-option, .history-item, .character-option, .lesson-item { transition-duration: 220ms; transition-timing-function: cubic-bezier(.2,.8,.2,1); } :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--mint-bright); outline-offset: 3px; } .call-stage :where(button, [tabindex]):focus-visible, .sidebar :where(button, a):focus-visible { outline-color: white; box-shadow: 0 0 0 6px rgba(114,223,194,.25); } .login-page, .offline-page { background: radial-gradient(circle at 18% 16%, var(--mint-soft) 0, transparent 38%), var(--cream); } .login-card { border-color: var(--line); border-radius: var(--radius); background: rgba(255,254,251,.96); } .login-card .brand-symbol, .offline-page .brand-symbol { width: 64px; height: 64px; } .offline-page .brand-symbol { margin: 0 auto 20px; } .profile-avatar { color: var(--teal-950); background: var(--mint-bright); } .summary-check { background: var(--success); } .micro-tip svg { color: var(--coral); }.micro-tip b { color: #b95445; } @media (max-width: 600px) { .topbar { background: rgba(255,254,251,.95); } .call-stage { border-radius: 20px; } .insight-panel { border-radius: var(--radius); background: var(--paper); } .call-controls { border-color: var(--line); background: rgba(255,254,251,.96); } } /* Branded home shell and metadata asset presentation */ .brand { min-height: 40px; padding: 0 8px 30px; } .brand-logo { display: block; width: 158px; height: auto; } .mobile-brand { display: none; } .auth-brand-logo { display: block; width: 176px; height: auto; margin-bottom: 18px; } .offline-page .auth-brand-logo { width: 190px; margin: 0 auto 24px; } .session-title-row h1 { font-family: Arial,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-weight: 780; letter-spacing: -.045em; } .current-practice-summary { border-color: rgba(114,223,194,.32); background: rgba(255,255,255,.075); } .current-practice-summary header button { border-color: rgba(114,223,194,.52); background: rgba(114,223,194,.08); } @media (max-width: 600px) { .topbar { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 0 12px; min-height: 126px; padding: 14px 16px 16px; } .topbar > div:first-child { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 0 10px; } .mobile-menu { float: none; width: 42px; height: 42px; margin: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--teal-950); background: var(--mint-soft); font-size: 20px; } .mobile-brand { display: block; width: 118px; } .mobile-brand img { display: block; width: 100%; height: auto; } .topbar .eyebrow { display: none; } .session-title-row { grid-column: 1 / -1; margin-top: 12px; } .session-title-row h1 { max-width: none; font-size: 20px; line-height: 1.32; letter-spacing: -.04em; } .top-actions { position: static; grid-column: 2; align-self: start; } .language-select { width: 62px; height: 42px; justify-content: center; border-radius: 12px; } .conversation-panel { padding-top: 14px; } } @media (max-width: 400px) { .topbar { padding-left: 14px; padding-right: 14px; } .mobile-menu { margin: 0; } .top-actions { position: static; } .session-title-row h1 { max-width: none; font-size: 20px; } } /* Session archive: fixed information hierarchy and collision-safe summaries */ .history-modal { width: min(980px,100%); } .history-modal > h2 { font-family: Arial,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-weight: 780; letter-spacing: -.045em; } .history-list { gap: 10px; padding: 2px 6px 2px 0; } .history-item { grid-template-columns: 64px minmax(0,1fr) minmax(230px,300px); align-items: stretch; gap: 18px; min-height: 116px; padding: 16px 18px; border-radius: var(--radius-card); } .history-date { align-self: center; } .history-main { align-content: center; gap: 7px; } .history-kind { justify-self: start; padding: 4px 8px; border-radius: 999px; color: var(--teal-700); background: var(--mint-soft); font-size: 9px; font-weight: 800; letter-spacing: .06em; } .history-main b { display:-webkit-box; overflow:hidden; font-size:15px; line-height:1.4; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .history-main small { color: var(--ink-2); font-size: 11px; } .history-score { min-width: 0; align-self: stretch; align-content: center; justify-items: start; gap: 4px; padding-left: 18px; border-left: 1px solid var(--line); text-align: left; } .history-score .history-report-kicker { color: var(--coral); font-size: 8px; font-weight: 850; letter-spacing: .14em; } .history-score b { font-family: Arial,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size: 14px; font-weight: 800; line-height: 1.35; } .history-score small { display: -webkit-box; max-width: 100%; overflow: hidden; color: var(--ink-2); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .history-open { margin-top: 2px; color: var(--teal-700); font-size: 10px; font-weight: 800; } .history-item:hover .history-open { color: var(--mint-dark); } @media (max-width: 600px) { .history-item { grid-template-columns: 52px minmax(0,1fr); gap: 10px 12px; min-height: 0; padding: 14px; } .history-main { min-height: 58px; } .history-score { grid-column: 1 / -1; gap: 3px; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; } .history-score small { max-width: none; } } .plan-settings { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:11px; margin:16px 0 12px; padding:12px; border:1px solid #bfe0d5; border-radius:13px; color:var(--ink); background:var(--mint-soft); text-decoration:none; } .plan-settings > span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:var(--teal-950); background:var(--mint-bright); font-size:18px; font-weight:900; } .plan-settings > div { min-width:0; display:grid; gap:2px; } .plan-settings small { color:var(--teal-700); font-size:9px; font-weight:800; } .plan-settings b { font-size:12px; } .plan-settings strong { color:var(--teal-700); font-size:10px; } @media (max-width:600px) { .plan-settings { grid-template-columns:40px minmax(0,1fr); }.plan-settings strong { grid-column:2; } } /* Primary practice modules */ .home-module-grid { width: min(660px, 98%); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 3px 0 2px; } .home-module-grid > button { position: relative; min-width: 0; min-height: 116px; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto 1fr; align-content: center; gap: 6px 11px; padding: 17px; border: 1px solid rgba(114,223,194,.3); border-radius: 16px; color: white; background: rgba(255,255,255,.065); text-align: left; cursor: pointer; transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms, background 220ms; } .home-module-grid > button:hover { transform: translateY(-2px); border-color: rgba(114,223,194,.7); background: rgba(114,223,194,.11); } .home-module-grid > button.selected { border-color: var(--mint-bright); background: rgba(114,223,194,.14); box-shadow: inset 0 0 0 1px rgba(114,223,194,.22); } .home-module-grid > button > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--teal-950); background: var(--mint-bright); } .home-module-grid svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; } .home-module-grid > button b { align-self: end; font-size: 15px; line-height: 1.25; } .home-module-grid > button small { align-self: start; color: #accbc5; font-size: 10px; line-height: 1.5; word-break: keep-all; } .home-module-grid > button i { position: absolute; top: 13px; right: 13px; color: #79d8c4; font-size: 9px; font-style: normal; font-weight: 850; } .selected-module-area { width: min(760px,98%); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: stretch; } .selected-module-area[hidden] { display: none; } .selected-module-area .current-practice-summary { width: 100%; min-width: 0; } .selected-module-actions { min-width: 190px; display: grid; grid-template-rows: 1fr auto; gap: 9px; } .selected-module-actions .start-character { width: 100%; min-width: 0; margin: 0; } .selected-module-actions .primary-button { width: 100%; min-width: 0; min-height: 48px; } .goal-support-actions { display: flex; margin: 16px 0 10px; } .goal-support-actions .secondary-button { width: 100%; } /* Company-grounded interview setup */ .interview-modal { width: min(880px,100%); } .interview-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .interview-field { min-width: 0; display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 800; } .interview-field > span { display: flex; align-items: center; gap: 7px; } .interview-field > span b { color: var(--coral); font-size: 9px; letter-spacing: .04em; } .interview-field > span small { color: var(--muted); font-size: 9px; font-weight: 700; } .interview-field input, .interview-field textarea, .interview-field select { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; color: var(--ink); background: var(--paper); font: inherit; font-weight: 600; outline: none; } .interview-field input, .interview-field select { min-height: 44px; } .interview-field textarea { min-height: 160px; padding-top: 12px; resize: vertical; line-height: 1.6; } .interview-field :is(input,textarea,select):focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(89,206,175,.14); } .interview-company-url, .interview-rnr, .interview-option-grid, .interview-form > .interview-field:last-child { grid-column: 1 / -1; } .interview-rnr { position: relative; }.interview-rnr > small { position: absolute; right: 10px; bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }.interview-rnr > small em { font-style: normal; } .interview-option-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } .interview-submit { width: 100%; min-height: 48px; font-size: 12px; } .interview-analysis-preview { display: grid; gap: 13px; margin: 19px 0 15px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); } .interview-analysis-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .interview-analysis-preview > header span { padding: 6px 9px; border-radius: 999px; color: var(--teal-800); background: var(--mint-soft); font-size: 9px; font-weight: 900; letter-spacing: .04em; } .interview-analysis-preview > header small { color: var(--muted); font-size: 9px; } .interview-preview-heading { display: flex; align-items: center; gap: 11px; } .interview-company-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--teal-950); background: var(--mint); font: 900 13px Arial,sans-serif; } .interview-preview-heading > div { min-width: 0; display: grid; gap: 3px; }.interview-preview-heading b { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.interview-preview-heading small { color: var(--muted); font-size: 10px; } .interview-analysis-preview > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; } .interview-preview-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .interview-preview-columns section { min-width: 0; padding: 14px; border-radius: 12px; background: #f2f7f3; } .interview-preview-columns section > b { font-size: 11px; }.interview-preview-columns ul { margin: 9px 0 0; padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.6; } #interviewCompetencyPreview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }#interviewCompetencyPreview span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--teal-800); background: white; font-size: 9px; font-weight: 800; } .interview-source-details { padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }.interview-source-details summary { padding: 12px 24px 12px 0; font-size: 10px; font-weight: 850; cursor: pointer; }.interview-source-details a { display: block; overflow: hidden; margin: 0 0 9px; color: var(--teal-700); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .interview-warning { padding: 11px 13px; border-radius: 11px; color: #7b4c30; background: #fff1e7; font-size: 10px; line-height: 1.55; } .interview-analysis-preview .interview-approval { color: var(--teal-800); font-weight: 750; } .interview-source-row { display: grid; gap: 3px; margin: 0 0 11px; }.interview-source-row b { font-size: 10px; }.interview-source-row small { overflow-wrap: anywhere; color: var(--teal-700); font-size: 9px; }.interview-source-row p { margin: 2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; } .interview-report-headline { margin: 0 0 13px; color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.6; } .interview-report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .interview-report-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); } .interview-report-card header { display: flex; justify-content: space-between; gap: 10px; }.interview-report-card header b { font-size: 11px; }.interview-report-card header span { color: var(--teal-700); font-size: 13px; font-weight: 900; } .interview-report-card p { display: grid; gap: 2px; margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.interview-report-card p strong { color: var(--ink); font-size: 8px; letter-spacing: .04em; }.interview-report-card small { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--teal-700); font-size: 9px; line-height: 1.5; } .interview-report-subhead { margin: 17px 0 8px; }.interview-report-subhead b { font-size: 11px; } .interview-risk-list { display: grid; gap: 7px; }.interview-risk-card { padding: 12px; border-left: 3px solid var(--coral); border-radius: 8px; background: #fff5ed; }.interview-risk-card b { font-size: 10px; }.interview-risk-card p { margin: 6px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.interview-risk-card small { color: #8a4b3e; font-size: 9px; line-height: 1.5; } .interview-candidate-questions { margin: 0; padding-left: 20px; color: var(--muted); font-size: 10px; line-height: 1.65; } @media (max-width: 760px) { .home-module-grid { grid-template-columns: 1fr; gap: 7px; } .home-module-grid > button { min-height: 76px; padding: 12px 14px; } .selected-module-area { grid-template-columns: 1fr; } .selected-module-actions { grid-template-columns: 1fr auto; grid-template-rows: auto; min-width: 0; } .selected-module-actions .primary-button { min-width: 150px; } .interview-option-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .session-start { padding-left: 12px; padding-right: 12px; } .home-module-grid, .selected-module-area { width: 100%; } .selected-module-actions { grid-template-columns: 1fr; } .interview-form, .interview-option-grid, .interview-preview-columns { grid-template-columns: 1fr; } .interview-field, .interview-company-url, .interview-rnr, .interview-option-grid, .interview-form > .interview-field:last-child { grid-column: 1; } .interview-report-grid { grid-template-columns: 1fr; } } /* 한도 도달 안내: 연습 흐름을 막는 confirm() 대신 비차단 배너로 알린다. */ .plan-limit-banner { position: fixed; left: 50%; bottom: 25px; z-index: 120; display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px)); transform: translate(-50%, 0); padding: 14px 16px; border: 1px solid var(--mint); border-radius: 16px; color: var(--teal-950); background: white; box-shadow: var(--shadow); } .plan-limit-banner[hidden] { display: none; } .plan-limit-banner > div { display: grid; gap: 3px; min-width: 0; } .plan-limit-banner b { font-size: 12px; } .plan-limit-banner small { color: var(--ink-2); font-size: 10px; line-height: 1.5; } .plan-limit-action { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; color: white; background: var(--teal-950); text-decoration: none; font-size: 11px; font-weight: 800; } .plan-limit-close { flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--ink-2); background: transparent; font-size: 12px; cursor: pointer; } .plan-limit-close:hover { background: var(--mint-soft); } @media (max-width: 620px) { .plan-limit-banner { flex-wrap: wrap; bottom: 14px; } .plan-limit-action { width: 100%; justify-content: center; } } /* ---------- 면접 준비 3단계 위저드 ---------- */ .wizard-steps { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; } .wizard-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); background: var(--paper); font-size: 11px; font-weight: 800; } .wizard-steps li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ink-2); background: white; font-size: 10px; } .wizard-steps li.active { border-color: var(--teal-950); color: white; background: var(--teal-950); } .wizard-steps li.active span { color: var(--teal-950); background: var(--mint-bright); } .wizard-steps li.done { border-color: var(--mint); color: var(--teal-700); background: var(--mint-soft); } .wizard-panel[hidden] { display: none !important; } .wizard-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; } .source-block { margin: 0 0 14px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); } .source-block legend { padding: 0 6px; color: var(--ink); font-size: 12px; font-weight: 900; } .source-block legend b { margin-left: 5px; color: var(--coral); font-size: 10px; } .source-block legend small { margin-left: 5px; color: var(--ink-2); font-size: 10px; font-weight: 700; } .source-file { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 9px 11px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-2); font-size: 11px; cursor: pointer; } .source-file:hover { border-color: var(--mint); background: var(--mint-soft); } .source-file input { flex-shrink: 0; max-width: 190px; font-size: 11px; } .source-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rnr-fallback { margin: 0 0 14px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); } .rnr-fallback summary { padding: 12px 0; color: var(--teal-700); font-size: 12px; font-weight: 800; cursor: pointer; } .rnr-fallback .interview-field { margin-bottom: 12px; } .progress-stages { display: grid; gap: 10px; margin: 24px 0; padding: 0; list-style: none; } .progress-stages li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); } .progress-stages li b { font-size: 13px; } .progress-stages li small { grid-column: 2; color: var(--ink-2); font-size: 11px; } .progress-stages li i { width: 18px; height: 18px; border: 2px solid var(--line); border-radius: 50%; } .progress-stages li.active { border-color: var(--mint); background: var(--mint-soft); } .progress-stages li.active i { border-color: var(--mint); border-top-color: transparent; animation: spin 800ms linear infinite; } .progress-stages li.done i { border-color: var(--success); background: var(--success); box-shadow: inset 0 0 0 2px white; } .progress-stages li.skipped { opacity: .55; } .progress-stages li.failed { border-color: var(--error); background: var(--coral-soft); } .progress-stages li.failed i { border-color: var(--error); background: var(--error); } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .progress-stages li.active i { animation: none; } } .interview-error { margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--error); border-radius: 12px; color: var(--error); background: var(--coral-soft); font-size: 12px; } .grounding-badges { display: flex; gap: 6px; margin-left: auto; } .grounding-badges span { padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; } .grounding-badges .verified { color: var(--teal-950); background: var(--mint-bright); } .grounding-badges .partial { color: #7a5312; background: #fdf4e3; } .grounding-badges .unverified { color: var(--ink-2); background: #eef1ef; } .interviewer-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; margin: 18px 0 6px; } .interviewer-card { display: flex; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: white; text-align: left; cursor: pointer; } .interviewer-card:hover { border-color: var(--mint); } .interviewer-card[aria-checked="true"] { border-color: var(--teal-950); box-shadow: 0 0 0 1px var(--teal-950) inset; background: var(--mint-soft); } .interviewer-card b { font-size: 13px; line-height: 1.4; } .interviewer-card p { margin: 0; color: var(--ink-2); font-size: 11px; line-height: 1.6; } .interviewer-card ul { display: grid; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; } .interviewer-card li { padding-left: 13px; position: relative; color: var(--ink-2); font-size: 10px; } .interviewer-card li:before { content: "·"; position: absolute; left: 4px; color: var(--teal-700); font-weight: 900; } .interviewer-card .recommended { align-self: flex-start; padding: 3px 8px; border-radius: 999px; color: var(--teal-950); background: var(--mint-bright); font-size: 9px; font-weight: 900; } .interviewer-card .inferred { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 10px; } @media (max-width: 620px) { .wizard-steps li { font-size: 10px; padding: 8px; } .wizard-actions { flex-direction: column-reverse; } .wizard-actions button { width: 100%; } } /* 회화는 시험·면접의 보조 수단이므로 주 모듈 아래 한 줄로 내린다. */ .home-module-secondary { width: min(660px, 98%); margin: 10px 0 2px; } .home-module-secondary > button { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 12px 16px; border: 1px dashed rgba(114,223,194,.34); border-radius: 13px; color: rgba(255,255,255,.86); background: transparent; text-align: left; cursor: pointer; transition: border-color 220ms, background 220ms; } .home-module-secondary > button:hover { border-color: rgba(114,223,194,.66); background: rgba(114,223,194,.08); } .home-module-secondary > button.selected { border-style: solid; border-color: var(--mint-bright); background: rgba(114,223,194,.12); } .home-module-secondary svg { grid-row: span 2; width: 16px; height: 16px; color: var(--mint-bright); } .home-module-secondary b { grid-column: 2; font-size: 12px; } .home-module-secondary small { grid-column: 2; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.5; } @media (max-width: 700px) { .home-module-grid { grid-template-columns: 1fr; } }