/* artscape.kr — 먹과 흰 국화 */
:root{
  --ink:#14161A; --ink2:#4A4F57; --ink3:#8B9099;
  --paper:#F6F5F2; --card:#FFF; --line:#E4E1DA;
  --gold:#A8842C; --night:#1C222E; --sale:#B4432E;
  --serif:'Noto Serif KR',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  --wrap:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;word-break:keep-all;padding-bottom:76px}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}

.util{background:var(--ink);color:#fff;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.util b{font-weight:600;letter-spacing:.02em}
.util a{text-decoration:none;opacity:.85}

.crumb{font-size:13px;color:var(--ink3);padding:16px 0 0}
.crumb a{text-decoration:none}
.crumb span{margin:0 6px;opacity:.5}

/* 히어로 */
.hero{display:block;padding:22px 0 30px}
.hero-body{min-width:0}
.eyebrow{font-size:13px;color:var(--gold);font-weight:600;letter-spacing:.04em}
h1{font-family:var(--serif);font-size:30px;line-height:1.32;font-weight:700;
  margin:8px 0 0;letter-spacing:-.01em}
h1 small{display:block;font-family:var(--sans);font-size:15px;font-weight:500;
  color:var(--ink2);letter-spacing:0;margin-top:8px}
/* 히어로 시설 요약 */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:20px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.quick div{background:var(--card);padding:12px 8px;text-align:center}
.quick dt{font-size:12px;color:var(--ink3);margin-bottom:4px}
.quick dd{margin:0;font-family:var(--serif);font-size:21px;font-weight:700;line-height:1}
.quick dd em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink2);margin-left:2px}
.quick-sub{font-size:13.5px;color:var(--ink2);margin:10px 0 0;line-height:1.6}
.quick-sub a{font-weight:600}
.ext{font-size:12px;opacity:.5;margin-left:3px}

/* 복사 버튼 */
.cp{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 9px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink2);
  background:var(--paper);border:1px solid var(--line);border-radius:99px;
  cursor:pointer;vertical-align:middle;transition:.15s;white-space:nowrap}
.cp:hover{border-color:var(--ink);color:var(--ink)}
.cp.done{background:var(--ink);border-color:var(--ink);color:#fff}
.cp svg{width:11px;height:11px;flex:0 0 11px}

.cta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:7px;height:54px;
  border-radius:4px;text-decoration:none;font-weight:600;font-size:15.5px;
  border:1.5px solid var(--ink);transition:.15s}
.btn-fill{background:var(--ink);color:#fff}
.btn-line{background:transparent;color:var(--ink)}
.btn-fill:hover{background:#000}
.btn-line:hover{background:rgba(0,0,0,.05)}

section{margin:0 0 34px}
.sec-head{display:flex;align-items:baseline;gap:10px;
  border-bottom:1.5px solid var(--ink);padding-bottom:9px;margin-bottom:18px}
h2{font-family:var(--serif);font-size:20px;font-weight:700;margin:0;letter-spacing:-.01em}
.sec-head .note{font-size:13px;color:var(--ink3);margin-left:auto;white-space:nowrap}
.lead-p{font-size:14.5px;color:var(--ink2);margin:0 0 16px;line-height:1.7}

/* 공공데이터 실측값 */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.fact{background:var(--card);padding:15px 10px;text-align:center}
.fact dt{font-size:12.5px;color:var(--ink3);margin-bottom:5px}
.fact dd{margin:0;font-family:var(--serif);font-size:23px;font-weight:700;line-height:1}
.fact dd em{font-style:normal;font-size:13px;font-weight:500;color:var(--ink2);margin-left:2px}
.detail{margin-top:14px;border:1px solid var(--line);border-radius:4px;background:var(--card)}
.detail div{display:flex;gap:12px;padding:12px 15px;font-size:14.5px;border-top:1px solid var(--line)}
.detail div:first-child{border-top:0}
.detail dt{flex:0 0 82px;color:var(--ink3);margin:0;font-size:13.5px;padding-top:1px}
.detail dd{margin:0;flex:1;line-height:1.55;display:flex;flex-wrap:wrap;align-items:center}

/* 상품 */
.grade{font-size:13px;color:var(--ink3);margin:24px 0 11px;display:flex;align-items:center;gap:9px}
.grade::after{content:"";flex:1;height:1px;background:var(--line)}
.grade:first-of-type{margin-top:0}
.goods{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.item{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;transition:.15s}
.item:hover{border-color:var(--ink);transform:translateY(-2px)}
.thumb{aspect-ratio:4/3;background:#FBFAF8;border-bottom:1px solid var(--line);
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:62px;height:62px;opacity:.16}
.tag{position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:600;padding:3px 7px;border-radius:2px;letter-spacing:.02em}
.tag.sale{background:var(--sale)}
.item-body{padding:12px 13px 14px;flex:1;display:flex;flex-direction:column}
.item-name{font-size:14.5px;font-weight:600;line-height:1.4;margin-bottom:3px}
.item-desc{font-size:12.5px;color:var(--ink3);line-height:1.5;flex:1;margin-bottom:9px}
.price{font-family:var(--serif);font-size:19px;font-weight:700}
.price s{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--ink3);margin-right:6px}

/* 야간 */
.night{background:var(--night);color:#fff;border-radius:4px;padding:24px 22px}
.night h2{color:#fff;font-size:19px;margin-bottom:9px}
.night p{font-size:14.5px;color:#B9C0CC;margin:0 0 17px;line-height:1.6}
.night .goods{gap:9px}
.night .item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.night .item:hover{border-color:rgba(255,255,255,.45)}
.night .thumb{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.12)}
.night .ph{opacity:.3;filter:invert(1)}
.night .item-name{color:#fff}
.night .item-desc{color:#98A0AE}
.night .price{color:#fff}

/* 표 */
.rec{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;font-size:14.5px}
.rec th,.rec td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.rec thead th{background:#F0EEE9;font-size:13px;font-weight:600;color:var(--ink2)}
.rec tbody tr:last-child th,.rec tbody tr:last-child td{border-bottom:0}
.rec tbody th{font-weight:600;width:38%}
.rec .hit td,.rec .hit th{background:#FCFAF3}
.rec .hit th::after{content:"이 빈소";font-size:11px;color:var(--gold);
  font-weight:600;margin-left:7px;letter-spacing:.02em}

details{background:var(--card);border:1px solid var(--line);border-radius:4px;margin-bottom:8px}
summary{padding:14px 16px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ink3);font-weight:400;font-size:19px;line-height:1.1;flex:0 0 auto}
details[open] summary::after{content:"−"}
details p{margin:0;padding:0 16px 15px;font-size:14px;color:var(--ink2);line-height:1.68}

/* 목록 링크 */
.near{display:grid;gap:8px}
.near a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:13px 15px;text-decoration:none;font-size:14.5px;transition:.15s}
.near a:hover{border-color:var(--ink)}
.near .km{font-size:13px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.near .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near .meta{font-size:12.5px;color:var(--ink3);white-space:nowrap}

/* 가이드 링크 — 모든 홀에서 링크주스를 몰아줌 */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.guides a{background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:13px 15px;text-decoration:none;font-size:14px;line-height:1.45;transition:.15s}
.guides a:hover{border-color:var(--ink)}
.guides span{display:block;font-size:12px;color:var(--ink3);margin-top:3px}

.amen{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.amen span{font-size:12.5px;padding:5px 11px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.amen span.off{opacity:.35;text-decoration:line-through}
.updated{font-size:12.5px;color:var(--ink3);margin:14px 0 0}
.privacy{margin-top:12px;font-size:12.5px;color:var(--ink3);line-height:1.7}

/* ── 메인 ── */
.search{position:relative;margin-top:20px}
.search-box{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1.5px solid var(--ink);border-radius:4px;padding:0 14px;height:58px}
.search-box svg{flex:0 0 19px;opacity:.45}
.search-box input{flex:1;border:0;outline:0;font-family:var(--sans);font-size:16px;
  background:transparent;color:var(--ink);min-width:0}
.search-box input::placeholder{color:var(--ink3)}
.hint{font-size:13px;color:var(--ink3);margin:9px 0 0}
.ac{position:absolute;left:0;right:0;z-index:20;margin-top:6px;background:var(--card);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.09)}
.ac a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 15px;text-decoration:none;font-size:14.5px;border-top:1px solid var(--line)}
.ac a:first-child{border-top:0}
.ac a:hover{background:#FBFAF8}
.ac b{font-weight:600}
.ac em{font-style:normal;color:var(--ink3);font-size:12.5px;white-space:nowrap}
.ac mark{background:transparent;color:var(--gold);font-weight:700}
.reg{border:1px solid var(--line);border-radius:4px;background:var(--card);margin-bottom:8px}
.reg>summary{padding:14px 16px;font-size:15px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.reg>summary::-webkit-details-marker{display:none}
.reg>summary .ct{font-size:13px;color:var(--ink3);font-weight:400;margin-left:auto;
  font-variant-numeric:tabular-nums}
.reg>summary::after{content:"+";color:var(--ink3);font-weight:400;font-size:19px;line-height:1}
.reg[open]>summary::after{content:"−"}
.reg[open]>summary{border-bottom:1px solid var(--line)}
.reg-body{padding:14px 16px 16px}
.gu{font-size:12.5px;color:var(--ink3);margin:16px 0 8px}
.gu:first-child{margin-top:0}
.hall-list{display:grid;gap:6px}
.hall-list a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;
  font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:3px;transition:.15s}
.hall-list a:hover{border-color:var(--ink)}
.hall-list em{font-style:normal;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.steps{counter-reset:s;display:grid;gap:9px}
.step{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:15px 16px}
.step::before{counter-increment:s;content:counter(s);font-family:var(--serif);
  font-size:15px;font-weight:700;color:var(--gold);flex:0 0 18px;line-height:1.5}
.step p{margin:0;font-size:14px;line-height:1.6}
.step b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}

/* ── 가이드 본문 ── */
.doc{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px 22px 26px}
.doc h3{font-family:var(--serif);font-size:17px;margin:26px 0 10px}
.doc h3:first-child{margin-top:0}
.doc p{font-size:15px;line-height:1.8;margin:0 0 14px;color:var(--ink2)}
.doc ul{margin:0 0 14px;padding-left:19px}
.doc li{font-size:15px;line-height:1.8;color:var(--ink2);margin-bottom:5px}
.doc strong{color:var(--ink);font-weight:600}

footer{border-top:1px solid var(--line);margin-top:38px;padding:24px 0 30px;
  font-size:12.5px;color:var(--ink3);line-height:1.75}
footer b{color:var(--ink2);font-weight:600}

.dock{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:50;
  padding:9px 0 calc(9px + env(safe-area-inset-bottom))}
.dock .wrap{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dock .btn{height:48px;font-size:15px}

@media(max-width:560px){
  h1{font-size:25px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .goods,.guides{gap:9px}
  .search-box{height:54px}
  .guides{grid-template-columns:1fr}
  .rec th,.rec td{padding:11px 12px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}