/* GLF Residence: eggshell tone layer, loaded after style.css, glf.css and fx.css. Motion is unchanged. */
@font-face{font-family:"Hanken Grotesk";font-weight:300;font-display:swap;src:url("../../assets/fonts/hanken-grotesk-300.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url("../../assets/fonts/hanken-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("../../assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("../../assets/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Geist Mono CL";font-weight:400;font-display:swap;src:url("../../assets/fonts/geist-mono-400.woff2") format("woff2")}
@font-face{font-family:"Geist Mono CL";font-weight:500;font-display:swap;src:url("../../assets/fonts/geist-mono-500.woff2") format("woff2")}
@font-face{font-family:"Pretendard GLF";font-weight:100 900;font-display:swap;src:url("../../assets/fonts/pretendard-subset.woff2") format("woff2");unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7AF}

:root{
  --canvas:#fdfcfc;--surface:#f5f3f1;--rule:#ebe8e4;
  --ink:#000;--ink2:#44403b;--ink3:#777169;--ink4:#a59f97;--warm:#ff6319;--cool:#0039a6;
  --fg:#000;--fg-80:#2a2724;--fg-60:#44403b;--fg-44:#777169;--fg-12:#ebe8e4;--fg-4:#f5f3f1;--fg-2:#faf9f7;
  --solid-4:#f5f3f1;--solid-12:#ebe8e4;--solid-44:#a59f97;--solid-60:#777169;--solid-80:#2a2724;--tertiary:#f5f3f1;
  --bg:#fdfcfc;--inverse-bg:#000;--inverse-fg:#fdfcfc;
  --kr:"Pretendard GLF","Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic";
  --display:"Hanken Grotesk",var(--kr),system-ui,sans-serif;
  --font-kr:var(--kr),sans-serif;
  --font-sans:"Inter",var(--kr),system-ui,sans-serif;
  --font-mono:"Geist Mono CL",ui-monospace,Menlo,monospace;
  --container:1328px;--measure:1280px;--pad-x:max(16px,4vw);
  --radius-lg:20px;--radius-2xl:20px;--radius-3xl:24px;
  --header-h:84px;
  --ok:#2f5a45;--ok-bg:#eaeee8;--warn:#7a6440;--warn-bg:#f3eee5;
}
body{background:var(--canvas);color:var(--ink);font-size:16px;line-height:1.65;letter-spacing:0}
html[lang="ko"] body{line-height:1.75}
::selection{background:#000;color:#fdfcfc}

/* type: light display headings, Inter body, mono labels */
.t-xl,.t-h1,.t-h2,.t-h25,.phero h1,.xhero h1,.statement,.megacta h2,.film__beat h3,.b__n,.big-n,.film__clock b,.stat__n,.glass b{font-family:var(--display);font-weight:300}
.t-h1,.phero h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.05em}
.xhero h1{font-size:clamp(44px,6.6vw,86px);line-height:1;letter-spacing:-.05em}
.t-h2,.megacta h2{font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.04em}
.t-h3,.t-h4{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
.t-h5,.acc__btn{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.statement{letter-spacing:-.035em;line-height:1.15}
.b__n,.big-n{letter-spacing:-.045em}
.film__beat h3{letter-spacing:-.04em}
html[lang="ko"] .t-h1,html[lang="ko"] .t-h2,html[lang="ko"] .phero h1,html[lang="ko"] .xhero h1,html[lang="ko"] .statement,html[lang="ko"] .megacta h2,html[lang="ko"] .film__beat h3{font-weight:300;letter-spacing:-.03em;line-height:1.18}
html[lang="ko"] .statement{line-height:1.4}
html[lang="ko"] .t-h3,html[lang="ko"] .t-h4,html[lang="ko"] .t-h5,html[lang="ko"] .acc__btn,html[lang="ko"] .mcard__title{font-weight:400}
.dim{color:var(--ink2)}
.eyebrow{font:400 12px/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
html[lang="ko"] .eyebrow{font:500 13px/1.5 var(--font-sans);letter-spacing:.02em;text-transform:none}

/* buttons: pills, black fill or outline */
.btn{min-height:48px;padding:0 24px;font:500 15px/1 var(--font-sans);border:1px solid transparent}
.btn--sm{min-height:40px;padding:0 18px;font-size:14px}
.btn--lg{min-height:52px;padding:0 28px;font-size:15px}
.btn--primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn--primary:hover{background:#2a2724}
.btn--secondary,.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--secondary:hover,.btn--ghost:hover{background:var(--ink);color:var(--canvas)}
.xhero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.xhero .btn--ghost:hover{background:#fff;color:#000}
.xhero .btn--primary{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}

/* draft line */
.draftbar{background:var(--surface);color:var(--ink2);border-bottom:1px solid var(--rule);font-size:13px}
.draftbar b{color:var(--ink);font-weight:500}
.draftbar b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warm);margin-right:8px;vertical-align:2px}

/* header: black pill like the foundation site */
.header,.header.is-stuck{position:sticky;top:0;z-index:60;background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px var(--pad-x) 0;pointer-events:none;height:var(--header-h)}
.header__pill{pointer-events:auto;margin:0 auto;width:max-content;max-width:100%;display:flex;align-items:center;gap:4px;background:var(--ink);color:var(--canvas);border-radius:9999px;padding:6px 6px 6px 18px}
.logo{display:flex;align-items:center;gap:10px;font:500 15px/1 var(--font-sans);letter-spacing:0;color:var(--canvas);white-space:nowrap;margin-right:10px}
.logo img{width:22px;height:22px}
.header .nav{display:flex;align-items:center;gap:2px}
.header .nav a{color:#d9d4cd;font:400 14px/1 var(--font-sans);padding:11px 12px;border-radius:9999px;white-space:nowrap}
.header .nav a:hover,.header .nav a[aria-current="page"]{color:#fff;background:rgba(253,252,252,.12)}
.header .lang{display:flex;background:transparent;border:1px solid rgba(253,252,252,.22);margin:0 4px 0 6px}
.header .lang a{font:400 12px/1 var(--font-mono);color:#bdb6ad;padding:8px 9px}
.header .lang a[aria-current="true"]{background:rgba(253,252,252,.16);color:#fff}
.header .lang a:hover{color:#fff}
.header__cta{background:var(--canvas);color:var(--ink);font:500 14px/1 var(--font-sans);padding:13px 18px;border-radius:9999px;white-space:nowrap}
.header__cta:hover{background:#fff}
.nav-toggle{display:none;width:auto;height:auto;color:#fff;font:400 14px/1 var(--font-sans);padding:12px;border-radius:9999px}
.nav-toggle:hover{background:rgba(253,252,252,.12)}
.header a:focus-visible,.header button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mnav{position:static;inset:auto;display:none;pointer-events:auto;opacity:1;transform:none;margin:8px auto 0;background:var(--ink);border-radius:24px;padding:10px;flex-direction:column;gap:2px;max-height:calc(100vh - 110px);overflow-y:auto}
.mnav.is-open{display:flex}
.mnav a{color:#fff;font:400 16px/1.3 var(--font-sans);letter-spacing:0;padding:14px;border-radius:14px;border:0}
.mnav a:hover{background:rgba(253,252,252,.12)}
.mnav .lang{display:inline-flex;align-self:flex-start;margin:8px;background:transparent;border:1px solid rgba(253,252,252,.22)}
.mnav .lang a{padding:10px 12px;font:400 13px/1 var(--font-mono);color:#bdb6ad}
.mnav .lang a[aria-current="true"]{background:rgba(253,252,252,.16);color:#fff}
@media (max-width:980px){
  .header .nav,.header .lang--desk{display:none}
  .nav-toggle{display:inline-block}
  .header__pill{width:100%;justify-content:space-between}
  .logo{margin-right:auto}
}
.fnd-link{display:none}

/* surfaces instead of pastel or black blocks */
.bg-blue,.bg-yellow,.bg-green,.bg-pink,.bg-orange,.bg-sky,.section--soft{background:var(--surface)}
.section--inverse{background:var(--surface);color:var(--ink)}
.section--inverse .eyebrow{color:var(--ink3)}
.section--inverse .dim{color:var(--ink2)}
.section--inverse .btn--primary{background:var(--ink);color:var(--canvas)}
.section--inverse .btn--secondary,.section--inverse .btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.section--inverse .step{border-color:var(--rule)}
.statement .w{opacity:.16}
.statement .w.lit{opacity:1}
.b{border-radius:24px}
.bento > .b:not(.b--photo):not(.b--dark){background:var(--surface)}
.bg-blue .b:not(.b--photo):not(.b--dark),.bg-yellow .b:not(.b--photo):not(.b--dark),.bg-green .b:not(.b--photo):not(.b--dark){background:var(--canvas)}
.b__l{color:var(--ink2)}
.b--dark .b__l{color:rgba(253,252,252,.7)}
.megacta{background:var(--surface);color:var(--ink);border-radius:24px}
.megacta .btn--primary{background:var(--ink);color:var(--canvas)}
.megacta .btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.megacta .eyebrow{color:var(--ink3)}
.finder,.cmp,.nb__map,.summary,.room,.fcard,.card,.form input,.form select,.form textarea{background:var(--canvas)}
.finder{box-shadow:none;border-color:var(--rule);border-radius:24px}
.finder__r{background:var(--surface)}
.form input,.form select,.form textarea{border-color:#cfc9c1;border-radius:14px;min-height:48px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.seg button,.tab{border-color:#cfc9c1}
.seg button[aria-pressed="true"],.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.cmp[data-mode="glf"] .cmp__v{color:var(--ink)}
.cmp[data-mode="apt"] .cmp__v{color:var(--ink3)}
.cmp__sw{background:var(--surface)}
.glass{background:rgba(253,252,252,.94);box-shadow:0 10px 30px -18px rgba(0,0,0,.35);border-radius:20px}
.drawer__close{box-shadow:none;border:1px solid var(--rule)}
.mobile-cta .btn{box-shadow:none}
.story__tag{font:400 12px/1 var(--font-mono);letter-spacing:.04em}
.progress{background:var(--ink)}
.badge{font:400 12px/1 var(--font-mono);letter-spacing:.03em}
.badge__dot{background:var(--warm)}
.xhero .badge__dot{background:var(--warm)}

/* photos: the same warm, slightly muted treatment as City Lights */
.photo img,.b--photo img,.hs__ph img,.phero__ph img,.xhero__bg img,.story__media img,.story__step img.m,.room__ph img,.fcard__ph img,.pmq__row img,.card__visual img,.drawer__img img{filter:sepia(.14) saturate(.82) contrast(.92) brightness(1.03)}

/* footer */
.footer{background:var(--canvas);border-top:1px solid var(--rule);padding-block:64px 40px}
.footer__h{font:400 12px/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
html[lang="ko"] .footer__h{font:500 13px/1.5 var(--font-sans);text-transform:none}
.footer__col a{color:var(--ink2)}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{border-top-color:var(--rule);margin-top:48px}
.footer__copy,.credit{font-family:var(--font-mono);font-size:12px;color:var(--ink3)}
html[lang="ko"] .credit,html[lang="ko"] .footer__copy{font-family:var(--font-sans)}

/* 체크박스는 48px 최소 높이와 100% 너비를 적용하지 않습니다 (라벨과 세로 정렬이 깨집니다) */
.form input[type="checkbox"],.form input[type="radio"]{min-height:0;height:auto;width:auto;flex:0 0 auto;margin-top:3px;accent-color:var(--ink)}
.form .check{align-items:flex-start}

/* 요금표: 항목, 금액, 설명을 한 줄로 */
.feetable{border-top:1px solid var(--rule)}
.fee{display:grid;grid-template-columns:200px 120px 1fr;gap:18px;align-items:baseline;
     padding:18px 0;border-bottom:1px solid var(--rule)}
.fee__k{font-weight:600;color:var(--ink)}
.fee__v{font-family:var(--display);font-weight:300;font-size:26px;color:var(--ink);white-space:nowrap}
.fee__d{color:var(--ink2);font-size:.95rem;line-height:1.55}
@media (max-width:720px){
  .fee{grid-template-columns:1fr auto;gap:6px 14px}
  .fee__d{grid-column:1/-1}
}

/* 입주 시 선납 계산기 */
.calc{margin-top:28px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--canvas)}
.calc__head{padding:22px 24px 24px;border-bottom:1px solid var(--rule)}
.calc__head input[type=range]{width:100%;margin-top:12px}
.calc__out{padding:22px 24px 24px;background:var(--surface)}
.calc__big{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.calc__break{list-style:none;margin:16px 0 14px;padding:0;border-top:1px solid var(--rule)}
.calc__break li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--rule);font-size:.95rem;color:var(--ink2)}
.calc__break li span:last-child{color:var(--ink);font-weight:600;white-space:nowrap}

/* 질문 위젯 */
.askbtn{position:fixed;right:18px;bottom:18px;z-index:9000;border:0;cursor:pointer;
  background:var(--ink);color:var(--canvas);font:600 15px/1 inherit;
  padding:14px 20px;border-radius:999px;box-shadow:0 4px 20px #0003}
.askbtn:hover{opacity:.9}
.askpanel[hidden]{display:none}
.askpanel{position:fixed;right:18px;bottom:78px;z-index:9001;width:min(380px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--canvas);border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 10px 40px #0002;overflow:hidden}
.askpanel__head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--rule);background:var(--surface)}
.askpanel__t{font-weight:600;color:var(--ink)}
.askpanel__x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink2);padding:0 4px}
.askpanel__body{padding:14px 16px;overflow-y:auto;flex:1}
.askpanel__hint{margin:0 0 10px;font-size:.85rem;color:var(--ink3)}
.askpanel__chips{display:flex;flex-wrap:wrap;gap:7px}
.askchip{border:1px solid var(--rule);background:var(--canvas);color:var(--ink2);cursor:pointer;
  font:inherit;font-size:.85rem;padding:7px 12px;border-radius:999px;text-align:left}
.askchip:hover{border-color:var(--ink);color:var(--ink)}
.askpanel__q{font-weight:600;color:var(--ink);margin-bottom:8px}
.askpanel__a{margin:0 0 14px;color:var(--ink2);font-size:.95rem;line-height:1.6}
.askpanel__mail{display:inline-block;margin-bottom:14px;font-weight:600;color:var(--ink)}
.askpanel__back{border:1px solid var(--rule);background:none;color:var(--ink2);cursor:pointer;
  font:inherit;font-size:.85rem;padding:7px 14px;border-radius:999px}
.askpanel__note{margin:14px 0 0;font-size:.75rem;color:var(--ink3);line-height:1.5}
.askpanel__foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--rule);background:var(--surface)}
.askpanel__in{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:10px 12px;
  border:1px solid var(--rule);border-radius:10px;background:var(--canvas);color:var(--ink)}
.askpanel__go{border:0;background:var(--ink);color:var(--canvas);cursor:pointer;
  font:600 .9rem inherit;padding:10px 16px;border-radius:10px}
@media (max-width:640px){
  .askbtn{right:12px;bottom:12px;padding:12px 16px;font-size:14px}
  .askpanel{right:12px;left:12px;bottom:66px;width:auto}
}

/* ── 모바일 정리 (2026-10-23) ───────────────────────────────── */
@media (max-width:640px){
  /* 헤더에 이미 '입주 신청' 단추가 떠 있어서 바닥 바는 중복입니다.
     본문과 히어로 단추를 가리기만 하므로 모바일에서는 감춥니다. */
  .mobile-cta{display:none}

  /* 질문 단추가 푸터 위로 뜨도록 여백을 둡니다 */
  body{padding-bottom:84px}
  .askbtn{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .askpanel{bottom:calc(76px + env(safe-area-inset-bottom,0px));
            max-height:min(70vh,calc(100vh - 150px))}

  /* 한글 제목은 영문용 자간을 쓰면 받침이 뭉갭니다 */
  html[lang="ko"] h1,
  html[lang="ko"] .t-h1,
  html[lang="ko"] .t-h2,
  html[lang="ko"] .xhero h1,
  html[lang="ko"] .phero h1,
  html[lang="ko"] .megacta h2,
  html[lang="ko"] .statement{
    letter-spacing:-.01em;
    line-height:1.3;
    word-break:keep-all;
  }

  /* 너무 작던 글씨 */
  .footer__copy,.askpanel__note,.badge,.photo__cap{font-size:13px}

  /* 손가락으로 누르기 쉽게 */
  .nav-toggle{min-height:44px;display:inline-flex;align-items:center}
  .footer__col a{display:inline-block;padding:4px 0}
}