/* ==========================================================================
   동탄역 디에트르 퍼스티지 오피스텔 — 공용 스타일시트
   ========================================================================== */

:root{
  --navy-900:#101a30;
  --navy-800:#14203c;
  --navy-700:#1c2c4d;
  --navy-600:#2a3f66;
  --gold-500:#b6913f;
  --gold-400:#c9a85c;
  --gold-100:#f1e6c8;
  --paper:#f6f4ee;
  --paper-2:#efece2;
  --ink:#1f2430;
  --ink-soft:#4d5566;
  --line:#ddd7c6;
  --rose:#a8456a;
  --blue-type:#2e5c8a;
  --amber-type:#c07a2e;
  --radius-sm:3px;
  --radius-md:6px;
  --serif:"Noto Serif KR","Source Han Serif K",serif;
  --sans:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0 0 .5em;color:var(--navy-900);word-break:keep-all;}
p{margin:0 0 1em;word-break:keep-all;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;letter-spacing:.02em;color:var(--gold-500);
  font-weight:600;margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold-500);display:inline-block;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(16,26,48,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(182,145,63,.25);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{height:30px;width:auto;background:#f6f4ee;border-radius:7px;padding:4px;}
.logo-chip{display:inline-flex;background:#f6f4ee;border-radius:8px;padding:6px;}
.logo-chip img{height:30px;width:auto;display:block;background:none;padding:0;}
.brand-text{color:#f6f4ee;font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:.01em;}
.brand-text small{display:block;font-family:var(--sans);font-weight:400;font-size:.68rem;color:var(--gold-100);letter-spacing:.04em;}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{color:#e8e4d6;text-decoration:none;font-size:.92rem;}
.nav-links a:hover{color:var(--gold-400);}
.nav-cta{
  background:var(--gold-500);color:#151b12;padding:9px 18px;border-radius:var(--radius-sm);
  font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap;
}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;}

@media(max-width:840px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .nav-cta{padding:8px 14px;font-size:.82rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:640px;
  display:flex;align-items:flex-end;
  background:#0c1424;
  overflow:hidden;
}
.hero img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.82;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,32,.15) 0%,rgba(10,16,32,.35) 45%,rgba(9,14,26,.96) 100%);
}
.hero-inner{position:relative;z-index:2;padding:64px 0 56px;color:#fff;width:100%;}
.hero-badge{
  display:inline-block;background:rgba(246,244,238,.1);border:1px solid rgba(201,168,92,.5);
  color:var(--gold-100);font-size:.78rem;padding:6px 14px;border-radius:20px;margin-bottom:22px;
  letter-spacing:.02em;
}
.hero h1{
  color:#fbf9f3;font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1.32;max-width:15ch;margin-bottom:.4em;font-weight:700;
}
.hero p.lead{color:#d9d4c2;font-size:1.08rem;max-width:52ch;margin-bottom:28px;}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  font-family:var(--sans);
}
.btn-gold{background:var(--gold-500);color:#161a10;}
.btn-gold:hover{background:var(--gold-400);}
.btn-outline{background:transparent;border-color:rgba(246,244,238,.55);color:#f6f4ee;}
.btn-outline:hover{border-color:var(--gold-400);color:var(--gold-100);}
.btn-navy{background:var(--navy-800);color:#f6f4ee;}
.btn-navy:hover{background:var(--navy-600);}

/* ---------- Stat band ---------- */
.stat-band{background:var(--navy-900);color:#fff;border-top:1px solid rgba(182,145,63,.3);}
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:34px 0;
}
.stat-grid div{padding:0 18px;border-left:1px solid rgba(246,244,238,.15);}
.stat-grid div:first-child{border-left:none;}
.stat-num{font-family:var(--serif);font-size:1.7rem;color:var(--gold-400);font-weight:700;}
.stat-label{font-size:.82rem;color:#c9c4b3;margin-top:4px;}
@media(max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr);row-gap:22px;}
  .stat-grid div{border-left:none;border-top:1px solid rgba(246,244,238,.15);padding-top:14px;}
  .stat-grid div:nth-child(1),.stat-grid div:nth-child(2){border-top:none;padding-top:0;}
}

/* ---------- Section generic ---------- */
section{padding:76px 0;}
section.alt{background:var(--paper-2);}
.section-head{max-width:640px;margin-bottom:40px;}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.05rem);}
.section-head p{color:var(--ink-soft);font-size:1rem;}

.hr-gold{border:none;height:1px;background:linear-gradient(90deg,var(--gold-500),transparent);width:120px;margin:0 0 28px;}

/* ---------- 입지 ---------- */
.loc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
.loc-grid img{border-radius:var(--radius-md);}
.loc-list{list-style:none;margin:0;padding:0;}
.loc-list li{
  padding:16px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:100px 1fr;gap:14px;
}
.loc-list li:first-child{border-top:none;}
.loc-list .tag{font-size:.78rem;font-weight:700;color:var(--gold-500);letter-spacing:.03em;}
.loc-list .desc{color:var(--ink-soft);font-size:.95rem;}
@media(max-width:860px){.loc-grid{grid-template-columns:1fr;}}

/* ---------- 단지개요 표 ---------- */
.overview-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;}
.overview-wrap img{border-radius:var(--radius-md);}
table.spec{width:100%;border-collapse:collapse;font-size:.94rem;}
table.spec th,table.spec td{padding:13px 16px;text-align:left;border-top:1px solid var(--line);}
table.spec th{width:120px;color:var(--navy-800);font-weight:700;background:var(--paper-2);}
table.spec tr:first-child th,table.spec tr:first-child td{border-top:none;}
@media(max-width:860px){.overview-wrap{grid-template-columns:1fr;}}

/* ---------- 타입 카드 ---------- */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.type-card{
  background:#fff;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 1px 3px rgba(20,20,10,.08);border:1px solid var(--line);
}
.type-card img{width:100%;height:auto;}
.type-card .bar{height:6px;}
.type-card.rose .bar{background:var(--rose);}
.type-card.blue .bar{background:var(--blue-type);}
.type-card.amber .bar{background:var(--amber-type);}
.type-card .body{padding:22px 22px 26px;}
.type-card h3{font-size:1.25rem;margin-bottom:2px;}
.type-card .units{font-size:.82rem;color:var(--ink-soft);margin-bottom:14px;}
.type-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.88rem;margin:0 0 16px;}
.type-card dt{color:var(--ink-soft);}
.type-card dd{margin:0;text-align:right;font-weight:600;}
.type-card .price{
  border-top:1px dashed var(--line);padding-top:12px;margin-top:4px;
  font-family:var(--serif);font-size:1.05rem;color:var(--navy-900);font-weight:700;
}
@media(max-width:860px){.type-grid{grid-template-columns:1fr;}}

/* ---------- 커뮤니티 시설 ---------- */
.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.facility-item{border-radius:var(--radius-md);overflow:hidden;background:#fff;border:1px solid var(--line);}
.facility-item img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.facility-item .cap{padding:14px 16px;}
.facility-item h4{font-size:1rem;margin-bottom:4px;}
.facility-item p{font-size:.85rem;color:var(--ink-soft);margin:0;}
@media(max-width:860px){.facility-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.facility-grid{grid-template-columns:1fr;}}

/* ---------- 계약 혜택 밴드 ---------- */
.benefit-band{background:var(--navy-900);color:#f6f4ee;}
.benefit-band .section-head h2{color:#f6f4ee;}
.benefit-band .section-head p{color:#c9c4b3;}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:36px;}
.benefit-card{border:1px solid rgba(182,145,63,.3);border-radius:var(--radius-md);padding:22px 20px;background:rgba(255,255,255,.03);}
.benefit-card .num{font-family:var(--serif);font-size:1.6rem;color:var(--gold-400);font-weight:700;}
.benefit-card .lbl{font-size:.86rem;color:#d9d4c2;margin-top:6px;}
.benefit-note{
  border-top:1px solid rgba(246,244,238,.18);padding-top:22px;font-size:.86rem;color:#b8b2a0;
}
@media(max-width:860px){.benefit-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:0;padding:20px 4px;
  font-family:var(--serif);font-size:1.02rem;color:var(--navy-900);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px;
}
.faq-q .plus{font-family:var(--sans);font-size:1.3rem;color:var(--gold-500);transition:transform .2s;flex:none;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px;color:var(--ink-soft);font-size:.94rem;max-width:70ch;}

/* ---------- 상담 폼 ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 2px 14px rgba(20,20,10,.08);}
.contact-info{background:var(--navy-900);color:#f6f4ee;padding:44px 40px;}
.contact-info h2{color:#fff;font-size:1.5rem;}
.contact-info p{color:#c9c4b3;}
.contact-info ul{list-style:none;padding:0;margin:26px 0 0;}
.contact-info li{padding:12px 0;border-top:1px solid rgba(246,244,238,.14);font-size:.94rem;display:flex;gap:10px;}
.contact-info li:first-child{border-top:none;}
.contact-info li b{color:var(--gold-400);min-width:74px;display:inline-block;}
.contact-form{background:#fff;padding:44px 40px;}
.f-row{margin-bottom:16px;}
.f-row label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;color:var(--navy-800);}
.f-row input,.f-row select,.f-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:.94rem;background:var(--paper);
}
.f-row textarea{resize:vertical;min-height:80px;}
.f-check{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--ink-soft);margin-bottom:20px;}
.f-check a{color:var(--navy-800);text-decoration:underline;}
.form-msg{font-size:.88rem;margin-top:12px;display:none;padding:10px 14px;border-radius:var(--radius-sm);}
.form-msg.ok{display:block;background:#e7f3e8;color:#245c33;}
.form-msg.err{display:block;background:#fbeaea;color:#8c2d2d;}
@media(max-width:860px){.contact-wrap{grid-template-columns:1fr;}.contact-info,.contact-form{padding:34px 24px;}}

/* ---------- Footer ---------- */
footer{background:#0c1424;color:#a7a190;padding:48px 0 30px;font-size:.84rem;}
.footer-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px;}
.footer-grid a{color:#d9d4c2;text-decoration:none;font-size:.86rem;}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}
.footer-legal{border-top:1px solid rgba(246,244,238,.12);padding-top:22px;line-height:1.9;}
.footer-legal b{color:#c9c4b3;}

/* ---------- Info page (guide.html) prose ---------- */
.prose{max-width:760px;}
.prose h2{margin-top:2.2em;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--ink-soft);font-size:1rem;}
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem;margin:20px 0 8px;}
.compare-table th,.compare-table td{padding:12px 14px;border:1px solid var(--line);text-align:left;}
.compare-table th{background:var(--navy-900);color:#f6f4ee;font-weight:600;}
.compare-table td.hi{color:var(--gold-500);font-weight:700;}
.note-box{
  background:var(--paper-2);border-left:3px solid var(--gold-500);
  padding:16px 18px;font-size:.88rem;color:var(--ink-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0;
}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.84rem;color:var(--ink-soft);padding:22px 0 0;}
.crumb a{color:var(--ink-soft);text-decoration:none;}
.crumb a:hover{color:var(--navy-800);}

/* utility */
.mt-0{margin-top:0;}
.center{text-align:center;}