/* ==========================================================================
   해링턴플레이스 풍무 — 공용 스타일
   Navy #0B2340 / Gold #B8944C / Paper #F8F4EA — 로고 실측 컬러 기반
   ========================================================================== */

:root{
  --navy: #0B2340;
  --navy-deep: #081627;
  --navy-soft: #16304F;
  --gold: #B8944C;
  --gold-soft: #D8C393;
  --paper: #F8F4EA;
  --paper-dim: #F1EBDB;
  --ink: #1C2029;
  --slate: #5C6470;
  --line: #DDD4BE;
  --white: #FFFFFF;

  --serif: "Noto Serif KR", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; color:var(--navy); }
p{ margin:0 0 1em; }
.container{ max-width:1120px; margin:0 auto; padding:0 28px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Top utility bar ---------- */
.utility-bar{
  background:var(--navy-deep);
  color:var(--gold-soft);
  font-size:13px;
  letter-spacing:.02em;
}
.utility-bar .container{
  display:flex; justify-content:space-between; align-items:center; padding:8px 28px;
}
.utility-bar a{ color:var(--gold-soft); }
.utility-bar .tel{ color:#fff; font-weight:600; }

/* ---------- Nav ---------- */
.site-nav{
  background:rgba(248,244,234,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
.brand-text{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--navy); letter-spacing:.01em; }
.brand-text small{ display:block; font-family:var(--sans); font-size:11px; font-weight:500; color:var(--slate); letter-spacing:.08em; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14px; color:var(--navy); font-weight:500; margin-left:22px; white-space:nowrap; }
.nav-links a:first-child{ margin-left:0; }
.nav-links a:hover{ color:var(--gold); }
.nav-cta{
  background:var(--navy); color:var(--white) !important; padding:10px 18px;
  border-radius:2px; font-weight:600; font-size:13.5px; white-space:nowrap;
}
.nav-cta:hover{ background:var(--navy-soft); }
.nav-toggle{ display:none; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--navy); border-radius:2px; padding:8px 12px; font-size:13px; color:var(--navy); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:#0a1c30;
}
.hero-media{ position:absolute; inset:0; min-height:620px; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,15,27,.92) 0%, rgba(6,15,27,.55) 40%, rgba(6,15,27,.15) 65%, rgba(6,15,27,.35) 100%);
}
.hero-content{ position:relative; z-index:2; color:#fff; padding:300px 0 56px; width:100%; min-height:620px; }
@media (max-width:760px){
  .hero-content{ padding-top:220px; }
}
.hero-eyebrow{
  font-size:13.5px; color:var(--gold-soft); letter-spacing:.04em; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold-soft); display:inline-block; }
.hero h1{
  color:#fff; font-size:clamp(32px,4.6vw,56px); line-height:1.28; max-width:820px; font-weight:600;
}
.hero h1 em{ font-style:normal; color:var(--gold-soft); }
.hero-sub{ margin-top:20px; max-width:560px; color:#DCE1E8; font-size:16.5px; line-height:1.75; }
.hero-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:14px 26px; font-weight:600; font-size:15px; border-radius:2px;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--gold); color:var(--navy-deep); }
.btn-primary:hover{ background:var(--gold-soft); }
.btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.hero-facts{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:46px; padding-top:26px;
  display:flex; flex-wrap:wrap;
}
.hero-facts div.num, .hero-facts div.lbl{ width:auto; }
.hero-facts > div{ color:#fff; width:25%; padding-right:18px; }
.hero-facts .num{ font-family:var(--serif); font-size:26px; color:var(--gold-soft); }
.hero-facts .lbl{ font-size:12.5px; color:#B7C0CC; margin-top:4px; }

@media (max-width:760px){
  .hero-facts > div{ width:50%; margin-bottom:16px; }
}

/* ---------- Info strip ---------- */
.info-strip{
  background:var(--navy); color:#EDE7D6; padding:14px 0; font-size:14px;
}
.info-strip .container{
  display:flex; gap:34px; flex-wrap:wrap; justify-content:center; text-align:center;
}
.info-strip .container span{ margin:0 17px; }
.info-strip strong{ color:var(--gold-soft); font-weight:600; margin-right:6px; }

/* ---------- Section shell ---------- */
.section{ padding:96px 0; }
.section-alt{ background:var(--paper-dim); }
.section-navy{ background:var(--navy); color:#EDE7D6; }
.section-navy h2, .section-navy h3{ color:#fff; }

.kicker{
  font-size:13px; color:var(--gold); letter-spacing:.03em; font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:22px; height:1px; background:var(--gold); }
.section h2{ font-size:clamp(24px,3vw,34px); line-height:1.4; max-width:680px; }
.section-lead{ color:var(--slate); font-size:16px; max-width:640px; margin-top:16px; }
.section-navy .section-lead{ color:#C9D0D9; }

.rule{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- Intro two-col ---------- */
.intro-grid{
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:start; margin-top:52px;
}
.intro-grid .copy p{ color:var(--ink); font-size:16px; }
.intro-grid .copy p + p{ margin-top:1.1em; }
.intro-media{ position:relative; }
.intro-media img{ width:100%; border:1px solid var(--line); }
.intro-media .cap{
  margin-top:10px; font-size:12.5px; color:var(--slate);
}
@media (max-width:880px){
  .intro-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- Location list ---------- */
.loc-grid{ margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:0 60px; }
.loc-item{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.loc-item:last-child, .loc-item:nth-last-child(2){ border-bottom:1px solid var(--line); }
.loc-ic{ flex:0 0 auto; width:38px; height:38px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--serif); font-size:15px; }
.loc-item h4{ font-size:16.5px; color:var(--navy); margin-bottom:6px; }
.loc-item p{ font-size:14.5px; color:var(--slate); margin:0; }
.loc-item .tag{ display:inline-block; font-size:11px; color:var(--gold); border:1px solid var(--gold); padding:1px 7px; border-radius:20px; margin-left:8px; vertical-align:1px; }
@media (max-width:760px){ .loc-grid{ grid-template-columns:1fr; } .loc-item:nth-last-child(2){ border-bottom:none; } }

/* ---------- Gallery ---------- */
.gallery{
  margin-top:52px; display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:14px;
  height:560px;
}
.gallery a{ position:relative; overflow:hidden; display:block; background:#000; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery a:hover img{ transform:scale(1.04); }
.gallery .g1{ grid-row:1 / span 2; }
.gallery figcaption, .gallery .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(0deg, rgba(6,12,22,.82), transparent);
  color:#fff; font-size:13px; letter-spacing:.02em;
}
@media (max-width:820px){
  .gallery{ grid-template-columns:1fr 1fr; height:auto; }
  .gallery a{ height:220px; }
  .gallery .g1{ grid-row:auto; grid-column:1 / span 2; height:280px; }
}

/* ---------- Unit type filmstrip ---------- */
.unit-strip{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.unit-card{ background:var(--paper); padding:26px 24px 30px; }
.unit-card .tname{ font-family:var(--serif); font-size:26px; color:var(--navy); }
.unit-card .tsub{ font-size:12.5px; color:var(--gold); letter-spacing:.03em; margin-top:2px; margin-bottom:16px; }
.unit-card img{ border:1px solid var(--line); margin-bottom:16px; }
.unit-card dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:13.5px; margin:0; }
.unit-card dt{ color:var(--slate); }
.unit-card dd{ margin:0; text-align:right; color:var(--ink); font-weight:500; }
@media (max-width:880px){ .unit-strip{ grid-template-columns:1fr; } }

.unit-more{ margin-top:28px; }

/* ---------- Premium list ---------- */
.premium-list{ margin-top:52px; border-top:1px solid rgba(255,255,255,.18); }
.premium-row{
  display:grid; grid-template-columns:34px 1fr 1.4fr; gap:22px; align-items:start;
  padding:26px 0; border-bottom:1px solid rgba(255,255,255,.18);
}
.premium-row .mark{ color:var(--gold); font-size:20px; line-height:1.5; }
.premium-row h4{ color:#fff; font-size:17.5px; font-weight:600; margin:0; }
.premium-row p{ color:#C9D0D9; font-size:14.5px; margin:0; }
@media (max-width:760px){
  .premium-row{ grid-template-columns:26px 1fr; }
  .premium-row p{ grid-column:2; }
}

/* ---------- FAQ ---------- */
.faq-list{ margin-top:48px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); padding:24px 0; }
.faq-item h4{ font-size:16.5px; color:var(--navy); display:flex; gap:12px; }
.faq-item h4 span.q{ font-family:var(--serif); color:var(--gold); flex:0 0 auto; }
.faq-item .a{ margin-top:10px; padding-left:30px; color:var(--slate); font-size:14.5px; }

/* ---------- Contact / Form ---------- */
.contact-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; border:1px solid var(--line); }
.contact-info{ background:var(--navy); color:#fff; padding:52px 46px; }
.contact-info h3{ color:#fff; font-size:22px; }
.contact-info .addr{ margin-top:22px; font-size:14.5px; color:#C9D0D9; line-height:1.9; }
.contact-info .channels{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.contact-info .channels a{ display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:12px; font-size:14.5px; }
.contact-info .channels a span.k{ color:#9FA9B6; }
.contact-info .channels a span.v{ color:#fff; font-weight:500; }
.contact-info .map-note{ margin-top:26px; font-size:13px; color:#8E97A3; }

.contact-form{ background:var(--paper); padding:52px 46px; }
.contact-form h3{ font-size:20px; }
.contact-form p.note{ color:var(--slate); font-size:13.5px; margin-top:8px; }
.f-row{ margin-top:20px; }
.f-row label{ display:block; font-size:13.5px; color:var(--navy); margin-bottom:7px; font-weight:600; }
.f-row input, .f-row select, .f-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:#fff; font-family:var(--sans);
  font-size:14.5px; border-radius:2px; color:var(--ink);
}
.f-row textarea{ resize:vertical; min-height:88px; }
.f-check{ display:flex; align-items:flex-start; gap:10px; margin-top:22px; font-size:13px; color:var(--slate); }
.f-check input{ margin-top:3px; }
.f-check a{ color:var(--navy); text-decoration:underline; }
.f-submit{ margin-top:26px; width:100%; padding:15px; background:var(--navy); color:#fff; border:none; font-size:15.5px; font-weight:600; border-radius:2px; cursor:pointer; }
.f-submit:hover{ background:var(--navy-soft); }
.f-msg{ margin-top:14px; font-size:13.5px; display:none; padding:10px 12px; border-radius:2px; }
.f-msg.ok{ display:block; background:#EAF3EA; color:#2C6E31; }
.f-msg.err{ display:block; background:#FAEAEA; color:#A83232; }

@media (max-width:880px){ .contact-wrap{ grid-template-columns:1fr; } }

/* ---------- Legal notice ---------- */
.legal-box{
  margin-top:60px; padding:22px 24px; border:1px solid var(--line); background:var(--paper-dim);
  font-size:12.5px; color:var(--slate); line-height:1.9;
}

/* ---------- Footer ---------- */
footer{ background:var(--navy-deep); color:#8E97A3; padding:56px 0 40px; font-size:13px; }
footer .f-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12); }
footer .f-brand{ display:flex; align-items:center; gap:10px; }
footer .f-brand img{ height:26px; }
footer .f-brand span{ color:#EDE7D6; font-family:var(--serif); font-size:16px; }
footer .f-links{ display:flex; gap:22px; }
footer .f-links a:hover{ color:#EDE7D6; }
footer .f-legal{ margin-top:26px; line-height:2; }
footer .f-legal strong{ color:#C9D0D9; }
footer .f-copyright{ margin-top:22px; color:#5C6572; font-size:12px; }

/* ---------- Guide page extras ---------- */
.page-hero{
  background:var(--navy); color:#fff; padding:64px 0 48px; border-bottom:4px solid var(--gold);
}
.page-hero .kicker{ color:var(--gold-soft); }
.page-hero .kicker::before{ background:var(--gold-soft); }
.page-hero h1{ color:#fff; font-size:clamp(26px,3.6vw,40px); }
.page-hero p{ color:#C9D0D9; max-width:600px; margin-top:14px; }

.compare-table{ width:100%; border-collapse:collapse; margin-top:24px; font-size:14.5px; }
.compare-table th, .compare-table td{ border:1px solid var(--line); padding:12px 14px; text-align:center; }
.compare-table thead th{ background:var(--navy); color:#fff; font-weight:600; font-size:13.5px; }
.compare-table td:first-child, .compare-table th:first-child{ text-align:left; background:var(--paper-dim); font-weight:600; color:var(--navy); }
.compare-table tbody tr:nth-child(even){ background:var(--paper-dim); }
.table-wrap{ overflow-x:auto; }

.fit-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.fit-card{ background:var(--paper); padding:26px; }
.fit-card h4{ font-family:var(--serif); font-size:20px; color:var(--navy); }
.fit-card p{ font-size:14px; color:var(--slate); margin-top:10px; }
@media (max-width:820px){ .fit-grid{ grid-template-columns:1fr; } }

.toc{ margin-top:28px; display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }
.toc a{ color:var(--navy); border-bottom:1px solid var(--gold); padding-bottom:2px; }