/* 순천 공통 — 얼굴 페이지와 상차림 상세 넷이 같이 쓴다.
   색·여백·효과를 고칠 때는 여기 한 군데만 고친다. */

  :root{
    --ink:#1a1a17; --ink-2:#2a2824;
    --paper:#f6f1e7; --paper-2:#efe7d9; --white:#ffffff;
    --txt:#1a1a17; --txt-soft:#5a5247; --txt-mute:#7a7161;
    --accent:#2b4257; --accent-d:#1e2f3e; --gold:#a8821f;
    /* 버튼은 색을 칠하지 않는다 — 먹. 어두운 면 위에서는 한지로 뒤집는다 */
    --btn:#1a1a17; --btn-d:#34322c;
    --line:#e5dccb; --line-d:rgba(246,241,231,.16);
    --serif:"Noto Serif KR",serif;
    --sans:"Noto Sans KR",system-ui,-apple-system,sans-serif;
    --pad:clamp(52px,6.4vw,92px);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--paper);color:var(--txt);font-family:var(--sans);font-size:16.5px;line-height:1.95;font-weight:400;word-break:keep-all;-webkit-text-size-adjust:100%;overflow-x:hidden}
  img,video{max-width:100%}
  a{color:var(--accent)}

  .wrap{max-width:1060px;margin:0 auto;padding:0 20px}
  .narrow{max-width:740px}
  section{padding:var(--pad) 0;background:var(--paper)}
  .s-white{background:var(--white)}
  .s-dark{background:var(--ink);color:var(--paper)}
  .s-dark .lead,.s-dark .body{color:rgba(246,241,231,.76)}

  .eyebrow{margin:0 0 20px;font-size:12px;letter-spacing:.26em;color:var(--txt-mute);font-weight:500}
  .s-dark .eyebrow{color:#c9a227}

  h1,h2,h3{font-family:var(--serif);margin:0;letter-spacing:-.012em;text-wrap:balance;word-break:keep-all}
  h2{font-weight:400;font-size:clamp(25px,3.6vw,40px);line-height:1.46}
  .s-dark h2{font-weight:300}
  h3{font-weight:500;font-size:19px;line-height:1.55}
  .lead{margin:22px 0 0;font-size:16.5px;line-height:1.95;color:var(--txt-soft);text-wrap:pretty}
  .body{margin:0 0 18px;font-size:16px;line-height:1.95;color:var(--txt-soft);text-wrap:pretty}
  .body:last-child{margin-bottom:0}
  .strong{color:var(--txt);font-weight:500}
  /* 모바일에서만 한 번 더 끊는다. PC 에서는 없는 줄바꿈이다 */
  br.mb{display:none}
  @media (max-width:640px){ br.mb{display:inline} }
  .s-dark .strong{color:#fff}

  /* 효과 — 고관여 24곳 실측대로 둘만. 삼성 0.5초·20px, 이징은 참들기름·제네시스와 같은 값.
     animation-timeline:view() 는 iOS 사파리와 네이버 앱 인앱브라우저에서 안 돈다.
     유입이 모바일 75% 라 거기서 안 도는 건 안 넣은 것과 같다 → IntersectionObserver 로 켠다.
     자바스크립트가 막히면 .js 가 안 붙어 전부 그냥 보인다(안 보이는 사고 없음). */
  .js .rv,.js .stag > *{opacity:0;transform:translateY(20px);
    transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in,.js .stag > *.in{opacity:1;transform:none}
  .js .stag > *:nth-child(2){transition-delay:.08s}
  .js .stag > *:nth-child(3){transition-delay:.16s}
  .js .stag > *:nth-child(4){transition-delay:.24s}
  .js .zo{transform:scale(1.04);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .zo.in{transform:none}
  @media (prefers-reduced-motion: reduce){
    .js .rv,.js .stag > *,.js .zo{opacity:1;transform:none;transition:none}
  }

  /* ── 참들기름 · 명가유업 쪽 효과를 CSS 로 옮긴 것 ──────────────────
     그쪽은 GSAP + ScrollTrigger + Lenis 를 쓴다. Lenis 는 # 앵커를 다시 깨뜨리고
     GSAP 은 분양 사이트 쪽(과적재)으로 내려가므로, 같은 결과만 순수 CSS 로 낸다. */

  /* 1. 줄 마스크 — 가려진 데서 글이 올라온다. 글자 한 글자씩이 아니라 줄 단위 */
  .js .ln{display:block;overflow:hidden}
  .js .ln > span{display:block;transform:translateY(106%);
    transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .ln.in > span{transform:none}

  /* 2. 이미지 와이프 — 아래에서 위로 열린다 */
  .js .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.2,.7,.2,1)}
  .js .wipe.in{clip-path:inset(0 0 0 0)}

  /* 3. 히어로 패럴랙스 — 배경이 글보다 천천히 흐른다 */
  .hero-bg{will-change:transform}

  /* 4. 마퀴 — 품목 이름이 한 줄로 흐른다 */
  /* 띠 — 바탕을 비운다. 페이지 바탕(한지)이 그대로 비치고 글자는 그 위에서 읽히는 색으로.
     선도 양끝 페이드도 넣지 않는다(사장님 지시 — 광주와 같은 기준). */
  .marq{overflow:hidden;background:none;padding:26px 0;white-space:nowrap}
  .marq-in{display:inline-block;animation:marq 56s linear infinite}
  .marq-in b{font-family:var(--serif);font-size:clamp(16px,1.8vw,22px);font-weight:400;
    color:var(--txt-soft);padding:0 22px;font-variant-numeric:tabular-nums}
  .marq-in b::after{content:"·";color:var(--line);padding-left:22px}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marq:hover .marq-in{animation-play-state:paused}

  /* 5. 스크롤 진행 바 */
  .prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:60;
    transition:width .08s linear}

  /* 6. 핀 — 옆 글이 멈춰 선 채로 사진이 지나간다. 애플이 sticky 로 낸다 */
  .pin{position:sticky;top:124px}
  @media (max-width:860px){ .pin{position:static} }


  /* 7. 카드 — 더 크게 들어오고, 스크롤에 따라 서로 다른 속도로 흐른다.
        흐름은 transform 이 아니라 translate 속성으로 낸다. 둘은 따로 돌아서 안 싸운다. */
  .js .four > .tile{
    opacity:0;transform:translateY(46px) scale(.965);
    transition:opacity .68s cubic-bezier(.2,.7,.2,1),transform .68s cubic-bezier(.2,.7,.2,1),
               box-shadow .25s ease}
  /* 좌우에서 엇갈려 들어온다 — 아래에서만 올라오면 한 덩어리로 보인다 */
  .js .four > .tile:nth-child(odd){transform:translate3d(-30px,46px,0) scale(.965)}
  .js .four > .tile:nth-child(even){transform:translate3d(30px,46px,0) scale(.965)}
  .js .four > .tile.in{opacity:1;transform:none}
  .js .four > .tile:nth-child(2){transition-delay:.1s}
  .js .four > .tile:nth-child(3){transition-delay:.2s}
  .js .four > .tile:nth-child(4){transition-delay:.3s}
  .js .drift{will-change:translate}

  /* 올려놓으면 또렷하게 떠오른다 */
  .js .four > .tile.in:hover{transform:translateY(-9px) scale(1.012);
    box-shadow:0 26px 54px rgba(60,40,20,.18)}
  .rv-card:hover{box-shadow:0 20px 44px rgba(60,40,20,.13)}
  .js .four > .tile.in:hover .ph video,.js .four > .tile.in:hover .ph img{scale:1.045;transition:scale .5s cubic-bezier(.2,.7,.2,1)}

  @media (prefers-reduced-motion: reduce){
    .js .four > .tile{opacity:1;transform:none;transition:none}
    .js .drift{translate:none !important}
  }

  /* ── 블럭마다 다른 움직임 ──────────────────────────────────
     같은 효과가 연달아 나오면 남발로 보인다. 섹션 순서대로 다섯 가지를 돌려 쓴다.
     어느 섹션에 무엇이 붙는지는 JS 가 자리 순서로 정한다. */

  /* ① 옆에서 밀려 들어온다 */
  .js .e-sx{opacity:0;transform:translateX(-30px);
    transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
  .js .e-sx.in{opacity:1;transform:none}

  /* ② 흐릿한 데서 선명해진다 */
  .js .e-bl{opacity:0;filter:blur(10px);transform:scale(.985);
    transition:opacity .85s cubic-bezier(.2,.7,.2,1),filter .85s cubic-bezier(.2,.7,.2,1),
               transform .85s cubic-bezier(.2,.7,.2,1)}
  .js .e-bl.in{opacity:1;filter:none;transform:none}

  /* ③ 한 칸씩 계단으로 올라온다 */
  .js .e-st{opacity:0;transform:translateY(40px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .e-st.in{opacity:1;transform:none}

  /* ④ 작게 접혀 있다가 펴진다 */
  .js .e-pop{opacity:0;transform:scale(.9) rotate(-1.4deg);
    transition:opacity .6s cubic-bezier(.2,1.25,.4,1),transform .6s cubic-bezier(.2,1.25,.4,1)}
  .js .e-pop.in{opacity:1;transform:none}

  /* ⑤ 기울어져 있다가 바로 선다 */
  .js .e-sk{opacity:0;transform:perspective(900px) rotateX(9deg) translateY(26px);
    transform-origin:50% 0;
    transition:opacity .68s cubic-bezier(.2,.7,.2,1),transform .68s cubic-bezier(.2,.7,.2,1)}
  .js .e-sk.in{opacity:1;transform:none}

  /* 시차 — 다섯 효과 공통 */
  .js [class*="e-"]:nth-child(2){transition-delay:.09s}
  .js [class*="e-"]:nth-child(3){transition-delay:.18s}
  .js [class*="e-"]:nth-child(4){transition-delay:.27s}
  .js [class*="e-"]:nth-child(5){transition-delay:.36s}
  .js [class*="e-"]:nth-child(6){transition-delay:.45s}

  /* 반박 제거 — 밑줄이 좌에서 우로 그어진다 */
  .js .ans > li{position:relative;border-bottom-color:transparent}
  .js .ans > li::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
    background:var(--line);transform:scaleX(0);transform-origin:left;
    transition:transform .85s cubic-bezier(.2,.7,.2,1) .12s}
  .js .ans > li.in::after{transform:scaleX(1)}

  /* 숫자 사이 세로선이 내려 그어진다 */
  .num-grid > .num{position:relative}
  .js .num-grid > .num + .num::before{content:"";position:absolute;left:0;top:12%;width:1px;height:76%;
    background:rgba(246,241,231,.18);transform:scaleY(0);transform-origin:top;
    transition:transform .75s cubic-bezier(.2,.7,.2,1) .25s}
  .js .num-grid > .num.in + .num::before{transform:scaleY(1)}
  @media (max-width:860px){ .js .num-grid > .num + .num::before{display:none} }

  /* 후기 — 한 장씩 옆으로 넘어간다. 5.6초마다, 손대면 그 자리에서 멈춘다 */
  .slider{position:relative;margin-top:40px}
  .track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .track::-webkit-scrollbar{display:none}
  .track > *{flex:0 0 min(84%,460px);scroll-snap-align:start}
  /* 세 장을 다 보여주면 넘길 게 없어진다. 두 장 + 다음 장이 살짝 걸치게 */
  @media (min-width:860px){ .track > *{flex:0 0 calc((100% - 40px)/2.25)} }
  @media (prefers-reduced-motion:reduce){ .track{scroll-behavior:auto} }
  .sl-ctrl{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px}
  .sl-arrow{width:52px;height:38px;padding:0;border:0;border-bottom:1px solid var(--line);
    background:none;color:var(--txt-mute);font-family:var(--serif);font-size:24px;line-height:1;
    cursor:pointer;transition:color .25s,border-color .25s}
  .sl-arrow:hover{color:var(--ink);border-color:var(--ink)}
  .dots{display:flex;gap:11px;align-items:center}
  .dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);
    cursor:pointer;transition:background .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
  .dots button[aria-current="true"]{background:var(--ink);transform:scale(1.55)}

  @media (prefers-reduced-motion: reduce){
    .js .e-sx,.js .e-bl,.js .e-st,.js .e-pop,.js .e-sk{opacity:1;transform:none;filter:none;transition:none}
    .js .ans > li::after{transform:scaleX(1);transition:none}
    .js .num-grid > .num + .num::before{transform:scaleY(1);transition:none}
  }

  @media (prefers-reduced-motion: reduce){
    .js .ln > span{transform:none;transition:none}
    .js .wipe{clip-path:none;transition:none}
    .marq-in{animation:none}
    .prog{display:none}
  }


  /* 상단 고정바 */
  .bar{position:sticky;top:0;z-index:40;background:rgba(26,26,23,.93);backdrop-filter:blur(8px);color:var(--paper)}
  .bar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:72px}
  .bar-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper)}
  .bar-brand .mk{width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;font-family:var(--serif);font-size:20px;font-weight:500;display:grid;place-items:center}
  .bar-brand .nm{font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.25;white-space:nowrap}
  .bar-brand .sb{display:block;font-family:var(--sans);font-size:11.5px;color:rgba(246,241,231,.62);letter-spacing:.02em}
  .bar-cta{display:flex;gap:10px;align-items:center}
  .bar-cta a{text-decoration:none;font-size:14px;font-weight:500;padding:11px 20px;border-radius:999px;white-space:nowrap}
  .bar-tel{border:1px solid rgba(246,241,231,.4);color:var(--paper)}
  .bar-book{background:var(--paper);color:var(--ink)}
  .bar-book:hover{background:#fff}
  /* 네 상차림으로 가는 줄 — 손님이 바로 고르게, 크롤러가 raw HTML 에서 바로 보게 */
  .nav{position:sticky;top:72px;z-index:39;background:rgba(26,26,23,.88);backdrop-filter:blur(8px);
       border-top:1px solid rgba(246,241,231,.12)}
  .nav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav-in::-webkit-scrollbar{display:none}
  .nav-in a{flex:0 0 auto;padding:13px 18px;font-size:14px;color:rgba(246,241,231,.74);text-decoration:none;white-space:nowrap}
  .nav-in a:hover{color:#fff}

  /* 히어로 */
  .hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;min-height:clamp(480px,76vh,700px);display:flex;align-items:center}
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(26,26,23,.95) 0%,rgba(26,26,23,.86) 46%,rgba(26,26,23,.58) 100%)}
  .hero-in{position:relative;z-index:2;padding:clamp(64px,9vw,112px) 20px}
  .hero .tag{display:inline-block;border:1px solid rgba(246,241,231,.34);border-radius:999px;padding:7px 16px;font-size:12.5px;letter-spacing:.02em;margin-bottom:26px;color:rgba(246,241,231,.9)}
  .hero h1{font-weight:300;font-size:clamp(28px,5.2vw,50px);line-height:1.4;color:#fff;letter-spacing:-.018em}
  .hero .hl{margin:26px 0 0;font-size:16.5px;line-height:2;color:rgba(246,241,231,.78);max-width:34em}

  /* 버튼 — 사이 여백 꼭 준다 */
  .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
  .btn{display:inline-block;text-decoration:none;font-size:15.5px;font-weight:500;padding:18px 34px;border-radius:999px;border:1px solid transparent;line-height:1.2}
  .btn-fill{background:var(--btn);color:#fff}
  .btn-fill:hover{background:var(--btn-d)}
  .btn-paper{background:var(--paper);color:var(--ink)}
  .btn-line{border-color:rgba(246,241,231,.42);color:var(--paper)}
  .btn-line-d{border-color:#c9bfac;color:var(--ink)}
  .cta-note{margin:20px 0 0;font-size:13.5px;line-height:1.8;color:rgba(246,241,231,.62)}

  /* 숫자 띠 — 숫자는 가운데 정렬 */
  .nums{background:var(--ink-2);color:var(--paper);padding:clamp(38px,4.4vw,56px) 0}
  .num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 14px;text-align:center}
  .num .n{font-family:var(--serif);font-size:clamp(24px,2.7vw,33px);font-weight:300;color:#fff;line-height:1.2;letter-spacing:-.01em}
  .num .l{font-size:12.5px;line-height:1.65;color:rgba(246,241,231,.66);margin-top:9px}

  /* 손님 고민 */
  .quotes{margin:34px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;max-width:780px}
  .quotes li{background:var(--white);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;padding:18px 22px;font-size:15.5px;line-height:1.9;color:var(--txt-soft)}
  .s-dark .quotes li{background:rgba(246,241,231,.06);border-left-color:var(--gold);color:rgba(246,241,231,.82)}

  /* 두 칸 */
  .duo{display:flex;flex-wrap:wrap;gap:56px 50px;align-items:center}
  .duo > div{flex:1 1 400px;min-width:0}
  .shot{position:relative;overflow:hidden;border-radius:4px;display:block}
  .shot img,.shot video{display:block;width:100%;height:clamp(280px,34vw,430px);object-fit:cover}

  /* 상차림 4장 */
  .four{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
  /* 금액 칸 — 인라인 style 로 3단을 박으면 모바일 규칙을 덮어써서 글자가 뭉갠다.
     그래서 클래스로 뺀다. 좁아지면 2단, 더 좁으면 1단. */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
  .tier{background:var(--white);border:1px solid var(--line);border-radius:4px;
    padding:30px 26px;display:flex;flex-direction:column;gap:9px}
  .tier .nm{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--txt-mute)}
  .tier .amt{font-family:var(--serif);font-size:clamp(27px,3.2vw,34px);font-weight:300;
    color:var(--txt);line-height:1.15;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
  .tier .sub{font-size:14.5px;line-height:1.75;color:var(--txt-soft)}
  @media (max-width:860px){ .tiers{grid-template-columns:1fr;gap:12px} }
  @media (max-width:640px){
    /* 폰에서는 한 줄에 하나씩, 이름과 금액을 가로로 나란히 — 세로로 늘어지지 않게 */
    .tier{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:22px 20px}
    .tier .nm{flex:0 0 auto}
    .tier .amt{flex:1 1 auto;text-align:right;font-size:28px}
    .tier .sub{flex:1 1 100%;font-size:14px}
  }
  .tile{display:block;text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
  .tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(60,40,20,.12)}
  .tile .ph{display:block;overflow:hidden}
  .tile .ph img,.tile .ph video{display:block;width:100%;height:210px;object-fit:cover;background:var(--ink)}
  .tile .ph video{pointer-events:none}
  .tile .tx{display:block;padding:26px 26px 28px}
  .tile .t{display:block;font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.45}
  .tile .d{display:block;margin:12px 0 0;font-size:15px;line-height:1.85;color:var(--txt-soft)}
  .tile .go{display:inline-block;margin-top:18px;font-size:14px;font-weight:500;color:var(--accent)}

  /* 가는 곳 */
  .area{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
  .area span{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 19px;font-size:15px}
  .area span.me{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:500}

  /* 지키는 것 */
  .keep{margin:34px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
  .s-dark .keep{background:var(--line-d)}
  .keep li{background:var(--white);padding:26px 24px;font-size:15.5px;line-height:1.85;color:var(--txt-soft)}
  .s-dark .keep li{background:var(--ink);color:rgba(246,241,231,.76)}
  .s-white .keep li{background:var(--paper)}
  .s-white .quotes li,.s-white .rv-card,.s-white .faq,.s-white .area span{background:var(--paper)}
  .keep li b{display:block;font-family:var(--serif);font-size:17px;font-weight:500;color:var(--txt);margin-bottom:8px}
  .s-dark .keep li b{color:#fff}

  /* 후기 */
  .rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .rv-card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:28px 26px}
  .rv-st{color:#b8902f;font-size:13px;letter-spacing:3px}
  .rv-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
  .rv-nm{font-family:var(--serif);font-size:16px;font-weight:500}
  .rv-nm span{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--txt-mute);margin-left:6px}
  .rv-dt{font-size:12px;color:var(--txt-mute)}
  .rv-bd{margin:0;font-size:14.5px;line-height:1.95;color:var(--txt-soft)}
  .rv-bd b{font-weight:500;color:var(--txt)}

  /* 반박 제거 */
  .ans{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
  .ans li{border-bottom:1px solid var(--line);padding:24px 0}
  .ans .q{font-family:var(--serif);font-size:17.5px;font-weight:500;line-height:1.6;margin:0 0 10px}
  .ans .a{margin:0;font-size:15.5px;line-height:1.95;color:var(--txt-soft)}

  /* FAQ */
  .faq{background:var(--white);border:1px solid var(--line);border-radius:4px;margin-bottom:10px;overflow:hidden}
  .faq summary{cursor:pointer;padding:19px 22px;font-family:var(--serif);font-size:16.5px;font-weight:500;list-style:none;line-height:1.55}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";float:right;color:var(--accent);font-family:var(--sans);font-weight:400;margin-left:12px}
  .faq[open] summary::after{content:"\2013"}
  .faq .a{padding:0 22px 20px;font-size:15.5px;line-height:1.95;color:var(--txt-soft)}

  /* 예약 */
  .book{background:var(--paper-2)}
  .book .wrap{max-width:680px}
  .book-hd{text-align:center}
  .book .cta{justify-content:center}
  .form{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:32px 28px;margin-top:34px;text-align:left}
  .fld{margin-bottom:16px}
  .fld label{display:block;font-size:13.5px;font-weight:500;margin-bottom:8px;color:var(--txt-soft)}
  .fld input,.fld textarea{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:4px;font-family:inherit;font-size:16px;background:var(--white);color:inherit;line-height:1.7}
  .fld textarea{min-height:104px;resize:vertical}
  .fld input:focus,.fld textarea:focus{outline:none;border-color:var(--ink)}
  /* ── 예약 폼 — 상 고르기 · 결제 · 음식 고르기 ── */
  .fld .hint{font-weight:400;color:var(--txt-mute);font-size:12.5px;margin-left:6px}
  .pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pick button{padding:14px 8px;border:1px solid var(--line);border-radius:4px;background:var(--white);
    font-family:inherit;font-size:14.5px;color:var(--txt-soft);cursor:pointer;line-height:1.45;
    transition:border-color .2s,background .2s,color .2s}
  .pick button b{display:block;font-family:var(--serif);font-size:16px;font-weight:500;color:var(--txt)}
  .pick button.on{border-color:var(--ink);background:var(--ink);color:rgba(246,241,231,.78)}
  .pick button.on b{color:#fff}
  .pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pay label{display:block;position:relative}
  .pay input{position:absolute;opacity:0;pointer-events:none}
  .pay span{display:block;padding:13px 6px;border:1px solid var(--line);border-radius:4px;
    background:var(--white);text-align:center;font-size:14px;color:var(--txt-soft);cursor:pointer;
    transition:border-color .2s,background .2s,color .2s}
  .pay input:checked + span{border-color:var(--ink);background:var(--ink);color:#fff}
  .menu{border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .mgrp{background:var(--paper);padding:10px 14px;font-size:13px;font-weight:500;color:var(--txt-mute);
    border-bottom:1px solid var(--line)}
  .mi{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .mi:last-child{border-bottom:0}
  .mi > span{flex:1 1 auto;font-size:15px;color:var(--txt)}
  .mi input{flex:0 0 84px;width:84px;padding:9px 10px;border:1px solid var(--line);border-radius:4px;
    font-family:inherit;font-size:16px;text-align:right}
  .mi input:focus{outline:none;border-color:var(--ink)}
  .mi em{flex:0 0 auto;font-style:normal;font-size:13px;color:var(--txt-mute)}
  .quote-note{margin:12px 0 0;font-size:13.5px;line-height:1.8;color:var(--txt-mute)}
  .done{margin:16px 0 0;padding:18px 20px;background:var(--paper);border:1px solid var(--line);
    border-radius:4px;font-size:15px;line-height:1.85;color:var(--txt);white-space:pre-line;display:none}
  .done.on{display:block}
  @media (max-width:640px){
    .pick,.pay{grid-template-columns:1fr}
    .pick button{display:flex;align-items:baseline;gap:10px;text-align:left}
    .pick button b{display:inline}
  }
  .send{width:100%;padding:18px;border:none;border-radius:999px;background:var(--btn);color:#fff;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer}
  .send:disabled{opacity:.55;cursor:default}
  .fnote{font-size:13.5px;color:var(--txt-mute);text-align:center;margin:14px 0 0;line-height:1.8}

  /* 푸터 */
  footer{background:var(--ink);color:rgba(246,241,231,.66);padding:clamp(40px,4.6vw,58px) 0;font-size:14px;line-height:1.95}
  footer a{color:var(--paper)}
  footer .fnm{font-family:var(--serif);font-size:17px;font-weight:500;color:#fff}
  footer .biz{color:rgba(246,241,231,.42);font-size:12.5px;margin-top:16px;line-height:1.8}

  /* 챗봇 */
  /* 챗봇 호출 — 캐릭터 대신 한 줄 알약. 광주 5장과 같은 구조(대표님 확정).
     말풍선이 알약 위에 서고, 꼬리는 모서리 하나를 깎아서 낸다.
     색만 다르다 — 버튼에 색을 쓰지 않기로 해서 먹이다. */
  @keyframes fabIn{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
  .chat-nudge{position:fixed;right:16px;bottom:14px;z-index:45;display:flex;
    flex-direction:column;align-items:flex-end;gap:9px}
  .chat-bubble{position:relative;align-self:flex-end;margin-right:6px;background:#fff;
    border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:10px 28px 10px 14px;
    font-size:13px;line-height:1.45;color:var(--txt);box-shadow:0 7px 18px rgba(26,26,23,.16);
    max-width:240px;white-space:nowrap;animation:fabIn .5s .3s both}
  .chat-bubble.hide{display:none}
  .chat-bubble-x{position:absolute;top:4px;right:7px;border:none;background:none;font-size:15px;
    color:var(--txt-mute);cursor:pointer;line-height:1;padding:0}
  .chat-fab{position:relative;inset:auto;display:inline-flex;align-items:center;gap:10px;
    width:auto;height:auto;flex:0 0 auto;background:var(--btn);border:none;border-radius:999px;
    padding:9px 16px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(26,26,23,.3);
    -webkit-tap-highlight-color:transparent;animation:fabIn .5s cubic-bezier(.2,1.4,.4,1) both;
    transition:transform .18s ease,background .25s ease}
  .chat-fab:hover{transform:translateY(-2px) scale(1.03);background:var(--btn-d)}
  .chat-fab:active{transform:scale(.98)}
  .chat-fab .fab-label{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;white-space:nowrap}
  .chat-fab .fab-cta{display:inline-flex;align-items:center;background:var(--paper);color:var(--ink);
    font-weight:800;font-size:12px;padding:6px 12px;border-radius:999px;white-space:nowrap}
  @media (prefers-reduced-motion:reduce){ .chat-fab,.chat-bubble{animation:none} }
  /* 좁은 화면에서도 말풍선은 띄운다 — 대표님 지시. 알약 여백만 줄인다 */
  @media (max-width:520px){
    .chat-fab{padding:8px 14px}
    .chat-fab .fab-label{font-size:15px}
    .chat-bubble{font-size:12.5px;max-width:none}
  }
  .chat-panel{position:fixed;right:16px;bottom:20px;z-index:46;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 40px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(40,25,10,.38);display:none;flex-direction:column;overflow:hidden}
  .chat-panel.on{display:flex}
  .chat-head{background:var(--ink);color:var(--paper);padding:15px 17px;display:flex;align-items:center;justify-content:space-between}
  .chat-head .ttl{font-family:var(--serif);font-size:15.5px;font-weight:500}
  .chat-head .sub{font-size:11.5px;color:rgba(246,241,231,.7);margin-top:3px}
  .chat-head .x{background:none;border:none;color:var(--paper);font-size:22px;cursor:pointer;line-height:1}
  .chat-body{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:9px;background:var(--paper)}
  .cmsg{max-width:84%;padding:11px 14px;border-radius:12px;font-size:14.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
  .cmsg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start}
  .cmsg.user{background:var(--btn);color:#fff;align-self:flex-end}
  .cmsg.wide{max-width:100%;background:none;border:none;padding:0;align-self:stretch}
  .cq-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
  .cq-row a,.cq-row button{display:block;text-align:center;padding:11px 6px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
  .chat-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
  .chat-panel.chatted .chat-quick{display:none}
  .chat-quick a{text-align:center;padding:10px 4px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;text-decoration:none;color:var(--txt-soft)}
  .chat-input{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line);background:#fff}
  .chat-input input{flex:1;padding:13px 14px;border:1px solid var(--line);border-radius:999px;font-size:16px;font-family:inherit}
  .chat-input input:focus{outline:none;border-color:var(--ink)}
  .chat-input button{background:var(--btn);color:#fff;border:none;border-radius:999px;padding:0 18px;font-weight:500;cursor:pointer;font-family:inherit;font-size:14px}

  @media (max-width:860px){
    .four,.rv-grid{grid-template-columns:1fr}
    .num-grid{grid-template-columns:1fr 1fr}
    .keep{grid-template-columns:1fr}
    .duo{gap:34px}
    .shot img,.shot video{height:260px}
  }
  @media (max-width:640px){
    body{font-size:16px}
    .bar-in{height:62px}
    .nav{top:62px}
    .nav-in a{padding:12px 14px;font-size:13.5px}
    .bar-brand .sb{display:none}
    .bar-cta a{padding:10px 15px;font-size:13.5px}
    .hero{min-height:auto}
    .hero-in{padding:56px 20px 52px}
    .cta{gap:12px}
    .btn{padding:16px 26px;font-size:15px;flex:1 1 100%;text-align:center}
    .tile .ph img{height:190px}
  }

  /* 고정바에 가리지 않게 — 브라우저에 맡긴다 */
  #book,#inquiry{scroll-margin-top:124px}
  @media (max-width:640px){ #book,#inquiry{scroll-margin-top:110px} }