/* ============================================================
   십분홈피 — 생성 사이트 공용 CSS v2
   테마 변수(:root 주입) × 스킨 클래스(body.skin-*)로
   사이트마다 완전히 다른 인상을 만든다.
   필수 변수: --bg --tint --paper --ink --soft --line
     --brand --brand-deep --accent --on-brand --radius
   선택: --foot-bg --foot-ink --disp(디스플레이 폰트)
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Pretendard,-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.66;-webkit-font-smoothing:antialiased;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:880px}
h1,h2,h3{line-height:1.28;font-weight:800;letter-spacing:-.02em}
.mt{margin-top:26px}

/* ---------- 이미지 박스 + 김(스팀) ---------- */
.imgbox{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--tint)}
.imgbox img{width:100%;height:100%;object-fit:cover;display:block}
.steam-box{overflow:visible}
.steam-box .imgbox,{overflow:hidden}
.wisp{position:absolute;bottom:62%;width:16px;height:52px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
  filter:blur(6px);opacity:0;animation:steam 3.4s ease-in-out infinite}
.wisp.w1{left:42%;animation-delay:0s}
.wisp.w2{left:52%;animation-delay:1.1s;height:64px}
.wisp.w3{left:61%;animation-delay:2.2s;height:44px}
@keyframes steam{
  0%{opacity:0;transform:translateY(16px) scaleX(.7)}
  25%{opacity:.85}
  100%{opacity:0;transform:translateY(-58px) translateX(8px) scaleX(1.4)}
}

/* ---------- 상단바 ---------- */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.18rem;letter-spacing:-.02em}
.brand-ico{width:24px;height:24px;color:var(--brand)}
.topnav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;padding:8px 13px;border-radius:9px;font-size:.94rem;font-weight:600;color:var(--soft)}
.topnav a:hover,.topnav a.on{background:var(--tint);color:var(--ink)}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:12px;
  font-weight:800;font-size:.98rem;transition:transform .15s,box-shadow .15s,opacity .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:10px}
.btn-lg{padding:16px 32px;font-size:1.06rem}
.btn-solid{background:var(--brand);color:var(--on-brand);box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(3px)}
.btn-white{background:#fff;color:#1c1c1c}
.btn-gold{background:var(--accent);color:#241a05}
.btn-line{border:1.5px solid var(--line);color:var(--ink);background:var(--paper)}
.btn-line:hover{border-color:var(--brand);color:var(--brand-deep)}

/* ---------- 포토 히어로 (풀블리드 + Ken Burns) ---------- */
.photo-hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.photo-hero.ph-short{min-height:62vh}
.ph-bg{position:absolute;inset:0}
.ph-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.12) translate(-1.5%,1.5%)}}
.ph-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.42),rgba(8,8,10,.28) 45%,rgba(8,8,10,.62))}
.ph-inner{position:relative;z-index:2;padding:110px 24px}
.photo-hero .kicker{display:inline-block;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);
  backdrop-filter:blur(4px);padding:8px 17px;border-radius:30px;font-size:.9rem;font-weight:700;margin-bottom:22px;letter-spacing:.04em}
.photo-hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);text-shadow:0 3px 24px rgba(0,0,0,.35)}
.ph-desc{margin-top:18px;font-size:1.12rem;opacity:.95;max-width:36em;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.ph-btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.ph-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;font-size:.8rem;
  letter-spacing:.14em;opacity:.75;animation:bobY 2.2s ease-in-out infinite}
@keyframes bobY{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- 스플릿 히어로 (텍스트 ↔ 사진 반반) ---------- */
.split-hero{background:var(--bg);padding:72px 0 84px;overflow:hidden}
.sh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split-hero.rev .sh-body{order:2}
.split-hero .kicker{display:inline-block;color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 12%,var(--bg));
  padding:7px 15px;border-radius:20px;font-size:.84rem;font-weight:800;margin-bottom:20px;letter-spacing:.05em}
.split-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);font-family:var(--disp,inherit)}
.sh-desc{margin-top:16px;font-size:1.08rem;color:var(--soft);max-width:34em}
.sh-points{margin-top:26px;display:grid;gap:11px}
.sh-points li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:.95rem}
.sh-media{position:relative}
.sh-photo{aspect-ratio:4/3.4;box-shadow:0 30px 60px color-mix(in srgb,var(--ink) 16%,transparent)}
.sh-tag{position:absolute;left:-18px;bottom:26px;background:var(--paper);border:1px solid var(--line);
  border-radius:calc(var(--radius)*.9);padding:14px 20px;box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 14%,transparent)}
.sh-tag b{display:block;font-size:1.4rem;color:var(--brand-deep);font-family:var(--disp,inherit)}
.sh-tag span{font-size:.82rem;color:var(--soft);font-weight:700}

/* ---------- 콜라주 히어로 (사진 모자이크) ---------- */
.co-hero{background:var(--bg);padding:64px 0 84px;overflow:hidden}
.co-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
.co-hero .kicker{display:inline-block;color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 12%,var(--bg));
  padding:7px 15px;border-radius:20px;font-size:.84rem;font-weight:800;margin-bottom:20px;letter-spacing:.05em}
.co-hero h1{font-size:clamp(2.05rem,4.4vw,3.15rem);font-family:var(--disp,inherit)}
.co-media{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:14px;min-height:440px}
.co-img.co-a{grid-row:1/3;box-shadow:0 24px 50px color-mix(in srgb,var(--ink) 15%,transparent)}
.co-img{border-radius:calc(var(--radius)*1.1)}
.co-img img{height:100%}

/* ---------- 액자형 히어로 (프레임 사진) ---------- */
.boxed-hero{background:var(--bg);padding:26px 0 0}
.bx-frame{position:relative;border-radius:calc(var(--radius)*1.8);overflow:hidden;min-height:74vh;
  display:flex;align-items:flex-end;color:#fff}
.bx-bg{position:absolute;inset:0}
.bx-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate}
.bx-shade{position:absolute;inset:0;background:linear-gradient(200deg,rgba(8,10,8,.05) 30%,rgba(8,10,8,.62) 82%)}
.bx-inner{position:relative;z-index:2;padding:56px 54px}
.boxed-hero .kicker{display:inline-block;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  backdrop-filter:blur(4px);padding:7px 15px;border-radius:30px;font-size:.85rem;font-weight:700;margin-bottom:18px}
.boxed-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);text-shadow:0 3px 22px rgba(0,0,0,.35);font-family:var(--disp,inherit)}
.boxed-hero .ph-desc{font-size:1.05rem}

/* ---------- 타이포 히어로 (큰 활자 + 이미지 밴드) ---------- */
.min-hero{background:var(--bg);padding:86px 0 0;text-align:center;overflow:hidden}
.min-hero .kicker{display:inline-block;color:var(--brand-deep);font-size:.82rem;font-weight:800;
  letter-spacing:.28em;margin-bottom:22px}
.min-hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);font-family:var(--disp,inherit);letter-spacing:-.025em}
.min-hero .sh-desc{margin:20px auto 0;max-width:36em}
.min-hero .ph-btns{justify-content:center}
.mh-band{margin-top:64px;height:46vh;min-height:300px}
.mh-band img{width:100%;height:100%;object-fit:cover}
.min-hero.mh-left{text-align:left}
.min-hero.mh-left .sh-desc{margin-left:0}
.min-hero.mh-left .ph-btns{justify-content:flex-start}
.min-hero.mh-left h1{max-width:14em}

/* ---------- 카드 히어로 (사진 위 떠 있는 카드) ---------- */
.card-hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.ch-bg{position:absolute;inset:0}
.ch-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate}
.ch-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,12,16,.34),rgba(10,12,16,.08) 60%)}
.ch-wrap{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:56px}
.ch-card{max-width:520px;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(6px);
  border-radius:calc(var(--radius)*1.5);padding:44px 42px;box-shadow:0 34px 80px rgba(0,0,0,.3)}
.ch-card .kicker{display:inline-block;color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 12%,var(--paper));
  padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:800;margin-bottom:16px}
.ch-card h1{font-size:clamp(1.8rem,3.6vw,2.5rem);font-family:var(--disp,inherit)}
.ch-card .sh-desc{font-size:1rem;margin-top:14px}
.ch-card .ph-btns{margin-top:26px}

/* ---------- 마키(흐르는 띠) ---------- */
.marquee{overflow:hidden;background:var(--brand-deep);color:var(--on-brand);padding:16px 0;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:28px;animation:mq 26s linear infinite;will-change:transform}
.mq-track span{font-weight:900;font-size:1.02rem;letter-spacing:.12em}
.mq-track i{font-style:normal;opacity:.55;font-size:.8rem}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- FAQ 아코디언 ---------- */
.faqs{display:grid;gap:12px}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius)*.9);overflow:hidden}
.faq summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:19px 22px;
  font-weight:800;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq-x{position:relative;flex:0 0 18px;height:18px}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:50%;top:50%;background:var(--brand-deep);
  transform:translate(-50%,-50%);transition:transform .2s}
.faq-x::before{width:14px;height:2.5px}
.faq-x::after{width:2.5px;height:14px}
.faq[open] .faq-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq>p{padding:0 22px 20px;color:var(--soft);font-size:.95rem}
.faq[open] summary{color:var(--brand-deep)}

/* 내부 페이지 히어로 */
.page-hero{position:relative;min-height:320px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.page-hero .ph-inner{padding:60px 24px 44px}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.crumb{font-size:.86rem;opacity:.85;margin-bottom:10px}
.crumb a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 신뢰지표 ---------- */
.stats{background:var(--paper);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:32px 24px}
.stat{text-align:center;padding:10px 6px}
.stat-num{font-size:2.05rem;font-weight:900;color:var(--brand-deep);letter-spacing:-.03em;font-family:var(--disp,inherit)}
.stat-num span{font-size:1rem;font-weight:700;margin-left:2px;color:var(--soft)}
.stat-label{font-size:.9rem;color:var(--soft);margin-top:2px}

/* ---------- 공통 섹션 ---------- */
.sec{padding:92px 0}
.sec.tint{background:var(--tint)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 50px}
.eyebrow{display:inline-block;color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 13%,var(--bg));
  font-size:.8rem;font-weight:800;letter-spacing:.1em;padding:6px 14px;border-radius:20px;margin-bottom:14px}
.sec-head h2{font-size:clamp(1.55rem,3.2vw,2.25rem);font-family:var(--disp,inherit)}
.sec-head p{color:var(--soft);margin-top:12px}

/* ---------- 스플릿 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-photo{aspect-ratio:4/3;box-shadow:0 24px 50px color-mix(in srgb,var(--ink) 14%,transparent)}
.split-art{display:flex;justify-content:center;align-items:center;background:var(--tint);
  border-radius:calc(var(--radius)*1.4);min-height:320px;border:1px solid var(--line)}
.tint .split-art{background:var(--paper)}
.split-svg{width:44%;max-width:190px;color:var(--brand)}
.split-body h2{font-size:clamp(1.45rem,2.9vw,2rem);margin-bottom:16px;font-family:var(--disp,inherit)}
.split-body .eyebrow{margin-bottom:16px}
.lead{font-size:1.07rem;font-weight:600;margin-bottom:12px}
.split-body p{color:var(--soft)}
.split-body .lead{color:var(--ink)}
.bullets{margin-top:22px;display:grid;gap:13px}
.bullets li{display:flex;gap:11px;align-items:flex-start}
.chk{flex:0 0 22px;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--brand);color:var(--on-brand)}
.bullets b{display:block;font-size:.98rem}
.bullets span{color:var(--soft);font-size:.92rem}

/* ---------- 카드 ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 36px color-mix(in srgb,var(--ink) 10%,transparent)}
.card-body{padding:26px 24px;display:flex;flex-direction:column;flex:1}
.card-img{aspect-ratio:16/10;border-radius:0}
.card-ico{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--brand) 12%,var(--paper));
  color:var(--brand-deep);display:flex;align-items:center;justify-content:center;margin-bottom:16px;padding:12px}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card p{color:var(--soft);font-size:.94rem}
.card-note{display:inline-block;margin-top:12px;font-size:.82rem;font-weight:700;color:var(--brand-deep)}
.card-more{margin-top:auto;padding-top:16px;font-weight:800;font-size:.9rem;color:var(--brand-deep);align-self:flex-start}
.card-more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- 포토 메뉴(요리) ---------- */
.dish{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s,box-shadow .18s}
.dish:hover{transform:translateY(-5px);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 12%,transparent)}
.dish-img{aspect-ratio:4/3;border-radius:0}
.dish-img img{transition:transform .5s}
.dish:hover .dish-img img{transform:scale(1.06)}
.dish-body{padding:20px 22px 22px}
.dish-top{display:flex;align-items:center;gap:9px}
.dish-top h3{font-size:1.1rem;font-family:var(--disp,inherit)}
.mi-badge{font-style:normal;background:var(--accent);color:#241a05;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:8px}
.dish-body>p{color:var(--soft);font-size:.9rem;margin-top:7px;min-height:2.6em}
.dish-price{margin-top:12px;font-weight:900;font-size:1.12rem;color:var(--brand-deep)}
.menu-note{text-align:center;color:var(--soft);font-size:.87rem;margin-top:26px}

/* ---------- 텍스트 가격표 ---------- */
.menu-group{margin-bottom:34px}
.menu-gname{font-size:1.1rem;color:var(--brand-deep);margin-bottom:14px;padding-bottom:9px;border-bottom:2px solid var(--brand)}
.menu-list{display:grid;gap:7px}
.menu-item{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 18px}
.mi-top{display:flex;align-items:baseline;gap:10px}
.mi-name{font-weight:800}
.mi-dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.mi-price{font-weight:900;color:var(--brand-deep);white-space:nowrap}
.mi-desc{color:var(--soft);font-size:.88rem;margin-top:5px}

/* ---------- 갤러리 ---------- */
.ga-grid{display:grid;gap:16px}
.ga-grid.g3{grid-template-columns:repeat(3,1fr)}
.ga-grid.g4{grid-template-columns:repeat(4,1fr)}
.ga-item{position:relative}
.ga-img{aspect-ratio:1/1}
.ga-img img{transition:transform .5s}
.ga-item:hover .ga-img img{transform:scale(1.05)}
.ga-item figcaption{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.9rem;font-weight:700}
.ga-tag{background:color-mix(in srgb,var(--brand) 14%,var(--bg));color:var(--brand-deep);
  font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:8px}

/* ---------- 프로필(셰프·대표) ---------- */
.profile{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.profile.rev .profile-photo{order:2}
.profile-img{aspect-ratio:3/4;box-shadow:0 28px 60px color-mix(in srgb,var(--ink) 16%,transparent)}
.profile-sign{text-align:center;margin-top:16px;font-family:var(--disp,inherit);font-size:1.15rem;font-weight:700;color:var(--soft)}
.profile-name{font-size:1.05rem;font-weight:900;color:var(--brand-deep);margin-bottom:14px}
.profile-name span{color:var(--soft);font-weight:600;font-size:.92rem;margin-left:6px}
.profile-body h2{font-size:clamp(1.45rem,2.9vw,2rem);margin-bottom:10px;font-family:var(--disp,inherit)}
.profile-body p{color:var(--soft)}
.profile-body .lead{color:var(--ink)}
.tl-box{margin-top:22px;border-left:2.5px solid var(--brand);display:grid;gap:9px;padding:4px 0 4px 18px}
.tl-row{display:flex;gap:14px;align-items:baseline}
.tl-y{font-weight:900;color:var(--brand-deep);font-size:.9rem;flex:0 0 74px;font-variant-numeric:tabular-nums}
.tl-t{font-size:.94rem;color:var(--soft)}

/* ---------- 팀(사진+모달) ---------- */
.person{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s,box-shadow .18s;display:block;width:100%}
.person:hover{transform:translateY(-5px);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 12%,transparent)}
.person-img{aspect-ratio:4/4.6;border-radius:0}
.person-img img{transition:transform .5s}
.person:hover .person-img img{transform:scale(1.04)}
.person-body{padding:20px 22px 22px}
.person h3{font-size:1.08rem}
.person-role{display:inline-block;color:var(--brand-deep);font-size:.84rem;font-weight:800;margin:4px 0 9px}
.person p{color:var(--soft);font-size:.9rem}
.person-more{display:inline-block;margin-top:12px;font-weight:800;font-size:.88rem;color:var(--brand-deep)}

/* ---------- 리뷰 ---------- */
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.review-img{aspect-ratio:16/10;border-radius:0}
.review-body{padding:20px 22px}
.review-stars{color:var(--accent);letter-spacing:2px;margin-bottom:9px;font-size:.95rem}
.review-body p{font-size:.93rem;color:var(--ink)}
.review-by{margin-top:12px;font-size:.82rem;font-weight:700;color:var(--soft)}

/* ---------- 로고 월 ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.logo-cell{background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:86px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.06rem;
  letter-spacing:.02em;color:color-mix(in srgb,var(--ink) 62%,var(--soft));filter:grayscale(1);
  transition:filter .2s,color .2s}
.logo-cell:hover{filter:none;color:var(--brand-deep)}

/* ---------- 연혁 ---------- */
.hist{border-left:2.5px solid var(--line);display:grid;gap:26px;padding-left:26px;position:relative}
.hist-item{position:relative}
.hist-item::before{content:"";position:absolute;left:-33px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:3px solid var(--brand)}
.hist-item.hl::before{background:var(--brand)}
.hist-y{font-weight:900;color:var(--brand-deep);font-family:var(--disp,inherit);font-size:1.12rem}
.hist-b b{display:block;margin-top:3px}
.hist-b p{color:var(--soft);font-size:.92rem;margin-top:3px}

/* ---------- 스텝 ---------- */
.steps{display:grid}
.step{display:flex;gap:18px;padding:22px 4px;border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:0}
.step-no{flex:0 0 44px;height:44px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem}
.step h3{font-size:1.04rem;margin-bottom:5px}
.step p{color:var(--soft);font-size:.94rem}

/* ---------- 인용/CTA 밴드 (사진 배경 지원) ---------- */
.quote-band,.cta-band{position:relative;background-color:var(--brand-deep);background-size:cover;background-position:center;
  color:#fff;text-align:center;padding:88px 24px;overflow:hidden}
.qb-shade{position:absolute;inset:0;background:rgba(12,10,9,.55)}
.quote-band .wrap,.cta-band .wrap{position:relative;z-index:2}
.quote-text{font-size:clamp(1.2rem,2.7vw,1.6rem);font-weight:700;line-height:1.75;max-width:38em;margin:0 auto;
  font-family:var(--disp,inherit)}
.quote-band cite{display:block;margin-top:18px;font-style:normal;opacity:.85;font-size:.94rem}
.cta-band h2{font-size:clamp(1.5rem,3.2vw,2.15rem);font-family:var(--disp,inherit)}
.cta-band p{opacity:.92;margin-top:12px}
.cta-btns{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ---------- 제품 쇼케이스 ---------- */
.products{display:grid;gap:34px}
.product{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:calc(var(--radius)*1.2);overflow:hidden}
.product .imgbox{border-radius:0;height:100%;min-height:300px}
.product.rev .imgbox{order:2}
.product-body{padding:38px 40px}
.product-no{font-size:.85rem;font-weight:900;color:var(--brand);letter-spacing:.14em}
.product-body h3{font-size:1.35rem;margin:8px 0 12px}
.product-body p{color:var(--soft);font-size:.96rem}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{background:var(--tint);border:1px solid var(--line);color:var(--soft);font-size:.8rem;font-weight:700;
  padding:5px 11px;border-radius:16px}

/* ---------- 예약 ---------- */
.booking{background:var(--paper);border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.2);
  padding:34px 32px;display:grid;gap:24px;box-shadow:0 20px 50px color-mix(in srgb,var(--ink) 8%,transparent)}
.bk-label{display:grid;gap:9px;font-size:.92rem;font-weight:800}
.bk-block{display:grid;gap:10px}
.bk-two{grid-template-columns:1fr 1fr;display:grid;gap:16px}
.bk-dates,.bk-times{display:flex;gap:9px;flex-wrap:wrap}
.bk-chip{border:1.5px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 14px;
  font-weight:700;font-size:.92rem;text-align:center;min-width:74px;transition:all .15s}
.bk-chip small{display:block;font-weight:600;color:var(--soft);font-size:.76rem}
.bk-chip:hover{border-color:var(--brand)}
.bk-chip.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.bk-chip.sel small{color:color-mix(in srgb,var(--on-brand) 80%,transparent)}
.bk-chip.off{opacity:.35;pointer-events:none;text-decoration:line-through}
.bk-input{width:100%;padding:13px 15px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);
  font-size:1rem;font-family:inherit;color:var(--ink)}
.bk-input:focus{outline:2.5px solid var(--brand)}
.bk-submit{margin-top:4px}
.bk-note{text-align:center;color:var(--soft);font-size:.85rem}
.bk-done{text-align:center;padding:30px 10px}
.bk-done .big{font-size:2.6rem;margin-bottom:12px}
.bk-done h3{font-size:1.3rem;margin-bottom:8px}
.bk-done p{color:var(--soft)}

/* ---------- 연락처/지도 ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.contact-grid.nomap{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.map-wrap{display:flex;flex-direction:column;gap:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.kmap{position:relative;width:100%;min-height:330px;flex:1;background:var(--tint)}
.kmap-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:24px;color:var(--soft)}
.kmap-fb .kf-ico{font-size:2rem}
.kmap-fb b{color:var(--ink);font-size:1.02rem;line-height:1.5;word-break:keep-all}
.kmap-fb .kf-sub{font-size:.82rem}
.kmap.kmap-on .kmap-fb{display:none}
.map-link{display:block;text-align:center;padding:13px;font-weight:800;font-size:.92rem;color:var(--brand-deep);
  background:var(--tint);border-top:1px solid var(--line)}
.map-link:hover{background:var(--line)}
.info-list{display:grid;gap:14px}
.info-row{display:flex;gap:13px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:15px 17px}
.info-ico{flex:0 0 40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--brand) 12%,var(--paper));
  color:var(--brand-deep);display:flex;align-items:center;justify-content:center;padding:9px}
.info-k{font-size:.8rem;font-weight:700;color:var(--soft)}
.info-v{font-weight:700}
.hours{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.hours h3{font-size:.95rem;color:var(--brand-deep);margin-bottom:10px}
.hours-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.94rem}
.hours-row:last-of-type{border-bottom:0}
.hours-note{color:var(--soft);font-size:.82rem;margin-top:10px}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--foot-bg,#181512);color:var(--foot-ink,#cfc9c2);padding:46px 0 120px;font-size:.9rem}
.foot-brand{font-weight:900;font-size:1.12rem;color:#fff;margin-bottom:10px}
.site-foot p{opacity:.75;margin-top:3px}
.foot-demo{margin-top:16px !important;font-size:.82rem}
.foot-demo a{color:var(--accent);font-weight:800}

/* ---------- 모달 ---------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(10,9,8,.62);backdrop-filter:blur(3px)}
.modal-card{position:relative;background:var(--paper);color:var(--ink);border-radius:20px;max-width:520px;width:100%;
  max-height:86vh;overflow-y:auto;padding:28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:pop .22s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.modal-x{position:absolute;top:12px;right:14px;font-size:1.7rem;color:var(--soft);line-height:1;padding:6px}
.modal-photo{aspect-ratio:16/10;margin-bottom:18px}
.modal-card h3{font-size:1.25rem;margin-bottom:10px}
.modal-body{color:var(--soft);font-size:.95rem}
.modal-list{display:grid;gap:10px;margin-top:16px}
.modal-list li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.modal-cta{width:100%;margin-top:20px}
.pm-head{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.pm-photo{width:96px;height:96px;border-radius:50%;flex:0 0 96px}
.pm-role{color:var(--brand-deep);font-weight:800;font-size:.86rem}
.pm-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pm-tags span{background:var(--tint);border-radius:14px;padding:3px 10px;font-size:.76rem;font-weight:700;color:var(--soft)}

/* ---------- 등장 애니메이션 ([data-anim] + .anim-in) ---------- */
[data-anim]{opacity:0;transition:opacity .75s ease,transform .75s ease;will-change:opacity,transform}
[data-anim="rise"]{transform:translateY(30px)}
[data-anim="zoom"]{transform:scale(.94)}
[data-anim="left"]{transform:translateX(-44px)}
[data-anim="right"]{transform:translateX(44px)}
[data-anim].anim-in{opacity:1;transform:none}
/* 편집 모드에선 항상 보이게 (IO 미작동 대비) */
body.editing [data-anim]{opacity:1;transform:none;transition:none}

/* ---------- 쇼핑몰 (shop 섹션) ---------- */
.sp-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.sp-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px color-mix(in srgb,var(--ink) 10%,transparent)}
.sp-openbtn{position:relative;display:block;width:100%;padding:0;cursor:pointer}
.sp-img{aspect-ratio:1/1;border-radius:0}
.sp-img img{transition:transform .5s}
.sp-card:hover .sp-img img{transform:scale(1.05)}
.sp-badge{position:absolute;top:12px;left:12px;font-style:normal;background:var(--accent);color:#241a05;
  font-size:.72rem;font-weight:900;padding:5px 11px;border-radius:8px;letter-spacing:.04em}
.sp-so{position:absolute;inset:0;background:rgba(20,18,16,.55);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:1.15rem;letter-spacing:.12em}
.sp-card.soldout .sp-body{opacity:.55}
.sp-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.sp-body h3{font-size:1.04rem}
.sp-body p{color:var(--soft);font-size:.9rem}
.sp-prices{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:6px}
.sp-old{color:var(--soft);text-decoration:line-through;font-size:.92rem;font-weight:600}
.sp-price{font-size:1.18rem;font-weight:900;color:var(--brand-deep)}
.sp-cur{font-size:.88rem;font-weight:700;color:var(--soft)}
/* 상세 모달 */
.sp-detail{display:grid;gap:14px}
.sp-dmain{aspect-ratio:1/1;border-radius:14px}
.sp-detail h3{font-size:1.3rem;margin:0}
.sp-dtext{color:var(--soft);font-size:.95rem}
.sp-dimg{border-radius:14px}
.sp-opt{margin-top:2px}
.sp-buyrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
.sp-qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.sp-qty button{width:40px;height:40px;font-size:1.25rem;font-weight:800;background:var(--tint)}
.sp-qty button:hover{background:var(--line)}
.sp-qty b{min-width:44px;text-align:center;font-size:1.05rem}
.sp-total{font-size:.95rem;color:var(--soft)}
.sp-total b{font-size:1.25rem;font-weight:900;color:var(--brand-deep);margin:0 2px}
.sp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-soldout-note{background:var(--tint);border-radius:12px;padding:16px;text-align:center;font-weight:700;color:var(--soft)}

/* ---------- 스토어형(storefront): 카테고리 탭 + 정렬 ---------- */
.store-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.store-tab{padding:9px 18px;border-radius:24px;font-weight:800;font-size:.92rem;color:var(--soft);
  background:var(--tint);transition:all .15s}
.store-tab:hover{color:var(--ink)}
.store-tab.on{background:var(--brand);color:var(--on-brand)}
.store-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.store-count{color:var(--soft);font-size:.9rem}
.store-count b{color:var(--ink);font-weight:900}
.store-sort{padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);
  font-family:inherit;font-size:.9rem;font-weight:700;color:var(--ink);cursor:pointer}
.sp-cat{display:inline-block;font-size:.74rem;font-weight:800;color:var(--brand-deep);
  background:color-mix(in srgb,var(--brand) 10%,var(--bg));padding:2px 8px;border-radius:6px;margin-bottom:2px;align-self:flex-start}
/* 재고 배지 (카드 사진 위) */
.sp-stock{position:absolute;left:12px;bottom:12px;background:rgba(20,18,16,.72);color:#fff;
  font-size:.74rem;font-weight:800;padding:4px 10px;border-radius:8px;backdrop-filter:blur(2px)}
.pd-stock{font-size:.86rem;font-weight:700;color:var(--soft);margin:-6px 0 14px}
/* "+" 상품 추가 타일 (편집 모드) */
.sp-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:100%;border:2.5px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:var(--radius);
  background:color-mix(in srgb,var(--brand) 5%,var(--paper));color:var(--brand-deep);cursor:pointer;
  padding:40px 16px;transition:border-color .15s,background .15s;font-family:inherit}
.sp-add:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 11%,var(--paper))}
.sp-add-ico{font-size:2.6rem;font-weight:300;line-height:1;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--brand);color:var(--on-brand)}
.sp-add-t{font-weight:800;font-size:.98rem}

/* ---------- 상품 상세 페이지 ---------- */
.pd-sec{padding-top:32px}
.pd-crumb{font-size:.86rem;color:var(--soft);margin-bottom:20px}
.pd-crumb a{color:var(--brand-deep);font-weight:700;cursor:pointer}
.pd-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.pd-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pd-gallery{position:sticky;top:82px}
.pd-main{aspect-ratio:1/1;border-radius:var(--radius)}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-thumb{width:70px;height:70px;border-radius:12px;overflow:hidden;border:2px solid transparent;transition:border-color .15s}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb.on{border-color:var(--brand)}
.pd-catlbl{display:inline-block;font-size:.8rem;font-weight:800;color:var(--brand-deep);margin-bottom:8px}
.pd-name{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.3;margin-bottom:10px}
.pd-desc{color:var(--soft);font-size:1rem;margin-bottom:18px}
.pd-priceline{display:flex;align-items:center;gap:12px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.pd-disc{font-size:1.3rem;font-weight:900;color:#e2483d}
.pd-priceline .sp-price{font-size:1.7rem}
.pd-info .sp-opt{margin-bottom:12px}
.pd-info .sp-buyrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0}
.pd-info .sp-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.pd-info .sp-actions .btn{padding:15px 20px}
.pd-back-inline{display:inline-block;margin-top:18px;font-weight:700;font-size:.9rem;color:var(--soft)}
.pd-back-inline:hover{color:var(--brand-deep)}
.pd-detail{margin-top:64px;border-top:2px solid var(--ink);padding-top:0}
.pd-tabline{display:flex;gap:0;margin-bottom:32px;border-bottom:1px solid var(--line)}
.pd-tabline span{padding:16px 26px;font-weight:800;font-size:1rem}
.pd-tabline span.on{border-bottom:2.5px solid var(--ink);margin-bottom:-1px}
.pd-dh{font-size:1.15rem;margin-bottom:16px}
.pd-dtext{color:var(--ink);font-size:1rem;line-height:1.9;max-width:44em;margin:0 auto 28px;text-align:center}
.pd-dimg{width:100%;max-width:720px;margin:0 auto 16px;border-radius:var(--radius);display:block}
.pd-shipinfo{max-width:720px;margin:40px auto 0;background:var(--tint);border-radius:var(--radius);padding:24px 28px}
.pd-shipinfo ul{display:grid;gap:8px}
.pd-shipinfo li{position:relative;padding-left:16px;color:var(--soft);font-size:.94rem}
.pd-shipinfo li::before{content:"·";position:absolute;left:4px;color:var(--brand)}
.pd-related{margin-top:72px}
.pd-related .pd-dh{text-align:center;margin-bottom:28px}

/* ---------- 장바구니 FAB + 드로어 + 주문 폼 ---------- */
.cart-fab{position:fixed;right:18px;bottom:96px;z-index:65;width:58px;height:58px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);font-size:1.5rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px color-mix(in srgb,var(--brand) 45%,transparent);cursor:pointer;transition:transform .15s}
.cart-fab:hover{transform:translateY(-3px)}
.cart-cnt{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;background:#e23c3c;
  color:#fff;font-size:.76rem;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px}
.cart-drawer{position:fixed;inset:0;z-index:95}
.cd-bg{position:absolute;inset:0;background:rgba(10,9,8,.55);backdrop-filter:blur(2px)}
.cd-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--paper);color:var(--ink);
  box-shadow:-20px 0 60px rgba(0,0,0,.3);padding:22px 22px 30px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;
  animation:cdIn .25s ease}
@keyframes cdIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.cd-head{display:flex;align-items:center;justify-content:space-between;font-size:1.1rem}
.cd-x{font-size:1.7rem;color:var(--soft);line-height:1;padding:4px 8px}
.cd-empty{text-align:center;color:var(--soft);padding:60px 0}
.cd-list{display:grid;gap:10px}
.cd-item{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cd-info{display:grid;gap:2px;font-size:.94rem}
.cd-opt{color:var(--soft);font-size:.82rem}
.cd-price{color:var(--brand-deep);font-weight:800;font-size:.9rem}
.cd-ctrl{display:flex;align-items:center;gap:4px}
.cd-ctrl button{width:30px;height:30px;border-radius:8px;background:var(--tint);font-weight:800}
.cd-ctrl button:hover{background:var(--line)}
.cd-ctrl b{min-width:24px;text-align:center}
.cd-del{margin-left:4px}
.cd-sum{border-top:1.5px solid var(--line);padding-top:12px;display:grid;gap:7px;font-size:.94rem}
.cd-sum>div{display:flex;justify-content:space-between}
.cd-sum small{color:var(--soft);font-weight:600}
.cd-total{font-size:1.05rem;padding-top:6px;border-top:1px dashed var(--line)}
.cd-total b{color:var(--brand-deep);font-size:1.2rem}
.of-items{background:var(--tint);border-radius:14px;padding:14px 16px;display:grid;gap:7px;font-size:.92rem}
.of-items>div{display:flex;justify-content:space-between;gap:10px}
.of-ship{border-top:1px dashed var(--line);padding-top:7px}
.of-total{font-weight:900;font-size:1.02rem}
.of-total b{color:var(--brand-deep)}
.of-bank{background:var(--tint);border-radius:12px;padding:12px 16px;margin:10px 0;display:grid;gap:3px}
.of-bank span{font-size:.8rem;color:var(--soft);font-weight:700}
.of-bank b{font-size:1.02rem}
.of-done{margin-top:14px}

/* ---------- 에디터: 섹션·아이템 툴바 ---------- */
.ed-secbar{position:absolute;top:10px;right:10px;z-index:72;display:flex;align-items:center;gap:4px;
  background:rgba(20,18,16,.92);border-radius:12px;padding:5px 7px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:Pretendard,sans-serif}
.ed-secname{color:#ffd857;font-size:.78rem;font-weight:900;padding:0 6px;white-space:nowrap}
.ed-secbar button{width:32px;height:32px;border-radius:8px;color:#fff;font-size:.95rem;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
.ed-secbar button:hover{background:#ff5a28}
.ed-itembar{position:absolute;top:6px;right:6px;z-index:71;display:flex;gap:3px;background:rgba(20,18,16,.9);
  border-radius:10px;padding:4px 5px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.ed-itembar button{width:27px;height:27px;border-radius:7px;color:#fff;font-size:.8rem;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
.ed-itembar button:hover{background:#ff5a28}
body.editing [data-sec]{scroll-margin-top:80px}
/* 마키 편집 모드: 정지 + 줄바꿈 허용 */
.marquee.mq-edit{transform:none!important;overflow:visible;margin:0!important}
.mq-edit .mq-track{animation:none;white-space:normal;flex-wrap:wrap;padding:4px 20px;row-gap:8px}
.mq-edit .mq-item{position:relative;padding:2px 4px}

/* ---------- 에디터 팝업 (팔레트·애니·상품폼) ---------- */
.ed-pop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;
  font-family:Pretendard,sans-serif}
.ed-pop-bg{position:absolute;inset:0;background:rgba(10,9,8,.6);backdrop-filter:blur(3px)}
.ed-pop-card{position:relative;background:#fff;color:#26231f;border-radius:18px;max-width:560px;width:100%;
  max-height:86vh;overflow-y:auto;padding:22px 22px 26px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.ed-pop-head{display:flex;align-items:center;justify-content:space-between;font-size:1.08rem;margin-bottom:12px}
.ed-pop-x{font-size:1.6rem;color:#8a8478;line-height:1;padding:2px 8px}
.ed-pop-note{color:#6e6a63;font-size:.88rem;margin-bottom:14px}
.ed-palette{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ed-pal{border:1.5px solid #e5e1da;border-radius:12px;padding:13px 14px;text-align:left;display:grid;gap:3px;
  transition:border-color .15s,background .15s;cursor:pointer}
.ed-pal:hover{border-color:#ff5a28;background:#fff7f4}
.ed-pal b{font-size:.95rem}
.ed-pal small{color:#6e6a63;font-size:.8rem}
.ed-anim-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ed-anim{border:1.5px solid #e5e1da;border-radius:11px;padding:13px 6px;font-weight:800;cursor:pointer}
.ed-anim:hover{border-color:#ff5a28}
.ed-anim.sel{background:#ff5a28;border-color:#ff5a28;color:#fff}
.ed-pop-btn{width:100%;background:#ff5a28;color:#fff;border-radius:12px;padding:13px;font-weight:900;font-size:.97rem;
  cursor:pointer;margin-top:4px}
.ed-pop-btn:hover{background:#e84a1a}
.ed-pop-btn.ghost{background:#f4f1ec;color:#26231f}
.ed-pop-btn.ghost:hover{background:#e8e3da}
.ed-form{display:grid;gap:12px}
.ed-form label{display:grid;gap:6px;font-size:.87rem;font-weight:800}
.ed-form small{color:#8a8478;font-weight:600}
.ed-form input,.ed-form textarea,.ed-form select{width:100%;padding:11px 13px;border-radius:10px;
  border:1.5px solid #e5e1da;font-size:.95rem;font-family:inherit}
.ed-form input:focus,.ed-form textarea:focus{outline:2px solid #ff5a28;border-color:transparent}
.ed-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ed-check{display:flex!important;align-items:center;gap:8px;padding-top:22px}
.ed-check input{width:20px;height:20px}
.ed-imgrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-imgrow .ed-pop-btn{margin-top:0}

/* ---------- 데모 독(하단 버튼들) ---------- */
.demo-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:70;display:flex;gap:10px;
  background:rgba(12,11,10,.72);backdrop-filter:blur(8px);padding:10px;border-radius:40px;
  box-shadow:0 16px 44px rgba(0,0,0,.45)}
.dock-btn{background:#2a2725;color:#fff;font-size:1.04rem;font-weight:900;padding:16px 26px;border-radius:30px;
  white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,background .15s}
.dock-btn:hover{background:#000;transform:translateY(-2px)}
/* 독은 십분홈피 UI — 사이트 스킨 색상과 무관하게 고정 */
.dock-admin{background:#ffd857!important;color:#241a05!important;animation:dockPulse 2.2s ease-in-out infinite}
.dock-admin:hover{background:#ffce33!important;animation:none}
.dock-home{background:#0fa08a!important;color:#fff!important}
.dock-home:hover{background:#0a6e60!important}
@keyframes dockPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,216,87,.55)}50%{box-shadow:0 0 0 12px rgba(255,216,87,0)}}
@media(max-width:560px){.dock-btn{font-size:.92rem;padding:13px 16px}}

/* ---------- 관리자 체험 모드 ---------- */
body.editing [data-cms],body.editing [data-cms-img]{outline:2px dashed rgba(255,90,40,.75);outline-offset:3px;cursor:pointer;
  transition:outline-color .15s}
/* hover 하이라이트 = inset box-shadow 오버레이 — background 쇼트핸드로 덮으면
   배경색 있는 버튼·배지가 투명해져 어두운 밴드 위에서 글자가 안 보임 */
body.editing [data-cms]:hover,body.editing [data-cms-img]:hover{outline-color:#ff5a28;outline-style:solid;
  box-shadow:inset 0 0 0 999px rgba(255,90,40,.1)}
body.editing [data-cms-bg]{outline:2px dashed rgba(255,90,40,.5);outline-offset:-2px}
/* 사진 교체 배지 — 편집모드에서 모든 사진(배경 포함) 위에 표시 */
.edit-img-badge{position:absolute;right:10px;bottom:10px;z-index:76;border:0;cursor:pointer;
  background:#ff5a28;color:#fff;font-weight:900;font-size:.82rem;padding:8px 13px;border-radius:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);font-family:inherit;white-space:nowrap}
.edit-img-badge:hover{background:#e84a1a;transform:scale(1.05)}
.ph-bg .edit-img-badge{bottom:auto;top:86px}
.quote-band .edit-img-badge,.cta-band .edit-img-badge{top:12px;bottom:auto}
.edit-bar{position:fixed;top:0;left:0;right:0;z-index:100;background:#1c1917;color:#fff;display:flex;align-items:center;
  gap:12px;padding:11px 16px;font-size:.9rem;flex-wrap:wrap;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.edit-bar b{color:#ffd857}
.edit-bar .eb-note{opacity:.75;font-size:.82rem;flex:1;min-width:200px}
.eb-btn{background:#353230;color:#fff;border-radius:9px;padding:8px 14px;font-weight:800;font-size:.85rem}
.eb-btn:hover{background:#4a4642}
.eb-btn.save{background:#ffd857;color:#241a05}
body.editing{padding-top:52px}
.edit-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:110;background:#111;color:#fff;
  padding:13px 22px;border-radius:12px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* ============================================================
   스킨 4종 — 같은 컴포넌트, 완전히 다른 인상
   ============================================================ */

/* ── 소반: 크림 세리프 에디토리얼(따뜻·정갈, 중앙 정렬 무드) ── */
.skin-restaurant{--disp:'Nanum Myeongjo',serif}
.skin-restaurant h1,.skin-restaurant h2,.skin-restaurant .brand span{font-family:'Nanum Myeongjo',serif}
.skin-restaurant .topbar{background:transparent;border-bottom:0;position:absolute;width:100%}
.skin-restaurant .topbar:not(.scrolled){color:#fff}
.skin-restaurant .topbar:not(.scrolled) .topnav a{color:rgba(255,255,255,.85)}
.skin-restaurant .topbar:not(.scrolled) .topnav a:hover{background:rgba(255,255,255,.14);color:#fff}
.skin-restaurant .topbar:not(.scrolled) .brand-ico{color:#fff}
.skin-restaurant .topbar.scrolled{position:fixed;background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
.skin-restaurant .eyebrow{background:transparent;border-top:1.5px solid var(--brand);border-radius:0;padding:8px 4px 0;letter-spacing:.22em}
.skin-restaurant .dish{border-radius:6px}
.skin-restaurant .dish-price{font-family:'Nanum Myeongjo',serif}
.skin-restaurant .btn{border-radius:4px}
.skin-restaurant .imgbox{border-radius:6px}
.skin-restaurant .card,.skin-restaurant .review,.skin-restaurant .person{border-radius:6px}

/* ── 살롱 무드: 올블랙 패션 에디토리얼(대문자·와이드 레터) ── */
.skin-salon .eyebrow{background:transparent;color:var(--accent);letter-spacing:.34em;border-radius:0;padding:0;font-size:.76rem}
.skin-salon .sec-head h2,.skin-salon h1{letter-spacing:.01em;font-weight:900;text-transform:uppercase}
.skin-salon .topbar{background:rgba(14,13,16,.8)}
.skin-salon .brand span{text-transform:uppercase;letter-spacing:.22em;font-size:1rem}
.skin-salon .topnav a{letter-spacing:.1em;font-size:.85rem}
.skin-salon .btn{border-radius:0;letter-spacing:.08em}
.skin-salon .imgbox{border-radius:0}
.skin-salon .card,.skin-salon .review,.skin-salon .person,.skin-salon .menu-item,.skin-salon .info-row,
.skin-salon .hours,.skin-salon .booking,.skin-salon .modal-card{border-radius:0}
.skin-salon .ga-grid{gap:6px}
.skin-salon .ga-item figcaption{justify-content:center;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.skin-salon .ph-shade{background:linear-gradient(180deg,rgba(5,5,7,.5),rgba(5,5,7,.24) 45%,rgba(8,8,10,.85))}
.skin-salon .stats{background:var(--bg);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.skin-salon .quote-band{background-color:#050507}

/* ── 한빛정밀: 코퍼레이트 그리드(각짐·좌측 정렬·상단 인포바) ── */
.skin-factory{--disp:Pretendard}
.skin-factory .sec-head{text-align:left;margin-left:0;max-width:760px}
.skin-factory .sec-head h2{padding-left:18px;border-left:5px solid var(--brand)}
.skin-factory .eyebrow{border-radius:3px;letter-spacing:.16em}
.skin-factory .btn,.skin-factory .imgbox,.skin-factory .card,.skin-factory .review,.skin-factory .person,
.skin-factory .menu-item,.skin-factory .info-row,.skin-factory .hours,.skin-factory .booking,
.skin-factory .product,.skin-factory .modal-card,.skin-factory .logo-cell{border-radius:3px}
.skin-factory .stat-num{color:var(--brand)}
.skin-factory .topbar{background:var(--paper)}
.skin-factory .topnav a{font-weight:700}
.skin-factory .topnav a.on{background:var(--brand);color:#fff}
.skin-factory .photo-hero{min-height:72vh}
.skin-factory .ph-shade{background:linear-gradient(90deg,rgba(9,17,28,.78) 0%,rgba(9,17,28,.35) 60%,rgba(9,17,28,.15))}
.skin-factory .ph-inner{text-align:left}
.skin-factory .kicker{border-radius:3px}

/* ── 미소진: 라운드 소프트(둥글·큰 여백·필 버튼) ── */
.skin-dental{--disp:Pretendard}
.skin-dental .btn{border-radius:40px}
.skin-dental .imgbox{border-radius:22px}
.skin-dental .card,.skin-dental .person,.skin-dental .review{border-radius:22px}
.skin-dental .card-img,.skin-dental .person-img,.skin-dental .review-img{border-radius:22px 22px 0 0}
.skin-dental .eyebrow{border-radius:30px;background:color-mix(in srgb,var(--brand) 14%,#fff)}
.skin-dental .info-row,.skin-dental .hours,.skin-dental .menu-item{border-radius:18px}
.skin-dental .booking{border-radius:26px}
.skin-dental .bk-chip{border-radius:30px}
.skin-dental .modal-card{border-radius:24px}
.skin-dental .ph-shade{background:linear-gradient(180deg,rgba(10,30,44,.5),rgba(10,30,44,.28) 50%,rgba(10,30,44,.6))}
.skin-dental .topbar{background:rgba(248,251,253,.85)}
.skin-dental .stat-num{font-weight:800}

/* ── 카페 이든: 따뜻한 크래프트(세리프·기울어진 콜라주·필 버튼) ── */
.skin-cafe{--disp:'Nanum Myeongjo',serif}
.skin-cafe h1,.skin-cafe h2,.skin-cafe .brand span{font-family:'Nanum Myeongjo',serif}
.skin-cafe .btn{border-radius:30px}
.skin-cafe .kicker,.skin-cafe .eyebrow{background:transparent;border:1.5px dashed var(--brand);border-radius:30px;letter-spacing:.12em}
.skin-cafe .co-img.co-a{transform:rotate(-1.4deg)}
.skin-cafe .co-img.co-b{transform:rotate(1.6deg)}
.skin-cafe .co-img.co-c{transform:rotate(-.8deg)}
.skin-cafe .co-media{padding:10px}
.skin-cafe .imgbox{border-radius:18px}
.skin-cafe .card,.skin-cafe .review,.skin-cafe .person,.skin-cafe .dish{border-radius:18px}
.skin-cafe .marquee{background:var(--brand);color:var(--on-brand)}
.skin-cafe .mq-track span{font-family:'Nanum Myeongjo',serif;font-weight:800}
.skin-cafe .topbar{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1.5px dashed var(--line)}
.skin-cafe .ga-item figcaption{font-family:'Nanum Myeongjo',serif}

/* ── 한걸음학원: 클린 노트(형광펜 밑줄·판서 무드·단정한 그리드) ── */
.skin-academy .topbar{border-bottom:2.5px solid var(--brand)}
.skin-academy h1 br+*,.skin-academy .ch-card h1{background:linear-gradient(transparent 68%,color-mix(in srgb,var(--accent) 55%,transparent) 68%)}
.skin-academy .sec-head h2{display:inline-block;background:linear-gradient(transparent 70%,color-mix(in srgb,var(--accent) 50%,transparent) 70%)}
.skin-academy .btn,.skin-academy .imgbox,.skin-academy .card,.skin-academy .person,.skin-academy .review,
.skin-academy .menu-item,.skin-academy .info-row,.skin-academy .hours,.skin-academy .booking,.skin-academy .faq{border-radius:10px}
.skin-academy .ch-card{border-top:6px solid var(--brand)}
.skin-academy .step-no{border-radius:12px}
.skin-academy .stat{border-left:1px solid var(--line)}
.skin-academy .stat:first-child{border-left:0}
.skin-academy .stats{background:var(--tint);border-bottom:0}

/* ── GRIT짐: 애슬레틱 펀치(이탤릭 대문자·직각·마키) ── */
.skin-fitness h1,.skin-fitness h2,.skin-fitness .sec-head h2{font-style:italic;text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
.skin-fitness .photo-hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1.06}
.skin-fitness .btn,.skin-fitness .imgbox,.skin-fitness .card,.skin-fitness .review,.skin-fitness .person,
.skin-fitness .menu-item,.skin-fitness .info-row,.skin-fitness .hours,.skin-fitness .booking,.skin-fitness .modal-card,.skin-fitness .faq{border-radius:0}
.skin-fitness .btn{font-style:italic;letter-spacing:.06em;text-transform:uppercase}
.skin-fitness .kicker{border-radius:0;border-left:4px solid var(--accent);background:rgba(0,0,0,.35)}
.skin-fitness .eyebrow{background:var(--accent);color:#101010;border-radius:0;font-style:italic}
.skin-fitness .marquee{background:var(--brand);color:#141607;transform:rotate(-1.2deg) scale(1.02);margin:-8px 0}
.skin-fitness .mq-track span{font-style:italic;text-transform:uppercase;font-size:1.1rem}
.skin-fitness .ph-shade{background:linear-gradient(75deg,rgba(6,6,8,.82) 0%,rgba(6,6,8,.3) 55%,rgba(6,6,8,.15))}
.skin-fitness .ph-inner{text-align:left}
.skin-fitness .stat-num{font-style:italic;color:var(--accent)}
.skin-fitness .stats{background:#0c0c0e;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.skin-fitness .topbar{background:rgba(10,10,12,.85)}
.skin-fitness .brand span{font-style:italic;text-transform:uppercase;letter-spacing:.06em}
.skin-fitness .ga-grid{gap:8px}

/* ── 결 인테리어: 미니멀 포트폴리오(얇은 선·직각·넓은 여백·무그림자) ── */
.skin-interior h1{font-weight:600;letter-spacing:-.03em}
.skin-interior h2{font-weight:700}
.skin-interior .btn,.skin-interior .imgbox,.skin-interior .card,.skin-interior .review,.skin-interior .person,
.skin-interior .menu-item,.skin-interior .info-row,.skin-interior .hours,.skin-interior .booking,
.skin-interior .modal-card,.skin-interior .faq,.skin-interior .split-art{border-radius:0}
.skin-interior .kicker,.skin-interior .eyebrow{background:transparent;border-bottom:2px solid var(--ink);
  border-radius:0;padding:0 2px 6px;letter-spacing:.3em;color:var(--ink)}
.skin-interior .card,.skin-interior .review,.skin-interior .person{box-shadow:none}
.skin-interior .card:hover,.skin-interior .person:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.skin-interior .split-photo,.skin-interior .sh-photo,.skin-interior .profile-img{box-shadow:none}
.skin-interior .btn-solid{background:var(--ink);color:var(--bg);box-shadow:none}
.skin-interior .sec{padding:104px 0}
.skin-interior .sec-head{text-align:left;margin-left:0}
.skin-interior .stats{background:var(--bg);border-top:1px solid var(--line)}
.skin-interior .stat{text-align:left;border-left:1px solid var(--line);padding-left:22px}
.skin-interior .stat-num{font-weight:700}
.skin-interior .mh-band{margin-top:56px}
.skin-interior .topbar{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.skin-interior .step-no{border-radius:0;background:var(--ink)}

/* ── 온재 펜션: 숲속 에어리(큰 라운드·세리프·느긋한 여백) ── */
.skin-pension{--disp:'Nanum Myeongjo',serif}
.skin-pension h1,.skin-pension h2,.skin-pension .brand span,.skin-pension .quote-text{font-family:'Nanum Myeongjo',serif}
.skin-pension .btn{border-radius:30px}
.skin-pension .imgbox{border-radius:26px}
.skin-pension .bx-frame{border-radius:34px}
.skin-pension .card,.skin-pension .review,.skin-pension .person,.skin-pension .faq{border-radius:24px}
.skin-pension .card-img,.skin-pension .person-img{border-radius:24px 24px 0 0}
.skin-pension .eyebrow{background:transparent;color:var(--brand-deep);letter-spacing:.3em;border-radius:0;padding:0}
.skin-pension .sec{padding:108px 0}
.skin-pension .booking{border-radius:28px}
.skin-pension .bk-chip{border-radius:30px}
.skin-pension .bk-input{border-radius:16px}
.skin-pension .info-row,.skin-pension .hours{border-radius:20px}
.skin-pension .topbar{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.skin-pension .ga-grid{gap:20px}

/* ── 든든부동산: 신뢰 콤팩트(네이비 스트라이프·각진 카드·좌측 포인트) ── */
.skin-realty .topbar{border-top:4px solid var(--brand)}
.skin-realty .btn,.skin-realty .imgbox,.skin-realty .card,.skin-realty .review,.skin-realty .person,
.skin-realty .menu-item,.skin-realty .info-row,.skin-realty .hours,.skin-realty .booking,
.skin-realty .modal-card,.skin-realty .faq{border-radius:8px}
.skin-realty .kicker{border-radius:6px;letter-spacing:.1em}
.skin-realty .eyebrow{border-radius:6px}
.skin-realty .card{border-top:3px solid var(--brand)}
.skin-realty .sh-photo{aspect-ratio:4/3}
.skin-realty .stat{border-left:3px solid var(--brand);text-align:left;padding-left:20px}
.skin-realty .stat-label{font-weight:700}
.skin-realty .stats{background:var(--tint);border-bottom:0}
.skin-realty .split-hero{background:var(--tint)}
.skin-realty .faq summary{font-size:.98rem}

/* ── 온기상점: 웜 스토어(라운드·앰버 포인트·아늑함) ── */
.skin-shop .btn{border-radius:14px}
.skin-shop .kicker,.skin-shop .eyebrow{letter-spacing:.16em}
.skin-shop .co-media{gap:12px}
.skin-shop .sp-badge{border-radius:20px}
.skin-shop .marquee{background:var(--brand)}
.skin-shop .topbar{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.skin-shop .sp-card,.skin-shop .review,.skin-shop .faq{border-radius:18px}
.skin-shop .quote-text{font-weight:800}

/* ---------- 반응형 ---------- */
@media(max-width:960px){
  .sh-grid,.co-grid{grid-template-columns:1fr;gap:36px}
  .split-hero.rev .sh-body{order:0}
  .split-hero,.co-hero{padding:48px 0 64px}
  .co-media{min-height:340px}
  .sh-tag{left:12px}
  .bx-frame{min-height:62vh}
  .bx-inner{padding:36px 28px}
  .mh-band{height:36vh}
  .card-hero{min-height:70vh}
  .split,.split.rev,.profile,.profile.rev{grid-template-columns:1fr}
  .split.rev .split-media,.profile.rev .profile-photo{order:0}
  .profile-photo{max-width:420px;margin:0 auto}
  .g3,.g4,.ga-grid.g3,.ga-grid.g4{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .product,.product.rev{grid-template-columns:1fr}
  .product.rev .imgbox{order:0}
  .product .imgbox{min-height:220px}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .photo-hero{min-height:74vh}
}
@media(max-width:620px){
  .sec{padding:64px 0}
  .skin-interior .sec,.skin-pension .sec{padding:72px 0}
  .split-hero h1,.co-hero h1{font-size:1.9rem}
  .min-hero{padding:64px 0 0}
  .min-hero h1{font-size:2.2rem}
  .mh-band{margin-top:40px;height:30vh;min-height:200px}
  .co-media{grid-template-columns:1fr 1fr;min-height:280px;gap:10px}
  .ch-card{padding:30px 24px}
  .bx-inner{padding:26px 20px}
  .bx-frame{min-height:70vh}
  .boxed-hero h1{font-size:1.9rem}
  .sh-tag{padding:10px 14px}
  .sh-tag b{font-size:1.1rem}
  .mq-track span{font-size:.9rem}
  .faq summary{padding:16px 16px}
  .faq>p{padding:0 16px 16px}
  .skin-interior .stat,.skin-realty .stat{padding-left:14px}
  .skin-fitness .photo-hero h1{font-size:2.3rem}
  .ed-palette,.ed-two,.ed-imgrow,.sp-actions{grid-template-columns:1fr}
  .ed-check{padding-top:0}
  .ed-secbar{top:6px;right:6px}
  .ed-secname{display:none}
  .cart-fab{right:14px;bottom:88px;width:52px;height:52px}
  .sp-buyrow{flex-direction:column;align-items:stretch;text-align:center}
  .pd-top{grid-template-columns:1fr;gap:24px}
  .pd-gallery{position:static}
  .pd-info .sp-actions{grid-template-columns:1fr 1fr}
  .pd-tabline span{padding:14px 18px}
  .store-toolbar{flex-wrap:wrap;gap:10px}
  .g2,.g3,.g4,.ga-grid.g3,.ga-grid.g4,.review-grid,.team-grid{grid-template-columns:1fr}
  .ga-grid.g4{grid-template-columns:repeat(2,1fr)}
  .topbar-in .btn{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .bk-two{grid-template-columns:1fr}
  .product-body{padding:26px 24px}
  .demo-dock{width:calc(100% - 20px);justify-content:center;flex-wrap:wrap}
  .ph-inner{padding:90px 24px}
  .skin-factory .sec-head h2{font-size:1.45rem}
}