/* Korean UI typography and line-breaking rules shared by every main page. */
html[lang="ko"] body {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}

html[lang="ko"] :where(h1, h2, h3, p, a, button, strong, b, span, small) {
  word-break: keep-all;
  line-break: strict;
}

html[lang="ko"] :where(.hero h1, .section h2) {
  text-wrap: balance;
}

html[lang="ko"] .side-label,
html[lang="ko"] .section-tag,
html[lang="ko"] .footer {
  font-size: 13px;
}

html[lang="ko"] .tiny-btn {
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

html[lang="ko"] .side-topic span,
html[lang="ko"] .sample small,
html[lang="ko"] .eyebrow {
  font-size: 13px;
}

html[lang="ko"] .hero-actions a,
html[lang="ko"] .focus-item b {
  font-size: 15px;
}

html[lang="ko"] .focus-item span,
html[lang="ko"] .section-copy,
html[lang="ko"] .status {
  font-size: 14px;
  line-height: 1.55;
}

html[lang="ko"] .learning-card strong {
  max-width: 100%;
  font-size: 17px;
  white-space: nowrap;
}

html[lang="ko"] :where(.hero-actions a, .topbar a) {
  white-space: nowrap;
  text-align: center;
}

/* Lift each theme color from the lower-left while keeping the image area white. */
.hero {
  background:
    linear-gradient(90deg, transparent 0 43%, #fff 54% 100%),
    radial-gradient(ellipse 72% 105% at 10% 100%, rgba(var(--accent-rgb), .24) 0%, rgba(var(--accent-rgb), .12) 40%, transparent 72%),
    #fff;
}

.hero::after {
  display: none;
}

html[lang="ko"] .hero-portrait-rotator,
html[lang="ko"] .hero-portrait-rotator::before {
  background: #fff;
}

/* One shared First Weekly logo across every edition. */
html[lang="ko"] .brand {
  min-width: 210px;
  height: 76px;
  display: block;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 266px 75px;
  box-shadow: none;
  color: transparent;
  filter: none;
  font-size: 0;
  mix-blend-mode: normal;
  overflow: hidden;
}

html[lang="ko"] .brand .brand-mark {
  display: none;
}

/* Phonics is a shared learning program, so distinguish it from age-level colors. */
html[lang="ko"] .topbar a[href^="phonics.php"]::before {
  background: #ef5350;
  box-shadow: 0 0 0 1px rgba(198, 40, 40, .14);
}

html[lang="ko"] .topbar a.active[href^="phonics.php"] {
  border-color: #d84343;
  background: linear-gradient(135deg, #ff8a80, #ef5350 58%, #e53935);
  color: #fff;
  box-shadow: 0 8px 20px rgba(198, 40, 40, .22);
}

html[lang="ko"] .topbar a.active[href^="phonics.php"]::before {
  background: #fff;
  box-shadow: none;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-panel-toggle {
  background: linear-gradient(150deg, #eafbf1, #d4f5e2 54%, #bdecce);
  color: #173f2b;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-panel-toggle.is-open {
  background: #fff;
  color: #173f2b;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] {
  --phonics-rainbow: linear-gradient(110deg, #ff6b6b 0%, #ffd43b 34%, #51cf66 67%, #339af0 100%);
  --phonics-rainbow-soft: linear-gradient(110deg, rgba(255, 107, 107, .14), rgba(255, 212, 59, .16) 34%, rgba(81, 207, 102, .14) 67%, rgba(51, 154, 240, .14));
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .hero {
  background:
    linear-gradient(90deg, transparent 0 43%, #fff 55% 100%),
    radial-gradient(circle at 2% 100%, rgba(255, 107, 107, .2), transparent 34%),
    radial-gradient(circle at 24% 100%, rgba(255, 212, 59, .21), transparent 38%),
    radial-gradient(circle at 43% 100%, rgba(81, 207, 102, .18), transparent 36%),
    radial-gradient(circle at 56% 100%, rgba(51, 154, 240, .2), transparent 37%),
    #fff;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] :where(.sample, .hero-actions .primary) {
  border-color: transparent;
  background: var(--phonics-rainbow);
  color: #18223a;
  box-shadow: 0 9px 24px rgba(51, 154, 240, .18);
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .sample {
  color: #fff;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .sample small {
  color: #fff;
  opacity: .92;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] :where(.tiny-btn, .hero-actions .secondary, .program-stage__external, .path-chooser__close, .program-stage__close) {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--phonics-rainbow) border-box;
  color: #18223a;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] :where(.eyebrow, .path-chooser) {
  border-color: transparent;
  background: var(--phonics-rainbow-soft);
  color: #18223a;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] :where(.side-topic span, .focus-item b, .section-tag, .path-chooser__head span, .path-choice i) {
  background: var(--phonics-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] :where(.focus-item, .learning-card, .path-choice) {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--phonics-rainbow-soft) border-box;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .learning-card:hover,
html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .path-choice:hover {
  background: linear-gradient(#fff, #fff) padding-box, var(--phonics-rainbow) border-box;
  box-shadow: 0 12px 26px rgba(51, 154, 240, .13);
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .learning-card.is-selected {
  border-color: transparent;
  background: var(--phonics-rainbow-soft);
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .program-stage__title span {
  background: conic-gradient(#ff6b6b 0 25%, #ffd43b 25% 50%, #51cf66 50% 75%, #339af0 75% 100%);
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-toolbar {
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .97)) padding-box, var(--phonics-rainbow) border-box;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-toolbar__status {
  background: conic-gradient(#ff6b6b 0 25%, #ffd43b 25% 50%, #51cf66 50% 75%, #339af0 75% 100%);
  box-shadow: 0 0 0 3px rgba(51, 154, 240, .12);
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-toggle {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--phonics-rainbow) border-box;
  color: #18223a;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-toolbar.is-drawing .fw-annotation-toggle {
  border-color: transparent;
  background: var(--phonics-rainbow);
  color: #18223a;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] :where(.fw-annotation-tool.is-active, .fw-annotation-size.is-active) {
  border-color: transparent;
  background: var(--phonics-rainbow-soft);
  color: #18223a;
  box-shadow: inset 0 0 0 1px rgba(24, 34, 58, .09);
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-color.is-active {
  outline: 2px solid #18223a;
  outline-offset: 1px;
  box-shadow: none;
}

html[lang="ko"] body.theme-kinder[style*="--accent:#2e5bff"] .fw-annotation-divider {
  background: var(--phonics-rainbow);
  opacity: .42;
}

@media (max-width: 460px) {
  html[lang="ko"] .hero h1 {
    font-size: clamp(30px, 9.2vw, 36px);
    line-height: 1.18;
    letter-spacing: -1.6px;
  }
}

/* Mobile: keep every menu logo optically consistent and make age tabs swipe cleanly. */
@media (max-width: 1180px) {
  html[lang="ko"] body .side > .brand {
    background-size: 174px auto;
  }
}

@media (max-width: 820px) {
  html[lang="ko"] .topbar {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  html[lang="ko"] .topbar::-webkit-scrollbar {
    display: none;
  }

  html[lang="ko"] .topbar > a {
    scroll-snap-align: start;
  }
}

/* Desktop: place the brand in the utility row and align account controls with
   the age-navigation controls. Mobile keeps the original stacked layout. */
@media (min-width: 1181px) {
  html[lang="ko"] body.has-top-utility .side > .brand {
    position: absolute;
    top: -56px;
    left: 0;
    width: 226px;
    height: 44px;
    background-size: 174px auto;
  }

  html[lang="ko"] body.theme-video.has-top-utility .side > .brand {
    background-size: 154px auto;
  }

  html[lang="ko"] body.theme-teens.has-top-utility .side > .brand {
    background-size: 145px auto;
  }

  html[lang="ko"] body.has-top-utility .side > .side-card:first-of-type {
    min-height: 73px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
  }

  html[lang="ko"] body.has-top-utility .side > .side-card:first-of-type .side-label {
    display: none;
  }

  html[lang="ko"] body.has-top-utility .side > .side-card:first-of-type .account-row {
    width: 100%;
  }

  html[lang="ko"] body.has-top-utility .side > .side-card:first-of-type .tiny-btn {
    min-height: 50px;
    border-radius: 14px;
  }
}