/* ============================================================
   이덕신 공인중개사사무소 — 초안 v0.1
   톤: 원빌딩(어두운 사진 히어로, 세리프 로고타입, 스토리 섹션)
       + 正和不動産(01–04 목적별 섹션, 밝은/어두운 띠 교차)
   ============================================================ */

:root {
  --paper: #F2F3EE;        /* 바탕: 녹색 기운의 오프화이트 */
  --mist:  #E6E9E1;        /* 교차 띠 */
  --line:  #C9CDC3;        /* 헤어라인 */
  --line-strong: #171A17;
  --ink:   #171A17;
  --ink-2: #4A4F49;
  --ink-3: #7A7F78;
  --green: #174A31;        /* 대표색: 간판의 초록을 깊게 */
  --green-2: #2E9E5B;      /* 간판 초록: 작은 강조에만 */
  --dark:  #101612;        /* 어두운 띠 */
  --dark-2: #182119;
  --on-dark: #EEF0EA;
  --on-dark-2: #A9B0A6;
  --serif: "Noto Serif KR", "Apple SD Gothic Neo", "Nanum Myeongjo", serif;
  --sans:  "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; word-break: keep-all; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover .u, .u:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.eyebrow.on-green { color: var(--green-2); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-weight: 700; font-size: 15px; border: 1px solid var(--ink); color: var(--ink); line-height: 1; white-space: nowrap; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--green); border-color: var(--green); color: #fff; }
.btn.solid:hover { background: #0F3823; border-color: #0F3823; }
.btn.ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn.ghost-light:hover { background: #fff; color: var(--ink); }
.btn small { font-weight: 500; opacity: .8; }
.link { font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { color: var(--green); }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(242,243,238,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand .brand-name { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand .brand-sub { font-size: 11px; letter-spacing: .12em; color: var(--ink-3); margin-top: 3px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 500; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); }
.header-cta { margin-left: 8px; }
.header-cta .btn { padding: 11px 16px; font-size: 14px; }
@media (max-width: 960px) {
  .nav { display: none; }
  .brand .brand-sub { display: none; }
  .header-cta { margin-left: auto; }
}

/* ---------- 히어로 ---------- */
.hero { position: relative; color: #fff; background: var(--dark); min-height: clamp(520px, 74vh, 780px); display: flex; align-items: flex-end; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: url("../img/hero.jpg") center 40% / cover no-repeat; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,18,.15) 0%, rgba(16,22,18,.35) 45%, rgba(16,22,18,.88) 100%); }
.hero .container { width: 100%; padding-block: 56px 48px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: end; }
.hero h1 { font-size: clamp(34px, 5.2vw, 66px); font-weight: 600; color: #fff; margin: 14px 0 18px; }
.hero h1 em { font-style: normal; color: #CFE6D6; }
.hero .lede { font-size: clamp(15px, 1.5vw, 18px); color: rgba(255,255,255,.86); max-width: 38em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-meta { border-left: 1px solid rgba(255,255,255,.35); padding-left: 20px; font-size: 13px; color: rgba(255,255,255,.8); display: grid; gap: 6px; }
.hero-meta b { color: #fff; font-weight: 700; }
@media (max-width: 800px) { .hero .container { grid-template-columns: 1fr; } .hero-meta { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.3); padding-top: 16px; } }

/* ---------- 공통 섹션 ---------- */
.section { padding-block: clamp(56px, 8vw, 112px); }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; border-bottom: 1px solid var(--line-strong); padding-bottom: 18px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 40px); margin-top: 8px; }
.sec-head .note { font-size: 13px; color: var(--ink-3); text-align: right; }
.on-dark .sec-head { border-bottom-color: rgba(255,255,255,.35); }
.on-dark .sec-head .note { color: var(--on-dark-2); }
@media (max-width: 640px) { .sec-head { grid-template-columns: 1fr; } .sec-head .note { text-align: left; } }

/* ---------- 진행 현장 ---------- */
.project { border-bottom: 1px solid var(--line); }
.project-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); }
.project-title { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; }
.project-title-en { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; font-weight: 700; }
.project-loc { margin-top: 16px; color: var(--ink-2); font-size: 15px; }
.facts { margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.fact { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fact dt { color: var(--ink-3); font-weight: 700; font-size: 13px; padding-top: 2px; }
.fact dd { margin: 0; }
.project-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.figure { margin: 0; }
.figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mist); }
.figure figcaption { font-size: 12.5px; color: var(--ink-3); padding-top: 10px; display: flex; justify-content: space-between; gap: 12px; }
.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.figure-pair .figure img { aspect-ratio: 4 / 3; }
.episodes { margin-top: 36px; border-top: 1px solid var(--line-strong); }
.episodes-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; }
.episodes-head h3 { font-size: 18px; }
.episodes-head .count { font-size: 13px; color: var(--ink-3); margin-left: 8px; }
.ep { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ep:hover .ep-title { text-decoration: underline; text-underline-offset: 4px; }
.ep-no { font-family: var(--serif); font-weight: 700; color: var(--green); }
.ep-date { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.episodes-more { padding-top: 16px; font-size: 14px; }
@media (max-width: 900px) { .project-grid { grid-template-columns: 1fr; } .ep { grid-template-columns: 48px 1fr; } .ep-date { grid-column: 2; } }

/* ---------- 01–04 목적별 ---------- */
.services { padding: 0; }
.services-intro { padding-block: clamp(48px, 6vw, 80px) 0; }
.svc { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.svc.band-mist { background: var(--mist); }
.svc.band-dark { background: var(--green); color: #fff; border-top: 0; }
.svc .container { display: grid; grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.svc.flip .container { grid-template-columns: 120px minmax(0, 6fr) minmax(0, 5fr); }
.svc.flip .svc-photo { order: 2; }
.svc.flip .svc-body { order: 3; }
.svc-no { font-family: var(--serif); font-size: clamp(56px, 7vw, 96px); font-weight: 500; line-height: .9; color: var(--ink-3); letter-spacing: -0.03em; }
.band-dark .svc-no { color: rgba(255,255,255,.45); }
.svc h3 { font-size: clamp(24px, 2.8vw, 34px); }
.svc h3 .q { display: block; font-size: 14px; font-family: var(--sans); font-weight: 700; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 10px; text-transform: uppercase; }
.band-dark .svc h3 .q, .band-dark .svc-desc { color: rgba(255,255,255,.8); }
.svc-desc { margin-top: 16px; color: var(--ink-2); max-width: 34em; }
.svc-list { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid currentColor; opacity: .95; }
.svc-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; display: flex; gap: 12px; }
.band-dark .svc-list li { border-bottom-color: rgba(255,255,255,.25); }
.svc-list li::before { content: "—"; color: var(--green-2); flex: none; }
.svc-link { display: inline-block; margin-top: 22px; }
.svc-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc-photo figcaption { font-size: 12.5px; color: var(--ink-3); padding-top: 8px; }
.band-dark .svc-photo figcaption { color: rgba(255,255,255,.7); }
@media (max-width: 900px) {
  .svc .container, .svc.flip .container { grid-template-columns: 1fr; }
  .svc.flip .svc-photo { order: 3; } .svc.flip .svc-body { order: 2; }
  .svc-no { font-size: 48px; }
}

/* ---------- 용인 이야기 (어두운 띠) ---------- */
.on-dark { background: var(--dark); color: var(--on-dark); }
.story-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); }
.story { display: block; }
.story img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--dark-2); }
.story-small { display: grid; gap: 20px; }
.story-small .story img { aspect-ratio: 16 / 7; }
.story-cap { padding-top: 12px; display: grid; gap: 4px; }
.story-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.35; }
.story-big .story-title { font-size: clamp(22px, 2.6vw, 30px); }
.story:hover .story-title { text-decoration: underline; text-underline-offset: 5px; }
.story-date { font-size: 12.5px; color: var(--on-dark-2); }
.rows { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.35); }
.row { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); align-items: baseline; font-size: 15px; }
.row:hover .row-title { text-decoration: underline; text-underline-offset: 4px; }
.row-cat { font-size: 12px; letter-spacing: .08em; color: var(--on-dark-2); font-weight: 700; }
.row-date { font-size: 13px; color: var(--on-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.story-foot p { color: var(--on-dark-2); font-size: 14px; max-width: 46em; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 매물 ---------- */
.listings-head p { color: var(--ink-2); max-width: 48em; }
.listing { display: grid; grid-template-columns: 72px 90px 1fr auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.listing:first-child { border-top: 1px solid var(--line-strong); }
.listing-thumb { width: 72px; height: 72px; background: var(--mist); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); }
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-cat { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--green); }
.listing:hover .listing-title { text-decoration: underline; text-underline-offset: 4px; }
.listing-date { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.listing-go { font-size: 13px; font-weight: 700; white-space: nowrap; }
.listings-note { margin-top: 20px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 760px) { .listing { grid-template-columns: 56px 1fr; } .listing-thumb { width: 56px; height: 56px; } .listing-date, .listing-go { grid-column: 2; } .listing-cat { grid-column: 2; } }

/* ---------- 소개 ---------- */
.about { background: var(--mist); }
.about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-photo figcaption { font-size: 12.5px; color: var(--ink-3); padding-top: 8px; }
.about h2 { font-size: clamp(26px, 3.2vw, 38px); }
.about .motto { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); color: var(--green); margin-top: 18px; line-height: 1.5; }
.about .body { margin-top: 22px; display: grid; gap: 14px; color: var(--ink-2); }
.bio { margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.bio div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.bio dt { color: var(--ink-3); font-weight: 700; font-size: 13px; padding-top: 2px; }
.bio dd { margin: 0; }
.todo { color: #9A5B2C; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- 오시는 길 ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.visit h2 { font-size: clamp(26px, 3.2vw, 38px); }
.visit .info { margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.visit .info div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.visit .info dt { color: var(--ink-3); font-weight: 700; font-size: 13px; padding-top: 2px; }
.visit .info dd { margin: 0; }
.visit .info a.tel { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.visit .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.visit-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.visit-photo figcaption { font-size: 12.5px; color: var(--ink-3); padding-top: 8px; }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; } }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-2); font-size: 13px; padding-block: 36px 44px; }
.site-footer .container { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.site-footer .f-brand { font-family: var(--serif); color: var(--on-dark); font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.site-footer .legal { display: grid; gap: 3px; }
.site-footer .legal span b { color: var(--on-dark); font-weight: 700; margin-right: 6px; }
.site-footer .f-links { display: grid; gap: 6px; text-align: right; }
.site-footer .f-links a:hover { color: #fff; text-decoration: underline; }
.site-footer .copy { margin-top: 18px; }
@media (max-width: 700px) { .site-footer .container { grid-template-columns: 1fr; } .site-footer .f-links { text-align: left; } }