/* 업체 사이트 — 밝은 목록 테마 */
:root{
  --bg:#ffffff; --panel:#ffffff; --panel2:#f6f7f9;
  --text:#17181c; --muted:#6b7280;
  --line:#e6e8ee; --line-2:#eef0f4;
  --accent:#0d9488; --accent2:#ff8fa3;
  --radius:14px; --card-r:14px; --ctl-r:10px;
  --maxw:1180px; --gap:18px;
  --t-cap:12px; --t-sm:13px; --t-ui:14px; --t-body:15px; --t-mid:16px; --t-h2:20px; --t-h1:30px; --t-detail:28px;
  --lh-body:1.7; --lh-tight:1.32;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --sec-y:32px; --ctl-h:40px;
  --co-grid-min:252px; --co-ratio:4 / 3;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);line-height:var(--lh-body)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:var(--lh-tight);letter-spacing:-.02em}
p{margin:0}
.wrap{width:min(var(--maxw),calc(100% - 2 * clamp(14px,3vw,28px)));margin:0 auto}

/* 상단 바 */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.brand i{width:10px;height:10px;border-radius:3px;background:var(--accent);display:inline-block}
.nav-links{display:flex;gap:14px;margin-left:auto;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--accent)}

/* 히어로 */
.hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,#fff),#fff);
  border-bottom:1px solid var(--line)}
.hero-in{padding:clamp(28px,5vw,52px) 0}
.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.hero h1{font-size:clamp(26px,4vw,38px);font-weight:800}
.hero .lead{margin-top:10px;color:var(--muted);font-size:15px;max-width:60ch}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
.hero .meta span{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.hero .meta b{color:var(--text)}
.hero-cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--ctl-h);padding:0 16px;border-radius:var(--ctl-r);border:1px solid var(--line);
  background:#fff;color:var(--text);font-size:14px;font-weight:700;cursor:pointer}
.btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{filter:brightness(.95)}
.btn.ghost{background:var(--panel2)}

/* 섹션 */
.blk{padding:var(--sec-y) 0}
.blk+.blk{padding-top:0}
.sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{font-size:var(--t-h2);font-weight:800;display:flex;align-items:center;gap:9px}
.sec-head h2::before{content:"";width:4px;height:1.05em;border-radius:3px;background:var(--accent);display:inline-block}
.sec-head .sub{color:var(--muted);font-size:13px}
.sec-head .more{margin-left:auto;color:var(--accent);font-size:13px;font-weight:700}

/* 카테고리 칩 */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--muted)}
.chip b{color:var(--accent);font-size:12px}
.chip:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* 업체 카드 그리드 */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--card-r);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:0 18px 36px -24px rgba(17,24,39,.35)}
.card .ph{position:relative;display:block;aspect-ratio:4/3;background:var(--panel2);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{display:flex;flex-direction:column;gap:6px;padding:14px}
.card .t{font-size:var(--t-mid);font-weight:800;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .y{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
.card .gc{border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12px;background:var(--panel2)}
.card .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.card .ov{color:var(--muted);font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.score{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800;color:var(--accent)}
.rank{position:absolute;left:8px;top:8px;background:rgba(17,24,39,.78);color:#fff;border-radius:8px;
  padding:3px 8px;font-size:12px;font-weight:800;letter-spacing:-.01em}
.rank.top{background:var(--accent)}
/* 업체 사진 블러 막 (2.3.94) — 사진은 분위기만 보이고, 순위·평점은 막 위에서 읽힌다 */
.card .ph .co-blur{position:absolute;inset:0;z-index:1;pointer-events:none;
  backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);
  background:color-mix(in srgb,var(--bg) 10%,transparent)}
.card .ph .rank,.card .ph .score{z-index:2}
/* backdrop-filter 를 못 쓰는 브라우저는 이미지 자체를 흐리게(살짝 확대해 가장자리 비침 방지) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card .ph img{filter:blur(7px);transform:scale(1.06)}
}

/* 상세 */
.detail-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,#fff),#fff);
  border-bottom:1px solid var(--line)}
.detail-in{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(18px,3vw,32px);padding:clamp(24px,4vw,44px) 0;align-items:start}
.detail-in .art{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.detail-in h1{font-size:clamp(22px,3vw,30px);font-weight:800}
.detail-in .tag{margin-top:6px;color:var(--muted);font-size:14px}
.brd{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.brd a:hover{color:var(--accent)}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fact{border:1px solid var(--line);background:var(--panel2);border-radius:var(--ctl-r);
  padding:4px 10px;font-size:12.5px}
.fact b{color:var(--accent)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
.prose{color:var(--muted);line-height:var(--lh-body);max-width:68ch;white-space:pre-wrap}
.prose p{margin:0 0 12px}
.prose p:last-child{margin-bottom:0}
.co-kv{margin-top:18px}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 40px;
  color:var(--muted);font-size:13px;background:var(--panel2)}
.foot-about{max-width:78ch;margin-bottom:14px}
.foot-h{font-size:14px;font-weight:800;color:var(--text);margin:0 0 6px}
.foot-in{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.gen{opacity:.8}
.gen b{color:var(--accent)}

@media (max-width:900px){
  .detail-in{grid-template-columns:1fr}
  .detail-in .art{max-width:320px}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
  .card .bd{padding:12px}
  .nav-links{display:none}
}

[hidden]{display:none!important}
.co-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
/* 목록 필터 (2.3.90) — 폼은 정적, 거르기는 인라인 스크립트 */
.co-filter{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end;
  margin-bottom:var(--sp-5);padding:var(--sp-4);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel2)}
.co-field{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 180px;min-width:160px}
.co-field label{font-size:var(--t-cap);font-weight:700;color:var(--muted)}
.co-field input,.co-field select{width:100%;height:var(--ctl-h);padding:0 var(--sp-3);
  border:1px solid var(--line);border-radius:var(--ctl-r);background:#fff;color:var(--text);
  font:inherit;font-size:var(--t-ui)}
.co-field input:focus,.co-field select:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
  outline-offset:1px;border-color:var(--accent)}
.co-count{margin:0 0 0 auto;align-self:center;font-size:var(--t-sm);font-weight:700;
  color:var(--muted);white-space:nowrap}
.co-noresult{margin-top:var(--sp-6);text-align:center;max-width:60ch}
.co-noresult .prose{white-space:normal}
/* 로그인 안내 모달 — dialog role, ESC·배경 클릭으로 닫힌다 */
.co-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:var(--sp-4)}
.co-modal-bg{position:absolute;inset:0;background:rgba(17,24,39,.5)}
.co-modal-box{position:relative;width:min(420px,100%);padding:var(--sp-5);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 64px -24px rgba(17,24,39,.45)}
.co-modal-box:focus{outline:2px solid var(--accent);outline-offset:2px}
.co-modal-title{font-size:var(--t-h2);font-weight:800}
.co-modal-desc{margin-top:var(--sp-2);color:var(--muted);font-size:var(--t-ui);line-height:1.6}
.co-modal-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5);
  flex-wrap:wrap}
body.co-modal-open{overflow:hidden}
.co-card .ph{aspect-ratio:4/3}
.co-ph{position:relative;display:flex;align-items:flex-end;padding:var(--sp-4);isolation:isolate}
.co-ph::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 18% 8%,rgba(255,255,255,.16),transparent 60%)}
.co-ph b{position:relative;font-size:var(--t-mid);font-weight:800;color:#fff;letter-spacing:-.02em;
  line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.co-card .ov{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--text-2);font-size:var(--t-sm);line-height:1.5;margin-top:var(--sp-1)}
.co-card .y{gap:var(--sp-1) var(--sp-2)}
.co-cat{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.co-card .lab{color:var(--muted);font-size:var(--t-cap);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-badge{display:inline-block;margin-top:var(--sp-2);padding:var(--sp-1) var(--sp-2);
  border-radius:var(--ctl-r);font-size:var(--t-cap);font-weight:800;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.co-badge-lg{display:inline-block;margin-top:var(--sp-3);padding:var(--sp-1) var(--sp-3);font-weight:800}
.co-group + .co-group{margin-top:var(--sp-6)}
.co-group .sec-head,.co-group{scroll-margin-top:88px}
.detail-in .co-art,.detail-in .co-art-img{aspect-ratio:4/3;max-width:none}
.co-art-img img{width:100%;height:100%;object-fit:cover}
.co-art{display:flex;align-items:flex-end;padding:var(--sp-4)}
.co-art b{font-size:var(--t-h2);font-weight:800;color:#fff;letter-spacing:-.02em;
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.co-kv{max-width:64ch;margin-top:var(--sp-4)}
.co-kv dd a{color:var(--accent);font-weight:700}
.co-rich{max-width:68ch;white-space:normal}
.co-rich p{margin:0 0 var(--sp-3)}
.co-rich p:last-child{margin-bottom:0}
.co-rich h2,.co-rich h3{font-size:var(--t-mid);margin:var(--sp-4) 0 var(--sp-2)}
.co-rich img{max-width:100%;height:auto;border-radius:var(--radius);margin:var(--sp-3) 0}
.co-empty{padding:var(--sp-7) 0;max-width:60ch}
.co-empty h2{font-size:var(--t-h2);margin-bottom:var(--sp-2)}
.co-empty .prose{white-space:normal}
.co-couponbox{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;
  padding:12px 14px;border-radius:var(--ctl-r);border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,#fff);font-size:13px;color:var(--muted)}
.co-couponbox b{color:var(--accent);font-size:15px}
.co-verified{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.page-h1{font-size:clamp(22px,3vw,28px);font-weight:800;display:flex;align-items:center;gap:9px}
.page-h1::before{content:"";width:4px;height:1.05em;border-radius:3px;background:var(--accent);display:inline-block}
.co-back{margin-top:var(--sp-6)}
@media (max-width:640px){
  .co-filter{padding:var(--sp-3)}
  .co-count{margin-left:0;align-self:flex-start}
  .co-modal-box{padding:var(--sp-4)}
}

.co-grid{grid-template-columns:repeat(auto-fill,minmax(var(--co-grid-min,228px),1fr))}
.co-card .ph,.card .ph{aspect-ratio:var(--co-ratio,4 / 3)}
.detail-in .co-art,.detail-in .co-art-img,.detail-in .art{aspect-ratio:var(--co-ratio,4 / 3)}