/* Math Final Premium V5: UI-only layer. */
:root {
  --v5-ink: #17212b;
  --v5-muted: #66727f;
  --v5-line: #dce3e7;
  --v5-canvas: #f7f9f9;
  --v5-surface: #fff;
  --v5-green: #08756b;
  --v5-green-dark: #075f58;
  --v5-green-soft: #eaf4f2;
  --v5-gold: #a56c1f;
  --v5-rail: 208px;
  --v5-top: 64px;
  --bg: var(--v5-canvas);
  --card: #fff;
  --ink: var(--v5-ink);
  --sub: var(--v5-muted);
  --line: var(--v5-line);
  --brand: var(--v5-green);
  --brand2: var(--v5-green-dark);
  --soft: var(--v5-green-soft);
  --r: 8px;
  --shadow: none;
  --shadow-lg: 0 12px 28px rgba(23, 33, 43, .1);
}
html { background: var(--v5-canvas); }
body.home-page { background: var(--v5-canvas) !important; color: var(--v5-ink); font-family: Pretendard, "Malgun Gothic", sans-serif; letter-spacing: 0 !important; }
body.home-page * { letter-spacing: 0 !important; }
body.home-page header { background: #fff !important; border-bottom: 1px solid var(--v5-line); box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important; color: var(--v5-ink); height: var(--v5-top); left: var(--v5-rail); padding: 0 26px; position: fixed; right: 0; top: 0; z-index: 80; }
body.home-page header::before { display: none !important; }
body.home-page .hwrap { height: var(--v5-top); max-width: none; padding: 0; }
body.home-page .hwrap .logo { color: var(--v5-ink); font-size: 15px; font-weight: 800; }
.v5-top-context { align-items: center; display: inline-flex; min-height: 32px; }
body.home-page .theme-btn, body.home-page .tier-badge, body.home-page .acct-btn { background: #fff; border: 1px solid var(--v5-line); border-radius: 6px; box-shadow: none; color: var(--v5-ink); }
body.home-page .theme-btn:hover, body.home-page .tier-badge:hover, body.home-page .acct-btn:hover { background: #f5f8f8; }
body.home-page #nav { background: #fff; border-right: 1px solid var(--v5-line); bottom: 0; display: block; left: 0; max-width: none; overflow: hidden; padding: 0; position: fixed; top: 0; width: var(--v5-rail); z-index: 90; }
.v5-brand { border-bottom: 1px solid var(--v5-line); color: var(--v5-ink); display: flex; flex-direction: column; height: var(--v5-top); justify-content: center; padding: 0 24px; text-decoration: none; }
.v5-brand-name { font-size: 19px; font-weight: 900; line-height: 1.1; }
.v5-brand-sub { color: var(--v5-muted); font-size: 9px; font-weight: 700; margin-top: 4px; }
.v5-nav-scroll { height: calc(100vh - 232px); overflow: auto; padding: 18px 12px; scrollbar-width: thin; }
.v5-nav-title { color: #89939d; font-size: 10px; font-weight: 800; margin: 0 10px 8px; text-transform: uppercase; }
.v5-nav-title-support { border-top: 1px solid var(--v5-line); margin-top: 14px; padding-top: 14px; }
#nav .v5-nav-item { align-items: center; background: transparent; border: 0; border-radius: 6px; color: #475467; cursor: pointer; display: flex; font-family: inherit; font-size: 13px; font-weight: 700; gap: 10px; min-height: 38px; padding: 7px 10px; text-align: left; width: 100%; }
#nav .v5-nav-item:hover { background: #f3f7f6; color: var(--v5-green-dark); }
#nav .v5-nav-item.on { background: var(--v5-green-soft); color: var(--v5-green-dark); }
.v5-nav-mark { color: #9aa5ad; font-size: 9px; font-variant-numeric: tabular-nums; width: 16px; }
.v5-nav-item.on .v5-nav-mark { color: var(--v5-green); }
.v5-side-book { background: #f7f9f9; border: 1px solid var(--v5-line); border-radius: 7px; bottom: 16px; color: var(--v5-ink); display: flex; flex-direction: column; gap: 3px; left: 14px; padding: 13px; position: absolute; right: 14px; text-decoration: none; }
.v5-side-book span { color: var(--v5-green-dark); font-size: 10px; font-weight: 800; }
.v5-side-book b { font-size: 12px; line-height: 1.45; }
.v5-side-book small { color: var(--v5-muted); font-size: 10px; margin-top: 3px; }
body.home-page main#main { margin: var(--v5-top) 0 0 var(--v5-rail) !important; max-width: none !important; min-height: calc(100vh - var(--v5-top)); padding: 0 30px 64px !important; width: auto !important; }
body.home-page footer, body.home-page > .paid-proof { margin-left: var(--v5-rail); }
body.home-page .card { border: 1px solid var(--v5-line); border-radius: 8px; box-shadow: none; }
body.home-page .card:hover { box-shadow: none; }
body.home-page[data-v5-route="home"] #main > .gx-hero,
body.home-page[data-v5-route="home"] #main > .mfx-sp,
body.home-page[data-v5-route="home"] #main > .mfx-sp-banner,
body.home-page[data-v5-route="home"] #main > .cm-footer,
body.home-page[data-v5-route="home"] #main > .bz-entry { display: none !important; }
body.home-page h2::before { display: none; }
body.home-page h2 { color: var(--v5-ink); font-size: 20px; }
body.home-page .btn { background: var(--v5-green); border: 1px solid var(--v5-green); border-radius: 6px; box-shadow: none; padding: 10px 17px; }
body.home-page .btn:hover { background: var(--v5-green-dark); filter: none; }
body.home-page .btn.ghost { background: #fff; border-color: #aebbc3; color: var(--v5-green-dark); }
body.home-page input, body.home-page select, body.home-page textarea { border: 1px solid #b8c3ca; border-radius: 6px; }
body.home-page button:focus-visible, body.home-page a:focus-visible, body.home-page input:focus-visible, body.home-page select:focus-visible, body.home-page textarea:focus-visible { outline: 3px solid rgba(8, 117, 107, .24) !important; outline-offset: 2px; }
.v5-hero { background: #fff; border-bottom: 1px solid var(--v5-line); display: grid; grid-template-columns: minmax(390px, .88fr) minmax(460px, 1.12fr); margin: 0 -30px 0; min-height: 324px; overflow: hidden; }
.v5-hero-copy { align-self: center; padding: 42px 56px 40px; }
.v5-eyebrow, .v5-section-head span, .v5-panel-head span, .v5-report-panel > div:last-child > span { color: var(--v5-green); display: block; font-size: 10px; font-weight: 900; margin-bottom: 8px; }
.v5-hero h1 { color: #111b24; font-size: clamp(32px, 3vw, 43px); font-weight: 900; line-height: 1.24; margin: 0; }
.v5-hero p { color: #596775; font-size: 15px; line-height: 1.75; margin: 16px 0 0; }
.v5-hero-actions { align-items: center; display: flex; gap: 18px; margin-top: 25px; }
.v5-text-btn { background: transparent; border: 0; color: #344054; cursor: pointer; font-size: 13px; font-weight: 700; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; }
.v5-hero-image { background: url("tile-media/math-hero.jpg") center 42% / cover no-repeat; min-height: 324px; }
.v5-section { margin-top: 27px; }
.v5-section-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 14px; }
.v5-section-head h2 { font-size: 18px; margin: 0; }
.v5-section-head p { color: var(--v5-muted); font-size: 12px; }
.v5-journey { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v5-journey-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v5-journey-card { background: #fff; border: 1px solid var(--v5-line); border-radius: 7px; overflow: hidden; }
.v5-card-top { align-items: center; display: flex; gap: 9px; min-height: 46px; padding: 9px 12px; }
.v5-card-top h3 { font-size: 14px; margin: 0; }
.v5-card-top small { border: 1px solid var(--v5-line); border-radius: 4px; color: var(--v5-muted); font-size: 9px; margin-left: auto; padding: 2px 6px; }
.v5-step { align-items: center; background: var(--v5-green); border-radius: 4px; color: #fff; display: inline-flex; font-size: 10px; font-weight: 800; height: 23px; justify-content: center; width: 25px; }
.v5-journey-card img { aspect-ratio: 1.75 / 1; display: block; object-fit: cover; width: 100%; }
.v5-journey-card p { color: #596775; font-size: 12px; line-height: 1.6; min-height: 66px; padding: 12px 14px 6px; }
.v5-journey-card > button { align-items: center; background: #fff; border: 1px solid #a9c9c5; border-radius: 5px; color: var(--v5-green-dark); cursor: pointer; display: flex; font-family: inherit; font-size: 12px; font-weight: 800; justify-content: center; margin: 7px 14px 14px; min-height: 35px; width: calc(100% - 28px); }
.v5-journey-card > button span { font-size: 20px; margin-left: 7px; }
.v5-journey-card > button:hover { background: var(--v5-green-soft); }
.v5-dashboard-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1.12fr; margin-top: 14px; }
.v5-panel { background: #fff; border: 1px solid var(--v5-line); border-radius: 7px; min-height: 248px; padding: 18px; }
.v5-panel-head { align-items: center; display: flex; justify-content: space-between; }
.v5-panel-head h2 { font-size: 16px; margin: 0; }
.v5-panel-head button, .v5-next-panel li button { background: none; border: 0; color: var(--v5-green-dark); cursor: pointer; font-size: 11px; font-weight: 800; }
.v5-metrics { border-bottom: 1px solid var(--v5-line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding-bottom: 16px; }
.v5-metrics div { border-right: 1px solid var(--v5-line); text-align: center; }
.v5-metrics div:last-child { border: 0; }
.v5-metrics b { color: var(--v5-green-dark); display: block; font-size: 24px; }
.v5-metrics span { color: var(--v5-muted); font-size: 10px; }
.v5-progress-list { margin-top: 12px; }
.v5-progress-list p { border-bottom: 1px solid #edf0f2; display: flex; font-size: 11px; justify-content: space-between; padding: 7px 2px; }
.v5-progress-list p b { color: var(--v5-green-dark); }
.v5-next-panel ol { list-style: none; margin-top: 13px; padding: 0; }
.v5-next-panel li { align-items: center; border-bottom: 1px solid var(--v5-line); display: grid; font-size: 12px; gap: 10px; grid-template-columns: 28px 1fr auto; min-height: 49px; }
.v5-next-panel li > b { color: #94a0a9; font-size: 10px; }
.v5-report-panel { background: #0c2934; color: #fff; display: block; overflow: hidden; padding: 22px; }
.v5-report-image { background: url("tile-media/math-report.jpg") center / cover no-repeat; min-height: 248px; }
.v5-report-panel > div:last-child { align-self: center; padding: 22px 22px 22px 0; }
.v5-report-panel h2 { color: #fff; margin: 0; }
.v5-report-panel p { color: #cfdae0; font-size: 12px; line-height: 1.7; margin: 12px 0 16px; }
.v5-report-panel .btn.ghost { background: transparent; border-color: #8ca5af; color: #fff; }
.v5-chart-empty { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(120px, .75fr) minmax(0, 1.25fr); margin: 16px 0; }
.v5-chart-empty img { aspect-ratio: 4 / 3; border-radius: 7px; display: block; object-fit: cover; width: 100%; }
.v5-chart-empty b { display: block; font-size: 14px; margin-bottom: 6px; }
.v5-chart-empty p { margin: 0 0 10px; }
.v5-chart-empty button { min-height: 38px; }
.v5-chart { align-items: end; border-bottom: 1px solid #55707b; display: grid; gap: 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 170px; margin: 20px 0 16px; padding: 26px 4px 0; }
.v5-chart-point { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: end; min-width: 0; }
.v5-chart-point i { background: #74c7b8; border-radius: 4px 4px 0 0; display: block; min-height: 8px; width: min(34px, 72%); }
.v5-chart-value, .v5-chart-point small { font-size: 10px; font-weight: 800; }
.v5-chart-value { color: #b6f0e6; margin-bottom: 4px; }
.v5-chart-point small { color: #cfdae0; margin-top: 5px; }
body.home-page:not([data-v5-route="home"]) main { max-width: 1180px; padding-top: 28px; }
body.home-page:not([data-v5-route="home"]) #main > .card:first-child { border-top: 3px solid var(--v5-green); }
body.home-page .plan-hero { background: #103b45; border-radius: 8px; box-shadow: none; }
body.home-page .plan-hero::after { display: none; }
body.home-page .plan-mbar i, body.home-page .bar i { background: var(--v5-green); }
body.home-page .plan-stage, body.home-page .plan-stage.on, body.home-page .result-hero { background: #fff; border: 1px solid var(--v5-line); border-radius: 8px; box-shadow: none; }
body.home-page .plan-stage.on { border-left: 4px solid var(--v5-green); }
body.home-page .chip, body.home-page .code-chip, body.home-page .tts-btn, body.home-page .share-btn { border-radius: 5px; }
body.home-page .qbox { background: #f7faf9; border: 1px solid #d9e5e2; border-radius: 5px; }
body.home-page .topic-card, body.home-page .guide-cta, body.home-page .guide-scn, body.home-page .guide-map, body.home-page .faq-item, body.home-page .plan-tier { border-radius: 8px; box-shadow: none; }
body.home-page .topic-art { display: none; }
body.home-page .rd-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
body.home-page .rd-book, body.home-page .rd-read, body.home-page .rd-toc { border-radius: 7px; box-shadow: none; }
@media (max-width: 1050px) {
  .v5-journey { grid-template-columns: repeat(2, 1fr); }
  .v5-dashboard-grid { grid-template-columns: 1fr 1fr; }
  .v5-report-panel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --v5-rail: 0px; --v5-top: 58px; }
  body.home-page header { left: 0; padding: 0 14px; }
  body.home-page #nav { border-bottom: 1px solid var(--v5-line); border-right: 0; bottom: auto; height: 54px; overflow-x: auto; padding: 0 10px; top: var(--v5-top); white-space: nowrap; width: 100%; }
  .v5-brand, .v5-nav-title, .v5-side-book { display: none; }
  .v5-nav-scroll { display: flex; gap: 3px; height: 54px; overflow: visible; padding: 8px 0; }
  #nav .v5-nav-item { display: inline-flex; flex: 0 0 auto; min-height: 36px; padding: 6px 10px; width: auto; }
  .v5-nav-mark { display: none; }
  body.home-page main#main { margin-left: 0 !important; margin-top: calc(var(--v5-top) + 54px) !important; padding: 0 14px 48px !important; }
  body.home-page footer, body.home-page > .paid-proof { margin-left: 0; }
  .v5-hero { display: flex; flex-direction: column-reverse; margin: 0 -14px; min-height: 0; }
  .v5-hero-image { min-height: 210px; }
  .v5-hero-copy { padding: 27px 20px 30px; }
  .v5-hero h1 { font-size: 30px; }
  .v5-hero p br { display: none; }
  .v5-section-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .v5-journey { grid-template-columns: 1fr; }
  .v5-journey-card p { min-height: 0; }
  .v5-dashboard-grid { grid-template-columns: 1fr; }
  .v5-report-panel { grid-column: auto; grid-template-columns: 1fr; }
  .v5-chart-empty { grid-template-columns: 1fr; }
  .v5-chart { gap: 4px; height: 150px; padding-inline: 0; }
  .v5-report-image { min-height: 180px; }
  .v5-report-panel > div:last-child { padding: 20px; }
  body.home-page:not([data-v5-route="home"]) main { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { body.home-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }