:root {
  --ink: #17212b;
  --ink-soft: #52616c;
  --muted: #64717b;
  --line: #dbeef7;
  --paper: #f2fafd;
  --paper-deep: #e2f4fb;
  --mint: #5cc7e8;
  --mint-dark: #2a9fc4;
  --mint-deep: #17758f;
  --rose: #d97ba9;
  --cream: #f3eee6;
  --white: #fff;
  /* 카드 등 '표면'용. --white 는 흰 글자로도 쓰이므로 배경은 이 토큰을 쓴다. */
  --surface: #fff;
  --shadow: 0 28px 70px rgba(10, 60, 80, .12);
  --radius-lg: 30px;
  --radius-md: 20px;
  --shell: 1180px;
  /* 로고 원색. 큰 면이나 글자에는 쓰지 않는다 — 대비가 모자라 안 읽힌다.
     테두리·점·배지처럼 작은 장식에만. */
  --mint-soft: #97dcf0;
  --rose-soft: #e396bc;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.015em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.nav-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 14px;
  color: var(--white);
  background: var(--mint-deep);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(220, 232, 228, .86);
}

/* background + backdrop-filter를 ::before로 분리.
   backdrop-filter를 헤더 자체에 두면 position:fixed인 .primary-nav의
   containing block이 헤더로 바뀌어 모바일 nav가 헤더 높이(~78px)에
   갇히는 버그가 발생하므로 pseudo-element에서 처리. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  display: block;
  width: 38px;
  height: 38px;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.brand strong {
  display: block;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: .08em;
}

.brand small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.primary-nav {
  display: block;
}

.primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-menu li { position: relative; list-style: none; }
.menu-item-row { display: flex; align-items: center; }

.primary-menu > .menu-item > .menu-item-row > a {
  position: relative;
  padding: 27px 0 24px;
  color: #46545e;
  font-size: 16px;
  font-weight: 700;
}

.primary-menu > .menu-item > .menu-item-row > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  border-radius: 14px;
  background: var(--mint);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.primary-menu > .menu-item > .menu-item-row > a:hover::after,
.primary-menu > .menu-item > .menu-item-row > a:focus-visible::after { transform: scaleX(1); }

.submenu-toggle {
  display: inline-grid;
  width: 24px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  color: #65727b;
  background: transparent;
  cursor: pointer;
}

.submenu-toggle span { display: block; transition: transform .18s ease; }
.menu-item-has-children:hover > .menu-item-row > .submenu-toggle span,
.menu-item-has-children:focus-within > .menu-item-row > .submenu-toggle span,
.menu-item-has-children[data-submenu-open="true"] > .menu-item-row > .submenu-toggle span { transform: rotate(180deg); }

.sub-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  z-index: 120;
  display: none;
  min-width: 220px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(220, 232, 228, .95);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 55px rgba(20, 74, 66, .16);
}

.sub-menu-align-end { right: 0; left: auto; }
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children[data-submenu-open="true"] > .sub-menu { display: block; }

.sub-menu .menu-item-row { justify-content: space-between; }
.sub-menu a {
  display: block;
  flex: 1;
  padding: 11px 13px;
  border-radius: 14px;
  color: #46545e;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.sub-menu a:hover,
.sub-menu a:focus-visible { color: var(--mint-deep); background: var(--paper-deep); }
.sub-menu .submenu-toggle { width: 30px; height: 38px; }
.sub-menu .menu-item-has-children > .sub-menu { top: -10px; left: calc(100% + 8px); }

.header-account {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.account-state {
  max-width: 155px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #d5a23e;
}

.account-state[data-state="logged-in"]::before { background: #42b578; }
.account-state[data-state="logged-out"]::before { background: #9aa6ae; }
.account-state[data-state="error"]::before { background: #d46868; }

.header-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 14px;
  color: var(--white);
  background: linear-gradient(135deg, var(--mint-dark) 0%, var(--mint-deep) 100%);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .15s;
}
.header-account-link:hover { opacity: .88; }

.header-account-link-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid rgba(0,0,0,.15);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s;
}
.header-account-link-2:hover { background: rgba(0,0,0,.05); }

.menu-button { display: none; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 108px 0 104px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 80% 8%, rgba(39, 188, 214, .32), transparent 32%),
    radial-gradient(ellipse at 6% 88%, rgba(200, 88, 135, .18), transparent 26%),
    radial-gradient(ellipse at 48% 120%, rgba(39, 188, 214, .10), transparent 40%),
    linear-gradient(180deg, #f4f9fc 0%, #e2f2f8 100%);
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 117, 143, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 117, 143, .034) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  align-items: center;
  gap: 70px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--mint-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
}

.eyebrow span {
  width: 30px;
  height: 2px;
  background: var(--rose);
}

.eyebrow-light { color: #9ae0d2; }
.eyebrow-light span { background: #f0b4cd; }

.hero h1 {
  margin: 0;
  font-size:clamp(48px,4.0vw,48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.062em;
}

.hero h1 em { color: var(--mint-dark); font-style: normal; }

.hero-lead {
  max-width: 620px;
  margin: 27px 0 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.78;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-2px); }

/* 흰 글자를 얹으므로 진한 쪽으로 채운다. 로고 색(#97dcf0)을 그대로 쓰면
   흰 글자 대비가 1.95:1 이라 읽히지 않는다. 같은 계열의 진한 끝을 쓴다. */
/* ★ 채움은 background-color 로 준다.
   아래쪽 `.button, .button-primary` 규칙이 background-image 만 다시 지정하는데,
   여기서 background 축약형을 쓰면 그 image 가 우리 그라디언트를 덮어 버려
   **버튼에 색이 아예 없어진다**(실제로 그랬다 — 흰 배경에 흰 글자).
   흰 글자를 얹으므로 진한 쪽으로 채운다. 로고 색을 그대로 쓰면 대비 1.95:1 이다. */
.button-primary {
  color: var(--white);
  background-color: var(--mint-dark);
  box-shadow: 0 16px 34px rgba(23, 117, 143, .24);
}

.button-secondary { border-color: #ccd9d5; background: rgba(255, 255, 255, .74); }
.button-light { color: var(--mint-deep); background: var(--white); }
.button-outline { color: var(--white); border-color: rgba(255, 255, 255, .34); }

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 25px;
  margin: 29px 0 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.trust-list li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(39, 188, 214, .14);
}

.service-orbit {
  position: relative;
  width: min(100%, 510px);
  aspect-ratio: 1;
  margin-left: auto;
}

.orbit-surface {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .98) 0 30%, rgba(228, 245, 239, .72) 31% 59%, rgba(255, 255, 255, .38) 60% 100%);
  box-shadow: 0 42px 90px rgba(25, 92, 82, .15);
}

.orbit-ring {
  position: absolute;
  border: 1px solid rgba(36, 130, 117, .2);
  border-radius: 50%;
}

.orbit-ring-one { inset: 20%; }
.orbit-ring-two { inset: 5%; border-style: dashed; animation: orbit-spin 36s linear infinite; }

.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 208px;
  height: 208px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(226, 244, 238, .96));
  box-shadow: 0 22px 55px rgba(23, 117, 143, .17);
  transform: translate(-50%, -50%);
}

.orbit-center small { color: var(--rose); font-size: 13px; font-weight: 700; letter-spacing: .13em; }
.orbit-center strong { margin-top: 9px; font-size: 19px; line-height: 1.25; }
.orbit-center span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.orbit-node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 106px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 16px 36px rgba(33, 85, 77, .13);
  transition: transform .2s ease, box-shadow .2s ease;
}

.orbit-node:hover,
.orbit-node:focus-visible { transform: translateY(-3px); box-shadow: 0 21px 44px rgba(33, 85, 77, .18); }
.orbit-node b { font-size: 16px; }
.orbit-node span { margin-top: 2px; color: var(--muted); font-size: 13px; }
.orbit-health { top: 2%; left: 50%; margin-left: -53px; }
.orbit-program { top: 50%; right: 0; margin-top: -53px; }
.orbit-community { bottom: 2%; left: 50%; margin-left: -53px; }
.orbit-care { top: 50%; left: 0; margin-top: -53px; }
.orbit-health b { color: var(--mint-dark); }
.orbit-program b { color: #416f9c; }
.orbit-community b { color: #795ca3; }
.orbit-care b { color: #a06f29; }

.section { padding: 100px 0; }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  align-items: end;
  gap: 50px;
  margin-bottom: 42px;
}

.section-heading h2,
.journey-intro h2,
.closing-grid h2 {
  margin: 0;
  font-size:clamp(34px,4.0vw,48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.section-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 16px; line-height: 1.75; }

.services-section { background: var(--paper); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: transform .26s ease, box-shadow .26s ease;
}

.service-card:hover,
.service-card:focus-visible {
  z-index: 1;
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(15,50,44,.18);
}

.sc-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 22px 18px;
  min-height: 118px;
  background: linear-gradient(140deg, var(--card-bg1, #1da391), var(--card-bg2, #0d5e57));
}

.sc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.2);
  color: #fff;
  flex-shrink: 0;
}
.sc-icon svg { width: 24px; height: 24px; }

.sc-num {
  color: rgba(255,255,255,.28);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  align-self: flex-start;
}

.sc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px;
}
.sc-body small {
  display: block;
  color: var(--card-accent, var(--mint-dark));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 8px;
}
.sc-body h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.sc-body p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.72; }

.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid rgba(0,0,0,.06);
  color: var(--card-accent, var(--mint-dark));
  font-size: 13px;
  font-weight: 700;
}

.tone-mint  { --card-accent: #2a9fc4; --card-bg1: #5cc7e8; --card-bg2: #0d7a92; }
.tone-blue  { --card-accent: #3460a0; --card-bg1: #4278b8; --card-bg2: #284d88; }
.tone-violet{ --card-accent: #7659a0; --card-bg1: #8a6bb5; --card-bg2: #5a4282; }
.tone-amber { --card-accent: #8c5f1a; --card-bg1: #b47728; --card-bg2: #7a4f14; }
.tone-rose  { --card-accent: #a84d72; --card-bg1: #c45c87; --card-bg2: #883858; }
.tone-slate { --card-accent: #526875; --card-bg1: #617a88; --card-bg2: #405060; }

.journey-section {
  color: var(--white);
  background:
    radial-gradient(circle at 12% 15%, rgba(39, 188, 214, .22), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(212, 87, 154, .16), transparent 26%),
    #0c2136;
}

.journey-grid { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: 90px; align-items: start; }
.journey-intro > p:not(.eyebrow) { margin: 24px 0 0; color: #b0cdd8; font-size: 16px; line-height: 1.78; }
.journey-intro > a { display: inline-flex; gap: 20px; margin-top: 30px; color: #7dd8ea; font-size: 16px; font-weight: 700; }
.journey-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .17); border-left: 1px solid rgba(255, 255, 255, .17); }
.journey-steps li { display: grid; grid-template-columns: auto 1fr; min-height: 200px; gap: 18px; padding: 28px; border-right: 1px solid rgba(255, 255, 255, .17); border-bottom: 1px solid rgba(255, 255, 255, .17); align-items: start; }
.journey-steps li > span { color: rgba(39, 188, 214, .50); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-top: -4px; }
.journey-steps strong { display: block; font-size: 19px; font-weight: 700; }
.journey-steps p { margin: 10px 0 0; color: #b5cac5; font-size: 13px; line-height: 1.72; }

.content-section { background: var(--paper); }
.text-link { justify-self: end; margin-bottom: 4px; color: var(--mint-dark); font-size: 16px; font-weight: 700; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.content-card { position: relative; min-height: 300px; padding: 36px 34px; border: 1px solid rgba(0,0,0,.07); border-radius: var(--radius-md); background: var(--white); overflow: hidden; display: flex; flex-direction: column;
  /* 어두운 섹션(.page-section--dark) 은 글자를 흰색으로 만든다. 카드는 흰
     바탕이므로 제 글자색을 스스로 되돌려야 한다 — 안 그러면 제목이 안 보인다. */
  color: var(--ink); }
.content-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rose); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.content-card time { color: var(--rose); font-size: 13px; font-weight: 700; letter-spacing: .13em; }
.content-card h3 { margin: 24px 0 0; font-size: 26px; font-weight: 700; }
.content-card p { margin: 13px 0 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.content-card > a { display: inline-flex; margin-top: auto; padding-top: 26px; color: var(--mint-dark); font-size: 13px; font-weight: 700; }

.closing-section { padding: 92px 0; color: var(--white); background: linear-gradient(140deg, #0b3d54 0%, #2a9fc4 55%, #092e40 100%); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); align-items: center; gap: 80px; }
.closing-grid > div:last-child > p { margin: 0; color: #c1e0db; font-size: 16px; line-height: 1.78; }

/* 옛 푸터(어두운 남색 + 링크 4개) 규칙은 2026-08-23 에 걷어냈다.
   .footer-brand · .footer-links · .footer-copy 를 새 사업자 정보 푸터와
   같은 이름으로 쓰고 있어서 서로 간섭했다 — 면회원만 라이트 모드에서
   푸터가 남색으로 나오던 원인이다. 푸터 스타일은 footer.css 한 곳이 맡는다. */

@keyframes orbit-spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .header-inner { gap: 20px; }
  .account-state { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr); gap: 40px; }
  .service-orbit { max-width: 460px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* 좌우 여백은 어느 폭에서나 24px — 기본값과 같다 (2026-09-16) */
  .shell { width: min(100% - 48px, var(--shell)); }
  .header-inner { grid-template-columns: 1fr auto auto; min-height: 70px; }
  .menu-button {
    order: 3;
    display: inline-flex;
    width: 43px;
    height: 43px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
  }
  .menu-button i { width: 18px; height: 2px; border-radius: 14px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .menu-button[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: none;
    padding: 26px 24px 40px;
    overflow-y: auto;
    background: rgba(247, 251, 249, .98);
    backdrop-filter: blur(18px);
  }
  .primary-nav[data-open="true"] { display: block; }
  .primary-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .primary-menu > .menu-item { border-bottom: 1px solid var(--line); }
  .primary-menu > .menu-item > .menu-item-row > a { flex: 1; padding: 18px 4px; font-size: 19px; }
  .primary-menu > .menu-item > .menu-item-row > a::after { display: none; }
  .primary-menu > .menu-item > .menu-item-row > .submenu-toggle { width: 46px; height: 52px; font-size: 19px; }
  .sub-menu,
  .sub-menu .menu-item-has-children > .sub-menu {
    position: static;
    min-width: 0;
    margin: 0 0 10px 12px;
    padding: 6px;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .sub-menu a { padding: 12px 10px; font-size: 16px; white-space: normal; }
  .sub-menu .submenu-toggle { width: 42px; height: 42px; font-size: 19px; }
  .menu-item-has-children:hover > .sub-menu,
  .menu-item-has-children:focus-within > .sub-menu { display: none; }
  .menu-item-has-children[data-submenu-open="true"] > .sub-menu { display: block; }
  .header-account { justify-self: end; }
  .header-account-link { min-height: 40px; }
  .hero { padding: 72px 0 78px; }
  .hero-grid { grid-template-columns: 1fr; gap: 58px; }
  .hero-copy { max-width: 700px; }
  .service-orbit { margin-inline: auto; }
  .section { padding: 78px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .section-heading > p { max-width: 620px; }
  .journey-grid { grid-template-columns: 1fr; gap: 45px; }
  .closing-grid { grid-template-columns: 1fr; gap: 38px; }
}

/* ── 좁은 화면에서 헤더가 넘치던 문제 ─────────────────────────────
   우측에 언어 버튼이 하나 더 붙으면서 로고+언어+테마+회원가입+로그인이
   390px 안에 들어가지 못했다. 실측하면 71px 이 화면 밖으로 나갔고,
   그 바람에 햄버거 버튼이 left=417(화면 390) 로 밀려나 눌리지 않았다.
   가로로 넘치지 않게 만드는 것이 메뉴 버튼을 되살리는 일과 같다.
   좁은 화면에서는 회원가입을 접는다. 로그인 안에서 가입으로 갈 수 있다. */
@media (max-width: 860px) {
  .header-inner { min-width: 0; }
  .header-account { gap: 8px; min-width: 0; flex-wrap: nowrap; }
  /* 회원가입을 숨기지 않는다. 좁은 화면이라고 가입 버튼이 사라지면
     처음 온 사람이 가입할 자리를 잃는다. 대신 글자와 여백을 줄인다. */
  .header-account-link-2 {
    padding-inline: 9px; font-size: 13px; min-height: 34px; white-space: nowrap;
  }
  /* ★ hidden 이 아니라 clip 이다 (2026-09-02 실측 · 대표님 지적)
     hidden 은 이 칸을 스크롤 상자로 만들어 안쪽 position:sticky 를 죽인다.
     390px 에서 홈 헤더가 스크롤과 함께 흘러가던 원인이 이 한 줄이었다.
     clip 은 자르되 스크롤 상자를 만들지 않아 좌우 밀림 방지는 그대로 두고
     고정만 되살린다. 앞줄 hidden 은 clip 을 모르는 옛 브라우저 몫이다. */
  html, body { overflow-x: hidden; overflow-x: clip; }
}

@media (max-width: 520px) {
  .header-account { gap: 6px; }
  .header-account-link { min-height: 34px; padding-inline: 10px; font-size: 13px; }
  .header-lang-btn,
  .header-theme-toggle { width: 34px; height: 34px; }
  .menu-button { width: 38px; height: 38px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* ☠ 2026-09-16 대표님 「도대체 왜 화면 맨 끝부분에 글자들이 붙는거냐고 ;;
     여백어디갔어」 — 여기가 좌우를 12px 씩만 줬다. 폰 390px 에서 전수로
     재니 287곳이 가장자리에 붙어 있었다(tools/audit_gutter.py).
     기본값·860px 구간과 같은 24px 로 올린다(8의 배수). */
  .shell { width: min(100% - 48px, var(--shell)); }
  .brand small { display: none; }
  .brand strong { font-size: 16px; }
  .brand-mark { width: 34px; height: 34px; }
  .header-account-link { min-height: 38px; padding-inline: 13px; font-size: 13px; }
  .hero { padding: 60px 0 68px; }
  .eyebrow { font-size: 13px; }
  .hero h1 { font-size:clamp(34px,4.0vw,48px); }
  .hero-lead { font-size: 16px; line-height: 1.72; }
  .button { width: 100%; min-height: 54px; }
  .trust-list { display: grid; gap: 11px; }
  .service-orbit { width: min(100%, 390px); }
  .orbit-center { width: 165px; height: 165px; padding: 18px; }
  .orbit-center strong { font-size: 16px; }
  .orbit-center span { font-size: 13px; }
  .orbit-node { width: 82px; height: 82px; }
  .orbit-node b { font-size: 13px; }
  .orbit-node span { font-size: 13px; }
  .orbit-health, .orbit-community { margin-left: -41px; }
  .orbit-program, .orbit-care { margin-top: -41px; }
  .section { padding: 68px 0; }
  .section-heading h2, .journey-intro h2, .closing-grid h2 { font-size: 34px; }
  .service-grid { grid-template-columns: 1fr; }
  .sc-head { min-height: 96px; padding: 18px; }
  .sc-num { font-size: 34px; }
  .sc-icon { width: 46px; height: 46px; border-radius: 14px; }
  .sc-body h3 { font-size: 19px; }
  .journey-steps { grid-template-columns: 1fr; }
  .journey-steps li { min-height: 145px; padding: 22px; gap: 14px; }
  .journey-steps li > span { font-size: 48px; }
  .content-grid { grid-template-columns: 1fr; gap: 10px; }
  .content-card { min-height: 240px; padding: 30px 24px; }
  .text-link { justify-self: start; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Public home refinement: replace the decorative orbit with a readable service atlas. */
.platform-panel {
  position: relative;
  width: min(100%, 560px);
  min-height: 510px;
  margin-left: auto;
  padding: 26px;
  overflow: hidden;
  color: #e9f5f1;
  border: 1px solid rgba(185, 237, 222, .22);
  border-radius: 20px;
  background: radial-gradient(circle at 82% 14%, rgba(39, 188, 214, .22), transparent 28%), radial-gradient(circle at 12% 92%, rgba(212, 87, 154, .18), transparent 28%), linear-gradient(145deg, #0b1e34 0%, #0e3554 57%, #091728 100%);
  box-shadow: 0 34px 74px rgba(11, 59, 51, .22);
}
.platform-panel::before, .platform-panel::after { content: ""; position: absolute; border: 1px solid rgba(39, 188, 214, .14); border-radius: 50%; pointer-events: none; }
.platform-panel::before { width: 470px; height: 470px; top: 82px; right: -157px; }
.platform-panel::after { width: 310px; height: 310px; bottom: -146px; left: -90px; }
.platform-panel-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; color: #8dd8ea; font-size: 13px; font-weight: 700; letter-spacing: .13em; }
.platform-panel-top strong { color: #f6d7a2; font-size: 13px; }
.platform-core { position: relative; z-index: 1; max-width: 295px; margin: 55px 0 49px; padding: 24px 0 24px 25px; border-left: 2px solid #5cc7e8; }
.platform-core small { display: block; color: #6dd4e8; font-size: 13px; font-weight: 700; letter-spacing: .14em; }
.platform-core strong { display: block; margin: 12px 0 11px; color: #fff; font-size: 34px; line-height: 1.18; letter-spacing: -.05em; }
.platform-core p { margin: 0; color: #a8c8d8; font-size: 13px; }
.platform-links { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.platform-link { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; min-height: 93px; padding: 16px; border: 1px solid rgba(207, 242, 233, .15); border-radius: 20px; background: rgba(255, 255, 255, .06); transition: transform .2s ease, background .2s ease; }
.platform-link:hover, .platform-link:focus-visible { transform: translateY(-3px); background: rgba(255, 255, 255, .12); }
.platform-link > span { grid-row: span 2; color: #5dd4e8; font-size: 13px; font-weight: 700; }
.platform-link b { align-self: end; color: #fff; font-size: 16px; }
.platform-link small { grid-column: 2; color: #aacbc3; font-size: 13px; }
.platform-link-health { border-color: rgba(39, 188, 214, .44); background: rgba(39, 188, 214, .13); }
.services-section .section-heading h2 { font-size:clamp(34px,4.0vw,48px); line-height: 1.08; letter-spacing: -.058em; font-weight: 700; }

@media (max-width: 980px) { .platform-panel { width: 100%; max-width: 620px; margin: 0; } }
@media (max-width: 620px) {
  .platform-panel { min-height: 0; padding: 21px; border-radius: 20px; }
  .platform-core { margin: 36px 0; }
  .platform-core strong { font-size: 26px; }
  .platform-link { min-height: 86px; padding: 13px; }
  .platform-link b { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   다크 모드 — 사용자 컴퓨터(OS) 설정을 그대로 따른다. 토글 없음.
   토큰만 뒤집고, 토큰을 쓰지 않는 소수의 하드코딩 표면만 따로 잡는다.
   2026-08-22 추가.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) { --ink: #e9eff2;
    --ink-soft: #a9b8c1;
    --muted: #8494a0;
    --line: #22333d;
    --paper: #101c22;
    --paper-deep: #0b151b;
    --mint: #4fc7dd;
    --mint-dark: #6ad6e8;
    --mint-deep: #9fe6f2;
    --rose: #e78ab8;
    --cream: #1b1915;
    /* --white 는 뒤집지 않는다. 어두운 배경 위 흰 글자로도 쓰이기 때문이다.
       배경으로 쓰인 곳은 아래에서 --surface 로 따로 지정한다. */
    --surface: #152229;
    --shadow: 0 28px 70px rgba(0, 0, 0, .5); }
  html:not(.atv-light) { background: var(--paper); }
  html:not(.atv-light) body { background: #0a1217; }
  html:not(.atv-light) /* 토큰을 쓰지 않는 표면들 */
  .site-footer { background: #0a1217; }
  html:not(.atv-light) /* 히어로 — 프로그램 페이지와 같은 문법: 깊은 잉크 바탕 + 액센트 광원 2겹.
     밝은 그라디언트를 그대로 두면 밝은 배경 위 밝은 글자가 되어 글자가 사라진다. */
  .hero { background:
      radial-gradient(52% 46% at 18% 16%, rgba(79,199,221,.20) 0%, transparent 62%),
      radial-gradient(46% 42% at 84% 76%, rgba(231,138,184,.14) 0%, transparent 66%),
      linear-gradient(150deg, #0d1a20 0%, #12242c 58%, #0a1217 100%); }
  html:not(.atv-light) .hero-grid-bg { opacity: .10; }
  html:not(.atv-light) .hero h1 { color: #f2f7f9; }
  html:not(.atv-light) .hero-lead, html:not(.atv-light) .hero p { color: #a9b8c1; }
  html:not(.atv-light) .trust-list li { color: #a9b8c1; }
  html:not(.atv-light) /* --white 를 배경으로 쓰던 곳만 어두운 표면으로 바꾼다 */
  body { background: #0a1217; }
  html:not(.atv-light) .service-card, html:not(.atv-light) .content-card, html:not(.atv-light) .button-light, html:not(.atv-light) .menu-button { background: var(--surface); }
  html:not(.atv-light) .content-card, html:not(.atv-light) .service-card, html:not(.atv-light) .platform-panel, html:not(.atv-light) .help-card, html:not(.atv-light) .message-card, html:not(.atv-light) .badge-card, html:not(.atv-light) .stat-cell { background: var(--surface); }
  html:not(.atv-light) /* 밝은 배경 위 전제로 잡힌 버튼 */
  .button-light, html:not(.atv-light) .button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
  html:not(.atv-light) /* 접근성 건너뛰기 링크 — 포커스 시 보여야 하므로 대비를 확보한다 */
  .skip-link { background: #152229; color: #fff; border: 1px solid #4fc7dd; }
  html:not(.atv-light) /* 이미지가 다크에서 지나치게 튀지 않게 */
  img:not([src$=".svg"]) { filter: brightness(.94); }
}


/* ══════════════════════════════════════════════════════════════
   깊이(입체감) — 그림자 2겹 + 가장자리 하이라이트.
   한 겹짜리 그림자는 스티커처럼 보이고, 가까운 겹과 먼 겹을 함께 써야
   요소가 지면에서 떠 있는 것처럼 읽힌다. 2026-08-22 추가.
   ══════════════════════════════════════════════════════════════ */
:root {
  --elev-1: 0 1px 2px rgba(12,32,42,.09), 0 8px 20px -6px rgba(12,32,42,.16);
  --elev-2: 0 3px 6px rgba(12,32,42,.11), 0 22px 46px -14px rgba(12,32,42,.26);
  --elev-3: 0 6px 14px rgba(12,32,42,.13), 0 48px 90px -22px rgba(12,32,42,.36);
  --edge: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(12,32,42,.05);
}

.service-card,
.content-card,
.platform-panel,
.help-card,
.message-card,
.badge-card,
.stat-cell {
  box-shadow: var(--elev-1), var(--edge);
  transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s, border-color .26s;
}
.service-card:hover,
.content-card:hover,
.help-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--elev-3), var(--edge);
}

/* 광택 한 겹. background-image 만 건드린다 — 채움색은 각 버튼이 정한다. */
.button, .button-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 6px rgba(0,0,0,.14),
              0 14px 32px -12px rgba(42,159,196,.5);
  transition: transform .2s, box-shadow .2s;
}
.button:hover, .button-primary:hover { transform: translateY(-2px); }
.button:active, .button-primary:active { transform: translateY(0); }

.site-header { box-shadow: 0 1px 0 rgba(12,32,42,.05), 0 10px 30px -22px rgba(12,32,42,.5); }

@media (prefers-color-scheme: dark) {
  html:not(.atv-light) { --elev-1: 0 1px 2px rgba(0,0,0,.45), 0 8px 20px -6px rgba(0,0,0,.55);
    --elev-2: 0 3px 8px rgba(0,0,0,.5), 0 22px 46px -14px rgba(0,0,0,.65);
    --elev-3: 0 6px 16px rgba(0,0,0,.55), 0 48px 90px -22px rgba(0,0,0,.75);
    --edge: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.35); }
  html:not(.atv-light) .site-header { box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 12px 34px -22px rgba(0,0,0,.9); }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .content-card, .help-card, .button, .button-primary { transition: none; }
  .service-card:hover, .content-card:hover, .help-card:hover,
  .button:hover, .button-primary:hover { transform: none; }
}

/* ATV-THEME-TOGGLE */
/* 수동 토글(html.atv-dark) — 위 미디어 블록과 같은 내용이며
   make_theme_toggle.py 가 자동 생성한다. 직접 고치지 말 것. */
html.atv-dark { --ink: #e9eff2;
    --ink-soft: #a9b8c1;
    --muted: #8494a0;
    --line: #22333d;
    --paper: #101c22;
    --paper-deep: #0b151b;
    --mint: #4fc7dd;
    --mint-dark: #6ad6e8;
    --mint-deep: #9fe6f2;
    --rose: #e78ab8;
    --cream: #1b1915;
    /* --white 는 뒤집지 않는다. 어두운 배경 위 흰 글자로도 쓰이기 때문이다.
       배경으로 쓰인 곳은 아래에서 --surface 로 따로 지정한다. */
    --surface: #152229;
    --shadow: 0 28px 70px rgba(0, 0, 0, .5); }
html.atv-dark { background: var(--paper); }
html.atv-dark body { background: #0a1217; }
html.atv-dark /* 토큰을 쓰지 않는 표면들 */
  .site-footer { background: #0a1217; }
html.atv-dark /* 히어로 — 프로그램 페이지와 같은 문법: 깊은 잉크 바탕 + 액센트 광원 2겹.
     밝은 그라디언트를 그대로 두면 밝은 배경 위 밝은 글자가 되어 글자가 사라진다. */
  .hero { background:
      radial-gradient(52% 46% at 18% 16%, rgba(79,199,221,.20) 0%, transparent 62%),
      radial-gradient(46% 42% at 84% 76%, rgba(231,138,184,.14) 0%, transparent 66%),
      linear-gradient(150deg, #0d1a20 0%, #12242c 58%, #0a1217 100%); }
html.atv-dark .hero-grid-bg { opacity: .10; }
html.atv-dark .hero h1 { color: #f2f7f9; }
html.atv-dark .hero-lead, html.atv-dark .hero p { color: #a9b8c1; }
html.atv-dark .trust-list li { color: #a9b8c1; }
html.atv-dark /* --white 를 배경으로 쓰던 곳만 어두운 표면으로 바꾼다 */
  body { background: #0a1217; }
html.atv-dark .service-card, html.atv-dark .content-card, html.atv-dark .button-light, html.atv-dark .menu-button { background: var(--surface); }
html.atv-dark .content-card, html.atv-dark .service-card, html.atv-dark .platform-panel, html.atv-dark .help-card, html.atv-dark .message-card, html.atv-dark .badge-card, html.atv-dark .stat-cell { background: var(--surface); }
html.atv-dark /* 밝은 배경 위 전제로 잡힌 버튼 */
  .button-light, html.atv-dark .button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
html.atv-dark /* 접근성 건너뛰기 링크 — 포커스 시 보여야 하므로 대비를 확보한다 */
  .skip-link { background: #152229; color: #fff; border: 1px solid #4fc7dd; }
html.atv-dark /* 이미지가 다크에서 지나치게 튀지 않게 */
  img:not([src$=".svg"]) { filter: brightness(.94); }
html.atv-dark { --elev-1: 0 1px 2px rgba(0,0,0,.45), 0 8px 20px -6px rgba(0,0,0,.55);
    --elev-2: 0 3px 8px rgba(0,0,0,.5), 0 22px 46px -14px rgba(0,0,0,.65);
    --elev-3: 0 6px 16px rgba(0,0,0,.55), 0 48px 90px -22px rgba(0,0,0,.75);
    --edge: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.35); }
html.atv-dark .site-header { box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 12px 34px -22px rgba(0,0,0,.9); }

/* ── 테마 토글 버튼 (크기 고정) ─────────────────────────────────
   Astra 등 테마가 button 에 padding/min-width 를 주면 원형이 찌그러진다.
   flex 축소까지 막아 어디서나 같은 크기로 보이게 한다. */
.site-header .header-theme-toggle,
.header-theme-toggle{
  box-sizing:border-box;
  display:inline-grid;place-items:center;
  width:38px;min-width:38px;max-width:38px;
  height:38px;min-height:38px;
  flex:0 0 38px;
  padding:0;margin-right:8px;
  border:1px solid var(--atovia-header-line,var(--line,#dbeef7));
  border-radius:50%;
  background:transparent;
  color:var(--atovia-header-muted,var(--muted,#6b7882));
  font-size:16px;line-height:1;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.site-header .header-theme-toggle:hover,
.header-theme-toggle:hover{
  color:var(--atovia-header-mint,var(--mint,#5cc7e8));
  border-color:var(--atovia-header-mint,var(--mint,#5cc7e8));
  background:rgba(59,170,152,.10);
}
.header-theme-toggle:focus-visible{
  outline:2px solid var(--atovia-header-mint,var(--mint,#5cc7e8));outline-offset:2px;
}
.header-theme-icon{font-weight:700;letter-spacing:0;}
@media (max-width:600px){
  .site-header .header-theme-toggle,
  .header-theme-toggle{width:34px;min-width:34px;max-width:34px;height:34px;flex:0 0 34px;margin-right:4px;}
}

/* ── 헤더 다크 (atovia.kr 메인은 shared-header.css 를 불러오지 않는다) ── */
@media (prefers-color-scheme: dark){
  html:not(.atv-light) .site-header{
    --atovia-header-ink:#e9eff2;
    --atovia-header-muted:#9fb0bb;
    --atovia-header-line:#22333d;
    border-bottom-color:rgba(34,51,61,.9);
  }
  html:not(.atv-light) .site-header::before{background:rgba(13,25,31,.92);}
  html:not(.atv-light) .site-header .primary-menu > .menu-item > .menu-item-row > a{color:#cdd9e0;}
  html:not(.atv-light) .site-header .submenu-toggle{color:#9fb0bb;}
  html:not(.atv-light) .site-header .sub-menu{
    background:#152229;border-color:#22333d;box-shadow:0 22px 60px rgba(0,0,0,.55);}
  html:not(.atv-light) .site-header .sub-menu a{color:#cdd9e0;}
  html:not(.atv-light) .site-header .sub-menu a:hover,
  html:not(.atv-light) .site-header .sub-menu a:focus-visible{color:#7fe0cf;background:#1b2f38;}
  html:not(.atv-light) .site-header .brand strong,
  html:not(.atv-light) .site-header .brand-mark{color:#e9eff2;}
  html:not(.atv-light) .site-header .menu-button{background:#152229;}
  html:not(.atv-light) .site-header .primary-nav{background:#0f1a20;border-color:#22333d;}
  html:not(.atv-light) .site-header .primary-nav a{color:#cdd9e0;}
  html:not(.atv-light) .site-header .primary-nav .sub-menu{background:#101c22;border-color:#22333d;}
  html:not(.atv-light) .site-header .primary-nav .sub-menu a{color:#b8c7d1;}
  html:not(.atv-light) .site-header .primary-menu > .menu-item{border-color:#22333d;}
  html:not(.atv-light) .site-header .menu-button{color:#cdd9e0;}
}
html.atv-dark .site-header{
  --atovia-header-ink:#e9eff2;
  --atovia-header-muted:#9fb0bb;
  --atovia-header-line:#22333d;
  border-bottom-color:rgba(34,51,61,.9);
}
html.atv-dark .site-header::before{background:rgba(13,25,31,.92);}
html.atv-dark .site-header .primary-menu > .menu-item > .menu-item-row > a{color:#cdd9e0;}
html.atv-dark .site-header .submenu-toggle{color:#9fb0bb;}
html.atv-dark .site-header .sub-menu{
  background:#152229;border-color:#22333d;box-shadow:0 22px 60px rgba(0,0,0,.55);}
html.atv-dark .site-header .sub-menu a{color:#cdd9e0;}
html.atv-dark .site-header .sub-menu a:hover,
html.atv-dark .site-header .sub-menu a:focus-visible{color:#7fe0cf;background:#1b2f38;}
html.atv-dark .site-header .brand strong,
html.atv-dark .site-header .brand-mark{color:#e9eff2;}
html.atv-dark .site-header .menu-button{background:#152229;}
html.atv-dark .site-header .primary-nav{background:#0f1a20;border-color:#22333d;}
html.atv-dark .site-header .primary-nav a{color:#cdd9e0;}
html.atv-dark .site-header .primary-nav .sub-menu{background:#101c22;border-color:#22333d;}
html.atv-dark .site-header .primary-nav .sub-menu a{color:#b8c7d1;}
html.atv-dark .site-header .primary-menu > .menu-item{border-color:#22333d;}
html.atv-dark .site-header .menu-button{color:#cdd9e0;}

/* ── 태블릿 가로 구간(861~959px) ────────────────────────────────
   이 구간만 데스크톱 배치인데 폭이 모자라 헤더가 화면 밖으로 나갔다.
   실측: 900px 에서 scrollWidth 951 (넘침 51px). 간격과 버튼을 줄여 넣는다.
   모바일 접힘 기준(860px)은 CSS·JS 가 함께 쓰므로 건드리지 않는다.
   shared-header.css 에도 같은 규칙이 있다 — 서브도메인은 그쪽을 읽는다.  */
@media (min-width: 861px) and (max-width: 959px) {
  .shell { width: min(100% - 24px, var(--shell)); }
  .header-inner { gap: 14px; }
  .primary-menu { gap: 14px; }
  .primary-menu > .menu-item > .menu-item-row > a { font-size: 13px; }
  .header-account { gap: 6px; }
  .header-account-link { min-height: 38px; padding-inline: 12px; font-size: 13px; }
  .header-account-link-2 { min-height: 38px; padding-inline: 10px; font-size: 13px; }
}

/* 메뉴 안으로 옮겨진 언어·테마 토글 (좁은 화면) — shared-header.css 와 같은 내용.
   본진(atovia.kr)은 헤더 서식을 app.css 에서 읽는다. */
.nav-tray {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.nav-tray .header-lang { position: relative; }
.nav-tray .header-lang-menu {
  top: calc(100% + 8px); right: auto; left: 0;
  max-height: 52vh; overflow-y: auto;
}

/* ── 영상 카드 ─────────────────────────────────────────────────
   목록은 그림이 먼저다. 유튜브도 넷플릭스도 그렇다.
   글만 있는 .content-card 와 규격이 다르므로 따로 잡는다. */
.content-card--video {
  min-height: 0;
  padding: 0;
  color: var(--ink);
}
.content-card--video::before { display: none; }   /* 위쪽 장미색 띠는 그림이 대신한다 */
.content-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: #0d1420;
}
.content-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; transition: transform .3s ease;
}
.content-card--video:hover .content-thumb img { transform: scale(1.04); }
.content-play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(12, 16, 24, .62);
  transition: background .2s ease;
}
.content-play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateX(2px);
}
.content-card--video:hover .content-play { background: rgba(200, 32, 46, .92); }
.content-kind {
  position: absolute; right: 9px; bottom: 9px;
  padding: 2px 8px; border-radius: 14px;
  background: rgba(12, 16, 24, .8);
  color: #fff; font-size: 13px; font-weight: 700; font-style: normal;
}
.content-body {
  display: flex; flex-direction: column;
  padding: 16px 18px 18px;
}
.content-card--video h3 { margin: 8px 0 0; font-weight: 700; }
.content-card--video time { color: var(--rose); font-size: 13px; font-weight: 700; letter-spacing: .12em; }

/* Longform/Shorts groups stack vertically.  The outer wrapper must not itself
   be a card grid, otherwise each whole group becomes a narrow grid cell. */
.columns-video-hub { padding-top: 72px; }
.video-hub-head {
  display:flex; align-items:end; justify-content:space-between; gap:28px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
}
.video-hub-head h2 { margin:6px 0 7px; font-size:30px; letter-spacing:-.045em; }
.video-hub-head p:not(.eyebrow) { margin:0; color:var(--muted); }
.video-filter { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.video-filter button {
  min-height:38px; padding:0 16px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:720;
  cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.video-filter button:hover { border-color:var(--mint); color:var(--mint-dark); }
.video-filter button.is-active { background:#163a50; border-color:#163a50; color:#fff; }
.columns-blog-hub { background:#f6fafc; }
.columns-blog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:28px; }
.columns-blog-card { min-height:226px; display:flex; flex-direction:column; padding:20px; border:1px solid rgba(10,44,63,.10); border-radius:16px; background:#fff; color:var(--ink); text-decoration:none; box-shadow:0 7px 20px rgba(21,59,75,.05); transition:transform .16s ease,box-shadow .16s ease; }
.columns-blog-card:hover { transform:translateY(-3px); box-shadow:0 13px 28px rgba(21,59,75,.12); }
.columns-blog-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.columns-blog-meta b { color:var(--mint-dark); letter-spacing:.08em; text-transform:uppercase; }
.columns-blog-card h3 { margin:15px 0 9px; font-size:17px; line-height:1.42; letter-spacing:-.025em; }
.columns-blog-card p { display:-webkit-box; overflow:hidden; margin:0; color:var(--muted); font-size:13px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.columns-blog-read { margin-top:auto; padding-top:17px; color:var(--mint-dark); font-size:12px; font-weight:760; }
.video-feed-groups { display:block; }
.video-shelf { width:100%; margin-top:42px; }
.video-shelf-head { display:flex; align-items:end; justify-content:space-between; margin:0 0 16px; }
.video-shelf-head h3 { margin:3px 0 0; font-size:23px; letter-spacing:-.04em; }
.video-shelf-kicker { display:block; color:var(--mint-dark); font-size:11px; font-weight:820; letter-spacing:.14em; }
.video-shelf-count { color:var(--muted); font-size:14px; font-weight:680; }
.video-grid { gap:26px 18px; }
.video-grid--longform { grid-template-columns:repeat(3,minmax(0,1fr)); }
.video-grid--shorts { grid-template-columns:repeat(5,minmax(0,1fr)); }
.content-card--video {
  min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent;
  box-shadow:none; color:var(--ink);
}
.content-card--video::before { display:none; }
.content-card--video:hover { transform:none; box-shadow:none; }
.content-thumb { border-radius:12px; box-shadow:0 5px 18px rgba(18,38,56,.10); }
.content-body { padding:11px 1px 0; }
.content-card--video h3 { margin:5px 0 0; font-size:15px; line-height:1.48; letter-spacing:-.025em; }
.content-card--video time { color:var(--muted); font-size:12px; font-weight:650; letter-spacing:0; }
.content-kind { font-size:11px; }
.video-more {
  display:flex; align-items:center; gap:7px; margin:28px auto 0; padding:10px 17px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
  font:inherit; font-size:13px; font-weight:750; cursor:pointer;
}
.video-more span { color:var(--mint-dark); }
.video-more:hover { border-color:var(--mint); background:#f3fbfb; }
[data-atovia-video-filter="longform"] .video-shelf--shorts,
[data-atovia-video-filter="shorts"] .video-shelf--longform { display:none; }

@media (max-width: 960px) {
  .columns-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-grid--shorts { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .columns-video-hub { padding-top:48px; }
  .video-hub-head { display:block; }
  .video-hub-head h2 { font-size:26px; }
  .video-filter { margin-top:20px; overflow-x:auto; padding-bottom:2px; }
  .video-filter button { flex:0 0 auto; }
  .video-shelf { margin-top:34px; }
  .video-shelf-head h3 { font-size:21px; }
  .video-grid { gap:22px 12px; }
  .columns-blog-grid { grid-template-columns:1fr; margin-top:20px; }
  .columns-blog-card { min-height:0; }
  .video-grid--longform, .video-grid--shorts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .content-card--video h3 { font-size:14px; }
}

/* ── 계정 버튼 규격 (2026-08-24 통일) ─────────────────────────
   shared-header.css 와 같은 값이어야 한다. 본진만 다르면 사이트를 옮길 때
   버튼이 튀어 보인다. */
.header-account { display: flex; align-items: center; gap: 8px; }
.header-account-link,
.header-account-link-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 20px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-sizing: border-box;
}
.header-lang-btn, .header-theme-toggle { height: 38px; min-height: 38px; align-self: center; }

/* 좁은 화면에서는 계정 버튼을 줄인다. 위 통일 규칙이 라
   같은 무게로 덮어야 한다 — 안 그러면 로고와 겹친다. */
@media (max-width: 620px) {
  .header-account { gap: 6px; }
  .header-account-link,
  .header-account-link-2 {
    height: 36px; min-height: 36px;
    padding: 0 12px; font-size: 13px;
  }
}
@media (max-width: 400px) {
  .header-account-link,
  .header-account-link-2 {
    height: 34px; min-height: 34px;
    padding: 0 10px; font-size: 13px;
  }
}

/* 헤더 오른쪽 정렬 — shared-header.css 와 같은 값이어야 한다. */
.menu-button { justify-self: end; }
.header-account { justify-self: end; }

/* ── 좁은 화면 헤더는 한 줄로 놓는다 (2026-08-24) ──────────────
   격자로는 로고 폭 차이(사이트마다 브랜드 부제가 다르다) 때문에
   칸 배치가 달라져 계정과 햄버거 사이가 벌어졌다(실측 77px).
   한 줄로 놓고 가운데를 밀면 로고가 얼마든 오른쪽은 늘 붙는다. */
@media (max-width: 860px) {
  .header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .brand { margin-right: auto; }        /* 가운데를 밀어낸다 */
  .header-account { margin-left: 0; }
  /* 순서: 로고 · (밀어냄) · 계정 · 햄버거 */
  .header-account { order: 8; }
  .menu-button { order: 9; }
  .primary-nav { order: 10; }
}


/* ══ 아토비아 디자인 기준 7장 (2026-08-29) ═══════════════════════════════
   ATOVIA_DESIGN_STANDARD.md 7장을 앞쪽에 적용한다.
   ★ index.html 안의 CSS 를 직접 고치지 않는다 — 로컬이 서버와 어긋나 있어
     통째로 올리면 대표님 홈이 되돌아간다. 여기서 덮는다.
   되돌리려면 이 블록만 지우고 app.css 를 다시 올리면 된다. */

/* 7-1 바탕에 무늬를 깔지 않는다 — 흰 바탕이 기준이다.
   물결 두 장(첫 화면·닫는 칸)이 화면 전체에 깔려 있었다. */
.av-hero-wave,
.av-end-wave{display:none !important;}

/* 7-5 본문은 16px 이 바닥. 카드 설명이 13.5px 이었다. */
.av-pick-a{font-size:15.5px !important;line-height:1.72 !important;}
.av-pick-go{font-size:13px !important;}

/* ★ 네 색(초록·파랑·노랑·보라)은 그대로 둔다.
   장식이 아니라 **어느 갈래로 가는지**를 가리키는 표식이다.
   피지컬·마인드·라이프·커뮤니티가 서브도메인에서 쓰는 색과 같다. */

/* 7-2 강조색은 하늘 하나 (2026-08-29)
   첫 화면 카드 넷이 초록·파랑·노랑·보라였다. 색으로 갈래를 가리키지 않는다 —
   카드에 이름이 이미 적혀 있다. 색은 브랜드를 가리키는 것이다. */
/* ★ 대표님 (2026-08-30) — 마음과 혼자는 붉은색 계로.
   브랜드 분홍 #e396bc 에서 뽑은 진한 것이다 (흰바탕 대비 7.05).
   남은 둘은 하늘 — 색이 둘이면 「몸·돈」과 「마음·사람」이 갈린다. */
.av-p1,.av-p3{--c:#0e7fa0 !important;}
.av-p2,.av-p4{--c:#aa155e !important;}


/* ══ 기준 일곱을 앞쪽 전체에 (2026-08-29) ═════════════════
   audit_standards.py 로 108장을 재서 걸린 선택자만 적었다.
   추측이 아니라 잰 것이다. 다시 재려면 같은 도구를 돌리면 된다. */

/* 7-3 그라데이션 단추 → 단색. 32장에 걸려 있었다.
   대비 실측: #0e7fa0 위 흰 글자 5.04 */
.av-btn-1,
.login-btn-primary,
.partners-cta,
.atovia-lite-doc-viewer__btn{
  background-image:none !important;
  background-color:#0e7fa0 !important;
  color:#fff !important;}

/* 같은 그라데이션이지만 이건 단추가 아니라 칸이다 —
   글자색을 건드리면 안쪽 내용이 깨진다. 바탕만 평평하게. */
.comm-cta-box{
  background-image:none !important;
  background-color:#eaf6fa !important;}

/* 7-4 한글에 양수 자간 → 0. 22장에 걸려 있었다.
   .2em · .16em · .14em 이 한글 위에 얹혀 낱글자로 흩어졌다. */
.av-c-k,
.av-feed-b,
.apg-eyebrow,
.acv-eyebrow,
.class-card-tag,
.section-label{letter-spacing:0 !important;}

/* 7-5 본문 12px → 15.5px. 9장(collection-*)에 걸려 있었다. */
.deal-desc,
.cat-desc{font-size:15.5px !important;line-height:1.7 !important;}
html[data-atv-login-region="kr"] .login-google,html[data-atv-login-region="kr"] .btn-google,html[data-atv-login-region="kr"] .hr-login-google{display:none!important}html[data-atv-login-region="global"] .login-kakao,html[data-atv-login-region="global"] .btn-kakao,html[data-atv-login-region="global"] .hr-login-kakao{display:none!important}