/* 꽃숨 v3 — docs/DESIGN.md 의 결정을 그대로 옮긴 것.
   tokens.css(간격·크기·모션) → base.css(하한선) → 이 파일(색·서체·부품) 순서로 읽는다.
   색은 DESIGN.md 2장, 서체는 3장. 여기서 새 색을 만들지 않는다. */

@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920; font-display: swap;
}

:root {
  /* DESIGN.md §2 — 관찰해서 뽑은 팔레트 */
  --bg: #F7F4EE; --surface: #FFFFFF; --bg-subtle: #EFE9DE;
  --ink: #23271F; --text: var(--ink); --text-2: #5B6156; --text-3: #66705F;
  --brand: #41220F;
  --moss: #2F5A3A; --moss-deep: #254A2F; --moss-soft: #E4EDE2;
  --hydrangea: #5F5799; --hydrangea-soft: #E9E6F3;
  --border: #E3DDD1; --border-strong: #CFC7B8;
  --link: var(--moss);
  --accent: var(--moss);            /* base.css 포커스 링·선택 색이 이걸 본다 */
  --font-serif: "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
  --header-h: 68px;
  color-scheme: light;
}

body { font-size: 17px; line-height: 1.7; }
img { background: var(--bg-subtle); }
::selection { background: var(--moss-soft); color: var(--ink); }

/* ── 서체 위계 (DESIGN §3) ── */
h1, h2, .serif { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
h1 { font-size: clamp(30px, 18px + 2.9vw, 46px); color: var(--ink); }
h2 { font-size: clamp(26px, 19px + 1.7vw, 36px); }
h3 { font-size: 20px; line-height: 1.4; letter-spacing: -0.015em; }
h1 em, h2 em { font-style: normal; color: var(--brand); }
.lead { font-size: 18px; color: var(--text-2); line-height: 1.75; }
.q { font-size: 14px; font-weight: 600; color: var(--hydrangea); letter-spacing: 0; margin-bottom: var(--sp-3); }
.q::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--hydrangea); vertical-align: middle; margin-right: 8px; }
.meta { font-size: 14px; color: var(--text-3); }
p { max-width: 38rem; }

/* ── 버튼 (채운 것은 화면당 하나) ── */
.btn { min-height: 52px; padding: 0 26px; border-radius: var(--r-md); font-size: 16px; font-weight: 700; }
.btn-primary { background: var(--moss); color: #fff; }
.btn-primary:hover { background: var(--moss-deep); }
.btn-ghost { border: 1.5px solid var(--border-strong); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* 전화번호는 버튼이 아니라 글자 */
.tel { font-family: var(--font-serif); font-weight: 700; color: var(--brand); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tel:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ── 머리 ── */
.header { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header .container { display: flex; align-items: center; gap: var(--sp-6); height: 100%; }
.logo { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
.logo img { height: 40px; width: auto; background: none; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 10px 12px; border-radius: var(--r-sm); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--bg-subtle); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--bg-subtle); }
.header .tel { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; }
.header .tel svg { width: 18px; height: 18px; }
.header .tel span { display: inline; }

/* ── 히어로 (web-craft 실측 구조: 왼쪽 글 / 오른쪽 그래픽) ── */
.hero { padding: var(--sp-8) 0 var(--sp-8); }
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; }
.hero h1 { margin: var(--sp-3) 0 var(--sp-5); }
.hero .lead { margin-bottom: var(--sp-6); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .cta .note { font-size: 14px; color: var(--text-3); flex-basis: 100%; margin-top: 4px; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaic img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.mosaic img:nth-child(2) { margin-top: var(--sp-7); }
.mosaic img:nth-child(3) { margin-top: calc(var(--sp-7) * -1); }

/* 기관 이름 띠 */
.partners { padding: 0 0 var(--sp-6); }
.partners p { max-width: none; font-size: 16px; color: var(--text-2); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.partners .label { font-size: 13px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.partners ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; }
.partners li { font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap; }

/* ── 대상 타일 6개 (시그니처 1) ── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.tile { display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-4); align-items: start; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4);
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), transform var(--t-base) var(--e-out); }
.tile:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); transform: translateY(-2px); }
.tile img { width: 112px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); }
.tile h3 { font-size: 18px; margin-bottom: 4px; }
.tile .tag { font-size: 14px; color: var(--hydrangea); font-weight: 600; margin-bottom: 8px; display: block; }
.tile p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.tile .proof { font-size: 13px; color: var(--text-3); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ── 현장 기록 카드 (시그니처 2) ── */
.records { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.rec { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out); }
.rec:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.rec img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 사진 못 건진 후기(3건) 자리 — 빈 칸 대신 틴트 박스로 그리드 리듬 유지 */
.rec .body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.rec .top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.rec time { font-size: 13px; font-weight: 700; color: var(--hydrangea); }
.chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--bg-subtle); border-radius: var(--r-full); padding: 3px 10px; }
.chip.on { background: var(--moss-soft); color: var(--moss-deep); }
.rec h3 { font-size: 17px; line-height: 1.45; }
.rec p { font-size: 14px; color: var(--text-2); margin-top: 8px; line-height: 1.6; }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--moss); text-decoration: none; margin-top: var(--sp-4); }
.more::after { content: "→"; flex: 0 0 auto; }
.more:hover { text-decoration: underline; text-underline-offset: .2em; }

/* 기록 화면의 거르기 */
.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-5); }
.filter a { font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; border: 1px solid var(--border); border-radius: var(--r-full); padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; background: var(--surface); }
.filter a[aria-current="true"] { background: var(--moss); border-color: var(--moss); color: #fff; }
.filter a:hover:not([aria-current]) { border-color: var(--border-strong); }
/* 어떤 걸 만드나요 종류 거르기(단추형 — a와 같은 칩 생김새) */
.filter button { font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; background: var(--surface); cursor: pointer; }
.filter button[aria-current="true"] { background: var(--moss); border-color: var(--moss); color: #fff; }
.filter button:hover:not([aria-current]) { border-color: var(--border-strong); }
.pcard[hidden] { display: none; }
[data-about][hidden] { display: none; }
.rec[hidden] { display: none; }

/* ── 공간 (시그니처 3: 세로 모자이크) ── */
.spaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.spaces figure { margin: 0; }
.spaces img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.spaces figcaption { font-size: 14px; color: var(--text-2); margin-top: 10px; }

/* 두 단 글+사진 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.split .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split .pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.split .pics img:nth-child(2) { margin-top: var(--sp-6); }
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-5); }
.creds .chip { font-size: 14px; padding: 7px 13px; }

/* 대상 블록(프로그램 화면) */
.aud { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-7); align-items: start; padding: var(--sp-7) 0; border-top: 1px solid var(--border); }
.aud:first-of-type { border-top: 0; }
.aud .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aud .pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.aud .pics img:nth-child(2) { margin-top: var(--sp-6); }
.aud h2 { font-size: clamp(24px, 18px + 1.2vw, 30px); }
.aud .tag { font-size: 15px; color: var(--hydrangea); font-weight: 600; display: block; margin: 6px 0 var(--sp-4); }
.aud ul.ex { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 8px; }
.aud ul.ex li { padding-left: 18px; position: relative; font-size: 16px; }
.aud ul.ex li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }
.aud .proof { margin-top: var(--sp-5); padding: 12px 16px; background: var(--moss-soft); border-radius: var(--r-md); font-size: 14px; color: var(--moss-deep); font-weight: 600; display: inline-block; }
.aud .links { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
.aud .links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--moss); }

/* 개인 체험 목록 */
.plist { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.pcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pcard .body { padding: var(--sp-4); }
.pcard h3 { font-size: 17px; }
.pcard p { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.pcard .price { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--brand); }
.group-label { font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 4px; display: block; }

/* 안내 목록 */
.notes { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 10px; }
.notes li { padding-left: 18px; position: relative; font-size: 16px; color: var(--text-2); }
.notes li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.info .card { padding: var(--sp-5); }
.info dt { font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 6px; }
.info dd { margin: 0; font-size: 16px; }
.info dd + dt { margin-top: var(--sp-4); }

/* ── 전화 마무리 (시그니처 5) ── */
.call { background: var(--moss); color: #fff; padding: var(--sp-8) 0; }
.call .container { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; }
.call .q { color: #C9DCC4; }
.call .q::before { background: #C9DCC4; }
.call h2 { color: #fff; }
.call p { color: #DCE7D8; margin-top: var(--sp-3); font-size: 16px; }
.call .tel { color: #fff; font-size: clamp(30px, 20px + 2vw, 44px); display: block; text-align: right; }
.call .hours { color: #C9DCC4; font-size: 14px; text-align: right; margin-top: 6px; }

/* ── 꼬리 ── */
.footer { padding: var(--sp-7) 0 var(--sp-8); background: var(--surface); border-top: 1px solid var(--border); }
.footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); }
.footer img { height: 36px; width: auto; background: none; margin-bottom: var(--sp-3); }
.footer p, .footer li { font-size: 14px; color: var(--text-2); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer a { color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer a:hover { color: var(--brand); }
.footer .copy { grid-column: 1 / -1; padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }

/* 안쪽 화면 머리 */
.pagehead { padding: var(--sp-8) 0 var(--sp-6); }
.pagehead .lead { margin-top: var(--sp-4); }

/* ── 반응형 ── */
@media (max-width: 1080px) {
  .tiles, .records, .info { grid-template-columns: 1fr 1fr; }
  .plist, .spaces { grid-template-columns: repeat(2, 1fr); }
  .nav a { padding: 10px 9px; font-size: 14px; }
}
@media (max-width: 840px) {
  :root { --header-h: 60px; }
  .header .container { gap: var(--sp-3); }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; }
  .nav::-webkit-scrollbar { display: none; }
  .header { height: auto; }
  .header .container { flex-wrap: wrap; padding-top: 10px; }
  .header .tel { margin-left: auto; }
  .header .tel span { display: none; }
  .hero { padding: var(--sp-6) 0; }
  .hero .container, .split, .aud, .call .container { grid-template-columns: 1fr; gap: var(--sp-6); }
  .call .tel, .call .hours { text-align: left; }
  .tiles, .records { grid-template-columns: 1fr; }
  .tile { grid-template-columns: 96px 1fr; }
  .tile img { width: 96px; }
  .partners .container { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .partners ul { gap: 8px 18px; }
  .footer .container { grid-template-columns: 1fr; }
  .info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .plist, .spaces { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mosaic { gap: 8px; }
}


/* ═══ 휴대폰 최적화 (2026-09-05) ═══ */
.menu-btn { display: none; }
.callbar { display: none; }
figcaption, .spaces figcaption, .meta, .chip, .rec time, .tile .proof, .footer .copy { font-size: 14px; }
.filter a, .filter button { min-height: 44px; }
.info a, .notes a, .meta a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 840px) {
  :root { --header-h: 64px; }
  .header .container { gap: var(--sp-3); }
  .logo img { height: 34px; }
  .header .tel { order: 2; margin-left: auto; }
  /* 메뉴 버튼 */
  .menu-btn { order: 3; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 48px; height: 44px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
  .menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out); }
  .menu-btn b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header[data-open="true"] .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header[data-open="true"] .menu-btn span:nth-child(2) { opacity: 0; }
  .header[data-open="true"] .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* 메뉴 목록: 머리 아래로 펼침 */
  .nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-2) var(--gutter) var(--sp-4); margin: 0; overflow: visible; }
  .header[data-open="true"] .nav { display: flex; }
  .nav a { font-size: 17px; min-height: 52px; padding: 0 var(--sp-3); border-radius: var(--r-md); }
  .header { position: sticky; }
  /* 첫 화면: 사진 4장을 정사각 2×2로 압축, 글은 줄임 */
  .hero { padding: var(--sp-6) 0 var(--sp-6); }
  .hero .container { gap: var(--sp-6); }
  .hero .lead { font-size: 17px; }
  .mosaic { gap: 10px; }
  .mosaic img { aspect-ratio: 1 / 1; border-radius: var(--r-md); }
  .mosaic img:nth-child(2), .mosaic img:nth-child(3) { margin-top: 0; }
  .hero .cta .btn { flex: 1 1 auto; }
  /* 함께한 곳: 한 줄 가로 스크롤 */
  .partners p { font-size: 15px; }
  /* 공간·사진첩 2열 */
  .spaces { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* 후기 목록: 2열 압축 */
  #reclist { grid-template-columns: 1fr 1fr; gap: 10px; }
  #reclist .rec .body { padding: var(--sp-3); }
  #reclist .rec h3 { font-size: 15px; line-height: 1.4; }
  #reclist .rec p { display: none; }
  #reclist .rec .top { flex-wrap: wrap; gap: 6px; }
  /* 하단 전화 바 */
  .callbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 0 20px; border-radius: 999px; background: var(--moss); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
    box-shadow: 0 10px 28px rgba(35, 39, 31, .22); padding-bottom: env(safe-area-inset-bottom, 0); }
  .callbar[hidden] { display: none; }
  .callbar svg { width: 18px; height: 18px; }
  .callbar b { font-weight: 800; font-variant-numeric: tabular-nums; }
  /* 하단 전화 바가 실제로 보일 때만 여백 — 첫 화면 상단에서는 빈 공간이 생기지 않게 */
  body.has-callbar { padding-bottom: 84px; }
  .call .container { gap: var(--sp-5); }
  .call .tel { font-size: 32px; }
}
@media (max-width: 380px) {
  .hero .cta .btn { width: 100%; }
  .header .tel span { display: none; }
}


/* ═══ 공간: 사진 옆에 글이 붙는 2×2 (2026-09-05) ═══ */
.places { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); }
.place { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); }
.place img { width: 200px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); }
.place h3 { font-size: 20px; margin-bottom: 8px; }
.place p { font-size: 15px; color: var(--text-2); line-height: 1.7; }
.facts { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.facts li { font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; }
@media (max-width: 1080px) { .places { grid-template-columns: 1fr; } }
@media (max-width: 840px) {
  .place { grid-template-columns: 120px 1fr; gap: var(--sp-4); padding: var(--sp-3); align-items: start; }
  .place img { width: 120px; }
  .place h3 { font-size: 18px; margin-bottom: 4px; }
  .place p { font-size: 14px; }
}


/* ═══ 대표 피드백 (2026-09-09): 작은 글자 제거·간소화·전화 버튼 애니메이션 ═══ */
.header .tel { display: none !important; }
.hero .lead { font-size: 20px; color: var(--text); max-width: 26rem; }
.mosaic { grid-template-columns: 1fr 1fr; }
.mosaic img:nth-child(2) { margin-top: var(--sp-7); }
.tile { align-items: center; }
.tile .tag { margin-bottom: 0; font-size: 15px; }
.tile:first-child > div { justify-content: center; }
.tile:first-child h3 { font-size: 28px; }
.tile:first-child .tag { font-size: 17px; }
.rec .top { margin-bottom: 6px; }
.rec time { font-size: 14px; }
.rec h3 { font-size: 18px; }
.place p { font-size: 16px; color: var(--text); }
.call .container { align-items: center; }
/* 전화 버튼: 올리면 번호, 떼면 원래 문구 */
.btn-call { position: relative; display: inline-grid; grid-template-areas: "a"; overflow: hidden; min-width: 232px; }
.btn-call .lbl, .btn-call .num { grid-area: a; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .32s var(--e-out), opacity .32s var(--e-out); white-space: nowrap; font-variant-numeric: tabular-nums; }
.btn-call .num { opacity: 0; transform: translateY(115%); }
.btn-call:hover .lbl, .btn-call:focus-visible .lbl { opacity: 0; transform: translateY(-115%); }
.btn-call:hover .num, .btn-call:focus-visible .num { opacity: 1; transform: none; }
.btn-call:hover { background: var(--moss-deep); }
@media (hover: none) { .btn-call .lbl { opacity: 1 !important; transform: none !important; } .btn-call .num { opacity: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .btn-call .lbl, .btn-call .num { transition: opacity .15s; transform: none !important; } }
@media (max-width: 840px) { .mosaic img:nth-child(2) { margin-top: 0; } .hero .cta .btn { width: 100%; } .tile:first-child h3 { font-size: 20px; } }


/* ═══ 2026-09-09 2차: 명조·크림 제거, 사진으로 채우는 구조, 푸터 복구 ═══ */
:root { --bg: #FFFFFF; --bg-subtle: #F4F4F1; --border: #E4E4E0; --border-strong: #CFCFC9; --font-serif: var(--font-sans); }
h1, h2, .serif { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
h1 { font-size: clamp(36px, 20px + 3.2vw, 56px); }
h2 { font-size: clamp(26px, 18px + 1.4vw, 34px); margin-bottom: 0; }
h1 em, h2 em { color: var(--ink); }
.header { background: rgba(255,255,255,.92); }
.hero { padding: var(--sp-8) 0 var(--sp-8); background: var(--bg); }
.hero .lead { font-size: 19px; color: var(--text-2); max-width: 30rem; line-height: 1.7; }
.hero .container { grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); }
.mosaic { grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaic img { aspect-ratio: 3 / 4; border-radius: 10px; }
.mosaic img:nth-child(2) { margin-top: var(--sp-6); }
section.section { padding: var(--sp-8) 0; }
.section h2 + .tiles, .section h2 + .records, .section h2 + .places { margin-top: var(--sp-5); }
/* 대상 6칸: 사진 위, 이름 아래 */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.tile, .tile:first-child { display: block; grid-column: auto; grid-row: auto; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
.tile img, .tile:first-child img { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; }
.tile > div, .tile:first-child > div { display: block; padding: 12px 2px 0; }
.tile h3, .tile:first-child h3 { font-size: 20px; margin: 0 0 2px; }
.tile .tag, .tile:first-child .tag { font-size: 15px; color: var(--text-2); }
.tile:hover { transform: none; box-shadow: none; }
.tile:hover img { opacity: .92; }
/* 후기 카드: 선 없이 */
.records { gap: var(--sp-4); }
.rec { border: 0; background: none; border-radius: 0; }
.rec img { border-radius: 10px; }
.rec .body { padding: 12px 2px 0; }
.rec time { color: var(--text-3); }
.rec h3 { font-size: 18px; }
.rec:hover { box-shadow: none; }
.rec:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.more { color: var(--ink); }
/* 공간: 한 줄 4장, 이름만 */
/* 칸 수는 build.py 가 --places-n 으로 넘긴다 — 공간이 3개가 되어도 빈칸이 생기지 않게(2026-09-23) */
.places { grid-template-columns: repeat(var(--places-n, 4), 1fr); gap: var(--sp-4); }
.place { display: block; padding: 0; border: 0; background: none; border-radius: 0; }
.place img { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; }
.place > div { padding: 12px 2px 0; }
.place h3 { font-size: 18px; margin: 0; }
.place p { display: none; }
/* 대표 */
.split .pics img { border-radius: 10px; }
/* 푸터 */
.footer { border-top: 1px solid var(--border); padding: var(--sp-7) 0 var(--sp-7); background: var(--bg); }
.footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); }
.footer img { height: 40px; width: auto; background: none; margin-bottom: 12px; }
.footer p { font-size: 15px; color: var(--text-2); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--text-2); text-decoration: none; }
.footer li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer .copy { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
body { padding-bottom: 0; }
@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(3, 1fr); } .places { grid-template-columns: repeat(var(--places-n, 4), 1fr); } }
@media (max-width: 840px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; } .tile h3, .tile:first-child h3 { font-size: 17px; } .tile .tag, .tile:first-child .tag { font-size: 14px; }
  .places { grid-template-columns: 1fr 1fr; gap: 12px; } .place h3 { font-size: 16px; }
  .footer .container { grid-template-columns: 1fr; gap: var(--sp-4); }
  body.has-callbar { padding-bottom: 84px; }
  .mosaic img:nth-child(2) { margin-top: 0; }
}
@media (max-width: 840px) {
  .hero .container { grid-template-columns: 1fr; gap: var(--sp-5); }
  .mosaic { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mosaic img { aspect-ratio: 1 / 1; }
  .hero h1 { font-size: 36px; }
}
.btn-call .num { visibility: hidden; transition: transform .32s var(--e-out), opacity .32s var(--e-out), visibility 0s .32s; }
.btn-call:hover .num, .btn-call:focus-visible .num { visibility: visible; transition: transform .32s var(--e-out), opacity .32s var(--e-out), visibility 0s; }


/* ═══ 2026-09-09 3차: 휴대폰 머리 고침 (버튼 위치·비침·스크롤 잠금) ═══ */
@media (max-width: 840px) {
  :root { --header-h: 60px; }
  /* 머리: 불투명 배경. 스크롤할 때 뒤 글자가 비치지 않게 */
  .header { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--border); }
  .header .container { display: flex; align-items: center; gap: 0; height: var(--header-h); padding-inline: 16px; }
  .logo { flex: 0 0 auto; }
  .logo img { height: 34px; }
  /* 메뉴 버튼은 오른쪽 끝 */
  .menu-btn { order: 0; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; }
  /* 펼친 메뉴: 머리 아래 전체 폭, 본문 위에 덮는다 */
  .nav { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: auto; display: none; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(35,39,31,.10);
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
  .header[data-open="true"] .nav { display: flex; }
  .nav a { font-size: 17px; font-weight: 700; min-height: 56px; padding: 0 8px; border-radius: 0; border-bottom: 1px solid var(--border); color: var(--ink); }
  .nav a:last-of-type { border-bottom: 0; }
  .nav a[aria-current="page"] { background: none; color: var(--moss); }
  /* 메뉴가 열려 있는 동안 본문은 움직이지 않는다 */
  body.menu-open { overflow: hidden; }
  /* 작은 글자 하한 */
  .footer .copy, .meta, figcaption { font-size: 14px; }
  /* 아래 전화 바는 안전영역까지 */
  .callbar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 841px) { body.menu-open { overflow: auto; } }
/* 작은 글자 하한 (대표 지시) */
.chip, .group-label, .info dt, .rec time, .meta, figcaption, .footer .copy, .tile .proof { font-size: 14px; }




/* ═══ 첫 화면 사진 슬라이드 (2026-09-11) ═══ */
.hero-strip { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch; cursor: grab; touch-action: pan-x; border-radius: 10px; }
.hero-strip::-webkit-scrollbar { display: none; }
.hero-strip.dragging { cursor: grabbing; }
/* 사진을 끌면 브라우저가 "이미지 끌어놓기"로 보고 포인터를 취소해 버린다 — 그 길을 막는다(2026-09-11 확인) */
.hero-strip { user-select: none; -webkit-user-select: none; }
.hero-track img { -webkit-user-drag: none; user-drag: none; }
.hero-track { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; width: max-content;
  animation: hero-flow calc(var(--n) * 4.6s) linear infinite; }
.hero-track li { flex: 0 0 auto; }
.hero-track img { width: 268px; height: 340px; object-fit: cover; border-radius: 10px; background: var(--bg-subtle);
  transition: transform .4s var(--e-out); }
/* 마우스를 얹기만 해서는 서지 않는다 — 서 있으면 손을 떼도 멈춘 채로 남는다(2026-09-11).
   누르는 동안에만 data-paused 로 세운다. */
.hero-strip[data-paused="true"] .hero-track { animation-play-state: paused; }
.hero-strip[data-manual="true"] .hero-track { animation: none !important; transform: none !important; }
.hero-track img:hover { transform: scale(1.02); }
/* 끄는 동안에는 사진 확대 효과를 끈다 — 커서 밑으로 사진이 계속 바뀌며 커졌다 작아졌다 해 화면이 떨렸다(2026-09-14) */
.hero-strip.dragging .hero-track img, .hero-strip[data-manual="true"] .hero-track img { transition: none; transform: none; }
@keyframes hero-flow { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .hero-track { animation: none; } }
@media (max-width: 840px) {
  .hero-strip { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; }
  .hero-track { gap: 10px; }
  .hero-track img { width: 200px; height: 260px; }
}
/* 첫 화면 슬라이드: 오른쪽이 화면 끝까지 흐르게 */
@media (min-width: 841px) {
  .hero .container { grid-template-columns: 1fr 1.15fr; }
  .hero-strip { margin-right: calc((100vw - min(100vw, var(--w-page))) / -2 - var(--gutter)); border-radius: 10px 0 0 10px; }
  .hero-track img { height: 360px; }
}


/* ═══ 2026-09-29 클라이언트 지정 팔레트 (초록 3단 · 크림 3단) ═══
   짙은이끼 #1C352D · 숲 #2D4A3E · 새잎 #3B6E4C  /  아이보리 #F4F1EA · 순크림 #FDFBF7 · 바닐라 #FFFDF7
   글자 대비는 전부 WCAG AA 이상(본문 7:1 이상, 보조글 4.5:1 이상 — 계산으로 확인).
   로고가 짙은 갈색이라 초록 바탕 위에는 두지 않는다. 그래서 푸터는 크림으로 둔다. */
:root {
  --bg: #FDFBF7; --surface: #F4F1EA; --bg-subtle: #EFEBE1; --card: #FFFDF7;
  --ink: #1C352D; --text: #1C352D; --text-2: #3F5249; --text-3: #56665E;
  --moss: #2D4A3E; --moss-deep: #1C352D; --moss-soft: #E2EBE3; --leaf: #3B6E4C;
  --brand: #2D4A3E; --link: #2D4A3E; --accent: #3B6E4C;
  --border: #E2DDD1; --border-strong: #CCC5B5;
}
body { background: var(--bg); color: var(--text); }
h1, h2, h3 { color: var(--ink); }
.header { background: rgba(253, 251, 247, .92); }
.btn-primary, .btn-call { background: var(--moss); }
.btn-primary:hover, .btn-call:hover { background: var(--moss-deep); }
.chip.on { background: var(--leaf); border-color: var(--leaf); color: #FFFDF7; }
.more { color: var(--moss); }
.more:hover { color: var(--leaf); }
.footer { background: var(--surface); }
.footer a:hover { color: var(--leaf); }
/* 짙은 초록 띠 — 홈 '대표' 구역. 크림 글자를 얹는다 */
.band-dark { background: var(--moss-deep); color: #FDFBF7; }
.band-dark h2, .band-dark h3 { color: #FDFBF7; }
.band-dark .lead, .band-dark p { color: #E4E9E1; }
.band-dark .more { color: #FFFDF7; }
.band-dark .more:hover { color: #C9DCC4; }
@media (max-width: 840px) {
  .header, .nav, .menu-btn { background: var(--bg); }
}
/* 보라(수국색)는 새 팔레트에 없다 — 대상 짧은 문구·소제목 선을 새잎 초록으로 */
:root { --hydrangea: var(--leaf); --hydrangea-soft: var(--moss-soft); }


/* ═══ 2026-09-29 사진 움직임 (클라이언트 요청 4번) ═══
   .slides — 사진 여러 장을 겹쳐 두고 .on 인 한 장만 보인다. 바뀔 때 1.6초 동안 겹쳐 사라지고,
   보이는 동안에는 아주 천천히 다가온다(12초에 7%). 스크립트는 build.py foot() 에 있다.
   기존 .tile img / .aud .pics img 규칙(비율·여백·둥근 모서리)이 겹친 사진에 걸리지 않게 !important 로 끊는다. */
.slides { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-subtle); aspect-ratio: 3 / 4; }
.tile .slides { aspect-ratio: 4 / 3; border-radius: 10px; }
.slides img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important;
  aspect-ratio: auto !important; border-radius: 0 !important; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--e-out); }
.slides img.on { opacity: 1; }
.slides.play img { animation: slow-near 12s ease-in-out infinite alternate; }
@keyframes slow-near { from { transform: scale(1); } to { transform: scale(1.07); } }
.aud .pics .slides:nth-child(2) { margin-top: var(--sp-6); }

/* 프로그램 카드: 한 줄 안에서 왼쪽부터 차례로 떠오르고, 마우스를 얹으면 사진이 천천히 다가온다 */
.pcard { background: var(--card); }
.pcard.reveal { transition-property: opacity, transform, box-shadow; transition-duration: var(--t-enter), var(--t-enter), .5s;
  transition-timing-function: var(--e-out); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s; }
.pcard img { transition: transform 1.2s var(--e-out); }
@media (hover: hover) {
  .pcard:hover { box-shadow: 0 14px 30px rgba(28, 53, 45, .10); }
  .pcard:hover img { transform: scale(1.06); }
}
/* ═══ 2026-09-29 꽃숨 이야기 · 오시는 길 · 푸터 (클라이언트 요청 6~9번) ═══ */
/* 함께하는 사람 — 대표 아래. 사진이 있으면 대표와 같은 두 칸, 없으면 글만 왼쪽 초록 선과 함께 */
.people { display: grid; gap: var(--sp-6); }
.person { max-width: 44rem; padding-left: var(--sp-5); border-left: 3px solid var(--leaf); }
.person.has-pic { max-width: none; display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-7); align-items: center;
  padding-left: 0; border-left: 0; }
.person .pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.person .role { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--leaf); }
/* 꽃숨의 하루 — 사진과 글이 좌우를 번갈아 선다 */
.story { display: grid; gap: var(--sp-7); margin-top: var(--sp-6); }
.story-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.story-row:nth-child(even) > img { order: 2; }
.story-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.story-row h3 { font-size: 22px; }
.story-row p { margin-top: var(--sp-3); color: var(--text-2); }
.story-row:not(:has(img)) { grid-template-columns: 1fr; }
/* 그동안 함께한 곳 | 협력업체 */
.partners:not(.two) .notes { grid-template-columns: 1fr 1fr; max-width: 52rem; }
.partners.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
/* 오시는 길 — 지도 세 곳 */
.maps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-5); }
.map-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--moss); font-weight: 700; text-decoration: none;
  transition: background .25s var(--e-out), color .25s var(--e-out), border-color .25s var(--e-out); }
.map-btn:hover { background: var(--moss); border-color: var(--moss); color: #FFFDF7; }
/* ═══ 오시는 길: 왼쪽 제목·주소·지도 단추 / 오른쪽 지도 사진 (2026-09-29 2차) ═══
   지도 위쪽을 제목 글자 윗줄에 맞춘다 — 제목 줄 상자 위쪽과 글자 윗줄 사이 틈(--cap-gap)만큼 내린다(실측 값). */
.visit-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--sp-7); align-items: start; }   /* 지도 칸 ≈ 찍은 크기(640) — 글자가 줄지 않게 */
.visit-top .visit-line { margin-top: var(--sp-6); }
.visit-top h1 { margin-top: 0; }
/* 실측(2026-09-29): 제목 글자 윗줄 = 줄 상자 위 + 글자 크기의 0.12 (56px→6~7px). h1 크기 식을 그대로 쓴다. */
.map-pic { margin: 0; margin-top: calc(0.12 * clamp(36px, 20px + 3.2vw, 56px)); }
.map-pic img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-subtle); }
.map-pic figcaption { margin-top: 6px; font-size: 12px; color: var(--text-3); text-align: right; }
@media (max-width: 840px) {
  .visit-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .map-pic { margin-top: 0; }
  /* 휴대폰: 전체를 줄이면 지명이 7px 로 작아진다 — 핀 주변만 크게(세로로 길게 잘라) 보여 준다 */
  .map-pic img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
}

/* ═══ 2026-09-29 홈 인스타그램 (2차: 4칸 · 영상 + 짧은 설명) ═══ */
.igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.igcard h3 { font-size: 17px; margin-top: 12px; }
.igcard p { font-size: 15px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.igcard.reveal { transition-delay: calc(var(--i, 0) * 80ms); }
.ig video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ig { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--bg-subtle); }
.ig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }
.ig-play { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(28, 53, 45, .6); }
.ig-play::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid #FFFDF7; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (hover: hover) { .ig:hover img { transform: scale(1.05); } }
@media (max-width: 840px) { .igrid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) 12px; } }
@media (prefers-reduced-motion: reduce) { .ig img { transition: none; } .ig:hover img { transform: none; } }

/* ═══ 2026-09-29 2차: 클라이언트가 문구 칸에 남긴 요청 ═══ */
/* 홈 '대표' — 소개 한 줄 대신 이력 목록 (짙은 초록 띠 위) */
.ceo-history { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 12px; }
.ceo-history li { position: relative; padding-left: 20px; font-size: 18px; line-height: 1.5; color: #E4E9E1; }
.ceo-history li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #9CC5A6; }
/* "대상 쪽 사진 사이즈 좀 줄여주세요" — 사진 자리를 좁히고 글 자리를 넓힌다 */
.aud { grid-template-columns: minmax(0, 360px) 1fr; align-items: center; gap: var(--sp-8); }
.aud .pics .slides { aspect-ratio: 4 / 5; }
.aud .pics .slides:nth-child(2) { margin-top: var(--sp-5); }
@media (max-width: 840px) {
  .aud { grid-template-columns: 1fr; gap: var(--sp-5); }
  .aud .pics { max-width: 360px; }
}
/* "프로그램 — 위쪽 대상 글자랑 사이즈 맞춰주세요" — 페이지 제목(h1)과 같은 크기 */
#make h2 { font-size: clamp(36px, 20px + 3.2vw, 56px); }
/* 프로그램 예약 안내 — 오시는 길 안내와 같은 모양 */
.pg-note { margin-top: var(--sp-7); padding: var(--sp-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text-2); max-width: 44rem; }
.visit-note { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--surface); border-radius: var(--r-lg); color: var(--text-2); max-width: 44rem; }
/* 푸터 맨 아래: 저작권 줄 + 인증 마크 */
.foot-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.foot-bottom .copy { margin: 0; padding: 0; border-top: 0; }   /* 윗선은 .foot-bottom 이 긋는다 */
.footer ul { align-content: start; }   /* 항목이 적은 열이 남는 높이만큼 벌어지던 것(둘째 열 간격) */
.footer .certs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.footer .certs img { height: 48px; width: auto; margin: 0; background: none; object-fit: contain; }
@media (max-width: 840px) {
  .person.has-pic, .story-row, .partners.two { grid-template-columns: 1fr; gap: var(--sp-5); }
  .story-row:nth-child(even) > img { order: 0; }
  .partners:not(.two) .notes { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .slides img { transition: none; }
  .slides.play img, .slides img { animation: none !important; }
  .pcard img { transition: none; }
  .pcard:hover img { transform: none; }
}