/* 천안 휴먼빌 퍼스트시티 — normal 등급 랜딩
   수치 출처: 홈페이지_레퍼런스/실측/안심분양상담사-오산자이/normal_재현기준서.md
   (컨테이너 1200 · 자식 간 3px · 헤더 200px 임계 · 하단바 48px · 폼 실측값 · 골드 glow 키프레임)
   브레이크포인트는 기준서의 4개만: 481 / 768 / 769 / 1025 */
:root{
  --navy:#00364b; --charcoal:#25282a; --gold:#b3a400; --bronze:#b9967b;
  --gold-light:#ffe499; --gold-lighter:#fff8d2; --gold-dark:#8d5a1b; --gold-darker:#ac7031; --gold-primary:#e7aa51; --gold-ref:#f6b75b;
  --gradient-gold:linear-gradient(180deg,var(--gold-primary),var(--gold-light),var(--gold-dark),var(--gold-primary),var(--gold-darker));
  --gradient-text-gold:linear-gradient(90deg,var(--gold-ref),var(--gold-light),var(--gold-lighter),var(--gold-ref),var(--gold-light),var(--gold-lighter));
  /* 기준서 §10 사이트 기본 변수 */
  --top-menu-h-color:var(--navy); --modal-cta-color:#c0392b;
  --color-red-primary:#f36767; --color-border:#e4e4e4; --color-bg-input:#fcfcfc; --color-focus-bg-red:#fff2f2;
  --shadow-light:rgba(0,0,0,.12); --shadow-primary:rgba(243,103,103,.08);
  /* 기준서 §10 폼 테마 4변수(현장별 덮어쓰기) */
  --form-color:var(--bronze); --form-submit-color:var(--navy); --form-privacy-color:#8b6f52; --form-scroll-color:var(--bronze);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img{width:100%;height:auto;display:block}
body{font-family:sans-serif;background:#f1f1f1;color:#000;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ── 키프레임 (기준서 원문) ── */
@keyframes borderGlow{0%,100%{filter:brightness(1) drop-shadow(0 0 3px rgba(231,170,81,.6))}50%{filter:brightness(1.3) drop-shadow(0 0 8px rgba(231,170,81,1))}}
@keyframes textGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes modal-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── 컨테이너 (§1) ── */
#main-box{position:relative;z-index:1;max-width:1200px;min-height:100vh;margin:5px auto 0;background:#fff;overflow:hidden}
#main-body>*{margin-bottom:3px}
.slot{position:relative;width:100%;overflow:hidden}
.slot img{width:100%;height:auto;display:block}

/* ── 고정 헤더 (§20) ── */
#main-header{position:fixed;z-index:2;width:100%;display:flex;justify-content:center;transform:translateY(-110%);transition:transform .3s ease-in-out,opacity .3s ease;top:5px;left:0}
#main-header.visible{transform:translateY(-5px)}
#top-menu{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;padding:5px 10px;box-shadow:0 4px 20px rgba(0,0,0,.1);max-width:1200px;width:100%}
.top-menu-item{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 12px;border-radius:25px;cursor:pointer;white-space:nowrap;font-size:18px;font-weight:700;line-height:1.2;transition:background .2s,color .2s;border:0;background:transparent;color:#000}
.top-menu-item:hover,.top-menu-item:focus-visible{background:var(--top-menu-h-color);color:#fff;outline:0}

/* ── 슬롯 1: 상단 띠 (1000×150) — 레퍼런스 top_banner.webp 실측(1000 기준): 로고 x51~143 h50 · 텍스트 x159~392 h28(regular) · 알약 x598~961 y46~107(h62, 테두리 ~3px) · 번호 h53 굵게 · 네이비 #012f46/#0c3247 ── */
.topbar{position:relative;display:block;aspect-ratio:1000/150;background:#fff;container-type:inline-size}
.topbar .brand{position:absolute;left:5.1cqi;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:1.6cqi;font-size:2.8cqi;font-weight:500;color:#0c3247;letter-spacing:-.02em;white-space:nowrap}
.topbar .brand img{width:auto;height:5cqi}
.topbar .tel{position:absolute;right:3.9cqi;top:50%;transform:translateY(-50%);width:36.4cqi;height:6.2cqi;border:.3cqi solid #012f46;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:5.6cqi;font-weight:800;color:#012f46;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}

/* ── 슬롯 2: 히어로 (1190×1523) ── */
.hero{aspect-ratio:1190/1523;background:#0d2431 url(../img/hero_1200.webp) center/cover no-repeat;color:#fff}
@media (min-width:769px){.hero{background-image:url(../img/hero_2400.webp)}}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,54,75,.85) 0%,rgba(0,54,75,.55) 38%,rgba(0,54,75,0) 62%,rgba(0,20,30,.75) 100%)}
.hero .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:9% 6% 6%}
.hero .eyebrow{font-size:clamp(12px,1.6vw,22px);letter-spacing:.35em;opacity:.85;font-weight:400}
.hero .sub{margin-top:1.2em;font-size:clamp(15px,2.4vw,32px);font-weight:400;letter-spacing:-.02em}
.hero h1{margin-top:.25em;font-size:clamp(28px,6.4vw,84px);font-weight:900;line-height:1.15;letter-spacing:-.04em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--gold-light)}
.hero .ribbon{margin-top:1.4em;display:inline-block;background:var(--gold);color:#1a1800;font-weight:700;font-size:clamp(12px,1.9vw,24px);padding:.45em 1.4em;border-radius:2em;letter-spacing:-.02em}
.hero .facts{margin-top:auto;display:flex;gap:2px;width:100%}
.hero .facts div{flex:1;background:rgba(0,54,75,.82);padding:.9em .4em;text-align:center;border-top:2px solid var(--gold)}
.hero .facts b{display:block;font-size:clamp(14px,2.6vw,34px);font-weight:900;color:var(--gold-light);letter-spacing:-.03em;line-height:1.1}
.hero .facts span{display:block;margin-top:.35em;font-size:clamp(10px,1.3vw,17px);opacity:.9}
.hero .cg-note{position:absolute;left:0;right:0;bottom:calc(var(--facts-h,20%) + .4em);text-align:center;font-size:clamp(8px,.9vw,12px);opacity:.75}

/* ── 슬롯 3: 6칸 아이콘 스트립 (1440×810) ── */
.strip6{aspect-ratio:1440/810;background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr 1fr;padding:3% 4% 4%;gap:2% 3%}
.strip6 h2{grid-column:1/-1;text-align:center;font-size:clamp(18px,3.6vw,46px);font-weight:900;letter-spacing:-.03em}
.strip6 h2 em{font-style:normal;color:#ff6b57}
.strip6 .c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:.6em;padding:6% 4%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.strip6 .ic{width:2.2em;height:2.2em;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(12px,1.8vw,24px)}
.strip6 b{display:block;margin-top:.6em;font-size:clamp(11px,1.7vw,22px);color:var(--gold-light);letter-spacing:-.02em}
.strip6 small{display:block;margin-top:.3em;font-size:clamp(9px,1.15vw,15px);line-height:1.4;opacity:.92;word-break:keep-all}

/* ── 띠 제목 (1440×216) ── */
.band{aspect-ratio:1440/216;display:flex;align-items:center;justify-content:center;gap:.6em;background:var(--navy);color:#fff;font-size:clamp(16px,3.2vw,42px);font-weight:900;letter-spacing:-.03em}
.band small{font-size:.45em;font-weight:400;letter-spacing:.3em;color:var(--gold-light);text-transform:uppercase}
.band.bronze{background:var(--bronze);color:#fff}

/* ── 배너 (1440×360, a tel:) — 레퍼런스와 같은 매체: 애니 WebP 1장(16프레임·100ms·루프). 생성: ~/ref-analyzer/_hv-banner.mjs (번호 바뀌면 재생성) ── */
.banner{aspect-ratio:1440/360;display:block;background:#020747}
.banner img{width:100%;height:100%;display:block}25%{transform:rotate(14deg) scale(1.15)}50%{transform:rotate(-10deg) scale(1.05)}75%{transform:rotate(12deg) scale(1.18)}}25%{transform:rotate(14deg) scale(1.15)}50%{transform:rotate(-10deg) scale(1.05)}75%{transform:rotate(12deg) scale(1.18)}}

/* ── 정보 슬래브(흰 배경) ── */
.slab{padding:5% 5% 6%;background:#fff}
.slab.tint{background:#f7f6f2}
.slab h3{text-align:center;font-size:clamp(17px,3vw,38px);font-weight:900;color:var(--charcoal);letter-spacing:-.03em;line-height:1.25}
.slab h3 em{font-style:normal;color:var(--navy)}
.slab .lead{text-align:center;margin-top:.6em;font-size:clamp(12px,1.5vw,19px);color:#555;letter-spacing:-.02em;word-break:keep-all}
.slab .tbl{margin-top:4%;border-top:2px solid var(--navy);width:100%;border-collapse:collapse;font-size:clamp(11px,1.45vw,18px)}
.slab .tbl th,.slab .tbl td{padding:.75em .8em;border-bottom:1px solid #e4e4e4;text-align:left;vertical-align:top}
.slab .tbl th{width:28%;background:#f4f6f7;color:var(--navy);font-weight:700;white-space:nowrap}
.slab .tbl.types th,.slab .tbl.types td{text-align:center}
.slab .tbl.types thead th{width:auto;background:var(--navy);color:#fff}
.slab .tbl.types tfoot td{font-weight:700;background:#f4f6f7}
.slab .fig{margin-top:4%}
.slab .fig figcaption{font-size:clamp(9px,1vw,13px);color:#777;text-align:center;margin-top:.6em}

/* ── 프리미엄 4카드 (1440×1424 계열) ── */
.premium{aspect-ratio:1440/1424;background:#fff;padding:4% 5%;display:grid;grid-template-rows:auto 1fr 1fr;gap:3%}
.premium h3{text-align:center;font-size:clamp(17px,3vw,38px);font-weight:900;color:var(--charcoal);letter-spacing:-.03em}
.premium .row{display:grid;grid-template-columns:1fr 1fr;gap:3%}
.premium .card{border:1px solid #e4e4e4;border-radius:.8em;padding:5% 5% 6%;background:#fff;box-shadow:0 6px 36px rgba(0,54,75,.06);display:flex;flex-direction:column}
.premium .num{font-size:clamp(11px,1.4vw,18px);color:var(--gold);font-weight:900;letter-spacing:.2em}
.premium b{display:block;margin-top:.3em;font-size:clamp(14px,2.2vw,28px);color:var(--navy);letter-spacing:-.03em;line-height:1.2}
.premium p{margin-top:.6em;font-size:clamp(10px,1.3vw,16px);line-height:1.5;color:#333;word-break:keep-all}

/* ── 성성호수 생활권 롱 슬래브 (1100×2762) ── */
.vision{background:linear-gradient(180deg,var(--navy),#0b2a3a);color:#fff;padding:7% 6% 8%}
.vision h3{text-align:center;font-size:clamp(18px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.vision h3 em{font-style:normal;color:var(--gold-light)}
.vision .lead{text-align:center;margin-top:.8em;font-size:clamp(12px,1.5vw,19px);opacity:.9;word-break:keep-all}
.vision .big{margin:5% auto 0;text-align:center}
.vision .big b{display:block;font-size:clamp(40px,10vw,128px);font-weight:900;color:var(--gold-light);letter-spacing:-.04em;line-height:1}
.vision .big span{display:block;font-size:clamp(12px,1.8vw,22px);margin-top:.4em;opacity:.9}
.vision ol{list-style:none;margin-top:6%;display:grid;gap:2%}
.vision li{display:grid;grid-template-columns:auto 1fr;gap:4%;align-items:center;background:rgba(255,255,255,.07);padding:4% 5%;border-radius:.6em}
.vision li .yr{font-size:clamp(13px,2vw,26px);font-weight:900;color:var(--gold-light);white-space:nowrap}
.vision li b{display:block;font-size:clamp(12px,1.7vw,22px);letter-spacing:-.02em}
.vision li small{display:block;margin-top:.3em;font-size:clamp(10px,1.2vw,15px);opacity:.85;word-break:keep-all}
.vision .map{margin-top:6%;border-radius:.6em;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.vision .map figcaption{font-size:clamp(9px,1vw,13px);opacity:.8;text-align:center;padding:.6em}

/* ── 단지설계 2슬래브 ── */
.design{aspect-ratio:1409/1650;background:#fff}
.design .img{position:absolute;inset:0}
.design .img img{width:100%;height:100%;object-fit:cover}
.design .txt{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,20,30,.92),rgba(0,20,30,.6) 70%,transparent);color:#fff;padding:12% 6% 6%;text-align:center}
.design .txt b{display:block;font-size:clamp(17px,3vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.design .txt b em{font-style:normal;color:var(--gold-light)}
.design .txt p{margin-top:.6em;font-size:clamp(11px,1.4vw,18px);opacity:.92;word-break:keep-all}

/* ── 커뮤니티 5카드 (1440×996) ── */
.comm{aspect-ratio:1440/996;display:grid;grid-template-columns:38% 1fr;background:#fff}
.comm .pic{background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff}
.comm .pic b{font-size:clamp(28px,6vw,90px);font-weight:900;color:var(--gold-light);letter-spacing:-.04em}
.comm .txt{padding:5% 6%;display:flex;flex-direction:column;justify-content:center}
.comm .k{font-size:clamp(10px,1.2vw,15px);letter-spacing:.3em;color:var(--gold);font-weight:700}
.comm h4{margin-top:.3em;font-size:clamp(17px,2.8vw,36px);font-weight:900;color:var(--charcoal);letter-spacing:-.03em}
.comm p{margin-top:.6em;font-size:clamp(11px,1.4vw,18px);color:#444;line-height:1.5;word-break:keep-all}
.comm .tag{margin-top:1em;font-size:clamp(9px,1vw,13px);color:#999}

/* ── 시공사 (1440×746) ── */
.builder{aspect-ratio:1440/746;background:#f7f6f2;padding:4% 5%;display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:center}
.builder .l b{display:block;font-size:clamp(30px,6vw,84px);font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1}
.builder .l b small{font-size:.4em;font-weight:700;margin-left:.2em}
.builder .l p{margin-top:.5em;font-size:clamp(12px,1.6vw,21px);color:#333;letter-spacing:-.02em;word-break:keep-all}
.builder ul{list-style:none;display:grid;gap:3%}
.builder li{display:grid;grid-template-columns:auto 1fr;gap:5%;align-items:baseline;border-bottom:1px solid #ddd;padding:2% 0;font-size:clamp(11px,1.4vw,18px)}
.builder li b{color:var(--gold-dark);font-size:1.15em}

/* ── 분양안내 (1100×858) ── */
.sale{aspect-ratio:1100/858;background:#fff;padding:5% 6%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sale .badge{background:#c0392b;color:#fff;font-weight:900;font-size:clamp(14px,2.6vw,34px);padding:.4em 1.2em;border-radius:2em;letter-spacing:-.02em}
.sale h3{margin-top:.8em;font-size:clamp(18px,3.4vw,44px);font-weight:900;color:var(--charcoal);letter-spacing:-.03em;line-height:1.2}
.sale h3 em{font-style:normal;color:var(--navy)}
.sale .grid{margin-top:5%;display:grid;grid-template-columns:repeat(3,1fr);gap:2%;width:100%}
.sale .grid div{background:#f4f6f7;border-radius:.6em;padding:5% 3%}
.sale .grid b{display:block;font-size:clamp(14px,2.4vw,30px);color:var(--navy);font-weight:900;letter-spacing:-.03em}
.sale .grid span{display:block;margin-top:.3em;font-size:clamp(10px,1.2vw,15px);color:#555}
.sale .note{margin-top:4%;font-size:clamp(10px,1.2vw,15px);color:#666;word-break:keep-all}

/* ── 평면 (1350×1500 / 1350×1743) ── */
.plans{background:#fff;padding:4% 5% 5%}
.plans .row{display:grid;grid-template-columns:1fr 1fr;gap:3%}
.plans figure{border:1px solid #e4e4e4;border-radius:.6em;overflow:hidden}
.plans figcaption{padding:3% 4%;display:flex;justify-content:space-between;align-items:baseline;background:#f4f6f7;font-size:clamp(10px,1.3vw,16px);color:#333}
.plans figcaption b{font-size:1.35em;color:var(--navy);font-weight:900}
.plans .note{margin-top:2%;font-size:clamp(9px,1vw,13px);color:#777;text-align:center}

/* ── 시설 9카드 (1100×619) ── */
.fac{aspect-ratio:1100/619;display:grid;grid-template-columns:34% 1fr;background:#fff}
.fac .n{background:var(--navy);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:clamp(28px,6vw,90px);font-weight:900;letter-spacing:-.04em}
.fac .n small{font-size:.35em;color:#fff;opacity:.7;margin-left:.2em}
.fac .t{padding:4% 6%;display:flex;flex-direction:column;justify-content:center}
.fac h4{font-size:clamp(17px,2.9vw,38px);font-weight:900;color:var(--charcoal);letter-spacing:-.03em}
.fac p{margin-top:.5em;font-size:clamp(11px,1.4vw,18px);color:#444;line-height:1.5;word-break:keep-all}
.fac .tag{margin-top:.8em;font-size:clamp(9px,1vw,13px);color:#999}

/* ── 인라인 폼 (기준서 §6 실측) ── */
.contact-box{scroll-margin-top:62px;position:relative;width:100%;padding:40px 26px 34px;border:4px solid color-mix(in srgb,var(--form-color) 28%,#fff);border-radius:13px;background:#fff;box-shadow:0 6px 36px var(--shadow-primary);z-index:2}
.contact-box h2{text-align:center;margin-bottom:30px;font-size:1.5em;font-weight:700;color:#181818;letter-spacing:-1.3px}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:7px;font-weight:600;color:#222;font-size:1.03em;letter-spacing:-.4px}
.form-group label .req{color:#f36767}
.form-group label .ex{font-weight:400;color:#555}
input[type=date],input[type=text],select{width:100%;padding:12px 17px;border-radius:7px;border:1.2px solid var(--color-border);font-size:1em;background:var(--color-bg-input);box-sizing:border-box;transition:border .15s,background .15s;outline:0;font-family:inherit;color:#000;-webkit-appearance:none;appearance:none;height:45px}
select{background-image:linear-gradient(45deg,transparent 50%,#555 50%),linear-gradient(135deg,#555 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=date]:focus,input[type=text]:focus,select:focus{border:1.3px solid var(--color-red-primary);background:var(--color-focus-bg-red)}
.tel-box{display:flex;align-items:center;gap:6px;width:100%}
.tel-box input[type=tel]{flex:1 1 0;min-width:0;padding:10px 0;text-align:center;font-size:1em;border:1.2px solid var(--color-border);border-radius:7px;background:var(--color-bg-input);transition:border .15s,background .15s;outline:0;font-family:inherit;-webkit-appearance:none;appearance:none}
.tel-box input[type=tel]:focus{border:2px solid var(--color-red-primary);background:var(--color-focus-bg-red)}
.tel-box .hyphen{display:inline-block;padding:0 4px;color:#b8b8b8;font-size:1.13em;user-select:none}
.gift-check{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 4px}
.gift-check input{width:22px;height:22px;accent-color:var(--color-red-primary)}
.gift-check label{font-size:1.02em;color:#1a1a1a;font-weight:700}
.privacy-section{margin:23px 0 12px}
.privacy-section h3{text-align:center;font-weight:700;font-size:1.2em;margin-bottom:15px;color:var(--form-privacy-color);letter-spacing:-1.1px}
.privacy-text{width:100%;height:200px;resize:none;border:1.2px solid var(--color-border);border-radius:7px;background:snow;padding:12px;color:#444;font-size:.97em;line-height:1.45;overflow-y:auto;font-family:inherit;scrollbar-color:var(--form-scroll-color) #f5f5f5;scrollbar-width:thin}
.privacy-checkbox{margin:30px 0;display:flex;align-items:center;justify-content:center;gap:8px}
.privacy-checkbox input{width:22px;height:22px;accent-color:var(--color-red-primary);cursor:pointer}
.privacy-checkbox label{font-size:1.02em;color:#1a1a1a;font-weight:700;cursor:pointer}
.submit-btn-wrapper{position:relative;margin-top:50px}
button.submit-btn{display:block;width:100%;background:var(--form-submit-color);color:#fff;font-size:1.4em;font-weight:700;border:0;border-radius:8px;padding:15px 0;cursor:pointer;transition:background .18s,box-shadow .13s;box-shadow:0 1.5px 9px var(--shadow-primary);letter-spacing:-1px}
button.submit-btn:hover{background:color-mix(in srgb,var(--form-submit-color) 85%,#000)}
button.submit-btn:disabled{opacity:.6;cursor:wait}
.form-status{margin-top:12px;text-align:center;font-size:.95em;min-height:1.4em;color:#555}
.form-status.is-ok{color:#1d7a4a;font-weight:700}
.form-status.is-warn{color:#c0392b;font-weight:700}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.inquiry-badge{position:absolute;top:-35px;left:50%;background:#fffacd;border:1px solid #dcd7cd;border-radius:12px;padding:8px 22px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.12);animation:float 2s ease-in-out infinite}
.inquiry-badge::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fffacd}
.inquiry-badge::before{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:8px solid #dcd7cd}
.badge-text{font-size:.95em;color:#111;font-weight:500;line-height:1.3;white-space:nowrap}
.badge-counter{color:red;font-weight:900;font-size:1.25em;display:inline-block;font-variant-numeric:tabular-nums}
.inquiry-badge[hidden]{display:none}

/* ── 푸터 (기준서 §6) ── */
#main-footer{background:#dbdbdb;color:#2c3e50;text-align:center;padding:20px 20px 55px;font-size:1em;line-height:1.8}
#main-footer p{margin-bottom:5px;word-break:keep-all}
#main-footer .legal{font-size:.85em;color:#4a5763}

/* ── 하단 고정바 (§15) ── */
#aside-bottom-button-container{position:fixed;display:flex;z-index:2;width:100%;max-width:1200px;bottom:0;left:50%;transform:translateX(-50%);gap:0;opacity:0;pointer-events:none;transition:opacity .3s ease}
#aside-bottom-button-container.loaded{opacity:1;pointer-events:auto}
#aside-bottom-button-left,#aside-bottom-button-right{position:relative;display:flex;flex:1;padding:15px;align-items:center;justify-content:center;font-size:18px;font-weight:700;line-height:1;color:transparent;border:0;background:#07192d;cursor:pointer;border-radius:6px;overflow:hidden}
#aside-bottom-button-left{margin-right:1px}
#aside-bottom-button-left::before,#aside-bottom-button-right::before{content:'';position:absolute;inset:0;padding:2px;border-radius:6px;background:var(--gradient-gold);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;will-change:filter;animation:borderGlow 1.5s ease-in-out infinite}
#aside-bottom-button-left span,#aside-bottom-button-right span{background:var(--gradient-text-gold);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;will-change:background-position;animation:textGradient 3s ease-in-out infinite}

/* ── 진입 모달 (§6) ── */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:10000;display:none;align-items:center;justify-content:center;touch-action:manipulation}
#modal-overlay.open{display:flex}
#modal-box{display:flex;flex-direction:column;align-items:stretch;width:auto}
#modal-visual{position:relative;aspect-ratio:1086/1448;height:min(calc(min(85vw,576px) * 1448 / 1086),calc(79vh - 72px));background:var(--navy);cursor:pointer;overflow:hidden;line-height:0}
#modal-visual img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-tap-highlight-color:transparent}
#modal-visual .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:7% 7% 6%}
#modal-visual .logo{display:flex;align-items:center;gap:.4em;font-size:clamp(12px,3.6vw,20px);font-weight:700}
#modal-visual .logo img{width:auto;height:1.6em;filter:brightness(0) invert(1)}
#modal-visual .card{margin-top:6%;background:#fff;color:var(--charcoal);border-radius:.8em;padding:5% 6% 6%;width:100%;flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#modal-visual .card .s{font-size:clamp(11px,3.2vw,18px);font-weight:700;color:#555}
#modal-visual{container-type:inline-size}
#modal-visual .card .h{margin-top:.15em;font-size:clamp(22px,9.5cqi,48px);font-weight:900;line-height:1.05;letter-spacing:-.04em;color:var(--navy);word-break:keep-all}
#modal-visual .card .h em{font-style:normal;color:#e63c2f}
#modal-visual .pic{flex:1 1 0;min-height:0;margin-top:4%;border-radius:.5em;overflow:hidden}
#modal-visual .grid{flex:0 0 auto}
#modal-visual .pic img{width:100%;height:100%;object-fit:cover}
#modal-visual .grid{margin-top:5%;display:grid;grid-template-columns:1fr 1fr;gap:3%}
#modal-visual .grid div{border-radius:.6em;padding:8% 4%;color:#fff;font-size:clamp(10px,2.9vw,16px);line-height:1.35;word-break:keep-all}
#modal-visual .grid div:nth-child(1),#modal-visual .grid div:nth-child(4){background:#e63c2f}
#modal-visual .grid div:nth-child(2),#modal-visual .grid div:nth-child(3){background:var(--navy)}
#modal-visual .grid b{display:block;color:var(--gold-lighter);font-size:1.08em;margin-bottom:.25em}
#modal-cta{position:relative;width:100%;padding:12px 20px;display:flex;justify-content:center;align-items:center;background:var(--modal-cta-color);color:#fff;font-size:16px;font-weight:700;border:0;cursor:pointer;letter-spacing:-.5px;transition:background .18s}
#modal-cta:hover{background:color-mix(in srgb,var(--modal-cta-color) 85%,#000)}
#modal-cta span:last-child{position:absolute;right:20px;top:50%;transform:translateY(-57%);font-size:1.4em;line-height:1}
#modal-footer{display:flex;background:#222}
#modal-close,#modal-skip{flex:1;padding:12px 0;background:0 0;border:0;color:#bbb;font-size:15px;cursor:pointer;transition:background .2s,color .2s}
#modal-skip:hover{background:#333;color:#ddd}
#modal-close{border-left:1px solid #444;color:#fff}
#modal-close:hover{background:#333;color:#fff}

/* ── 브레이크포인트 (기준서 §5, 4개만) ── */
@media (max-width:768px){.inquiry-badge{padding:6px 16px}.badge-text{font-size:.85em}.badge-counter{font-size:1.1em}}
@media (max-width:480px){.inquiry-badge{top:-30px;padding:5px 18px;border-radius:10px}.badge-text{font-size:.8em}.badge-counter{font-size:1em}}
@media (min-width:768px) and (max-width:1024px){#top-menu{gap:5px;padding:5px 10px}.top-menu-item{padding:8px 6px;font-size:16px}#main-box{width:100%;margin:5px auto 0}.contact-box{padding:20px 5vw;border-radius:4vw}.form-group label{font-size:1.1em}.privacy-section h3{font-size:1em}.privacy-text{font-size:.95em;height:150px}.tel-box input[type=tel]{font-size:.95em;padding:8px 0}.tel-box .hyphen{font-size:1em;padding:0 3px}button.submit-btn{padding:12px 0;border-radius:7px;font-size:1.2em}#main-footer{font-size:.9em}#modal-visual{height:min(calc(min(92vw,720px) * 1448 / 1086),calc(79vh - 72px))}}
@media (max-width:767px){.strip6,.premium,.comm,.fac,.builder,.sale{aspect-ratio:auto}.strip6{padding:6% 4% 7%;gap:3%;grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.strip6 .c{padding:8% 5%}.premium .row{grid-template-columns:1fr;gap:3%}.premium{gap:3%}.comm{grid-template-columns:1fr}.comm .pic{aspect-ratio:16/9}.comm .txt{padding:6% 6% 8%}.fac{grid-template-columns:28% 1fr}.fac .t{padding:6% 5%}.builder{grid-template-columns:1fr;padding:7% 6%}.sale{padding:8% 5%}#top-menu{gap:5px;padding:5px 10px}.top-menu-item{padding:8px 6px;font-size:16px}#main-box{width:100%;margin:5px auto 0}.contact-box{padding:18px 3vw;border-radius:5vw}.form-group label{font-size:1em}.privacy-section h3{font-size:1em}.privacy-text{font-size:1em;height:60px}.tel-box input[type=tel]{font-size:1em;padding:8px 0}.tel-box .hyphen{font-size:1em;padding:0 2px}button.submit-btn{padding:10px 0;border-radius:6px}#main-footer{font-size:.8em}#modal-visual{height:min(calc(min(96vw,576px) * 1448 / 1086),calc(68vh - 72px))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}