.service-home-hero {
  min-height: 500px;
  display: grid;
  align-items: center;
  padding: 110px 0 100px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 80% 15%, rgba(80, 189, 169, .2), transparent 32%), linear-gradient(135deg, #f8fcfa 0%, #eef8f4 100%);
}

.service-home-hero h1 { max-width: 820px; margin: 18px 0 22px; font-size: clamp(44px, 6vw, 76px); line-height: 1.08; letter-spacing: -.055em; }
.service-home-hero > .shell > p:not(.eyebrow) { max-width: 720px; color: var(--muted); font-size: 19px; line-height: 1.85; }
.service-home-links { padding: 90px 0 110px; }
.service-home-links .service-card { min-height: 260px; }
.service-home-links .service-card h3 { margin-top: 22px; }

@media (max-width: 860px) {
  .service-home-hero { min-height: 0; padding: 74px 0 72px; }
  .service-home-hero h1 { font-size: clamp(38px, 11vw, 58px); }
}

@media (max-width: 620px) {
  .service-home-hero > .shell > p:not(.eyebrow) { font-size: 17px; }
  .service-home-links { padding: 64px 0 78px; }
}

.healthcare-hero {
  padding: 116px 0 108px;
  background:
    radial-gradient(circle at 82% 22%, rgba(49, 176, 143, .19), transparent 31%),
    linear-gradient(135deg, #f8fcfa 0%, #edf8f3 100%);
  border-bottom: 1px solid var(--line);
}

.healthcare-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr); gap: 70px; align-items: center; }
.healthcare-hero h1 { margin: 20px 0 24px; font-size: clamp(48px, 6.7vw, 88px); line-height: 1.02; letter-spacing: -.065em; }
.healthcare-hero h1 em { color: #11846b; font-style: normal; }
.healthcare-lead { max-width: 760px; color: var(--muted); font-size: 19px; line-height: 1.85; }
.healthcare-hero-note { padding: 36px; color: #eafaf5; border-radius: 28px; background: #0c342c; box-shadow: 0 26px 65px rgba(13, 62, 50, .18); }
.healthcare-hero-note span { display: block; margin-bottom: 20px; color: #7be5cb; font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.healthcare-hero-note strong { display: block; font-size: 25px; line-height: 1.45; }
.healthcare-hero-note p { margin: 18px 0 0; color: #c4ddd6; line-height: 1.75; }

.healthcare-concerns, .healthcare-story, .healthcare-topics, .healthcare-latest { padding: 100px 0; }
.healthcare-split { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 80px; }
.healthcare-sticky-heading { align-self: start; position: sticky; top: 120px; }
.healthcare-sticky-heading h2 { max-width: 470px; margin: 14px 0 20px; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.16; letter-spacing: -.05em; }
.healthcare-sticky-heading > p:last-child { max-width: 460px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.concern-list { display: grid; gap: 16px; }
.concern-list article { position: relative; min-height: 190px; padding: 34px 36px 34px 96px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.concern-list article > span { position: absolute; top: 35px; left: 34px; color: #21a386; font-size: 14px; font-weight: 800; }
.concern-list h3 { margin: 0 0 13px; font-size: 24px; }
.concern-list p { margin: 0; color: var(--muted); line-height: 1.75; }

.healthcare-story { color: #edf9f5; background: #0b2924; }
.healthcare-story-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 76px; align-items: center; }
.healthcare-story-photo { min-height: 510px; overflow: hidden; border-radius: 30px; background: #dbeee8; }
.healthcare-story-photo img { width: 100%; height: 100%; min-height: 510px; object-fit: cover; }
.healthcare-story .eyebrow { color: #75e4c9; }
.healthcare-story h2 { margin: 18px 0 24px; font-size: clamp(38px, 5vw, 66px); line-height: 1.12; letter-spacing: -.055em; }
.healthcare-story p { color: #bfd7d0; font-size: 18px; line-height: 1.85; }
.healthcare-story blockquote { margin: 30px 0 22px; padding: 24px 0 24px 26px; border-left: 3px solid #52d5b5; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.65; }

.healthcare-topics { background: #f5faf8; }
.healthcare-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.healthcare-topic-card { min-height: 330px; padding: 32px; color: var(--ink); border: 1px solid var(--line); border-radius: 26px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.healthcare-topic-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(24, 78, 64, .1); }
.healthcare-topic-card > span { display: inline-grid; width: 42px; height: 42px; place-items: center; color: #0b6f5a; border-radius: 14px; background: #dff5ee; font-weight: 800; }
.healthcare-topic-card > p { margin: 34px 0 8px; color: #5aa492; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.healthcare-topic-card h3 { margin: 0 0 16px; font-size: 29px; }
.healthcare-topic-card > div { min-height: 86px; color: var(--muted); line-height: 1.7; }
.healthcare-topic-card strong { display: block; margin-top: 24px; color: #08715a; }

.latest-group + .latest-group { margin-top: 62px; }
.latest-group-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.latest-group-heading h3 { margin: 0; font-size: 27px; }
.latest-group-heading a { color: #08715a; font-weight: 800; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.post-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: #eaf4f0; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.post-card:hover .post-card-image img { transform: scale(1.035); }
.post-card-body { padding: 25px; }
.post-card time { color: #649588; font-size: 13px; font-weight: 700; }
.post-card h2 { margin: 12px 0; font-size: 21px; line-height: 1.42; letter-spacing: -.025em; }
.post-card h2 a { color: var(--ink); }
.post-card p { display: -webkit-box; min-height: 72px; overflow: hidden; color: var(--muted); line-height: 1.65; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.post-more { display: inline-block; margin-top: 17px; color: #08715a; font-weight: 800; }

.healthcare-guidance { padding: 84px 0; color: #fff; background: #137a64; }
.healthcare-guidance-inner { display: flex; justify-content: space-between; align-items: center; gap: 46px; }
.healthcare-guidance h2 { max-width: 750px; margin: 14px 0 0; font-size: clamp(34px, 4.5vw, 58px); line-height: 1.15; letter-spacing: -.05em; }
.healthcare-guidance .eyebrow { color: #b7f2e3; }
.medical-notice { padding: 32px 0; border-bottom: 1px solid var(--line); background: #f7faf9; }
.medical-notice .shell { display: grid; grid-template-columns: 180px 1fr; gap: 28px; }
.medical-notice p { margin: 0; color: var(--muted); line-height: 1.7; }

.healthcare-category-hero { padding: 100px 0 82px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f7fcfa, #eaf7f2); }
.healthcare-category-hero h1 { margin: 16px 0 18px; font-size: clamp(48px, 6vw, 76px); letter-spacing: -.06em; }
.healthcare-category-hero > .shell > p:last-child { max-width: 720px; color: var(--muted); font-size: 19px; line-height: 1.8; }
.category-back { margin: 20px 0 0; }
.category-back a { color: #08715a; font-weight: 800; }
.healthcare-posts { padding: 82px 0 110px; }
.source-note { margin: 40px 0 0; padding: 20px 24px; color: var(--muted); border-radius: 16px; background: #f4f8f6; }

@media (max-width: 980px) {
  .healthcare-hero-grid, .healthcare-split, .healthcare-story-grid { grid-template-columns: 1fr; }
  .healthcare-hero-grid, .healthcare-split, .healthcare-story-grid { gap: 46px; }
  .healthcare-sticky-heading { position: static; }
  .healthcare-topic-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .healthcare-guidance-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 660px) {
  .healthcare-hero { padding: 76px 0 72px; }
  .healthcare-hero h1 { font-size: clamp(44px, 14vw, 64px); }
  .healthcare-lead { font-size: 17px; }
  .healthcare-hero-note { padding: 28px; }
  .healthcare-concerns, .healthcare-story, .healthcare-topics, .healthcare-latest { padding: 70px 0; }
  .concern-list article { padding: 28px; }
  .concern-list article > span { position: static; display: block; margin-bottom: 18px; }
  .healthcare-story-photo, .healthcare-story-photo img { min-height: 390px; }
  .healthcare-topic-grid, .post-grid { grid-template-columns: 1fr; }
  .healthcare-topic-card { min-height: 0; }
  .medical-notice .shell { grid-template-columns: 1fr; gap: 10px; }
  .healthcare-category-hero { padding: 72px 0 62px; }
}

/* Healthcare original Atovia landing migration: content and journey from WP page 101. */
.healthcare-legacy-home { color: #17231f; background: #fbfcfb; }
.legacy-hero { position: relative; min-height: 720px; overflow: hidden; color: #fff; background: #14251f; isolation: isolate; }
.legacy-hero-video, .legacy-hero-shade { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.legacy-hero-video iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; border: 0; transform: translate(-50%, -50%) scale(1.12); filter: saturate(.68) brightness(.45); pointer-events: none; }
.legacy-hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(8, 23, 18, .93) 0%, rgba(8, 23, 18, .75) 44%, rgba(8, 23, 18, .25) 100%); }
.legacy-hero-content { display: flex; min-height: 720px; flex-direction: column; align-items: flex-start; justify-content: center; }
.legacy-hero .eyebrow { color: #a4efdc; }
.legacy-hero h1 { max-width: 850px; margin: 20px 0; color: #fff; font-size: clamp(48px, 6.3vw, 86px); line-height: 1.06; letter-spacing: -.065em; }
.legacy-hero h1 em { color: #78dfc4; font-style: normal; }
.legacy-hero-content > p:not(.eyebrow) { margin: 0 0 30px; color: #e1eee9; font-size: 21px; font-weight: 700; }
.legacy-hero-cta { display: block; width: min(400px, 100%); transition: transform .2s ease; }
.legacy-hero-cta:hover { transform: translateY(-3px); }
.legacy-hero-cta img { display: block; width: 100%; height: auto; }
.legacy-event-strip { padding: 19px 0; color: #fff; background: #167b65; }
.legacy-event-strip .shell { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.legacy-event-strip strong { color: #d0fff1; }
.legacy-event-strip a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.legacy-intro { padding: 128px 0 112px; background: #fff; }
.legacy-reading { max-width: 920px; }
.legacy-kicker, .legacy-number { color: #15836c; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.legacy-intro h2, .legacy-faq h2 { margin: 15px 0 25px; font-size: clamp(44px, 6vw, 80px); line-height: 1.05; letter-spacing: -.065em; }
.legacy-large-copy { max-width: 790px; color: #52635d; font-size: 22px; line-height: 1.85; }
.legacy-large-copy strong { color: #135d4e; }
.legacy-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.legacy-solution-grid article { min-height: 220px; padding: 30px; border-radius: 22px; background: #edf8f3; }
.legacy-solution-grid span { color: #16816b; font-weight: 900; }
.legacy-solution-grid h3 { margin: 34px 0 0; font-size: 23px; line-height: 1.42; }
.legacy-questions { padding: 112px 0; color: #eef7f3; background: #102a23; }
.legacy-questions .eyebrow { color: #83e7cf; }
.legacy-heading h2 { max-width: 960px; margin: 14px 0 50px; font-size: clamp(38px, 5.2vw, 69px); line-height: 1.12; letter-spacing: -.06em; }
.legacy-question-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.legacy-question-grid article { padding: 36px; border: 1px solid rgba(191, 229, 217, .24); border-radius: 26px; background: rgba(255, 255, 255, .045); }
.legacy-question-grid h3 { margin: 12px 0 24px; color: #fff; font-size: 30px; }
.legacy-question-grid p:not(.legacy-number) { color: #c5d9d2; line-height: 1.9; }
.legacy-recovery { padding: 120px 0; background: #f0f8f4; }
.legacy-recovery-grid, .legacy-founder-grid, .legacy-guide-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 72px; align-items: center; }
.legacy-recovery h2, .legacy-founder h2, .legacy-guide h2 { margin: 16px 0 28px; font-size: clamp(39px, 4.9vw, 66px); line-height: 1.12; letter-spacing: -.06em; }
.legacy-recovery p:not(.eyebrow), .legacy-founder p, .legacy-guide p { color: #53655e; font-size: 18px; line-height: 1.85; }
.legacy-image-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.legacy-image-stack img { width: 100%; min-height: 330px; border-radius: 24px; object-fit: cover; box-shadow: 0 24px 55px rgba(20, 64, 51, .15); }
.legacy-image-stack img:last-child { min-height: 400px; transform: translateY(35px); }
.legacy-founder { padding: 116px 0; color: #eef8f4; background: #133c31; }
.legacy-founder-grid img { width: 100%; min-height: 490px; border-radius: 28px; object-fit: cover; background: #d8ebe4; }
.legacy-founder .eyebrow { color: #83e7cf; }
.legacy-founder h2 { color: #fff; }
.legacy-founder p { color: #c7ddd5; }
.legacy-founder strong { display: inline-block; margin-top: 15px; color: #a5f1db; }
.legacy-for-whom { padding: 110px 0; }
.legacy-for-whom h2 { margin: 14px 0 42px; font-size: clamp(39px, 5vw, 67px); letter-spacing: -.06em; }
.legacy-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.legacy-check-grid p { min-height: 120px; margin: 0; padding: 27px 28px 27px 58px; position: relative; border: 1px solid var(--line); border-radius: 20px; background: #fff; font-weight: 700; line-height: 1.65; }
.legacy-check-grid p::before { position: absolute; top: 28px; left: 26px; color: #0c886d; content: '✓'; font-size: 20px; }
.legacy-faq { padding: 112px 0; background: #f1f8f5; }
.legacy-faq blockquote { margin: 34px 0; padding: 31px 0 31px 32px; border-left: 4px solid #20a486; color: #215f51; font-size: 25px; font-weight: 800; line-height: 1.65; }
.legacy-faq p:last-child { max-width: 810px; color: #53655e; font-size: 19px; line-height: 1.85; }
.legacy-guide { padding: 118px 0; color: #fff; background: linear-gradient(125deg, #122e27, #0d5d4e); }
.legacy-guide .eyebrow { color: #90eed5; }
.legacy-guide h2 { color: #fff; }
.legacy-guide p { color: #d0e6df; }
.legacy-price { margin-top: 28px; font-size: 18px; }
.legacy-price s { margin-right: 10px; color: #a4c7bd; }
.legacy-price strong { color: #9bffe0; font-size: 40px; }
.legacy-guide-card { display: grid; gap: 21px; padding: 32px; border: 1px solid rgba(190, 246, 229, .25); border-radius: 28px; background: rgba(255, 255, 255, .08); }
.legacy-guide-card img { width: 100%; max-height: 330px; object-fit: contain; }
.legacy-guide-card small { color: #c6dfd7; line-height: 1.6; }

@media (max-width: 980px) {
  .legacy-recovery-grid, .legacy-founder-grid, .legacy-guide-grid { grid-template-columns: 1fr; gap: 45px; }
  .legacy-solution-grid, .legacy-check-grid { grid-template-columns: repeat(2, 1fr); }
  .legacy-founder-grid img { max-height: 580px; }
}
@media (max-width: 660px) {
  .legacy-hero, .legacy-hero-content { min-height: 650px; }
  .legacy-hero-content { padding-top: 88px; padding-bottom: 72px; }
  .legacy-hero h1 { font-size: clamp(43px, 13.5vw, 62px); }
  .legacy-hero-content > p:not(.eyebrow) { font-size: 18px; line-height: 1.6; }
  .legacy-event-strip .shell { align-items: flex-start; flex-direction: column; gap: 7px; text-align: left; }
  .legacy-intro, .legacy-questions, .legacy-recovery, .legacy-founder, .legacy-for-whom, .legacy-faq, .legacy-guide { padding: 76px 0; }
  .legacy-solution-grid, .legacy-question-grid, .legacy-check-grid { grid-template-columns: 1fr; }
  .legacy-large-copy { font-size: 19px; }
  .legacy-question-grid article { padding: 28px; }
  .legacy-question-grid h3 { font-size: 26px; }
  .legacy-image-stack img { min-height: 250px; }
  .legacy-image-stack img:last-child { min-height: 300px; transform: translateY(20px); }
  .legacy-founder-grid img { min-height: 360px; }
  .legacy-check-grid p { min-height: 0; }
  .legacy-faq blockquote { padding-left: 22px; font-size: 21px; }
}

/* ══════════════════════════════════════════════════════════════
   다크 모드 — OS 설정을 따른다. 이 파일은 #fff 가 15곳 하드코딩돼 있어
   토큰 전환만으로는 흰 카드가 그대로 남는다. 표면을 명시적으로 잡는다.
   2026-08-22 추가.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) /* 레거시 홈은 배경/글자색이 하드코딩(#fbfcfb·#17231f)이라 따로 잡는다 */
  .healthcare-legacy-home { background: #0a1217; color: var(--ink, #e9eff2); }
  html:not(.atv-light) .healthcare-legacy-home a { color: var(--mint, #4fc7dd); }
  html:not(.atv-light) /* 밝은 색을 직접 지정한 섹션들 — 다크에서 글자가 묻힌다 */
  .concern-list article, html:not(.atv-light) .healthcare-topic-card, html:not(.atv-light) .post-card, html:not(.atv-light) .medical-notice, html:not(.atv-light) .source-note { background: #152229 !important; border-color: #22333d !important; color: #e9eff2; }
  html:not(.atv-light) .healthcare-topics { background: #0f1a20 !important; }
  html:not(.atv-light) .post-card-image { background: #1b2b33 !important; }
  html:not(.atv-light) .concern-list article h3, html:not(.atv-light) .healthcare-topic-card h3, html:not(.atv-light) .post-card h3 { color: #e9eff2; }
  html:not(.atv-light) .medical-notice strong, html:not(.atv-light) .source-note strong { color: #e9eff2; }
  html:not(.atv-light) /* 레거시 홈 섹션들 — 배경을 밝게 직접 지정해 다크에서 글자가 묻힌다 */
  .legacy-intro, html:not(.atv-light) .legacy-for-whom, html:not(.atv-light) .legacy-solution, html:not(.atv-light) .legacy-story, html:not(.atv-light) .legacy-offer, html:not(.atv-light) .legacy-cta, html:not(.atv-light) .medical-notice { background: #0f1a20 !important; }
  html:not(.atv-light) .legacy-solution-grid article, html:not(.atv-light) .legacy-check-grid > *, html:not(.atv-light) .legacy-card, html:not(.atv-light) .legacy-quote, html:not(.atv-light) .legacy-offer-card { background: #152229 !important;
    border-color: #22333d !important; color: #e9eff2; }
  html:not(.atv-light) .legacy-intro h2, html:not(.atv-light) .legacy-intro h3, html:not(.atv-light) .legacy-for-whom h2, html:not(.atv-light) .legacy-for-whom p, html:not(.atv-light) .legacy-solution-grid h3, html:not(.atv-light) .legacy-story h2, html:not(.atv-light) .legacy-story p, html:not(.atv-light) .medical-notice strong, html:not(.atv-light) .medical-notice p { color: #e9eff2 !important; }
  html:not(.atv-light) .legacy-intro p, html:not(.atv-light) .legacy-solution-grid p, html:not(.atv-light) .legacy-check-grid p { color: #a9b8c1 !important; }
  html:not(.atv-light) .site-card, html:not(.atv-light) .site-panel, html:not(.atv-light) .site-tile, html:not(.atv-light) .cat-card, html:not(.atv-light) .board-card, html:not(.atv-light) .sub-card, html:not(.atv-light) .info-card { background: var(--white, #152229); border-color: var(--line, #22333d); }
}

/* ── 히어로·섹션 표면 통일 (2026-08-22) ─────────────────────────
   프로그램 페이지와 같은 문법으로 맞춘다: 깊은 잉크 바탕 + 액센트 광원.
   밝은 그라디언트를 그대로 두면 밝은 배경 위 밝은 글자가 되어 글자가 사라진다. */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .service-home-hero { background:
      radial-gradient(50% 46% at 16% 18%, rgba(79,199,221,.18) 0%, transparent 62%),
      radial-gradient(44% 40% at 86% 78%, rgba(95,196,163,.14) 0%, transparent 66%),
      linear-gradient(150deg, #0d1a20 0%, #12242c 58%, #0a1217 100%) !important; }
  html:not(.atv-light) .service-home-hero h1, html:not(.atv-light) .service-home-hero h2 { color:#f2f7f9 !important; }
  html:not(.atv-light) .service-home-hero p, html:not(.atv-light) .service-home-hero li { color:#a9b8c1 !important; }
  html:not(.atv-light) .legacy-recovery, html:not(.atv-light) .legacy-faq { background:#0f1a20 !important; }
  html:not(.atv-light) .legacy-recovery h2, html:not(.atv-light) .legacy-recovery h3, html:not(.atv-light) .legacy-faq h2, html:not(.atv-light) .legacy-faq summary { color:#e9eff2 !important; }
  html:not(.atv-light) .legacy-recovery p, html:not(.atv-light) .legacy-faq p { color:#a9b8c1 !important; }
  html:not(.atv-light) .legacy-faq details { border-color:#22333d !important; }
  html:not(.atv-light) /* 밝은 배경을 전제로 한 사진은 조금 가라앉힌다 */
  .legacy-recovery img, html:not(.atv-light) .legacy-faq img { filter:brightness(.88); }
}

/* ── 카테고리 히어로 다크 (2026-08-22) ───────────────────────── */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .healthcare-category-hero { background:
      radial-gradient(50% 46% at 16% 18%, rgba(79,199,221,.16) 0%, transparent 62%),
      linear-gradient(150deg, #0d1a20 0%, #12242c 58%, #0a1217 100%) !important; }
  html:not(.atv-light) .healthcare-category-hero h1, html:not(.atv-light) .healthcare-category-hero h2 { color:#f2f7f9 !important; }
  html:not(.atv-light) .healthcare-category-hero p { color:#a9b8c1 !important; }
  html:not(.atv-light) .post-more { color:#4fc7dd !important; }
}

/* ── 헬스케어 홈 저대비 보정 (2026-08-22) ─────────────────────── */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .legacy-event-strip a { color:#7fe0ef !important; text-decoration:underline; }
  html:not(.atv-light) .legacy-event-strip strong, html:not(.atv-light) .legacy-event-strip span { color:#e9eff2 !important; }
  html:not(.atv-light) .legacy-large-copy strong { color:#7fe0ef !important; }
}

/* ATV-THEME-TOGGLE */
/* 수동 토글(html.atv-dark) — 위 미디어 블록과 같은 내용이며
   make_theme_toggle.py 가 자동 생성한다. 직접 고치지 말 것. */
html.atv-dark /* 레거시 홈은 배경/글자색이 하드코딩(#fbfcfb·#17231f)이라 따로 잡는다 */
  .healthcare-legacy-home { background: #0a1217; color: var(--ink, #e9eff2); }
html.atv-dark .healthcare-legacy-home a { color: var(--mint, #4fc7dd); }
html.atv-dark /* 밝은 색을 직접 지정한 섹션들 — 다크에서 글자가 묻힌다 */
  .concern-list article, html.atv-dark .healthcare-topic-card, html.atv-dark .post-card, html.atv-dark .medical-notice, html.atv-dark .source-note { background: #152229 !important; border-color: #22333d !important; color: #e9eff2; }
html.atv-dark .healthcare-topics { background: #0f1a20 !important; }
html.atv-dark .post-card-image { background: #1b2b33 !important; }
html.atv-dark .concern-list article h3, html.atv-dark .healthcare-topic-card h3, html.atv-dark .post-card h3 { color: #e9eff2; }
html.atv-dark .medical-notice strong, html.atv-dark .source-note strong { color: #e9eff2; }
html.atv-dark /* 레거시 홈 섹션들 — 배경을 밝게 직접 지정해 다크에서 글자가 묻힌다 */
  .legacy-intro, html.atv-dark .legacy-for-whom, html.atv-dark .legacy-solution, html.atv-dark .legacy-story, html.atv-dark .legacy-offer, html.atv-dark .legacy-cta, html.atv-dark .medical-notice { background: #0f1a20 !important; }
html.atv-dark .legacy-solution-grid article, html.atv-dark .legacy-check-grid > *, html.atv-dark .legacy-card, html.atv-dark .legacy-quote, html.atv-dark .legacy-offer-card { background: #152229 !important;
    border-color: #22333d !important; color: #e9eff2; }
html.atv-dark .legacy-intro h2, html.atv-dark .legacy-intro h3, html.atv-dark .legacy-for-whom h2, html.atv-dark .legacy-for-whom p, html.atv-dark .legacy-solution-grid h3, html.atv-dark .legacy-story h2, html.atv-dark .legacy-story p, html.atv-dark .medical-notice strong, html.atv-dark .medical-notice p { color: #e9eff2 !important; }
html.atv-dark .legacy-intro p, html.atv-dark .legacy-solution-grid p, html.atv-dark .legacy-check-grid p { color: #a9b8c1 !important; }
html.atv-dark .site-card, html.atv-dark .site-panel, html.atv-dark .site-tile, html.atv-dark .cat-card, html.atv-dark .board-card, html.atv-dark .sub-card, html.atv-dark .info-card { background: var(--white, #152229); border-color: var(--line, #22333d); }
html.atv-dark .service-home-hero { background:
      radial-gradient(50% 46% at 16% 18%, rgba(79,199,221,.18) 0%, transparent 62%),
      radial-gradient(44% 40% at 86% 78%, rgba(95,196,163,.14) 0%, transparent 66%),
      linear-gradient(150deg, #0d1a20 0%, #12242c 58%, #0a1217 100%) !important; }
html.atv-dark .service-home-hero h1, html.atv-dark .service-home-hero h2 { color:#f2f7f9 !important; }
html.atv-dark .service-home-hero p, html.atv-dark .service-home-hero li { color:#a9b8c1 !important; }
html.atv-dark .legacy-recovery, html.atv-dark .legacy-faq { background:#0f1a20 !important; }
html.atv-dark .legacy-recovery h2, html.atv-dark .legacy-recovery h3, html.atv-dark .legacy-faq h2, html.atv-dark .legacy-faq summary { color:#e9eff2 !important; }
html.atv-dark .legacy-recovery p, html.atv-dark .legacy-faq p { color:#a9b8c1 !important; }
html.atv-dark .legacy-faq details { border-color:#22333d !important; }
html.atv-dark /* 밝은 배경을 전제로 한 사진은 조금 가라앉힌다 */
  .legacy-recovery img, html.atv-dark .legacy-faq img { filter:brightness(.88); }
html.atv-dark .healthcare-category-hero { background:
      radial-gradient(50% 46% at 16% 18%, rgba(79,199,221,.16) 0%, transparent 62%),
      linear-gradient(150deg, #0d1a20 0%, #12242c 58%, #0a1217 100%) !important; }
html.atv-dark .healthcare-category-hero h1, html.atv-dark .healthcare-category-hero h2 { color:#f2f7f9 !important; }
html.atv-dark .healthcare-category-hero p { color:#a9b8c1 !important; }
html.atv-dark .post-more { color:#4fc7dd !important; }
html.atv-dark .legacy-event-strip a { color:#7fe0ef !important; text-decoration:underline; }
html.atv-dark .legacy-event-strip strong, html.atv-dark .legacy-event-strip span { color:#e9eff2 !important; }
html.atv-dark .legacy-large-copy strong { color:#7fe0ef !important; }

/* ── 커뮤니티 대문 (2026-08-23) ───────────────────────────────────
   커뮤니티 헤더에는 자체 게시판 5갈래만 남기고 아토비아 공통메뉴를 뺐다.
   상단이 6갈래라 복잡했기 때문이다. 아토비아로 가는 길은 여기서 보여준다. */
.community-gate {
  padding: 76px 0 84px;
  border-top: 1px solid var(--line, #d8e8f0);
  background: var(--paper, #f4f9fc);
}
.community-gate .gate-head { max-width: 640px; margin: 0 0 34px; }
.gate-eyebrow {
  margin: 0 0 10px;
  color: var(--mint-dark, #1092ab);
  font-size: 12.5px; font-weight: 800; letter-spacing: .18em;
}
.community-gate h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.035em;
}
.gate-lead { margin: 0; color: var(--muted, #64717b); font-size: 16px; line-height: 1.8; }

.gate-cares {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gate-care {
  display: flex; flex-direction: column;
  border: 1px solid var(--line, #d8e8f0);
  border-radius: 16px;
  background: var(--paper-card, #fff);
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.gate-care:hover { border-color: var(--gate-accent, #27bcd6); transform: translateY(-2px); }

.gate-care-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line, #d8e8f0);
  color: inherit; text-decoration: none;
}
.gate-care-tag {
  flex: none;
  min-width: 34px; padding: 4px 9px;
  border-radius: 999px;
  background: var(--gate-accent, #27bcd6);
  color: #fff; font-size: 12px; font-weight: 800; text-align: center;
}
.gate-care-head strong { flex: 1 1 auto; font-size: 17px; letter-spacing: -.02em; }
.gate-care-go { flex: none; color: var(--muted, #64717b); font-size: 19px; }
.gate-care:hover .gate-care-go { color: var(--gate-accent, #27bcd6); }

/* 각 케어의 프로젝트 4개 */
.gate-care-links { display: grid; grid-template-columns: 1fr 1fr; }
.gate-care-links a {
  padding: 12px 16px;
  color: var(--ink-soft, #52616c);
  font-size: 14.5px; text-decoration: none;
  border-right: 1px solid var(--line, #d8e8f0);
  border-bottom: 1px solid var(--line, #d8e8f0);
}
.gate-care-links a:nth-child(2n) { border-right: 0; }
.gate-care-links a:nth-last-child(-n+2) { border-bottom: 0; }
.gate-care-links a:hover { background: var(--paper-deep, #e6f3f9); color: var(--gate-accent, #27bcd6); }

/* 공통 메뉴는 한 줄 바로가기로 압축 */
.gate-quick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line, #d8e8f0);
}
.gate-quick-label {
  margin-right: 4px;
  color: var(--muted, #64717b); font-size: 13px; font-weight: 700;
}
.gate-quick a {
  padding: 7px 13px;
  border: 1px solid var(--line, #d8e8f0); border-radius: 999px;
  color: var(--ink-soft, #52616c); font-size: 13.5px; text-decoration: none;
}
.gate-quick a:hover { border-color: var(--mint, #27bcd6); color: var(--mint-dark, #1092ab); }
.gate-quick-home {
  margin-left: auto;
  font-weight: 700; color: var(--mint-dark, #1092ab) !important;
  border-color: var(--mint, #27bcd6) !important;
}

@media (max-width: 560px) {
  .community-gate { padding: 56px 0 62px; }
  .gate-care-links { grid-template-columns: 1fr; }
  .gate-care-links a { border-right: 0; }
  .gate-quick-home { margin-left: 0; }
}

/* 다크 — OS 설정과 수동 토글 양쪽 */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .community-gate { background: #0d1a20; border-top-color: #22333d; }
  html:not(.atv-light) .gate-care { background: #152229; border-color: #22333d; }
  html:not(.atv-light) .gate-care-head { border-bottom-color: #22333d; }
  html:not(.atv-light) .gate-care-links a { color: #a9b8c1; border-color: #22333d; }
  html:not(.atv-light) .gate-care-links a:hover { background: #1b2f38; }
  html:not(.atv-light) .gate-quick { border-top-color: #22333d; }
  html:not(.atv-light) .gate-quick a { border-color: #22333d; color: #a9b8c1; }
  html:not(.atv-light) .gate-lead, html:not(.atv-light) .gate-quick-label { color: #8fa0aa; }
}
html.atv-dark .community-gate { background: #0d1a20; border-top-color: #22333d; }
html.atv-dark .gate-care { background: #152229; border-color: #22333d; }
html.atv-dark .gate-care-head { border-bottom-color: #22333d; }
html.atv-dark .gate-care-links a { color: #a9b8c1; border-color: #22333d; }
html.atv-dark .gate-care-links a:hover { background: #1b2f38; }
html.atv-dark .gate-quick { border-top-color: #22333d; }
html.atv-dark .gate-quick a { border-color: #22333d; color: #a9b8c1; }
html.atv-dark .gate-lead, html.atv-dark .gate-quick-label { color: #8fa0aa; }

/* ── 커뮤니티 카페 화면 (2026-08-23 재설계) ────────────────────────
   한 화면 안에서 문법을 하나로 맞춘다. 옛 히어로 문법(큰 그라디언트)과
   카드 문법이 섞여 "짬뽕"으로 보이던 것을 정리한 것이다.

   토큰
     모서리 12px · 테두리 1px · 패널 간격 14px · 안쪽 여백 14~16px
     제목 위계 22 → 15 → 14 → 11.5px
     색 위계 글제목=잉크 / 정보=muted / 게시판=민트                     */
.cafe-home, .cafe-grid {
  --cafe-radius: 12px;
  --cafe-gap: 14px;
  --cafe-pad: 15px;
}
.cafe-home { padding: 22px 0 72px; }

/* 얇은 머리띠 — 옛 히어로를 대신한다. 어디에 왔는지만 알린다. */
.cafe-band {
  border-bottom: 1px solid var(--line, #d8e8f0);
  background: var(--paper, #f4f9fc);
}
.cafe-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 0;
}
.cafe-band-eyebrow {
  margin: 0 0 5px;
  color: var(--mint-dark, #1092ab);
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
}
.cafe-band h1 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.03em;
}
.cafe-band-lead {
  margin: 0; max-width: 62ch;
  color: var(--muted, #64717b); font-size: 14px; line-height: 1.65;
}
.cafe-band-cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #27bcd6, #1092ab);
  color: #fff; font-size: 14px; font-weight: 750; text-decoration: none;
  box-shadow: 0 6px 16px rgba(16, 146, 171, .22);
}
.cafe-band-cta:hover { filter: brightness(1.06); }

.cafe-grid {
  display: grid; gap: 20px;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
}

/* 왼쪽 게시판 목록 — 따라다니지 않는다(항목이 17개라 화면을 가린다) */
.cafe-rail {
  padding: 14px 12px 10px;
  border: 1px solid var(--line, #d8e8f0);
  border-radius: var(--cafe-radius);
  background: var(--paper-card, #fff);
}
.rail-title {
  margin: 0 0 9px; padding: 0 0 8px;
  border-bottom: 1px solid var(--line, #d8e8f0);
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--mint-dark, #1092ab);
}
.rail-group { margin: 0 0 10px; }
.rail-group:last-child { margin-bottom: 0; }
.rail-group-head {
  display: block; margin: 0 0 3px; padding: 3px 6px;
  color: var(--ink, #17212b); font-size: 13.5px; font-weight: 750;
  text-decoration: none;
}
.rail-group-head:hover { color: var(--mint-dark, #1092ab); }
.rail-group ul { margin: 0; padding: 0; list-style: none; }
.rail-group li a {
  display: block; padding: 4px 6px 4px 14px; border-radius: 6px;
  color: var(--ink-soft, #52616c); font-size: 12.5px; line-height: 1.5;
  text-decoration: none;
}
.rail-group li a:hover { background: var(--paper-deep, #e6f3f9); color: var(--mint-dark, #1092ab); }

.cafe-main { display: grid; gap: var(--cafe-gap); min-width: 0; }

/* 패널 — 화면 안의 모든 상자가 같은 규격을 쓴다 */
.cafe-panel, .board-block {
  border: 1px solid var(--line, #d8e8f0);
  border-radius: var(--cafe-radius);
  background: var(--paper-card, #fff);
  overflow: hidden;
}
.panel-head, .block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px var(--cafe-pad);
  border-bottom: 1px solid var(--line, #d8e8f0);
}
.panel-head h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.panel-note { color: var(--muted, #64717b); font-size: 11.5px; font-weight: 600; }
.block-head { background: var(--paper, #f4f9fc); }
.block-name { color: var(--ink, #17212b); font-size: 14px; font-weight: 750; text-decoration: none; }
.block-name:hover { color: var(--mint-dark, #1092ab); }
.block-more { color: var(--muted, #64717b); font-size: 11.5px; text-decoration: none; }
.block-more:hover { color: var(--mint-dark, #1092ab); }

/* 주간 인기 두 칸 */
.rank-pair { display: grid; gap: var(--cafe-gap); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
/* 순환 창 — 3줄만 보인다. 1·2위가 위에 고정이라 이 칸은 3위부터다. */
.rank-stage { --rank-row-h: 52px; max-height: calc(var(--rank-row-h) * 3); overflow: hidden; }

/* 층은 선이 아니라 바탕색으로 나눈다 */
.rank-pin { background: rgba(39, 188, 214, .07); }
.rank-pin .post-title { font-weight: 700; }
.rank-pin .rank-no { color: var(--mint-dark, #1092ab); font-size: 13.5px; }
.rank-pin .rank-row a:hover { background: rgba(39, 188, 214, .13); }

.rank-tail { background: var(--paper, #f4f9fc); }
.rank-tail .post-title { color: var(--ink-soft, #52616c); }
.rank-tail .rank-no { opacity: .7; }

/* 목록 — 순위·게시판 공통 */
.rank-list, .block-list { margin: 0; padding: 0; list-style: none; }
.rank-list li, .block-list li { border-bottom: 1px solid var(--line, #d8e8f0); }
.rank-list li:last-child, .block-list li:last-child { border-bottom: 0; }

.rank-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center;
  transition: opacity .4s ease, transform .4s ease, max-height .4s ease; max-height: 70px; }
.rank-row.is-out { opacity: 0; transform: translateY(-100%); max-height: 0; }
.rank-list.is-fixed .rank-row { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rank-row { transition: none; }
  .rank-stage { max-height: none; overflow: visible; }
}
.rank-no {
  justify-self: center;
  color: var(--muted, #64717b); font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rank-row.is-top .rank-no { color: var(--mint-dark, #1092ab); }

/* 글 한 줄 — 제목이 주인공, 정보는 한 단계 뒤로 */
.rank-list .rank-row a, .block-list li a {
  display: block; padding: 8px var(--cafe-pad);
  color: inherit; text-decoration: none;
}
.rank-list .rank-row a:hover, .block-list li a:hover { background: var(--paper-deep, #e6f3f9); }
.post-title {
  display: block;
  color: var(--ink, #17212b); font-size: 13.5px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-row.is-top .post-title { font-weight: 700; }
.post-meta {
  display: block; margin-top: 1px;
  color: var(--muted, #64717b); font-size: 11.5px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-meta i { margin: 0 4px; font-style: normal; opacity: .45; }
.post-board { color: var(--mint-dark, #1092ab); font-weight: 700; }
/* 묶음 패널은 여러 게시판 글이 섞이므로 게시판 이름을 보여준다 */
.post-loading, .post-empty {
  padding: 16px var(--cafe-pad); color: var(--muted, #64717b); font-size: 12.5px;
}

/* 묶음 패널 — 주간 순위 칸과 같은 규격이다. 대문은 묶음 단위로 보여준다. */
.group-panel[hidden] { display: none; }
.group-name { color: inherit; text-decoration: none; }
.group-name:hover { color: var(--mint-dark, #1092ab); }
.group-more { color: var(--muted, #64717b); font-size: 11.5px; text-decoration: none; }
.group-more:hover { color: var(--mint-dark, #1092ab); }

/* 게시판 블록 — 빈 게시판은 JS 가 숨긴다. */
/* 격자 대신 단(column)으로 흘린다 — 격자는 한 줄의 높이를 가장 큰 칸에
   맞춰서, 글이 2개인 블록 옆이 크게 벌어졌다. */
/* 묶음 패널을 2열로 — 주간 조회수/추천수 칸과 같은 격자 */
.board-blocks {
  display: grid; gap: var(--cafe-gap); min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}
.board-block[hidden] { display: none; }

@media (max-width: 900px) {
  .cafe-grid { grid-template-columns: minmax(0, 1fr); }
  /* 좁은 화면에서는 게시판 목록을 가로로 넘긴다 — 세로면 글이 한참 아래로 밀린다 */
  .cafe-rail { display: flex; gap: 14px; overflow-x: auto; padding: 10px; }
  .rail-title { display: none; }
  .rail-group { flex: none; margin: 0; min-width: 112px; }
  .cafe-band-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* 다크 — 표면과 경계만 바꾼다. 위계와 여백은 그대로다. */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .cafe-band { background: #0d1a20; border-bottom-color: #22333d; }
  html:not(.atv-light) .cafe-rail,
  html:not(.atv-light) .cafe-panel,
  html:not(.atv-light) .board-block { background: #152229; border-color: #22333d; }
  html:not(.atv-light) .rail-title,
  html:not(.atv-light) .panel-head,
  html:not(.atv-light) .block-head,
  html:not(.atv-light) .rank-rest,
  html:not(.atv-light) .rank-list li,
  html:not(.atv-light) .block-list li { border-color: #22333d; }
  html:not(.atv-light) .block-head { background: #101c22; }
  html:not(.atv-light) .rail-group-head,
  html:not(.atv-light) .block-name,
  html:not(.atv-light) .post-title { color: #e9eff2; }
  html:not(.atv-light) .rail-group li a { color: #a9b8c1; }
  html:not(.atv-light) .rail-group li a:hover,
  html:not(.atv-light) .rank-list .rank-row a:hover,
  html:not(.atv-light) .block-list li a:hover { background: #1b2f38; }
  html:not(.atv-light) .post-meta,
  html:not(.atv-light) .rank-no,
  html:not(.atv-light) .rank-rest-label,
  html:not(.atv-light) .cafe-band-lead,
  html:not(.atv-light) .post-loading,
  html:not(.atv-light) .post-empty,
  html:not(.atv-light) .panel-note,
  html:not(.atv-light) .block-more { color: #8fa0aa; }
}
html.atv-dark .cafe-band { background: #0d1a20; border-bottom-color: #22333d; }
html.atv-dark .cafe-rail, html.atv-dark .cafe-panel, html.atv-dark .board-block {
  background: #152229; border-color: #22333d; }
html.atv-dark .rail-title, html.atv-dark .panel-head, html.atv-dark .block-head,
html.atv-dark .rank-rest, html.atv-dark .rank-list li, html.atv-dark .block-list li {
  border-color: #22333d; }
html.atv-dark .block-head { background: #101c22; }
html.atv-dark .rail-group-head, html.atv-dark .block-name, html.atv-dark .post-title { color: #e9eff2; }
html.atv-dark .rail-group li a { color: #a9b8c1; }
html.atv-dark .rail-group li a:hover, html.atv-dark .rank-list .rank-row a:hover,
html.atv-dark .block-list li a:hover { background: #1b2f38; }
html.atv-dark .post-meta, html.atv-dark .rank-no, html.atv-dark .rank-rest-label,
html.atv-dark .cafe-band-lead, html.atv-dark .post-loading, html.atv-dark .post-empty,
html.atv-dark .panel-note, html.atv-dark .block-more { color: #8fa0aa; }

/* 순위 층과 묶음 제목 — 다크 */
@media (prefers-color-scheme: dark) {
  html:not(.atv-light) .rank-pin { background: rgba(79, 199, 221, .10); }
  html:not(.atv-light) .rank-pin .rank-row a:hover { background: rgba(79, 199, 221, .17); }
  html:not(.atv-light) .rank-tail { background: #101c22; }
  html:not(.atv-light) .rank-tail .post-title { color: #a9b8c1; }
  html:not(.atv-light) .group-name { color: #e9eff2; }
  html:not(.atv-light) .group-more { color: #8fa0aa; }
}
html.atv-dark .rank-pin { background: rgba(79, 199, 221, .10); }
html.atv-dark .rank-pin .rank-row a:hover { background: rgba(79, 199, 221, .17); }
html.atv-dark .rank-tail { background: #101c22; }
html.atv-dark .rank-tail .post-title { color: #a9b8c1; }
html.atv-dark .group-name { color: #e9eff2; }
html.atv-dark .group-more { color: #8fa0aa; }