/* 도깨비 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; }
[hidden] { display: none !important; }
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); }
/* 3D 크리스털 샹들리에(v2.1): 히어로 천장(연두 간접광 헤어라인)에서 황동 사슬로 내려온다. 정지 webp가 먼저, JS가 같은 상자에 캔버스를 겹친다(레이아웃 변화 0) */
.dk2-chand { position: relative; isolation: isolate; justify-self: end; width: 136px; height: 136px; margin: -4px 0 -44px; pointer-events: none; }
.dk2-chand img { width: 100%; height: 100%; }
.dk2-chand::before { content: ""; position: absolute; left: 50%; bottom: 97%; width: 2px; height: 640px; margin-left: -1px; background: linear-gradient(180deg, #8a6a3300, #8a6a33 40%, #9c7a40); }
.dk2-chand::after { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: 0; bottom: -20%; background: radial-gradient(42% 30% at 50% 50%, #ffe9b866, #ffe9b800 100%), radial-gradient(closest-side, #fff9ecf2, #fff9ec00 75%), radial-gradient(50% 30% at 50% 6%, #cfe8a64d, #cfe8a600 70%); }
html[lang="en"] .dk2-chand { margin-bottom: 4px; }
.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; }
/* 샹들리에 모션(v2.2): WebGL이 돌면 dk2-3d.js가 진자·반짝임·스크롤 회전을 그리고 상자에 is-3d를 단다.
   WebGL이 없거나(정지 webp만) JS가 꺼져도 정지 webp가 사슬 이음점(위 가운데)을 축으로 ±2.5°, 6초 주기로 흔들린다. 동작 줄이기면 아래 공통 규칙이 멈춘다 */
@keyframes dk2-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.dk2-chand img { transform-origin: 50% 0; animation: dk2-sway 3s ease-in-out infinite alternate; }
.dk2-chand.is-3d img { animation: none; }
/* 모바일·태블릿(1023 이하, 한 단): 샹들리에를 히어로 사진 카드와 한 구도로 묶는다.
   글 열의 맨 끝(CTA 아래)으로 순서를 옮겨 카드 위쪽 오른쪽 모서리에 걸고, 사슬은 카드 위 가장자리 바깥(상자 위)에서 시작한다.
   상자 = 화면 폭 31%(104~200px). 아래 여백을 음수로 줘 상자 아래 29%(본체 높이의 약 1/3)가 카드 안으로 들어간다.
   카드 오른쪽 위에 있던 AI 캡션은 샹들리에와 겹치지 않게 왼쪽 위로 옮긴다 */
@media (max-width: 1023px) {
  .dk2-chand, html[lang="en"] .dk2-chand { order: 1; z-index: 3; width: clamp(104px, 31vw, 200px); height: clamp(104px, 31vw, 200px); margin: 0 0 calc(-0.294 * clamp(104px, 31vw, 200px) - 28px); }
  .dk2-chand::before { bottom: 99%; height: 14px; background: linear-gradient(180deg, #8a6a3300, #8a6a33 70%, #9c7a40); }
  /* 천장 연두빛(위 가장자리에서 잘려 띠가 보임)은 빼고, 따뜻한 빛 번짐만 상자 안에서 사라지게 */
  .dk2-chand::after { top: -10%; bottom: -10%; background: radial-gradient(closest-side, #fff9ecd9, #fff9ec00 80%), radial-gradient(40% 28% at 50% 55%, #ffe9b855, #ffe9b800 100%); }
  .dk2-shot figcaption { right: auto; left: 12px; }
}

/* 유리(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: 8px; }
.dk2-send { flex: 1 1 190px; min-height: 48px; padding: 0 16px; font-size: var(--dk2-fs-sm); }
.dk2-send[aria-disabled="true"] { opacity: .42; box-shadow: none; cursor: default; }
.dk2-copywrap { flex: 0 0 auto; }
.dk2-help .dk2-help-hint { margin: 12px 0 0; font-size: var(--dk2-fs-xs); }
.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); }
/* 층별 룸 띠(v2.1): 건물 단면처럼 4층 → 지하 1층 순서, 막대 길이 = 룸 수 */
.dk2-floors { border-radius: var(--dk2-r-lg); padding: 18px 20px; background: linear-gradient(180deg, var(--dk2-tile-a), var(--dk2-tile-b)) var(--dk2-tile-b); box-shadow: var(--dk2-shadow-tile); }
.dk2-floors .dk2-cap { margin: 0 0 6px; }
.dk2-floor-list li { position: relative; display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 3.2em; align-items: center; gap: 12px; min-height: 44px; }
.dk2-floor-list li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--dk2-line); }
.dk2-fl { font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink-2); white-space: nowrap; }
.dk2-fbar { display: block; height: 8px; width: calc(var(--n) * 10%); border-radius: var(--dk2-r-full); background: linear-gradient(90deg, #b8913f, #dcb774) #c9a259; box-shadow: 0 0 12px #dcb77440; }
.dk2-floor-list b { text-align: right; font-weight: var(--dk2-w-s); color: var(--dk2-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk2-floor-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--dk2-line); font-size: var(--dk2-fs-sm); color: var(--dk2-ink-2); }
.dk2-floor-sum b { font-size: 18px; font-weight: var(--dk2-w-h); color: var(--dk2-ink); }
.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-road { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: var(--dk2-fs-base); font-weight: var(--dk2-w-s); color: var(--dk2-ink); }
.dk2-road-k { padding: 1px 10px; border-radius: var(--dk2-r-full); background: var(--dk2-acc-tint); font-size: var(--dk2-fs-xs); color: var(--dk2-acc); }
.dk2-route { margin-top: 16px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--dk2-line); }
.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: 20px; }
.dk2-c-act .dk2-btn-lg { width: 100%; max-width: 360px; }
.dk2-c-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; }
.dk2-c-sub .dk2-btn { min-height: 48px; padding: 0 12px; font-size: var(--dk2-fs-sm); }
.dk2-c-sub .dk2-btn:only-child { grid-column: 1 / -1; }
/* 연락처 글자(v2.1): 번호를 글자로 보이게, tel 링크와 같이 */
.dk2-telno { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 22px; }
.dk2-telno-k { font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); letter-spacing: var(--dk2-label); color: var(--dk2-acc); }
.dk2-telno a { display: inline-flex; align-items: center; min-height: 48px; font-size: 30px; font-weight: var(--dk2-w-h); letter-spacing: .01em; color: var(--dk2-ink); font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #dcb77480; text-underline-offset: 7px; }

/* 푸터(월넛 깊은 면, v2.1): 루나식 3단 + 바로가기 + 저작권 줄 + 검증 해시·최종 수정일 + 다이얼로그 둘 */
.dk2-foot { position: relative; padding: 56px 0 40px; background: var(--dk2-walnut-deep); font-size: 14px; line-height: 1.65; }
.dk2-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #a9cf7a00, #a9cf7a73, #a9cf7a00); }
.dk2-foot-cols { display: grid; gap: 28px; }
.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 .dk2-foot-h { margin-bottom: 8px; font-size: var(--dk2-fs-xs); font-weight: var(--dk2-w-s); letter-spacing: var(--dk2-label); line-height: 1.4; color: var(--dk2-acc); }
html:not([lang="ko"]) .dk2-foot .dk2-foot-h { letter-spacing: .08em; }
.dk2-foot address { display: grid; gap: 2px; font-style: normal; color: var(--dk2-ink-2); }
.dk2-foot address strong { font-weight: var(--dk2-w-s); color: var(--dk2-ink); }
.dk2-foot-tel { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -10.5px; font-weight: var(--dk2-w-s); color: var(--dk2-ink); font-variant-numeric: tabular-nums; text-underline-offset: 4px; text-decoration-color: #dcb77480; }
.dk2-foot p { color: var(--dk2-ink-2); }
.dk2-foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.dk2-foot-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: var(--dk2-w-s); color: var(--dk2-ink); text-underline-offset: 5px; text-decoration-color: #dcb77480; }
.dk2-adult { display: flex; align-items: center; gap: 10px; }
.dk2-adult + p { margin-top: 8px; }
.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-foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 32px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--dk2-line); }
.dk2-foot-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--dk2-ink-2); text-decoration: none; }
@media (hover: hover) { .dk2-foot-nav a:hover { color: var(--dk2-ink); } }
.dk2-foot-legal { display: grid; gap: 6px; margin-top: 12px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--dk2-line); font-size: 13px; }
.dk2-foot-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; color: var(--dk2-ink); }
.dk2-foot-proof .dk2-ic { width: 18px; height: 18px; flex: none; color: var(--dk2-acc); }
/* v2.3: 방패 아이콘과 라벨을 한 묶음(줄바꿈 없음)으로 — 좁은 폭에서는 해시 칩만 다음 줄로 내려간다 */
.dk2-proof-lab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dk2-foot-proof > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dk2-foot-proof time { font-variant-numeric: tabular-nums; font-weight: var(--dk2-w-s); }
.dk2-hash { padding: 1px 10px; border-radius: var(--dk2-r-full); background: var(--dk2-fill-2); font: 600 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; color: var(--dk2-acc); overflow-wrap: anywhere; }
/* 증명 대상 해시(64자, v2.2 설 결정): 알약이 아니라 모서리 8px 사각 상자, 등폭 12px, 아무 글자에서나 줄바꿈. 16자 칩은 위 알약 그대로.
   빌드가 data-fill을 지워도 맞도록 클래스(dk2-hash-long)와 구조 선택자(dd 첫 자식이고 뒤에 링크가 붙는 해시) 둘 다 건다 */
.dk2-hash.dk2-hash-long, .dk2-dlg-body dd > .dk2-hash:first-child:not(:only-child), .dk2-src-body dd > .dk2-hash:first-child:not(:only-child) {
  display: block; flex: 1 1 100%; max-width: 100%; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.dk2-pending { padding: 1px 10px; border-radius: var(--dk2-r-full); box-shadow: inset 0 0 0 1px var(--dk2-acc); font-size: 13px; font-weight: var(--dk2-w-s); color: var(--dk2-acc); }
.dk2-proofs { display: flex; flex-wrap: wrap; gap: 0 22px; }
.dk2-linkbtn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--dk2-fs-sm); font-weight: var(--dk2-w-s); color: var(--dk2-ink); text-decoration: underline; text-decoration-color: #dcb7748c; text-underline-offset: 5px; cursor: pointer; }
@media (hover: hover) { .dk2-linkbtn:hover { text-decoration-color: var(--dk2-acc); } }
html:not(.js) .dk2-linkbtn { display: none; }
.dk2-src { margin-top: 12px; 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-body { padding: 0 16px 16px; font-size: 14px; }
html.js .dk2-src { display: none; }
/* 다이얼로그(검증·변경 이력 / 저작권 안내): 윗줄 아이콘·제목·X, 가운데 스크롤, 아래 닫기 */
.dk2-proof { width: min(92vw, 600px); max-height: min(86vh, 780px); padding: 0; border: 0; border-radius: var(--dk2-r-lg); box-shadow: var(--dk2-shadow-glass); overflow: hidden; }
.dk2-proof[open] { display: flex; flex-direction: column; }
.dk2-proof::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: linear-gradient(90deg, #dcb77400, #dcb774, #cfe8a6, #dcb77400); }
.dk2-proof::backdrop { background: radial-gradient(60% 50% at 20% 15%, #8c1a2b33, #8c1a2b00 70%), #150f0bcc; }
.dk2-dlg-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 14px 14px 22px; box-shadow: inset 0 -1px 0 var(--dk2-line); }
.dk2-dlg-top > .dk2-ic { color: var(--dk2-acc); }
.dk2-dlg-top h2 { font-size: var(--dk2-fs-lg); line-height: 1.3; }
.dk2-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--dk2-fill-2); color: var(--dk2-ink); cursor: pointer; }
.dk2-dlg-body { padding: 16px 22px 20px; overflow: auto; font-size: 15px; }
.dk2-dlg-body > .dk2-note { margin-bottom: 4px; }
.dk2-dlg-body h3, .dk2-src-body h3 { margin: 18px 0 6px; font-size: 15px; font-weight: var(--dk2-w-h); color: var(--dk2-ink); }
.dk2-dlg-body dl > div, .dk2-src-body dl > div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--dk2-line); }
.dk2-dlg-body dt, .dk2-src-body dt { font-size: 13px; color: var(--dk2-ink-2); }
.dk2-dlg-body dd, .dk2-src-body dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--dk2-ink); overflow-wrap: anywhere; }
.dk2-dlg-body dd a, .dk2-src-body dd a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -7px; color: var(--dk2-acc); text-underline-offset: 3px; }
/* v2.2: 44px 링크 터치 상자(위아래 -7px)가 다음 줄 해시와 겹치지 않게 dd 줄 간격 8px */
.dk2-dlg-body dd, .dk2-src-body dd { row-gap: 8px; }
.dk2-log { display: grid; margin-left: 6px; box-shadow: inset 1px 0 0 var(--dk2-line); }
.dk2-log li { position: relative; display: grid; gap: 2px; padding: 2px 0 12px 18px; color: var(--dk2-ink-2); }
.dk2-log li::before { content: ""; position: absolute; left: -5px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--dk2-bg); box-shadow: inset 0 0 0 2px var(--dk2-ink-2); }
.dk2-log li:first-child::before { box-shadow: inset 0 0 0 2px var(--dk2-acc); }
.dk2-log li > :first-child { font-size: 13px; font-weight: var(--dk2-w-h); color: var(--dk2-ink); font-variant-numeric: tabular-nums; }
.dk2-law { display: grid; gap: 12px; counter-reset: dk2law; }
.dk2-law li { counter-increment: dk2law; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; color: var(--dk2-ink-2); line-height: 1.65; }
.dk2-law li::before { content: counter(dk2law); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dk2-acc-tint); color: var(--dk2-acc); font-size: 13px; font-weight: var(--dk2-w-h); }
.dk2-src-body .dk2-law { margin-top: 4px; }
.dk2-dlg-foot { padding: 12px 22px 18px; box-shadow: inset 0 1px 0 var(--dk2-line); }
.dk2-dlg-foot .dk2-btn { width: 100%; min-height: 48px; }

/* 하단 고정 바(모바일 전용, 월넛 불투명) */
.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(76px + env(safe-area-inset-bottom, 0px)); }
  /* 전화(주, 와인) · 문자. 두 칸이 바를 채운다 */
  .dk2-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 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 { flex-direction: column; gap: 2px; min-height: 54px; padding: 4px 6px; font-size: 13px; }
  .dk2-bar .dk2-btn .dk2-ic { width: 18px; height: 18px; }
}
@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; }
  .dk2-foot-cols { grid-template-columns: 1fr 1fr; }
  .dk2-foot-cols > :last-child { grid-column: 1 / -1; }
}
@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-chand, html[lang="en"] .dk2-chand { width: 240px; height: 240px; margin: -12px 0 -62px 0; }
  .dk2-space .dk2-head { grid-column: 1; grid-row: 1; }
  .dk2-space .dk2-floors { grid-column: 1; grid-row: 2; align-self: start; }
  .dk2-space .dk2-facts { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .dk2-foot-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 48px; }
  .dk2-foot-cols > :last-child { grid-column: auto; }
  .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: 300px; }
  .dk2-c-sub { max-width: 300px; }
  .dk2-telno a { font-size: 40px; }
}
/* 시간 범위·짧은 낱말을 한 줄로 묶음(4언어 공통) */
.dk2-nw { white-space: nowrap; }