/* =========================================================================
   소망AI스튜디오 · 디자인 시스템 (styles.css) — 시안 「온기」 적용본
   -------------------------------------------------------------------------
   ▸ 볕 좋은 옛집 대청마루 톤: 한지 크림 + 원목 + 브러시드 골드 + 감빛 절제.
   ▸ 색/폰트는 아래 :root 한 곳만 바꾸면 전 사이트 톤이 바뀝니다.
   ▸ 기존 클래스명은 그대로 유지 → 22개 페이지가 자동 반영됩니다.
   ▸ 옛 변수(--hong 등)는 별칭으로 남겨 두어 본문 인라인 스타일이 안 깨집니다.
   ▸ 어르신(50~70대) 가독성 우선: 큰 글씨·높은 대비·큰 버튼·넉넉한 여백.
   ========================================================================= */

/* ---- 웹폰트 (온기 = 명조 제목 + 고운바탕 본문 + 노토산스 라벨 + 프라운시스 악센트) ---- */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500;1,9..144,600&display=swap');

/* =========================================================================
   1) 디자인 토큰
   ========================================================================= */
:root {
  /* 온기 팔레트 */
  --cream:      #F4ECDD;   /* 한지 (전체 바탕) */
  --cream-2:    #FBF6EC;   /* 카드/밝은 블록 */
  --cream-3:    #FDFAF3;   /* 가장 밝은 종이 */
  --sand:       #EAD9BE;   /* 보조 톤 */
  --gold:       #BE9A56;   /* 브러시드 골드 (포인트) */
  --gold-deep:  #977634;   /* 진한 금 (링크·라벨·hover) */
  --wood:       #6E5236;   /* 원목 */
  --wood-deep:  #40301F;   /* 진한 원목 (다크 블록) */
  --persimmon:  #B0562F;   /* 감빛 (아주 절제된 강조) */
  --ink:        #332A1E;   /* 따뜻한 먹 (가장 진한 글자) */
  --ink-soft:   #6C5C46;   /* 본문 보조 글자 */
  --ink-faint:  #9C8B72;   /* 옅은 글자 */
  --line:       #E4D7BF;   /* 옅은 구분선(불투명) */
  --line-strong:#D8C6A6;

  /* ── 옛 변수 별칭(본문 인라인 스타일 호환) ── */
  --paper:      var(--cream);
  --paper-2:    var(--cream-2);
  --nude:       var(--sand);
  --brown:      var(--ink);
  --brown-soft: var(--ink-soft);
  --dark:       var(--wood-deep);
  --dark-2:     #2b2115;
  --hong:       var(--gold-deep);   /* 옛 진홍 포인트 → 금빛으로 */
  --hong-deep:  var(--wood);
  --gold-soft:  #E7CF9E;
  --green:      #6f7a4f;            /* 비교표 '됨' 체크(뮤트 올리브) */

  /* 글꼴 */
  --serif: 'Nanum Myeongjo', 'Gowun Batang', serif;                 /* 제목(굵은 명조) */
  --body:  'Gowun Batang', 'Nanum Myeongjo', serif;                 /* 본문(고운바탕) */
  --sans:  'Noto Sans KR', -apple-system, BlinkMacSystemFont,
           'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;      /* 라벨·버튼·폼 */
  --accent:'Fraunces', 'Nanum Myeongjo', serif;                     /* 영문 악센트(이탤릭) */

  /* 크기 스케일 (어르신 가독성 → 넉넉하게) */
  --fs-base: 18px;
  --lh-base: 1.85;
  --h1: clamp(2.4rem, 5.2vw, 4.2rem);
  --h2: clamp(1.9rem, 4vw, 2.9rem);
  --h3: clamp(1.24rem, 2.4vw, 1.55rem);
  --label: 0.72rem;

  /* 레이아웃 */
  --wrap: 1220px;
  --wrap-narrow: 800px;
  --gap: clamp(1rem, 2.5vw, 1.8rem);
  --radius: 4px;
  --radius-lg: 6px;
  --shadow: 0 20px 42px -30px rgba(64,48,31,.5);
  --shadow-lg: 0 34px 62px -28px rgba(64,44,20,.55);
  --sticky-h: 76px;

  /* 한지 결(따뜻한 노이즈) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   2) 리셋 & 기본
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background-color: var(--cream);
  background-image: var(--grain);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.3; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1em; }
strong { color: var(--ink); font-weight: 700; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.accent-en { font-family: var(--accent); font-style: italic; font-weight: 500; color: var(--gold-deep); }

/* =========================================================================
   3) 레이아웃 유틸
   ========================================================================= */
.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), 92vw); margin-inline: auto; max-width: var(--wrap-narrow); }
.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.section--cream { background-color: var(--cream-3); background-image: var(--grain); }
.section--dark {
  color: #f3e6d2;
  background-color: var(--wood-deep);
  background-image: var(--grain), linear-gradient(160deg, #40301F 0%, #5e4630 100%);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.center { text-align: center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

/* 영문/한글 소제목 라벨 */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--label);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin: 0 0 .9rem;
  display: inline-block;
}
.eyebrow--ko { font-family: var(--serif); letter-spacing: .2em; text-transform: none; color: var(--gold-deep); font-weight: 700; font-size: .98rem; }

/* 제목 아래 짧은 금색 밑줄 */
.rule { width: 46px; height: 2px; background: var(--gold); border: 0; margin: 1.1rem 0 1.6rem; }
.center .rule { margin-inline: auto; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem,4vw,3rem); }
.section-head.center, .center .section-head { margin-inline: auto; }
.lead { font-family: var(--body); font-size: 1.1rem; color: var(--ink-soft); }

/* =========================================================================
   4) 버튼 & CTA (전환의 핵심 — 크고 명확하게, 비알약)
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 56px; padding: 0 1.8rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--wood-deep); color: var(--cream-2); }
.btn--primary:hover { background: #2f2416; }
.btn--gold { background: linear-gradient(175deg, #C9A768, var(--gold-deep)); color: #fff; box-shadow: 0 12px 24px -14px rgba(151,118,52,.75); }
.btn--gold:hover { box-shadow: 0 20px 32px -14px rgba(151,118,52,.85); }
.btn--kakao { background: #FEE500; color: #3b2b12; }
.btn--kakao:hover { background: #f5dd00; }
.btn--line, .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--line:hover, .btn--ghost:hover { border-color: var(--wood); background: rgba(255,255,255,.45); }
.btn--ghost-light { background: transparent; color: #fdf7ea; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--lg { min-height: 62px; font-size: 1.05rem; padding: 0 2.2rem; }
.btn--block { display: flex; width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.center .cta-row { justify-content: center; }

/* =========================================================================
   5) 헤더 (chrome.js가 주입) — 한지 크림 스티키
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(248,242,229,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-weight: 800; }
.brand__seal { width: 44px; height: 44px; flex: 0 0 auto; display: inline-block; }
.brand__name { font-size: 1.24rem; color: var(--ink); line-height: 1.12; font-weight: 800; }
.brand__name small { display:block; font-family: var(--sans); font-size:.6rem; letter-spacing:.22em; color: var(--ink-faint); font-weight:500; text-transform: uppercase; }
.nav { display: flex; gap: .2rem; margin-left: auto; }
.nav a { font-family: var(--sans); padding: .55rem .8rem; font-weight: 500; font-size: 1rem; color: var(--ink-soft); border-radius: var(--radius); position: relative; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-deep); }
.nav a[aria-current="page"]::after { content:""; position:absolute; left:.8rem; right:.8rem; bottom:.15rem; height:1.5px; background: var(--gold); }
.header-cta { display: flex; gap: .6rem; align-items: center; }
.header-cta .tel { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 1.1rem; white-space: nowrap; }
.header-cta .tel span { display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.14em; color:var(--ink-faint); font-weight:500; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: .5rem; }
.menu-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px 0; border-radius: 2px; transition: .2s; }

@media (max-width: 1024px){
  .nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .site-header.open .site-header__bar { flex-wrap: wrap; }
  .site-header.open .nav { display: flex; flex-direction: column; order: 3; width: 100%; gap: 0; padding-top: .3rem; }
  .site-header.open .nav a { padding: .95rem .4rem; border-top: 1px solid var(--line); font-size: 1.1rem; }
  .site-header.open .header-cta { display: flex; order: 4; width: 100%; gap: .6rem; padding: .7rem 0 1rem; }
  .site-header.open .header-cta .tel { flex: 1; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:.4rem; border:1.5px solid var(--line); border-radius:var(--radius); }
  .site-header.open .header-cta .btn { flex: 1; }
}

/* =========================================================================
   6) 히어로 — 볕 좋은 대청마루 (따뜻한 크림 + 빛줄기)
   ========================================================================= */
.hero {
  position: relative; overflow: hidden; color: var(--ink);
  background-color: #F1E6D2;
  background-image:
    var(--grain),
    radial-gradient(90% 70% at 82% 16%, rgba(255,244,214,.9) 0%, transparent 55%),
    radial-gradient(70% 60% at 8% 92%, rgba(234,217,190,.6) 0%, transparent 60%),
    linear-gradient(165deg, #FBF6EC 0%, #F1E6D2 55%, #E9DABF 100%);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ""; position: absolute; top: -10%; right: 6%; width: 60%; height: 120%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,238,198,.5) 60%, transparent 78%);
  transform: rotate(-8deg); filter: blur(6px);
}
.hero__inner { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem,4.5vw,3.8rem); align-items: center; padding-block: clamp(6.5rem, 11vw, 9rem) clamp(3rem,6vw,5rem); }
.hero__label { font-family: var(--sans); color: var(--gold-deep); letter-spacing: .32em; text-transform: uppercase; font-weight: 500; font-size: .74rem; margin-bottom: 1.4rem; display:inline-block; }
.hero h1 { color: var(--ink); font-size: var(--h1); margin-bottom: 1.3rem; line-height: 1.24; }
.hero h1 .hl { color: var(--persimmon); }
.hero__sub { font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem,2.4vw,1.55rem); color: var(--ink); margin-bottom: 1.1rem; }
.hero__desc { color: var(--ink-soft); font-size: 1.06rem; max-width: 34rem; margin-bottom: 2rem; }
.hero .cta-row { margin-bottom: 2rem; }
.hero__badges { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.hero__badge b { display:block; font-family: var(--serif); font-size: 1.5rem; color: var(--ink); font-weight: 800; line-height:1.1; }
.hero__badge span { font-size: .84rem; color: var(--ink-faint); font-family: var(--sans); }
.hero__media { position: relative; justify-self: center; width: min(26rem, 100%); }
.hero__media .ph { width: 100%; }
.hero__media::before { content:""; position:absolute; inset:-12% -16%; z-index:0; border-radius:50%; background: radial-gradient(circle, rgba(255,246,222,.9) 30%, transparent 68%); filter: blur(4px); }
.hero__media .framed { position: relative; z-index: 1; }
@media (max-width: 900px){
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media .ph[data-ratio] { aspect-ratio: auto !important; height: 40vh; min-height: 240px; max-height: 400px; }
}

/* 신뢰 리본(선택) */
.trustbar { display:flex; align-items:center; gap: clamp(1rem,3vw,2.4rem); flex-wrap: wrap; justify-content:center; }
.trustbar .tb-item { font-family: var(--serif); font-weight:700; color: var(--ink-soft); font-size:1.05rem; padding:.3rem .2rem; border-bottom: 1px solid var(--line-strong); }
.section--dark .trustbar .tb-item { color:#e6d3ba; border-color: rgba(255,255,255,.2); }
.trust-note { font-family: var(--sans); font-size:.84rem; color:var(--ink-faint); }

/* =========================================================================
   7) 이미지 자리표시(placeholder)
   ========================================================================= */
.ph {
  position: relative; display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(45deg, #efe4cf 0 12px, #e7d9bd 12px 24px);
  color: var(--ink-soft); border: 1.5px dashed var(--gold); border-radius: var(--radius);
  aspect-ratio: 4 / 3; padding: 1rem; overflow: hidden;
}
.ph[data-ratio="1"] { aspect-ratio: 1/1; }
.ph[data-ratio="portrait"] { aspect-ratio: 3/4; }
.ph[data-ratio="wide"] { aspect-ratio: 16/9; }
.ph[data-ratio="tall"] { aspect-ratio: 2/3; }
.ph__icon { font-size: 1.8rem; opacity: .55; }
.ph__label { font-family: var(--sans); font-weight: 700; color: var(--ink); font-size: .96rem; margin-top:.4rem; }
.ph__hint { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); margin-top: .15rem; }
.ph__tag { position: absolute; top: 8px; left: 8px; background: var(--wood-deep); color:#fff; font-family: var(--sans); font-size:.64rem; font-weight:700; padding:.15rem .5rem; border-radius: 4px; letter-spacing:.04em; }
.ph.is-filled { background: none; border-style: solid; border-color: var(--line); }
.ph.is-filled .ph__body { display: none; }
.ph.is-filled img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }

/* 방문자 화면: 안 채운 빈 자리는 숨김 (편집모드 html.edit-mode 에서는 표시) */
html:not(.edit-mode) .ph:not(.is-filled) { display: none !important; }
html:not(.edit-mode) .trustbar:not(:has(.ph.is-filled)) { display: none !important; }

/* =========================================================================
   8) 카드 (서비스·고민·후기·단계)
   ========================================================================= */
.card { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem,3vw,2.1rem); box-shadow: var(--shadow); }
.card--flat { box-shadow: none; }
.card h3 { margin-bottom: .4rem; }

/* 서비스 카드 */
.service-card { display: block; background: var(--cream-2); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.service-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.service-card .sc-body { padding: 1.4rem 1.5rem 1.7rem; }
.service-card .sc-no { font-family: var(--accent); font-style: italic; color: var(--gold-deep); font-size: 1.3rem; }
.service-card .sc-en { font-family: var(--sans); font-size: .66rem; letter-spacing:.22em; color: var(--ink-faint); font-weight:600; margin-left:.4rem; }
.service-card h3 { font-size: 1.4rem; margin:.35rem 0 .5rem; }
.service-card p { color: var(--ink-soft); font-size: 1rem; margin-bottom: .8rem; }
.service-card .sc-more { font-family: var(--sans); color: var(--gold-deep); font-weight:700; font-size:.9rem; }
.service-card .ph, .service-card img { border-radius: 0; }

/* 고민 카드 (엽서형) */
.worry { background: var(--cream-2); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.9rem; position: relative; box-shadow: var(--shadow); }
.worry::before { content:""; position:absolute; top:0; left:1.9rem; right:1.9rem; height:2px; background: linear-gradient(90deg, var(--gold), transparent); }
.worry h3 { font-size: 1.22rem; }
.worry p { color: var(--ink-soft); margin:0; }

/* 숫자 성과 */
.stat { text-align:center; }
.stat b { display:block; font-family: var(--serif); font-size: clamp(2.2rem,6vw,3.2rem); color: var(--gold-deep); line-height:1; font-weight:800; }
.section--dark .stat b { color: var(--gold-soft); }
.stat span { color: var(--ink-soft); font-size: .98rem; font-family: var(--sans); }
.section--dark .stat span { color:#d9c7b0; }

/* 진행 단계 */
.steps { counter-reset: step; display:grid; gap: 1rem; }
.steps .step { position:relative; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding: 1.3rem 1.3rem 1.3rem 4.4rem; box-shadow: var(--shadow); }
.steps .step::before { counter-increment: step; content: counter(step); position:absolute; left: 1.1rem; top: 1.15rem; width:2.2rem; height:2.2rem; background: var(--gold-deep); color:#fff; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-weight:700; }
.steps .step h4 { font-family: var(--serif); margin:.1rem 0 .3rem; font-size: 1.14rem; }
.steps .step p { margin:0; color: var(--ink-soft); }

/* =========================================================================
   9) 전/후 갤러리 & 슬라이더
   ========================================================================= */
.ba-gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2rem); }
@media (max-width: 900px){ .ba-gallery { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .ba-gallery { grid-template-columns: 1fr;} }
.ba-item { text-align:center; }
.ba-item .ba-caption { font-family: var(--body); color: var(--ink-soft); font-weight:700; margin-bottom:.7rem; font-size: 1rem; }
.ba-pair { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:.5rem; }
.ba-pair .arrow { color: var(--gold); font-size: 1.4rem; }
.ba-pair .ph { aspect-ratio: 3/4; }
/* 결과쪽 원목 액자 느낌 */
.framed { border: 6px solid #efe4cf; box-shadow: var(--shadow-lg); border-radius: 3px; background:#efe4cf; }
.framed .ph { border:0; border-radius:0; }

/* 손잡이 슬라이더 (clip-path 방식) */
.ba-slider {
  --split: 50%;
  position: relative; width: 100%; aspect-ratio: 16 / 10; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  user-select: none; touch-action: pan-y; background: var(--sand); cursor: ew-resize;
  border: 6px solid #efe4cf;
}
.ba-slider--hero { max-width: 820px; }
.ba-slider[data-ratio="portrait"] { aspect-ratio: 3 / 4; }
.ba-slider[data-ratio="square"] { aspect-ratio: 1 / 1; }
.ba-slider .before, .ba-slider .after { position: absolute; inset: 0; }
.ba-slider .after { clip-path: inset(0 0 0 var(--split)); }
.ba-slider .before .ph, .ba-slider .after .ph {
  position: absolute; inset: 0; height: 100%; width: 100%;
  aspect-ratio: auto !important; border: 0; border-radius: 0;
}
.ba-slider .before img, .ba-slider .after img { position:absolute; inset:0; height: 100%; width: 100%; object-fit: cover; }
.ba-slider .after .ph:not(.is-filled)::before { content:""; position:absolute; inset:0; background: rgba(190,154,86,.16); z-index:1; pointer-events:none; }
.ba-slider .tag { position: absolute; top: 12px; z-index: 3; color:#fff; font-family: var(--sans); font-size:.76rem; font-weight:700; padding:.28rem .7rem; border-radius:2px; pointer-events:none; letter-spacing:.06em; }
.ba-slider .tag.l { left: 12px; background: rgba(64,48,31,.8); }
.ba-slider .tag.r { right: 12px; background: rgba(151,118,52,.92); }
.ba-slider .handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background:#fdf7ea; transform: translateX(-50%); z-index: 4; box-shadow: 0 0 0 1px rgba(64,48,31,.15); }
.ba-slider .handle:focus-visible { outline: 3px solid var(--gold); }
.ba-slider .handle::after { content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; background:var(--cream-2); border-radius:50%; display:grid; place-items:center; color:var(--wood-deep); font-weight:700; font-size:1.3rem; box-shadow: 0 8px 20px -6px rgba(64,44,20,.5); }
.ba-slider .ba-hint { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3; background: rgba(64,48,31,.86); color:#fdf7ea; font-family: var(--sans); font-size:.8rem; font-weight:600; padding:.3rem .8rem; border-radius:2px; pointer-events:none; transition: opacity .3s; }
.ba-slider.is-touched .ba-hint { opacity: 0; }
.ba-slider-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2rem); }
@media (max-width: 900px){ .ba-slider-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .ba-slider-grid { grid-template-columns: 1fr;} }
.ba-slide-item .ba-caption { font-family: var(--body); color: var(--ink-soft); font-weight:700; margin:.8rem 0 0; text-align:center; }

/* =========================================================================
   10) 비교표 / 가격표
   ========================================================================= */
.compare { width:100%; border-collapse: separate; border-spacing:0; background:var(--cream-2); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.compare th, .compare td { padding: 1rem 1.1rem; text-align:center; border-bottom:1px solid var(--line); font-size:1.02rem; }
.compare thead th { font-family: var(--serif); font-size:1.06rem; background: var(--sand); }
.compare thead th.best { background: var(--gold-deep); color:#fff; }
.compare td.best { background: rgba(190,154,86,.12); font-weight:600; color: var(--ink); }
.compare .yes { color: var(--green); font-weight:700; }
.compare .no { color:#b8ab93; }
.compare tr:last-child td { border-bottom:0; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling: touch; }

.price-table { width:100%; border-collapse: collapse; background:var(--cream-2); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.price-table th, .price-table td { padding: .9rem 1rem; border-bottom:1px solid var(--line); text-align:left; }
.price-table th { background: var(--sand); font-family: var(--serif); }
.price-table .em { color: var(--gold-deep); font-weight:700; }

/* =========================================================================
   11) 후기 카드
   ========================================================================= */
.review { background:var(--cream-2); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:.7rem; position: relative; }
.review .stars { color: var(--gold); letter-spacing:.12em; }
.review .r-meta { font-family: var(--sans); font-size:.85rem; color: var(--ink-faint); }
.review .r-body { font-family: var(--body); font-size:1.05rem; color: var(--ink); }
.review .r-tag { align-self:flex-start; background: var(--sand); color: var(--gold-deep); font-family: var(--sans); font-weight:700; font-size:.74rem; padding:.2rem .6rem; border-radius:2px; }

/* =========================================================================
   12) FAQ 아코디언
   ========================================================================= */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding: 1.25rem .5rem; font-family: var(--serif); font-weight:700; font-size: 1.16rem; color: var(--ink); display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color: var(--gold-deep); font-size:1.6rem; font-weight:700; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 .5rem 1.4rem; color: var(--ink-soft); font-size:1.04rem; }
.faq .faq-a strong { color: var(--ink); }

.faq-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.faq-tabs button { font-family: var(--sans); border:1px solid var(--line-strong); background:var(--cream-2); color: var(--ink-soft); padding:.5rem 1rem; border-radius:var(--radius); font-weight:600; cursor:pointer; font-size:.96rem; }
.faq-tabs button[aria-selected="true"] { background: var(--wood-deep); color:#fdf7ea; border-color: var(--wood-deep); }

/* =========================================================================
   13) 브레드크럼 / 페이지 헤더
   ========================================================================= */
.breadcrumb { font-family: var(--sans); font-size:.9rem; color: var(--ink-faint); padding-top: 1.4rem; }
.breadcrumb a:hover { color: var(--gold-deep); }
.breadcrumb .sep { margin: 0 .4rem; color: var(--gold); }
.page-head { padding-block: clamp(3rem,6vw,5rem); text-align:center; background-color: var(--cream-3); background-image: var(--grain); border-bottom:1px solid var(--line); }
.page-head h1 { font-size: clamp(2.2rem,4.6vw,3.4rem); }
.page-head .lead { max-width: 60ch; margin-inline:auto; }

/* 긴급/강조 배너 */
.urgent { background: linear-gradient(175deg, #C9A768, var(--gold-deep)); color:#fff; }
.urgent .wrap { display:flex; flex-wrap:wrap; align-items:center; gap: 1rem; padding-block: 1rem; }
.urgent p { margin:0; font-weight:700; font-size:1.06rem; }
.urgent .cta-row { margin-left:auto; }
.urgent .btn--ghost-light { border-color:#fff; color:#fff; }
.urgent .btn--ghost-light:hover { background:#fff; color: var(--gold-deep); }

/* =========================================================================
   14) 상담 폼
   ========================================================================= */
.form-card { background:var(--cream-2); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem,3vw,2.2rem); box-shadow: var(--shadow); }
.field { margin-bottom: 1.1rem; }
.field label { font-family: var(--sans); display:block; font-weight:700; margin-bottom:.4rem; color: var(--ink); }
.field label .req { color: var(--persimmon); }
.field input, .field select, .field textarea {
  width:100%; font-family: var(--sans); font-size:1.05rem; padding:.9rem 1rem;
  border:1.5px solid var(--line-strong); border-radius:var(--radius); background: var(--cream-3); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-deep); outline:none; }
.field .hint { font-family: var(--sans); font-size:.84rem; color: var(--ink-faint); margin-top:.35rem; }
.form-note { font-family: var(--sans); font-size:.86rem; color: var(--ink-faint); }

.channel { display:flex; gap:1rem; align-items:flex-start; background:var(--cream-2); border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.3rem; box-shadow: var(--shadow); }
.channel .ch-ic { flex:0 0 auto; width:52px; height:52px; border-radius:var(--radius); display:grid; place-items:center; font-size:1.5rem; background: var(--sand); }
.channel h4 { font-family: var(--serif); margin:.1rem 0 .3rem; font-size:1.16rem; }
.channel p { margin:0 0 .6rem; color: var(--ink-soft); font-size:.98rem; }
.channel .rec { display:inline-block; background: var(--gold-deep); color:#fff; font-family: var(--sans); font-size:.7rem; font-weight:700; padding:.12rem .5rem; border-radius:2px; margin-left:.4rem; }

/* =========================================================================
   15) 푸터 (chrome.js가 주입)
   ========================================================================= */
.site-footer { background: #2b2115; color: #c9b99e; padding-block: clamp(3rem,5vw,4.5rem) 8rem; }
.site-footer a:hover { color: #fff; }
.site-footer .foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 2rem; }
@media (max-width: 860px){ .site-footer .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .site-footer .foot-grid { grid-template-columns: 1fr; } }
.site-footer h5 { font-family: var(--sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color: #a08e72; margin:0 0 1rem; }
.site-footer .brand__name { color:#fdf7ea; }
.site-footer .brand__seal { width: 40px; height: 40px; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.site-footer .foot-note { border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.4rem; font-family: var(--sans); font-size:.82rem; color:#8a795f; line-height:1.7; }

/* =========================================================================
   16) 카톡 플로팅 · 모바일 하단 고정 CTA
   ========================================================================= */
.kakao-float { position: fixed; right: 18px; bottom: 24px; z-index: 190; text-align:center; }
.kakao-float a { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.kakao-float .bubble { width:60px; height:60px; border-radius:50%; background:#FEE500; display:grid; place-items:center; box-shadow: var(--shadow-lg); }
.kakao-float .bubble svg { width: 30px; height: 30px; color:#3b2b12; }
.kakao-float .cap { background:var(--cream-2); border:1px solid var(--line); border-radius:2px; padding:.2rem .6rem; font-family: var(--sans); font-size:.74rem; font-weight:700; color:var(--ink); box-shadow: var(--shadow); }

.mobile-cta { position: fixed; left:0; right:0; bottom:0; z-index: 195; display:none; background: var(--cream-2); border-top:1px solid var(--line); box-shadow: 0 -6px 20px rgba(64,48,31,.12); }
.mobile-cta__bar { display:flex; gap:.5rem; padding:.55rem .7rem; }
.mobile-cta__bar .btn { flex:1; min-height:54px; font-size:1rem; padding:0 .4rem; }
.mobile-cta__note { font-family: var(--sans); text-align:center; font-size:.76rem; color: var(--gold-deep); font-weight:700; padding:.35rem; border-bottom:1px solid var(--line); }
@media (max-width: 1024px){ .mobile-cta { display:block; } body { padding-bottom: calc(var(--sticky-h) + 52px); } .kakao-float { display:none; } }

/* =========================================================================
   17) 첫 방문 팝업
   ========================================================================= */
.popup-back { position: fixed; inset:0; background: rgba(43,33,21,.62); z-index: 300; display:grid; place-items:center; padding:1rem; }
.popup-back[hidden] { display:none; }
.popup { background: var(--cream-2); border-radius: var(--radius-lg); max-width: 420px; width:100%; overflow:hidden; box-shadow: var(--shadow-lg); }
.popup__top { background: linear-gradient(160deg, #5e4630, var(--wood-deep)); color:#fdf7ea; padding: 1.6rem; text-align:center; }
.popup__top .p-eyebrow { font-family: var(--sans); color: var(--gold-soft); font-weight:600; letter-spacing:.2em; font-size:.74rem; text-transform: uppercase; }
.popup__top h3 { color:#fdf7ea; margin:.4rem 0 0; font-size: 1.5rem; }
.popup__body { padding: 1.4rem 1.6rem 1.6rem; text-align:center; }
.popup__body p { color: var(--ink-soft); }
.popup__body .cta-row { justify-content:center; margin-top:1rem; }
.popup__foot { display:flex; justify-content:space-between; align-items:center; padding: .8rem 1.6rem 1.2rem; font-family: var(--sans); font-size:.86rem; color: var(--ink-faint); }
.popup__foot label { cursor:pointer; }
.popup__close { background:none; border:0; cursor:pointer; font-family: var(--sans); color:var(--ink-faint); font-weight:700; }

/* =========================================================================
   18) 편집 모드 (editor.js)
   ========================================================================= */
.edit-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 320; }
@media (max-width:1024px){ .edit-toggle { bottom: calc(var(--sticky-h) + 58px); left:12px; } }
body.editing [data-edit] { outline: 2px dashed var(--gold); outline-offset: 3px; cursor: text; border-radius: 4px; }
body.editing [data-edit]:hover { background: rgba(190,154,86,.12); }
body.editing .ph { cursor: pointer; }
body.editing .ph::after { content: "사진 넣기"; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background: var(--wood-deep); color:#fff; font-family: var(--sans); font-size:.72rem; padding:.15rem .5rem; border-radius:4px; white-space:nowrap; }
.edit-bar { position: fixed; left:50%; bottom: 16px; transform: translateX(-50%); z-index: 320; display:none; gap:.5rem; background: var(--wood-deep); padding:.6rem .7rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
body.editing .edit-bar { display:flex; }
.edit-bar .btn { min-height:44px; font-size:.92rem; padding:0 1rem; }
.edit-bar .status { color:#d8c6ae; font-family: var(--sans); font-size:.82rem; align-self:center; padding:0 .5rem; }

/* =========================================================================
   19) 유틸
   ========================================================================= */
.pill { display:inline-block; background: var(--sand); color: var(--gold-deep); font-family: var(--sans); font-weight:700; font-size:.8rem; padding:.25rem .7rem; border-radius:2px; }
.note-box { background: var(--cream-2); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius); padding:1.1rem 1.3rem; }
.checklist { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.checklist li { padding-left: 1.9rem; position:relative; }
.checklist li::before { content:"✓"; position:absolute; left:0; top:0; color: var(--green); font-weight:700; font-size:1.2rem; }
.big-quote { font-family: var(--serif); font-weight:800; font-size: clamp(1.5rem,3.4vw,2.3rem); color: var(--ink); line-height:1.5; text-align:center; }
.big-quote .by { display:block; font-family:var(--sans); font-size:1rem; color:var(--ink-faint); margin-top:1rem; font-weight:400; }
hr.soft { border:0; border-top:1px solid var(--line); margin: 2.5rem 0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce){ * { scroll-behavior:auto; transition:none !important; } }

/* =========================================================================
   20) 온기 시그니처 (홈 전용) — 원목 액자·신뢰 리본·철학·장인 밴드
   ========================================================================= */
/* 히어로 원목 액자 + 선반 + 놋쇠 명패 + 국화 코너 */
.hero__media .frame { position: relative; z-index: 2; border-radius: 3px; overflow: hidden;
  box-shadow: 0 44px 70px -26px rgba(64,44,20,.62), 0 6px 14px -6px rgba(64,44,20,.4); }
.hero__media .frame img { width: 100%; display: block; }
.frame-ledge { position: absolute; left: -8%; right: -8%; bottom: -10px; height: 22px; z-index: 1;
  background: linear-gradient(180deg,#d8c39d,#b89a6a); border-radius: 2px; box-shadow: 0 16px 24px -12px rgba(64,44,20,.5); }
.plaque { position: absolute; z-index: 3; right: -1.2rem; bottom: 2.4rem;
  background: linear-gradient(175deg,#caa96c,#9c7c3f); color:#fff5e2; padding:.7rem 1.1rem; border-radius:2px;
  box-shadow: 0 12px 22px -10px rgba(64,44,20,.6); border:1px solid rgba(255,255,255,.25); }
.plaque b { font-family: var(--serif); font-weight:700; font-size:.92rem; display:block; letter-spacing:.04em; }
.plaque span { font-family: var(--sans); font-size:.62rem; letter-spacing:.22em; opacity:.85; }
.chrys-corner { position:absolute; left:-2.2rem; top:-1.8rem; z-index:3; width:6rem; opacity:.9; color:var(--gold); }
.hero h1 .em { color: var(--persimmon); }
.hero h1 .accent-en { display:block; font-size:.42em; margin-top:.5rem; letter-spacing:.01em; font-weight:500; }
@media (max-width:900px){ .plaque{ right:.2rem; bottom:1.6rem; } .chrys-corner{ left:-.6rem; top:-1rem; width:4.6rem; } }

/* 신뢰 리본 */
.ribbon { background-color: var(--wood-deep); background-image: var(--grain), linear-gradient(160deg,#40301F,#5e4630); color: var(--cream); }
.ribbon .in { display:flex; justify-content:center; gap: clamp(1.2rem,4vw,3.5rem); flex-wrap:wrap; align-items:center; text-align:center; padding-block:1.7rem; }
.ribbon b { font-family: var(--serif); font-weight:700; color:#fff; }
.ribbon span { color:#d8c7ab; font-size:.95rem; }
.ribbon .div { width:1px; height:26px; background: rgba(255,255,255,.2); }
@media (max-width:860px){ .ribbon .div { display:none; } }

/* 철학(creed) + 국화 장식선 */
.creed { padding-block: clamp(4rem,8vw,7rem); text-align:center; }
.creed .big { font-family: var(--serif); font-weight:800; font-size: clamp(1.6rem,3.6vw,2.6rem); line-height:1.5; max-width:24ch; margin:1.4rem auto 0; color:var(--ink); }
.creed .big .em { color: var(--persimmon); }
.creed .sub { margin-top:1.3rem; color: var(--ink-faint); }
.rule-chrys { display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold); }
.rule-chrys::before, .rule-chrys::after { content:""; height:1px; width:64px; background: linear-gradient(90deg,transparent,var(--gold)); }
.rule-chrys::after { background: linear-gradient(270deg,transparent,var(--gold)); }
.chrys { display:inline-flex; color: var(--gold); }

/* 장인 밴드 */
.section--sand { background-color:#EADBC2; background-image: var(--grain), linear-gradient(180deg,#F1E6D2,#EADBC2); }
.artisan { display:grid; grid-template-columns:.85fr 1fr; gap:0; background:var(--wood-deep); color:var(--cream); border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.artisan__img { position:relative; min-height:100%; }
.artisan__img img { width:100%; height:100%; object-fit:cover; }
.artisan__img::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg,transparent 60%,rgba(64,48,31,.5)); }
.artisan__tx { padding: clamp(2.4rem,4vw,4rem) clamp(1.8rem,3.5vw,3.6rem); }
.artisan__tx .eyebrow { color:#d9b978; }
.artisan__tx blockquote { font-family: var(--serif); font-weight:700; font-size: clamp(1.4rem,2.6vw,2.1rem); line-height:1.5; margin:1.1rem 0 1.4rem; color:#fdf7ea; }
.artisan__tx blockquote .em { color:#e0a878; }
.artisan__tx p { color:#d6c6ac; font-size:1rem; }
.artisan__sign { margin-top:1.4rem; font-family: var(--accent); font-style:italic; font-size:1.2rem; color:#d9b978; }
@media (max-width:860px){ .artisan { grid-template-columns:1fr; } .artisan__img { min-height:15rem; } }