/* ==========================================================================
   바른DB — 정직한 사업자 데이터
   네이비(신뢰) + 에메랄드(검증) 팔레트. 경쟁사 보라/시안과 겹치지 않게.
   ========================================================================== */
/* SUIT (SIL Open Font License 1.1) 를 직접 담아 쓴다. CDN 을 물면 남의 서버가
   멈출 때 우리 글씨가 같이 멈춘다.
   가변 폰트라 파일 하나(610KB)로 100~900 굵기를 다 쓴다 — 굵기별 파일을
   따로 받던 앞선 방식(3종 796KB)보다 작으면서 더 자유롭다.
   swap 이라 폰트가 늦게 와도 글은 바로 읽힌다. */
@font-face{
  font-family:"SUIT"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/suit-variable.woff2") format("woff2-variations"),
      url("/static/fonts/suit-variable.woff2") format("woff2");
}

:root{
  /* 남색을 조금 눕히고 채도를 낮췄다. 파랑이 진하면 화면이 번쩍인다. */
  --navy-900:#111c2b; --navy-800:#1b2a3d; --navy-700:#2c3f56; --navy-600:#3d5570;
  /* 초록도 형광기를 뺐다. 밝은 에메랄드는 싸구려로 보인다. */
  --emerald:#0f7a5f; --emerald-light:#7fc9ad; --emerald-soft:#e8f2ed;
  --emerald-line:#c3ded1; --emerald-ink:#0b5d48;
  /* 앰버 = '새로 들어온 것'. 경쟁사가 전부 보라·파랑이라 따뜻한 색을 쓰면
     화면만 봐도 구분된다. 공공문서·직인 느낌이라 출처와도 맞는다.
     색을 장식이 아니라 의미로 쓴다 — 초록이면 확인된 값, 앰버면 새 값. */
  --amber:#b4761a; --amber-soft:#fdf4e6; --amber-line:#ecd6ae; --amber-ink:#7a4f0d;
  --ink:#16202c; --body:#414d5c; --muted:#6a7684; --faint:#98a2ae;
  --line:#e3e6ea; --line-soft:#eef0f3; --surface:#f7f8f9;
  /* 전면 밝은 톤. 배경은 순백에 가깝게 두고, 면을 나누는 일은
     색이 아니라 선(--line)이 맡는다. */
  --paper:#ffffff;
  /* 히어로처럼 아주 살짝만 구분해야 하는 면 */
  --tint:#fafbfc;
  --warn:#8a5a12; --warn-bg:#fdf9f0; --warn-line:#e8d9b8;
  /* 모서리를 줄였다. 둥글수록 말랑해 보이고 자료 화면과 안 어울린다. */
  --radius:6px; --radius-lg:10px;
  /* 그림자는 거의 없애고 테두리로 층을 나눈다. */
  --shadow:none;
  --shadow-md:0 1px 2px rgba(17,28,43,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font:15px/1.7 "SUIT",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 0;
}
h1,h2,h3{color:var(--ink); letter-spacing:-.012em; line-height:1.34; font-weight:700}
a{color:var(--navy-600); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}

/* ---------------------------------------------------------------- 헤더 */
.topbar{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar .wrap{display:flex; align-items:center; gap:24px; height:74px}
.brand{white-space:nowrap}
.brand:hover{text-decoration:none}

/* ---------------------------------------------------------------- 로고 */
.logo-lockup{display:inline-flex; align-items:center; gap:11px}
.logo-mark{flex:0 0 auto; display:block}
.logo-mark .lm-stem, .logo-mark .lm-ring, .logo-mark .lm-arc{
  fill:none; stroke:var(--logo-ink, var(--navy-900));
  stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
}
.logo-mark .lm-arc{stroke-width:4.5}
.logo-mark .lm-arc.up, .logo-mark .lm-dot.up, .logo-mark .lm-bar.up{
  stroke:var(--logo-warm, var(--amber)); fill:var(--logo-warm, var(--amber));
}
.logo-mark .lm-arc.down, .logo-mark .lm-dot.down, .logo-mark .lm-bar.down{
  stroke:var(--logo-cool, var(--emerald)); fill:var(--logo-cool, var(--emerald));
}
.logo-mark .lm-dot{stroke:none}
.logo-mark .lm-bar{stroke:none}

.logo-text{display:flex; flex-direction:column; line-height:1}
.logo-text b{
  font-size:27px; font-weight:800; color:var(--logo-ink, var(--navy-900));
  letter-spacing:-.035em;
}
.logo-text b .dot{color:var(--emerald)}
.logo-text em{
  font-style:normal; font-size:11px; font-weight:700; color:var(--muted);
  letter-spacing:.19em; margin-top:4px;
}

/* ---------------------------------------------------------------- 버튼 */
.btn{
  display:inline-block; padding:11px 22px; border-radius:var(--radius);
  background:var(--navy-800); color:#fff !important; font-weight:600;
  border:1px solid var(--navy-800); cursor:pointer; font-size:14.5px;
  transition:background-color .12s, border-color .12s;
}
.btn:hover{text-decoration:none; background:var(--navy-700)}
.btn.small{padding:8px 15px; font-size:13.5px}
.btn.accent{background:var(--emerald); border-color:var(--emerald)}
.btn.outline{background:transparent; color:var(--navy-800) !important; border-color:var(--line)}
.btn.ghost{background:var(--line-soft); color:var(--body) !important; border-color:var(--line)}
/* 히어로가 밝아졌으므로 on-dark 는 이제 일반 버튼과 같게 둔다.
   이름은 다른 화면에서도 쓰이고 있어 그대로 두고 색만 맞춘다. */
.btn.on-dark{background:var(--navy-800); color:#fff !important; border-color:var(--navy-800)}
.btn.on-dark:hover{background:var(--navy-700)}
.btn.on-dark.outline{background:#fff; color:var(--navy-800) !important; border-color:var(--line)}
.btn.on-dark.outline:hover{background:var(--surface)}

/* ---------------------------------------------------------------- 히어로 */
.hero{
  /* 밝은 톤으로 전환. 남색 면을 없애고 선으로만 본문과 나눈다.
     색으로 구분하던 것을 선으로 옮기면 화면이 넓어 보인다. */
  /* 순백에 가까우면 화면이 비어 보인다. 아주 옅은 초록 면을 깔아
     브랜드 색이 첫 화면에 남게 한다. */
  background:#f4f8f6;
  color:var(--body); padding:44px 0 40px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--emerald-line);
}
.hero::after{ /* 우측 상단 은은한 광원 */
  content:none;
}
.hero .wrap{position:relative; z-index:1}
.badge{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px;
  background:var(--amber-soft); border:1px solid var(--amber-line);
  border-radius:4px; font-size:12.5px; font-weight:600; color:var(--amber-ink);
  letter-spacing:.01em;
  margin-bottom:20px;
}
/* 배지는 '매일 갱신' 즉 새 데이터 이야기라 앰버를 쓴다. */
.badge .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  opacity:.9;
}
.hero h1{
  font-size:36px; font-weight:800; color:var(--ink); margin:0 0 14px; letter-spacing:-.018em;
}
.hero h1 .hl{color:var(--emerald)}
.hero .lead{color:var(--body); font-size:15.5px; max-width:620px; margin:0 0 22px}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap}
.hero-note{margin-top:22px; font-size:13px; color:var(--muted)}

/* ---------------------------------------------------------------- 섹션 */
section.block{padding:52px 0}
/* 첫 섹션은 히어로 바로 아래라 위 여백을 줄인다 */
section.block.first{padding-top:28px}
section.block.tint{background:var(--surface); border-block:1px solid var(--line)}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin:0 0 22px;
}
.section-head h2{font-size:23px; margin:0}
.section-head p{margin:6px 0 0; color:var(--muted); font-size:14px}
.more{font-size:14px; font-weight:600; white-space:nowrap}
.page-title{font-size:29px; margin:30px 0 10px}
.lead-left{color:var(--body); max-width:780px; margin:0 0 28px; font-size:15.5px}
.crumb{font-size:13px; color:var(--faint); margin:22px 0 0}
.crumb a{color:var(--faint)}

/* ---------------------------------------------------------------- 특징 카드 */
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow);
}
.feature .ico{
  width:42px; height:42px; border-radius:9px; background:var(--emerald-soft);
  border:1px solid var(--emerald-line); color:var(--emerald-ink);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px;
}
.feature h3{font-size:16px; margin:0 0 7px}
.feature p{margin:0; font-size:14px; color:var(--muted); line-height:1.6}

/* ---------------------------------------------------------------- 통계 */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 34px}
.stat{
  background:var(--emerald-soft); border:1px solid var(--emerald-line);
  border-radius:var(--radius);
  padding:20px; text-align:center; box-shadow:var(--shadow);
}
.stat b{
  display:block; font-size:26px; font-weight:800; color:var(--emerald-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat span{font-size:13px; color:var(--muted)}

/* ---------------------------------------------------------------- 표 */
.table-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:#fff; box-shadow:var(--shadow);
}
.table-scroll{overflow-x:auto}
.grid{width:100%; border-collapse:collapse; font-size:14px; min-width:720px}
.grid thead th{
  /* 표와 배경을 같은 톤으로 둔다. 머리줄은 색이 아니라 굵은 밑선으로 나눈다. */
  background:transparent; color:var(--muted); text-align:left; padding:12px 14px;
  font-weight:600; font-size:12.5px; white-space:nowrap;
  border-bottom:1.5px solid var(--navy-800); letter-spacing:.01em;
}
.grid td{padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.grid tbody tr:last-child td{border-bottom:none}
.grid tbody tr:hover{background:var(--surface)}
/* 표 카드는 배경과 같은 흰색. 경계는 테두리 한 줄이 맡는다. */
.table-card{background:var(--paper)}
.grid .name{font-weight:600; color:var(--ink)}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap}
.nowrap{white-space:nowrap}
.empty{text-align:center; padding:56px !important; color:var(--muted)}
.lock{opacity:.5; font-size:11px}
.tag{
  display:inline-block; padding:3px 9px; border-radius:20px;
  background:var(--line-soft); font-size:12px; color:var(--muted); white-space:nowrap;
}
.tag.고{background:var(--emerald-soft); color:var(--emerald-ink); font-weight:600;
  border:1px solid var(--emerald-line)}
.tag.new{background:var(--amber-soft); color:var(--amber-ink); font-weight:700;
  font-size:11px; border:1px solid var(--amber-line)}

/* ---------------------------------------------------------------- 필터 */
.filters{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:20px; box-shadow:var(--shadow);
}
.filters .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.filters .row + .row{margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft)}
.filters input[type=text]{flex:1; min-width:240px}
input,select{
  padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:14px; background:#fff; color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--emerald); outline-offset:-1px; border-color:transparent}
.chk{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--body); cursor:pointer}
.chk input{accent-color:var(--emerald); width:16px; height:16px}
.result-head{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 12px; font-size:14px; color:var(--muted);
}
.result-head strong{color:var(--navy-800); font-size:16px}
.head-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* ---------------------------------------------------------------- 지역 카드 */
.region-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; margin:0 0 34px}
.region-card{
  display:block; padding:16px 17px; border:1px solid var(--line);
  border-radius:var(--radius); color:var(--ink); background:#fff;
  transition:border-color .12s, background-color .12s;
}
.region-card:hover{
  text-decoration:none; border-color:var(--emerald);
  background:var(--surface);
}
.region-card b{display:block; font-size:15.5px; margin-bottom:4px}
.region-card span{display:block; font-size:14px; color:var(--emerald); font-weight:700}
.region-card em{display:block; font-size:12px; color:var(--faint); font-style:normal; margin-top:2px}
.chip-links{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 32px}
.chip-links a{
  padding:8px 14px; border:1px solid var(--line); border-radius:24px;
  font-size:13.5px; color:var(--body); background:#fff;
}
.chip-links a span{color:var(--faint); font-size:12px; margin-left:4px}
.chip-links a:hover{text-decoration:none; border-color:var(--emerald); color:var(--navy-800)}
.chip-links a.all{background:var(--navy-800); border-color:var(--navy-800); color:#fff; font-weight:600}

/* ---------------------------------------------------------------- 안내 */
.notice{
  margin:18px 0; padding:16px 18px; background:var(--warn-bg);
  border:1px solid var(--warn-line); border-radius:var(--radius);
  font-size:14.5px; color:#78350f;
}
.notice a{color:var(--warn); font-weight:700}
.flash{
  margin:16px auto; padding:13px 18px; background:var(--emerald-soft);
  border:1px solid #a7f3d0; border-radius:var(--radius); font-size:14.5px; color:#065f46;
}

/* ---------------------------------------------------------------- 페이저 */
.pager{display:flex; gap:5px; justify-content:center; margin:30px 0; flex-wrap:wrap}
.pager a{
  min-width:38px; text-align:center; padding:8px 11px; border:1px solid var(--line);
  border-radius:8px; color:var(--body); font-size:14px; background:#fff;
}
.pager a.on{background:var(--navy-800); color:#fff; border-color:var(--navy-800); font-weight:600}
.pager a:hover{text-decoration:none; border-color:var(--navy-600)}
.pager a.on:hover{background:var(--navy-800)}

/* ---------------------------------------------------------------- 폼 */
.card{
  max-width:430px; margin:52px auto; padding:34px;
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.card h1{font-size:23px; margin:0 0 7px}
.card .sub{color:var(--muted); font-size:14px; margin:0 0 24px}
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px}
.field input{width:100%}
.card .btn{width:100%; margin-top:8px}
.card .alt{text-align:center; margin-top:18px; font-size:14px; color:var(--muted)}

/* ---------------------------------------------------------------- 약관 동의 */
.card.wide{max-width:600px}
.steps{display:flex; gap:6px; margin:0 0 24px; font-size:12.5px}
.steps span{
  flex:1; text-align:center; padding:8px 4px; border-radius:6px;
  background:var(--line-soft); color:var(--faint); font-weight:600;
}
.steps span.on{background:var(--navy-800); color:#fff}

fieldset.consent{
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 14px;
  margin:0 0 18px;
}
fieldset.consent legend{
  padding:0 8px; font-size:13px; font-weight:700; color:var(--navy-800);
}
.agree-all{
  display:flex; align-items:center; gap:8px; padding:12px 14px; margin-bottom:12px;
  background:var(--emerald-soft); border:1px solid #a7f3d0; border-radius:8px;
  cursor:pointer; font-size:14.5px;
}
.agree-all b{color:#065f46}
.agree-all .muted{font-size:12.5px}
.agree-row{padding:10px 2px; border-top:1px solid var(--line-soft)}
.agree-row:first-of-type{border-top:0}
.agree-head{display:flex; align-items:center; gap:10px}
.agree-head label{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14.5px; flex:1}
.agree-row input[type=checkbox]{accent-color:var(--emerald); width:17px; height:17px; flex:none}
.agree-head .view{
  flex:none; font-size:12.5px; color:var(--muted);
  text-decoration:underline; white-space:nowrap;
}
.agree-desc{margin:5px 0 0 25px; font-size:12.5px; color:var(--muted); line-height:1.55}
.badge-req{
  font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; flex:none;
}
.badge-req.req{background:#fef2f2; color:#b91c1c}
.badge-req.opt{background:var(--line-soft); color:var(--muted)}
.privacy-detail{margin-top:12px; font-size:13px}
.privacy-detail summary{cursor:pointer; color:var(--navy-600); font-weight:600; padding:6px 0}
.grid.mini{font-size:12.5px; min-width:520px}
.grid.mini td, .grid.mini th{padding:8px 10px}

.steps span.done{background:var(--emerald-soft); color:#047857}

/* ---------------------------------------------------------------- DB 종류 카드 */
.dbtype-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:11px; margin:0 0 26px;
}
.dbtype-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 14px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; color:var(--ink); text-align:center; box-shadow:var(--shadow);
  transition:border-color .12s, background-color .12s;
}
.dbtype-card:hover{
  text-decoration:none; border-color:var(--emerald);
  background:var(--surface);
}
.dbtype-card .ico{
  width:46px; height:46px; border-radius:50%; background:var(--emerald-soft);
  display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:4px;
}
.dbtype-card b{font-size:14.5px}
.dbtype-card .num{
  font-size:16px; font-weight:700; color:var(--emerald);
  font-variant-numeric:tabular-nums;
}
.dbtype-card .num em{font-size:11.5px; font-weight:600; font-style:normal; color:var(--muted); margin-left:2px}
.dbtype-card.soon{background:var(--surface); border-style:dashed; cursor:default}
.dbtype-card.soon:hover{border-color:var(--line); background:#fff}
.dbtype-card.soon .ico{background:var(--line-soft); opacity:.6}
.dbtype-card.soon b{color:var(--faint)}
.soon-tag{
  font-size:11.5px; font-weight:700; color:var(--faint);
  background:var(--line-soft); padding:2px 9px; border-radius:20px;
}

/* ---------------------------------------------------------------- 소셜 로그인 */
.social{margin-top:22px}
.social-divider{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  color:var(--faint); font-size:12.5px;
}
.social-divider::before, .social-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.social-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:12px 16px; margin-bottom:8px; border-radius:var(--radius);
  border:1px solid var(--line); background:#fff; color:var(--ink) !important;
  font-size:14.5px; font-weight:600; transition:background-color .12s, border-color .12s;
}
.social-btn:hover{text-decoration:none; background:var(--surface)}
.social-btn .ico{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.social-btn.kakao{background:#FEE500; border-color:#FEE500; color:#191600 !important}
.social-btn.kakao .ico{background:#191600; color:#FEE500}
.social-btn.naver{background:#03C75A; border-color:#03C75A; color:#fff !important}
.social-btn.naver .ico{background:#fff; color:#03C75A}
.social-btn.google .ico{background:#fff; color:#4285F4; border:1px solid var(--line)}
.social-note{margin:10px 0 0; font-size:12px; color:var(--faint); text-align:center}

/* 약관 본문 */
.doc{max-width:820px}
.doc h2{font-size:16.5px; margin:26px 0 8px; padding-top:14px; border-top:1px solid var(--line)}
.doc h2:first-child{border-top:0; padding-top:0; margin-top:0}
.doc p{margin:0 0 7px; font-size:14.5px; line-height:1.75; color:var(--body)}

/* ---------------------------------------------------------------- 요금제 */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:26px 0}
.plan{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 22px;
  text-align:center; background:#fff; box-shadow:var(--shadow);
}
.plan.best{border:2px solid var(--emerald); position:relative; box-shadow:var(--shadow-md)}
.plan.best::after{
  content:"인기"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--emerald); color:#fff; font-size:12px; font-weight:700;
  padding:4px 14px; border-radius:20px;
}
.plan h3{margin:0 0 10px; font-size:17px}
.plan .price{font-size:27px; font-weight:700; color:var(--navy-800); letter-spacing:-.02em}
.plan .per{font-size:13px; color:var(--muted); margin-bottom:14px}
.plan p{margin:0; font-size:13.5px; color:var(--muted)}

/* ---------------------------------------------------------------- 푸터 */
footer{background:var(--navy-900); color:#93a5bb; margin-top:70px; padding:38px 0 46px; font-size:13.5px}
footer .fbrand{margin:0 0 6px}
/* 푸터는 어두운 바탕이라 로고 획을 흰색으로 바꿔 끼운다.
   같은 SVG 를 색만 갈아 재사용한다 — 파일을 두 벌 두면 한쪽만 바뀐다. */
footer .logo-lockup{--logo-ink:#fff}
footer .logo-text b{font-size:24px}
footer .logo-text b .dot{color:var(--emerald-light)}
footer .logo-text em{color:rgba(255,255,255,.5)}
footer p{margin:0 0 8px; line-height:1.75}
footer .fine{color:#6b7f96; font-size:12.5px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.09)}
/* 사업자 표시사항 — 법령상 표시 의무 항목이라 흐리게 감추지 않고 본문 밝기로 둔다 */
footer .bizinfo{color:#8ea3ba; line-height:1.9}
footer a{color:#b6c4d6}

/* ---------------------------------------------------------------- 반응형 */
@media (max-width:860px){
  .hero{padding:44px 0 40px}
  .hero h1{font-size:30px}
  .hero .lead{font-size:15px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .brand{font-size:18px}
  .page-title{font-size:23px}
  .section-head h2{font-size:19px}
}
@media (max-width:520px){
  .region-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   아이콘 · 배경 · 폼 (이모지 제거 후 추가된 레이어)
   ========================================================================== */

/* ---------------------------------------------------------------- 아이콘 */
/* SVG 아이콘은 글자 사이에 놓이므로 baseline 을 살짝 내려 텍스트와 눈높이를 맞춘다.
   이모지와 달리 크기가 폰트에 휘둘리지 않아 정렬이 흐트러지지 않는다. */
.ico-svg{display:inline-block; vertical-align:-.18em; flex:none}

.feature .ico{
  /* 이모지용 정사각 배지에서 선 아이콘용으로 바꿨다.
     연한 테두리 + 흰 바탕이라야 stroke 아이콘의 선이 살아난다. */
  width:40px; height:40px; border-radius:10px;
  background:var(--emerald-soft);
  border:1px solid #d1fae5; color:#059669;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.feature .ico .ico-svg{vertical-align:0}
.title-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-right:9px; border-radius:9px;
  background:var(--emerald-soft); border:1px solid #d1fae5;
  color:#059669; vertical-align:-.32em;
}
.title-ico .ico-svg{vertical-align:0}
.lock{
  display:inline-flex; align-items:center; color:var(--faint);
  vertical-align:-.15em; margin-left:2px;
}
.lock .ico-svg{vertical-align:0}
.notice .ico-svg, .flash .ico-svg{vertical-align:-.22em; margin-right:2px}

/* '더 보기' 링크의 화살표. 텍스트로 → 를 넣으면 폰트마다 모양이 달라지고
   호버 때 같이 움직이지 않는다. 테두리 두 변을 회전시켜 그린다. */
.more{display:inline-flex; align-items:center; gap:7px; color:var(--navy-600)}
.more::after{
  content:""; width:6px; height:6px; flex:none;
  border-right:1.8px solid currentColor; border-top:1.8px solid currentColor;
  transform:rotate(45deg); transition:transform .14s ease;
}
.more:hover{text-decoration:none; color:var(--navy-900)}
.more:hover::after{transform:rotate(45deg) translate(2px,-2px)}

/* ---------------------------------------------------------------- 배경 */
/* 히어로에 1px 격자를 겹친다. 색만 채운 면보다 깊이가 생기고,
   데이터를 다루는 서비스라는 성격과도 맞는다. 격자는 CSS 로만 그린다. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,122,95,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,122,95,.05) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  /* 아래로 갈수록 격자를 지워 본문과 자연스럽게 이어지게 한다 */
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
}
/* 히어로 아래 경계. 밝은 톤에서는 이 선이 유일한 구분이라 없애면 안 된다. */
.hero{border-bottom:1px solid var(--emerald-line)}

/* 본문 배경. 완전한 흰색은 카드 경계가 흐려 보인다.
   위쪽만 아주 옅게 깔아 카드가 떠 보이게 한다. */
body{background:var(--paper)}
/* 톤 섞인 섹션에 점 패턴을 깔아 평평한 회색면을 피한다 */
section.block.tint{background-color:#f6faf8; background-image:none;
  border-block-color:var(--emerald-line)}
section.block.tint > *{position:relative}

/* ---------------------------------------------------------------- 폼 */
.authwrap{display:flex; justify-content:center}
.authcard{width:100%}
.btn-block{width:100%}
.btn-primary{background:var(--navy-800); border-color:var(--navy-800)}

.field input, .field select{width:100%}
/* 마우스 클릭에는 링을 띄우지 않고 키보드 이동에만 띄운다.
   :focus 로 잡으면 클릭할 때마다 굵은 테두리가 번져 지저분해진다. */
input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible{
  outline:2px solid var(--emerald); outline-offset:2px;
}
.field .hint{
  margin:6px 0 0; font-size:12.5px; color:var(--muted); min-height:1.2em;
}
.field .hint.ok{color:#047857}
.field .hint.ok::before{content:"✓ "; font-weight:700}
.field .hint.bad{color:#b91c1c}
.field .hint.bad::before{content:"! "; font-weight:700}
/* 아이디·이메일은 데이터라서 폭이 일정한 글꼴이 읽기 쉽다 */
#username, #account{
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
  letter-spacing:.02em;
}

/* ---------------------------------------------------------------- 마무리 */
/* 드래그 선택 색을 브랜드 색으로 맞춘다 */
::selection{background:#a7f3d0; color:#064e3b}
/* 숫자가 든 칸은 자릿수가 흔들리지 않게 고정폭 숫자를 쓴다 */
.grid td, .region-card span{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  /* 움직임에 민감한 사용자에게는 애니메이션을 멈춘다 */
  *, *::before, *::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .badge .pulse{animation:none}
}
@media print{
  .topbar, footer, .filters, .pager, .social, .cta{display:none}
  body{background:#fff}
  .table-card, .feature{box-shadow:none; border-color:#999}
}

/* 관리자 회원표 — 열이 6개라 기본 720px 로는 좁다.
   좁으면 이름 칸이 한 글자씩 세로로 쪼개지고 '부여' 버튼이 잘린다.
   가로 스크롤은 .table-scroll 이 처리하므로 넓혀도 페이지는 밀리지 않는다. */
.grid.admin-users{min-width:1040px}
.grid.admin-users td:nth-child(3),      /* 이름 */
.grid.admin-users td:nth-child(4){white-space:nowrap}   /* 연락처 */
.grid.admin-users td:nth-child(5){min-width:210px}      /* 현재 이용권 */
.grid.admin-users td:nth-child(6){min-width:250px}      /* 이용권 부여 */
.grid.admin-users select{padding:7px 9px; font-size:13px}

/* 권한 열이 늘어 7개가 됐다 */
.grid.admin-users{min-width:1240px}
.grid.admin-users td:nth-child(7){min-width:120px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* ---------------------------------------------------------------- 설정 패널 */
/* 마이페이지의 아이디·비밀번호·회원정보 변경 상자.
   .card 는 화면 가운데 한 장을 띄우는 용도라 여러 장을 나란히 놓기엔 맞지 않는다. */
.settings-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px; align-items:start; margin-bottom:40px;
}
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow);
}
.panel h3{font-size:16px; margin:0 0 6px}
.panel-note{margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.6}
.panel .btn{margin-top:4px}

/* ---------------------------------------------------------------- 내 주변 DB */
.inline-label{font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap}
/* 거리 칸은 숫자만 들어가므로 좁게 잡고 강조한다 */
.grid .dist{font-weight:700; color:var(--navy-700); white-space:nowrap; width:74px}
#locate:disabled{opacity:.55}
#loc-status{line-height:1.5}

/* ---------------------------------------------------------------- 지도 */
.map-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:#fff; box-shadow:var(--shadow); margin-bottom:16px;
}
#map{width:100%; height:420px}
.map-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:11px 16px; border-top:1px solid var(--line);
  background:var(--surface); font-size:13px; color:var(--body);
}
.map-legend span{display:inline-flex; align-items:center; gap:6px}
.map-legend i{width:10px; height:10px; border-radius:50%; flex:none}
.map-legend .dot-me{background:var(--navy-800)}
/* 사업자 핀은 카카오 기본 마커라 색을 맞출 수 없다. 범례에서는 형태로 구분한다 */
.map-legend .dot-biz{
  background:#eb4d3d; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
}
/* 카카오 인포윈도우 안쪽 — 기본 스타일이 없어 직접 잡아준다 */
.mapinfo{display:flex; flex-direction:column; gap:2px; padding:10px 13px; min-width:180px; line-height:1.5}
.mapinfo b{font-size:14px; color:var(--ink)}
.mapinfo span{font-size:12.5px; color:var(--muted)}
.mapinfo .mi-phone{color:var(--navy-700); font-weight:600; font-variant-numeric:tabular-nums}
.mapinfo .mi-dist{color:var(--emerald); font-weight:700}
@media (max-width:860px){ #map{height:320px} }

/* ---------------------------------------------------- DB 종류 카드 (홈) */
/* 경쟁사는 알록달록한 3D 일러스트를 쓰지만, 자료를 파는 화면에서는
   장난감처럼 보인다. 면 하나(엷은 초록) + 선 하나(짙은 남색)로만 그려
   눈에는 걸리되 표와 싸우지 않게 한다. */
.dbart{display:block}
/* 면 색은 받침판 위에서 읽혀야 한다.
   #eef5f2 → 받침판 대비 1.0 (안 보임)
   #b9d6c8 → 받침판 대비 1.32 (여전히 안 보임)
   #7fb79c → 받침판 대비 2.1  (형태가 드러남)
   대비를 실제로 재서 고른 값이다. 눈대중으로 '은은하게'를 반복하면
   결국 아무것도 안 보이는 그림이 된다. */
.dbart .f{fill:var(--art-fill, #7fb79c); stroke:none}
.dbart .s{
  fill:none; stroke:var(--art-line, var(--navy-900));
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}

.db-grid{
  /* 9장이 넓은 화면에서 한 줄에 들어가야 첫 화면 안에 다 보인다.
     1200px 컨테이너 기준 9칸 + 간격 8 = 칸당 약 120px. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px;
}
.db-card{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 8px 12px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink);
  transition:border-color .12s, background-color .12s;
}
.db-card:hover{text-decoration:none; border-color:var(--navy-600); background:var(--surface)}
/* 받침판. 선 그림만 덩그러니 두면 카드가 비어 보인다. 색 면을 깔아
   덩어리를 만들되, 원이 아니라 모서리만 둥근 사각으로 두어 자료 화면의
   각진 느낌을 유지한다. */
.db-card .db-art{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:7px;
  background:var(--art-plate, #e4efe9); border-radius:9px;
}
.db-card b{font-size:13.5px; font-weight:700}
.db-total{
  font-size:17px; font-weight:800; color:var(--navy-800); margin-top:3px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.db-total i{font-size:12.5px; font-weight:600; font-style:normal;
  color:var(--muted); margin-left:2px}
.db-total.soon{font-size:15px; color:var(--faint); font-weight:600}
.db-today{font-size:11.5px; color:var(--muted); margin-top:1px}
/* 오늘 들어온 건수가 있으면 앰버로 띄운다. 없으면 회색 그대로. */
.db-today.plus{color:var(--amber-ink); font-weight:700}
/* 준비중 카드는 톤을 죽여 '있는 척'하지 않게 한다 */
.db-card.soon{
  --art-fill:#c2c8cf; --art-line:var(--muted); --art-plate:var(--line-soft);
  background:var(--surface);
}
.db-card.soon b{color:var(--muted)}

.db-sum{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-top:14px;
}
.db-sum div{background:#fff; padding:16px 14px; text-align:center}
/* 마지막 칸(오늘 신규)만 앰버 면. 색 규칙상 '새 값'이다. */
.db-sum div:last-child{background:var(--amber-soft)}
/* 첫 칸(전체 사업자)은 확인된 값이라 초록 면. */
.db-sum div:first-child{background:var(--emerald-soft)}
.db-sum span{display:block; font-size:12.5px; color:var(--muted)}
.db-sum b{
  display:block; font-size:23px; font-weight:800; color:var(--navy-800);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin:3px 0 1px;
}
.db-sum b.up{color:var(--amber-ink)}
.db-sum div:first-child b{color:var(--emerald-ink)}
.db-sum em{font-size:11.5px; color:var(--faint); font-style:normal}
.db-note{
  margin:10px 0 0; font-size:13px; color:var(--muted); line-height:1.6;
}
@media (max-width:640px){
  .db-sum{grid-template-columns:repeat(2,1fr)}
}

/* ---------------------------------------------------- 히어로 홍보 패널 */
.hero-wrap{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center}
.hero-left{min-width:0}
.hero-panels{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:520px}

.hpanel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:16px 16px 0; min-height:186px;
  border-radius:var(--radius-lg); color:var(--ink) !important;
  /* 두 패널을 색으로 구분하되 채도를 낮춰 둔다. 경쟁사처럼 형광 보라·하늘색을
     쓰면 남색 히어로 위에서 화면이 튄다. */
  background:var(--amber-soft); border:1px solid var(--amber-line);
  transition:border-color .12s, background-color .12s;
}
.hpanel.near{background:var(--emerald-soft); border-color:var(--emerald-line)}
.hpanel:hover{text-decoration:none; border-color:var(--navy-600)}

.hp-tag{
  align-self:flex-start; padding:4px 10px; border-radius:4px;
  background:var(--amber); color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.01em;
}
.hpanel b{
  display:block; margin-top:12px; font-size:21px; font-weight:800;
  letter-spacing:-.02em; line-height:1.28;
}
.hp-tag.alt{background:var(--emerald-ink)}
.hpanel b span{display:block; font-size:15px; font-weight:600; color:var(--muted)}
.hpanel em{
  margin-top:7px; font-style:normal; font-size:12.5px; line-height:1.55;
  color:var(--muted); max-width:200px;
}
/* 그림은 카드 오른쪽 아래에 걸치게 둔다. 가운데 두면 글과 자리를 다툰다. */
.hp-art{position:absolute; right:-14px; bottom:-10px; opacity:.9; pointer-events:none}

/* 밝은 패널 위에서 읽히도록 선을 남색으로 뒤집었다. 어두운 배경용
   반투명 흰 선을 그대로 두면 흰 바탕에서 아무것도 안 보인다. */
.heroart .plate{fill:#fff; stroke:#c8d2de; stroke-width:1.4}
.heroart .notch{fill:var(--amber-soft); stroke:#c8d2de; stroke-width:1.4}
.hpanel.near .heroart .notch{fill:var(--emerald-soft)}
.heroart .dash{stroke:#c8d2de; stroke-width:1.4; stroke-dasharray:4 4}
.heroart .line{stroke:#9fb0c4; stroke-width:1.6; stroke-linecap:round}
.heroart .line.soft{stroke:#d8dfe8}
.heroart .bar1{fill:#c3ccd8}
.heroart .bar2{fill:#d9ae66}
.heroart .bar3{fill:var(--amber)}
.heroart .grid{stroke:#e3e8ee; stroke-width:1}
.heroart .radius{fill:rgba(15,122,95,.10); stroke:var(--emerald); stroke-width:1.4}
.heroart .me{fill:var(--emerald)}
.heroart .pin{fill:#fff; stroke:var(--navy-700); stroke-width:1.3}

@media (max-width:1080px){
  .hero-wrap{grid-template-columns:1fr}
  .hero-panels{width:auto; margin-top:22px}
}
@media (max-width:560px){
  .hero-panels{grid-template-columns:1fr}
  .hpanel{min-height:150px}
  .hp-art{opacity:.55}
}

/* ---------------------------------------------------- 상담 패널 (우측 하단) */
/* 카카오 오픈채팅으로 보내는 고정 패널.
   본문은 차분하게 가되 이 패널만은 눈에 띄어야 한다 — 손님이 물어볼 곳을
   못 찾으면 그냥 나가버린다. 그래서 여기서만 광택·움직임을 쓴다.
   대신 상시로 번쩍이지 않게, 느린 주기(4초)로 한 번씩만 훑고 지나가게 했다. */
.chatbox{
  position:fixed; right:18px; bottom:18px; z-index:80; width:206px;
  border-radius:14px; overflow:hidden;
  background:#fff;
  box-shadow:0 6px 22px rgba(17,28,43,.16), 0 2px 6px rgba(17,28,43,.08);
  animation:cb-in .32s ease-out both;
}
.chatbox[hidden]{display:none}
@keyframes cb-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.cb-head{
  position:relative; margin:0; padding:10px 12px;
  /* 딥그린 → 조금 밝은 초록. 히어로 같은 넓은 면이 아니라 작은 띠라
     그라데이션을 써도 화면이 번쩍이지 않는다. */
  background:linear-gradient(100deg, #0b5d48 0%, #12856a 55%, #0f7a5f 100%);
  color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.cb-head svg{flex:0 0 auto}
/* 머리줄 위를 훑고 지나가는 광택 */
.cb-head::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%,
              rgba(255,255,255,.34) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:cb-sheen 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cb-sheen{
  0%, 62% {transform:translateX(-120%)}
  86%,100%{transform:translateX(120%)}
}
/* 상담 가능 표시. 깜빡임이 아니라 부드럽게 번지는 고리로 둔다. */
.cb-dot{
  width:7px; height:7px; border-radius:50%; background:#7fe3c0; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(127,227,192,.7); animation:cb-pulse 2.4s infinite;
}
@keyframes cb-pulse{
  70%{box-shadow:0 0 0 7px rgba(127,227,192,0)}
  100%{box-shadow:0 0 0 0 rgba(127,227,192,0)}
}
.cb-live{
  margin-left:auto; padding:2px 7px; border-radius:20px;
  background:rgba(255,255,255,.18); font-size:10.5px; font-weight:700;
  letter-spacing:.01em;
}
.chatbox-x{
  position:absolute; top:-1px; right:2px; z-index:2;
  width:24px; height:24px; padding:0; line-height:1;
  background:transparent; border:0; cursor:pointer;
  color:rgba(255,255,255,.7); font-size:17px;
}
.chatbox-x:hover{color:#fff}

.cb-body{padding:15px 13px 13px; text-align:center; background:var(--emerald-soft)}
.cb-mark{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:10px;
  background:#fff; border:1px solid var(--emerald-line);
  font-size:15px; font-weight:800; color:var(--navy-900); letter-spacing:-.02em;
  box-shadow:0 1px 3px rgba(17,28,43,.06);
}
.cb-mark b{color:var(--emerald)}
.cb-mark .logo-mark{flex:0 0 auto}
.cb-ask{margin:11px 0 10px; font-size:12.5px; color:var(--body); line-height:1.55}
.cb-ask em{font-style:normal; color:var(--muted); font-size:11.5px}

.cb-btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 8px; border-radius:9px;
  background:#FEE500; color:#191600 !important;
  font-size:13.5px; font-weight:800; text-align:center;
  box-shadow:0 2px 6px rgba(254,229,0,.45);
  transition:transform .12s, box-shadow .12s;
}
.cb-btn:hover{
  text-decoration:none; transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(254,229,0,.6);
}
.cb-btn-ic{display:flex}
/* 버튼에도 같은 광택을 쓰되 머리줄과 시차를 둬 동시에 번쩍이지 않게 한다 */
.cb-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%,
              rgba(255,255,255,.75) 50%, transparent 62%);
  transform:translateX(-120%);
  animation:cb-sheen 4s ease-in-out .6s infinite;
  pointer-events:none;
}
.cb-tel{
  display:flex; align-items:center; justify-content:center; gap:4px;
  margin-top:8px; font-size:12px; color:var(--muted) !important;
  font-variant-numeric:tabular-nums;
}

/* 좁은 화면에서는 표를 가리므로 알약 버튼 하나로 줄인다 */
@media (max-width:640px){
  .chatbox{right:12px; bottom:12px; width:auto; background:transparent;
    box-shadow:none; border-radius:0}
  .cb-head, .cb-mark, .cb-ask, .cb-tel, .chatbox-x{display:none}
  .cb-body{padding:0; background:transparent}
  .cb-btn{padding:12px 18px; border-radius:26px;
    box-shadow:0 4px 14px rgba(17,28,43,.22)}
}

/* 움직임을 줄여 달라는 설정을 켠 사용자에게는 광택·맥동을 끈다 */
@media (prefers-reduced-motion:reduce){
  .chatbox, .cb-head::after, .cb-btn::after, .cb-dot{animation:none}
  .cb-head::after, .cb-btn::after{display:none}
}

/* 로고를 키운 만큼 좁은 화면에서 메뉴와 부딪힌다. 부제를 먼저 접는다. */
@media (max-width:900px){
  .logo-text em{display:none}
  .logo-text b{font-size:23px}
  .topbar .wrap{height:66px}
}

/* 톤 섹션을 좌우로 조금 흘려 넓게 보이게 한다.
   100vw 로 잡으면 안 된다 — vw 는 스크롤바 폭까지 포함해서, 세로 스크롤이
   있는 화면에서 그 폭만큼 가로 스크롤이 생긴다. 부모(.wrap)의 좌우 여백만큼만
   내보내면 화면 밖으로 나갈 일이 없다. */
section.block.bleed{
  margin-inline:-20px;
  padding-inline:20px;
}

/* ---------------------------------------------------- 검색 화면 */
/* 손님이 가장 오래 보는 화면이다. 원칙은 하나 — 표가 빨리 나와야 한다.
   측정값: 고치기 전 표 시작 위치 444px(720px 화면에서 3~4줄만 보였다). */

/* 빠른 조건. 처음 온 손님은 무엇부터 눌러야 할지 모른다. */
.presets{
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin:0 0 14px;
}
.presets-label{
  font-size:12.5px; font-weight:700; color:var(--muted); margin-right:3px;
}
.preset{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:20px;
  background:var(--emerald-soft); border:1px solid var(--emerald-line);
  color:var(--emerald-ink) !important; font-size:13px; font-weight:600;
  transition:background-color .12s, border-color .12s;
}
.preset:hover{text-decoration:none; background:#dcebe4; border-color:var(--emerald)}
.preset svg{flex:0 0 auto}

/* 상세 조건 — 접었다 펴는 상자.
   조건이 걸려 있으면 접힌 채로 시작한다(템플릿의 open 속성). */
.filters-wrap{
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; margin:0 0 12px;
}
.filters-wrap > summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; cursor:pointer; list-style:none;
}
.filters-wrap > summary::-webkit-details-marker{display:none}
.filters-wrap > summary::after{
  content:""; margin-left:auto;
  width:8px; height:8px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform .15s;
}
.filters-wrap[open] > summary::after{transform:rotate(-135deg)}
.filters-wrap[open] > summary{border-bottom:1px solid var(--line)}
.fw-title{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:700; color:var(--ink);
}
.fw-hint{font-size:12.5px; color:var(--muted)}

.filters{padding:14px; display:flex; flex-direction:column; gap:12px}
.frow{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
/* 칸마다 라벨을 붙인다. 셀렉트만 다섯 개 늘어놓으면 무슨 조건인지 모른다. */
.fld{display:flex; flex-direction:column; gap:4px; min-width:132px}
.fld > span{font-size:11.5px; font-weight:700; color:var(--muted)}
.fld.wide{flex:1 1 220px}
.fld.narrow{min-width:96px}
.fld input, .fld select{width:100%}
.fchecks{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-bottom:8px}
.fbtns{display:flex; gap:8px; align-items:center; margin-left:auto; padding-bottom:4px}
.fbtns .btn{display:inline-flex; align-items:center; gap:6px}

/* 적용된 조건 칩. 필터를 접어도 무엇으로 걸렀는지 보여야 한다. */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px 5px 11px; border-radius:16px;
  background:var(--navy-800); color:#fff !important;
  font-size:12.5px; font-weight:600;
}
.chip i{
  font-style:normal; font-size:15px; line-height:1; opacity:.6;
}
.chip:hover{text-decoration:none; background:var(--navy-700)}
.chip:hover i{opacity:1}
.chip.clear{
  background:transparent; color:var(--muted) !important;
  border:1px solid var(--line); padding:5px 11px;
}
.chip.clear:hover{background:var(--surface); color:var(--ink) !important}

.result-head .rh-count strong{font-size:17px; color:var(--ink)}
.result-head .rh-left{font-size:12.5px}
.result-head .rh-page{font-size:12.5px}
/* 지점명은 상호 옆에 작게. 예전에는 별도 칸이었는데 대부분 '-' 라
   자리만 차지했다(측정: 표본 전량 중 다수가 빈 값). */
.grid .br{font-size:12px; color:var(--muted); font-weight:500}

@media (max-width:720px){
  .fld{min-width:calc(50% - 5px)}
  .fld.wide{flex-basis:100%}
  .fbtns{margin-left:0; width:100%}
  .fbtns .btn{flex:1}
}

/* ---------------------------------------------------- 이용권 화면 */
/* 가격만 보여주면 비싼지 싼지 판단할 기준이 없다. 값어치의 근거를
   요금 위에 먼저 놓는다. */
.price-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:0 0 16px;
}
.price-facts div{background:#fff; padding:15px 12px; text-align:center}
.price-facts div:first-child{background:var(--emerald-soft)}
.price-facts b{
  display:block; font-size:22px; font-weight:800; color:var(--navy-800);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.price-facts div:first-child b{color:var(--emerald-ink)}
.price-facts b.up{color:var(--emerald)}
.price-facts span{display:block; font-size:12px; color:var(--muted); margin-top:3px}

/* 절약률 배지. 12개월이 월 44,384원인데 1개월 대비 50% 싸다는 걸
   적어주지 않으면 장기권을 고를 이유가 화면에 없다. */
.plan .save{
  display:inline-block; margin-left:5px; padding:2px 7px; border-radius:4px;
  background:var(--amber-soft); border:1px solid var(--amber-line);
  color:var(--amber-ink); font-size:11.5px; font-weight:700;
}
.plan-btn{width:100%; margin-top:14px; text-align:center}
.plan-note{margin:10px 0 0; font-size:12.5px; color:var(--muted)}

/* 한도 비교표. 무료로 어디까지 되고 이용권이 무엇을 더 주는지 한눈에. */
.grid.limits{min-width:520px}
.grid.limits td:first-child{font-weight:600; color:var(--ink)}
.grid.limits .yes{color:var(--emerald-ink); font-weight:600}

@media (max-width:720px){
  .price-facts{grid-template-columns:repeat(2,1fr)}
}

/* ---------------------------------------------------- 교차 링크 카드 */
/* 지역 → 업종, 업종 → 지역으로 건너가는 카드. region-card 보다 촘촘하게
   두어 한 화면에 조합이 많이 보이게 한다 — 이 링크가 SEO 유입 경로다. */
.xgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px;
}
.xcard{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 13px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink);
  transition:border-color .12s, background-color .12s;
}
.xcard:hover{text-decoration:none; border-color:var(--emerald); background:var(--emerald-soft)}
.xcard b{font-size:14px; font-weight:700}
.xcard span{
  font-size:16px; font-weight:800; color:var(--navy-800);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.xcard em{font-style:normal; font-size:11.5px; color:var(--muted)}
.xnote{
  margin:14px 0 0; padding:11px 14px; font-size:13.5px; color:var(--muted);
  background:var(--tint); border:1px solid var(--line); border-radius:var(--radius);
}
.xnote a{font-weight:700}

/* ---------------------------------------------------- 마이페이지 */
/* 이용권 상태. 표 한 칸에 묻어두면 손님이 며칠 남았는지 찾지 못한다.
   상태에 따라 테두리 색만 바꾼다 — 배경을 칠하면 화면이 소란스럽다. */
.lic{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between;
  padding:20px 22px; border:1px solid var(--line); border-left-width:4px;
  border-radius:var(--radius-lg); background:var(--paper);
}
.lic-on,.lic-admin{border-left-color:var(--emerald); background:var(--emerald-soft)}
.lic-soon{border-left-color:var(--amber); background:var(--amber-soft)}
.lic-off{border-left-color:var(--line); background:var(--tint)}
.lic-main{min-width:0}
.lic-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:800; letter-spacing:-.01em;
}
.lic-on .lic-badge,.lic-admin .lic-badge{color:var(--emerald-ink)}
.lic-soon .lic-badge{color:var(--amber-ink)}
.lic-off .lic-badge{color:var(--muted)}
.lic-title{margin:6px 0 4px; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.lic-main p{margin:0; font-size:13.5px; color:var(--body)}
.lic-act{display:flex; gap:8px; flex-shrink:0}

/* 남은 한도. 숫자만 적으면 얼마나 남았는지 감이 오지 않는다. */
.quota{
  padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--paper);
}
.quota-nums{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.quota-nums b{
  font-size:26px; font-weight:800; color:var(--navy-800);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.quota-nums span{font-size:14px; font-weight:700; color:var(--body)}
.quota-nums em{
  font-style:normal; margin-left:auto; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.quota-bar{
  margin-top:10px; height:7px; border-radius:99px;
  background:var(--line-soft); overflow:hidden;
}
.quota-bar span{display:block; height:100%; background:var(--emerald); border-radius:99px}

.ta-r{text-align:right}
.tag.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}

/* 알려진 한계처럼 조심해서 읽어야 하는 문장. 경고 배경까지 칠하면
   표가 소란스러워지므로 글자색만 바꾼다. */
.warn-text{color:var(--warn); font-size:13px; line-height:1.55}
.warn-text svg{vertical-align:-2px; margin-right:2px}

/* 수신동의 철회 줄. 표 안에 체크상자를 넣으면 눌러야 하는 것처럼 안 보인다. */
.consent-row{
  display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:center;
  margin-top:12px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--tint);
}
.consent-row .chk{margin:0; font-size:13.5px}
.consent-act{justify-self:end}
.consent-note{
  grid-column:1 / -1; margin:0; font-size:12.5px; color:var(--muted); line-height:1.6;
}
@media (max-width:560px){
  .consent-row{grid-template-columns:1fr}
  .consent-act{justify-self:start}
}

/* ---------------------------------------------------- 관리자 */
/* 운영 상태 한 줄. 집계 칸을 더 늘리면 중요한 네 숫자가 묻힌다. */
.admin-note{
  margin:12px 0 0; padding:10px 14px; font-size:13px; color:var(--body);
  background:var(--tint); border:1px solid var(--line); border-radius:var(--radius);
}
.admin-note strong{color:var(--ink); font-variant-numeric:tabular-nums}
.admin-search{display:flex; gap:6px; align-items:center; flex-shrink:0}
.admin-search input{
  width:200px; padding:7px 10px; font-size:13px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
}

/* ---------------------------------------------------- 헤더: 메뉴 + 계정 */
/* 계정 버튼(로그인·회원가입)은 우측 상단에 항상 둔다. brand 다음에
   nav-main 이 왼쪽으로 밀려 붙고, 계정 버튼과 햄버거가 오른쪽에 선다. */
.topbar .wrap{display:flex; align-items:center; gap:20px; height:74px}
.nav-main{display:flex; align-items:center; gap:20px; margin-left:auto}
.nav-main a{color:var(--body); font-size:14.5px; font-weight:500}
.nav-main a:hover{color:var(--navy-900); text-decoration:none}
.nav-account{display:flex; align-items:center; gap:8px}
.acct-link{color:var(--body); font-size:14px; font-weight:500; white-space:nowrap}
.acct-link:hover{color:var(--navy-900); text-decoration:none}
.nav-toggle, .nav-burger{display:none}

@media (max-width:900px){
  .topbar .wrap{height:58px; gap:12px}
  .nav-main{gap:14px}
  .nav-main a{font-size:13.5px}
}

@media (max-width:720px){
  /* 계정 버튼은 그대로 우측에 두고, nav-main 만 햄버거로 접는다. */
  .nav-account{margin-left:auto}
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; padding:9px; flex:none;
    border:1px solid var(--line); border-radius:var(--radius);
    background:#fff; cursor:pointer;
  }
  .nav-burger span{
    display:block; height:2px; background:var(--navy-800); border-radius:2px;
    transition:transform .18s, opacity .18s;
  }
  .topbar .wrap{position:relative}
  .nav-main{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:6px 0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 8px 20px rgba(17,28,43,.10);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .22s ease, opacity .18s;
  }
  .nav-main a{
    padding:13px 20px; font-size:15px; border-bottom:1px solid var(--line-soft);
  }
  .nav-main a:last-child{border-bottom:none}
  .nav-toggle:checked ~ .nav-main{max-height:70vh; opacity:1; overflow:auto}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* 아주 좁은 화면에서 계정 버튼 글자를 줄여 두 버튼이 다 들어가게 한다. */
@media (max-width:380px){
  .nav-account{gap:6px}
  .btn.small{padding:7px 11px; font-size:13px}
}

/* ===================== 프리미엄 폴리시 (2026-08 추가) =====================
   기존 플랫 디자인 위에 '격'을 올린다: 부드러운 다층 그림자, 히어로 그라데이션,
   카드 호버 리프트. 원본 규칙은 건드리지 않고 뒤에서 덧입힌다(되돌리기 쉽다). */
:root{
  --radius:7px; --radius-lg:13px;
  --shadow:0 1px 2px rgba(17,28,43,.05), 0 1px 3px rgba(17,28,43,.05);
  --shadow-md:0 4px 16px -6px rgba(17,28,43,.12), 0 2px 6px -2px rgba(17,28,43,.06);
  --shadow-lg:0 22px 48px -18px rgba(15,122,95,.28), 0 10px 24px -12px rgba(17,28,43,.16);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* 히어로 — 은은한 다층 그라데이션 */
.hero{
  background:
    radial-gradient(1150px 520px at 84% -12%, rgba(15,122,95,.16), transparent 58%),
    radial-gradient(820px 460px at 4% 128%, rgba(180,118,26,.09), transparent 55%),
    linear-gradient(162deg, #eef6f2 0%, #e9f2ee 42%, #f5f9f7 100%);
  border-bottom:1px solid var(--emerald-line);
}
.hero h1{ letter-spacing:-.022em; }
/* 헤드라인 강조어 그라데이션 — 지원 브라우저에서만(미지원 시 원래 초록 유지) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .hl{
    background:linear-gradient(118deg, #12916f 0%, #0f7a5f 55%, #0b5d48 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.badge{ box-shadow:var(--shadow-md); }

/* 히어로 홍보 패널 — 입체 + 호버 부상 */
.hpanel{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hpanel:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }

/* DB 종류 카드 — 부상 + 상단 강조선(호버 시 슥) */
.db-card{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
  transition:transform .17s var(--ease), box-shadow .17s var(--ease), border-color .17s;
}
.db-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--emerald), var(--emerald-light));
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.db-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--emerald-line); }
.db-card:hover::before{ transform:scaleX(1); }

/* 특징 카드 — 입체 + 아이콘 그라데이션 */
.feature{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  transition:transform .17s var(--ease), box-shadow .17s var(--ease);
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feature .ico{
  background:linear-gradient(135deg, #ecf6f1, #d6ebe1);
  box-shadow:inset 0 0 0 1px var(--emerald-line);
}

/* 업종·지역 카드 — 부상 */
.region-card{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s;
}
.region-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--emerald-line); }

/* 통계 박스 / 표 카드 — 층 그림자 */
.db-sum > div, .price-facts > div{ box-shadow:var(--shadow-md); border-radius:var(--radius-lg); }
.table-card{ box-shadow:var(--shadow-md); border-radius:var(--radius-lg); overflow:hidden; }

/* 요금 플랜 카드 — 입체 + 호버(인기 플랜은 더 강한 그림자) */
.plan{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  transition:transform .17s var(--ease), box-shadow .17s var(--ease);
}
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.plan.best{ box-shadow:0 24px 50px -20px rgba(15,122,95,.4), 0 8px 22px -10px rgba(17,28,43,.18); }

/* 버튼 — 미세 입체 + 강조 버튼 글로우 */
.btn{ box-shadow:0 1px 2px rgba(17,28,43,.12);
  transition:background-color .12s, border-color .12s, transform .12s, box-shadow .12s, filter .12s; }
.btn:hover{ transform:translateY(-1px); }
.btn.accent{ background:linear-gradient(135deg, #14a37c, #0f7a5f); border-color:transparent;
  box-shadow:0 6px 18px -6px rgba(15,122,95,.5); }
.btn.accent:hover{ filter:brightness(1.06); box-shadow:0 10px 24px -6px rgba(15,122,95,.55); }
.btn.on-dark{ background:linear-gradient(135deg, #24384f, #1b2a3d); }
.btn.on-dark:hover{ filter:brightness(1.12); }

/* tint 섹션 — 미세 그라데이션으로 면 구분을 부드럽게 */
section.block.tint{ background:linear-gradient(180deg, #f6faf8, #eff5f2); }

/* 값어치 배너 살짝 입체 */
.value-banner{ box-shadow:var(--shadow-md); }

/* ===================== 다크 프리미엄 히어로 (2026-08 추가) =====================
   밝던 첫 화면을 진한 남색·에메랄드로 전환해 격을 크게 올린다. 밝은 글씨 + 발광
   버튼 + 유리 카드. 히어로는 홈에서만 렌더되므로 다른 페이지엔 영향 없다. */
.hero{
  background:
    radial-gradient(900px 520px at 86% -22%, rgba(20,163,124,.30), transparent 60%),
    radial-gradient(720px 460px at 8% 122%, rgba(180,118,26,.16), transparent 55%),
    linear-gradient(155deg, #0a2a22 0%, #0c2231 55%, #0a1a26 100%);
  color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:66px 0 62px;
}
.hero::before{  /* 상단 은은한 하이라이트 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1200px 320px at 50% -42%, rgba(255,255,255,.06), transparent 70%);
}
.hero h1{
  color:#fff; font-size:44px; line-height:1.13; letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .hl{
    background:linear-gradient(105deg, #4fe0b0 0%, #2fd39a 45%, #86d9bf 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.hero .lead{ color:rgba(255,255,255,.74); font-size:16px; }
.hero .lead strong{ color:#fff; }
.badge{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.9); box-shadow:none; backdrop-filter:blur(6px);
}
.badge .pulse{ background:#4fe0b0; box-shadow:0 0 0 3px rgba(79,224,176,.22); }

/* 히어로 버튼 — 주: 밝은 에메랄드 글로우 / 보조: 반투명 유리 */
.hero .cta .btn.on-dark{
  background:linear-gradient(135deg, #16b98a, #0f9d75);
  color:#04231b !important; border-color:transparent; font-weight:700;
  box-shadow:0 12px 32px -10px rgba(22,185,138,.6);
}
.hero .cta .btn.on-dark:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.hero .cta .btn.on-dark.outline{
  background:rgba(255,255,255,.06); color:#fff !important;
  border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); box-shadow:none;
}
.hero .cta .btn.on-dark.outline:hover{ background:rgba(255,255,255,.12); }

/* 홍보 패널 — 다크 위에서 도드라지는 발광 카드 */
.hpanel{
  box-shadow:0 22px 54px -22px rgba(0,0,0,.55), 0 4px 14px -4px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.55);
}
.hpanel:hover{ box-shadow:0 30px 64px -20px rgba(0,0,0,.6); }

/* ============ DB 종류별 컬러 아이콘 + 컬러풀 홍보 패널 (2026-08 추가) ============
   경쟁사(newdb)처럼 종류마다 색을 달리해 활기를 준다. 단, 3D 장난감풍은 피하고
   기존 2톤 도형은 유지한 채 색상만 종류별로 나눈다(정직·자료 톤 유지). */
.db-store  { --art-plate:#fbf1dd; --art-fill:#eab866; --art-line:#9a6714; }
.db-portal { --art-plate:#e9f1fc; --art-fill:#7ba9ee; --art-line:#2a559e; }
.db-mobile { --art-plate:#e2f4f2; --art-fill:#68c9bd; --art-line:#137a6c; }
.db-tel    { --art-plate:#e6f5ea; --art-fill:#71c489; --art-line:#1f8a4c; }
.db-license{ --art-plate:#efeafb; --art-fill:#a794e8; --art-line:#5540ad; }
.db-market { --art-plate:#fdeee2; --art-fill:#f0a06e; --art-line:#c05a24; }
.db-corp   { --art-plate:#eaeff5; --art-fill:#8fa6c4; --art-line:#3d5570; }
.db-email  { --art-plate:#fce9ef; --art-fill:#eb92ac; --art-line:#b23a5f; }
.db-fax    { --art-plate:#f3ecdf; --art-fill:#c9a878; --art-line:#8a6a3a; }
/* 호버 시 상단 강조선도 그 종류 색으로 */
.db-store::before  { background:linear-gradient(90deg,#eab866,#f3d199)!important; }
.db-portal::before { background:linear-gradient(90deg,#7ba9ee,#a9c8f4)!important; }
.db-mobile::before { background:linear-gradient(90deg,#68c9bd,#9adcd3)!important; }
.db-license::before{ background:linear-gradient(90deg,#a794e8,#c5b8f0)!important; }
.db-market::before { background:linear-gradient(90deg,#f0a06e,#f5bd9a)!important; }
.db-email::before  { background:linear-gradient(90deg,#eb92ac,#f2b3c4)!important; }

/* 홍보 패널 — 은은한 컬러 그라데이션으로 활기 */
.hpanel.buy{ background:linear-gradient(150deg,#fff8ec,#fdeecd); }
.hpanel.near{ background:linear-gradient(150deg,#eefaf4,#dcf1e7); }

/* ============ 히어로 홍보 패널 세련되게 다듬기 (2026-08 추가) ============
   회색 플랫 그림을 그라데이션 SVG 로 교체(_heroart.html)한 것에 맞춰,
   카드도 그라데이션 배경·알약 태그·그림 그림자로 격을 올린다. */
.hpanel{
  padding:18px 18px 0; min-height:196px;
  box-shadow:0 22px 48px -20px rgba(0,0,0,.5), 0 3px 10px -3px rgba(0,0,0,.26);
}
.hpanel.buy{ background:linear-gradient(155deg,#fffaf0 0%, #fceccd 100%); border-color:#efd9a6; }
.hpanel.near{ background:linear-gradient(155deg,#f1fbf6 0%, #d9f1e6 100%); border-color:#bce2d1; }
.hpanel:hover{ border-color:rgba(255,255,255,.7); }
.hp-tag{
  border-radius:999px; padding:5px 13px; font-size:11px; letter-spacing:.02em;
  box-shadow:0 2px 7px rgba(0,0,0,.14);
}
.hpanel b{ font-size:22px; margin-top:14px; }
.hpanel b span{ color:#7a8590; }
.hpanel em{ color:#69747f; }
.hp-art{
  right:-6px; bottom:-4px; opacity:.98;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.10));
  transition:transform .22s var(--ease);
}
.hpanel:hover .hp-art{ transform:translateY(-3px) scale(1.03); }

/* ============ '오늘 등록된 데이터' 배지 (2026-08 추가) ============ */
.today-new{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(135deg,#e9f7f0,#dff2e9);
  border:1px solid var(--emerald-line); box-shadow:var(--shadow-md);
  font-size:14px; color:var(--emerald-ink);
}
.today-new b{ color:var(--emerald); font-weight:800; }
.today-new em{ font-style:normal; color:var(--muted); font-size:12.5px; }
.today-new .tn-dot{
  width:8px; height:8px; border-radius:50%; background:#16b98a;
  box-shadow:0 0 0 4px rgba(22,185,138,.18); animation:tnpulse 1.8s ease-in-out infinite;
}
@keyframes tnpulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* 상세검색 필터를 항상 펼쳐 보여준다 (예전엔 눌러서 여는 details 였다) */
.filters-wrap > .fw-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--line);
}