/* 헤럴드창업 — 손으로 짠 스타일 시트.
   빌드 도구 없이 nginx 가 그대로 내보낸다. 색은 전부 아래 변수로만 다룬다. */

/* 제목·숫자용 서체. 본문(Pretendard)은 fonts/pretendard.css 가 따로 싣는다.
   [주의] /her/ 의 CSP 가 default-src 'self' 라 외부 CDN 은 막힌다. 전부 자체 호스팅. */
@font-face {
  font-family: "GmarketSans";
  font-weight: 700;
  src: url("fonts/GmarketSansBold.woff") format("woff");
  font-display: swap;
}

:root {
  /* 종이 위에 찍은 증서 같은 톤 — 남색 바탕, 금색 강조, 미색 종이.
     빨강(stamp)은 도장처럼 '숫자 하나'에만 쓴다. 많이 쓰면 값이 떨어진다. */
  --navy:       #0d2461;
  --navy-deep:  #081638;
  --gold:       #c9a84c;
  --gold-soft:  #e8d9ac;
  --stamp:      #a8322a;

  --ink:        #1c1c1a;
  --ink-soft:   #5c5a4f;
  --ink-faint:  #8a8776;
  --line:       #dfd8c3;
  --line-soft:  #ece7d6;
  --bg:         #f7f4ec;      /* paper */
  --bg-soft:    #f0ece0;
  --bg-card:    #fffdf7;      /* paper-card */

  --brand:      var(--navy);
  --brand-ink:  #ffffff;
  --brand-soft: #e7eaf3;
  --brand-deep: var(--navy);
  --accent:     var(--stamp);
  --ok:         #2f7d55;
  --shadow:     0 1px 2px rgba(28,28,26,.05), 0 10px 28px -16px rgba(8,22,56,.35);
  --radius:     14px;
  --wrap:       1240px;

  --head:       "GmarketSans", "Pretendard Variable", Pretendard, sans-serif;
}

/* 밤에 보는 사람을 위한 어두운 화면 — 토글로만 켜진다.
   종이 대신 짙은 남색을 깔되, 금색·도장색은 그대로 둬서 인상이 안 바뀌게 한다. */
html[data-theme="dark"] {
  --ink:        #f2efe4;
  --ink-soft:   #b6b1a0;
  --ink-faint:  #857f6f;
  --line:       #23304f;
  --line-soft:  #1a2440;
  --bg:         #060f24;
  --bg-soft:    #0a1730;
  --bg-card:    #0c1c3a;
  --brand-ink:  #ffffff;
  --brand-soft: #14264c;
  --brand-deep: var(--gold-soft);
  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.85);
}

/* 로고 — 머리띠와 바닥이 늘 남색이라 흰색 한 벌만 쓴다 */
/* 로고 — PC 화면에서 글자가 작아 잘 안 보인다는 이야기가 있어 키웠다.
   휴대폰은 머리띠 폭이 빠듯해서 아래 좁은 화면 규칙에서 다시 줄인다. */
.logo-img { height: 38px; width: auto; display: block; }
.footer-brand .logo-img { height: 32px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* 제목은 G마켓 산스. 본문과 섞이지 않도록 여기 한 곳에서만 지정한다. */
h1, h2, h3, .logo-text, .card-title, .card-price .val { font-family: var(--head); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
p { margin: 0; }
button { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.inline { display: inline; }
.only-dark { display: none; }
html[data-theme="dark"] .only-dark { display: inline; }
html[data-theme="dark"] .only-light { display: none; }

/* ================= 버튼 ================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  background: var(--bg-soft); color: var(--ink); cursor: pointer;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--line-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover { background: var(--bg-soft); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; }
.btn.lg { padding: 14px 28px; font-size: 16px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn.danger { background: var(--accent); color: #fff; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; cursor: pointer; font-size: 15px;
}
.icon-btn:hover { background: var(--bg-soft); }
/* 글자가 들어가는 아이콘 버튼(테마 전환 등) — 34px 정사각에 가두면 글자가 눌린다 */
.icon-btn.wide {
  width: auto; padding: 0 12px; height: 34px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}

/* ================= 상단바 ================= */

/* 머리띠는 늘 짙은 남색에 금색 밑줄 — 밝기 설정과 무관하게 같은 인상을 준다 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy-deep);
  border-bottom: 2px solid var(--gold);
}
.topbar-inner { display: flex; align-items: center; gap: 20px; height: 76px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-text { font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -0.02em; }
.logo-text em {
  display: block; font-style: normal; font-weight: 500;
  font-size: 12.5px; color: var(--gold-soft); opacity: .85; letter-spacing: 0;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
}

.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,.85); white-space: nowrap;
}
.nav a:hover { color: var(--gold-soft); background: rgba(255,255,255,.07); }

.topbar-right { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.menu-btn { display: none; }

/* 대표번호 — 목업의 금색 알약. 머리띠에서 가장 먼저 눈에 띄어야 한다. */
.header-cta {
  background: var(--gold); color: var(--navy-deep);
  font-size: 12.5px; font-weight: 800; padding: 8px 13px; border-radius: 4px;
  white-space: nowrap;
}
.header-cta:hover { filter: brightness(1.07); }

/* 머리띠 안의 버튼들은 남색 위에 얹히므로 밝은 쪽으로 뒤집는다 */
.topbar-right .btn.ghost {
  background: transparent; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.9);
}
.topbar-right .btn.ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.topbar-right .btn.primary { background: var(--gold); color: var(--navy-deep); }
.topbar-right .icon-btn { color: rgba(255,255,255,.7); }
.topbar-right .icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

@media (max-width: 1180px) {
  .header-cta { display: none; }
}
@media (max-width: 1100px) {
  .nav {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--navy-deep); border-bottom: 2px solid var(--gold);
    padding: 10px 20px 18px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; }
  .menu-btn { display: inline-flex; }
  .logo-text em { display: none; }
}
@media (max-width: 560px) {
  .topbar-right .btn { display: none; }
  .topbar-right .btn.primary { display: inline-flex; }
  /* 휴대폰에서는 머리띠 폭이 빠듯하다 — 로고를 키운 것은 PC 화면 이야기라
     여기서는 손대기 전 크기로 되돌린다(원래도 «잘 보인다»고 하셨다). */
  .topbar-inner { height: 64px; }
  .logo-img { height: 26px; }
  .nav { inset: 66px 0 auto 0; }
}

/* ================= 히어로 ================= */
/* 짙은 남색 판 위에 검색창 하나. 관리자가 배경 사진을 올리면 그 위에 같은
   남색을 덮어 글자 대비를 지킨다(사진이 바뀌어도 읽기는 안 흔들린다). */

.hero {
  position: relative; overflow: hidden;
  padding: 72px 0 60px; text-align: center;
  background: var(--navy-deep);
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(13,36,97,.55), rgba(8,22,56,.2) 55%, rgba(8,22,56,.6));
}
.hero > .wrap { position: relative; z-index: 1; }

.hero.has-photo {
  background-image: var(--hero-image);
  background-size: cover; background-position: center;
}
/* [고침] 예전 덮개는 0.75~0.92 로 거의 새까매서, 사진을 올려도 화면이 그대로인
   것처럼 보였다(그래서 "등록해도 없어진다"고 하셨다). 사진이 보이는 선까지
   걷어내되, 글자가 묻히지 않게 위아래만 짙게 남기고 그림자를 준다. */
.hero.has-photo::before {
  background: linear-gradient(160deg, rgba(8,22,56,.62), rgba(8,22,56,.34) 52%, rgba(8,22,56,.72));
}
.hero.has-photo h1,
.hero.has-photo .hero-lead,
.hero.has-photo .search-hint { text-shadow: 0 2px 12px rgba(6,14,34,.75); }

.hero-badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: var(--gold-soft);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
}
.hero h1 {
  margin: 16px auto 12px; max-width: 900px; color: #fff;
  font-size: clamp(25px, 4.2vw, 36px); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.4;
}
.hero h1 span { color: var(--gold-soft); }
.hero-lead {
  font-size: clamp(14px, 1.8vw, 15px); color: rgba(255,255,255,.8);
  max-width: 660px; margin: 0 auto;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; justify-content: center; }
.hero-actions .btn.primary { background: var(--gold); color: var(--navy-deep); }
.hero-actions .btn.outline {
  background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff;
}
.hero-actions .btn.outline:hover { background: rgba(255,255,255,.12); }

/* 신뢰 표시 줄 */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
  margin-top: 30px; font-size: 13px; color: rgba(255,255,255,.72);
}
.hero-trust span { display: flex; align-items: center; gap: 7px; padding: 0 20px; }
.hero-trust span + span { border-left: 1px solid rgba(255,255,255,.18); }
.hero-trust i {
  font-style: normal; width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold); color: var(--navy-deep); font-size: 10px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}

/* 검색 도움말 — "띄어쓰기·순서 상관없이" 를 검색창 바로 밑에 붙인다 */
.search-hint {
  max-width: 640px; margin: 10px auto 0;
  font-size: 11.5px; color: var(--gold-soft); opacity: .82;
}

/* 검색 바 — 남색 판 위에 흰 종이 한 장을 얹은 모양 */
.searchbar {
  display: flex; gap: 8px; margin: 30px auto 0; padding: 8px;
  max-width: 640px; flex-wrap: wrap;
  background: #fff; border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.searchbar select, .searchbar input {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; font-size: 15px; outline: none;
}
.searchbar select { min-width: 150px; }
.searchbar input { flex: 1; min-width: 200px; }
.searchbar input:focus { border-color: var(--gold); }
.searchbar .btn { padding: 12px 22px; font-size: 14px; }

/* 업종 드롭다운을 없앤 단독 검색바 — 입력칸이 넓어야 브랜드+지역을 같이 친다 */
.searchbar.solo { gap: 8px; align-items: stretch; flex-wrap: nowrap; }
.searchbar.solo input {
  flex: 1; min-width: 0; border: 0; border-radius: 0;
  font-size: 15px; padding: 12px 14px; background: transparent;
}
.searchbar.solo input:focus { border: 0; }
.searchbar.solo .btn {
  border-radius: 4px; border: 0; padding: 0 22px;
  background: var(--stamp); color: #fff; font-size: 14px; font-weight: 800;
}
.searchbar.solo .btn:hover { filter: brightness(1.08); }

/* 추천 검색어 — 남색 배경 위라 테두리만 흐릿하게 둔다 */
.quick-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px auto 0; max-width: 640px; font-size: 12px; justify-content: center;
}
.quick-tags > span { color: rgba(255,255,255,.6); margin-right: 2px; }
.quick-tags a {
  color: rgba(255,255,255,.8); text-decoration: none; padding: 5px 12px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  transition: background .15s, border-color .15s, color .15s;
}
.quick-tags a:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(255,255,255,.08); }

@media (max-width: 620px) {
  .quick-tags { justify-content: center; }
}

@media (max-width: 620px) {
  .hero { padding: 64px 0 56px; }
  .hero-trust span { padding: 4px 14px; }
  .hero-trust span + span { border-left: 0; }
}

/* ================= 섹션 ================= */

.section { padding: 56px 0; }
.section.tint { background: var(--bg-soft); }
/* 짙은 남색 판 — '왜 헤럴드창업인가' 처럼 통째로 뒤집는 자리 */
.section.dark { background: var(--navy-deep); color: #fff; }
.section.dark .section-head h2 { color: #fff; }
.section.dark .eyebrow { color: var(--gold-soft); }
.section.dark .section-head p { color: rgba(255,255,255,.7); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 26px; flex-wrap: wrap;
}
.eyebrow {
  font-size: 12px; font-weight: 700; color: var(--stamp);
  letter-spacing: .06em;
}
.section-head h2 {
  font-size: clamp(20px, 3vw, 24px); font-weight: 700; margin-top: 6px;
  color: var(--brand-deep);
}
html[data-theme="dark"] .section-head h2 { color: var(--gold-soft); }
.section-head p { color: var(--ink-soft); font-size: 14px; margin-top: 5px; }

/* 안쪽 페이지 머리 — 남색 띠 하나로 화면을 연다 */
.page-hero {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 2px,
                              transparent 2px, transparent 16px),
    linear-gradient(160deg, var(--navy-deep), var(--navy) 80%);
  color: #fff; padding: 52px 0 46px;
}
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero h1 {
  font-size: clamp(23px, 3.6vw, 30px); font-weight: 700; margin-top: 12px;
  max-width: 640px; line-height: 1.45;
}
.page-hero p {
  margin-top: 13px; font-size: 14px; color: rgba(255,255,255,.78);
  max-width: 580px; line-height: 1.8;
}
.page-hero.center { text-align: center; }
.page-hero.center h1, .page-hero.center p { margin-left: auto; margin-right: auto; }

/* 숫자 띠 (500+ / 60+ / 20+) */
.stat-strip {
  display: flex; gap: 1px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14); max-width: 560px; margin-top: 28px;
}
.stat-strip > div { flex: 1; background: var(--navy-deep); padding: 15px 14px; text-align: center; }
.stat-strip .num { font-family: var(--head); font-weight: 700; font-size: 23px; color: var(--gold-soft); line-height: 1.3; }
.stat-strip .num span { font-size: 15px; }
.stat-strip .lbl { font-size: 10.5px; color: rgba(255,255,255,.65); margin-top: 3px; }

/* '왜 헤럴드창업인가' 블록 */
.why-pill {
  display: inline-block; background: var(--gold); color: var(--navy-deep);
  font-family: var(--head); font-weight: 700; font-size: 15px;
  padding: 9px 22px; border-radius: 999px; margin-bottom: 16px; line-height: 1.4;
}
.why-lead { max-width: 640px; margin: 0 0 30px; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.82); }
.why-lead b { color: var(--gold-soft); font-weight: 600; }
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
  margin-top: 34px;
}
.why-item { background: var(--navy-deep); padding: 24px 22px; }
.why-item .mark { width: 22px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.why-item h4 { font-size: 14.5px; font-weight: 700; margin: 0; }
.why-item p { font-size: 12px; color: rgba(255,255,255,.68); margin-top: 8px; line-height: 1.6; }

/* ================= 업종 칩 ================= */

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-card);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip b { font-weight: 700; color: var(--ink-faint); font-size: 12.5px; }
.chip.on b { color: inherit; opacity: .8; }

/* ================= 매물 카드 ================= */

/* 넓은 화면에서 5열이 되도록 잡았다(목업 기준). 좁아지면 알아서 줄어든다. */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.card.urgent { border-color: color-mix(in srgb, var(--stamp) 45%, var(--line)); }

/* 카드 전체를 덮는 투명한 링크. 안에 전화 링크가 따로 있어서 <a> 로 통째로
   감쌀 수 없기 때문에(중첩 <a> 는 마크업이 깨진다) 이렇게 판을 깐다. */
.card-link { position: absolute; inset: 0; z-index: 1; }

.card-photo {
  position: relative; aspect-ratio: 4 / 3; background: var(--navy-deep);
  display: grid; place-items: center; overflow: hidden;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 배지 — 사진 왼쪽 위에서 튀어나오는 리본 */
.doc-tag {
  position: absolute; top: 8px; left: 0; z-index: 2;
  background: var(--gold); color: var(--navy-deep);
  font-size: 10.5px; font-weight: 800; padding: 4px 10px 4px 11px;
  border-radius: 0 20px 20px 0;
}
.doc-tag.urgent { background: var(--stamp); color: #fff; }
.doc-tag.new    { background: var(--ok);    color: #fff; }

/* '✓ 검증' — 게시된 매물에 자동으로 붙는다 */
.verified {
  position: absolute; top: 8px; right: 44px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--stamp);
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px;
}
.view-count {
  position: absolute; bottom: 6px; right: 9px; z-index: 2;
  font-size: 10px; color: #fff; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.fav {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(8,22,56,.62); color: #fff; font-size: 13px;
  display: grid; place-items: center; transition: background .15s;
}
.fav:hover { background: rgba(8,22,56,.88); }
.fav.on { background: var(--stamp); }

.card-body { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1; }

.card-meta { font-size: 11px; color: var(--ink-soft); }

/* 제목은 두 줄까지. 길이가 제각각이어도 카드 높이는 늘 같아야 한다. */
.card-title {
  font-size: 14px; font-weight: 700; color: var(--brand-deep);
  margin-top: 4px; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
html[data-theme="dark"] .card-title { color: var(--gold-soft); }

/* 가게 인수금 — 카드에서 제일 큰 숫자 */
.card-price { margin-top: 8px; }
.card-price .lbl { font-size: 10px; color: var(--ink-soft); font-weight: 600; }
.card-price .val {
  display: block; font-size: 18px; font-weight: 800; color: var(--brand-deep);
  margin-top: 1px; letter-spacing: -.02em;
}
html[data-theme="dark"] .card-price .val { color: var(--gold-soft); }

/* 2×2 요약 — 건물예치금 / 월 고정비용 / 월매출 / 월예상순수익 */
.card-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px;
  margin-top: 9px; font-size: 10px; color: var(--ink-soft); line-height: 1.35;
}
.card-stats div { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.card-stats b { display: block; color: var(--ink); font-weight: 700; font-size: 12px; margin-top: 1px; }
.card-stats .profit b { color: var(--stamp); }
html[data-theme="dark"] .card-stats .profit b { color: #e8837a; }

.card-foot {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
}
.card-foot .agent-name { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; }
/* 전화 버튼은 카드 링크 판 위에 떠 있어야 눌린다 */
.card-foot .call-btn {
  position: relative; z-index: 2; display: block; text-align: center;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--navy);
  padding: 8px; border-radius: 7px; white-space: nowrap;
}
.card-foot .call-btn:hover { background: var(--navy-deep); }

/* 긴급 입찰 띠 */
.notice-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 20px; margin-bottom: 20px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.notice-bar b { color: var(--accent); font-size: 15.5px; }
.notice-bar span { color: var(--ink-soft); font-size: 13.5px; }
.notice-bar a { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.notice-bar a:hover { color: var(--brand-deep); }

/* ================= 좌우 사이드 레일 ================= */
/* 넓은 화면에서만 뜬다. 본문 폭을 건드리지 않도록 fixed 로 띄운다. */

.rail { position: fixed; top: 140px; z-index: 20; width: 104px; text-align: center; }
.rail.left  { left: max(12px, calc((100vw - var(--wrap)) / 2 - 122px)); }
.rail.right { right: max(12px, calc((100vw - var(--wrap)) / 2 - 122px)); }
.rail h5 { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; margin-bottom: 10px; }

.rail-card {
  display: block; padding: 14px 8px; border-radius: 14px; margin-bottom: 10px;
  color: #fff; transition: transform .15s;
}
.rail-card:hover { transform: translateY(-2px); }
.rail-card .ico { font-size: 22px; }
.rail-card b { display: block; font-size: 13px; margin: 6px 0 4px; }
.rail-card small { display: block; font-size: 10.5px; opacity: .82; line-height: 1.5; }

@media (max-width: 1520px) { .rail { display: none; } }

/* ================= 필터 ================= */

.filters {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 22px;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-row + .filter-row { margin-top: 10px; }
.field-inline { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.field-inline label { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
textarea { resize: vertical; min-height: 110px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field > label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field .hint { font-size: 12.5px; color: var(--ink-faint); }
.field-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ================= 표 ================= */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
th, td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { background: var(--bg-soft); font-weight: 700; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ================= 기타 ================= */

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--bg-soft); color: var(--ink-soft);
}
.pill.ok      { background: var(--brand-soft); color: var(--brand-deep); }
/* 대기·수정처럼 «아직 끝나지 않은» 상태는 초록(ok)과 눈에 띄게 갈라 놓는다 */
.pill.warn    { background: rgba(202,138,4,.16); color: #8a5a00; }
.pill.danger  { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

.alert {
  padding: 13px 16px; border-radius: 11px; font-size: 14px;
  border: 1px solid var(--line); background: var(--bg-soft); margin-bottom: 16px;
}
.alert.ok   { border-color: var(--ok);     background: color-mix(in srgb, var(--ok) 10%, transparent); }
.alert.err  { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.empty {
  padding: 70px 20px; text-align: center; color: var(--ink-faint);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feature {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.feature .ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 14px; font-weight: 800; letter-spacing: -.3px;
}
.feature h3 { margin: 12px 0 7px; font-size: 16.5px; font-weight: 700; }
.feature p { font-size: 14px; color: var(--ink-soft); }

/* 상담 유도 — 종이 위에 그대로 얹는다(색 판을 하나 더 깔면 화면이 시끄럽다) */
.cta { padding: 46px 20px; text-align: center; }
.cta h2 { font-size: clamp(20px, 3vw, 25px); font-weight: 700; color: var(--brand-deep); }
html[data-theme="dark"] .cta h2 { color: var(--gold-soft); }
.cta p { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
.cta .phone {
  display: inline-block; margin-top: 18px;
  font-family: var(--head);
  font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--brand-deep);
}
html[data-theme="dark"] .cta .phone { color: var(--gold-soft); }
.cta-btns { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.cta-btns .primary { background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; padding: 13px 26px; border-radius: 4px; }
.cta-btns .secondary { background: #fce9e9; color: var(--stamp); font-weight: 800; font-size: 14px; padding: 13px 26px; border-radius: 4px; }
.cta-btns .secondary:hover { filter: brightness(.97); }

/* 컴플라이언스 고지 — 본문과 바닥 사이에 조용히 한 줄 */
.disclaimer {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.7;
  border-top: 1px solid var(--line); padding: 14px 0; text-align: center; margin: 0;
}

.pager { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; padding: 8px 12px; border-radius: 9px; text-align: center;
  border: 1px solid var(--line); font-size: 13.5px; font-weight: 600;
}
.pager .on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* 상세 */
.detail { display: grid; gap: 30px; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }

.gallery { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
/* 사진은 참고 자료일 뿐이라 자리를 줄였다(예전 16/10 → 16/7, 최대 300px) */
.gallery-main { aspect-ratio: 16/7; max-height: 300px; background: var(--bg-soft); display: grid; place-items: center; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .placeholder { font-size: 22px; font-weight: 700; opacity: .3;
  letter-spacing: -.2px; }
.thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: var(--bg-card); }
.thumbs img { width: 64px; height: 48px; object-fit: cover; border-radius: 7px; cursor: pointer; opacity: .65; }
.thumbs img:hover, .thumbs img.on { opacity: 1; outline: 2px solid var(--brand); }

.spec { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 16px; font-size: 14px; }
.spec div:nth-child(odd) { background: var(--bg-soft); }
.spec dt { color: var(--ink-faint); font-weight: 600; }
.spec dd { margin: 0; font-weight: 700; text-align: right; }

/* ---- 매물 정보 카드 ----
   표를 길게 늘어놓는 대신 «인수금 / 수익성 / 운영 비용 / 규모» 네 덩어리로
   묶는다. 손님이 매물을 볼 때 실제로 따지는 순서다. */
.fact-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); padding: 20px; box-shadow: var(--shadow);
}
.fact-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.fact-tags .tag {
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--bg-soft); color: var(--ink-soft);
}
.fact-tags .tag.lead { background: var(--navy); color: #fff; }
.fact-tags .tag.state { background: transparent; border: 1px solid var(--line); color: var(--ink-faint); }

.fact-hero {
  border-radius: 12px; background: var(--brand-soft);
  padding: 18px 16px; text-align: center;
}
.fact-hero small { display: block; font-size: 13px; color: var(--ink-soft); }
.fact-hero strong {
  display: block; margin-top: 6px; font-family: var(--head);
  font-size: clamp(24px, 3.6vw, 30px); letter-spacing: -.02em; color: var(--navy);
}
html[data-theme="dark"] .fact-hero strong { color: var(--gold-soft); }

.fact-group { margin-top: 22px; }
.fact-group h4 {
  margin: 0 0 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-faint);
}
.fact-pair { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.fact-pair .box {
  border-radius: 12px; background: var(--bg-soft); padding: 14px 15px;
}
.fact-pair .box span { display: block; font-size: 12.5px; color: var(--ink-soft); }
.fact-pair .box b {
  display: block; margin-top: 5px; font-family: var(--head);
  font-size: clamp(17px, 2.4vw, 21px); letter-spacing: -.02em;
}
.fact-pair .box.accent { background: #f6efdc; }
.fact-pair .box.accent b { color: var(--stamp); }
html[data-theme="dark"] .fact-pair .box.accent { background: #21203a; }

.fact-rows { margin: 0; display: grid; gap: 0; }
.fact-rows div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 2px; font-size: 14px; border-bottom: 1px solid var(--line-soft);
}
.fact-rows div:last-child { border-bottom: 0; }
.fact-rows dt { color: var(--ink-soft); font-weight: 600; }
.fact-rows dd { margin: 0; font-weight: 800; text-align: right; }

@media (max-width: 520px) {
  .fact-pair { grid-template-columns: 1fr; }
}

/* 오른쪽 인수금 — 이름과 금액을 위아래로 (예전에는 한 줄에 붙어 나왔다) */
.side-fee { text-align: center; padding: 4px 0 14px; border-bottom: 1px solid var(--line-soft); }
.side-fee small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.side-fee strong {
  display: block; margin-top: 5px; font-family: var(--head);
  font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -.02em; color: var(--navy);
}
html[data-theme="dark"] .side-fee strong { color: var(--gold-soft); }

/* 오른쪽 요약 — 한 줄에 하나씩, 이름과 값을 양끝으로 */
.side-sum { margin: 16px 0; display: grid; gap: 0; }
.side-sum div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-soft);
}
.side-sum div:last-child { border-bottom: 0; }
.side-sum dt { color: var(--ink-faint); }
.side-sum dd { margin: 0; font-weight: 800; }
.side-sum dd.accent { color: var(--stamp); }

.side-card {
  position: sticky; top: 84px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}

/* 푸터 — 머리띠와 짝을 맞춘 짙은 남색 판 */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.62); margin-top: 40px; }
.footer-inner { display: grid; gap: 34px; padding-top: 44px; padding-bottom: 32px;
                grid-template-columns: minmax(240px, 1fr) 2fr; }
@media (max-width: 800px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand p { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 10px; }
.footer-phone a { font-family: var(--head); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-soft); }
.footer-links { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.footer-links h4 { font-size: 12.5px; margin-bottom: 11px; color: #fff; }
.footer-links a, .footer-links span {
  display: block; font-size: 13px; color: rgba(255,255,255,.62); padding: 3px 0;
}
.footer-links a:hover { color: var(--gold-soft); }
/* 사업자 정보 — 법적 고지라 눈에 띄되 본문을 방해하지 않게 */
.footer-biz {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.75;
}
.footer-biz .biz { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.footer-biz .biz b { color: rgba(255,255,255,.85); font-weight: 700; }
.footer-biz .biz-note { color: var(--gold-soft); }

@media (max-width: 720px) {
  .footer-biz { flex-direction: column; gap: 12px; }
  .footer-biz .biz { flex-direction: column; gap: 2px; }
}

.footer-bottom {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  padding-top: 18px; padding-bottom: 26px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color: rgba(255,255,255,.45);
}

.narrow { max-width: 640px; }
.prose p + p { margin-top: 14px; }


/* ================= 관리자 · 계정/권한 ================= */

.admin-alert { border-radius: 10px; padding: 14px 16px; margin: 16px 0; font-size: 14px; }
.admin-alert b { display: block; margin-bottom: 5px; font-size: 14.5px; }
.admin-alert.ok   { background: var(--brand-soft); border: 1px solid var(--brand); }
.admin-alert.warn { background: rgba(229,72,77,.1); border: 1px solid var(--accent); }
.admin-alert small { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 12.5px; }
.admin-alert .issued { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.admin-alert .issued code {
  font-size: 17px; font-weight: 800; letter-spacing: .06em;
  background: var(--bg); border: 1px solid var(--line);
  padding: 5px 14px; border-radius: 7px; user-select: all;
}

.admin-panel {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-card); margin: 16px 0; overflow: hidden;
}
.admin-panel summary {
  cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 14.5px;
  color: var(--brand-deep); list-style: none;
}
.admin-panel summary::-webkit-details-marker { display: none; }
.admin-panel[open] summary { border-bottom: 1px solid var(--line); }

.account-form {
  display: grid; gap: 12px 14px; padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end;
}
.account-form label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.account-form input, .account-form select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font-size: 14px;
}
.account-form .btn { height: 38px; }

.account-search { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.account-search input, .account-search select {
  background: var(--bg-card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font-size: 14px;
}
.account-search input { flex: 1; min-width: 190px; }

.account-actions { display: flex; gap: 6px; flex-wrap: wrap; }
tr.row-off { opacity: .5; }
.pill.on  { background: var(--brand-soft); color: var(--brand); }
.pill.off { background: rgba(229,72,77,.14); color: var(--accent); }
.admin-hint { margin: 18px 0 44px; font-size: 13px; color: var(--ink-faint); line-height: 1.7; }

/* ================= 컨설턴트 편집 (관리자) ================= */
/* 소개 화면에 그대로 나가는 내용이라, 한 사람이 한 줄에 다 보이게 둔다.
   화면이 좁아지면 칸이 자연스럽게 아래로 접힌다. */

.consultant-list { display: grid; gap: 10px; padding: 14px 16px; }
.consultant-row {
  display: grid; gap: 10px 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg);
}
.consultant-row.dim { opacity: .62; }
.consultant-row label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--ink-soft); font-weight: 600; min-width: 0;
}
.consultant-row input {
  background: var(--bg-card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 14px; width: 100%; min-width: 0;
}
.consultant-row label.wide   { grid-column: span 2; }
.consultant-row label.narrow { max-width: 96px; }
.consultant-row label.check {
  flex-direction: row; align-items: center; gap: 7px; padding-bottom: 9px;
  white-space: nowrap;
}
.consultant-row label.check input { width: auto; accent-color: var(--brand); }
.consultant-save {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.consultant-save span { font-size: 12px; color: var(--ink-faint); }

@media (max-width: 700px) {
  .consultant-row { grid-template-columns: 1fr 1fr; }
  .consultant-row label.wide { grid-column: span 2; }
  .consultant-row label.narrow { max-width: none; }
  .consultant-save { grid-column: span 2; }
}
@media (max-width: 420px) {
  .consultant-row { grid-template-columns: 1fr; }
  .consultant-row label.wide, .consultant-save { grid-column: span 1; }
}

/* 소개 화면의 컨설턴트 카드 */
.feature .person-meta { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
.feature .person-phone {
  display: inline-block; margin-top: 9px; font-weight: 700; font-size: 14.5px;
  color: var(--brand-deep);
}

/* ================= 작은 화면 마무리 ================= */
/* 폭이 좁아질수록 여백과 글자만 줄인다. 칸이 접히는 건 위 grid 들이 알아서 한다. */

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 52px 0 44px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .searchbar.solo .btn { padding: 0 16px; font-size: 14.5px; }
  .searchbar.solo input { font-size: 15px; padding: 14px 14px; }
  .section { padding: 42px 0; }
  .section-head { gap: 12px; margin-bottom: 20px; }
  /* 한 줄에 하나면 스크롤만 길어지고 몇 개 있는지 감이 안 온다. 두 개씩 놓는다. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cta { padding: 32px 20px; border-radius: 16px; }
  .footer { margin-top: 46px; }
}

/* 늘 펼쳐져 있는 관리자 칸 — 접어 두면 기능이 없는 줄 안다 */
.admin-panel.open-panel { padding-bottom: 2px; }
.panel-head {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.panel-head b { font-size: 14.5px; color: var(--ink); }
.panel-head span { font-size: 12.5px; color: var(--ink-faint); }
.panel-head .btn { margin-left: auto; }

/* 어떤 권한으로 만들지 먼저 고르는 줄 */
.role-tabs { display: flex; gap: 7px; flex-wrap: wrap; padding: 13px 16px 0; }
.role-tab {
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--bg-card);
  transition: border-color .15s, color .15s, background .15s;
}
.role-tab:hover { border-color: var(--brand); color: var(--brand-deep); }
.role-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (max-width: 560px) {
  .panel-head .btn { margin-left: 0; width: 100%; }
}

/* ================= 신규창업아이템 · 회사소개 ================= */

/* '준비중' 안내판 — 빈 화면을 사과문이 아니라 하나의 약속으로 보이게 한다 */
.empty-block {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 48px 36px; text-align: center; border-radius: var(--radius);
}
.empty-block .seal {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 22px;
  border: 1.6px solid var(--stamp); color: var(--stamp);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-family: var(--head); font-weight: 700; transform: rotate(-6deg); line-height: 1.15;
}
.empty-block .seal .top { font-size: 10px; letter-spacing: .05em; }
.empty-block .seal .mid { font-size: 15px; margin-top: 1px; }
.empty-block h2 { font-size: 20px; color: var(--brand-deep); font-weight: 700; }
html[data-theme="dark"] .empty-block h2 { color: var(--gold-soft); }
.empty-block p {
  font-size: 14px; color: var(--ink-soft); margin-top: 12px; line-height: 1.75;
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.empty-block .btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* 선별 기준 · 일하는 방식 — 같은 생김새를 쓰는 3칸 묶음 */
.criteria { max-width: 860px; margin: 44px auto 0; }
.criteria .label {
  font-size: 12.5px; font-weight: 700; color: var(--stamp);
  text-align: center; letter-spacing: .05em;
}
.criteria-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-top: 16px;
}
.criteria-item {
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 18px 16px; text-align: center; border-radius: 10px;
}
.criteria-item .n { width: 22px; height: 2px; background: var(--gold); margin: 0 auto 12px; }
.criteria-item h4 { font-size: 14px; font-weight: 700; color: var(--brand-deep); margin: 0; }
html[data-theme="dark"] .criteria-item h4 { color: var(--gold-soft); }
.criteria-item p { font-size: 12px; color: var(--ink-soft); margin-top: 7px; line-height: 1.6; }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.value-card {
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 24px 22px; border-radius: var(--radius);
}
.value-card .mark { width: 24px; height: 2px; background: var(--gold); margin-bottom: 16px; }
.value-card h4 { font-family: var(--head); font-size: 16px; font-weight: 700; color: var(--brand-deep); margin: 0; }
html[data-theme="dark"] .value-card h4 { color: var(--gold-soft); }
.value-card p { font-size: 13px; color: var(--ink-soft); margin-top: 9px; line-height: 1.7; }

/* 담당 컨설턴트 */
.team-row { display: flex; gap: 16px; flex-wrap: wrap; }
.team-card {
  flex: 1; min-width: 170px; background: var(--bg-card); border: 1px solid var(--line);
  padding: 20px; text-align: center; border-radius: var(--radius);
}
.team-card .avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy-deep);
  color: var(--gold-soft); font-family: var(--head); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.team-card .name { font-weight: 700; font-size: 14.5px; color: var(--brand-deep); }
html[data-theme="dark"] .team-card .name { color: var(--gold-soft); }
.team-card .role { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.team-card .blurb { font-size: 12px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.team-card .team-phone { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 13.5px; color: var(--navy); }
html[data-theme="dark"] .team-card .team-phone { color: var(--gold-soft); }
.team-card.lead { border-color: var(--gold); }
.team-card.lead .avatar { background: var(--gold); color: var(--navy-deep); }

/* 사업자 정보 판 */
.info-block { background: var(--navy-deep); color: #fff; }
.info-block h2 { color: #fff; }
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
}
.info-item { background: var(--navy-deep); padding: 20px 22px; }
.info-item .lbl { font-size: 11.5px; color: var(--gold-soft); font-weight: 700; margin-bottom: 6px; }
.info-item .val { font-size: 14px; }

/* ================= 매물 등록 화면 ================= */

/* 로그인한 컨설턴트로 등록된다는 사실을 폼 위에 먼저 알린다
   (담당자·전화번호는 폼에 없고 세션에서 자동으로 붙기 때문이다) */
.agent-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gold-soft); border-radius: 8px; padding: 10px 14px;
  font-size: 12.5px; color: var(--navy-deep); margin-bottom: 20px;
}
.agent-strip b { font-weight: 800; }
.agent-strip .tag {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: #fff; padding: 3px 9px; border-radius: 20px;
}

.form-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 24px 8px;
}
.f-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed var(--line); }
.f-section:last-child { border-bottom: none; }
.f-section .s-label {
  font-size: 12px; font-weight: 800; color: var(--stamp);
  letter-spacing: .04em; margin-bottom: 14px;
}
.field label .req { color: var(--stamp); margin-left: 2px; }
.field label .hint-inline { font-weight: 500; color: var(--ink-soft); font-size: 11.5px; margin-left: 6px; }

.photo-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  background: var(--brand-soft); border-radius: 8px; padding: 10px 12px;
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.6;
}
html[data-theme="dark"] .photo-note { background: var(--bg-soft); }

/* 배지 고르기 — 컨설턴트가 승인 없이 직접 고른다 */
.badge-options { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-opt { flex: 1; min-width: 110px; }
.badge-opt input { position: absolute; opacity: 0; pointer-events: none; }
.badge-opt span {
  display: block; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px;
  text-align: center; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.badge-opt input:checked + span { border-color: var(--stamp); color: var(--stamp); background: #fbeeec; }
.badge-opt.gold input:checked + span { border-color: var(--gold); color: #8a6d1f; background: #fbf3dd; }

/* 등록 폼 오른쪽에 붙는 실시간 미리보기 */
.register-layout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr);
  gap: 28px; align-items: start; padding: 22px 0 40px;
}
@media (max-width: 940px) { .register-layout { grid-template-columns: 1fr; } }
.preview-wrap { position: sticky; top: 84px; }
.preview-label {
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  letter-spacing: .04em; margin-bottom: 10px; text-align: center;
}
.preview-wrap .card { max-width: 300px; margin: 0 auto; }
.preview-hint { text-align: center; font-size: 11.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.7; }

/* ================= 목록에서 인수금만 고치기 ================= */
/* 권리금은 가장 자주 바뀌는 값이라 매물 수정 화면을 열지 않고 목록에서 고친다 */
.fee-edit { display: flex; align-items: center; gap: 5px; }
.fee-edit input[type="number"] {
  width: 7.5rem; padding: 5px 7px; font-size: 13.5px; text-align: right;
}
.fee-edit span { font-size: 12.5px; color: var(--ink-faint); }
td > small {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint);
}

/* ================= 엑셀 일괄등록 ================= */
.import-table { font-size: 13px; white-space: nowrap; }
.import-table td, .import-table th { padding: 8px 10px; }
.import-table td b { font-weight: 700; }
.import-notes { margin: 0 0 6px; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.import-notes li { margin-bottom: 4px; word-break: break-all; }