/* E·E 업그레이드센터 — 사이트 전체 규칙. 화면마다 style 블록에 사본을 두지 않는다
   (캠카에서 서브 배너 규칙이 26개 화면에 흩어져 한 번에 고칠 수 없던 자리). */
:root {
  --navy-900: #14202c;
  --navy-800: #1a2a3a;
  --navy-700: #26394d;
  /* 포인트 컬러 — 진한 노랑. 노랑은 흰 글자를 받지 못해(1.8:1) 칠한 자리의 글자는 늘 navy-900 이고,
     흰 바탕 위에서는 같은 노랑을 그대로 쓰지 않고 쓰임마다 짙은 값을 따로 둔다(2026-10-24). */
  --point-500: #f2b705;   /* 칠하는 노랑 — 단추 · 칩 · 번호. 위 글자 navy-900 9.1:1 */
  --point-600: #e0a800;   /* 칠한 단추에 마우스 — navy-900 7.7:1 */
  --point-300: #ffc93c;   /* 어두운 바탕(머리말 · 바닥글 · 배너) 위 글자 · 아이콘 — navy 9.5:1 */
  --point-icon: #b88200;  /* 흰 바탕 위 아이콘 · 큰 글자 — 3.4:1 (그림 · 큰 글자 기준 3) */
  --point-700: #8a5d00;   /* 흰 바탕 위 글자 · 링크 — 5.8:1 */
  --point-50: #fff6d6;    /* 옅은 판 */
  --point-line: #f5dfa0;  /* 옅은 판 테두리 */
  --ink: #1f2933;
  --muted: #5b6774;    /* 흰 바탕 5.9:1 */
  --line: #e2e8f0;
  --soft: #f6f8fa;
  --white: #ffffff;
  --header-h: 74px;
}

/* 글자 크기 — 기본 16px 의 1.5배(2026-10-24 요청: "글씨가 전반적으로 작다"). 사이트의 글자 크기는 모두 rem 이라
   여기 한 줄이 전체 비율을 정한다. Bootstrap 의 칸 사이 여백(rem)도 함께 커져 글과 여백의 비율이 그대로 남는다.
   휴대폰 · 태블릿(991px 이하)은 1.25배다 — 1.5배면 375px 화면에서 메인 첫 화면이 제목과 단추로 꽉 차고
   단추 글자가 화면 끝에 닿는다(확인함). 머리말은 이 비율을 따르지 않는다(.site-header 참고). */
html { font-size: 150%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (max-width: 991.98px) { html { font-size: 125%; } }
body {
  font-family: 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  word-break: keep-all;          /* 한글이 낱말 가운데서 끊기지 않게 */
  overflow-wrap: anywhere;       /* 대신 칸보다 긴 낱말(주소 · 메일)은 끊는다 — 가로 스크롤 방지 */
}
a { color: var(--point-700); }
a:hover { color: var(--navy-800); }
.text-brand { color: var(--point-700); }

/* 키보드로 다니는 사람에게 지금 어디 있는지 보이게 */
:focus-visible { outline: 3px solid var(--point-icon); outline-offset: 2px; }   /* 밝은 노랑은 흰 바탕에서 1.5:1 이라 짙은 쪽 — 흰 바탕 3.4 · 남색 바탕 4.3 */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 2000;
  background: var(--white); color: var(--navy-800); padding: 8px 14px; border-radius: 6px; font-weight: 700;
}
.skip-link:focus { left: 8px; }
main:focus { outline: none; }
/* 본문 글자 크기(2026-10-25). 글자를 1.5배로 키운 뒤 "제목은 좋은데 본문 글이 너무 크다" 해서, 본문만 20px 로 맞춘다
   (넓은 화면 기준 글자 24px 의 .84 · 휴대폰 · 태블릿은 기준이 20px 이라 1). 제목 · 배너 · 머리말 · 바닥글은 rem 이라 그대로다.
   본문 안의 작은 글(설명 · 날짜 · 안내)은 rem 이 아니라 em 으로 적어 이 크기를 따라 함께 줄어든다 — rem 으로 두면 본문(20px)보다
   설명(21~22px)이 더 커지는 일이 생긴다(재서 확인함). 새 본문 글 규칙을 더할 때도 em 으로 적는다. */
main { font-size: .84rem; }
@media (max-width: 991.98px) { main { font-size: 1rem; } }
.sub-hero { font-size: 1rem; }   /* 서브 배너는 main 안에 있지만 본문이 아니다 — 배너 설명 글은 줄이지 않는다 */
/* 입력칸도 본문과 같은 크기로 — Bootstrap 은 1rem(24px)이라 그대로면 칸 이름(20px)보다 칸 안 글자가 더 크다 */
main .form-control, main .form-select { font-size: 1em; }

/* ---------- 버튼 ---------- */
.btn-brand { background: var(--point-500); border-color: var(--point-500); color: var(--navy-900); font-weight: 700; }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--point-600); border-color: var(--point-600); color: var(--navy-900); }
.btn-outline-brand { border: 2px solid var(--point-500); color: var(--point-700); font-weight: 700; background: transparent; }
.btn-outline-brand:hover { background: var(--point-500); color: var(--navy-900); }
.btn-ghost { border: 2px solid rgba(255,255,255,.85); color: #fff; font-weight: 700; }
.btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ---------- 머리말 ---------- */
/* 머리말은 글자 크기를 px 로 고정하고 안쪽은 em 으로 잰다. 본문처럼 1.5배로 키우면 메뉴 다섯 칸이 1440px 에서도
   한 줄에 들어가지 않아 글자가 세로로 꺾인다(확인함). 그래도 전보다 조금 키웠다(16 → 18px). */
.site-header { font-size: 18px; position: sticky; top: 0; z-index: 1000; background: var(--navy-800); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 28px; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 1.2em; font-weight: 800; text-decoration: none; white-space: nowrap; }
.site-logo:hover { color: #fff; }
.site-logo .bi { color: var(--point-300); }
.site-logo-brand { color: var(--point-300); }

.gnb { height: 100%; }
.gnb-list { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.gnb-item { position: relative; display: flex; align-items: center; }
.gnb-link { display: flex; align-items: center; height: 100%; padding: 0 18px; color: #e2e8f0; font-weight: 600; text-decoration: none; transition: background .2s; }
.gnb-item:hover > .gnb-link, .gnb-item:focus-within > .gnb-link, .gnb-item.is-active > .gnb-link { color: #fff; background: var(--navy-900); }
.gnb-item.is-active > .gnb-link { box-shadow: inset 0 -3px 0 var(--point-500); }
/* 마우스를 올리거나 키보드로 들어오면 펼친다(focus-within). 클릭으로 여닫는 스크립트를 두지 않아도 된다. */
.gnb-dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 210px; list-style: none; margin: 0; padding: 10px 0;
  background: #fff; border-top: 3px solid var(--point-500); border-radius: 0 0 6px 6px; box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
.gnb-item:hover .gnb-dropdown, .gnb-item:focus-within .gnb-dropdown { display: block; }
.gnb-dropdown a { display: block; padding: 9px 20px; color: #3f4954; font-size: .9em; text-decoration: none; }
.gnb-dropdown a:hover, .gnb-dropdown a:focus-visible { background: #f1f5f9; color: var(--point-700); font-weight: 700; }
.gnb-dropdown a[aria-current="page"] { color: var(--point-700); font-weight: 700; }

.site-header-actions { display: flex; align-items: center; gap: 12px; }
.header-tel { color: #e2e8f0; text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.header-tel:hover { color: #fff; }
.btn-all-menu { white-space: nowrap; flex-shrink: 0; background: var(--point-500); color: var(--navy-900); border: 0; border-radius: 4px; padding: 10px 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.btn-all-menu:hover { background: var(--point-600); }

.notice-bar { background: var(--point-50); border-bottom: 1px solid var(--point-line); padding: 12px 20px; text-align: center; font-size: .92rem; color: #5c4300; }
.notice-bar .bi { color: var(--point-icon); margin-right: 6px; }
.notice-bar strong { color: var(--point-700); }

/* 넓은 메뉴 다섯 칸이 들어가지 않는 폭에서는 '전체메뉴' 하나로 모은다.
   머리말 글자를 18px 로 키운 뒤(2026-10-24) 메뉴 · 로고 · 전화 · 단추를 합치면 1340px 가량이라 1400px 부터 펼친다.
   그보다 좁으면 '전체메뉴' 단추가 눌려 글자가 세로로 꺾였다(1200 · 1280px 에서 확인함). */
@media (max-width: 1399.98px) {
  .gnb { display: none; }
}
/* Bootstrap 의 가장 넓은 칸 사이(g-lg-5 · 3rem)는 글자를 1.5배로 키우면 72px 이 되어 992px 화면에서 컨테이너 여백보다
   넓어지고 가로 스크롤이 생긴다(확인함). 48px 로 묶는다. */
@media (min-width: 992px) { .g-lg-5 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; } }
/* 휴대폰 · 태블릿 폭에서는 '전체메뉴' 글자를 빼고 아이콘(≡)만 둔다(2026-10-24 요청). 글자는 화면에서만 감추고
   읽기 프로그램에는 남긴다 — display:none 으로 지우면 단추 이름이 없어져 "단추" 라고만 읽힌다. */
@media (max-width: 991.98px) {
  .btn-all-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  /* 손가락으로 누르기 좋은 44px 정사각형 — 글자가 빠진 만큼 아이콘을 키운다 */
  .btn-all-menu { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 1.5em; line-height: 1; }
}
@media (max-width: 575.98px) {
  .site-header-inner { padding: 0 14px; }
  .site-logo { font-size: 1em; }
  .site-logo-co { display: none; }
  .header-tel span { display: none; }
  .header-tel { font-size: 1.15em; padding: 6px; }
  .notice-bar { font-size: .82rem; text-align: left; }
}

/* ---------- 전체메뉴 ---------- */
.full-menu { position: fixed; inset: 0; z-index: 3000; background: rgba(15,23,42,.85); backdrop-filter: blur(4px); overflow-y: auto; padding: 40px 16px; }
.full-menu[hidden] { display: none; }
.full-menu-box { max-width: 1240px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 36px; box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.full-menu-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--navy-800); padding-bottom: 14px; margin-bottom: 24px; }
.full-menu-top h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--navy-800); }
.full-menu-top h2 .bi { color: var(--point-icon); }
.full-menu-close { background: none; border: 0; font-size: 1.5rem; color: var(--muted); padding: 4px 8px; }
.full-menu-close:hover { color: var(--ink); }
.sitemap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* 제목이 한 줄인 칸과 두 줄인 칸('2. 업그레이드 운영내용')이 섞이면 노란 밑줄과 그 아래 목록이 칸마다 다른 높이에 섰다(2026-10-25 요청).
   칸을 바깥 격자의 두 줄(제목 · 목록)에 걸쳐 앉혀(subgrid) 같은 줄의 제목 칸이 가장 긴 제목 높이로 함께 맞춰진다 —
   밑줄 · 목록 첫 줄이 한 줄로 선다. 칸 수가 바뀌어도(5 · 3 · 2 · 1칸) 같은 가로줄끼리만 맞추므로 숫자를 따로 적지 않는다.
   subgrid 를 모르는 오래된 브라우저에서는 지금처럼 칸마다 제 높이로 선다(깨지지는 않는다). */
.sitemap-col { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 18px 14px;
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
/* 두 줄로 꺾인 제목의 둘째 줄을 아이콘 · 번호 아래가 아니라 첫 줄 글자('업그레이드')와 같은 자리에서 시작하게 —
   아이콘 · 번호 · 이름을 따로 세우고 이름 칸 안에서만 줄을 바꾼다. */
.sitemap-title { font-size: 1rem; font-weight: 800; color: var(--navy-800); padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--point-500);
  display: flex; align-items: flex-start; gap: .3em; }
.sitemap-title .bi { color: var(--point-icon); flex-shrink: 0; }
.sitemap-no { flex-shrink: 0; }
.sitemap-name { min-width: 0; }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list a { display: block; padding: 6px 8px; border-radius: 4px; color: #475569; text-decoration: none; font-size: .92rem; }
.sitemap-list a:hover, .sitemap-list a:focus-visible { background: var(--line); color: var(--ink); font-weight: 700; }
body.menu-open { overflow: hidden; }
@media (max-width: 1099.98px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } .full-menu-box { padding: 24px 18px; } }
@media (max-width: 479.98px) { .sitemap-grid { grid-template-columns: 1fr; } .full-menu { padding: 0; } .full-menu-box { border-radius: 0; min-height: 100%; } }

/* ---------- 메인 히어로 ---------- */
.main-hero {
  color: #fff; text-align: center; padding: 110px 0;
  /* 사진 위 흰 글자가 읽히게 짙은 남색을 덮는다(제목 · 설명 모두 7:1 이상) */
  background: linear-gradient(rgba(10,25,45,.80), rgba(10,25,45,.86)), url('/assets/images/hero-workshop.jpg') center/cover no-repeat, var(--navy-800);
}
.hero-tag { display: inline-block; background: rgba(242,183,5,.18); border: 1px solid var(--point-500); color: var(--point-300); padding: 6px 16px; border-radius: 30px; font-size: .9rem; font-weight: 700; margin-bottom: 20px; }
.main-hero h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.3; margin-bottom: 18px; }
.main-hero p { font-size: 1.08rem; color: #d5dde6; max-width: 680px; margin: 0 auto 34px; line-height: 1.7; }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
@media (max-width: 767.98px) { .main-hero { padding: 72px 0; } .main-hero h1 { font-size: 1.75rem; } }

/* ---------- 서브 배너 (모든 서브 화면이 같은 높이) ---------- */
.sub-hero { background: var(--navy-800); color: #fff; padding: 46px 0 52px; min-height: 200px; display: flex; align-items: center; }
.sub-hero .container { text-align: center; }
.sub-crumb { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0 0 14px; font-size: .85rem; color: #b9c4d0; }
.sub-crumb li + li::before { content: '›'; margin-right: 6px; color: #8796a6; }
.sub-crumb a { color: #d5dde6; text-decoration: none; }
.sub-crumb a:hover { color: #fff; text-decoration: underline; }
.sub-crumb [aria-current] { color: var(--point-300); font-weight: 700; }
.sub-hero-title { font-size: 2.1rem; font-weight: 800; margin: 0 0 10px; }
.sub-hero-desc { margin: 0 auto; max-width: 720px; color: #d5dde6; }
@media (max-width: 575.98px) { .sub-hero { min-height: 170px; padding: 34px 0 40px; } .sub-hero-title { font-size: 1.6rem; } }

/* ---------- 구역 ---------- */
.section { padding: 70px 0; }
.section-soft { background: var(--soft); }
.section + .section { border-top: 1px solid var(--line); }
.section-soft + .section, .section + .section-soft { border-top: 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: 1.8rem; font-weight: 800; color: var(--navy-800); margin-bottom: 10px; }
.section-head p { color: var(--muted); margin: 0; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; color: var(--point-700); margin-bottom: 8px; }
.h-section { font-size: 1.75rem; font-weight: 800; color: var(--navy-800); margin-bottom: 14px; }
.h-block { font-size: 1.35rem; font-weight: 800; color: var(--navy-800); padding-bottom: 10px; border-bottom: 2px solid var(--navy-800); margin-bottom: 18px; }
.narrow { max-width: 880px; }
.note-text { color: var(--muted); font-size: .92em; margin-top: 20px; text-align: center; }
.empty-note { background: var(--soft); border: 1px dashed #c8d1db; border-radius: 10px; padding: 34px 20px; text-align: center; color: var(--muted); margin: 0; grid-column: 1 / -1; }
.section-soft .empty-note { background: #fff; }
@media (max-width: 767.98px) { .section { padding: 48px 0; } .section-head h2 { font-size: 1.45rem; } }

/* ---------- 서비스 카드 ---------- */
.service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.service-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none;
  box-shadow: 0 3px 6px rgba(0,0,0,.03); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.service-card:hover, .service-card:focus-visible { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.08); border-color: var(--point-500); color: inherit; }
.service-card-icon { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; background: var(--point-50); color: var(--point-icon); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.service-card .service-card-icon { margin-bottom: 16px; }
.service-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--navy-800); margin-bottom: 8px; }
.service-card p { font-size: .87em; color: var(--muted); line-height: 1.55; margin-bottom: 14px; flex: 1; }
.service-card-more { font-size: .85em; font-weight: 700; color: var(--point-700); }
@media (max-width: 1199.98px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .service-grid { grid-template-columns: 1fr; } }

.service-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-row { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.service-row-head { display: flex; gap: 16px; align-items: center; }
.service-row-head h3 { font-size: 1.15rem; font-weight: 800; color: var(--navy-800); margin: 0 0 4px; }
.service-row-head p { margin: 0; color: var(--muted); font-size: .9em; }
.service-row-items { margin: 0; padding-left: 1.2rem; color: #3f4954; flex: 1; }
.service-row-items li { margin: 4px 0; }
.service-row .btn { align-self: flex-start; }
@media (max-width: 767.98px) { .service-rows { grid-template-columns: 1fr; } }

/* ---------- 단계 ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps-row { grid-template-columns: repeat(5, 1fr); }
.step { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 18px 64px; position: relative; display: flex; flex-direction: column; gap: 4px; }
.step-no { position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--point-500); color: var(--navy-900); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.step strong { color: var(--navy-800); }
.step span:last-child { color: var(--muted); font-size: .88em; }
.steps-row .step { padding: 60px 16px 18px; text-align: center; }
.steps-row .step-no { left: 50%; transform: translateX(-50%); }
@media (max-width: 991.98px) { .steps-row { grid-template-columns: 1fr; } .steps-row .step { padding: 18px 18px 18px 64px; text-align: left; } .steps-row .step-no { left: 18px; transform: none; } }

/* ---------- 마지막 안내 띠 ---------- */
.cta-band { background: var(--navy-800); color: #fff; border-radius: 14px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { font-size: 1.45rem; font-weight: 800; margin-bottom: 6px; }
.cta-band p { margin: 0; color: #d5dde6; }
.cta-band-btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 575.98px) { .cta-band { padding: 28px 22px; } }

/* ---------- 사진 자리 ---------- */
.photo-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #e9edf1; color: var(--muted); }
.photo-slot .bi { font-size: 2.2rem; }
.greeting-img { width: 100%; min-height: 400px; border-radius: 12px; object-fit: cover; }
.greeting-title { font-size: 1.65rem; font-weight: 800; color: var(--navy-800); line-height: 1.45; margin-bottom: 24px; }
.greeting-text { color: #4a5561; line-height: 1.9; margin-bottom: 20px; }   /* 본문 크기 그대로(main) — 30% 줄였더니 너무 작다고 해 본문과 같게 */
.greeting-sign { text-align: right; font-weight: 800; font-size: 1.1rem; color: var(--navy-800); margin-top: 32px; }
@media (max-width: 767.98px) { .greeting-img { min-height: 240px; } }

.facility-card { background: #fff; border-radius: 10px; overflow: hidden; height: 100%; box-shadow: 0 4px 14px rgba(0,0,0,.06); transition: transform .25s, box-shadow .25s; }
.facility-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.1); }
.facility-img { height: 240px; width: 100%; object-fit: cover; }
.facility-body { padding: 24px; text-align: center; }
.facility-body h3 { font-size: 1.08rem; font-weight: 800; color: var(--navy-800); margin-bottom: 12px; }
.facility-body p { color: var(--muted); font-size: .9em; line-height: 1.7; margin: 0; }

/* ---------- 오시는 길 ---------- */
.map-box { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 48px 20px; text-align: center; }
.map-box > .bi { font-size: 2.4rem; color: var(--point-icon); }
.map-address { font-size: 1.2rem; font-weight: 800; color: var(--navy-800); margin: 10px 0 4px; }
.map-address-en { color: var(--muted); font-size: .88em; margin-bottom: 20px; }
.map-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; height: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.info-row { display: flex; gap: 16px; align-items: flex-start; }
.info-row + .info-row { margin-top: 20px; }
.info-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: var(--point-500); color: var(--navy-900); display: inline-flex; align-items: center; justify-content: center; }
.info-row h3 { font-size: 1.05rem; font-weight: 800; color: var(--navy-800); margin: 0 0 4px; }
.info-row p { margin: 0; color: #4a5561; }
.hours-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: .92em; }
.hours-list li { display: flex; gap: 12px; color: #4a5561; }
.hours-list li span { min-width: 62px; color: var(--muted); }

/* ---------- 서비스 상세 ---------- */
.lead-text { font-size: 1.12em; line-height: 1.8; color: #3f4954; margin-bottom: 28px; }
.detail-items { display: grid; gap: 14px; }
.detail-item { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.detail-item h3 { font-size: 1.05rem; font-weight: 800; color: var(--navy-800); margin-bottom: 6px; }
.detail-item h3 .bi { color: var(--point-icon); }
.detail-item p { margin: 0; color: var(--muted); line-height: 1.7; }
.aside-card { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.aside-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--navy-800); margin-bottom: 10px; }
.aside-card p { color: var(--muted); font-size: .92em; }
.aside-tel { margin: 14px 0 0; text-align: center; font-weight: 700; }
.chip-links { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 30px; background: #fff; border: 1px solid var(--line); color: #3f4954; text-decoration: none; font-size: .88em; }
.chip-link:hover { border-color: var(--point-500); color: var(--point-700); }
@media (min-width: 992px) { .aside-card:first-child { position: sticky; top: calc(var(--header-h) + 20px); } }

/* ---------- 갤러리 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.filter-btn { border: 1px solid var(--line); background: #fff; color: #3f4954; border-radius: 30px; padding: 8px 16px; font-weight: 600; }
/* 고른 것을 색으로만 가르지 않는다 — 굵기와 테두리도 함께 바뀐다 */
.filter-btn.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 800; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-card { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery-card figcaption { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.gallery-card figcaption span { color: var(--muted); font-size: .88em; }
.ba-grid { display: grid; gap: 18px; }
.ba-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-card figure { margin: 0; position: relative; }
.ba-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.ba-card figcaption { position: absolute; left: 10px; top: 10px; background: rgba(20,32,44,.85); color: #fff; padding: 2px 10px; border-radius: 4px; font-size: .8em; font-weight: 700; }
.ba-card p { grid-column: 1 / -1; margin: 0; font-weight: 700; }
@media (max-width: 991.98px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- 쇼핑몰 ---------- */
.part-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.part-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-weight: 700; color: var(--navy-800); }
.part-card .bi { font-size: 1.8rem; color: var(--point-icon); }
@media (max-width: 767.98px) { .part-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 공지 · FAQ ---------- */
.faq-list, .notice-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.faq-item, .notice-list details { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.faq-item summary, .notice-list summary { padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq-item summary::-webkit-details-marker, .notice-list summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: 'Q'; color: var(--point-700); font-weight: 800; }
.faq-item summary::after, .notice-list summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 800; }
.faq-item[open] summary::after, .notice-list details[open] summary::after { content: '−'; }
.faq-item p, .notice-list p { margin: 0; padding: 0 20px 18px 44px; color: #4a5561; line-height: 1.8; white-space: pre-line; }
.notice-list time { color: var(--muted); font-weight: 500; font-size: .88em; }
.help-box { margin-top: 48px; background: var(--soft); border-radius: 12px; padding: 28px; text-align: center; }
.help-box p { font-weight: 700; margin-bottom: 14px; }

/* ---------- 문의 폼 ---------- */
.inquiry-form fieldset { margin-bottom: 30px; }
.inquiry-form legend { font-size: 1.1rem; font-weight: 800; color: var(--navy-800); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 2px solid var(--navy-800); }
.inquiry-form legend label { margin: 0; }
.req { color: #c52a42; font-size: .85em; font-weight: 700; }   /* 흰 바탕 5.4:1 */
.opt { color: var(--muted); font-size: .8em; font-weight: 500; }
.check-chips, .time-choice { display: flex; flex-wrap: wrap; gap: 10px; }
.check-chip { position: relative; cursor: pointer; }
/* 진짜 체크박스를 화면 밖이 아니라 칩 위에 투명하게 두어 키보드 · 낭독기가 그대로 쓴다 */
.check-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid #cbd5e1; border-radius: 30px; background: #fff; color: #3f4954; font-weight: 600; }
.check-chip input:checked + span { background: var(--point-500); border-color: var(--point-500); color: var(--navy-900); font-weight: 800; }
.check-chip input:focus-visible + span { outline: 3px solid var(--point-icon); outline-offset: 2px; }
.form-control[aria-invalid="true"], .check-chips[aria-invalid="true"] span { border-color: #c52a42; }
.form-errors { background: #fdecef; border: 1px solid #f3b6c0; color: #8a1c2e; border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; }
.form-errors ul { margin: 6px 0 0; padding-left: 1.2rem; }
.consent-box { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 28px; }
.consent-title { font-weight: 800; margin-bottom: 8px; }
.consent-box ul { color: var(--muted); font-size: .9em; padding-left: 1.2rem; margin-bottom: 12px; }
.consent-more { font-size: .85em; display: inline-block; margin-top: 6px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { text-align: center; }
.form-help { color: var(--muted); font-size: .9em; margin: 14px 0 0; }
.form-done { text-align: center; padding: 50px 20px; }
.form-done[hidden] { display: none; }
.form-done > .bi { font-size: 3rem; color: var(--point-icon); }
.form-done h2 { font-weight: 800; color: var(--navy-800); margin: 12px 0; }
.form-done p { color: var(--muted); margin-bottom: 24px; }
.note-box { display: flex; gap: 16px; background: var(--point-50); border: 1px solid var(--point-line); border-radius: 10px; padding: 20px; margin-bottom: 32px; }
.note-box > .bi { font-size: 1.6rem; color: var(--point-700); }
.note-box p { margin: 4px 0 0; color: #33503a; }
.note-box .hours-list li, .note-box .hours-list li span { color: #33503a; }

/* ---------- 약관 ---------- */
.legal h2 { font-size: 1.1rem; font-weight: 800; color: var(--navy-800); margin: 28px 0 10px; }
.legal p { color: #4a5561; line-height: 1.85; }
.legal-date { margin-top: 36px; color: var(--muted); font-size: .9em; }
.nf-code { font-size: 4rem; font-weight: 800; color: var(--point-icon); margin: 0; }

/* ---------- 떠 있는 단추 · 바닥글 ---------- */
.floating-contact { position: fixed; right: 22px; bottom: 84px; display: flex; flex-direction: column; gap: 10px; z-index: 900; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: transform .2s; text-decoration: none; }
.float-btn:hover { transform: scale(1.08); color: #fff; }
.float-tel, .float-tel:hover { background: var(--point-500); color: var(--navy-900); }   /* 노랑 위 흰 글자는 1.8:1 */
.float-inquiry { background: var(--navy-800); }
@media (max-width: 575.98px) { .floating-contact { right: 14px; bottom: 74px; } .float-btn { width: 46px; height: 46px; } }

.site-footer { background: #212529; color: #adb5bd; padding: 44px 0 22px; font-size: .88rem; position: relative; }
.footer-brand { color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 16px; }
.footer-brand .bi, .footer-brand span { color: var(--point-300); }
.footer-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin: 0; }
.footer-info div { display: flex; gap: 14px; }
.footer-info dt { min-width: 104px; color: #dee2e6; font-weight: 600; }
.footer-info dd { margin: 0; }
.site-footer a { color: #ced4da; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-links { margin: 22px 0 0; }
.footer-copy { text-align: center; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #343a40; font-size: .8rem; }
.top-btn { position: absolute; right: 22px; top: -20px; width: 40px; height: 40px; background: var(--point-500); color: var(--navy-900); border: 0; border-radius: 6px; }
.top-btn:hover { background: var(--point-600); }
@media (max-width: 767.98px) { .footer-info { grid-template-columns: 1fr; } .footer-info dt { min-width: 96px; } }

/* 예약 날짜 칸 아래 안내. 주말을 고르면 같은 자리에 빨간 글자로 바뀐다(#b42318 — 흰 바탕 6.6:1). */
.date-hint { margin: 6px 0 0; font-size: .85em; color: var(--muted); }
.date-hint.is-error { color: #b42318; font-weight: 600; }