/* HARU 07 — quiet editorial learning interface
   Design foundations: Taste Skill app-screen method + Impeccable layout, distill, harden.
   Distinctive device: a Korean learning journal with one large listening/reading focus.
   No decorative icon tiles or visualized fake progress. */
:root{
  --bg:#F8F6F1;--paper:#FFFDF9;--ink:#242A2B;--muted:#6F7674;--line:#E4E2DB;
  --violet:#294F48;--violet-dark:#1D3E38;--lavender:#E9F0EA;--lavender-2:#DCE9DF;
  --rose:#FFF0E5;--green:#367964;--shadow:none;--r:16px;
  --haru-accent:#D96E4D;--haru-accent-soft:#F5E4D9;--haru-deep:#203B36;
  --haru-border:#E2DFD7;--haru-text:#242A2B;--haru-secondary:#6B716F;
  --haru-korean:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
html{background:var(--bg);font-size:16px;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:-.015em;line-height:1.58}
.shell{max-width:none;grid-template-columns:252px minmax(0,1fr);min-height:100svh}
.sidebar{background:#F1F0EA!important;border-right:1px solid #E6E2D9;padding:35px 19px 20px;backdrop-filter:none!important}
.brand{padding:0 7px 51px;gap:12px;align-items:center}
.brand-sign{font-family:Georgia,"Times New Roman",serif;font-size:51px;line-height:1;font-style:italic;letter-spacing:-6px;color:var(--haru-deep);width:46px;flex:none}
.brand-sign span{color:var(--haru-accent)}
.brand-name{font-size:16px;font-weight:790;letter-spacing:.06em;color:#273A35;white-space:nowrap}
.brand-name span{font-size:12px;font-weight:550;color:#566860;letter-spacing:0}
.brand-note{font-size:9px;font-weight:650;letter-spacing:.14em;color:#909891;margin-top:3px}
.menu-heading{font-size:9px;letter-spacing:.14em;color:#919B95;padding:0 14px 13px}
.nav{gap:3px}.nav-button{min-height:48px;padding:11px 14px;border-radius:8px;color:#626D68;gap:13px;font-size:13px;font-weight:570}
.nav-button.active{background:#DFE9E1;color:#25483C;box-shadow:none;font-weight:790}.nav-button:hover{background:#E8ECE5;box-shadow:none}
.nav-button .ui-icon{width:19px;height:19px;stroke-width:1.7}.nav-icon{height:21px;width:21px}
.mini-profile{border:1px solid #E2E0D6;background:#F9F8F3;border-radius:13px;padding:13px 10px}
.avatar{background:#D8E5DB;color:#285047;border-radius:9px;box-shadow:none}
.profile-label{color:#273B35;font-size:12px}.profile-desc{color:#7A8580;font-size:10px}
.sidebar-foot{font-size:9px;letter-spacing:.05em;color:#A0A6A0}
.workspace{padding:27px clamp(27px,4vw,72px) 88px;min-width:0}
.page-wrap{max-width:1210px;width:100%;margin-inline:auto}
.topbar{margin-bottom:42px;padding-bottom:17px;min-height:42px;border-bottom:1px solid #E7E4DC}
.breadcrumbs{font-size:12px;color:#929791;font-weight:490;gap:10px}
.breadcrumbs b{color:#33483F;font-weight:620}
.date-pill{background:transparent;border:none;box-shadow:none;color:#737E76;font-size:12px;letter-spacing:.02em;padding:0}
.top-avatar{width:36px;height:36px;min-width:36px;min-height:36px;display:grid;place-items:center;background:#E2EBE3;border:1px solid #D9E4DB;box-shadow:none;border-radius:50%;padding:0;color:#30594A;font-size:13px}
button{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .18s cubic-bezier(.18,.8,.2,1)}
button:active{transform:translateY(1px)!important;box-shadow:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #D19A7F;outline-offset:3px}
/* Distinctive home composition, not a generic hero + colorful KPI cards. */
.haru-home{max-width:1175px}
.editorial-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:5px 0 31px}
.editorial-eyebrow{display:flex;align-items:center;gap:9px;letter-spacing:.14em;color:#647D6F;font-size:10px;font-weight:720}
.eyebrow-dash{display:inline-block;width:23px;height:2px;background:var(--haru-accent)}
.editorial-date{font-size:10px;font-weight:470;letter-spacing:.02em;color:#A3A59D;margin-left:9px}
.editorial-intro h1{font-family:"PingFang SC","Noto Sans SC","Microsoft Yahei",sans-serif;font-size:clamp(35px,3.55vw,52px);line-height:1.27;letter-spacing:-.055em;font-weight:770;margin:17px 0 11px;color:#24312D}
.h1-accent{color:#315B4C}.h1-mark{color:var(--haru-accent)}
.editorial-intro p{font-size:14px;color:#7C8078;line-height:1.75;margin:0}
.intro-symbol{align-self:flex-end;min-width:116px;text-align:center;display:grid;gap:3px;margin-bottom:5px;color:#7D8980}
.intro-symbol span{font-family:var(--haru-korean);font-weight:750;font-size:73px;line-height:1;color:#D9E5D7;letter-spacing:-.08em}
.intro-symbol small{font-family:Georgia,serif;font-size:10px;letter-spacing:.12em}
.editorial-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:start;gap:30px}
.editorial-primary,.editorial-aside{min-width:0}
.editorial-primary{display:flex;flex-direction:column;gap:31px}
.editorial-continue{background:var(--haru-deep);color:#FFFCF5;min-height:320px;border-radius:12px;position:relative;overflow:hidden;isolation:isolate}
.editorial-continue:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 67px,rgba(255,255,255,.034) 67px,rgba(255,255,255,.034) 68px);pointer-events:none;z-index:-1}
.ec-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:24px 28px 0;letter-spacing:.17em;font-size:10px;font-weight:650;color:#B1C6B7}
.ec-duration{letter-spacing:0;font-size:11px;font-weight:500;color:#BFCFC3}
.ec-layout{display:flex;min-height:270px}.ec-copy{z-index:1;position:relative;padding:21px 0 27px 29px;flex:1;min-width:0}
.ec-mini{font-size:12px;color:#BACDBF;margin-bottom:7px}
.ec-copy h2{font-size:clamp(30px,3vw,41px);line-height:1.32;letter-spacing:-.045em;color:#FFFDF9;margin:0 0 8px;font-weight:760}
.ec-copy p{font-size:12px;color:#D8E2D9;margin:0 0 20px;overflow-wrap:anywhere}
.ec-progressline{width:min(86%,365px);height:3px;background:#617D6A;overflow:hidden}.ec-progressline>div{height:100%;background:#EDD3B7}
.ec-meta{font-size:11px;color:#B7CBBB;display:block;margin-top:9px}
.ec-action{border:1px solid #F5F2E8;background:#FFFDF7;color:#2C4B41;border-radius:6px;min-height:42px;margin-top:19px;padding:9px 20px;font-weight:750;font-size:12px;display:inline-flex;align-items:center;gap:30px;justify-content:space-between}
.ec-action span{font-size:18px;font-weight:400;line-height:1}.ec-action:hover{background:#E5EDE4;transform:translateY(-1px)}
.ec-art{flex:0 0 30%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ec-art-ring{position:absolute;width:255px;height:255px;border:1px solid rgba(235,230,199,.25);border-radius:50%;top:16px;left:-6px;box-shadow:0 0 0 39px rgba(235,230,199,.06),0 0 0 78px rgba(235,230,199,.035)}
.ec-art-word{font-size:clamp(45px,5vw,91px);font-family:var(--haru-korean);letter-spacing:-.12em;color:#EFDCC1;line-height:1;z-index:1;transform:translateX(-7px)}
.ec-art-sub{position:absolute;right:19px;bottom:22px;font-size:10px;letter-spacing:.03em;color:#B9CDBB;text-align:right;line-height:1.7}
.editorial-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.editorial-index{font-size:10px;letter-spacing:.145em;color:#768E7F;font-weight:670;display:block;margin-bottom:6px}
.editorial-section-head h3{font-size:23px;font-weight:750;line-height:1.35;color:#273A33;letter-spacing:-.04em;margin:0}
.editorial-small-note{color:#8E948A;font-size:11px;white-space:nowrap;margin-bottom:3px}
.daily-actions{border-block:1px solid var(--haru-border)}
.daily-action-row{display:flex;align-items:center;gap:18px;width:100%;min-height:82px;padding:13px 4px;border:0;border-bottom:1px solid var(--haru-border);background:transparent;text-align:left;color:var(--ink)}
.daily-action-row:last-child{border-bottom:0}.daily-action-row:hover{background:#F0F0E9}
.action-ordinal{font:italic 24px Georgia,serif;color:#B5B6A9;min-width:41px;letter-spacing:-.06em}
.action-main{display:grid;gap:3px;flex:1;min-width:0}.action-main strong{font-size:15px;font-weight:660;color:#2C3C34}.action-main small{font-size:12px;color:#858D83;white-space:normal}
.action-tail{font-size:12px;font-weight:630;color:#536F61;white-space:nowrap;display:flex;gap:13px;align-items:center}.action-tail>span{font-size:17px;color:var(--haru-accent)}
.phrase-feature{border:1px solid #E1DCD0;border-radius:11px;background:#F0EBDD;padding:24px 27px 22px;position:relative;overflow:hidden}
.phrase-feature:before{content:"";position:absolute;border:1px solid #DDDACB;width:200px;height:200px;border-radius:50%;right:-100px;top:-110px;pointer-events:none}
.phrase-feature-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;letter-spacing:.11em;color:#7C8173}
.phrase-stamp{font-size:11px;letter-spacing:.02em;color:#7A654B;border:1px solid #CFC5B4;border-radius:2px;padding:4px 8px;transform:rotate(2deg)}
.phrase-korean{font-size:clamp(23px,3vw,32px);letter-spacing:-.055em;font-weight:740;color:#293D37;margin:29px 0 7px;line-height:1.5;word-break:keep-all}
.phrase-translation{font-size:13px;color:#727B6B;margin:0 0 22px}
.phrase-play{background:transparent;border:0;padding:0;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:690;color:#395D50;min-height:36px}
.phrase-play span:last-child{color:var(--haru-accent);margin-left:5px;font-size:17px}
.editorial-course-section{padding-bottom:42px}
.editorial-see-all{background:none;border:0;font-size:12px;color:#567465;font-weight:700;padding:7px 0}
.editorial-course-list{border-top:1px solid var(--haru-border)}
.editorial-course-row{display:flex;gap:17px;align-items:center;min-height:82px;text-align:left;border:0;border-bottom:1px solid var(--haru-border);background:transparent;width:100%;padding:12px 1px}
.editorial-course-row:hover{background:#F0F1EA}.course-order{font:italic 22px Georgia,serif;color:#AAADA0;min-width:36px}
.course-copy{display:grid;gap:4px;flex:1;min-width:0}.course-copy strong{font-size:14px;color:#304139;font-weight:700}.course-copy small{color:#899186;font-size:12px}
.course-completion{font-size:12px;color:#7B8A7D;white-space:nowrap}.course-arrow{font-size:17px;color:#B47B62;margin-left:5px}
/* Side content: honest data, no ornamental KPI cards */
.editorial-aside{display:flex;flex-direction:column;gap:24px}
.daily-ledger,.activity-calendar{border:1px solid #E4E2D9;background:#FCFBF7;padding:23px 21px;border-radius:9px}
.aside-eyebrow{font-size:10px;letter-spacing:.14em;color:#779081;font-weight:680}
.daily-ledger-title{font-size:18px;font-weight:730;margin:10px 0 12px;color:#2D4037}
.ledger-number{display:flex;align-items:baseline;gap:11px}.ledger-number strong{font:normal 64px/1.08 Georgia,serif;color:#2E493E;letter-spacing:-.06em}
.ledger-number>span{font-size:13px;color:#859083}
.ledger-line{height:4px;background:#E4EADD;margin:20px 0 12px}.ledger-line>div{height:4px;background:#B77759;transition:width .4s}
.daily-ledger>p,.activity-calendar>p{font-size:11px;line-height:1.7;color:#889085;margin:0 0 22px}
.ledger-stat-list{border-top:1px solid #E9E7DE}.ledger-stat-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #E9E7DE;padding:13px 0;color:#77837A;font-size:12px}
.ledger-stat-list strong{color:#344B40;font-size:19px;font-variant-numeric:tabular-nums;font-family:Georgia,serif}.ledger-stat-list small{font-size:10px;font-family:inherit}
.activity-calendar h3{font-size:17px;margin:9px 0 18px;color:#2F433B}
.activity-calendar .weekly-chart{height:111px;min-height:111px;margin:5px 0 14px}.activity-calendar .week-bar{background:#A0BCAA!important;border-radius:3px 3px 0 0}
.activity-calendar .week-col.today .week-bar{background:#3B6F5B!important}.activity-calendar .week-col label{font-size:10px;color:#879389}
.small-quote{display:grid;gap:11px;text-align:left;background:#E9EEE5;border:0;border-left:3px solid #658474;padding:22px 21px;color:#365246;border-radius:0 8px 8px 0}
.small-quote span{font-family:var(--haru-korean);font-size:22px;font-weight:700}.small-quote small{font-size:12px;color:#7B8B7C}.small-quote b{font-size:11px;letter-spacing:.01em;color:#3D6653;margin-top:6px}
/* Shared workspace: tight information hierarchy and quieter surfaces */
.page-kicker,.welcome-label{color:#587768;letter-spacing:.16em;font-size:10px}
.page-title{color:#273C32;font-weight:760;font-size:clamp(29px,3vw,43px);letter-spacing:-.05em}
.page-subtitle{color:#7C877D;line-height:1.7;font-size:14px}
.panel,.stat-card,.lesson-card,.course-tile,.word-card,.book-word,.scan-card{background:#FFFEFA;border:1px solid #E6E4DC!important;border-radius:12px!important;box-shadow:none!important}
.panel{padding:25px}.section-heading h3{font-size:18px;font-weight:710;color:#2D4238}
.btn,.word-play,.book-mini,.record-btn,.rating-btn{border-radius:7px!important;box-shadow:none!important}
.btn-primary{background:#315C4F!important;color:#FFFDF6!important;border:1px solid #315C4F!important}.btn-primary:hover{background:#26483E!important;transform:translateY(-1px)}
.btn-white{background:#FFFDF8;color:#28493D}.btn-outline{border-color:#D7DDD4;background:transparent;color:#385A4B}.btn-ghost{background:#EAF0E9;color:#31594A}
.btn-sm{min-height:40px;padding:9px 14px}
.chip,.small-tag,.lesson-num{background:#E8EFE8!important;color:#426B56!important;border-color:#D8E5DA!important;border-radius:5px!important;font-size:11px}
.chip.active{background:#315C4F!important;color:#fff!important}
.search-input,.field-input,.field-select{background:#FFFDF9;border:1px solid #DEDCD3;border-radius:7px!important;color:#293D32}
.lesson-card{min-height:162px}.lesson-symbol{border-radius:9px!important;background:#E7EEE4!important;color:#456F58!important}
.lesson-title{font-size:16px;color:#2F4537}.lesson-desc{color:#818D80}
.progress-track{background:#E9EDE6}.progress-fill{background:#5D9476!important}
.course-tile:hover,.lesson-card:hover{border-color:#A3B6A9!important;background:#F8FAF5}
.word-ko,.book-ko,.flash-ko,.ko{font-family:var(--haru-korean)!important;color:#2A4037}
.word-ko{font-size:42px}.word-rom{color:#929A8F}.word-cn{color:#4B6053}
.word-play,.book-mini{background:#EAF0E7!important;color:#345C48!important;border:1px solid #DDE8DD!important}
.book-alert,.book-rule{background:#EFF2E9;border:1px solid #DFE8D9;border-radius:9px;color:#3C6650}
.book-index,.book-word,.book-lesson-head,.book-audio,.book-own{border-radius:12px!important}
.book-chapter{border-radius:6px}.book-chapter.selected{background:#E1EBE1;border-color:#ACC7B4;color:#24543F}
.flash-stage{max-width:730px}.flash-card{background:#FFFEFA!important;border-radius:12px!important;padding-block:54px!important;box-shadow:none!important}
.flash-ko{font-size:clamp(60px,8vw,98px)!important;color:#233D33;letter-spacing:-.045em}
.flash-watermark{color:#A0A8A0}.flash-rom{color:#818D80}.flash-progress{background:#E3E8E0}.flash-progress>div{background:#567A65!important}
.flash-answer{border-top:1px solid #E9E8DF;padding-top:21px}.flash-answer h3{color:#2E4A39}
.rating-btn{background:#FAF8F1;border:1px solid #E7E3D7}.rating-btn.again{background:#FFF1EB;border-color:#EDC9BD}.rating-btn.easy{background:#E7F1E9;border-color:#C4DDCB}
.scan-drop{background:#F3F2E9!important;border:1px dashed #A4B7A7!important;border-radius:10px!important;min-height:230px}.scan-drop b{color:#2F5944}
.scan-step strong{background:#DCE8DC;color:#36624C;border-radius:4px}
.v5-member{background:#263D35;border-radius:10px;padding:27px}.v5-member .btn{border-radius:6px}.v5-member>p{color:#C9D9CB}
.settings-card,.v5-account-overview{border-radius:10px!important}.v5-share-options{background:#EFF3ED;border-radius:8px}
.dialog{border-radius:12px;border:1px solid #D9DED5}
/* transparent with restraint: only persistent navigation; never blur content cards */
.mobile-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Tablet: keep support panels below the main task */
@media(max-width:1140px) and (min-width:761px){.editorial-grid{grid-template-columns:minmax(0,1fr)}.editorial-aside{display:grid;grid-template-columns:1fr 1fr}.small-quote{grid-column:1/-1}}
@media(max-width:760px){
  .shell{display:block}.workspace{padding:18px 20px calc(108px + env(safe-area-inset-bottom))!important}.topbar{margin-bottom:25px;min-height:42px;padding-bottom:13px}.breadcrumbs{font-size:11px}
  .editorial-intro{margin:5px 0 23px;align-items:flex-start}.editorial-intro h1{font-size:clamp(32px,8.4vw,41px);line-height:1.29;margin:13px 0 9px}
  .editorial-intro p{font-size:12px;max-width:31ch}.editorial-eyebrow{font-size:9px;letter-spacing:.06em;gap:7px}.editorial-date{display:none}.eyebrow-dash{width:15px}
  .intro-symbol{min-width:45px;margin:2px 0 0}.intro-symbol span{font-size:47px}.intro-symbol small{font-size:7px;letter-spacing:0}
  .editorial-grid{display:block}.editorial-primary{gap:27px}.editorial-aside{margin-top:30px;gap:18px}
  .editorial-continue{min-height:296px;border-radius:9px}.ec-head{padding:20px 20px 0;font-size:9px}.ec-copy{padding:20px 0 21px 21px}.ec-layout{min-height:255px}.ec-copy h2{font-size:clamp(31px,8vw,37px);line-height:1.28;margin-bottom:9px}
  .ec-mini{font-size:10px}.ec-copy p{font-size:11px;margin:0 0 18px;max-width:240px}.ec-progressline{width:95%}.ec-meta{font-size:10px}
  .ec-action{margin-top:16px;min-height:39px;padding:8px 13px;font-size:12px;gap:15px}
  .ec-art{flex-basis:20%;overflow:visible}.ec-art-ring{width:158px;height:158px;top:28px;left:-35px;box-shadow:0 0 0 25px rgba(235,230,199,.045)}.ec-art-word{font-size:45px;position:absolute;right:3px;top:70px;transform:rotate(-90deg);opacity:.7}.ec-art-sub{display:none}
  .editorial-section-head h3{font-size:21px}.editorial-small-note{font-size:10px}
  .daily-action-row{min-height:74px;gap:13px}.action-ordinal{font-size:19px;min-width:29px}.action-main strong{font-size:14px}.action-main small{font-size:11px}.action-tail{font-size:11px;gap:8px}
  .phrase-feature{border-radius:8px;padding:21px 21px}.phrase-korean{font-size:clamp(21px,6vw,28px);margin:25px 0 8px;line-height:1.6}.phrase-translation{font-size:12px;margin-bottom:16px}
  .editorial-course-row{min-height:74px;gap:12px}.course-copy strong{font-size:13px}.course-copy small{font-size:11px}.course-completion{font-size:11px}.course-order{font-size:19px;min-width:27px}
  .editorial-aside{display:grid;grid-template-columns:1fr}.daily-ledger,.activity-calendar{padding:20px;border-radius:8px}
  .daily-ledger-title{font-size:17px}.ledger-number strong{font-size:52px}.ledger-stat-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.ledger-stat-list>div{display:grid;gap:2px;padding-right:8px}.ledger-stat-list>div:not(:last-child){border-right:1px solid #E9E7DE}.ledger-stat-list>div+div{padding-left:9px}.ledger-stat-list strong{font-size:21px}
  .activity-calendar .weekly-chart{height:100px;min-height:100px}
  .mobile-nav{left:10px!important;right:10px!important;bottom:calc(9px + env(safe-area-inset-bottom))!important;min-height:68px;height:68px;border:1px solid #DFE4DB;border-radius:13px;background:rgba(253,253,248,.96);box-shadow:0 3px 25px rgba(24,42,36,.1);padding:5px 6px}
  .mobile-nav-item{font-size:10px;border-radius:7px;min-height:54px;height:54px;color:#79887B}.mobile-nav-item.active{background:#E2EBE2;color:#2A5945}.mobile-nav-item .nav-label{font-size:10px}
  .panel{padding:19px;border-radius:10px!important}.course-grid,.words-grid{grid-template-columns:1fr!important}.book-layout{grid-template-columns:1fr}.page-title{font-size:29px}.page-subtitle{font-size:13px}
  .flash-card{padding:40px 18px!important}.flash-ko{font-size:clamp(53px,14vw,77px)!important}.flash-control{gap:8px}.rating-btn{min-height:72px}
}
@media(max-width:370px){.workspace{padding-inline:15px!important}.editorial-intro h1{font-size:32px}.ec-copy h2{font-size:29px}.ec-art{flex-basis:13%}.ec-art-word{font-size:37px;right:-8px}.course-completion{display:none}.editorial-eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(prefers-contrast:more){.editorial-continue{border:2px solid #000}.daily-action-row,.editorial-course-row{border-color:#59685F}.action-main small,.course-copy small,.page-subtitle{color:#45554A}}

/* QA fixes from real 320px/390px captures */
.editorial-intro h1 .h1-accent{display:inline-block;white-space:nowrap}
.skip-link:not(:focus-visible){position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.book-index-grid{gap:6px}.book-chapter{background:#FAFAF6!important;border:1px solid #E6E8DF!important;border-radius:5px!important;padding:10px 12px}
.book-chapter.selected{background:#E0EBE0!important;border-color:#AFC8B7!important;color:#295342!important}
.book-chapter b{color:#3B5647;font-size:12px}.book-chapter small{color:#7E8D80!important;font-size:10px;line-height:1.5}
.book-index-top{font-size:16px;font-weight:720;color:#324C3F}
.book-lesson-head h2{color:#293F34;letter-spacing:-.04em}.book-kotitle{color:#497762}
.book-rows{gap:12px}.book-word{min-width:0}.book-ko{color:#263E33;font-size:clamp(35px,4vw,50px)}
.scan-upload h3,.scan-help h3,.scan-review h3{font-size:19px;font-weight:710;letter-spacing:-.035em;color:#284B3A}
.scan-visual{width:112px;height:108px;position:relative;margin:6px auto 12px;display:grid;place-items:center}
.scan-visual:before,.scan-visual:after{content:"";position:absolute;width:74px;height:93px;border:1.5px solid #A4B7A7;border-radius:2px;background:#F9FBF4;transform:rotate(-8deg);left:12px;top:3px}
.scan-visual:after{transform:rotate(7deg);left:28px;top:8px;background:#FFFEFA;border-color:#AFC7B8}
.scan-visual span{position:relative;z-index:2;color:#3B6B55;font-family:var(--haru-korean);font-size:56px;line-height:1;transform:translate(9px,2px);font-weight:730}
.scan-visual i{position:absolute;z-index:3;bottom:4px;right:2px;width:26px;height:26px;border:4px solid #B06D4C;border-radius:50%}.scan-visual i:after{content:"";display:block;position:absolute;width:16px;height:4px;border-radius:2px;background:#B06D4C;right:-13px;bottom:-7px;transform:rotate(45deg)}
.scan-drop{padding:21px!important;gap:13px!important}.scan-drop b{font-size:18px;color:#294C39}.scan-drop small{font-size:12px;color:#77877B;line-height:1.8}
.scan-step strong{border-radius:4px!important}.scan-step p{color:#6A7A6C}
@media(max-width:760px){.book-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:310px;overflow:auto}.book-chapter{min-height:61px}.book-chapter b{font-size:12px}.scan-drop{min-height:285px!important}.scan-visual{margin-top:0}}

/* A language learning path is an index, not a tiled ecommerce catalog. */
.course-directory{max-width:1030px}
.course-directory-intro{display:flex;gap:40px;align-items:end;justify-content:space-between;border-bottom:1px solid #E0E3D8;padding:26px 0 30px;margin-bottom:24px}
.course-directory-intro h1{font-size:clamp(35px,4.1vw,55px);letter-spacing:-.06em;line-height:1.33;color:#2A4133;margin:0 0 15px;font-weight:760}
.course-directory-intro h1 span{color:#527865}.course-directory-intro p{font-size:14px;line-height:1.8;color:#7C897E;max-width:490px;margin:0}
.course-directory-mark{font-family:var(--haru-korean);font-size:74px;color:#DCE6DA;white-space:nowrap;font-weight:750;letter-spacing:-.07em}
.course-directory-banner{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 21px;background:#E9EEE6;color:#3F6650;border-radius:7px;margin-bottom:15px}
.course-directory-banner span{font-size:10px;letter-spacing:.12em;color:#6C896F}.course-directory-banner strong{font-size:17px;font-weight:720}.course-directory-banner small{color:#6F8272;font-size:12px}
.course-directory-list{border-top:1px solid #E1E3DA}.course-directory-row{min-height:97px;display:flex;align-items:center;gap:24px;text-align:left;padding:18px 13px 18px 1px;background:transparent;width:100%;border:0;border-bottom:1px solid #E1E3DA}
.course-directory-row:hover{background:#F0F2EA}.cdr-index{font:italic 26px Georgia,serif;color:#AEB8AA;min-width:39px}
.cdr-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.cdr-info strong{font-size:17px;color:#284336;font-weight:680}.cdr-info small{font-size:12px;color:#879187}.cdr-progress{width:min(280px,65%);height:3px;background:#E5E9E1;margin-top:9px}.cdr-progress i{display:block;height:100%;background:#729682}
.cdr-status{color:#627967;font-size:12px;white-space:nowrap}.cdr-arrow{color:#C27758;font-size:20px}
@media(max-width:760px){.course-directory-intro{padding:18px 0 22px}.course-directory-intro h1{font-size:35px}.course-directory-intro p{font-size:12px}.course-directory-mark{display:none}.course-directory-banner{display:grid;grid-template-columns:1fr auto;padding:14px 16px;gap:6px}.course-directory-banner span{grid-column:1/-1}.course-directory-banner strong{font-size:15px}.course-directory-banner small{font-size:10px}.course-directory-row{gap:12px;min-height:87px}.cdr-info strong{font-size:14px}.cdr-info small{font-size:11px}.cdr-index{font-size:22px;min-width:26px}.cdr-status{font-size:10px;max-width:70px;text-align:right}.cdr-arrow{font-size:17px}}
.weekly-chart .week-bar{min-height:0!important}