:root{--bg: #f8f7f3;--surface: #fffdf9;--surface-quiet: #f2f0e9;--ink: #202124;--ink-soft: #5f615f;--ink-mute: #8a8b86;--primary: #3f7770;--primary-dark: #335f5a;--primary-soft: #e7efed;--accent: #e8dcc8;--ok: #5b9b78;--ok-soft: #f1f7f3;--ok-line: #d5e7db;--bad: #c96c6c;--bad-soft: #fbf1f1;--bad-line: #eedada;--line: #e6e2d8;--radius: 8px;--shadow: 0 1px 2px rgba(32, 33, 36, .04)}@font-face{font-family:HANU Display;src:local("华文新魏"),local("STXinwei"),local("STXINWEI");unicode-range:U+0020-02AF,U+2000-206F,U+3000-303F,U+4E00-9FFF,U+FF00-FFEF}.article-item__title,.reader__title,.reader__body,.target-word,.word-chip,.word-card__surface,.word-row__korean,.answer-input,.feedback__word,.feedback__mono,.retry-row__korean{font-family:Malgun Gothic,Apple SD Gothic Neo,Noto Sans KR,HANU Display,system-ui,sans-serif}.brand__tagline,.menu__name,.hint,.recommend__meta,.tile__desc,.field__label,.field__hint,.form-error,.form-notice,.segmented__item,.word-row__chinese,.word-row__pos,.chip,.article-item__meta,.back-link,.reader__meta,.word-card__row,.reader__translation-line:before,.trainer__hint,.feedback__note,.retry-row__chinese,.stat__label,.stat__note,.trail__label,.record-row__time{font-family:Segoe UI,Microsoft YaHei,Malgun Gothic,Noto Sans KR,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:HANU Display,Malgun Gothic,Apple SD Gothic Neo,Noto Sans KR,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;letter-spacing:0;-webkit-font-smoothing:antialiased}h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit;text-decoration:none}button{font:inherit;letter-spacing:0}.topbar{position:sticky;top:0;z-index:20;background:#f8f7f3e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.topbar__inner{display:flex;align-items:center;gap:28px;max-width:1040px;min-height:64px;margin:0 auto;padding:0 24px}.brand{display:flex;flex-direction:column;flex:none}.brand__name{font-size:16px;font-weight:600;line-height:1.2}.brand__name--auth{color:var(--primary)}.brand__tagline{font-size:10px;color:var(--ink-mute);line-height:1.4}.nav{display:flex;flex:1;gap:4px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav__link{flex:none;padding:6px 12px;border-radius:var(--radius);color:var(--ink-soft);font-size:14px;transition:background .15s ease,color .15s ease}.nav__link:hover{background:var(--surface-quiet);color:var(--ink)}.nav__link--active{background:var(--primary-soft);color:var(--primary-dark);font-weight:500}.topbar__user{position:relative;flex:none}.avatar{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--primary-dark);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s ease}.avatar:hover{border-color:var(--primary)}.menu{position:absolute;top:44px;right:0;min-width:160px;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 6px 20px #20212414}.menu__name{padding:6px 10px 8px;color:var(--ink-mute);font-size:12px}.menu__item{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;text-align:left;cursor:pointer}.menu__item:hover{background:var(--surface-quiet)}.main{max-width:1040px;margin:0 auto;padding:44px 24px 96px}.stack{display:flex;flex-direction:column;gap:28px}.row{display:flex;flex-wrap:wrap;gap:10px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.section-title{font-size:15px;font-weight:600;color:var(--ink-soft)}.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}.page-title{font-size:26px;font-weight:600;line-height:1.3}.page-subtitle{display:flex;align-items:center;gap:6px;color:var(--ink-mute);font-size:14px}.hint{color:var(--ink-mute);font-size:13px}.home-hero{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:24px 0 8px}.home-hero__brand{font-size:30px;font-weight:600;line-height:1.2;color:var(--primary-dark)}.home-hero__slogan,.home-hero__slogan-cn{font-size:15px;line-height:1.5;color:var(--ink-soft)}.home-hero__greeting{margin-top:20px;font-size:24px;font-weight:600;line-height:1.35}.home-hero .button{margin-top:12px}.card{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.card--recommend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}.card__body{display:flex;flex-direction:column;gap:6px}.recommend__title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500}.recommend__meta{color:var(--ink-mute);font-size:13px}.card--form{display:flex;flex-direction:column;gap:16px}.card--result{display:flex;align-items:baseline;gap:16px}.result__score{font-size:32px;font-weight:600}.result__rate{color:var(--ink-mute)}.tile{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease}.tile:hover{border-color:var(--primary);transform:translateY(-1px)}.tile__icon{color:var(--primary)}.tile__title{font-size:16px;font-weight:500}.tile__desc{color:var(--ink-mute);font-size:13px}.option-card{display:flex;flex-direction:column;gap:8px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease}.option-card:hover{border-color:var(--primary);transform:translateY(-1px)}.option-card__icon{color:var(--primary)}.option-card__title{font-size:19px;font-weight:600}.option-card__desc{color:var(--ink-soft)}.option-card__cta{margin-top:8px;color:var(--primary);font-size:14px;font-weight:500}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:1px solid transparent;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.button:disabled{cursor:not-allowed;opacity:.5}.button--primary{background:var(--primary);color:#fff}.button--primary:hover:not(:disabled){background:var(--primary-dark)}.button--ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}.button--ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary-dark)}.button--lg{padding:14px 28px;font-size:16px}.button--block{width:100%}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink-mute);cursor:pointer;transition:background .15s ease,color .15s ease}.icon-button:hover{background:var(--surface-quiet);color:var(--bad)}.field{display:flex;flex-direction:column;gap:6px}.field__label{color:var(--ink-soft);font-size:13px}.field__hint{color:var(--ink-mute);font-size:12px}.input{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:15px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3f77701f}.input--area{height:auto;padding:12px 14px;font-size:15px;line-height:1.7;resize:vertical}.form-error{color:var(--bad);font-size:13px}.form-notice{color:var(--primary-dark);font-size:13px}.search{position:relative;display:flex;align-items:center}.search__icon{position:absolute;left:14px;color:var(--ink-mute)}.search__input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:15px;outline:none}.search__input:focus{border-color:var(--primary)}.segmented{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.segmented__item{padding:6px 16px;border:0;border-radius:6px;background:transparent;color:var(--ink-soft);font-size:13px;cursor:pointer}.segmented__item--active{background:var(--primary-soft);color:var(--primary-dark);font-weight:500}.word-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.word-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}.word-row:last-child{border-bottom:0}.word-row__main{display:flex;flex:1;flex-direction:column;min-width:0}.word-row__korean{font-size:17px;font-weight:500}.word-row__chinese{display:flex;align-items:center;color:var(--ink-mute);font-size:13px}.word-row__pos{margin-left:8px;padding:1px 6px;border-radius:4px;background:var(--surface-quiet);color:var(--ink-soft);font-size:11px;line-height:1.6}.chip{flex:none;padding:3px 10px;border-radius:6px;font-size:12px}.chip--familiar{background:#edf4ef;color:#3f6b52}.chip--learning{background:var(--surface-quiet);color:var(--ink-soft)}.chip--review{background:var(--bad-soft);color:#9a4c4c}.article-list{display:flex;flex-direction:column;gap:12px}.article-item{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:border-color .15s ease}.article-item:hover{border-color:var(--primary)}.article-item__title{font-size:18px;font-weight:600}.article-item__meta{color:var(--ink-mute);font-size:13px}.article-item__summary{color:var(--ink-soft);font-size:14px}.reader{display:flex;flex-direction:column;gap:24px;max-width:760px;margin:0 auto}.back-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--ink-mute);font-size:13px}.back-link:hover{color:var(--primary-dark)}.reader__head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.reader__title{font-size:28px;font-weight:600;line-height:1.3}.reader__meta{color:var(--ink-mute);font-size:13px}.reader__body{padding-top:8px;border-top:1px solid var(--line);font-size:22px;line-height:2;white-space:pre-wrap}.target-word{margin:0;padding:0 3px;border:0;border-bottom:1px solid rgba(63,119,112,.35);border-radius:3px;background:var(--primary-soft);color:inherit;font:inherit;line-height:1.6;cursor:pointer;transition:background .15s ease}.target-word:hover{background:#d9e7e4}.word-card{position:relative;display:flex;flex-direction:column;gap:4px;align-self:flex-start;min-width:240px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 4px 16px #2021240f}.word-card__close{position:absolute;top:8px;right:8px}.word-card__surface{font-size:20px;font-weight:600}.word-card__row{color:var(--ink-soft);font-size:13px}.reader__words{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--line)}.reader__translate{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.reader__translation{display:flex;flex-direction:column;gap:8px;width:100%;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);counter-reset:line}.reader__translation-line{display:flex;gap:10px;color:var(--ink-soft);font-size:15px;line-height:1.8;counter-increment:line}.reader__translation-line:before{content:counter(line);flex:none;width:16px;color:var(--ink-mute);font-size:12px;line-height:1.9;text-align:right}.word-chips{display:flex;flex-wrap:wrap;gap:8px}.word-chip{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer;transition:border-color .15s ease}.word-chip:hover{border-color:var(--primary)}.word-chip--in{border-color:#cfe2d6;background:var(--ok-soft)}.target-word--new{border-bottom-color:#c48a3e66;background:#fbf0e0}.target-word--new:hover{background:#f6e3c9}.word-chip--new{border-style:dashed;border-color:#e0c49c;background:#fdf7ee}.word-chip--new:hover{border-color:#c48a3e}.word-legend{color:var(--ink-mute);font-size:13px}.word-card__tag{align-self:flex-start;padding:2px 8px;border:1px solid #cfe2d6;border-radius:4px;background:var(--ok-soft);color:var(--ink-soft);font-size:12px}.word-card__tag--new{border-color:#e0c49c;border-style:dashed;background:#fdf7ee}.reader__done{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.reader__done-title{font-size:17px;font-weight:600}.reader__done-line{color:var(--ink-soft);font-size:14px}.trainer{display:flex;flex-direction:column;gap:22px;max-width:620px;margin:0 auto}.trainer__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.trainer__title{font-size:22px;font-weight:600}.trainer__counter{color:var(--ink-mute);font-size:14px}.progress{height:6px;border-radius:999px;background:#ece8de;overflow:hidden}.progress__fill{height:100%;border-radius:999px;background:var(--primary);transition:width .22s ease}.trainer__prompt{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 0 8px;text-align:center}.play-button{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--primary-dark);cursor:pointer;transition:border-color .15s ease,background .15s ease}.play-button:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft)}.play-button:disabled{cursor:not-allowed;opacity:.45}.trainer__chinese{font-size:30px;font-weight:600;line-height:1.4}.trainer__hint{color:var(--ink-mute);font-size:13px}.answer-input{width:100%;height:64px;padding:0 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:24px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.answer-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3f77701f}.answer-input:disabled{color:var(--ink-soft)}.answer-input::placeholder{font-family:HANU Display,Segoe UI,system-ui,sans-serif;color:var(--ink-mute);opacity:1}.feedback{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);animation:rise .18s ease}.feedback--correct{border-color:var(--ok-line);background:var(--ok-soft)}.feedback--wrong{border-color:var(--bad-line);background:var(--bad-soft)}.feedback__title{font-size:16px;font-weight:600}.feedback--correct .feedback__title{color:#3f6b52}.feedback--wrong .feedback__title{color:#9a4c4c}.feedback__word{font-size:24px;font-weight:600}.feedback__line{color:var(--ink-soft);font-size:14px}.feedback__mono{font-size:17px;font-weight:600;color:var(--ink)}.feedback__note{color:var(--ink-mute);font-size:13px}.feedback .button{margin-top:10px}@keyframes rise{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.retry-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.retry-row{display:flex;align-items:baseline;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}.retry-row:last-child{border-bottom:0}.retry-row__korean{font-size:17px;font-weight:500}.retry-row__chinese{color:var(--ink-mute);font-size:13px}.stat{display:flex;flex-direction:column;gap:4px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.stat__label{color:var(--ink-mute);font-size:13px}.stat__value{font-size:28px;font-weight:600;line-height:1.3}.stat__note{color:var(--ink-mute);font-size:12px}.trail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.trail__day{display:flex;flex-direction:column;align-items:center;gap:8px}.trail__label{color:var(--ink-mute);font-size:12px}.trail__dot{width:10px;height:10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-quiet)}.trail__dot--on{border-color:var(--primary);background:var(--primary)}.record-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.record-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}.record-row:last-child{border-bottom:0}.record-row__kind{font-size:15px}.record-row__score{font-weight:600}.record-row__time{color:var(--ink-mute);font-size:13px}.page-state{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:40px 24px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}.page-state__title{font-size:17px;font-weight:600}.page-state__desc{max-width:520px;color:var(--ink-soft);font-size:14px}.page-state__action{margin-top:6px}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--ink-mute)}.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}.auth__card{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;padding:36px 32px 32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 8px 28px #2021240d}.auth__title{margin-top:18px;font-size:24px;font-weight:600;line-height:1.35}.auth__desc{color:var(--ink-soft);font-size:14px}.auth__form{display:flex;flex-direction:column;gap:16px;margin-top:18px}@media(max-width:860px){.main{padding:28px 18px 72px}.topbar__inner{gap:14px;padding:0 18px}.brand__tagline{display:none}.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero__brand{font-size:26px}.home-hero__greeting{font-size:21px}.reader__body,.answer-input{font-size:20px}.card--recommend{flex-direction:column;align-items:flex-start}.record-row{grid-template-columns:1fr auto}.record-row__time{grid-column:1 / -1}}@media(max-width:560px){.topbar__inner{gap:10px;padding:0 14px}.brand__name{font-size:15px}.nav__link{padding:6px 9px;font-size:13px;font-family:Segoe UI,Microsoft YaHei,Malgun Gothic,Noto Sans KR,system-ui,sans-serif}.avatar{width:32px;height:32px}.main{padding:24px 14px 64px}.grid-4{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}