/* HARU 08 · Native bilingual typographic system.
 * Keep Hangul glyphs intact; don't compress Korean reading exercises.
 * The first meaningful action is visually dominant, not arbitrary cards.
 */
:root{
  --font-zh:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --font-ko:"Pretendard Variable","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-num:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --bg:#f8f8f4;--paper:#fff;--ink:#23312b;--muted:#66736b;--line:#e1e6dd;
  --violet:#28644f;--violet-dark:#1c4a3a;--lavender:#ebf3eb;--green:#28765a;
  --haru-deep:#204936;--haru-accent:#c87558;--haru-korean:var(--font-ko);
  font-synthesis:none;
}
html,body{font-family:var(--font-zh);letter-spacing:0;word-break:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{font-weight:400;line-height:1.62;color:var(--ink)}
/* Weight is hierarchy, not arbitrary 770/850. Chinese glyphs vary by platform. */
h1,h2,h3,h4,.brand-name,.ec-copy h2,.editorial-intro h1{font-family:var(--font-zh);font-weight:650;letter-spacing:-.022em}
.brand-sign{font-family:ui-serif,Georgia,"Times New Roman",serif;font-weight:500;font-style:italic;letter-spacing:-.055em}
.brand-name{font-weight:650;letter-spacing:.008em}.brand-note,.menu-heading,.editorial-eyebrow,.ec-head,.section-index,.course-directory-eyebrow{font-family:var(--font-num);letter-spacing:.07em;font-weight:600}
.editorial-intro h1{font-size:clamp(32px,3.2vw,45px);line-height:1.26;letter-spacing:-.028em;font-weight:650}
.editorial-intro p{font-size:14px;line-height:1.72;color:#64746a}
.ec-copy h2{font-size:clamp(29px,2.8vw,40px);font-weight:650;letter-spacing:-.028em;line-height:1.3}
.ec-action{min-height:46px;border-radius:8px;font-size:13px;font-weight:600;gap:15px}
.ec-action:focus-visible{outline-color:#b37450}
.word-ko,.book-ko,.flash-ko,.ko,[lang="ko"],.small-quote span,.ec-art-word,.course-directory-mark,.scan-visual span{
  font-family:var(--font-ko)!important;font-feature-settings:"kern" 1;letter-spacing:normal!important;font-weight:560!important;
}
.word-ko,.book-ko,.flash-ko{font-size:clamp(42px,6vw,72px);line-height:1.36;overflow-wrap:anywhere}
.ko,[lang="ko"]{line-height:1.56}
/* Accessible textbook: real content should be easy to read without animation or decoration. */
button,input,select,textarea{font-family:var(--font-zh);font-size:14px;letter-spacing:0}button{font-weight:600}
.nav-button,.mobile-nav-item{font-family:var(--font-zh);font-weight:500}
.nav-button.active,.mobile-nav-item.active{font-weight:650}
.panel,.course-directory-row,.day-activity,.study-card,.editorial-continue{border-color:#dde5dc}
.panel{box-shadow:none}
.topbar{margin-bottom:33px}
.breadcrumbs{font-family:var(--font-zh);letter-spacing:0}
.ledger-stat-list strong{font-family:var(--font-num);font-weight:650}
/* Real separation by proximity, not colorful decorative wrappers. */
.haru-home{max-width:1110px}
.editorial-continue{border-radius:13px!important;box-shadow:none!important}
.ec-art-ring{opacity:.62}.ec-art-word{opacity:.44}
.course-directory-row{min-height:78px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #287f60;outline-offset:3px}
/* Mobile: bottom dock honors safe-area and stays out of content. */
@media(max-width:760px){
 body{font-size:14px}
 .workspace{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}
 .topbar{margin-bottom:27px}
 .editorial-intro h1{font-size:clamp(29px,8vw,38px);line-height:1.32;letter-spacing:-.02em}
 .editorial-intro p{font-size:13px}
 .ec-copy h2{font-size:clamp(28px,7vw,36px);letter-spacing:-.025em}
 .mobile-nav{background:rgba(252,253,249,.96)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px!important;box-shadow:0 6px 25px rgba(17,49,29,.09)}
 .mobile-nav-item{font-size:11px}.mobile-nav-item.active{background:#e3efe5}
 .mobile-nav-item:active{transform:scale(.96)}
}
@media(max-width:360px){.editorial-intro h1{font-size:29px}.ec-art{display:none}.ec-copy{padding-right:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Membership/account typography: informative, not a promotional billboard. */
.haru-membership{border:1px solid #dce4dc;border-radius:12px;background:#f0f5ee;padding:clamp(22px,3vw,35px);margin:0 0 18px;max-width:1020px}
.membership-head{display:flex;align-items:center;gap:14px;justify-content:space-between;font-size:12px;color:#527b5f;letter-spacing:.025em;font-weight:600;margin-bottom:21px}.membership-head b{font-size:18px;color:#27493a;letter-spacing:0;font-weight:650}
.haru-membership h3{font-size:clamp(22px,3vw,29px);line-height:1.4;letter-spacing:-.024em;font-weight:650;max-width:23ch;margin:0 0 11px}.haru-membership p{max-width:65ch;font-size:14px;color:#526b5b;line-height:1.72;margin:0 0 19px}
.membership-meta{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0;font-size:13px;color:#3c5f4f}.membership-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.membership-actions button{min-height:45px;border-radius:7px}
.haru-membership .membership-fine{font-size:12px;color:#7f9482;margin-top:16px;margin-bottom:0}.membership-tip{font-size:13px;color:#3e6f52}
.membership-contact{margin:0 0 22px;max-width:1020px}.membership-contact h3{font-weight:650}.membership-contact p{font-size:14px;color:#57695a}
.membership-contact form{max-width:390px;margin-top:15px}.membership-code-row{display:flex;align-items:center;gap:8px}.membership-code-row input{flex:1;min-width:0;border:1px solid #d7dfd7;border-radius:7px;min-height:42px;padding:8px 11px}.membership-code-row button{border:1px solid #a8c5b1;border-radius:7px;background:#eff6ef;color:#235e44;white-space:nowrap;padding:9px 12px;min-height:42px}.membership-contact small{display:block;color:#859187;font-size:12px;margin-top:15px}