/* =====================================================================
   하늘자리 — 디자인 시스템
   색상: 하늘색(#0095da) · 흰색 · 딥네이비 텍스트 · 은은한 골드 포인트
   글자: Pretendard(본문) · Noto Serif KR(제목)
   ===================================================================== */
:root {
  --sky: #0095da;
  --sky-deep: #0071bc;
  --sky-dark: #005a99;
  --sky-50: #f2f9fd;
  --sky-100: #e3f2fb;
  --sky-200: #bfe2f6;
  --sky-300: #8dccee;
  --navy: #0e2233;
  --ink: #1c2b39;
  --ink-2: #44546a;
  --ink-3: #6f7f92;
  --line: #dfe7ee;
  --line-2: #eef3f7;
  --paper: #ffffff;
  --paper-2: #f6f9fb;
  --gold: #c8a96a;
  --gold-2: #e6d3a8;
  --danger: #c0392b;
  --ok: #2e8b57;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;

  --fs-base: 17px;
  --lh: 1.75;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(14, 34, 51, .06);
  --shadow: 0 10px 30px rgba(14, 34, 51, .10);
  --shadow-lg: 0 24px 60px rgba(14, 34, 51, .16);
  --wrap: 1240px;
  --header-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 720px) {
  :root { --fs-base: 16px; --header-h: 60px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sky-deep); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
.serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.005em; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 999; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 2px; border-radius: 4px; }

/* ---------- Typography helpers ---------- */
.eyebrow { font-size: .92rem; font-weight: 700; letter-spacing: .12em; color: var(--sky); text-transform: uppercase; margin-bottom: 12px; }
.eyebrow.light { color: var(--sky-200); }
.eyebrow.lg { font-size: 1.5rem; letter-spacing: .08em; }
.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 46em; }
.muted { color: var(--ink-3); }
.small { font-size: .92rem; }
.center { text-align: center; }
.hl { color: var(--sky-deep); }
/* 본문 속 "하늘자리" 브랜드 강조 — typo() 가 자동으로 감쌈 */
.brand-name { color: var(--sky-deep); font-weight: 600; }
.hero .brand-name, .section.navy .brand-name, .site-footer .brand-name, .side-card.call .brand-name, .feature.dark .brand-name { color: #9ad8f7; }
.cta-band .brand-name, .btn .brand-name, .eyebrow .brand-name, .hl .brand-name, .hero h1 em .brand-name, .btn-primary .brand-name { color: inherit; font-weight: inherit; }
.gold { color: var(--gold); }
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head .lead { margin: 8px 0 0; }
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section.tint { background: var(--paper-2); }
.section.sky { background: linear-gradient(180deg, var(--sky-50), #fff); }
.section.navy { background: var(--navy); color: #d9e6f0; }
.section.navy h2, .section.navy h3 { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--sky); color: #fff; box-shadow: 0 8px 20px rgba(0, 149, 218, .28); }
.btn-primary:hover { background: var(--sky-deep); color: #fff; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #163449; color: #fff; }
.btn-light { background: #fff; color: var(--sky-deep); }
.btn-light:hover { color: var(--sky-dark); }
.btn-outline { border-color: var(--sky); color: var(--sky-deep); background: transparent; }
.btn-outline:hover { background: var(--sky-50); }
.btn-outline-light { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-ghost { color: var(--sky-deep); padding-inline: 8px; }
.btn-ghost::after { content: "→"; transition: transform .2s; }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-xl { padding: 16px 30px; font-size: 1.1rem; }
.btn-sm { padding: 8px 16px; font-size: .92rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(14, 34, 51, .06); transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(14, 34, 51, .08); }
.topbar { background: var(--navy); color: #cfe0ec; font-size: .9rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar-msg { display: inline-flex; align-items: center; gap: 8px; }
.topbar-msg .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ec36a; box-shadow: 0 0 0 4px rgba(62, 195, 106, .25); animation: pulse 2s infinite; }
.topbar-tel { color: #fff; font-weight: 700; letter-spacing: .02em; }
.topbar-links { display: flex; gap: 20px; }
.topbar-links a:hover { color: #fff; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(62, 195, 106, .3);} 50% { box-shadow: 0 0 0 7px rgba(62, 195, 106, .05);} }
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand-logo { width: 200px; height: 76px; image-rendering: auto; }
@media (max-width: 1080px) { .brand-logo { width: 150px; height: 57px; } }
@media (max-width: 720px) { .brand-logo { width: 124px; height: 47px; } }
.main-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list { display: flex; list-style: none; gap: 2px; flex-wrap: nowrap; }
.nav-item { position: relative; }
.nav-link { display: block; padding: 10px 12px; font-weight: 700; font-size: 1.02rem; color: var(--ink); border-radius: 10px; position: relative; white-space: nowrap; word-break: keep-all; }
@media (max-width: 1320px) { .nav-link { padding: 10px 9px; font-size: .96rem; } .header-inner { gap: 16px; } }
@media (max-width: 1180px) { .nav-link { padding: 10px 7px; font-size: .92rem; } }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-item:hover .nav-link::after, .nav-item.current .nav-link::after { transform: scaleX(1); }
.nav-item.current .nav-link { color: var(--sky-deep); }
.mega { position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 8px); min-width: 300px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .2s; border: 1px solid var(--line-2); }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.mega-head { padding: 4px 8px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.mega-head strong { display: block; color: var(--sky-deep); font-size: 1.02rem; }
.mega-head span { font-size: .88rem; color: var(--ink-3); }
.mega-list { list-style: none; }
.mega-list a { display: block; padding: 9px 10px; border-radius: 8px; font-size: .98rem; color: var(--ink-2); white-space: nowrap; }
.mega-list a:hover, .mega-list a.on { background: var(--sky-50); color: var(--sky-deep); }
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.header-tel { font-size: 1.05rem; letter-spacing: .02em; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 5px; align-items: center; padding: 0; }
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: .3s; }
.header-tel-icon { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sky); color: #fff; place-items: center; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(0, 149, 218, .3); }
.header-tel-icon:hover { color: #fff; background: var(--sky-deep); }

.mobile-nav { position: fixed; inset: 0; z-index: 200; background: #fff; overflow: auto; padding: 0 20px 40px; animation: slideIn .3s var(--ease); }
.mobile-nav[hidden] { display: none; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0;} to { transform: none; opacity: 1;} }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); font-size: 1.4rem; color: var(--sky); font-weight: 700; }
.mobile-close { border: 0; background: var(--paper-2); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; }
.mobile-list { list-style: none; border-top: 1px solid var(--line); }
.mobile-group { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 16px 4px; border: 0; background: none; border-bottom: 1px solid var(--line-2); font-size: 1.12rem; font-weight: 700; color: var(--navy); text-align: left; }
.mobile-group .chev { transition: transform .2s; color: var(--ink-3); }
.mobile-group[aria-expanded="true"] .chev { transform: rotate(90deg); }
.mobile-sub { list-style: none; background: var(--paper-2); border-radius: 12px; margin: 8px 0 12px; padding: 6px; }
.mobile-sub a { display: block; padding: 12px 14px; font-size: 1.02rem; color: var(--ink-2); }
.mobile-nav-foot { margin-top: 24px; text-align: center; color: var(--ink-3); }
.mobile-nav-foot p { margin-top: 16px; font-family: var(--font-serif); }

@media (max-width: 1080px) {
  .header-inner { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; }
  .main-nav, .header-actions { display: none; }
  .nav-toggle { display: inline-flex; order: -1; justify-self: start; }
  .brand { justify-self: center; }
  .header-tel-icon { display: grid; justify-self: end; }
  .topbar-links { display: none; }
}

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; min-height: min(86vh, 860px); display: grid; align-items: center; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.04); animation: heroZoom 18s ease-out forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 27, 45, .92) 0%, rgba(8, 27, 45, .72) 45%, rgba(8, 27, 45, .25) 100%), linear-gradient(0deg, rgba(8, 27, 45, .85) 0%, transparent 40%); pointer-events: none; }
.hero-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(0, 149, 218, .35), transparent 55%); }
.hero-inner { position: relative; padding: clamp(80px, 10vw, 140px) 0 clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: 56px; align-items: end; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.24; font-weight: 600; text-wrap: balance; }
.hero h1 em { font-style: normal; color: #9ad8f7; }
/* 홈 히어로 제목 — 두 문장을 각각 2줄(고인에게는 / 편안한… , 유족의 마음에는 / 작은 미소를)로, 문장 사이는 한 줄 띄움 */
.hero h1 .hero-line { display: block; }
.hero h1 .hero-line + .hero-line { margin-top: .6em; }
@media (max-width: 720px) { .hero h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); } } /* "편안한 마지막 안식처를" 이 한 줄에 들어가도록 */
.hero .eyebrow { color: #9ad8f7; }
.hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: #cfe0ec; max-width: 34em; margin: 22px 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-side { display: grid; gap: 14px; }
.hero-card { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); border-radius: var(--radius); padding: 22px 24px; color: #fff; transition: background .25s, transform .25s; }
.hero-card:hover { background: rgba(255, 255, 255, .14); transform: translateY(-3px); color: #fff; }
.hero-card strong { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.hero-card span { color: #b9cfde; font-size: .95rem; }
.hero-card .arrow { float: right; font-size: 1.3rem; color: #9ad8f7; }
.hero-card.today { background: rgba(0, 149, 218, .28); border-color: rgba(154, 216, 247, .4); }
.hero-card.today .today-date { font-size: .9rem; color: #cfe8f8; letter-spacing: .04em; }
.hero-card.today .today-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hero-card.today .tag { font-size: .85rem; }
.hero-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: rgba(255, 255, 255, .6); font-size: .8rem; letter-spacing: .2em; animation: bob 2.2s infinite; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 6px);} }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hero-side { grid-template-columns: 1fr; } .hero { min-height: auto; } }

/* Trust strip */
.trust { background: #fff; border-bottom: 1px solid var(--line-2); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 26px 20px; display: flex; gap: 14px; align-items: center; border-left: 1px solid var(--line-2); }
.trust-item:first-child { border-left: 0; }
.trust-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--sky-50); color: var(--sky); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.trust-item strong { display: block; color: var(--navy); }
.trust-item span { font-size: .92rem; color: var(--ink-3); }
@media (max-width: 900px) { .trust-inner { grid-template-columns: repeat(2, 1fr); } .trust-item:nth-child(3) { border-left: 0; } .trust-item { border-top: 1px solid var(--line-2); } .trust-item:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 520px) { .trust-inner { grid-template-columns: 1fr; } .trust-item { border-left: 0; } }

/* Values (Trust/Servant/Share) */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value { background: #fff; border-radius: var(--radius-lg); padding: 36px 32px; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--sky), var(--sky-300)); }
.value .en { font-family: var(--font-serif); font-size: .95rem; letter-spacing: .18em; color: var(--sky); text-transform: uppercase; }
.value h3 { font-size: 1.5rem; margin: 6px 0 12px; }
.value p { color: var(--ink-2); margin: 0; }
.value .num { position: absolute; right: 22px; top: 18px; font-family: var(--font-serif); font-size: 3.2rem; color: var(--sky-100); line-height: 1; font-weight: 700; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }

/* Services grid */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; display: flex; align-items: end; color: #fff; background: var(--navy); isolation: isolate; }
.service img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; opacity: .85; z-index: -1; }
.service::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 27, 45, .92) 0%, rgba(8, 27, 45, .35) 55%, rgba(8, 27, 45, .05) 100%); z-index: -1; pointer-events: none; }
.service:hover img { transform: scale(1.06); }
.service-body { padding: 28px; }
.service .num { font-family: var(--font-serif); color: #f3e2b3; font-size: .95rem; letter-spacing: .12em; font-weight: 700; }
.service h3 { color: #fff; font-size: 1.4rem; margin: 6px 0 8px; }
.service p { color: #cfe0ec; font-size: .96rem; margin: 0 0 14px; }
.service .more { font-weight: 700; color: #9ad8f7; }
.service.wide, .service:last-child { grid-column: span 2; }
@media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } .service.wide, .service:last-child { grid-column: span 2; } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } .service.wide, .service:last-child { grid-column: auto; } .service { min-height: 300px; } }

/* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-media img.ratio-3-2 { aspect-ratio: 3 / 2; }
.split-media .badge-float { position: absolute; left: -18px; bottom: -18px; background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow); border: 1px solid var(--line-2); }
.split-media .badge-float strong { display: block; color: var(--sky); font-size: 1.6rem; font-family: var(--font-serif); line-height: 1; }
.split-media .badge-float span { font-size: .9rem; color: var(--ink-3); }
.split h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 18px; }
.split .lead { margin-bottom: 20px; }
.check-list { list-style: none; display: grid; gap: 12px; margin: 0 0 24px; }
.check-list li { padding-left: 34px; position: relative; color: var(--ink-2); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--sky-100); color: var(--sky-deep); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } .split-media .badge-float { left: 12px; bottom: -14px; } }

/* Calendar preview on home */
.cal-preview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.cal-preview.cal-page { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); }
@media (max-width: 960px) { .cal-preview, .cal-preview.cal-page { grid-template-columns: minmax(0, 1fr); } }

/* Story cards (cases, columns, videos) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-100); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media .play { position: absolute; inset: 0; display: grid; place-items: center; }
.card-media .play span { width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: var(--sky); font-size: 1.4rem; padding-left: 4px; box-shadow: var(--shadow); }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-meta { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--ink-3); }
.card h3 { font-size: 1.22rem; line-height: 1.4; }
.card h3 a:hover { color: var(--sky-deep); }
.card p { color: var(--ink-2); font-size: .98rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .card-foot { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--sky-deep); font-size: .95rem; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sky-100); color: var(--sky-deep); font-size: .82rem; font-weight: 700; }
.tag.gold { background: #f6efdf; color: #8a6d2e; }
.tag.gray { background: var(--line-2); color: var(--ink-2); }
.tag.green { background: #e6f5ec; color: #227a45; }
.tag.red { background: #fbe9e7; color: #b23b2f; }
.tag.navy { background: var(--navy); color: #fff; }
@media (max-width: 1000px) { .cards, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards, .cards.four { grid-template-columns: 1fr; } }

/* Column feature (large) */
.column-feature { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; }
.column-lead { background: #fff; border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); position: relative; }
.column-lead::before { content: "“"; position: absolute; top: 12px; right: 28px; font-family: var(--font-serif); font-size: 7rem; color: var(--sky-100); line-height: 1; pointer-events: none; }
.column-lead h3 { font-size: 1.7rem; margin: 10px 0 14px; }
.column-lead p { color: var(--ink-2); font-size: 1.05rem; }
.column-lead .author { display: flex; gap: 12px; align-items: center; margin-top: 20px; color: var(--ink-3); font-size: .95rem; }
.column-lead .author strong { color: var(--navy); }
.column-list { list-style: none; display: grid; gap: 12px; }
.column-list li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 18px 22px; background: #fff; border-radius: 14px; border: 1px solid var(--line-2); transition: border-color .2s, transform .2s; }
.column-list li a:hover { border-color: var(--sky-300); transform: translateX(4px); }
.column-list strong { color: var(--navy); font-size: 1.05rem; min-width: 0; }
.column-list.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .column-list.two { grid-template-columns: 1fr; } }
.column-list small { color: var(--ink-3); }
@media (max-width: 900px) { .column-feature { grid-template-columns: 1fr; } }

/* Video */
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-hero { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: start; }
.video-side { display: grid; gap: 12px; }
.video-side a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); }
.video-side a:hover { border-color: var(--sky-300); }
.video-side img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.video-side strong { display: block; color: var(--navy); font-size: .98rem; line-height: 1.4; }
.video-side small { color: var(--ink-3); }
@media (max-width: 900px) { .video-hero { grid-template-columns: 1fr; } }

/* Empty state */
.empty { text-align: center; font-size: 1.05rem; padding: 60px 24px; background: var(--paper-2); border-radius: var(--radius-lg); border: 1px dashed var(--line); color: var(--ink-3); }
.empty strong { display: block; color: var(--navy); font-size: 1.2rem; margin-bottom: 6px; }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--sky-deep), var(--sky) 60%, #2fb3f0); color: #fff; padding: clamp(56px, 7vw, 88px) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.cta-band::after { content: ""; position: absolute; left: -100px; bottom: -140px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 8px; }
.cta-band p { color: #e3f2fb; margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Page hero (sub) ---------- */
.page-hero { background: radial-gradient(ellipse at 20% 0%, var(--sky-100), transparent 55%), linear-gradient(180deg, var(--sky-50), #fff); padding: 40px 0 44px; border-bottom: 1px solid var(--line-2); }
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 8px 0 14px; }
.page-hero .lead { margin: 0; }
.page-hero h1 .h1-en { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .48em; letter-spacing: .04em; color: var(--sky-deep); margin-top: 10px; }
.page-hero.dark { background: var(--navy); color: #d9e6f0; border: 0; }
.page-hero.dark h1 { color: #fff; }
.page-hero.dark .lead { color: #b9cfde; }
.page-hero.dark .crumb a, .page-hero.dark .crumb strong { color: #cfe0ec; }
.crumb { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--ink-3); margin-bottom: 14px; flex-wrap: wrap; }
.crumb a:hover { color: var(--sky-deep); }
.crumb strong { color: var(--ink-2); font-weight: 600; }
.subnav-bar { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.subnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 16px 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; border-bottom: 3px solid transparent; font-size: .98rem; }
.subnav a:hover { color: var(--sky-deep); }
.subnav a.active { color: var(--sky-deep); border-color: var(--sky); }
@media (max-width: 1080px) { .subnav-bar { top: var(--header-h); } }

/* ---------- Content layouts ---------- */
.prose { max-width: 800px; font-size: 1.08rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.75rem; margin-top: 2.2em; padding-top: .6em; border-top: 1px solid var(--line-2); }
.prose h2:first-child { margin-top: 0; border: 0; padding: 0; }
.prose h3 { font-size: 1.32rem; margin-top: 1.8em; color: var(--sky-dark); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin: 1.6em 0; padding: 22px 28px; background: var(--sky-50); border-left: 4px solid var(--sky); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-serif); font-size: 1.12rem; color: var(--navy); }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow); margin: 1.6em auto; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { text-align: center; color: var(--ink-3); font-size: .92rem; margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); color: var(--navy); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose strong { color: var(--navy); }
.prose .note { background: #fff8e8; border: 1px solid #f1e2b8; padding: 16px 20px; border-radius: 12px; font-size: .98rem; }
.prose .note > * + * { margin-top: .85em; }
.prose .note ul { padding-left: 1.25em; margin-top: .45em; }
.prose .note li + li { margin-top: .35em; }
.prose .note .note-h { font-family: var(--font-serif); font-weight: 700; color: var(--navy); font-size: 1.04rem; margin-top: 1.1em; }
.prose .note .note-cta { margin-top: 1.15em; padding-top: .9em; border-top: 1px dashed #e0cfa0; color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.two-col.narrow-side { grid-template-columns: minmax(0, 1fr) 300px; }
.side { position: sticky; top: calc(var(--header-h) + 72px); display: grid; gap: 18px; }
.side-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.side-card h4 { font-size: 1.05rem; margin-bottom: 12px; color: var(--sky-dark); }
.side-card ul { list-style: none; display: grid; gap: 8px; }
.side-card li a { color: var(--ink-2); display: flex; justify-content: space-between; }
.side-card li a:hover { color: var(--sky-deep); }
.side-card.call { background: var(--navy); color: #fff; border: 0; text-align: center; }
.side-card.call h4 { color: #9ad8f7; }
.side-card.call .num { font-size: 2rem; font-weight: 800; letter-spacing: .02em; display: block; margin-bottom: 6px; }
.side-card.call p { color: #b9cfde; font-size: .92rem; }
@media (max-width: 1000px) { .two-col, .two-col.narrow-side { grid-template-columns: 1fr; } .side { position: static; } }

/* Feature grid & steps */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-grid.two { grid-template-columns: repeat(2, 1fr); }
.feature-grid.four { grid-template-columns: repeat(4, 1fr); }
.feature { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .icon { width: 54px; height: 54px; border-radius: 16px; background: var(--sky-50); color: var(--sky); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 18px; }
.feature h3 { font-size: 1.25rem; margin-bottom: 10px; }
.feature p { color: var(--ink-2); margin: 0; }
.feature.dark { background: #163449; border: 0; color: #cfe0ec; }
.feature.dark p { color: #c3d5e3; }
.feature.dark h3 { color: #fff; }
a.feature { display: block; text-decoration: none; color: inherit; }
.feature.dark.more-card { background: transparent; border: 1px dashed rgba(255, 255, 255, .28); display: flex; flex-direction: column; justify-content: center; }
.feature.dark.more-card .icon { background: var(--sky); color: #fff; }
.feature.dark.more-card:hover { background: rgba(255, 255, 255, .05); }
.feature.dark .icon { background: rgba(255, 255, 255, .1); color: #9ad8f7; }
/* 한자 아이콘(影禮魂喪埋): 붓글씨 해서체 Yuji Syuku (header.php 에서 홈에만 서브셋 로드), 없으면 Noto Serif KR */
.feature .icon.hanja { font-family: "Yuji Syuku", "Noto Serif KR", var(--font-serif); font-size: 1.85rem; font-weight: 400; line-height: 1; padding-bottom: .05em; }
@media (max-width: 900px) { .feature-grid, .feature-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid, .feature-grid.two, .feature-grid.four { grid-template-columns: 1fr; } }

.steps { counter-reset: step; display: grid; gap: 0; position: relative; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line-2); position: relative; }
.step:last-child { border: 0; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-serif); font-size: 2rem; color: var(--sky); font-weight: 700; line-height: 1; }
.step h3 { font-size: 1.3rem; margin-bottom: 6px; }
.step p { color: var(--ink-2); margin: 0; }
.step .step-media { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.step .step-media img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.flow-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; text-align: center; position: relative; }
.flow-item strong { display: block; color: var(--navy); }
.flow-item small { color: var(--ink-3); display: block; margin-top: 4px; }
.flow-item:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--sky-300); font-size: 1.4rem; }
.flow.vertical { grid-template-columns: 1fr; }
.flow.vertical .flow-item:not(:last-child)::after { content: "⌄"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
.flow-item.on { background: var(--sky); color: #fff; border-color: var(--sky); }
.flow-item.on strong, .flow-item.on small { color: #fff; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery.three { grid-template-columns: repeat(3, 1fr); }
.gallery a, .gallery img { display: block; border-radius: 12px; overflow: hidden; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .4s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.compare figure { margin: 0; }
.compare img { border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
.compare figcaption { text-align: center; margin-top: 10px; font-weight: 700; color: var(--ink-2); }
.compare .arrow { font-size: 2rem; color: var(--sky); }
@media (max-width: 700px) { .gallery, .gallery.three { grid-template-columns: repeat(2, 1fr); } .compare { grid-template-columns: 1fr; } .compare .arrow { transform: rotate(90deg); text-align: center; } }

.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(8, 27, 45, .92); display: grid; place-items: center; padding: 24px; animation: fade .2s; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1100px, 100%); max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-lg); }
.lightbox button { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.3rem; }
@keyframes fade { from { opacity: 0;} }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 640px; }
.table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.table thead th { background: var(--navy); color: #fff; font-weight: 700; position: sticky; top: 0; }
.table tbody th { background: var(--paper-2); color: var(--navy); font-weight: 700; white-space: nowrap; width: 160px; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table td.ok { color: var(--ok); font-weight: 700; }
.table td.dash { color: var(--ink-3); }
.table .sub { display: block; font-size: .86rem; color: var(--ink-3); font-weight: 400; }

/* Product tiers */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tier { border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; padding: 30px 26px; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tier.featured { border-color: var(--sky); box-shadow: 0 16px 40px rgba(0, 149, 218, .18); }
.tier .ribbon { position: absolute; top: -12px; left: 24px; background: var(--sky); color: #fff; font-size: .8rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; letter-spacing: .04em; }
.tier .name { font-family: var(--font-serif); color: var(--ink-3); font-size: .95rem; letter-spacing: .1em; }
.tier .code { font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1.1; margin: 4px 0 4px; letter-spacing: -.02em; }
.tier .code small { font-size: 1rem; color: var(--sky); font-weight: 700; margin-left: 4px; }
.tier .desc { color: var(--ink-2); font-size: .95rem; margin-bottom: 18px; min-height: 3em; }
.tier ul { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.tier li { display: flex; gap: 10px; font-size: .95rem; color: var(--ink-2); }
.tier li b { color: var(--navy); flex: none; min-width: 72px; font-weight: 700; }
.tier .btn { margin-top: auto; }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }

/* Facility cards */
.fac-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.fac-filter a { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; color: var(--ink-2); }
.fac-filter a.on, .fac-filter a:hover { background: var(--sky); color: #fff; border-color: var(--sky); }
.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fac { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.fac:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.fac-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.fac-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fac:hover .fac-media img { transform: scale(1.05); }
.fac-media .tag { position: absolute; left: 14px; top: 14px; background: rgba(255, 255, 255, .92); }
.fac-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fac-body h3 { font-size: 1.3rem; }
.fac-body .loc { color: var(--ink-3); font-size: .92rem; display: flex; gap: 6px; align-items: center; }
.fac-body .headline { color: var(--ink-2); font-size: .98rem; }
.fac-body .fac-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.fac-body .region { font-size: .85rem; color: var(--sky-deep); font-weight: 700; }
@media (max-width: 1000px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fac-grid { grid-template-columns: 1fr; } }
.fac-hero { position: relative; min-height: 460px; display: grid; align-items: end; color: #fff; background: var(--navy); }
.fac-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; filter: saturate(1.05); }
.fac-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 27, 45, .96) 0%, rgba(8, 27, 45, .72) 45%, rgba(8, 27, 45, .25) 100%); pointer-events: none; }
.fac-hero .wrap { position: relative; z-index: 1; padding: 60px 0 44px; }
.fac-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.fac-hero .crumb a, .fac-hero .crumb strong, .fac-hero .crumb span { color: #cfe0ec; }
.fac-hero .loc { color: #cfe0ec; font-size: 1.05rem; margin-top: 8px; }
.fac-hero .tagline { font-family: var(--font-serif); font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: #e3f2fb; margin-top: 12px; }
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.spec div { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; }
.spec small { display: block; color: var(--ink-3); font-size: .85rem; margin-bottom: 4px; }
.spec strong { color: var(--navy); font-size: 1.05rem; }

/* Calendar */
.calendar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); min-width: 0; max-width: 100%; }
.cal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--navy); color: #fff; gap: 12px; flex-wrap: wrap; }
.cal-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; display: flex; gap: 12px; align-items: baseline; }
.cal-title small { font-size: .9rem; color: #9ad8f7; font-family: var(--font-sans); font-weight: 600; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-nav button, .cal-nav a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.cal-nav button:hover { background: rgba(255, 255, 255, .18); }
.cal-nav .today-btn { width: auto; padding: 0 14px; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.cal-nav select { height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; padding: 0 10px; font: inherit; font-size: .95rem; }
.cal-nav select option { color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 12px 6px; text-align: center; font-size: .88rem; font-weight: 700; color: var(--ink-3); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.cal-dow.sun { color: var(--danger); }
.cal-dow.sat { color: var(--sky-deep); }
.cal-cell { min-height: 112px; min-width: 0; overflow: hidden; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 8px 8px 10px; position: relative; display: flex; flex-direction: column; gap: 4px; transition: background .2s; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:hover { background: var(--sky-50); }
.cal-cell.other { background: #fafbfc; color: var(--ink-3); }
.cal-cell.other .cal-day { color: #b8c2cc; }
.cal-cell.today { background: var(--sky-50); box-shadow: inset 0 0 0 2px var(--sky); }
.cal-cell.good { background: linear-gradient(180deg, #fff, #f0fbf3); }
.cal-cell.good.today { background: #eaf7ee; }
.cal-day { display: flex; justify-content: space-between; align-items: baseline; }
.cal-day b { font-size: 1.08rem; color: var(--navy); }
.cal-cell.sun .cal-day b, .cal-cell.holiday .cal-day b { color: var(--danger); }
.cal-cell.sat .cal-day b { color: var(--sky-deep); }
.cal-day .lunar { font-size: .72rem; color: var(--ink-3); }
.cal-day .lunar.first { color: var(--sky-deep); font-weight: 700; }
.cal-ganzhi { font-size: .74rem; color: var(--ink-3); letter-spacing: .02em; }
.cal-marks { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.mark { font-size: .72rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; line-height: 1.4; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mark .short { display: none; }
.mark.son { background: #e6f5ec; color: #1f7a42; }
.mark.gong { background: #e3f2fb; color: #005a99; }
.mark.gil { background: #fff3d6; color: #8a5a00; }
.mark.daegil { background: #fff3d6; color: #8a5a00; }
.mark.chong { background: #e6f5ec; color: #1f7a42; }
.mark.jung { background: #fbe9e7; color: #b23b2f; }
.mark.holiday { background: #fdecec; color: #b23b2f; }
.mark.term { background: var(--line-2); color: var(--ink-2); }
.mark.hansik, .mark.special { background: var(--navy); color: #fff; }
.cal-legend { display: flex; gap: 14px 22px; flex-wrap: wrap; padding: 16px 22px; background: var(--paper-2); border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.cal-legend span { display: inline-flex; gap: 8px; align-items: center; }
.cal-loading { opacity: .5; pointer-events: none; }
.cal-mini .cal-cell { min-height: 72px; padding: 6px; }
.cal-mini .cal-ganzhi { display: none; }
.cal-mini .cal-day b { font-size: .98rem; }
@media (max-width: 720px) {
  .cal-head { padding: 14px 12px; gap: 10px; }
  .cal-title { font-size: 1.15rem; flex-wrap: wrap; gap: 4px 10px; }
  .cal-nav { flex-wrap: wrap; gap: 6px; }
  .cal-nav button, .cal-nav a { width: 36px; height: 36px; }
  .cal-nav select { height: 36px; padding: 0 6px; font-size: .88rem; }
  .cal-nav .today-btn { padding: 0 10px; font-size: .85rem; }
  .cal-cell { min-height: 84px; padding: 6px 3px 6px; gap: 2px; }
  .cal-marks { flex-direction: column; align-items: stretch; gap: 2px; }
  .cal-cell .mark { text-align: center; padding: 1px 3px; font-size: .7rem; }
  .cal-cell .mark .full { display: none; }
  .cal-cell .mark .short { display: inline; }
  .cal-ganzhi { display: none; }
  .cal-day .lunar { display: none; }
  .mark { font-size: .6rem; padding: 1px 3px; letter-spacing: -.02em; }
  .cal-marks { gap: 2px; }
  .cal-title { font-size: 1.2rem; }
}
.day-detail { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.day-detail h3 { font-size: 1.5rem; }
.day-detail .dd-lunar { color: var(--ink-3); margin: 4px 0 16px; }
.day-detail .dd-ganzhi { display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; background: var(--paper-2); border-radius: 12px; font-weight: 700; color: var(--navy); margin-bottom: 18px; }
.day-detail .dd-ganzhi span { font-family: var(--font-serif); font-size: 1.4rem; color: var(--sky-deep); }
.day-detail ul { list-style: none; display: grid; gap: 10px; }
.day-detail li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.day-detail li p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.day-detail .verdict { padding: 16px 20px; border-radius: 14px; font-weight: 700; margin-top: 18px; }
.day-detail .verdict.good { background: #e6f5ec; color: #1f7a42; }
.day-detail .verdict.neutral { background: var(--paper-2); color: var(--ink-2); }
.day-detail .verdict.bad { background: #fbe9e7; color: #b23b2f; }
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.glossary div { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 20px 22px; }
.glossary strong { display: flex; gap: 8px; align-items: center; font-size: 1.08rem; color: var(--navy); margin-bottom: 6px; }
.glossary p { margin: 0; color: var(--ink-2); font-size: .96rem; }
@media (max-width: 720px) { .glossary { grid-template-columns: 1fr; } }

/* Misconceptions (myth / fact) */
.myth-list { display: grid; gap: 24px; }
.myth { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr 1fr; }
.myth > div { padding: 30px 32px; }
.myth .m { background: #fbf4f2; }
.myth .f { background: #fff; }
.myth .label { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.myth .m .label { background: #f5d9d4; color: #9d3226; }
.myth .f .label { background: var(--sky-100); color: var(--sky-dark); }
.myth h3 { font-size: 1.3rem; margin-bottom: 10px; }
.myth p { color: var(--ink-2); margin: 0; }
.myth .m h3 { color: #7b2a20; text-decoration: line-through; text-decoration-color: rgba(157, 50, 38, .45); text-decoration-thickness: 2px; }
.myth .num { font-family: var(--font-serif); font-size: .9rem; color: var(--ink-3); letter-spacing: .1em; }
@media (max-width: 800px) { .myth { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; font-size: 1.08rem; color: var(--navy); display: flex; gap: 14px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; width: 32px; height: 32px; border-radius: 10px; background: var(--sky); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); flex: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font-size: 1.4rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 24px 24px 70px; color: var(--ink-2); }
.faq .answer p { margin-bottom: .6em; }
.faq-cat { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.faq-cat button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; color: var(--ink-2); }
.faq-cat button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Forms */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.field label small { color: var(--danger); margin-left: 4px; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(0, 149, 218, .12); outline: 0; }
.field textarea { min-height: 160px; resize: vertical; }
.field .hint { font-size: .88rem; color: var(--ink-3); margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: start; font-size: .95rem; color: var(--ink-2); }
.check input { margin-top: 5px; width: 18px; height: 18px; }
.alert { padding: 16px 20px; border-radius: 12px; font-weight: 600; }
.alert.ok { background: #e6f5ec; color: #1f7a42; border: 1px solid #c4e8d0; }
.alert.err { background: #fbe9e7; color: #b23b2f; border: 1px solid #f1cdc8; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info { display: grid; gap: 16px; }
.info-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px 26px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; box-shadow: var(--shadow-sm); }
.info-card .icon { width: 52px; height: 52px; border-radius: 14px; background: var(--sky-50); color: var(--sky); display: grid; place-items: center; font-size: 1.4rem; }
.info-card strong { display: block; color: var(--navy); margin-bottom: 4px; }
.info-card span, .info-card a { color: var(--ink-2); }
.info-card .big { font-size: 1.6rem; font-weight: 800; color: var(--sky-deep); letter-spacing: .02em; }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); aspect-ratio: 16 / 10; background: var(--paper-2); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Post (case/column) */
.post-head { padding: 56px 0 36px; border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg, var(--sky-50), #fff); }
.post-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 12px 0 14px; max-width: 24em; }
.post-meta { display: flex; gap: 16px; align-items: center; color: var(--ink-3); font-size: .95rem; flex-wrap: wrap; }
.post-meta .author { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); font-weight: 600; }
.post-meta .author::before { content: ""; width: 28px; height: 28px; border-radius: 8px; background: url("../img/logo-mark.png") center/cover; }
.post-cover { margin: 36px 0 0; }
.post-cover img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-height: 560px; object-fit: cover; }
.post-body { padding: 48px 0 72px; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid var(--line); margin-top: 48px; flex-wrap: wrap; }
.post-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.post-gallery a img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
@media (max-width: 700px) { .post-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Footer */
.site-footer { background: var(--navy); color: #b9cfde; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 320px 1fr; gap: 56px; padding: 72px 0 48px; }
.footer-brand-wrap { display: grid; gap: 18px; align-content: start; justify-items: start; }
.footer-logo { background: #fff; border-radius: 16px; padding: 14px 18px; display: inline-block; }
.footer-slogan { font-family: var(--font-serif); color: #cfe0ec; font-size: 1.05rem; margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
.footer-col h3 { font-size: .98rem; color: #fff; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 8px; }
.footer-col a { font-size: .9rem; color: #9fb8ca; }
.footer-col a:hover { color: #fff; }
.footer-contact { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); flex-wrap: wrap; }
.footer-tel { display: flex; gap: 16px; align-items: baseline; }
.footer-tel span { color: #8fb0c6; }
.footer-tel-num { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: .02em; }
.footer-sns { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-sns a { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: .92rem; white-space: nowrap; }
.footer-sns a:hover { background: rgba(255, 255, 255, .1); }
.footer-bottom { padding: 28px 0 40px; font-size: .88rem; color: #8fb0c6; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-bottom strong { color: #cfe0ec; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 600px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-tel-num { font-size: 1.6rem; }
  .footer-contact { display: grid; gap: 18px; }
  .footer-tel { justify-content: space-between; align-items: baseline; }
  /* 좁은 화면에서 알약 버튼이 두 줄로 접혀 달걀처럼 보이던 문제 — 3등분 그리드로 한 줄 유지 */
  .footer-sns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .footer-sns a { padding: 13px 4px; border-radius: 14px; font-size: .88rem; text-align: center; }
}
@media (max-width: 360px) { .footer-sns a { font-size: .8rem; padding: 12px 2px; } }

/* Floating call */
.float-call { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; background: var(--sky); color: #fff; padding: 10px 18px 10px 12px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 149, 218, .4); font-weight: 800; transition: transform .2s, box-shadow .2s; }
.float-call:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 16px 36px rgba(0, 149, 218, .5); }
.float-call-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: 1.1rem; }
.float-call-text { display: flex; flex-direction: column; line-height: 1.1; font-size: 1.1rem; letter-spacing: .02em; }
.float-call-text small { font-size: .7rem; font-weight: 600; opacity: .9; }
@media (max-width: 600px) { .float-call { right: 14px; bottom: 14px; } .float-call-text { font-size: 1rem; } }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > :nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > :nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > :nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in > :nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in > :nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .hero-bg img { animation: none; }
  html { scroll-behavior: auto; }
}

/* 404 */
.notfound { text-align: center; padding: 120px 0; }
.notfound h1 { font-size: 5rem; color: var(--sky-200); font-family: var(--font-serif); }

/* Print */
.cal-tel { margin-top: 1.4em; font-weight: 700; color: var(--navy); }
.cal-tel a { color: var(--sky-deep); }

.page-hero h1 .hero-pre { display: block; font-size: .5em; line-height: 1.45; font-weight: 600; color: var(--ink-3); margin-bottom: .55em; letter-spacing: 0; }
@media (max-width: 720px) { .page-hero h1 .hero-pre { font-size: .56em; } }

/* ---------- 공동대표 ---------- */
.ceo-photo { margin: 0 0 40px; }
.ceo-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ceo-photo figcaption { margin-top: 14px; font-size: .95rem; color: var(--ink-3); text-align: center; }
.ceo-photo figcaption strong { color: var(--ink-2); font-weight: 700; }
.ceo-tag { font-size: .8rem; font-weight: 700; color: var(--sky-deep); background: var(--sky-50); border-radius: 999px; padding: 3px 10px; vertical-align: 3px; margin-left: 6px; }
.ceo-role { font-size: .92rem; font-weight: 700; letter-spacing: .02em; color: var(--sky-deep); margin: 0 0 12px; }
.ceo-link { margin: 14px 0 0; font-size: .95rem; }
.ceo-link a { color: var(--sky-deep); font-weight: 600; border-bottom: 1px solid var(--sky-200); }
.ceo-link a:hover { border-bottom-color: var(--sky-deep); }

/* ---------- 맨 위로 (TOP) ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 92px; z-index: 89;
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: #fff; color: var(--navy); border: 1px solid var(--line);
  box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, box-shadow .2s, color .2s, border-color .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--sky-deep); border-color: var(--sky-200); box-shadow: var(--shadow-lg); }
.to-top:focus-visible { outline: 3px solid var(--sky-200); outline-offset: 3px; }
.to-top-arrow { width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, 1px); }
.to-top-text { font-size: .62rem; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.in-app .to-top { bottom: 96px; }
@media (max-width: 600px) {
  .to-top { right: 14px; bottom: 88px; width: 46px; height: 46px; }
  .to-top-text { font-size: .56rem; }
  .in-app .to-top { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .01s, visibility .01s; transform: none; } }

@media print { .site-header, .float-call, .to-top, .site-footer, .cta-band, .subnav-bar { display: none !important; } }

/* ---------- 안드로이드 앱(WebView) 모드: 하단 탭이 네이티브로 있으므로 중복 요소 숨김 ---------- */
.in-app .topbar, .in-app .float-call, .in-app .footer-cols, .in-app .hero-scroll { display: none !important; }
/* 앱에서는 대표님이 관리자 화면으로 들어갈 통로가 여기뿐이므로 눈에 띄게 */
.in-app .footer-legal a[href*="admin"] { border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 16px; color: #dbe9f3; font-weight: 700; }
.in-app .site-header { position: sticky; }
.in-app, .in-app * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.in-app input, .in-app textarea, .in-app select, .in-app [contenteditable] { -webkit-user-select: text; user-select: text; }
.in-app img, .in-app a { -webkit-user-drag: none; }
.in-app .footer-top { grid-template-columns: 1fr; padding: 40px 0 24px; }
.in-app .hero { min-height: auto; }
.in-app .subnav-bar { top: var(--header-h); }

/* ---------- 페이지별 그리드 변형 (반응형) ---------- */
.services.three { grid-template-columns: repeat(3, 1fr); }
.services.three .service, .services.two .service { grid-column: auto; }
.services.two { grid-template-columns: repeat(2, 1fr); }
.services.two .service.wide { grid-column: span 2; }
@media (max-width: 900px) { .services.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services.three, .services.two { grid-template-columns: 1fr; } .services.two .service.wide { grid-column: auto; } }
.compare.three { grid-template-columns: 1fr auto 1fr auto 1fr; }
@media (max-width: 700px) { .compare.three { grid-template-columns: 1fr; } }
.cards.list { grid-template-columns: 1fr; gap: 18px; }
.card.row { flex-direction: row; }
.card.row .card-media { flex: 0 0 280px; aspect-ratio: auto; }
@media (max-width: 700px) { .card.row { flex-direction: column; } .card.row .card-media { flex: none; aspect-ratio: 16 / 10; } }

/* =====================================================================
   관리자 메뉴(하위 탭) 페이지 — 게시판 · 사진 앨범 · 페이지 이동
   ===================================================================== */
.board-list { border-top: 2px solid var(--navy); }
.board-list ul { list-style: none; margin: 0; padding: 0; }
.board-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px; align-items: center; gap: 12px; padding: 18px 8px; border-bottom: 1px solid var(--line); }
.board-list li:hover { background: var(--sky-50); }
.board-list .no { color: var(--ink-3); font-size: .95rem; text-align: center; }
.board-list .tit { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; min-width: 0; }
.board-list .tit:hover { color: var(--sky-deep); }
.board-list .ico { font-size: .82rem; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.board-list .date { color: var(--ink-3); font-size: .92rem; text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .board-list li { grid-template-columns: minmax(0, 1fr) auto; padding: 15px 4px; }
  .board-list .no { display: none; }
  .board-list .date { font-size: .85rem; }
}

.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.album { display: block; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.album:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.album-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper-2); }
.album-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-media .no-img { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: .9rem; }
.album-media .count { position: absolute; right: 10px; bottom: 10px; background: rgba(14, 34, 51, .72); color: #fff; font-size: .8rem; padding: 4px 10px; border-radius: 999px; }
.album-body { display: block; padding: 16px 18px 20px; }
.album-body strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.album-body .date { color: var(--ink-3); font-size: .88rem; }
@media (max-width: 900px) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) { .album-grid { grid-template-columns: minmax(0, 1fr); } }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager a { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-weight: 600; }
.pager a:hover { border-color: var(--sky); color: var(--sky-deep); }
.pager a.on { background: var(--sky); border-color: var(--sky); color: #fff; }

/* 바른 장례문화 — 하늘자리가 집전하는 장례절차 카드 (.myth 확장) */
.myth.rite .head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; padding: 26px 32px 18px; border-bottom: 1px solid var(--line-2); background: #fff; }
.myth.rite .head .num { font-size: 1.05rem; color: var(--sky); font-weight: 700; }
.myth.rite .head h3 { margin: 0; font-size: 1.4rem; color: var(--navy); }
.myth.rite .m p, .myth.rite .f p { margin: 0; }
.myth.rite .m p + p, .myth.rite .f p + p { margin-top: 10px; }
.myth.rite .note { margin-top: 14px; padding: 12px 14px; background: var(--paper-2); border-left: 3px solid var(--gold-2); border-radius: 0 8px 8px 0; font-size: .93rem; color: var(--ink-2); line-height: 1.65; }
.myth.rite .note + .note { margin-top: 8px; }
.rite-pledge { margin: 8px 0 0; padding: 28px 32px; background: var(--navy); color: #fff; border-radius: var(--radius-lg); font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.8; }
.rite-pledge p { margin: 0; }
@media (max-width: 800px) { .myth.rite .head { padding: 22px 22px 14px; } .myth.rite .head h3 { font-size: 1.2rem; } .rite-pledge { padding: 22px; font-size: 1.02rem; } }

/* =====================================================================
   꽃관 [花棺] — 마지막 배웅
   ===================================================================== */
.kkot-hero { padding: 0 0 clamp(24px, 4vw, 48px); }
.kkot-hero figure { margin: 0; }
.kkot-hero img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.kkot-hero figcaption {
  margin-top: 16px; text-align: center; color: var(--ink-2);
  font-family: var(--font-serif); font-size: 1.05rem;
}

.kkot-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.kkot-item { margin: 0; }
.kkot-item.wide { grid-column: span 2; }
.kkot-item.wide img { aspect-ratio: 33 / 10; }
.kkot-item a {
  display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); background: #fff;
}
.kkot-item img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .5s var(--ease);
}
.kkot-item a:hover img { transform: scale(1.045); }
.kkot-item figcaption {
  margin-top: 10px; font-size: .95rem; color: var(--ink-3); line-height: 1.6;
}
.kkot-consent {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
  text-align: center;
}

.kkot-steps { list-style: none; counter-reset: kkot; margin: 24px 0 0; padding: 0; }
.kkot-steps li {
  counter-increment: kkot; position: relative;
  /* --badge: 번호 원 지름, --line1: 본문 첫 줄 높이(.prose 1.08rem × --lh) */
  --badge: 42px; --line1: calc(1.08rem * var(--lh));
  padding: 0 0 22px calc(var(--badge) + 20px); margin: 0; color: var(--ink-2);
}
.kkot-steps li::before {
  content: counter(kkot, decimal-leading-zero);
  /* 첫 줄 텍스트의 세로 중앙에 번호 원을 맞춤 */
  position: absolute; left: 0; top: calc((var(--line1) - var(--badge)) / 2);
  width: var(--badge); height: var(--badge); border-radius: 50%;
  background: var(--sky-50); color: var(--sky-deep);
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; font-family: var(--font-serif);
}
.kkot-steps li strong { color: var(--navy); }

/* 홈 — 꽃관 섹션 */
.kkot-strip { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.kkot-strip-media { position: relative; }
.kkot-strip-media > a {
  display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.kkot-strip-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.kkot-strip-media > a:hover img { transform: scale(1.04); }
.kkot-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.kkot-thumbs a { display: block; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.kkot-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.kkot-thumbs a:hover img { transform: scale(1.06); }

@media (max-width: 980px) {
  .kkot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kkot-item.wide img { aspect-ratio: 21 / 10; }
  .kkot-strip { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .kkot-gallery { grid-template-columns: minmax(0, 1fr); }
  .kkot-item.wide { grid-column: span 1; }
  .kkot-item.wide img { aspect-ratio: 16 / 10; }
  .kkot-hero img { aspect-ratio: 3 / 2; border-radius: var(--radius); }
  .kkot-steps li { --badge: 36px; padding-left: calc(var(--badge) + 16px); }
}
.cal-note { margin: 12px 0 0; font-size: .9rem; color: var(--ink-3); }

/* =====================================================================
   가독성 보정 (2026-09-11) — 줄바꿈·표시 방식 점검 결과 반영
   ===================================================================== */
/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한두 글자만 남는 것 방지 */
h1, h2, h3, h4, .section-title, .card h3 { text-wrap: balance; }
p, li, dd, dt, figcaption, blockquote, .lead, .hero-lead, .card p, .feature p, .value p, .step p { text-wrap: pretty; }
.nowrap, a[href^="tel:"], .card-meta > span, .column-lead .author span, .post-meta span, .footer-tel-num { white-space: nowrap; }
.card-meta { flex-wrap: wrap; row-gap: 4px; }

/* 모바일: 히어로 제목의 PC용 강제 줄바꿈은 무시하고 자연스럽게 줄 정리 */
@media (max-width: 720px) {
  .page-hero h1 > br, .hero h1 > br { display: none; }
}

/* 모바일: 절차(steps) — 번호를 위로 올려 본문 폭 확보 */
@media (max-width: 720px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
  .step::before { font-size: 1.5rem; }
  .step h3 { font-size: 1.22rem; }
}

/* 표: 모바일에서 첫 열 고정 + 좌우 스크롤 안내 */
.table thead th:first-child, .table tbody th { position: sticky; left: 0; z-index: 2; }
.table thead th:first-child { z-index: 3; }
.table tbody th { box-shadow: 1px 0 0 var(--line); }
.table-hint { display: none; margin: 8px 2px 0; font-size: .88rem; color: var(--ink-3); }
@media (max-width: 720px) {
  .table { font-size: .95rem; }
  .table th, .table td { padding: 12px 12px; }
  .table tbody th { width: auto; min-width: 0; }
  .table.wide td, .table.wide thead th { white-space: nowrap; }
  .table.wide { min-width: 0; width: max-content; }
  .table-hint { display: block; }
  /* 항목/설명 2열 표는 위·아래로 쌓아 가로 스크롤 없이 읽기 */
  .table.stack { min-width: 0; width: 100%; }
  .table.stack thead { display: none; }
  .table.stack tbody th, .table.stack tbody td { display: block; width: 100%; position: static; box-shadow: none; }
  .table.stack tbody th { border-bottom: 0; padding-bottom: 6px; }
  .table.stack tbody td { padding-top: 6px; }
  .table.stack + .table-hint { display: none; }
}

/* 서브탭: 모바일에서 오른쪽에 더 있음을 알리는 페이드 */
.subnav-bar .wrap { position: relative; }
.subnav-bar .wrap::before, .subnav-bar .wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.subnav-bar .wrap::after { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 70%); }
.subnav-bar .wrap::before { left: 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 70%); }
.subnav-bar.has-more .wrap::after, .subnav-bar.has-less .wrap::before { opacity: 1; }

/* 꽃관 히어로 이미지 — 서브탭과 붙지 않게 */
.kkot-hero { padding-top: clamp(20px, 3vw, 36px); }

/* 회사개요 배지: 연도와 날짜가 어색하게 나뉘지 않게 */
.split-media .badge-float span { display: block; }

/* 푸터 사업자 정보: 모바일에서는 항목별로 한 줄씩 */
.footer-bottom .fi { white-space: nowrap; }
@media (max-width: 720px) {
  .footer-bottom .fi { display: block; white-space: normal; }
  .footer-bottom .sep, .footer-bottom p > br { display: none; }
}

/* 본문(prose) 안에서 eyebrow 바로 다음의 제목은 위 여백·구분선 없이 붙여 표시 */
.prose .eyebrow + h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* PC 헤더 1080~1240px 구간: 로고·메뉴·전화 버튼이 서로 닿지 않게 */
@media (min-width: 1081px) and (max-width: 1240px) {
  .brand-logo { width: 160px; height: 61px; }
  .header-inner { gap: 12px; }
  .nav-link { padding: 10px 6px; font-size: .9rem; }
  .header-tel { padding: 10px 14px; font-size: .95rem; }
}

/* 캘린더 보조 글자(음력·일진·표시)를 조금 키움 — 어르신 가독성 */
@media (min-width: 721px) {
  .cal-day .lunar { font-size: .8rem; }
  .cal-ganzhi { font-size: .82rem; }
  .mark { font-size: .8rem; }
}

/* =====================================================================
   앱 설정 (/app/settings — 하늘자리 앱 안에서만 사용, 2026-09-14)
   ===================================================================== */
.app-settings { padding-top: clamp(32px, 5vw, 56px); }
.app-settings-wrap { max-width: 640px; display: grid; gap: 20px; }
.app-set-card { padding: 26px 24px; }
.app-set-card h4 { margin-bottom: 6px; }
.app-set-card.call h4 { margin-bottom: 12px; }
.app-set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.app-set-text { min-width: 0; flex: 1 1 auto; }
.app-set-text p { margin: 0; font-size: .95rem; }
.app-set-status { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.app-set-status.is-on { background: #eaf7ef; color: #1f6b41; }
.app-set-status.is-off { background: var(--paper-2); color: var(--ink-3); }
.app-set-status.is-warn { background: #fff8e8; color: #7a5a12; }
.app-set-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.app-set-hint { margin: 12px 0 0; line-height: 1.55; }
.app-set-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.app-set-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.app-set-list li:first-child { border-top: 0; }
.app-set-list li span { color: var(--ink-3); }
.app-set-list li strong { color: var(--ink); font-weight: 600; }
.app-set-list li a { color: var(--sky-deep); font-weight: 600; white-space: nowrap; }

/* 스위치 */
.switch { position: relative; display: inline-block; flex: 0 0 auto; width: 56px; height: 32px; margin-top: 2px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: #cfd8e0; transition: background .2s var(--ease); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(14, 34, 51, .25); transition: transform .2s var(--ease); }
.switch input:checked + .switch-track { background: var(--sky); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(24px); }
.switch input:disabled + .switch-track { opacity: .55; cursor: not-allowed; }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--sky-300); outline-offset: 2px; }

/* 모바일 메뉴 하단 「앱 설정」 버튼 */
.mobile-app-settings { margin-top: 12px; }

/* 인사말 > 공동대표 소개 — 두 사람의 발자취 목록 (2026-09-15) */
.partner-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46em; }
.partner-steps li { position: relative; padding-left: 1.2em; }
.partner-steps li::before { content: "▪"; position: absolute; left: 0; top: 0; color: var(--sky); }
.partner-steps li strong { color: var(--sky-dark); font-weight: 700; }

/* 홈·인사말 페이지 본문(main) 및 .wordmark 를 붙인 요소 안의 "하늘자리" 를 로고 워드마크(assets/img/wordmark.png, 로고에서 추출)로 표시 (2026-09-15)
   글자는 투명하게 남겨 두어 복사·검색·스크린리더는 그대로 동작. 헤더·푸터는 제외.
   PNG 를 마스크로 쓰고 --wm-color 로 색을 칠하므로 강조색을 문맥별로 바꿀 수 있음 (기본: 브랜드 강조색 --sky-deep) */
.home main .brand-name, .greeting main .brand-name, .wordmark .brand-name {
  --wm-color: var(--sky-deep);
  display: inline-block; width: 3.2em; height: 1.05em; vertical-align: -.17em; margin: 0 .12em 0 .03em; /* 오른쪽은 뒤따르는 조사("하늘자리가")와 붙지 않게 여백 추가 */
  background-color: var(--wm-color);
  -webkit-mask: url("../img/wordmark.png") no-repeat center / contain;
  mask: url("../img/wordmark.png") no-repeat center / contain;
  color: transparent !important; /* .section.navy .brand-name 등 배경별 색상 규칙(83행)보다 우선해야 글자가 로고 위에 겹쳐 보이지 않음 */
  overflow: hidden; white-space: nowrap; letter-spacing: 0;
}
.home main .brand-name::selection, .greeting main .brand-name::selection, .wordmark .brand-name::selection { color: transparent; }
/* 어두운 배경(히어로, navy 섹션 등)에서는 밝은 하늘색, 파란 CTA 띠·버튼 위에서는 흰색 */
:is(.home main, .greeting main) :is(.hero, .section.navy, .side-card.call, .feature.dark) .brand-name { --wm-color: #9ad8f7; }
:is(.home main, .greeting main) :is(.cta-band, .btn-primary) .brand-name { --wm-color: #fff; }