/* CHARME refined shared site header | 2026-10-31.
   Visual-only: maintains routes, member identity, authentication, signup and drawer scripts.
   Intentionally placed LAST so older underline, full-height active panel and inset gold rule cannot overlap labels.
   Admin, studio internal navigation, the page-progress strip and content tabs are outside scope. */

body:is(.homepage,.subpage) .top.v12-header,
body:is(.homepage,.subpage) .top.v12-header.solid {
  background:linear-gradient(110deg,rgba(255,254,251,.985),rgba(250,251,247,.975))!important;
  color:#1a4234!important;
  border-bottom:1px solid #dfe7de!important;
  box-shadow:0 5px 24px rgba(16,54,39,.065)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  isolation:isolate;
}
body:is(.homepage,.subpage) .top.v12-header>.wrap {
  height:100%;min-height:0!important;max-width:1490px!important;
  width:min(calc(100% - 64px),1490px)!important;
  gap:clamp(10px,1.15vw,20px)!important;
  justify-content:space-between;
}
/* Logo: reduce visual clutter but preserve existing mark, name and brand caption. */
body:is(.homepage,.subpage) .top.v12-header .v12-logo {
  gap:10px!important;flex:0 0 auto;min-width:0!important;
  padding:4px 0;border-radius:10px;
}
body:is(.homepage,.subpage) .top.v12-header .v12-logo-mark {
  color:#af894c;font-size:39px;filter:drop-shadow(0 2px 2px #ae94521a);
}
body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-word {
  color:#153b2e;letter-spacing:-.09em;font-size:25px;line-height:1.32;
}
body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-english {
  color:#8e713e;letter-spacing:.17em;font-size:7px;line-height:1.4;opacity:.92;
}
body:is(.homepage,.subpage) .top.v12-header .v12-logo:focus-visible {outline:3px solid #b8863c;outline-offset:3px}

/* Primary menu: fixed-height rounded buttons, never a full-height slab. */
body:is(.homepage,.subpage) .top.v12-header .nav {
  min-width:0;align-items:center;gap:clamp(2px,.38vw,8px)!important;
  margin-inline:auto!important;white-space:nowrap;
}
body:is(.homepage,.subpage) .top.v12-header .nav>a {
  position:relative!important;display:inline-flex!important;align-items:center;justify-content:center;
  min-height:43px;height:auto!important;max-height:48px;
  padding:11px clamp(9px,.75vw,14px)!important;
  border:1px solid transparent!important;border-radius:13px!important;
  background:transparent!important;color:#375246!important;
  font-family:'Noto Sans KR',sans-serif;font-weight:750!important;
  font-size:clamp(12px,.82vw,13.5px)!important;line-height:1.3!important;
  letter-spacing:-.05em!important;text-align:center;
  text-decoration:none!important;text-decoration-line:none!important;
  box-shadow:none!important;opacity:1!important;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
/* Old site.css, premium, v12, v13 and member CSS drew overlapping horizontal rules.
   Remove their pseudo-element and text-decoration, including hover/current. */
body:is(.homepage,.subpage) .top.v12-header .nav>a::after,
body:is(.homepage,.subpage) .top.v12-header .nav>a:hover::after,
body:is(.homepage,.subpage) .top.v12-header .nav>a[aria-current="page"]::after,
body:is(.homepage,.subpage) .top.v12-header .nav>a[aria-current="page"]::before {
  content:none!important;display:none!important;visibility:hidden!important;
  width:0!important;height:0!important;border:0!important;background:none!important;
}
body:is(.homepage,.subpage) .top.v12-header .nav>a:hover,
body:is(.homepage,.subpage) .top.v12-header .nav>a:focus-visible,
body:is(.homepage,.subpage) .top.v12-header .nav>a:not([aria-current="page"]):is(:hover,:focus-visible),
body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .nav>a:is(:hover,:focus-visible):not([aria-current="page"]) {
  color:#174d37!important;background:#edf5ee!important;
  border-color:#e0e9e0!important;box-shadow:none!important;
  text-decoration:none!important;
}
/* Selected: subtle mint pill + clear deep-green typography, NO LINE (including inset shadow). */
body:is(.homepage,.subpage) .top.v12-header .nav>a[aria-current="page"],
body:is(.homepage,.subpage) .top.v12-header .nav>a[aria-current="page"]:is(:hover,:focus-visible),
body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .nav>a[aria-current="page"],
body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .nav>a[aria-current="page"]:is(:hover,:focus-visible) {
  color:#124733!important;background:#e4f0e7!important;
  border:1px solid #c5dccb!important;
  border-radius:13px!important;font-weight:850!important;
  box-shadow:0 2px 7px rgba(20,69,46,.065)!important;
  text-decoration:none!important;text-decoration-line:none!important;
}
/* Keep special classroom route distinct without an underline. */
body:is(.homepage,.subpage) .top.v12-header .nav>a.cm20-nav-classroom:not([aria-current="page"]) {
  color:#14513c!important;font-weight:850!important;
}
/* The formerly highlighted member dashboard remains discoverable without an oversized tab. */
body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .nav>a[href="member-dashboard.php"]:not([aria-current="page"]) {
  color:#19543d!important;background:#f0f6f0!important;border-color:#d8e7da!important;box-shadow:none!important;
}
/* Search & primary action are visually related to the new rounded nav. */
body:is(.homepage,.subpage) .top.v12-header .v12-header-search {
  display:grid;place-items:center;flex:0 0 43px;
  width:43px;height:43px;min-height:43px;margin-left:0!important;
  border:1px solid #e0e9e0;border-radius:14px;
  background:#f4f7f2;color:#1d503b;
  transition:background .18s,border-color .18s;
}
body:is(.homepage,.subpage) .top.v12-header .v12-header-search:hover {background:#e6f0e9;border-color:#b9d0bd}
body:is(.homepage,.subpage) .top.v12-header .v12-header-search svg {width:19px;height:19px}
body:is(.homepage,.subpage) .top.v12-header .header-cta {
  min-height:45px!important;padding:11px 20px!important;
  background:#134936!important;border:1px solid #134936!important;
  color:#fff!important;border-radius:999px!important;
  font-size:12px!important;font-weight:850!important;
  letter-spacing:-.03em;box-shadow:0 7px 18px rgba(17,65,44,.13)!important;
}
body:is(.homepage,.subpage) .top.v12-header .header-cta:hover,
body:is(.homepage,.subpage) .top.v12-header .header-cta:focus-visible {
  background:#20634a!important;border-color:#20634a!important;
  box-shadow:0 10px 20px rgba(16,70,45,.17)!important;transform:translateY(-1px);
}
/* Dropdown selector: keep 3 membership roles equally prominent. */
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-switcher summary {
  min-height:43px;padding:10px 15px;border-radius:13px;
  background:#f1f6ee;border-color:#d3e2d3;color:#184d39;
  font-size:13px;box-shadow:none;
}
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-switcher summary:hover,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-switcher[open] summary {
  background:#e5f0e6;border-color:#b7d2bd;color:#124733;
}
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-switcher .cm20-signup-panel {
  border:1px solid #dbe5dc;border-radius:19px;
  box-shadow:0 22px 65px rgba(15,52,34,.18),0 2px 8px rgba(15,52,34,.04);
  padding:16px;background:#fffefa;
}
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel .cm20-signup-link {
  text-decoration:none!important;border-radius:14px;
}
/* Homepage section navigation is part of the header experience.
   Remove its old selected underline too, preserving the existing sticky bar. */
body.homepage .page-progress.cm20-main-toc a {
  height:32px!important;min-height:32px;align-self:center;
  padding:6px 12px!important;border-radius:10px!important;
  background:transparent;color:#50675b;
  text-decoration:none!important;text-decoration-line:none!important;
  border:1px solid transparent;line-height:1.3;
}
body.homepage .page-progress.cm20-main-toc a::after,
body.homepage .page-progress.cm20-main-toc a[aria-current="true"]::after,
body.homepage .page-progress.cm20-main-toc a[aria-current="page"]::after {
  display:none!important;content:none!important;
}
body.homepage .page-progress.cm20-main-toc a:is(:hover,:focus-visible) {
  background:#edf4ec!important;color:#194b37!important;text-decoration:none!important;
}
body.homepage .page-progress.cm20-main-toc a:is([aria-current="true"],[aria-current="page"]) {
  background:#e6f1e8!important;border-color:#d1e2d4!important;
  color:#164934!important;font-weight:850!important;
  text-decoration:none!important;
}

/* Drawer: comfortable mobile targets, cards and current-page states with NO text strike/underline. */
body:is(.homepage,.subpage) .drawer {background:rgba(15,38,30,.43);backdrop-filter:blur(4px)}
body:is(.homepage,.subpage) .drawer[hidden] {display:none!important}
body:is(.homepage,.subpage) .drawer-panel {
  width:min(90vw,410px);max-width:min(90vw,410px);
  border-left:1px solid #dce6dd;background:#fffefa;
  padding:23px 23px calc(25px + env(safe-area-inset-bottom,0px));
  box-shadow:-10px 0 50px rgba(14,42,28,.14);
  overscroll-behavior-y:contain;
}
body:is(.homepage,.subpage) .drawer-head {padding-bottom:15px;border-bottom:1px solid #e3eae2}
body:is(.homepage,.subpage) .drawer-head .logo-word {font-size:24px;color:#183f30}
body:is(.homepage,.subpage) .drawer-close {
  display:grid;place-items:center;width:44px;min-width:44px;height:44px;
  border-radius:12px;background:#f1f5ef;color:#244c3c;font-size:29px;
}
body:is(.homepage,.subpage) .drawer-close:hover {background:#e5f0e7}
body:is(.homepage,.subpage) .drawer-panel nav {gap:3px;margin-top:13px}
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn) {
  display:flex;align-items:center;min-height:48px;
  border:1px solid transparent!important;border-radius:12px;
  padding:10px 13px!important;background:transparent;
  color:#29483a!important;font-family:'Noto Sans KR',sans-serif;
  font-size:15px!important;font-weight:700;line-height:1.5;
  text-decoration:none!important;text-decoration-line:none!important;
  box-shadow:none!important;transition:background .18s,color .18s;
}
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn)::after,
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn)[aria-current="page"]::after {
  display:none!important;content:none!important;
}
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn):hover,
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn):focus-visible {
  background:#edf5ee!important;color:#14533a!important;
}
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn)[aria-current="page"],
body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn)[aria-current="page"]:is(:hover,:focus-visible) {
  background:#e2f0e5!important;color:#124734!important;border:1px solid #c7dfcd!important;
  font-weight:850!important;box-shadow:none!important;
  text-decoration:none!important;
}
body:is(.homepage,.subpage) .drawer-panel .cm20-drawer-signup {
  border-radius:18px;background:linear-gradient(150deg,#f1f7f1,#f9fbf7);
  border-color:#d6e4d9;margin:11px 0;padding:14px;
}
body:is(.homepage,.subpage) .drawer-panel nav .cm20-drawer-signup .cm20-drawer-signup-link {
  min-height:77px;border-radius:13px;text-decoration:none!important;
}
/* Member identity and logout continue to use their original semantic/form elements. */
body:is(.homepage,.subpage) .top.v12-header .cm20-member-identity {
  border-radius:13px;background:#f2f7f2;border-color:#d0e1d2;
  box-shadow:none;
}
body:is(.homepage,.subpage) .top.v12-header .cm20-header-mobile-mypage {
  border-radius:12px;box-shadow:0 3px 10px #15523b14;
}
body:is(.homepage,.subpage) .top.v12-header .menu-btn {
  border:1px solid #dae6dc!important;border-radius:13px!important;
  background:#f2f7f1!important;color:#164632!important;
  box-shadow:none!important;
}
body:is(.homepage,.subpage) .top.v12-header .menu-btn:hover {background:#e5f0e7!important}
body:is(.homepage,.subpage) .top.v12-header .menu-btn i {background:#194737!important}

@media (min-width:1281px) {
  body:is(.homepage,.subpage) .top.v12-header .nav{display:flex!important}
  body:is(.homepage,.subpage) .top.v12-header .menu-btn{display:none!important}
}
@media (min-width:1121px) and (max-width:1280px) {
  /* The site intentionally uses a compact menu at this width: preserve it. */
  body:is(.homepage,.subpage) .top.v12-header .nav{display:none!important}
  body:is(.homepage,.subpage) .top.v12-header .menu-btn{display:flex!important;margin-left:0!important}
}
@media (max-width:1280px) {
  body:is(.homepage,.subpage) .top.v12-header>.wrap {width:calc(100% - 38px)!important;gap:10px!important}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo-mark {font-size:34px}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-word {font-size:23px}
  body:is(.homepage,.subpage) .top.v12-header .v12-header-search {display:none!important}
  body:is(.homepage,.subpage) .top.v12-header .header-cta {display:none!important}
  body:is(.homepage,.subpage) .top.v12-header .cm20-mobile-signup-trigger {
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;margin-left:auto!important;min-height:43px;
    border-radius:13px;background:#eaf3e9!important;
    color:#15513a!important;border:1px solid #c6dbca!important;
    padding:9px 15px!important;font-weight:850;font-size:13px;
  }
  body:is(.homepage,.subpage) .top.v12-header .cm20-mobile-signup-trigger:hover {background:#d9eadf!important}
  body:is(.homepage,.subpage) .top.v12-header .menu-btn {
    display:flex!important;align-items:center;justify-content:center;
    flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;
    margin-left:0!important;padding:8px!important;
  }
}
@media (max-width:1100px) {
  body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .cm20-mobile-signup-trigger {display:none!important}
  body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .cm20-header-mobile-mypage {
    margin-left:0!important;flex:0 0 auto;
  }
}
@media (max-width:760px) {
  /* Keep the original 68px header height so main/livebar positions do not jump. */
  body:is(.homepage,.subpage) .top.v12-header>.wrap {width:calc(100% - 26px)!important;gap:7px!important}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo {gap:6px!important}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo-mark {font-size:29px}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-word {font-size:21px}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-english {font-size:6px;letter-spacing:.09em}
  body:is(.homepage,.subpage) .top.v12-header .cm20-mobile-signup-trigger {font-size:12px;padding:8px 12px!important;min-height:42px}
  body:is(.homepage,.subpage) .top.v12-header .menu-btn {flex-basis:42px;width:42px;min-width:42px;height:42px;min-height:42px}
  body:is(.homepage,.subpage) .drawer-panel {padding:17px 16px calc(19px + env(safe-area-inset-bottom,0px))}
  body:is(.homepage,.subpage) .drawer-panel nav>a:not(.btn) {min-height:49px}
}
@media (max-width:390px) {
  body:is(.homepage,.subpage) .top.v12-header .v12-logo-mark {font-size:25px}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-word {font-size:19px}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-english {font-size:5.5px;letter-spacing:.04em}
  body:is(.homepage,.subpage) .top.v12-header .cm20-mobile-signup-trigger {padding:7px 9px!important;font-size:11px;min-height:40px}
  body:is(.homepage,.subpage) .top.v12-header .menu-btn {flex-basis:40px;width:40px;min-width:40px;height:40px;min-height:40px}
}
@media (max-width:350px) {
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-english {display:none}
  body:is(.homepage,.subpage) .top.v12-header .v12-logo .logo-word {font-size:18px}
  body:is(.homepage,.subpage) .top.v12-header .cm20-mobile-signup-trigger {padding:7px 8px!important}
  /* Compact member area only: role name remains accessible in the open drawer. */
  body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .cm20-member-identity {display:none!important}
  body:is(.homepage,.subpage) .top.v12-header[data-member-nav="1"] .cm20-header-mobile-mypage {margin-left:auto!important}
}
@media (prefers-reduced-motion:reduce) {
  body:is(.homepage,.subpage) .top.v12-header :is(a,button,summary),
  body:is(.homepage,.subpage) .drawer-panel nav>a {transition:none!important;transform:none!important}
}


/* 2026-10-31 / FIX: eliminate inherited horizontal lines inside signup dropdown.
   Older premium-v13.css uses .v12-header .nav a::after for ALL descendants,
   not just direct nav children; therefore nested membership cards got a gold
   hover rule across the card at bottom:22px. Completely disable those rules. */
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a::before,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a::after,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a:hover::before,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a:hover::after,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a:focus-visible::before,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a:focus-visible::after,
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a:active::after {
  content:none!important;display:none!important;visibility:hidden!important;
  width:0!important;height:0!important;bottom:auto!important;left:auto!important;
  border:0!important;background:none!important;box-shadow:none!important;
  transform:none!important;transition:none!important;
}
/* Use clean card fill and border instead of any underline or inset rule. */
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a:is(:link,:visited,:hover,:focus-visible,:active) {
  text-decoration:none!important;text-decoration-line:none!important;
  text-decoration-color:transparent!important;
  box-shadow:none!important;
}
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a.cm20-signup-link {
  position:relative!important;overflow:hidden;box-sizing:border-box;
  border:1px solid #dce8dc!important;
  background:#ffffff!important;
  box-shadow:0 2px 5px rgba(23,64,42,.025)!important;
}
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a.cm20-signup-link:is(:hover,:focus-visible) {
  border-color:#9abda6!important;
  background:#f1f7f2!important;
  box-shadow:0 7px 18px rgba(21,67,42,.09)!important;
  transform:translateY(-1px);
}
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a.cm20-signup-link:focus-visible {
  outline:2px solid #185a40!important;outline-offset:2px!important;
}
/* Keep every role at precisely the same visual weight. */
body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel .cm20-signup-symbol {
  background:#eef4ed;border:1px solid #e3eadf;
}
/* In the mobile drawer, legacy hover rules must not create decorational lines. */
body:is(.homepage,.subpage) .drawer-panel .cm20-drawer-signup-link::before,
body:is(.homepage,.subpage) .drawer-panel .cm20-drawer-signup-link::after {
  content:none!important;display:none!important;
}
body:is(.homepage,.subpage) .drawer-panel .cm20-drawer-signup-link:is(:hover,:focus-visible) {
  background:#e8f3ea!important;border-color:#9fbea7!important;
  text-decoration:none!important;box-shadow:0 4px 14px rgba(23,70,44,.08)!important;
}
@media (prefers-reduced-motion:reduce) {
  body:is(.homepage,.subpage) .top.v12-header .nav .cm20-signup-panel a.cm20-signup-link {transform:none!important;}
}