/* 도깨비 v2 — 4판의 구조·규칙(라운드 12·24·full, 굵기 400·600·800, 카드 A 톤 타일 / 카드 B 그룹 리스트, 유리 3장 이하, 1px 회색 테두리·색 막대 0) 위에 색·사진·순서만 변주.
   색: 확정 AI 사진(wide-02, room1~3-02)과 실매장 입구의 톤 = 크림 몰딩 벽 60% / 월넛 어둠 30% / 와인 레드 5%(주 버튼) / 황동·연두 간접광 5%(연두는 선·빛만).
   테마: 기본 = 크림(밝은 면). .dk2-dark = 월넛(어두운 면). 컴포넌트는 같은 변수 이름을 쓰고 테마가 값을 바꾼다. */
:root, .dk2-light {
  --dk2-bg: #f4ede2;
  --dk2-bg-alt: #ece2d2;
  --dk2-tile-a: #fffcf6;
  --dk2-tile-b: #f8f1e6;
  --dk2-ink: #23190f;
  --dk2-ink-2: #5a4a3a;
  --dk2-fill-1: #23190f0a;
  --dk2-fill-2: #23190f12;
  --dk2-fill-3: #23190f21;
  --dk2-line: #23190f17;
  --dk2-inset: #23190f0d;
  --dk2-acc: #7a581b;
  --dk2-acc-tint: #7a581b1f;
  --dk2-num-bg: #2a1e15;
  --dk2-num-fg: #f3e2bd;
  --dk2-shadow-tile: inset 0 1px 0 #ffffffcc, 0 1px 2px #3b2a1a14, 0 14px 32px #3b2a1a1a;
}
.dk2-dark {
  --dk2-bg: #1d1510;
  --dk2-bg-alt: #241a14;
  --dk2-tile-a: #3a2c22;
  --dk2-tile-b: #2c2119;
  --dk2-ink: #f7efe3;
  --dk2-ink-2: #d8cab6;
  --dk2-fill-1: #fff4df0d;
  --dk2-fill-2: #fff4df1a;
  --dk2-fill-3: #fff4df2b;
  --dk2-line: #fff4df1c;
  --dk2-inset: #0e0a0780;
  --dk2-acc: #dcb774;
  --dk2-acc-tint: #dcb7742b;
  --dk2-num-bg: #dcb774;
  --dk2-num-fg: #23190f;
  --dk2-shadow-tile: inset 0 1px 0 #fff4df1f, 0 12px 32px #00000059;
  color: var(--dk2-ink);
  background: var(--dk2-bg);
}
:root {
  /* 고정 색 */
  --dk2-wine: #8c1a2b;
  --dk2-wine-hi: #a8283a;
  --dk2-wine-deep: #5c0f1b;
  --dk2-lime: #cfe8a6;
  --dk2-walnut: #1d1510;
  --dk2-walnut-deep: #150f0b;
  --dk2-ok: #3f8a4c;
  --dk2-font: system-ui, -apple-system, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --dk2-fs-xs: 13px; --dk2-fs-sm: 15px; --dk2-fs-base: 16px; --dk2-fs-lg: 20px; --dk2-fs-xl: 28px; --dk2-fs-2xl: 36px; --dk2-fs-3xl: 44px; --dk2-fs-4xl: 56px;
  --dk2-w-r: 400; --dk2-w-s: 600; --dk2-w-h: 800;
  --dk2-track: -0.02em; --dk2-label: 0.14em;
  --dk2-r-sm: 12px; --dk2-r-lg: 24px; --dk2-r-full: 9999px;
  --dk2-shadow-cta: inset 0 1px 0 #ffffff2e, 0 10px 26px #8c1a2b4d;
  --dk2-shadow-glass: inset 0 1px 0 #fff4df2e, 0 24px 60px #1d151066;
  --dk2-touch: 48px;
  --dk2-container: 1160px;
  --dk2-prose: 36em;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--dk2-walnut-deep); }
body { margin: 0; font-family: var(--dk2-font); font-size: var(--dk2-fs-base); line-height: 1.6; color: var(--dk2-ink); background: var(--dk2-bg); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: var(--dk2-track); text-wrap: balance; color: var(--dk2-ink); }
h2 { font-size: var(--dk2-fs-xl); font-weight: var(--dk2-w-h); }
h3 { font-size: var(--dk2-fs-lg); font-weight: var(--dk2-w-s); }
p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--dk2-acc); }
:focus-visible { outline: 2px solid var(--dk2-acc); outline-offset: 3px; }
.dk2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dk2-skip { position: absolute; left: 12px; top: -80px; z-index: 99; padding: 12px 16px; border-radius: var(--dk2-r-full); background: var(--dk2-walnut); color: #fff; font-weight: var(--dk2-w-s); }
.dk2-skip:focus { top: 12px; }
.dk2-wrap { max-width: var(--dk2-container); margin: 0 auto; padding: 0 20px; }
.dk2-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 섹션 리듬: 여백 진폭 + 크림·크림2·월넛 명도 교차 */
.dk2-sec { padding: 72px 0; background: var(--dk2-bg); }
.dk2-sec--alt { background: var(--dk2-bg-alt); }
.dk2-head { max-width: 40em; margin-bottom: 32px; }
.dk2-over { display: block; margin-bottom: 12px; font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); letter-spacing: var(--dk2-label); color: var(--dk2-acc); }
.dk2-note { font-size: var(--dk2-fs-sm); line-height: 1.7; color: var(--dk2-ink-2); }
.dk2-head .dk2-note { margin-top: 12px; }
.dk2-cap { margin: 0 4px 12px; font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); }

/* 헤더: 크림 불투명 면, 한글 굵은 워드마크, 하단 연두 간접광 헤어라인(빛 한 줄) */
.dk2-top { position: relative; z-index: 20; background: var(--dk2-bg); }
.dk2-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #a9cf7a00, #a9cf7ab3 30%, #a9cf7ab3 70%, #a9cf7a00); }
.dk2-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; }
.dk2-brand { display: inline-flex; align-items: baseline; gap: 8px; min-height: var(--dk2-touch); padding-top: 12px; font-size: 24px; font-weight: var(--dk2-w-h); letter-spacing: -0.04em; line-height: 1; color: var(--dk2-ink); text-decoration: none; }
.dk2-brand small { font-size: 11px; font-weight: var(--dk2-w-s); letter-spacing: .16em; color: var(--dk2-acc); }
.dk2-nav { display: flex; gap: 2px; }
.dk2-nav a { display: inline-flex; align-items: center; min-height: var(--dk2-touch); padding: 0 9px; border-radius: var(--dk2-r-full); font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); text-decoration: none; white-space: nowrap; }
.dk2-nav a:hover { color: var(--dk2-ink); background: var(--dk2-fill-1); }
.dk2-nav .dk2-nav-pc { display: none; }
.dk2-top .dk2-hdr-cta { display: none; }

/* 언어 전환 한 줄(4언어 공통): 현재 언어는 aria-current */
.dk2-langbar { display: flex; justify-content: flex-end; }
.dk2-lang { display: flex; gap: 2px; }
.dk2-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--dk2-r-full); font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); letter-spacing: .04em; color: var(--dk2-ink-2); text-decoration: none; white-space: nowrap; }
.dk2-lang a[aria-current] { color: var(--dk2-ink); background: var(--dk2-fill-2); }
@media (hover: hover) { .dk2-lang a:not([aria-current]):hover { color: var(--dk2-ink); background: var(--dk2-fill-1); } }
/* 중·일 본문은 글자 사이에서 줄을 바꿀 수 있어야 한다(keep-all은 한글·라틴 단어용) */
html[lang="zh"] body, html[lang="ja"] body { word-break: normal; line-break: strict; }
html[lang="zh"] { --dk2-font: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html[lang="ja"] { --dk2-font: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
html:not([lang="ko"]) .dk2-over { letter-spacing: .08em; }
@media (max-width: 479px) { html:not([lang="ko"]) .dk2-brand small { display: none; } }

/* 버튼: 알약. 주 = 와인 레드, 보조 = 흐린 면, 글자형 = 황동 */
.dk2-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--dk2-r-full); font: inherit; font-size: var(--dk2-fs-base); font-weight: var(--dk2-w-s); line-height: 1.2; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, var(--dk2-wine-hi), var(--dk2-wine)) var(--dk2-wine); box-shadow: var(--dk2-shadow-cta); }
.dk2-btn-lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
.dk2-btn-soft { background: var(--dk2-fill-2); color: var(--dk2-ink); box-shadow: none; }
.dk2-btn-text { min-height: var(--dk2-touch); padding: 0 16px; background: none; box-shadow: none; color: var(--dk2-acc); }
@media (hover: hover) {
  .dk2-btn:hover { background: var(--dk2-wine-hi); }
  .dk2-btn-soft:hover { background: var(--dk2-fill-3); }
  .dk2-btn-text:hover { background: var(--dk2-fill-1); }
}

/* 영업 상태 칩: 켜짐만 초록 점. JS 없으면 숨김 */
.dk2-state { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 12px; border-radius: var(--dk2-r-full); background: var(--dk2-fill-2); font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); line-height: 1.35; color: var(--dk2-ink-2); }
.dk2-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.dk2-state[data-open="1"] { color: var(--dk2-ink); }
.dk2-state[data-open="1"]::before { background: var(--dk2-ok); opacity: 1; box-shadow: 0 0 0 4px #3f8a4c2e; }
html:not(.js) .dk2-state { display: none; }

/* 히어로: 크림 면 + 천장 간접광(연두·따뜻한 빛) + 큰 h1 + 16:9 사진 + 사진에 걸친 월넛 유리 요약 */
.dk2-hero { position: relative; isolation: isolate; overflow: hidden; padding: 28px 0 56px; background: var(--dk2-bg); }
.dk2-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 26% at 30% 0%, #cfe8a65c, #cfe8a600 70%),
    radial-gradient(70% 40% at 100% 10%, #fff8ec, #fff8ec00 70%),
    linear-gradient(180deg, #f7f1e7, var(--dk2-bg) 70%, var(--dk2-bg-alt)); }
.dk2-hero-grid { display: grid; gap: 28px; }
.dk2-hero-copy { display: grid; gap: 16px; justify-items: start; }
.dk2-kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); letter-spacing: var(--dk2-label); color: var(--dk2-acc); }
.dk2-h1 { font-size: 40px; font-weight: var(--dk2-w-h); line-height: 1.08; letter-spacing: -0.035em; }
.dk2-w { white-space: nowrap; }
.dk2-h1 .dk2-w-name { color: var(--dk2-wine); }
.dk2-lead { max-width: 30em; font-size: var(--dk2-fs-base); line-height: 1.7; color: var(--dk2-ink-2); }
.dk2-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 420px; margin-top: 4px; }
.dk2-cta .dk2-btn-lg { padding: 0 12px; font-size: var(--dk2-fs-base); }
.dk2-shotwrap { position: relative; }
.dk2-shot { position: relative; }
.dk2-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--dk2-r-lg); background: var(--dk2-bg-alt); box-shadow: 0 30px 60px #3b2a1a2e; }
.dk2-shot figcaption { position: absolute; right: 12px; top: 12px; padding: 2px 10px; border-radius: var(--dk2-r-full); background: #1d1510b3; font-size: 12px; color: #fff; }

/* 유리(backdrop-filter) 2장: 히어로 요약(사진 위), 문의 카드(광원 위). 월넛 틴트 */
.dk2-glass { position: relative; isolation: isolate; border-radius: var(--dk2-r-lg); background: #1d1510eb; box-shadow: var(--dk2-shadow-glass); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .dk2-glass { background: linear-gradient(#fff4df10, #fff4df10), #1d1510d6; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
}
.dk2-glass::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #e6f3cfb3 0, #fff4df4d 30%, #fff4df14 62%, #fff4df0a 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.dk2-sum { position: relative; z-index: 2; margin: -40px 12px 0; padding: 18px 20px; }
.dk2-sum dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dk2-sum dl > div:first-child { grid-column: 1 / -1; }
.dk2-sum dt { font-size: var(--dk2-fs-xs); color: var(--dk2-ink-2); }
.dk2-sum dd { margin-top: 2px; font-size: 18px; font-weight: var(--dk2-w-s); letter-spacing: -0.01em; color: var(--dk2-ink); font-variant-numeric: tabular-nums; }

/* 카드 A: 테두리 없는 톤 타일 / 카드 B: 그룹 리스트 */
.dk2-tile { position: relative; border-radius: var(--dk2-r-lg); padding: 20px; background: linear-gradient(180deg, var(--dk2-tile-a), var(--dk2-tile-b)) var(--dk2-tile-b); box-shadow: var(--dk2-shadow-tile); }
.dk2-glist { border-radius: var(--dk2-r-lg); padding: 6px 0; background: linear-gradient(180deg, var(--dk2-tile-a), var(--dk2-tile-b)) var(--dk2-tile-b); box-shadow: var(--dk2-shadow-tile); }
.dk2-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 20px; }
.dk2-row + .dk2-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--dk2-line); }
.dk2-row dt { display: flex; align-items: center; gap: 12px; font-size: var(--dk2-fs-sm); color: var(--dk2-ink-2); }
.dk2-row dd { text-align: right; font-size: var(--dk2-fs-base); font-weight: var(--dk2-w-s); color: var(--dk2-ink); }
.dk2-row dd small { display: block; font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-r); color: var(--dk2-ink-2); }
.dk2-ib { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--dk2-r-sm); background: var(--dk2-acc-tint); color: var(--dk2-acc); }
.dk2-ib .dk2-ic { width: 18px; height: 18px; }
.dk2-basics { display: grid; gap: 32px; }
.dk2-basics .dk2-head { margin-bottom: 0; }

/* 영업시간(월넛): 요일 7칸 띠 + 큰 시각 타일 */
.dk2-hours-sec { position: relative; overflow: hidden; isolation: isolate; }
.dk2-hours-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 40% at 85% 0%, #cfe8a621, #cfe8a600 70%), radial-gradient(45% 50% at 0% 100%, #8c1a2b3d, #8c1a2b00 70%); }
.dk2-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.dk2-week li { display: grid; justify-items: center; gap: 2px; padding: 12px 0 10px; border-radius: var(--dk2-r-sm); background: var(--dk2-fill-1); font-size: 12px; color: var(--dk2-ink-2); }
.dk2-week li b { font-size: var(--dk2-fs-base); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); }
.dk2-week li.is-on { background: linear-gradient(180deg, #dcb77438, #dcb77412); color: var(--dk2-acc); }
.dk2-week li.is-on b { color: var(--dk2-ink); }
.dk2-hours { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.dk2-hours > * { grid-column: 1 / -1; min-width: 0; }
.dk2-t { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 148px; }
.dk2-t-half { grid-column: span 6; }
.dk2-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: var(--dk2-r-full); background: var(--dk2-fill-2); font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); }
.dk2-tag .dk2-ic { width: 14px; height: 14px; }
.dk2-big { font-size: var(--dk2-fs-2xl); font-weight: var(--dk2-w-h); line-height: 1; letter-spacing: var(--dk2-track); color: var(--dk2-ink); font-variant-numeric: tabular-nums; }
.dk2-to { margin-top: 8px; color: var(--dk2-ink-2); font-variant-numeric: tabular-nums; }
.dk2-t-main { background: radial-gradient(120% 90% at 100% 0%, #cfe8a61f, #cfe8a600 55%), linear-gradient(180deg, #47362a, #33261d) #33261d; }
.dk2-t-main .dk2-big { font-size: 52px; }
.dk2-t-off .dk2-big, .dk2-t-hol .dk2-big { font-size: var(--dk2-fs-xl); }
.dk2-hours-note { margin-top: 20px; }

/* 요금(크림): 통화 준비 리스트 타일 + 월넛 문구 도우미 */
.dk2-price { display: grid; gap: 12px; align-items: start; }
.dk2-price h3 { margin: 0 0 14px; font-size: var(--dk2-fs-lg); font-weight: var(--dk2-w-h); }
.dk2-checks { display: grid; gap: 2px; }
.dk2-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; color: var(--dk2-ink); }
.dk2-checks .dk2-ic { width: 18px; height: 18px; margin-top: 3px; color: var(--dk2-acc); }
.dk2-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--dk2-r-full); background: var(--dk2-num-bg); color: var(--dk2-num-fg); font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-h); }
.dk2-split { height: 1px; margin: 16px 0; background: var(--dk2-line); }
.dk2-tc { margin-top: 16px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--dk2-line); font-size: var(--dk2-fs-sm); color: var(--dk2-ink-2); }
.dk2-help { padding: 20px; }
.dk2-help .dk2-note { margin: -6px 0 18px; }
.dk2-help fieldset { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.dk2-help legend, .dk2-lab { display: block; margin-bottom: 8px; padding: 0; font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); }
.dk2-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dk2-chip { position: relative; display: block; }
.dk2-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dk2-chip span { display: grid; place-items: center; min-height: 48px; padding: 0 4px; border-radius: var(--dk2-r-full); background: var(--dk2-fill-2); font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink); white-space: nowrap; }
.dk2-chip input:checked + span { background: #f7efe3; color: #23190f; }
.dk2-chip input:focus-visible + span { outline: 2px solid var(--dk2-acc); outline-offset: 2px; }
.dk2-sel { width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--dk2-r-sm); background: var(--dk2-fill-2); color: var(--dk2-ink); font: inherit; }
.dk2-sel option { color: #111; background: #fff; }
.dk2-out { min-height: 78px; margin: 16px 0 12px; padding: 14px 16px; border-radius: var(--dk2-r-sm); background: var(--dk2-inset); font-size: var(--dk2-fs-base); line-height: 1.6; color: var(--dk2-ink); }
.dk2-out.is-empty { color: var(--dk2-ink-2); font-size: var(--dk2-fs-sm); }
.dk2-help-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dk2-nojs-only { display: none; }
html:not(.js) .dk2-help-live { display: none; }
html:not(.js) .dk2-nojs-only { display: block; }

/* 복사 버튼(주소·문구 공통): 두 라벨 겹쳐 폭 고정 */
.dk2-ac { display: inline-grid; align-items: center; justify-items: center; min-width: 44px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--dk2-r-full); background: var(--dk2-fill-2); color: var(--dk2-ink); font: inherit; font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); cursor: pointer; white-space: nowrap; }
.dk2-ac > span { grid-area: 1 / 1; }
.dk2-ac .dk2-l2 { visibility: hidden; display: inline-flex; align-items: center; gap: 6px; }
.dk2-ac .dk2-l2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dk2-ac.is-ok { background: var(--dk2-ink); color: var(--dk2-bg); }
.dk2-ac.is-ok .dk2-l1 { visibility: hidden; }
.dk2-ac.is-ok .dk2-l2 { visibility: visible; }
.dk2-ac[disabled] { opacity: .5; cursor: default; }
@media (hover: hover) { .dk2-ac:not(.is-ok):not([disabled]):hover { background: var(--dk2-fill-3); } }
html:not(.js) .dk2-ac { display: none; }

/* 이용 순서: 4칸, 큰 황동 숫자 */
.dk2-steps { display: grid; gap: 12px; }
.dk2-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 20px; border-radius: var(--dk2-r-lg); background: linear-gradient(180deg, var(--dk2-tile-a), var(--dk2-tile-b)) var(--dk2-tile-b); box-shadow: var(--dk2-shadow-tile); }
.dk2-step-no { grid-row: span 2; font-size: 40px; font-weight: var(--dk2-w-h); line-height: 1; letter-spacing: -0.04em; color: var(--dk2-acc); font-variant-numeric: tabular-nums; }
.dk2-step h3 { font-size: 18px; }
.dk2-step p { font-size: var(--dk2-fs-sm); line-height: 1.65; color: var(--dk2-ink-2); }

/* 소개·공간(월넛): 크림 사진이 어두운 판 위에 뜨게 */
.dk2-about { display: grid; gap: 24px; }
.dk2-about .dk2-head { margin-bottom: 0; }
.dk2-prose { max-width: var(--dk2-prose); }
.dk2-prose p { line-height: 1.8; color: var(--dk2-ink-2); }
.dk2-prose .dk2-lead-p { font-size: 18px; line-height: 1.7; color: var(--dk2-ink); }
.dk2-prose p + p { margin-top: 1.1em; }
.dk2-space { display: grid; gap: 28px; margin-top: 72px; }
.dk2-space .dk2-head { margin-bottom: 0; }
.dk2-facts { border-radius: var(--dk2-r-lg); padding: 6px 20px; background: linear-gradient(180deg, var(--dk2-tile-a), var(--dk2-tile-b)) var(--dk2-tile-b); box-shadow: var(--dk2-shadow-tile); }
.dk2-facts li { position: relative; display: flex; gap: 12px; padding: 14px 0; color: var(--dk2-ink); line-height: 1.6; }
.dk2-facts li + li::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; height: 1px; background: var(--dk2-line); }
.dk2-gal { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 8px; scroll-padding: 0 20px; }
.dk2-gal figure { flex: 0 0 74%; scroll-snap-align: start; }
.dk2-gal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--dk2-r-lg); background: var(--dk2-bg-alt); }
.dk2-gal figcaption { margin-top: 8px; font-size: var(--dk2-fs-xs); color: var(--dk2-ink-2); }

/* 찾아오는 길(크림): 주소 큰 글 + 복사, 방문 전 확인 */
.dk2-way { display: grid; gap: 12px; align-items: start; }
.dk2-addrbox { padding: 24px 20px; }
.dk2-addr-k { display: flex; align-items: center; gap: 10px; font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); }
.dk2-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.dk2-addr strong { font-size: 22px; font-weight: var(--dk2-w-h); letter-spacing: -0.01em; line-height: 1.3; color: var(--dk2-ink); }
.dk2-addrbox .dk2-note { margin-top: 14px; }
.dk2-cue h3 { margin-bottom: 8px; font-size: 18px; }
.dk2-cue-btn { width: 100%; margin-top: 16px; }

/* FAQ(크림2): 그룹 리스트 1장, 오른쪽 꺾쇠 */
.dk2-faqs { display: grid; gap: 32px; }
.dk2-faqs .dk2-head { margin-bottom: 0; }
.dk2-faq { border-radius: var(--dk2-r-lg); padding: 4px 0; background: linear-gradient(180deg, var(--dk2-tile-a), var(--dk2-tile-b)) var(--dk2-tile-b); box-shadow: var(--dk2-shadow-tile); }
.dk2-faq details { position: relative; }
.dk2-faq details + details::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--dk2-line); }
.dk2-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 20px; cursor: pointer; font-weight: var(--dk2-w-s); color: var(--dk2-ink); }
.dk2-faq summary::-webkit-details-marker { display: none; }
.dk2-chev { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--dk2-r-sm); background: var(--dk2-acc-tint); color: var(--dk2-acc); transition: transform .2s ease-out; }
.dk2-chev .dk2-ic { width: 16px; height: 16px; }
.dk2-faq details[open] .dk2-chev { transform: rotate(180deg); }
.dk2-faq .dk2-a { padding: 0 20px 20px; color: var(--dk2-ink-2); line-height: 1.7; }

/* 문의(월넛 + 와인 광원) + 유리 카드 */
.dk2-contact { position: relative; overflow: hidden; isolation: isolate; background: var(--dk2-walnut-deep); }
.dk2-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 55% at 12% 8%, #8c1a2b80, #8c1a2b00 70%), radial-gradient(40% 50% at 92% 100%, #cfe8a62e, #cfe8a600 70%), radial-gradient(60% 40% at 50% 50%, #fff4df14, #fff4df00 70%); }
.dk2-card-c { max-width: 760px; margin: 0 auto; padding: 44px 22px 32px; text-align: center; }
.dk2-card-c h2 { font-size: var(--dk2-fs-2xl); }
.dk2-card-c .dk2-note { max-width: 28em; margin: 14px auto 0; }
.dk2-c-act { display: grid; justify-items: center; gap: 8px; margin-top: 28px; }
.dk2-c-act .dk2-btn-lg { width: 100%; max-width: 360px; }

/* 푸터(월넛 깊은 면) */
.dk2-foot { position: relative; padding: 48px 0; background: var(--dk2-walnut-deep); font-size: 14px; }
.dk2-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #a9cf7a00, #a9cf7a73, #a9cf7a00); }
.dk2-foot-brand { display: block; margin-bottom: 10px; font-size: 22px; font-weight: var(--dk2-w-h); letter-spacing: -0.04em; color: var(--dk2-ink); }
.dk2-foot p { color: var(--dk2-ink-2); }
.dk2-foot p + p { margin-top: 6px; }
.dk2-adult { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.dk2-adult b { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dk2-wine); color: #fff; font-size: 12px; }
.dk2-proofbtn { margin-top: 16px; min-height: 44px; padding: 0 18px; font-size: var(--dk2-fs-sm); }
html:not(.js) .dk2-proofbtn { display: none; }
.dk2-src { margin-top: 16px; border-radius: var(--dk2-r-sm); background: var(--dk2-fill-1); }
.dk2-src summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: var(--dk2-w-s); color: var(--dk2-ink); }
.dk2-src dl, .dk2-proof dl { display: grid; gap: 10px; padding: 0 16px 16px; }
.dk2-src dt, .dk2-proof dt { font-size: var(--dk2-fs-xs); color: var(--dk2-ink-2); }
.dk2-src dd, .dk2-proof dd { color: var(--dk2-ink); }
html.js .dk2-src { display: none; }
.dk2-proof { width: min(92vw, 520px); padding: 24px 20px 20px; border: 0; border-radius: var(--dk2-r-lg); box-shadow: var(--dk2-shadow-glass); }
.dk2-proof::backdrop { background: #150f0bcc; }
.dk2-proof h2 { margin-bottom: 16px; font-size: var(--dk2-fs-lg); }
.dk2-proof dl { padding: 0 0 20px; }

/* 하단 고정 바(모바일 전용, 월넛 불투명) */
.dk2-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .dk2-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .dk2-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #a9cf7a00, #a9cf7a8c, #a9cf7a00); }
  .dk2-bar .dk2-btn { min-height: var(--dk2-touch); padding: 0 12px; font-size: var(--dk2-fs-sm); }
  .dk2-bar .dk2-btn:only-child { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  .dk2-nav a { padding: 0 7px; font-size: 14px; }
  .dk2-brand small { display: none; }
  .dk2-h1 { font-size: 36px; }
  .dk2-chip span { font-size: 14px; }
  .dk2-cta { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  .dk2-wrap { padding: 0 32px; }
  .dk2-gal { margin: 0 -32px; padding: 0 32px 8px; }
  .dk2-gal figure { flex-basis: 44%; }
  .dk2-kv { display: grid; grid-template-columns: 1fr 1fr; }
  .dk2-kv .dk2-row:nth-child(2)::before { display: none; }
  .dk2-kv .dk2-row:nth-child(even) { box-shadow: inset 1px 0 0 var(--dk2-line); }
  .dk2-steps { grid-template-columns: 1fr 1fr; }
  .dk2-cta { grid-template-columns: none; grid-auto-flow: column; justify-content: start; width: auto; max-width: none; }
  .dk2-cta .dk2-btn-lg { padding: 0 32px; font-size: 17px; }
  .dk2-sum { margin: -48px 24px 0; max-width: 540px; }
  .dk2-sum dl { grid-template-columns: 1.4fr 1fr 1fr; }
  .dk2-sum dl > div:first-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  .dk2-sec { padding: 112px 0; }
  h2 { font-size: var(--dk2-fs-3xl); }
  .dk2-head { margin-bottom: 48px; }
  .dk2-hdr { min-height: 76px; }
  .dk2-brand { font-size: 28px; }
  .dk2-nav { margin-left: auto; margin-right: 16px; }
  .dk2-nav a { padding: 0 12px; }
  .dk2-nav .dk2-nav-pc { display: inline-flex; }
  .dk2-top .dk2-hdr-cta { display: inline-flex; min-height: var(--dk2-touch); padding: 0 20px; font-size: var(--dk2-fs-sm); }
  .dk2-hero { padding: 56px 0 136px; }
  #basics { padding-top: 88px; }
  .dk2-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .dk2-hero-copy { gap: 22px; }
  .dk2-h1 { font-size: 64px; line-height: 1.04; }
  .dk2-lead { font-size: 18px; }
  .dk2-sum { position: absolute; left: -48px; bottom: -64px; margin: 0; width: 500px; max-width: none; }
  /* 사진을 화면 오른쪽 끝까지 붙여 크게(히어로 overflow hidden이 가둠) */
  .dk2-shotwrap { margin-right: calc(-1 * max(32px, (100vw - var(--dk2-container)) / 2 + 32px)); }
  .dk2-shot img { border-radius: var(--dk2-r-lg) 0 0 var(--dk2-r-lg); }
  .dk2-shot figcaption { right: 24px; }
  .dk2-basics { grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
  .dk2-hours-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
  .dk2-hours-wrap .dk2-head { margin-bottom: 0; }
  .dk2-price { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
  .dk2-help { padding: 28px; }
  .dk2-tile { padding: 28px; }
  .dk2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .dk2-step { grid-template-columns: 1fr; gap: 12px; padding: 28px 24px; }
  .dk2-step-no { grid-row: auto; font-size: 48px; }
  .dk2-about { grid-template-columns: 4fr 8fr; gap: 48px; }
  .dk2-prose .dk2-lead-p { font-size: var(--dk2-fs-lg); }
  .dk2-space { grid-template-columns: 4fr 8fr; column-gap: 48px; row-gap: 40px; margin-top: 96px; }
  .dk2-gal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .dk2-gal figure { flex: none; }
  .dk2-gal figure:nth-child(2) { margin-top: 56px; }
  .dk2-way-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
  .dk2-way-wrap .dk2-head { margin-bottom: 0; }
  .dk2-way { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
  .dk2-addrbox { padding: 32px 28px; }
  .dk2-addr strong { font-size: 28px; }
  .dk2-faqs { grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
  .dk2-faq .dk2-a { padding-right: 72px; }
  .dk2-card-c { padding: 64px 64px 48px; }
  .dk2-card-c h2 { font-size: var(--dk2-fs-4xl); }
  .dk2-c-act .dk2-btn-lg { width: auto; min-width: 280px; }
}
/* 시간 범위·짧은 낱말을 한 줄로 묶음(4언어 공통) */
.dk2-nw { white-space: nowrap; }