/* 모퉁이철물 — N20 무거운 푸터: 위는 분위기만, 실용 정보는 전부 바닥 격자에 */
:root {
  --paper: #EDE9DF;
  --ink: #1D1E1B;
  --muted: #5E5B52;
  --steel: #23262B;
  --steel-2: #2C3036;
  --line: #3E434A;
  --on-steel: #E9E6DD;
  --on-steel-mute: #A7A69E;
  --orange: #E0571C;
  --kakao: #FEE500;
  --head: 'Do Hyeon', 'Noto Sans KR', sans-serif;
  --label: 'Orbit', 'Noto Sans KR', monospace;
  --body: 'Noto Sans KR', -apple-system, 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.75 var(--body); word-break: keep-all; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 머리 — 이름 한 줄 + 아래로 가는 앵커 하나 */
.top { display: flex; align-items: baseline; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 22px 32px; }
.top__name { font: 400 26px/1 var(--head); text-decoration: none; letter-spacing: -0.5px; }
.top__since { font: 400 13px/1 var(--label); color: var(--muted); }
.top__down { margin-left: auto; padding: 9px 14px; border: 1.5px solid var(--ink); font: 400 14px/1 var(--label); text-decoration: none; white-space: nowrap; }
.top__down:hover { background: var(--ink); color: var(--paper); }

/* 짧은 첫 화면 — 사진 + 한 문장 */
.cover { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 5fr 7fr; align-items: end; gap: 0; }
.cover__img { grid-column: 2; grid-row: 1; width: 100%; height: min(58vh, 520px); object-fit: cover; }
.cover__text { grid-column: 1 / 3; grid-row: 1; align-self: end; padding: 0 0 36px; position: relative; z-index: 1; max-width: 520px; }
.cover h1 { font: 400 clamp(46px, 6.2vw, 78px)/1.12 var(--head); letter-spacing: -1px; background: var(--paper); display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 14px 0 0; }
.cover__sub { margin: 18px 0 0; font-size: 16px; color: var(--muted); }

/* 짧은 소개 한 덩어리 */
.intro { max-width: 1200px; margin: 0 auto; padding: 80px 32px 96px; display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 40px; align-items: start; }
.intro__h { font: 400 30px/1.3 var(--head); }
.intro__body p { margin: 0 0 14px; color: #34332E; }
.intro__fig { margin: 0; }
.intro__fig img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* ===== 무거운 바닥 ===== */
.base { background: var(--steel); color: var(--on-steel); padding: 72px 32px 40px; }
.base__head { max-width: 1200px; margin: 0 auto 28px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
.base__head h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.2 var(--head); }
.base__now { margin: 0; font: 400 14px/1.4 var(--label); color: var(--on-steel-mute); }

.grid {
  max-width: 1200px; margin: 0 auto; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "call  hours map"
    "park  items map"
    "news  faq   faq"
    "talk  biz   photo";
}
.cell { background: var(--steel); padding: 26px 26px 28px; margin: 0; min-width: 0; }
.cell--call { grid-area: call; background: var(--steel-2); }
.cell--hours { grid-area: hours; }
.cell--map { grid-area: map; display: flex; flex-direction: column; }
.cell--map .sketch { flex: 1 1 auto; min-height: 200px; }
.cell--map .btn, .cell--map .tag { align-self: flex-start; }
.cell--park { grid-area: park; }
.cell--items { grid-area: items; }
.cell--news { grid-area: news; }
.cell--faq { grid-area: faq; }
.cell--talk { grid-area: talk; }
.cell--biz { grid-area: biz; }
.cell--photo { grid-area: photo; padding: 0; }
.cell--photo img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }

/* 서랍 라벨 같은 번호표 */
.tag { display: inline-block; margin: 0 0 12px; padding: 3px 8px 2px; border: 1px solid var(--orange); color: var(--orange); font: 400 12px/1.3 var(--label); letter-spacing: 1px; }
.cell h3 { font: 400 22px/1.3 var(--head); margin: 0 0 14px; color: #fff; }
.cell p { margin: 0 0 10px; }
.small { font-size: 13.5px; color: var(--on-steel-mute); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
summary .tag { margin-bottom: 12px; }
summary h3 { position: relative; }

.call { display: block; margin: 4px 0 12px; font: 400 clamp(38px, 3.8vw, 50px)/1.05 var(--label); color: #fff; text-decoration: none; letter-spacing: -1px; white-space: nowrap; }
.call:hover { color: var(--orange); }
.call__note { font-size: 14px; color: var(--on-steel-mute); }
.today { margin-top: 16px !important; padding: 12px 14px; border-left: 3px solid var(--orange); background: rgba(255,255,255,.04); font-size: 15px; }

.hours { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 12px; }
.hours th, .hours td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; }
.hours th { width: 44px; font-weight: 500; }
.hours td { font-family: var(--label); text-align: right; }
.hours .off td { color: var(--on-steel-mute); font-family: var(--body); }
.hours .is-today th, .hours .is-today td { color: var(--orange); }
.hours .is-today th::after { content: ' 오늘'; font-size: 11px; }

.sketch { position: relative; height: 200px; margin: 0 0 16px; background: #1B1E22; border: 1px solid var(--line); overflow: hidden; }
.sketch__road { position: absolute; background: #3A3F46; }
.sketch__road--h { left: 0; right: 0; top: 58%; height: 22px; }
.sketch__road--v { top: 0; bottom: 0; left: 34%; width: 16px; }
.sketch__pin { position: absolute; left: calc(34% + 26px); top: calc(58% - 40px); padding: 4px 9px; background: var(--orange); color: #fff; font: 400 13px/1.3 var(--label); white-space: nowrap; }
.sketch__pin::after { content: ''; position: absolute; left: -7px; bottom: -8px; width: 10px; height: 10px; background: var(--orange); transform: rotate(45deg); }
.sketch__label { position: absolute; font: 400 11.5px/1.2 var(--label); color: var(--on-steel-mute); }
.sketch__label--a { left: 10px; top: calc(58% + 30px); }
.sketch__label--b { left: calc(34% + 24px); top: 12px; }
address { font-style: normal; margin: 0 0 16px; }

.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; background: var(--on-steel); color: var(--ink); font: 700 14.5px/1.3 var(--body); text-decoration: none; }
.btn:hover { background: var(--orange); color: #fff; }
.btn--kakao { background: var(--kakao); color: #191600; margin: 4px 0 14px; }
.mail { display: block; font: 400 14px/1.4 var(--label); color: var(--on-steel-mute); }

.items { margin: 0; padding: 0; list-style: none; }
.items li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; color: var(--on-steel-mute); }
.items b { display: inline-block; min-width: 92px; color: var(--on-steel); font-weight: 500; }

.news { margin: 0; padding: 0; list-style: none; }
.news li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.news time { font: 400 13px/1.9 var(--label); color: var(--orange); }

.faq { margin: 0; columns: 2; column-gap: 32px; }
.faq dt { font-weight: 500; color: #fff; break-after: avoid; }
.faq dd { margin: 4px 0 18px; font-size: 15px; color: var(--on-steel-mute); break-inside: avoid; }

.biz { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.biz dt { color: var(--on-steel-mute); }
.biz dd { margin: 0; }

.base__end { max-width: 1200px; margin: 24px auto 0; font: 400 12.5px/1.5 var(--label); color: var(--on-steel-mute); }

/* 퀵메뉴 — PC 오른쪽 세로 */
.quick { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; background: var(--ink); border: 1px solid #000; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; width: 76px; padding: 8px 4px; text-decoration: none; color: var(--paper); border-bottom: 1px solid #3a3a36; text-align: center; }
.quick a:last-child { border-bottom: 0; }
.quick a:first-child { background: var(--orange); color: #fff; }
.quick a:hover { background: #333; }
.quick__k { font: 400 15px/1.2 var(--head); }
.quick__v { font: 400 10px/1.3 var(--label); opacity: .85; margin-top: 3px; white-space: nowrap; }

@media (max-width: 1100px) {
  .quick { top: auto; bottom: 16px; transform: none; }
}

/* 태블릿 — 격자 2열 */
@media (max-width: 960px) {
  .intro { grid-template-columns: 1fr 1fr; }
  .intro__h { grid-column: 1 / -1; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "call hours" "map park" "map items" "news talk" "faq faq" "biz photo"; }
}

/* 모바일 — 1열 + 접이식 묶음, 하단 고정 바 */
@media (max-width: 720px) {
  .top { padding: 16px 18px; gap: 10px; flex-wrap: wrap; }
  .top__name { font-size: 23px; }
  .top__since { display: none; }
  .top__down { padding: 8px 11px; font-size: 13px; }
  .cover { display: block; padding: 0; }
  .cover__img { height: 300px; }
  .cover__text { padding: 22px 18px 0; max-width: none; }
  .cover h1 { font-size: 44px; display: block; background: none; padding: 0; }
  .cover__sub { margin-top: 10px; font-size: 15px; }
  .intro { display: block; padding: 48px 18px 56px; }
  .intro__h { font-size: 25px; margin-bottom: 14px; }
  .intro__fig { margin-top: 20px; }
  .intro__fig img { aspect-ratio: 3 / 2; }
  .base { padding: 48px 0 calc(28px + 64px + env(safe-area-inset-bottom)); }
  .base__head { padding: 0 18px; margin-bottom: 20px; }
  .grid { display: block; border-left: 0; border-right: 0; background: none; }
  .cell { padding: 22px 18px; border-bottom: 1px solid var(--line); }
  .cell--photo { padding: 0; }
  .cell--photo img { height: 220px; min-height: 0; }
  details > summary { display: flex; align-items: baseline; gap: 12px; }
  details > summary h3 { flex: 1; margin-bottom: 0; }
  details > summary::after { content: '+'; font: 400 22px/1 var(--label); color: var(--orange); }
  details[open] > summary::after { content: '–'; }
  details[open] > summary { margin-bottom: 14px; }
  summary .tag { margin-bottom: 0; }
  .faq { columns: 1; }
  .call { font-size: 40px; }
  .base__end { padding: 0 18px; }
  .quick { left: 0; right: 0; bottom: 0; top: auto; flex-direction: row; border: 0; border-top: 1px solid #000; padding-bottom: env(safe-area-inset-bottom); box-shadow: none; }
  .quick a { flex: 1; width: auto; min-height: 56px; border-bottom: 0; border-right: 1px solid #3a3a36; }
  .quick a:last-child { border-right: 0; }
  .quick__top { display: none !important; }
}

/* PC에서는 격자 칸이 모두 펼쳐진 채 고정 */
@media (min-width: 721px) {
  .grid summary { pointer-events: none; cursor: default; }
}

/* 오른쪽 세로 퀵메뉴가 본문 격자를 가리지 않게 여백 확보 */
@media (min-width: 1101px) and (max-width: 1440px) {
  .top, .cover, .intro, .base { padding-right: 112px; }
}