/* =========================
   Theme: Trust Blue Minimal (디자인만)
   ========================= */
:root{
  --brand:#0B5CFF;
  --ink:#0F172A;
  --sub:#475569;
  --muted:#64748B;
  --line:#E8ECF3;
  --bg:#F7F8FA;
  --card:#FFFFFF;
  --header-h:72px;

  --sale:#f25757;
  --jeonse:#2b7fff;
  --wolse:#22a06b;

  /* 히어로 가독성 강화를 위한 토큰 */
  --hero-scrim-top: rgba(0,0,0,.8);
  --hero-scrim-mid: rgba(0,0,0,.62);
  --hero-scrim-bot: rgba(0,0,0,.44);
  --hero-panel: rgba(15,23,42,.42);
  --hero-text: #F9FAFB;
  --hero-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-padding-top: calc(var(--header-h) + 10px) }
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

/* ===== 타이포 스케일 ===== */
h1{ font-family:'Noto Serif KR',serif; font-weight:600; font-size:clamp(26px,4.8vw,48px); line-height:1.25; letter-spacing:-.01em }
h2{ font-weight:800; font-size:clamp(20px,2.6vw,28px); line-height:1.35; letter-spacing:-.01em; color:#0a2b57 }
h3{ font-weight:800; font-size:20px; line-height:1.4 }
.sub{ color:#334155 }

/* ===== 포커스/호버 ===== */
a:focus-visible, button:focus-visible, .menu-btn:focus-visible{
  outline:2px solid rgba(11,92,255,.5); outline-offset:2px;
  box-shadow:0 0 0 3px rgba(11,92,255,.12);
}

/* ===== Header ===== */
header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px; background:#fff;
  border-bottom:1px solid var(--line);
  transition: box-shadow .2s ease;
}
.scrolled header{ box-shadow:0 6px 16px rgba(15,23,42,.06) }

.logo{ display:flex; align-items:center; gap:10px; font-weight:800; color:#111 }
.logo img{ height:36px; margin-right:8px }

nav{ display:flex; gap:10px; align-items:center }
nav a{ padding:10px 12px; border-radius:10px; color:var(--sub); font-weight:600; font-size:.95rem; transition: background-color .12s ease, color .12s ease; }
nav a:hover, nav a:focus-visible{ color:#000; background:rgba(11,92,255,.08) }

.menu-btn{ display:none; border:1px solid var(--line); padding:8px 10px; border-radius:10px; background:transparent; }
@media (max-width:900px){
  nav{ position:fixed; right:16px; top:calc(var(--header-h) + 12px); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; display:none; flex-direction:column; box-shadow:0 10px 30px rgba(15,23,42,.08) }
  nav.open{ display:flex }
  nav a{ padding:10px 14px; min-width:180px; border-bottom:1px solid var(--line) }
  nav a:last-child{ border-bottom:0 }
  .menu-btn{ display:block }
}
.header-spacer{ height:var(--header-h) }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:56vh; display:grid; place-items:center; text-align:center; color:var(--hero-text);
  background:#0a1220; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1200ms ease; }
.hero-bg img.active{ opacity:1 }

/* 다층 스크림 */
.hero:before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, var(--hero-scrim-top) 0%, var(--hero-scrim-mid) 38%, var(--hero-scrim-bot) 100%);
}
/* 텍스트 패널 */
.hero > .hero-panel{ position:relative; z-index:2; padding:10px 14px; border-radius:14px; }
@supports (backdrop-filter: blur(6px)) {
  .hero > .hero-panel{ backdrop-filter: blur(6px); background: color-mix(in oklab, var(--hero-panel) 70%, transparent); }
}
.hero h1{ text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hero .lead{ margin-top:12px; font-size:clamp(15px,2.4vw,20px); font-weight:700; text-shadow: 0 1px 8px rgba(0,0,0,.35) }
.hero .office-name{ margin-top:8px; font-weight:800; letter-spacing:.02em; text-shadow: 0 1px 8px rgba(0,0,0,.35) }

.row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:none; border-radius:999px; font-size:1rem; font-weight:700; color:#EEF2FF; background:rgba(15,23,42,.55); backdrop-filter: blur(4px); transition: transform .12s ease, background-color .12s ease; }
.chip:hover{ transform:translateY(-1px); background:rgba(15,23,42,.65) }
.mini span{ font-size:.95rem; color:#E5E7EB }

/* ===== Sections ===== */
.section{ max-width:1080px; margin:0 auto; padding:64px 18px; border-top:2px solid var(--line) }
.section h2{ margin-bottom:10px; display:flex; align-items:center; gap:8px }
.section h2::before{ content:""; display:inline-block; width:6px; height:24px; background:var(--brand); border-radius:3px }
.section .sub{ margin-bottom:16px }

/* ===== Cards ===== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; align-items:stretch }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(15,23,42,.06); transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,23,42,.08) }
#about .cards.about-grid{ grid-template-columns: repeat(2, minmax(320px, 1fr)); }
@media (max-width:900px){ #about .cards.about-grid{ grid-template-columns: 1fr } }

.photo-only{ padding:0 }
.photo-box{ width:100%; height:420px; border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06) }
.photo-box img{ width:100%; height:100%; object-fit:cover }

.map-card{ padding:0; overflow:hidden }
.map-wrap{ position:relative; width:100%; height:420px; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden }
@media (max-width:720px){ .map-wrap{ height:340px } }
#map{ width:100%; height:100% }
.map-overlay{ position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:0 8px 24px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:6px; }
.map-overlay .title{ font-weight:800; color:#0a2b57 }
.addr-line{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.addr{ font-weight:700; color:#111 }
.walk{ color:#334155 }

/* ===== Listings ===== */
#listings .sub{ margin-bottom:18px }
.building-grid{ display:grid; gap:20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width:720px){ .building-grid{ grid-template-columns: 1fr } }
.building-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 10px 30px rgba(15,23,42,.06); transition:transform .18s ease, box-shadow .18s ease; }
.building-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,23,42,.08) }
.building-hero{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#f0f2f5; border:1px solid var(--line) }
.building-hero img{ width:100%; height:100%; object-fit:cover }
.building-title{ font-family:'Noto Serif KR',serif; font-size:1.2rem; font-weight:600 }
.building-meta{ color:#6b7280; font-size:.93rem }

.unit-grid{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width:720px){ .unit-grid{ grid-template-columns: 1fr } }
.unit{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px; display:flex; flex-direction:column; gap:6px; }
.line-1{ display:flex; align-items:baseline; gap:10px; flex-wrap:nowrap }
.line-2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#334155; font-size:.95rem }
.badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-weight:800; font-size:.9rem; color:#fff; letter-spacing:.02em }
.badge.sale{ background:var(--sale) }
.badge.jeonse{ background:var(--jeonse) }
.badge.wolse{ background:var(--wolse) }

.price{ font-weight:800; font-size:1.15rem; font-variant-numeric: tabular-nums; white-space:nowrap; letter-spacing:-0.01em; }
.meta{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.dot{ color:#94A3B8 }

.unit-footer{ display:flex; align-items:center; justify-content:flex-end }
.detail-link{ color:var(--brand); font-weight:700 }
.detail-link:hover{ text-decoration:underline }
.more-wrap{ display:flex; justify-content:flex-end }
.more-btn{ font-weight:800; border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; transition: background-color .12s ease, box-shadow .12s ease; }
.more-btn:hover{ background:rgba(11,92,255,.06); box-shadow:0 6px 14px rgba(15,23,42,.06) }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000 }
.modal.open{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.42); backdrop-filter:blur(2px) }
.modal-dialog{ position:relative; background:#fff; border-radius:16px; border:1px solid var(--line); width:min(680px, calc(100% - 28px)); padding:24px; box-shadow:0 20px 56px rgba(0,0,0,.18) }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.modal-title{ font-size:1.25rem; font-weight:800; line-height:1.3 }
.modal-close{ border:none; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer }
.modal-body{ display:grid; gap:12px }
.kv{ display:grid; grid-template-columns: 120px 1fr; gap:8px 12px; align-items:start }
.kv dt{ font-weight:800; color:#0a2b57 }
.kv dd{ margin:0; color:#1f2937 }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding-top:10px }
.btn{ border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; transition: background-color .12s ease, box-shadow .12s ease }
.btn:hover{ background:rgba(11,92,255,.06); box-shadow:0 6px 14px rgba(15,23,42,.06) }
.btn-primary{ background:var(--brand); color:#fff; border-color:transparent }
.btn-primary:hover{ filter:brightness(0.96) }

/* ===== Footer ===== */
.site-footer{ background:#fff; color:#666; border-top:1px solid #e9edf3; padding:10px 16px }
.site-footer .legal{ max-width:1080px; margin:0 auto }
.legal-inline{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:.95rem; line-height:1.45; font-variant-numeric: tabular-nums }
.legal-inline .item{ white-space:nowrap }
.legal-inline .sep{ color:#bbb }
.site-footer a{ color:#4e64aa }
.site-footer a:hover{ text-decoration:underline }

/* ===== 온라인 상담실 ===== */
.consult-grid{ display:grid; gap:20px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width:900px){ .consult-grid{ grid-template-columns: 1fr } }
.consult-howto .howto-title{ font-weight:800; margin-bottom:10px; }
.howto-steps{ list-style:none; display:block; }
.howto-steps li + li{ margin-top:10px; }
.step-card{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.step-no{ font-weight:900; color:#111 }
.step-title{ font-weight:800; color:#111 }
.step-desc{ color:#333 }
.howto-steps li:not(:last-child)::after{ content:"↓"; display:block; text-align:center; color:#b7b7b7; font-size:18px; line-height:1; margin:10px 0 2px; }
.consult-figure{ margin-top:10px }
.consult-figure img{ width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid var(--line) }
.consult-figure figcaption{ text-align:center; color:#666; font-size:.95rem; margin-top:6px }

.consult-form-card .form-title{ font-weight:800 }
.consult-form-card .form-sub{ color:#333; margin:8px 0 12px }
.form-row.two{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width:720px){ .form-row.two{ grid-template-columns: 1fr } }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.form-field > span{ font-weight:700; color:#0a2b57 }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; font:inherit; color:inherit; transition: box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--brand); outline-offset:2px; box-shadow:0 0 0 3px rgba(11,92,255,.12) }

/* ── 고급 옵션(details) – 겹침 해결 버전 ───────────────────────── */
.adv{ margin:6px 0 12px }
.adv summary{
  display:flex;                 /* 아이콘 + 텍스트 수평 배치 */
  align-items:center;           /* 수직 중앙 */
  gap:6px;                      /* 아이콘-텍스트 간격 */
  cursor:pointer;
  color:#333;
  font-weight:700;
  list-style:none;              /* 일부 브라우저 불릿 제거 */
  padding:10px 0;
}
.adv summary::-webkit-details-marker{ display:none }     /* 기본 삼각형 숨김(Chrome/Safari) */
.adv summary::before{
  content:"▸";                  /* 커스텀 아이콘 */
  flex:none;
  width:1em;
  translate: 0 1px;             /* 미세 수직 보정 */
}
.adv[open] summary::before{ content:"▾" }
.adv[open] > .adv-body{ margin-top:10px }

/* 체크 동의/힌트/버튼 */
.consent{ display:flex; gap:8px; align-items:flex-start; color:#333; margin:8px 0 12px }
.form-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.form-hint{ color:#666; font-size:.95rem; margin-top:8px }

/* 확인 박스 */
.confirm-box{ border:1px solid var(--line); background:#fff; border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.06); margin-top:14px }
.confirm-title{ display:flex; align-items:center; gap:10px; font-size:1.12rem; font-weight:800; color:#0a2b57 }
.confirm-title::before{ content:""; width:6px; height:22px; background:var(--brand); border-radius:3px }
.confirm-desc{ color:#333; margin:8px 0 14px }

/* ===== 스크롤 인 리빌 ===== */
.reveal{ opacity:0; transform: translateY(8px) scale(0.995); transition: opacity .45s ease, transform .45s ease; }
.reveal.reveal-show{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce) {
  .hero-bg img{ transition:none }
  .reveal{ transition:none }
}

/* ========= 폼/버튼 보정 패치 v2025-10-01 ========= */
.consult-form-card .form-row { gap:12px; margin-bottom:12px; }
.consult-form-card .form-row.two { display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .consult-form-card .form-row.two{ grid-template-columns:1fr } }

/* 버튼 상태(hover/active/focus) 보정 */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 50ms ease;
}
.btn-primary{
  background-color:#2b6cb0; border:1px solid #2b6cb0; color:#fff;
}
.btn-primary:hover{ background-color:#265a96; border-color:#265a96; }
.btn-primary:active{ background-color:#1f4a7c; border-color:#1f4a7c; transform: translateY(1px); }
.btn-primary:focus-visible{ outline:2px solid #90cdf4; outline-offset:2px; }
.btn-primary:active, .btn-primary:focus, .btn-primary:visited{ color:#fff; }

/* ===== 블로그 돌아가기 / 홈으로 버튼 공통 ===== */
.topbar {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid #E8ECF3;
}

.pill-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #E8ECF3;
  border-radius:10px;
  font-weight:700;
  color:#111;
  background:#fff;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}

.pill-link:hover {
  background:rgba(11,92,255,.06);
  border-color:#cfd7e6;
}

.pill-link:focus {
  outline:2px solid #0B5CFF;
  outline-offset:2px;
}

/* =========================
   모바일 전용(≤600px) – “홈으로 / 블로그 돌아가기”만 축소
   ========================= */
@media (max-width:600px){
  .topbar{ padding:8px 12px; }

  /* 두 버튼이 공통으로 사용하는 .pill-link만 축소 */
  .topbar .pill-link{
    padding:4px 10px;        /* 세로 여백 축소 */
    font-size:13.5px;        /* 글자 크기 소폭 축소 */
    border-radius:8px;       /* 라운드 약간 축소 */
    line-height:1.1;         /* 텍스트 세로 균형 보정 */
  }

  /* 만약 아이콘(svg/이미지)이 있다면 같이 축소 */
  .topbar .pill-link svg,
  .topbar .pill-link img{
    width:14px; height:14px;
  }
}

/* =========================
   블로그 상세 Hero 상단 여백 (요청사항)
   ========================= */
.article-hero{
  padding-top:48px;          /* 데스크탑 기준 권장 값 */
}
@media (max-width:600px){
  .article-hero{ padding-top:40px; }  /* 모바일에서는 약간 축소 */
}