/* =========================================================
     서울 24시 출장 열쇠 — 노장(老將) 타투 플래시 x 블랙 엠블럼 컨셉
     의도적 다크 단일 테마: 밤에 출동하는 열쇠업 특성상
     "블랙 바탕 + 올드스쿨 타투 플래시(굵은 라인, 금박, 리본, 로프 보더)"
     톤을 고정 아이덴티티로 채택. 라이트 테마 분기 없음.
     ========================================================= */

  @font-face { font-display: swap; }

  :root{
    --bg:        #0b0a0d;
    --bg-raised: #141310;
    --bg-card:   #1a1815;
    --bg-card-hi:#211e19;
    --olive:     #6b6a4f;
    --olive-dim: #46452f;
    --gold:      #c69a3d;
    --gold-hi:   #e9c46a;
    --gold-dim:  #8a6d2c;
    --red:       #7c2130;
    --red-hi:    #a53347;
    --cream:     #efe6d2;
    --text:      #efece6;
    --text-dim:  #a79f92;
    --text-faint:#726b60;
    --line:      rgba(198,154,61,0.24);
    --line-soft: rgba(239,230,210,0.09);
    --shadow: 0 20px 50px -20px rgba(0,0,0,0.7);
    --radius-sm: 2px;
    --radius-md: 4px;
    --font-display: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-body: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-flash: 'Rye', 'Black Han Sans', serif;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.7;
    letter-spacing:-0.01em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{ max-width:100%; display:block; }

  /* film-grain texture overlay */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:2;
    opacity:0.35;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }

  a{ color:inherit; }
  h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.025em; line-height:1.3;
            text-wrap:balance; word-break:keep-all; margin:0; }
  p, li, figcaption{ text-wrap:pretty; }
  body{ word-break:keep-all; overflow-wrap:anywhere; }
  p{ margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; cursor:pointer; }

  .wrap{ max-width:1180px; margin:0 auto; padding-inline:24px; }
  @media (max-width:640px){ .wrap{ padding-inline:18px; } }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-flash);
    font-size:0.82rem;
    letter-spacing:0.14em;
    color:var(--gold-hi);
    text-transform:uppercase;
  }
  .eyebrow::before,.eyebrow::after{ content:"—"; color:var(--gold-dim); }

  .section-head{ max-width:640px; margin-bottom:44px; }
  .section-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:10px; color:var(--cream); }
  .section-head p{ color:var(--text-dim); margin-top:14px; font-size:1.02rem; }

  section{ position:relative; padding:88px 0; border-top:1px solid var(--line-soft); }
  @media (max-width:640px){ section{ padding:64px 0; } }

  /* ---------- barbed-wire divider (echoes the logo's wire ring) ---------- */
  .rope-rule{
    height:16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cline x1='0' y1='8' x2='44' y2='8' stroke='%23c69a3d' stroke-width='1.6'/%3E%3Cg stroke='%23c69a3d' stroke-width='1.6' stroke-linecap='round'%3E%3Cline x1='15' y1='1' x2='22' y2='15'/%3E%3Cline x1='22' y1='1' x2='15' y2='15'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-position:center;
    opacity:0.6;
  }

  /* ---------- brand logo art (uploaded emblem, chroma-keyed transparent) ---------- */
  .logo-badge{ position:relative; flex:none; }
  .logo-badge img{ width:100%; height:100%; object-fit:contain; }
  .logo-word{ display:block; height:auto; margin-inline:auto; }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(11,10,13,0.86);
    backdrop-filter:blur(10px) saturate(1.1);
    border-bottom:1px solid var(--line);
    transition:box-shadow .3s ease;
  }
  header.scrolled{ box-shadow:0 10px 30px -18px rgba(0,0,0,0.8); }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand .emblem{ width:42px; height:42px; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.15; }
  .brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--cream); letter-spacing:0.01em; }
  .brand-text .tag{ font-family:var(--font-flash); font-size:0.66rem; letter-spacing:0.12em; color:var(--gold); text-transform:uppercase; }

  .call-pill{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--gold); color:#1a1408;
    padding:10px 18px 10px 14px;
    border-radius:999px;
    font-family:var(--font-display); font-weight:700;
    font-size:0.95rem;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 8px 22px -8px rgba(198,154,61,0.55);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    position:relative;
    overflow:hidden;
  }
  .call-pill:hover, .call-pill:focus-visible{ transform:translateY(-1px); background:var(--gold-hi); box-shadow:0 10px 26px -8px rgba(233,196,106,0.65); }
  .call-pill .ico{ width:18px; height:18px; }
  .call-pill::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
    transform:translateX(-120%);
  }
  .call-pill:hover::after{ transform:translateX(120%); transition:transform .7s ease; }
  header .call-pill{ padding:9px 16px 9px 12px; font-size:0.86rem; }
  @media (max-width:560px){
    header .call-pill{ padding:8px 14px 8px 11px; font-size:0.82rem; gap:6px; }
  }
  @media (max-width:360px){
    header .brand-text .tag{ display:none; }
    header .call-pill{ padding:7px 11px 7px 9px; font-size:0.74rem; gap:5px; flex:none; }
    header .call-pill .ico{ width:14px; height:14px; }
    .brand-text .name{ font-size:0.82rem; }
    .brand-text .tag{ font-size:0.44rem; }
    .brand .emblem{ width:30px; height:30px; }
    .header-inner{ gap:6px; }
    header .call-pill .ico{ width:15px; height:15px; }
    .brand-text .name{ font-size:0.92rem; }
    .brand-text .tag{ font-size:0.5rem; letter-spacing:0.06em; white-space:nowrap; }
    .brand .emblem{ width:34px; height:34px; }
    .header-inner{ gap:8px; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:74px 0 90px;
    border-top:none;
    background:
      radial-gradient(900px 480px at 82% -10%, rgba(198,154,61,0.16), transparent 60%),
      linear-gradient(180deg, #0d0b10 0%, var(--bg) 70%);
    overflow:hidden;
  }
  .hero-spotlight{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(420px 420px at var(--sx,50%) var(--sy,20%), rgba(233,196,106,0.14), transparent 65%);
    opacity:0;
    transition:opacity .4s ease;
  }
  @media (hover:hover) and (pointer:fine){ .hero-spotlight.active{ opacity:1; } }

  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:52px; align-items:center;
  }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }

  .hero h1{
    font-size:clamp(2.3rem,5.2vw,3.6rem);
    color:var(--cream);
    margin-top:16px;
    line-height:1.18;
  }
  .hero h1 em{ font-style:normal; color:var(--gold-hi); }
  .hero .lede{
    margin-top:20px; max-width:52ch;
    color:var(--text-dim); font-size:1.08rem;
  }

  .hero-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:32px; }
  .btn-unlock{
    --lockrot:0deg;
    display:inline-flex; align-items:center; gap:12px;
    background:var(--gold); color:#1a1408;
    font-family:var(--font-display); font-weight:700;
    font-size:1.15rem;
    padding:16px 26px;
    border:none; border-radius:6px;
    text-decoration:none;
    position:relative; overflow:hidden;
    box-shadow:0 16px 34px -14px rgba(198,154,61,0.7);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-unlock:hover, .btn-unlock:focus-visible{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(233,196,106,0.8); }
  .btn-unlock:hover .shackle, .btn-unlock:focus-visible .shackle{ transform:translate(0,-3px) rotate(-18deg); }
  .btn-unlock .shackle{ transform-origin:20% 90%; transition:transform .35s cubic-bezier(.34,1.6,.64,1); }
  .btn-lines{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; }
  .btn-lead{ font-family:var(--font-body); font-weight:700; font-size:0.78rem; letter-spacing:0.02em; opacity:0.72; }
  .btn-num{ font-size:1.42rem; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
  .btn-unlock::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
    transform:translateX(-120%);
  }
  .btn-unlock:hover::after{ transform:translateX(120%); transition:transform .8s ease; }

  .hero-sub-cta{ display:flex; flex-direction:column; gap:2px; }
  .hero-sub-cta .lead{ font-family:var(--font-flash); font-size:0.78rem; letter-spacing:0.1em; color:var(--gold); text-transform:uppercase; }
  .hero-sub-cta .num{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--cream); font-variant-numeric:tabular-nums; }

  .trust-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
  .trust-chip{
    display:inline-flex; align-items:center; gap:7px;
    border:1px solid var(--line); border-radius:999px;
    padding:8px 14px; font-size:0.86rem; color:var(--text-dim);
    background:rgba(198,154,61,0.05);
  }
  .trust-chip .ico{ width:14px; height:14px; color:var(--gold); flex:none; }

  /* 모바일: 급한 사용자를 위해 첫 화면을 전화 중심으로 압축 */
  @media (max-width:640px){
    .hero{ padding:26px 0 44px; }
    .hero .eyebrow{ font-size:0.68rem; letter-spacing:0.1em; }
    .hero h1{ font-size:2.05rem; margin-top:10px; line-height:1.22; }
    .hero .lede{ margin-top:12px; font-size:0.95rem; }
    .hero .lede .desktop-only{ display:none; }
    .hero-cta-row{ margin-top:20px; gap:12px; }
    .btn-unlock{ width:100%; justify-content:center; padding:15px 20px; }
    .btn-num{ font-size:1.5rem; }
    .trust-chips{ margin-top:18px; gap:7px; }
    .trust-chip{ padding:7px 11px; font-size:0.79rem; }
    .hero-grid{ gap:22px; }
    .emblem-big{ width:min(170px,46%); }
    .emblem-wrap::before{ inset:14% 20%; }
  }

  /* emblem badge — real logo art, tilted in 3D as the page scrolls */
  .emblem-wrap{
    position:relative; display:flex; justify-content:center;
    perspective:1200px;
  }
  .emblem-wrap::before{
    content:"";
    position:absolute; inset:8% 12%;
    background:radial-gradient(circle, rgba(198,154,61,0.28), transparent 70%);
    filter:blur(20px);
    z-index:-1;
    animation:emblem-breathe 5s ease-in-out infinite;
  }
  @keyframes emblem-breathe{ 0%,100%{ opacity:0.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
  .emblem-big{
    width:min(340px,78%); aspect-ratio:1/1;
    filter:drop-shadow(0 24px 40px rgba(0,0,0,0.6));
    transform-style:preserve-3d;
    will-change:transform;
  }

  /* ---------- marquee ---------- */
  .marquee-band{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--bg-raised);
    padding-block:14px;
    overflow:hidden;
  }
  .marquee-track{ display:flex; width:max-content; gap:0; animation:scroll-left 48s linear infinite; }
  .marquee-band:hover .marquee-track{ animation-play-state:paused; }
  @keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .marquee-item{
    display:flex; align-items:center; gap:10px;
    padding-inline:22px; white-space:nowrap;
    font-family:var(--font-display); font-weight:700; font-size:0.98rem; color:var(--text-dim);
    border-right:1px solid var(--line-soft);
  }
  .marquee-item b{ color:var(--gold-hi); font-weight:400; }

  /* ---------- scroll-triggered 3D reveal ----------
     Default state = fully visible, correctly placed (safe with no JS).
     JS adds .tilt-ready (pre-tilted but still opaque) then flips .in-view
     as each card crosses into the viewport — a tilt-in, never a fade-from-blank. */
  .tilt-in{
    transform:perspective(900px) rotateX(0) translateY(0) scale(1);
    transition:transform .7s cubic-bezier(.22,.85,.32,1);
    transform-origin:50% 100%;
  }
  .tilt-in.tilt-ready{ transform:perspective(900px) rotateX(14deg) translateY(28px) scale(0.97); }
  .tilt-in.tilt-ready.in-view{ transform:perspective(900px) rotateX(0) translateY(0) scale(1); }

  /* ---------- services ---------- */
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
  @media (max-width:900px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }
  .service-card{
    background:var(--bg-card);
    padding:30px 26px;
    display:flex; flex-direction:column; gap:14px;
    transition:background .2s ease, transform .7s cubic-bezier(.22,.85,.32,1);
  }
  .service-card:hover{ background:var(--bg-card-hi); }
  .service-card .ico{
    width:44px; height:44px; color:var(--gold);
    border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .service-card .ico svg{ width:22px; height:22px; }
  .service-card h3{ font-size:1.15rem; color:var(--cream); font-weight:700; font-family:var(--font-body); }
  .service-card p{ color:var(--text-dim); font-size:0.94rem; }


  /* ---------- 가격 안내 ---------- */
  .price-note{
    display:flex; align-items:flex-start; gap:14px;
    border:1px solid var(--line); border-left:3px solid var(--gold);
    background:rgba(198,154,61,0.06);
    padding:18px 20px; margin-bottom:26px;
  }
  .price-note .ico{ width:22px; height:22px; color:var(--gold); flex:none; margin-top:2px; }
  .price-note p{ color:var(--text-dim); font-size:0.93rem; line-height:1.7; max-width:70ch; }
  .price-note strong{ color:var(--cream); font-weight:700; }

  .price-banner{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--gold); color:#1a1408;
    font-family:var(--font-display); font-weight:700; font-size:1.05rem;
    padding:14px 20px; margin-bottom:20px; text-align:center;
  }
  .price-banner svg{ width:16px; height:16px; flex:none; }

  .price-list{ border-top:1px solid var(--line-soft); }
  .price-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 4px;
    border-bottom:1px solid var(--line-soft);
    transition:background .2s ease;
  }
  .price-row:hover{ background:rgba(198,154,61,0.04); }
  .price-row .item{ color:var(--text); font-size:0.98rem; font-weight:500; }
  .price-row .tag{
    flex:none; white-space:nowrap;
    font-size:0.82rem; color:var(--gold-hi);
    border:1px solid var(--line); border-radius:999px;
    padding:5px 13px;
  }
  @media (max-width:560px){
    .price-row{ flex-direction:column; align-items:flex-start; gap:7px; padding:14px 4px; }
    .price-row .item{ font-size:0.94rem; }
  }

  /* ---------- process (scrollytelling) ---------- */
  .process-list{ position:relative; display:flex; flex-direction:column; padding-left:8px; }
  .process-rail{
    position:absolute; left:8px; top:8px; bottom:8px; width:2px;
    background:var(--line-soft);
  }
  .process-rail-fill{
    position:absolute; left:0; top:0; width:100%; height:0%;
    background:linear-gradient(var(--gold-dim), var(--gold-hi));
    transition:height .1s linear;
  }
  .process-item{
    display:grid; grid-template-columns:64px 1fr; gap:20px;
    padding-block:26px; padding-left:22px;
    border-top:1px solid var(--line-soft);
    position:relative;
    transition:transform .5s cubic-bezier(.22,.85,.32,1);
  }
  .process-item:first-child{ border-top:none; }
  .process-num{
    font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--gold-dim);
    font-variant-numeric:tabular-nums;
    transition:color .4s ease, transform .4s cubic-bezier(.22,.85,.32,1);
    display:inline-block;
  }
  .process-item:hover .process-num, .process-item.is-active .process-num{ color:var(--gold-hi); transform:scale(1.12); }
  .process-item.is-active{ transform:translateX(6px); }
  .process-body h3{ font-size:1.08rem; color:var(--cream); font-weight:700; font-family:var(--font-body); }
  .process-body p{ margin-top:6px; color:var(--text-dim); font-size:0.95rem; max-width:60ch; }

  /* ---------- areas ---------- */
  .area-search{ display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
  .area-search input{
    flex:1; min-width:220px;
    background:var(--bg-card); border:1px solid var(--line);
    color:var(--text); padding:13px 16px; border-radius:4px;
    font-family:var(--font-body); font-size:0.98rem;
  }
  .area-search input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
  .area-search button{
    background:transparent; border:1px solid var(--line); color:var(--text-dim);
    padding:12px 18px; border-radius:4px; font-size:0.9rem;
    transition:border-color .2s ease, color .2s ease;
  }
  .area-search button:hover{ border-color:var(--gold); color:var(--gold-hi); }

  .gu-quickgrid{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
  .gu-quick{
    font-size:0.84rem; color:var(--text-dim);
    border:1px solid var(--line-soft); background:var(--bg-card);
    padding:7px 13px; border-radius:999px;
    transition:all .15s ease;
  }
  .gu-quick:hover, .gu-quick.is-base{ border-color:var(--gold); color:var(--gold-hi); }
  .gu-quick.is-base{ background:rgba(198,154,61,0.1); }

  .gu-panel{
    border:1px solid var(--line-soft);
    border-radius:4px;
    margin-bottom:10px;
    background:var(--bg-card);
  }
  .gu-panel[open]{ border-color:var(--line); }
  .gu-panel summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 20px;
    font-family:var(--font-display); font-weight:700; color:var(--cream); font-size:1.05rem;
  }
  .gu-panel summary::-webkit-details-marker{ display:none; }
  .gu-panel summary .meta{ display:flex; align-items:center; gap:10px; }
  .gu-panel summary .base-badge{
    font-family:var(--font-flash); font-size:0.62rem; letter-spacing:0.08em;
    color:#1a1408; background:var(--gold); padding:3px 8px; border-radius:999px; text-transform:uppercase;
  }
  .gu-panel summary .count{ font-family:var(--font-body); font-size:0.82rem; color:var(--text-faint); font-weight:500; }
  .gu-panel summary .chev{ width:16px; height:16px; color:var(--gold); transition:transform .25s ease; flex:none; }
  .gu-panel[open] summary .chev{ transform:rotate(180deg); }
  .gu-note{
    margin:0 20px 14px; padding-left:12px;
    border-left:2px solid var(--line);
    color:var(--text-dim); font-size:0.9rem; line-height:1.65;
    max-width:78ch;
  }
  .dong-list{ display:flex; flex-wrap:wrap; gap:8px; padding:2px 20px 20px; }
  .dong-chip{
    font-size:0.85rem; color:var(--text-dim);
    border:1px solid var(--line-soft); border-radius:4px;
    padding:6px 11px;
  }
  .dong-chip[hidden]{ display:none; }
  .dong-chip.is-match{ border-color:var(--gold); color:var(--gold-hi); background:rgba(198,154,61,0.08); }
  .area-empty{ display:none; color:var(--text-dim); padding:30px 0; text-align:center; font-size:0.95rem; }
  .area-empty.show{ display:block; }

  /* ---------- cases (실제 검색 문의 유형) ---------- */
  .query-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media (max-width:900px){ .query-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .query-grid{ grid-template-columns:1fr; } }
  .query-card{
    background:var(--bg-card);
    border:1px solid var(--line-soft);
    border-left:2px solid var(--gold-dim);
    padding:20px 20px 22px;
    display:flex; flex-direction:column; gap:9px;
    transition:border-color .2s ease, background .2s ease;
  }
  .query-card:hover{ background:var(--bg-card-hi); border-left-color:var(--gold-hi); }
  .query-q{ color:var(--cream); font-weight:700; font-size:0.99rem; line-height:1.5;
    text-wrap:pretty; }
  .query-a{ color:var(--text-dim); font-size:0.9rem; line-height:1.65; }

  /* ---------- trust ---------- */
  .trust-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
  @media (max-width:820px){ .trust-wrap{ grid-template-columns:1fr; gap:36px; } }
  .trust-list{ display:flex; flex-direction:column; gap:22px; }
  .trust-row{ display:flex; gap:16px; }
  .trust-row .ico{ width:28px; height:28px; color:var(--gold); flex:none; margin-top:2px; }
  .trust-row h3{ font-size:1rem; color:var(--cream); font-family:var(--font-body); font-weight:700; }
  .trust-row p{ color:var(--text-dim); font-size:0.92rem; margin-top:4px; }
  .brand-strip{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;
  }
  .brand-tag{
    font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:var(--cream);
    border:1px solid var(--line); padding:9px 16px; border-radius:4px;
    background:var(--bg-card);
  }
  .stamp-card{
    border:1px dashed var(--line); border-radius:6px;
    padding:34px 30px; text-align:center; position:relative;
    background:radial-gradient(300px 200px at 50% 0%, rgba(198,154,61,0.08), transparent);
  }
  .stamp-card .stamp-emblem{ width:96px; height:96px; margin:0 auto 18px; color:var(--gold); }
  .stamp-card h3{ font-family:var(--font-flash); font-size:1.3rem; color:var(--gold-hi); letter-spacing:0.04em; }
  .stamp-card p{ color:var(--text-dim); margin-top:10px; font-size:0.92rem; }


  /* ---------- 작업 갤러리 ---------- */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  }
  @media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:640px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } }
  .shot{
    position:relative; margin:0; overflow:hidden;
    border:1px solid var(--line-soft); background:var(--bg-card);
    cursor:zoom-in;
  }
  .shot img{
    width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
    display:block; transition:transform .5s cubic-bezier(.22,.85,.32,1), filter .3s ease;
    filter:saturate(0.92) contrast(1.03);
  }
  .shot:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1.05); }
  .shot figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:26px 12px 10px;
    font-size:0.8rem; line-height:1.45; color:var(--cream);
    background:linear-gradient(transparent, rgba(8,7,9,0.92));
  }
  @media (max-width:640px){ .shot figcaption{ font-size:0.72rem; padding:20px 8px 8px; } }

  .lightbox{
    position:fixed; inset:0; z-index:80;
    display:none; align-items:center; justify-content:center;
    background:rgba(6,5,7,0.94); padding:24px;
  }
  .lightbox.open{ display:flex; }
  .lightbox img{ max-width:min(920px,92vw); max-height:82vh; width:auto; border:1px solid var(--line); }
  .lightbox-cap{
    position:absolute; left:0; right:0; bottom:26px; text-align:center;
    color:var(--text-dim); font-size:0.9rem; padding-inline:20px;
  }
  .lightbox-close{
    position:absolute; top:18px; right:20px;
    background:none; border:1px solid var(--line); color:var(--cream);
    width:40px; height:40px; border-radius:50%; font-size:1.1rem; line-height:1;
  }
  .lightbox-close:hover{ border-color:var(--gold); color:var(--gold-hi); }

  /* ---------- faq ---------- */
  .faq-item{ border-top:1px solid var(--line-soft); }
  .faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
  .faq-item summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 4px; font-size:1.05rem; color:var(--cream); font-weight:700;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .plus{ width:20px; height:20px; color:var(--gold); flex:none; transition:transform .25s ease; }
  .faq-item[open] summary .plus{ transform:rotate(135deg); }
  .faq-item .a{ padding:0 4px 24px; color:var(--text-dim); font-size:0.96rem; max-width:70ch; }

  /* ---------- 사장님 Q&A (재미 섹션 — FAQPage 스키마에는 포함하지 않음) ---------- */
  .qna-list{
    border:1px solid var(--line-soft);
    border-top:2px solid var(--gold-dim);
    background:var(--bg-card);
  }
  .qna-row{
    display:grid; grid-template-columns:26px 1fr; gap:6px 14px;
    padding:22px 24px;
    border-top:1px solid var(--line-soft);
  }
  .qna-row:first-child{ border-top:none; }
  .qna-mark{
    font-family:var(--font-flash); font-size:0.9rem; line-height:1.5;
    color:var(--gold); text-align:center;
  }
  .qna-mark.a{ color:var(--text-faint); }
  .qna-q{ color:var(--cream); font-weight:700; font-size:1.02rem; }
  .qna-a{ color:var(--text-dim); font-size:0.97rem; }
  .qna-foot{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:20px; color:var(--text-faint); font-size:0.85rem;
  }
  .qna-foot svg{ width:12px; height:12px; color:var(--gold-dim); }
  @media (max-width:520px){
    .qna-row{ grid-template-columns:20px 1fr; padding:18px 16px; gap:6px 10px; }
  }

  .gu-all{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft);
    color:var(--gold-hi); font-size:0.86rem; line-height:1.7; }

  /* ---------- review reward ---------- */
  .review-band{ background:var(--bg-raised); }
  .review-card{
    max-width:640px; margin:0 auto; text-align:center;
    border:1px solid var(--line); border-radius:var(--radius-md);
    background:linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
    padding:38px 26px 32px; box-shadow:var(--shadow); position:relative;
  }
  .review-card::before{
    content:""; position:absolute; inset:7px; border:1px solid var(--line-soft);
    border-radius:2px; pointer-events:none;
  }
  .review-coin{
    display:inline-flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:50%; margin-bottom:16px;
    border:2px solid var(--gold); color:var(--gold);
    font-family:var(--font-flash); font-size:1.05rem; letter-spacing:0.02em;
  }
  .review-card h2{
    font-size:clamp(1.35rem,3.2vw,1.9rem); color:var(--cream);
  }
  .review-card h2 em{ font-style:normal; color:var(--gold-hi); }
  .review-card > p{ color:var(--text-dim); margin-top:12px; font-size:0.95rem; line-height:1.7; }

  .review-pick{ margin-top:26px; }
  .review-pick > summary{
    list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
    padding:16px 30px; border-radius:var(--radius-sm);
    background:linear-gradient(180deg, var(--gold-hi), var(--gold));
    color:#1a1408; font-weight:700; font-size:1.05rem;
    border:1px solid var(--gold-dim); transition:filter .2s ease;
  }
  .review-pick > summary::-webkit-details-marker{ display:none; }
  .review-pick > summary:hover{ filter:brightness(1.07); }
  .review-pick > summary .chev{ width:16px; height:16px; transition:transform .25s ease; }
  .review-pick[open] > summary .chev{ transform:rotate(180deg); }

  .review-choices{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    margin-top:18px; text-align:left;
  }
  .review-choices a{
    display:flex; align-items:center; gap:12px; text-decoration:none;
    padding:16px 18px; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
    background:var(--bg); color:var(--text); transition:border-color .2s ease, background .2s ease;
  }
  .review-choices a:hover{ border-color:var(--gold); background:var(--bg-card-hi); }
  .review-choices .rv-mark{
    width:34px; height:34px; flex:0 0 34px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.05rem; color:#fff;
  }
  .review-choices .rv-naver{ background:#03c75a; }
  .review-choices .rv-google{ background:#fff; color:#4285f4; }
  .review-choices .rv-txt strong{ display:block; font-size:0.98rem; color:var(--cream); font-weight:600; }
  .review-choices .rv-txt span{ display:block; font-size:0.78rem; color:var(--text-faint); margin-top:2px; }
  .review-note{ margin-top:16px; font-size:0.8rem; color:var(--text-faint); line-height:1.7; }
  @media (max-width:520px){
    .review-card{ padding:30px 18px 26px; }
    .review-pick > summary{ width:100%; justify-content:center; padding:17px 20px; }
    .review-choices{ grid-template-columns:1fr; }
  }

  /* ---------- contact / footer ---------- */
  .contact-band{
    background:linear-gradient(180deg, var(--bg-raised), var(--bg));
    text-align:center;
  }
  .contact-band .logo-word{ width:min(320px,84%); margin:0 auto 26px; filter:drop-shadow(0 14px 30px rgba(0,0,0,0.55)); }
  .contact-band h2{ font-size:clamp(1.8rem,4vw,2.7rem); color:var(--cream); }
  .contact-band p{ color:var(--text-dim); margin-top:14px; }
  .contact-band .btn-unlock{ margin-top:30px; font-size:1.3rem; padding:20px 36px; }

  footer{ border-top:1px solid var(--line-soft); padding:36px 0 calc(36px + 64px); background:var(--bg); }
  .foot-area{
    display:flex; flex-direction:column; gap:12px;
    padding-bottom:26px; margin-bottom:26px;
    border-bottom:1px solid var(--line-soft);
    color:var(--text-faint); font-size:0.86rem; line-height:1.75; max-width:92ch;
  }
  .foot-area strong{ color:var(--text-dim); font-weight:700; }
  .foot-legal{ padding-top:6px; border-top:1px dashed var(--line-soft); color:var(--text-faint); }
  .foot-legal a{ text-decoration:none; }
  .foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; font-size:0.85rem; color:var(--text-faint); }
  .foot-grid a{ text-decoration:none; }
  .foot-grid strong{ color:var(--text-dim); }

  /* ---------- floating call bar ---------- */
  .call-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--gold);
    box-shadow:0 -10px 30px -10px rgba(0,0,0,0.5);
  }
  .call-bar a{
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:15px 16px; text-decoration:none; white-space:nowrap;
    font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#1a1408;
  }
  @media (max-width:360px){
    .call-bar a{ gap:8px; padding:14px 10px; font-size:0.93rem; }
    header .brand-text .name{ white-space:nowrap; font-size:0.78rem; }
  }
  .call-bar .pulse-dot{
    width:10px; height:10px; border-radius:50%; background:#1a1408; flex:none;
    animation:pulse 1.8s ease-out infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(26,20,8,0.5); }
    70%{ box-shadow:0 0 0 12px rgba(26,20,8,0); }
    100%{ box-shadow:0 0 0 0 rgba(26,20,8,0); }
  }
  body{ padding-bottom:58px; }
  @media (min-width:860px){
    body{ padding-bottom:0; }
    .call-bar{ display:none; }
  }

  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .copy-toast{
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(10px);
    background:var(--cream); color:#1a1408; font-size:0.85rem; font-weight:700;
    padding:10px 18px; border-radius:999px; z-index:60;
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  .copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  @media (min-width:860px){ .copy-toast{ bottom:24px; } }