/*
 * 고급형 마감 (2026-10-02 주인 요청 "디자인 고급스럽게")
 * style.css·onepage.css 뒤에 불러 겉모습만 덮는다. 되돌리려면 이 파일의 <link> 만 빼면 된다.
 * 차콜·아이보리 바탕, 샴페인 골드 포인트, 제목은 명조, 브랜드 빨강은 짙게 줄여 강조에만.
 */
:root { --lux-ink: #2e1610; --lux-ivory: #f7f0ea; --lux-paper: #fcf8f5; --lux-gold: #e8742a; --lux-gold2: #f6b98a; --lux-line: rgba(232,116,42,.22); --lux-wine: #d0102c; }

/* ---------- 공통: 머리·바닥·하위 페이지 ---------- */
.site-header { border-bottom-color: rgba(232,116,42,.25); }
.gnb .d1 { font-weight: 400; letter-spacing: .02em; }
.gnb .d1::after { height: 1px; background: var(--lux-gold); }
.gnb > ul > li.active .d1 { color: var(--lux-wine); }
.hd-reg { border-radius: 0; background: var(--lux-ink); letter-spacing: .06em; font-weight: 500; }
.hd-reg:hover { background: var(--lux-wine); }
.hd-tel { font-family: var(--font-en); font-weight: 400; letter-spacing: .02em; }
.site-footer { background: var(--lux-ink); border-top: 1px solid rgba(232,116,42,.3); }
.ft-tel { font-family: var(--font-en); font-weight: 400; color: var(--lux-gold2); }
.page-title h1, .page-title h2 { font-family: var(--font-serif); font-weight: 400; }
.page-title .en { color: var(--lux-gold); }
.page-title .bar { background: var(--lux-gold); }
.tabs button { border-radius: 0; }
.tabs button.on { background: var(--lux-ink); color: var(--lux-gold2); }
.vr-launch { border-radius: 0; }
.vr-launch .vr-ico { background: transparent; border: 1px solid var(--lux-gold2); color: var(--lux-gold2); }
.vr-launch em { border-radius: 0; background: var(--lux-gold); color: #fff; }

/* ---------- 첫 화면(원페이지) ---------- */
.op { background: var(--lux-paper); }
.op-sec { padding: 130px 0; }
.op-soft { background: var(--lux-ivory); }
.op-dark { background: var(--lux-ink); color: #cfc8bd; }

/* 제목: 골드 마름모 + 영문 작은 글씨, 명조 큰 글씨 */
.op-en { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .38em; color: var(--lux-gold); }
.op-en::before { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--lux-gold); }
.op-reg .op-en { justify-content: center; }
.op-tit { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.03em; color: var(--lux-ink); line-height: 1.35; }
.op-tit b { font-weight: 700; color: var(--lux-wine); }
.op-dark .op-tit { color: #fff; }
.op-dark .op-tit b { color: var(--lux-gold2); }
.op-lead { color: #6d665e; font-weight: 300; }
.op-dark .op-lead { color: #b9b1a5; }
.op-note { color: #9a9288; }

/* 버튼: 각진 모양, 골드 테두리 */
.op-btn { border-radius: 0; height: 60px; padding: 0 34px; font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.op-btn-red { background: var(--lux-wine); }
.op-btn-red:hover { background: var(--lux-gold); }
.op-btn-line { border: 1px solid var(--lux-gold); }
.op-btn-line:hover { background: var(--lux-gold); border-color: var(--lux-gold); color: #fff; }
.op-more a { border-radius: 0; border-color: var(--lux-line); background: transparent; font-size: 14px; letter-spacing: .02em; }
.op-more a::after { color: var(--lux-gold); }
.op-more a:hover { border-color: var(--lux-gold); color: var(--lux-ink); background: #fff; }
.op-dark .op-more a { border-color: rgba(220,207,174,.35); }
.op-dark .op-more a:hover { color: var(--lux-ink); }

/* ① 비주얼 아래 띠 */
.op-hero-panel { background: var(--lux-ink); padding: 56px 0 60px; border-top: 1px solid var(--lux-line); }
.op-chip { border-radius: 0; border-color: var(--lux-line); color: var(--lux-gold2); letter-spacing: .08em; font-size: 13px; }
.op-hero-tit { font-family: var(--font-serif); font-weight: 400; }
.op-hero-tit b { font-weight: 700; }
.op-hero-brand { font-size: .55em; letter-spacing: .12em; color: var(--lux-gold2); font-weight: 400; }
.op-hero-deal { border-radius: 0; background: transparent; border-left: 2px solid var(--lux-gold); padding: 4px 0 4px 16px; color: #f0dfbd; font-weight: 500; }

/* ② 계약조건: 선으로 나눈 표, 골드 숫자 */
.op-deal { background: var(--lux-ivory); }
.op-deal-list { gap: 0; border-top: 1px solid var(--lux-line); }
.op-deal-list li { border: 0; border-bottom: 1px solid var(--lux-line); border-radius: 0; background: transparent; box-shadow: none; padding: 28px 16px; gap: 26px; }
.op-deal-list li:nth-child(odd) { border-right: 1px solid var(--lux-line); }
.op-deal-list .n { width: auto; height: auto; background: none; color: var(--lux-gold); font-family: var(--font-en); font-size: 30px; font-weight: 400; }
.op-deal-list b { color: var(--lux-wine); }

/* ③ 등록 폼 */
.op-reg { background: var(--lux-paper); }
.op-form { border-radius: 0; border: 1px solid var(--lux-line); box-shadow: 0 30px 60px -30px rgba(60,40,10,.18); padding: 48px; }
.op-fld input[type=text], .op-fld input[type=tel], .op-fld textarea { border-radius: 0; background: #fff; border-color: #ddd5c8; }
.op-fld input:focus, .op-fld textarea:focus { outline-color: var(--lux-gold); }
.op-opt { border-radius: 0; background: var(--lux-ivory); }
.op-chips span { border-radius: 0; border-color: #ddd5c8; }
.op-chips input:checked + span { background: var(--lux-ink); border-color: var(--lux-ink); color: var(--lux-gold2); }
.op-check input { accent-color: var(--lux-wine); }
.op-terms-btn, .op-terms { border-radius: 0; }
.op-submit { border-radius: 0; background: var(--lux-ink); letter-spacing: .08em; font-weight: 600; }
.op-submit:hover { background: var(--lux-wine); }

/* ④ 개요: 명조 숫자, 골드 구분선 */
.op-stats { gap: 0; border-top: 1px solid var(--lux-line); border-bottom: 1px solid var(--lux-line); }
.op-stats li { border-radius: 0; background: transparent; padding: 36px 26px; }
.op-stats li + li { border-left: 1px solid var(--lux-line); }
.op-stats b { font-family: var(--font-serif); font-weight: 700; color: var(--lux-ink); }
.op-stats span { color: #8a8278; font-size: 14px; }
.op-tabs button { border-radius: 0; border-color: #ddd5c8; background: transparent; font-weight: 500; letter-spacing: .04em; }
.op-tabs button.on { background: var(--lux-ink); border-color: var(--lux-ink); color: var(--lux-gold2); }
.op-table { border-top: 1px solid var(--lux-ink); }
.op-table th { background: transparent; color: var(--lux-gold); font-weight: 500; letter-spacing: .06em; }
.op-table td { color: #3c3732; }

/* ⑥ 프리미엄 카드: 1px 골드 격자 */
.op-cards { gap: 1px; background: var(--lux-line); border: 1px solid var(--lux-line); }
.op-cards li { border-radius: 0; box-shadow: none; background: var(--lux-paper); padding: 38px 30px; transition: background .3s; }
.op-cards li:hover { background: #fff; }
.op-cards .k { color: var(--lux-gold); letter-spacing: .16em; font-weight: 500; font-size: 11px; }
.op-cards h3 { font-family: var(--font-serif); color: var(--lux-ink); font-weight: 700; font-size: 21px; }
.op-cards p { color: #6d665e; }
.op-cards .op-card-cta { background: var(--lux-ink); }
.op-cards .op-card-cta:hover { background: var(--lux-ink); }
.op-cards .op-card-cta p { color: var(--lux-gold2); letter-spacing: .1em; }
.op-cards .op-card-cta a { align-self: flex-start; padding-bottom: 4px; border-bottom: 1px solid var(--lux-gold); color: var(--lux-gold2); }

/* 그림 틀: 그림자 + 안쪽 얇은 선 */
.op-fig { border-radius: 0; box-shadow: 0 30px 60px -30px rgba(40,25,5,.35); }
.op-fig::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.55); pointer-events: none; }
.op-dl dt { color: var(--lux-gold); font-weight: 400; letter-spacing: .2em; font-size: 13px; padding-top: 3px; }
.op-dl dd { color: #4a443e; }
.op-checks li { padding-left: 24px; }
.op-checks li::before { content: ""; width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); background: var(--lux-gold); margin-top: 9px; }
.op-plan { border-radius: 0; border-color: var(--lux-line); }
.op-zoom { border-radius: 0; background-color: rgba(27,26,25,.8); }

/* ⑫ 영상 · ⑬ 문서 · ⑭ 견본주택 */
.op-video { border-radius: 0; }
.op-video button span { background: transparent; border: 1px solid var(--lux-gold2); width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.op-video button span::after { left: 40px; top: 32px; }
.op-docs { gap: 0; border-top: 1px solid var(--lux-line); border-left: 1px solid var(--lux-line); }
.op-docs a { border-radius: 0; border: 0; border-right: 1px solid var(--lux-line); border-bottom: 1px solid var(--lux-line); padding: 28px 24px; }
.op-docs a:hover { transform: none; background: var(--lux-ivory); }
.op-docs b { color: var(--lux-gold); font-weight: 500; letter-spacing: .2em; }
.op-final { background: var(--lux-ink); color: #cfc8bd; }
.op-final .op-tit { color: #fff; }
.op-final .op-tit b { color: var(--lux-gold2); }
.op-final .op-dl dd { color: #d9d2c7; }
.op-final .op-dl a { color: var(--lux-gold2); font-family: var(--font-en); font-size: 28px; font-weight: 400; }
.op-final .op-btn-line { color: #fff; }

/* PC 아래 고정 줄 */
.op-bar { border-radius: 0; box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.op-bar-tel { background: var(--lux-ink); font-family: var(--font-en); font-weight: 400; letter-spacing: .04em; }
.op-bar-reg { background: var(--lux-gold); color: #fff; letter-spacing: .06em; }

@media (max-width: 1024px) {
  .op-sec { padding: 90px 0; }
  .op-stats li:nth-child(3) { border-left: 0; }
  .op-stats li:nth-child(n+3) { border-top: 1px solid var(--lux-line); }
}
@media (max-width: 768px) {
  .op-sec { padding: 70px 0; }
  .op-deal-list li:nth-child(odd) { border-right: 0; }
  .op-deal-list li { padding: 20px 4px; gap: 18px; }
  .op-deal-list .n { font-size: 24px; }
  .op-form { padding: 24px 16px; }
  .op-fig::after { inset: 8px; }
  .mobile-bar a:nth-child(2) { background: var(--lux-wine); }
}

/* 머리 높이: theme-songam.css 의 :root[data-theme] 가 style.css 의 휴대폰 값(:root)보다 강해
   휴대폰에서도 PC 높이 100px 가 그대로 나왔다. 같은 강도로 다시 적는다. */
@media (max-width: 1024px) {
  :root[data-theme="songam"] { --header-h: 60px; }
}
@media (max-width: 768px) {
  :root[data-theme="songam"] { --header-h: 56px; }
  .logo img { width: 150px; }
}

/* 오른쪽 빠른 메뉴: 빨강 원 → 차콜·골드 */
.q-open { background: var(--lux-ink); border: 1px solid var(--lux-gold); color: var(--lux-gold2); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.q-open b { font-weight: 500; letter-spacing: .04em; }
.q-ico { background: var(--lux-ink); }
.q-video { border-radius: 0; }
.q-video p { background: var(--lux-ink); color: var(--lux-gold2); font-family: var(--font-en); font-weight: 400; font-size: 16px; letter-spacing: .12em; }
.q-video a { border-radius: 0; }
.q-top { background: var(--lux-gold); }
/* 위치 표시 상자는 글자 폭만큼만 */
.op-chip { justify-self: start; width: fit-content; }

/* 휴대폰: 하위 메뉴 탭은 옆으로 넘기지 않고 한 화면 폭에 칸을 나눠 모두 보이게,
   페이지 안 탭은 긴 영문 이름(Promotion Film 등)이 칸 밖으로 나가지 않게 */
@media (max-width: 1024px) {
  .lnb { width: 100%; max-width: none; left: 0; }
  .lnb ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); overflow: visible; }
  .lnb li { min-width: 0; }
  .lnb a { height: 48px; padding: 0 6px; font-size: 13.5px; white-space: normal; word-break: keep-all; background: rgba(27,26,25,.9); border-bottom: 1px solid rgba(255,255,255,.08); }
  .lnb a.on { background: #fff; color: var(--lux-ink); }
}
@media (max-width: 768px) {
  .tabs, .tabs.many { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
  .tabs button, .tabs.many button { min-width: 0; height: auto; min-height: 48px; padding: 8px 6px; font-size: 13.5px; line-height: 1.25; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
}

/* 모집공고·안내문 칸: 글이 두 줄인 칸 때문에 이웃 칸과 높이가 어긋났다 - 칸을 줄 높이만큼 채운다 */
.op-docs li { display: flex; }
.op-docs a { flex: 1; }
/* 휴대폰 아래 줄 자리: 본문 아래에 아이보리 띠가 생기지 않게 바닥글 쪽에서 비운다 */
@media (max-width: 768px) {
  .op { padding-bottom: 0; }
  .site-footer { padding-bottom: 110px; }
}
.vr-box { height: 760px; max-height: 82vh; background: #111; border: 1px solid var(--lux-line); }
.vr-link a { color: var(--lux-gold); text-decoration: none; border-bottom: 1px solid var(--lux-gold); letter-spacing: .04em; }
@media (max-width: 768px) { .vr-box { height: 72vh; } }

/* 갤러리 */
.gal-empty { padding: 80px 20px; text-align: center; color: #8a8278; border: 1px solid var(--lux-line); background: var(--lux-ivory); }
.gal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.gal-item { display: block; width: 100%; padding: 0; border: 0; background: #eee; cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.6); pointer-events: none; }
.gal-cap { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px 0; border-bottom: 1px solid var(--lux-line); padding-bottom: 12px; }
.gal-cap strong { font-family: var(--font-serif); font-weight: 700; color: var(--lux-ink); font-size: 16px; }
.gal-cap span { color: var(--lux-gold); font-family: var(--font-en); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.gal-lb { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(15,14,13,.94); padding: 60px 70px; }
.gal-lb[hidden] { display: none; }
.gal-lb figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.gal-lb img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; }
.gal-lb figcaption { margin-top: 14px; color: var(--lux-gold2); font-size: 15px; }
.gal-lb button { position: absolute; border: 1px solid rgba(220,207,174,.5); background: transparent; color: #fff; cursor: pointer; width: 52px; height: 52px; font-size: 30px; line-height: 1; }
.gal-x { top: 18px; right: 18px; }
.gal-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.gal-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 1024px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .gal-grid { grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .gal-cap { flex-direction: column; gap: 2px; }
  .gal-cap strong { font-size: 14px; }
  .gal-lb { padding: 60px 10px; }
  .gal-prev, .gal-next { top: auto; bottom: 14px; transform: none; }
}

/* 로얄호실 특별분양 홍보물 - 그림 왼쪽, 요약 오른쪽 */
.op-promo { background: var(--lux-ink); color: #d9d2c7; padding: 100px 0; }
.op-promo-in { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 70px; align-items: center; }
.op-promo-fig { position: relative; margin: 0; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.op-promo-fig img { display: block; width: 100%; height: auto; }
.op-promo-fig::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--lux-line); pointer-events: none; }
.op-promo .op-tit { color: #fff; }
.op-promo .op-tit b { color: var(--lux-gold2); }
.op-promo .op-checks li { color: #e6dfd4; }
.op-promo .op-lead { margin: 26px 0 0; color: #b9b1a5; }
.op-promo .op-btn-line { color: #fff; }
@media (max-width: 1024px) {
  .op-promo-in { grid-template-columns: 1fr; gap: 40px; }
  .op-promo-fig { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .op-promo { padding: 56px 0; }
  .op-promo-fig::after { inset: -8px; }
}

.op-promo-fig .op-zoom { top: 12px; bottom: auto; right: 12px; }

/* 바닥글 관리자 링크 - 눈에 덜 띄게 */
.ft-admin { font-family: var(--font-en); font-size: 12px; letter-spacing: .2em; color: rgba(220,207,174,.55); border: 1px solid rgba(220,207,174,.25); padding: 6px 12px; }
.ft-admin:hover { color: var(--lux-gold2); border-color: var(--lux-gold); }

/* 크게 보기 창: 바탕을 거의 가리고, 그림을 누르면 원래 크기로 키워 창 안에서 끌어 본다 */
.op-lightbox, .gal-lb { background: rgba(12,11,10,.97); overscroll-behavior: contain; }
.op-lightbox img, .gal-lb img { cursor: zoom-in; }
.op-lightbox.zoom { display: block; padding: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.op-lightbox.zoom img { max-width: none; width: auto; min-width: 100%; cursor: zoom-out; }
.gal-lb.zoom { display: block; padding: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.gal-lb.zoom figure { max-width: none; max-height: none; }
.gal-lb.zoom img { max-width: none; max-height: none; width: auto; min-width: 100%; cursor: zoom-out; }
.gal-lb.zoom figcaption, .gal-lb.zoom .gal-prev, .gal-lb.zoom .gal-next { display: none; }
.op-lightbox.zoom .op-lb-close, .gal-lb.zoom .gal-x { position: fixed; }
.op-lb-hint { display: none; }

/* 크게 보기 v2: 처음엔 사진 전체가 화면에 맞게, 키우기·끌기는 zoompan.js 가 transform 으로 (창은 스크롤하지 않는다) */
.op-lightbox, .op-lightbox.zoom { display: grid; place-items: center; padding: 56px 12px 24px; overflow: hidden; }
.op-lightbox img, .op-lightbox.zoom img { max-width: 100%; max-height: calc(100vh - 90px); width: auto; min-width: 0; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gal-lb, .gal-lb.zoom { display: flex; padding: 60px 70px; overflow: hidden; }
.gal-lb.zoom figure, .gal-lb figure { max-width: 100%; max-height: 100%; }
.gal-lb.zoom img, .gal-lb img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; min-width: 0; user-select: none; -webkit-user-drag: none; }
.gal-lb.zoom figcaption, .gal-lb.zoom .gal-prev, .gal-lb.zoom .gal-next { display: revert; }
.op-lb-close, .gal-x { z-index: 2; }
@media (max-width: 560px) { .gal-lb, .gal-lb.zoom { padding: 60px 8px; } }

/* 맨 위로 단추 (휴대폰·태블릿) - 테두리가 스크롤만큼 골드로 차오르고 가운데에 % (이큐노바와 같은 방식) */
.hs-backtop { display: none; }
@media (max-width: 1024px) {
  .hs-backtop { position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 96; display: grid; place-items: center; width: 46px; height: 46px; background: var(--lux-ink); border: 1px solid rgba(220,207,174,.25); box-shadow: 0 8px 24px rgba(0,0,0,.25); color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; }
  .hs-backtop.show { opacity: .92; visibility: visible; transform: none; }
  .hs-backtop > * { grid-area: 1 / 1; }
  .hs-backtop svg { width: 46px; height: 46px; }
  .hs-bt-bar { fill: none; stroke: var(--lux-gold2); stroke-width: 2; stroke-dasharray: 168; stroke-dashoffset: 168; transition: stroke-dashoffset .12s linear; }
  .hs-bt-label { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
  .hs-bt-arrow { font-size: 11px; font-weight: 700; color: var(--lux-gold2); }
  .hs-bt-count { font-family: var(--font-en); font-size: 13px; letter-spacing: -.02em; }
}
/* 휴대폰은 아래 고정 줄(전화·등록) 위로 띄운다 */
@media (max-width: 768px) { .hs-backtop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 12px; } }
@media (prefers-reduced-motion: reduce) { .hs-bt-bar { transition: none; } }

/* 페이지 요약 글 (검색엔진이 읽는 본문) - 그림 아래 아이보리 상자 */
.seo-sum { max-width: var(--maxw); margin: 50px auto 0; padding: 34px 38px; background: var(--lux-ivory); border-top: 1px solid var(--lux-gold); color: #4a443e; font-size: 15.5px; line-height: 1.8; word-break: keep-all; }
.seo-sum h2 { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--lux-ink); }
.seo-sum p { margin: 0 0 10px; }
.seo-sum ul, .seo-sum ol { margin: 6px 0 10px; padding-left: 20px; }
.seo-sum li { margin: 4px 0; }
.seo-sum b { color: var(--lux-wine); font-weight: 600; margin-right: 4px; }
.seo-sum a { color: var(--lux-wine); }
@media (max-width: 768px) { .seo-sum { margin-top: 30px; padding: 22px 18px; font-size: 14.5px; } .seo-sum h2 { font-size: 19px; } }

/* 가을 단풍잎 (첫 화면 사진 위, onepage.js) */
.op-hero { position: relative; overflow: hidden; }
.op-leaves { position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.op-leaf { position: absolute; top: -40px; display: block; opacity: .9; animation-name: leafFall, leafSway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.op-leaf svg { display: block; width: 100%; height: 100%; animation: leafSpin 6s linear infinite; }
.op-leaves.paused .op-leaf, .op-leaves.paused .op-leaf svg { animation-play-state: paused; }
@keyframes leafFall { 0% { transform: translate3d(0, -5vh, 0); opacity: 0; } 8% { opacity: .9; } 90% { opacity: .85; } 100% { transform: translate3d(var(--drift, 60px), calc(100vh), 0); opacity: 0; } }
@keyframes leafSway { from { margin-left: -18px; } to { margin-left: 18px; } }
@keyframes leafSpin { from { transform: rotate(0) rotateY(0); } to { transform: rotate(360deg) rotateY(180deg); } }

/* 계절별 모양 (onepage.js 의 계절 효과) */
.fx-spring .op-leaf { opacity: .95; filter: drop-shadow(0 1px 1px rgba(160,60,90,.15)); }
.fx-spring .op-leaf svg { animation-duration: 4s; }
.fx-winter .op-leaf { filter: drop-shadow(0 0 2px rgba(255,255,255,.6)); }
.fx-winter .op-leaf svg { animation-duration: 12s; }
/* 여름 햇살 */
.fx-summer { background: linear-gradient(200deg, rgba(255,214,120,.18), transparent 45%); }
.fx-sun { position: absolute; top: -90px; right: -60px; width: 360px; height: 360px; }
.fx-core { position: absolute; inset: 120px; border-radius: 50%; background: radial-gradient(circle, #fffef4 0 30%, rgba(255,236,160,.9) 45%, rgba(255,210,110,0) 72%); box-shadow: 0 0 80px 40px rgba(255,226,140,.45); animation: sunPulse 5s ease-in-out infinite alternate; }
.fx-rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,240,190,.32) 0 6deg, rgba(255,240,190,0) 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%); mask: radial-gradient(circle, #000 18%, transparent 70%); animation: sunSpin 60s linear infinite; }
.fx-flare { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,220,150,0) 70%); }
.fx-flare.f1 { width: 70px; height: 70px; left: 10px; top: 250px; }
.fx-flare.f2 { width: 34px; height: 34px; left: -60px; top: 330px; opacity: .8; }
.fx-flare.f3 { width: 120px; height: 120px; left: -190px; top: 420px; opacity: .5; }
.fx-spark { position: absolute; bottom: -10px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,230,160,0) 70%); animation: sparkUp linear infinite; }
.op-leaves.paused .fx-core, .op-leaves.paused .fx-rays, .op-leaves.paused .fx-spark { animation-play-state: paused; }
@keyframes sunSpin { to { transform: rotate(360deg); } }
@keyframes sunPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.08); opacity: 1; } }
@keyframes sparkUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-90vh) translateX(30px); opacity: 0; } }
@media (max-width: 768px) { .fx-sun { width: 220px; height: 220px; top: -60px; right: -50px; } .fx-core { inset: 72px; } .fx-flare { display: none; } }
/* 보정: 겨울 눈은 밝은 하늘에서도 보이게 푸른 그림자, 여름 해는 빠른 메뉴에 가리지 않게 왼쪽으로·더 밝게 */
.fx-winter .op-leaf { filter: drop-shadow(0 0 1.5px rgba(70,95,130,.55)) drop-shadow(0 1px 3px rgba(70,95,130,.35)); }
.fx-sun { right: 200px; top: -120px; width: 440px; height: 440px; }
.fx-core { inset: 150px; box-shadow: 0 0 120px 70px rgba(255,220,120,.55); }
.fx-rays { background: repeating-conic-gradient(from 0deg, rgba(255,236,170,.5) 0 5deg, rgba(255,236,170,0) 5deg 15deg); }
.fx-spark { background: radial-gradient(circle, #fff 0 30%, rgba(255,220,120,.9) 45%, rgba(255,220,120,0) 72%); box-shadow: 0 0 8px 2px rgba(255,230,150,.7); }
@media (max-width: 1024px) { .fx-sun { right: -40px; top: -70px; width: 260px; height: 260px; } .fx-core { inset: 86px; box-shadow: 0 0 70px 40px rgba(255,220,120,.5); } }

/* 여름 햇살 v2: 해 동그라미 대신 비스듬한 빛줄기 (위 .fx-sun 은 더 쓰지 않는다) */
.fx-summer { background: linear-gradient(195deg, rgba(255,226,150,.28) 0%, rgba(255,240,200,.08) 35%, transparent 60%); }
.fx-beams { position: absolute; inset: -20% -10% 0 -10%; transform: skewX(-22deg); transform-origin: top; }
.fx-beams span { position: absolute; top: 0; height: 120%; background: linear-gradient(180deg, rgba(255,246,214,.55) 0%, rgba(255,236,180,.22) 45%, rgba(255,236,180,0) 85%); filter: blur(6px); opacity: .2; animation: beamGlow ease-in-out infinite alternate; mix-blend-mode: screen; }
.op-leaves.paused .fx-beams span { animation-play-state: paused; }
@keyframes beamGlow { 0% { opacity: .08; } 50% { opacity: .55; } 100% { opacity: .18; } }
.fx-beams span { background: linear-gradient(180deg, rgba(255,250,225,.85) 0%, rgba(255,238,185,.38) 45%, rgba(255,236,180,0) 85%); filter: blur(4px); }
@keyframes beamGlow { 0% { opacity: .15; } 50% { opacity: .8; } 100% { opacity: .3; } }

/* 여름 햇살 v3: 오른쪽 위 모퉁이에서 스며드는 빛 - 모퉁이 빛무리 + 부채꼴 빛줄기가 천천히 흔들리며 밝아졌다 흐려진다 */
.fx-summer { background: none; }
.fx-glow { position: absolute; top: -35%; right: -25%; width: 75%; height: 95%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,250,228,.95), rgba(255,238,180,.5) 40%, rgba(255,230,160,.12) 70%, transparent 100%); animation: glowPulse 7s ease-in-out infinite alternate; mix-blend-mode: screen; }
.fx-fan { position: absolute; top: 0; right: 0; width: 0; height: 0; transform-origin: 0 0; animation: fanSway 16s ease-in-out infinite alternate; }
.fx-fan span { position: absolute; right: 0; top: 0; width: 150vmax; transform-origin: 100% 50%; background: linear-gradient(to left, rgba(255,250,228,.85) 0%, rgba(255,240,195,.42) 25%, rgba(255,238,190,.12) 55%, transparent 80%); clip-path: polygon(100% 46%, 100% 54%, 0 100%, 0 0); filter: blur(3px); opacity: .5; animation: rayGlow ease-in-out infinite alternate; mix-blend-mode: screen; }
.op-leaves.paused .fx-glow, .op-leaves.paused .fx-fan, .op-leaves.paused .fx-fan span { animation-play-state: paused; }
@keyframes glowPulse { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
@keyframes fanSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes rayGlow { 0% { opacity: .18; } 50% { opacity: .75; } 100% { opacity: .35; } }
@media (max-width: 768px) { .fx-glow { width: 110%; height: 70%; top: -25%; right: -45%; } }
/* 햇살 더 연하게 (주인 요청) */
.fx-glow { opacity: .55; animation-name: glowPulse2; }
.fx-fan span { background: linear-gradient(to left, rgba(255,250,228,.55) 0%, rgba(255,240,195,.25) 25%, rgba(255,238,190,.07) 55%, transparent 80%); }
@keyframes glowPulse2 { from { opacity: .4; transform: scale(1); } to { opacity: .62; transform: scale(1.06); } }
@keyframes rayGlow { 0% { opacity: .1; } 50% { opacity: .45; } 100% { opacity: .2; } }
/* 햇살 출발점: 오른쪽 위 모퉁이 → 위쪽 가운데 (주인 요청). 밝기는 위 '더 연하게' 값 그대로 */
.fx-fan { right: auto; left: 50%; }
.fx-glow { right: auto; left: 12.5%; top: -55%; width: 75%; height: 100%; }
@media (max-width: 768px) { .fx-glow { left: -15%; right: auto; width: 130%; height: 70%; top: -38%; } }
/* 햇살 출발점 30% 위로 (주인 요청) */
.fx-fan { top: -30%; }
.fx-glow { top: -85%; }
@media (max-width: 768px) { .fx-glow { top: -68%; } .fx-fan { top: -20%; } }
/* 햇살 10% 더 위로 (주인 요청) */
.fx-fan { top: -40%; }
.fx-glow { top: -95%; }
@media (max-width: 768px) { .fx-glow { top: -78%; } .fx-fan { top: -30%; } }

/* 눈 v2: 동그란 눈은 납작해지지 않게 회전 없이 부드러운 빛 덩어리로, 결정은 평면 회전만 */
.fx-winter .op-leaf.flake { border-radius: 50%; background: radial-gradient(circle, #fff 0 32%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.35) 62%, rgba(255,255,255,0) 72%); filter: drop-shadow(0 0 2px rgba(80,110,150,.35)); }
.fx-winter .op-leaf.crystal svg { animation: snowSpin 9s linear infinite; }
.fx-winter .op-leaf.crystal { filter: drop-shadow(0 0 1.5px rgba(70,95,130,.6)) drop-shadow(0 0 4px rgba(255,255,255,.7)); }
@keyframes snowSpin { to { transform: rotate(360deg); } }
.fx-winter .op-leaf.flake { filter: none; background: radial-gradient(circle at 42% 40%, #fff 0 28%, rgba(246,250,255,.95) 42%, rgba(200,218,240,.6) 58%, rgba(200,218,240,0) 72%); }

/* 탭 단추: 누른 뒤 글자 커서(|)가 보여 글을 쓸 수 있는 칸처럼 보였다 - 단추 안 글자는 선택·커서 없이 손가락 모양만 */
.op-tabs button, .op-tabs button *, .tabs button, .tabs button *, .op-chips span, .lnb a { cursor: pointer; user-select: none; -webkit-user-select: none; caret-color: transparent; }
.op-tabs button:focus:not(:focus-visible), .tabs button:focus:not(:focus-visible) { outline: none; }
/* 글자 커서는 입력칸에서만 (크롬 '캐럿 탐색'(F7)이 켜져 있으면 아무 데나 눌러도 커서가 생긴다) */
body { caret-color: transparent; }
input, textarea, select, [contenteditable] { caret-color: auto; }

/* 떨어지는 움직임 v2: 잎마다 다른 박자로 좌우로 살랑이며 비스듬히 기울었다 돌아오기 (한꺼번에 뒤집히지 않게) */
.op-leaf svg { animation: leafTumble 4s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes leafTumble {
  0%   { transform: rotate(var(--r0, -20deg)) rotateX(0deg); }
  50%  { transform: rotate(calc((var(--r0, -20deg) + var(--r1, 20deg)) / 2)) rotateX(var(--tilt, 45deg)); }
  100% { transform: rotate(var(--r1, 20deg)) rotateY(calc(var(--tilt, 45deg) / 2)); }
}
.fx-winter .op-leaf.crystal svg { animation: snowSpin 9s linear infinite; }
.fx-spring .op-leaf svg { animation-name: leafTumble; }

/* 민들레 씨앗: 뒤집히지 않고 갓털이 위를 향한 채 살짝 기울며 둥실 (그림자로 밝은 하늘에서도 보이게) */
.fx-spring .op-leaf.dandy { filter: drop-shadow(0 0 1px rgba(90,110,140,.55)) drop-shadow(0 1px 2px rgba(90,110,140,.3)); opacity: .95; }
.fx-spring .op-leaf.dandy svg { animation: dandyBob 5s ease-in-out infinite alternate; transform-origin: 50% 85%; }
@keyframes dandyBob { 0% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } 100% { transform: rotate(14deg) translateY(2px); } }

/* 중외공원 칸(검정) 아래 빈 공간 줄이기 - 지도 그림 아래 단추 줄만 남게 */
#park { padding-bottom: 56px; }
#park .op-wide + .op-wrap .op-more { margin-top: 28px; }
@media (max-width: 768px) { #park { padding-bottom: 28px; } #park .op-wide + .op-wrap .op-more { margin-top: 20px; } }

/* 봄 분홍 반짝임 - 위에서 내려온다 */
.fx-spark.fx-spark-pink { top: -10px; bottom: auto; background: radial-gradient(circle, #fff 0 28%, rgba(255,182,206,.95) 46%, rgba(255,170,200,0) 72%); box-shadow: 0 0 8px 2px rgba(255,170,200,.65); animation-name: sparkDown; }
@keyframes sparkDown { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .95; } 100% { transform: translateY(85vh) translateX(-30px); opacity: 0; } }
.op-leaves.paused .fx-spark-pink { animation-play-state: paused; }

/* 로고 옆 사계절 단추 */
.hs-seasons { display: flex; gap: 6px; margin-left: 22px; }
.hs-season { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #e3dccf; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.hs-season svg { width: 20px; height: 20px; }
.hs-season:hover { transform: translateY(-1px); border-color: var(--lux-gold); }
.hs-spring svg { fill: #f2a7bd; stroke: none; }
.hs-summer svg { fill: #f2b52c; stroke: #f2b52c; }
.hs-autumn svg { fill: #e8901c; stroke: #fff5e6; }
.hs-winter svg { stroke: #7fa7d6; }
.hs-season.on { border-color: var(--lux-ink); background: var(--lux-ink); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.hs-season.on svg { filter: drop-shadow(0 0 3px rgba(255,255,255,.35)); }
.hs-winter.on svg { stroke: #cfe2f7; }
@media (max-width: 1024px) {
  .hs-seasons { margin-left: 10px; gap: 4px; }
  .hs-season { width: 28px; height: 28px; }
  .hs-season svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) { .hs-season { width: 25px; height: 25px; } .hs-season svg { width: 14px; height: 14px; } .hs-seasons { margin-left: 6px; gap: 3px; } }

/* 자주 묻는 질문 */
.op-faq { margin-top: 30px; border-top: 1px solid var(--lux-ink); }
.op-faq details { border-bottom: 1px solid var(--lux-line); background: transparent; }
.op-faq summary { list-style: none; cursor: pointer; padding: 22px 46px 22px 4px; position: relative; font-size: 17px; font-weight: 600; color: var(--lux-ink); word-break: keep-all; }
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq summary::before { content: "Q"; font-family: var(--font-en); color: var(--lux-gold); margin-right: 12px; font-weight: 400; }
.op-faq summary::after { content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--lux-gold); font-weight: 300; transition: transform .2s; }
.op-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.op-faq details p { margin: 0; padding: 0 8px 24px 32px; color: #5a534b; line-height: 1.8; font-size: 15.5px; word-break: keep-all; }
.op-faq a { color: var(--lux-wine); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) { .op-faq summary { font-size: 15.5px; padding: 18px 40px 18px 2px; } .op-faq details p { padding: 0 4px 20px 24px; font-size: 14.5px; } }

/* ---------- 하위 페이지 부품 ---------- */
.sub-content > img, .sub-content > picture, .panel > img, .panel > picture { display: block; margin: 0 auto 28px; max-width: 100%; height: auto; }
.sub-content picture img { display: block; width: 100%; height: auto; }
.info-table { width: 100%; margin: 34px 0 10px; border-collapse: collapse; border-top: 2px solid var(--lux-ink); font-size: 16px; }
.info-table th, .info-table td { padding: 17px 20px; border-bottom: 1px solid #e6e0d6; text-align: left; vertical-align: top; }
.info-table th { width: 190px; background: var(--lux-ivory); color: var(--lux-ink); font-weight: 600; }
.info-table td { color: #4a443e; }
.zoom-fig { position: relative; margin: 0 0 28px; }
.zoom-link { position: absolute; right: 14px; bottom: 14px; padding: 9px 16px; background: rgba(28,26,25,.75); color: #fff; font-size: 13px; letter-spacing: .02em; }
.zoom-link:hover { background: var(--lux-wine); }
.doc-list { list-style: none; margin: 10px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--lux-line); border-left: 1px solid var(--lux-line); }
.doc-list a { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; border-right: 1px solid var(--lux-line); border-bottom: 1px solid var(--lux-line); font-family: var(--font-serif); font-size: 20px; color: var(--lux-ink); background: #fff; transition: background .2s; }
.doc-list a:hover { background: var(--lux-ivory); }
.doc-list b { font-family: var(--font-en); font-weight: 400; font-size: 13px; letter-spacing: .25em; color: var(--lux-gold); }
.doc-list span { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); padding: 6px 12px; border: 1px solid var(--lux-gold); font-family: var(--font-en); font-size: 12px; letter-spacing: .15em; color: var(--lux-wine); }
.addr-list { list-style: none; margin: 10px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--lux-line); }
.addr-list li { padding: 40px 32px; background: #fff; }
.addr-list li + li { border-left: 1px solid var(--lux-line); }
.addr-list .k { font-family: var(--font-en); font-size: 12px; letter-spacing: .3em; color: var(--lux-gold); margin: 0 0 10px; }
.addr-list h2 { font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--lux-ink); margin: 0 0 16px; }
.addr-list p { color: #4a443e; line-height: 1.7; margin: 0; }
.addr-list small { color: #8a8278; }
.addr-list .btns { display: flex; gap: 8px; margin-top: 22px; }
.addr-list .btns a { flex: 1; padding: 11px 0; text-align: center; border: 1px solid var(--lux-gold); font-size: 14px; color: var(--lux-ink); }
.addr-list .btns a:hover { background: var(--lux-wine); border-color: var(--lux-wine); color: #fff; }
.tabs button span { font-size: .78em; opacity: .75; margin-left: 2px; }
@media (max-width: 768px) {
  .info-table { font-size: 14px; }
  .info-table th { width: 96px; padding: 13px 10px; }
  .info-table td { padding: 13px 12px; }
  .doc-list { grid-template-columns: 1fr; }
  .doc-list a { font-size: 17px; padding: 24px 20px; }
  .addr-list { grid-template-columns: 1fr; }
  .addr-list li + li { border-left: 0; border-top: 1px solid var(--lux-line); }
  .addr-list li { padding: 28px 22px; }
}

/* ---------- 첫 화면 부품 ---------- */
.op-vision { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(220,207,174,.22); border: 1px solid rgba(220,207,174,.22); }
.op-vision li { padding: 36px 28px; background: var(--lux-ink); }
.op-vision .k { display: block; font-size: 12px; letter-spacing: .14em; color: var(--lux-gold2); }
.op-vision h3 { margin: 14px 0 12px; font-family: var(--font-serif); font-size: 20px; line-height: 1.45; color: #fff; word-break: keep-all; }
.op-vision p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #b9b1a5; word-break: keep-all; }
.op-cards-img li { padding: 0 0 28px; overflow: hidden; }
.op-cards-img li img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 22px; transition: transform .8s ease; }
.op-cards-img li:hover img { transform: scale(1.04); }
.op-cards-img .k, .op-cards-img h3, .op-cards-img p { padding: 0 24px; }
.op-cards-img h3 { margin: 10px 0 6px; }
@media (max-width: 1024px) { .op-vision { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .op-vision { grid-template-columns: 1fr; }
  .op-vision li { padding: 28px 22px; }
  .op-cards-img { grid-template-columns: repeat(2, 1fr); }
  .op-cards-img li { padding-bottom: 20px; }
  .op-cards-img .k, .op-cards-img h3, .op-cards-img p { padding: 0 14px; }
  .op-cards-img .k { font-size: 10px; letter-spacing: .06em; }
  .op-cards-img h3 { font-size: 17px; }
  .op-cards-img p { font-size: 13px; }
}

/* ---------- 첫 화면 팝업 (그림 2장, 휴대폰은 옆으로 넘김) ---------- */
.popup-multi { width: auto; max-width: calc(100vw - 32px); background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.popup-imgs { display: flex; gap: 1px; background: #fff; }
.popup-imgs figure { margin: 0; width: 360px; flex: none; display: flex; flex-direction: column; }
.popup-imgs img { display: block; width: 100%; height: auto; }
.popup-tel { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: #d0102c; color: #ece6d6; font-size: 15px; letter-spacing: .02em; }
.popup-tel span { font-family: var(--font-en); font-size: 19px; color: #fff; }
.popup-swipe { display: none; }
.popup-foot { background: var(--lux-ink); color: #ddd5c8; padding: 10px 14px; }
.popup-foot button { color: #fff; }
@media (max-width: 768px) {
  .popup-imgs { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .popup-imgs::-webkit-scrollbar { display: none; }
  .popup-imgs figure { width: min(320px, calc(100vw - 32px)); scroll-snap-align: start; }
  .popup-multi { width: min(320px, calc(100vw - 32px)); }
  .popup-swipe { display: block; margin: 0; padding: 7px 0; text-align: center; font-size: 12px; color: #8a8278; background: #f7f3ec; }
}

/* 페이지 아래 전체 메뉴 글 줄 (스크립트 없이도 모든 페이지로 건너가게) */
.seo-links { max-width: var(--maxw); margin: 0 auto; padding: 34px 20px 40px; border-top: 1px solid #ece6dc; font-size: 13px; line-height: 1.9; color: #8a8278; }
.seo-links p { margin: 0; }
.seo-links b { display: inline-block; min-width: 64px; color: var(--lux-ink); font-weight: 600; }
.seo-links a { color: #6d665e; }
.seo-links a:hover { color: var(--lux-wine); }
@media (max-width: 768px) { .seo-links { padding: 26px 16px 30px; font-size: 12.5px; } .seo-links b { display: block; } }

/* ---------- 첫 화면 사진 위 문구 (하늘 쪽 왼편) ---------- */
.op-hero-copy { position: absolute; z-index: 3; top: 4.6vw; left: max(24px, calc((100vw - 1200px) / 2)); max-width: 46vw; pointer-events: none; }
.op-hero-copy p { margin: 0; word-break: keep-all; }
.hc-chip { display: inline-block; padding: 9px 18px; background: var(--lux-ink); color: var(--lux-gold2); font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .08em; }
.hc-tit { margin-top: 18px !important; font-family: var(--font-serif); font-weight: 800; font-size: clamp(30px, 4.1vw, 68px); line-height: 1.18; letter-spacing: -.035em; color: var(--lux-ink); text-shadow: 0 2px 24px rgba(255,255,255,.75), 0 0 2px rgba(255,255,255,.9); }
.hc-tit::first-line { color: var(--lux-wine); }
.hc-sub { display: inline-block; margin-top: 18px !important; padding: 10px 16px; background: rgba(255,255,255,.82); border-left: 3px solid var(--lux-wine); color: var(--lux-ink); font-size: clamp(14px, 1.25vw, 20px); font-weight: 700; letter-spacing: -.01em; box-shadow: 0 6px 22px rgba(0,0,0,.08); }
@media (max-width: 768px) {
  .op-hero-copy { top: 8vw; left: 16px; right: 16px; max-width: none; }
  .hc-chip { font-size: 12.5px; padding: 7px 12px; }
  .hc-tit { margin-top: 12px !important; font-size: clamp(28px, 8.4vw, 40px); }
  .hc-sub { margin-top: 12px !important; font-size: 14px; padding: 8px 12px; }
}

/* 오시는길 2칸 · 약도 2장 */
.addr-list.addr-2 { grid-template-columns: repeat(2, 1fr); }
.map-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 0 30px; }
.map-pair img { width: 100%; height: auto; border: 1px solid var(--lux-line); }
/* 팝업이 여러 장이면 PC 에서도 폭에 맞춰 줄이고, 넘치면 옆으로 넘긴다 */
.popup-imgs { overflow-x: auto; scrollbar-width: thin; }
.popup-imgs figure { flex: 0 1 360px; min-width: 230px; }
@media (max-width: 768px) { .addr-list.addr-2, .map-pair { grid-template-columns: 1fr; } .popup-imgs figure { flex: none; min-width: 0; } }
/* Key Point 6 카드: 3칸 */
.op-cards-6 { grid-template-columns: repeat(3, 1fr); }
.op-cards-6 li img { aspect-ratio: 13 / 8; }
@media (max-width: 768px) { .op-cards-6 { grid-template-columns: repeat(2, 1fr); } }

/* 아래 줄 관심고객등록 · TOP 버튼: 사이트 테마색 (주인 요청 10-02) */
.op-bar-reg { background: var(--lux-wine); color: #fff; transition: filter .2s; }
.op-bar-reg:hover { filter: brightness(1.12); }
.q-top { background: var(--lux-wine); color: #fff; }
.q-top:hover { filter: brightness(1.12); }
@media (max-width: 1024px) { .hs-backtop { background: var(--lux-wine); border-color: rgba(255,255,255,.18); } }


/* 송암: 평면 + 확장 품목 나란히, 프리미엄 6 카드 */
.unit-pair { display: grid; grid-template-columns: 760fr 1100fr; gap: 24px; align-items: start; margin-bottom: 24px; }
.unit-pair img { width: 100%; height: auto; margin: 0 !important; }
.prem-list { list-style: none; margin: 10px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lux-line); border: 1px solid var(--lux-line); }
.prem-list li { background: #fff; padding: 0 0 30px; }
.prem-list img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 22px; }
.prem-list .k, .prem-list h2, .prem-list p { padding: 0 24px; }
.prem-list .k { display: block; font-family: var(--font-en); font-size: 12px; letter-spacing: .25em; color: var(--lux-gold); }
.prem-list h2 { margin: 10px 0 8px; font-family: var(--font-serif); font-size: 22px; color: var(--lux-ink); }
.prem-list p { margin: 0; color: #5d6660; line-height: 1.7; word-break: keep-all; }
@media (max-width: 768px) { .unit-pair { grid-template-columns: 1fr; } .prem-list { grid-template-columns: 1fr; } }

/* 하위 메뉴가 짧아 드롭다운 흰 배경을 줄인다 */
@media (min-width: 1025px) { .site-header:has(.gnb:hover) .gnb-bg { height: 220px; } }

/* 첫 화면 갤러리 */
.op-gal { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.op-gal button { display: block; width: 100%; padding: 0; border: 0; background: #eee; cursor: zoom-in; overflow: hidden; }
.op-gal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.op-gal button:hover img { transform: scale(1.04); }
.op-gal p { margin: 12px 0 0; font-family: var(--font-serif); font-size: 17px; color: var(--lux-ink); word-break: keep-all; }
@media (max-width: 768px) { .op-gal { grid-template-columns: repeat(2, 1fr); gap: 10px; } .op-gal p { font-size: 14px; margin-top: 8px; } }

/* 휴대폰 아래 줄: 칸마다 테마색 농도를 달리해 살짝 구분 (관심고객등록이 가장 진함) */
@media (max-width: 1024px) {
  .mobile-bar a:nth-child(1) { background: color-mix(in srgb, var(--lux-wine) 18%, var(--lux-ink)); }
  .mobile-bar a:nth-child(2) { background: var(--lux-wine); filter: saturate(1.15) brightness(1.08); }
  .mobile-bar a:nth-child(3) { background: color-mix(in srgb, var(--lux-wine) 32%, var(--lux-ink)); }
  .mobile-bar a:nth-child(4) { background: color-mix(in srgb, var(--lux-wine) 46%, var(--lux-ink)); }
}

/* 휴대폰 아래 줄 단계 더 또렷하게 */
@media (max-width: 1024px) {
  .mobile-bar a:nth-child(1) { background: color-mix(in srgb, var(--lux-wine) 10%, var(--lux-ink)); }
  .mobile-bar a:nth-child(3) { background: color-mix(in srgb, var(--lux-wine) 40%, var(--lux-ink)); }
  .mobile-bar a:nth-child(4) { background: color-mix(in srgb, var(--lux-wine) 65%, var(--lux-ink)); }
}

/* PC 메인 사진 높이를 다섯 사이트 같게 */
@media (min-width: 769px) { .op-hero-bg img { aspect-ratio: 1920 / 820; object-fit: cover; object-position: 50% 38%; } }

/* 아래 줄: 단계 색 대신 한 색으로 통일 (관심고객등록만 테마색) */
@media (max-width: 1024px) { .mobile-bar a:nth-child(1), .mobile-bar a:nth-child(3), .mobile-bar a:nth-child(4) { background: var(--lux-ink); } .mobile-bar a:nth-child(2) { filter: none; } }

/* 휴대폰 첫 화면: 힐스테이트처럼 가운데 정렬 + 하늘 부분에 분양 안내 상자 (PC 에서는 숨김) */
.hc-notice { display: none; }
@media (max-width: 768px) {
  .op-hero-bg img { aspect-ratio: auto !important; object-position: 50% 100%; }
  .op-hero-copy { top: 7vw; left: 16px !important; right: 16px !important; text-align: center !important; }
  .hc-tit { font-size: clamp(30px, 8.6vw, 42px); }
  .op-hero-copy .hc-sub { border-left: 0 !important; border-right: 0 !important; border-bottom: 2px solid var(--lux-wine); }
  .hc-notice { display: block; width: min(88%, 360px); margin: 22px auto 0; text-align: center; }
  .hn-main { padding: 16px 14px 12px; background: var(--lux-wine); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
  .hn-main p { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.45; }
  .hn-main b, .hn-sub b { color: #ffd76a; }
  .hn-main hr { width: 82%; margin: 8px auto; border: 0; border-top: 1px solid rgba(255,255,255,.45); }
  .hn-main small, .hn-sub small { display: block; margin-top: 4px; font-size: 11px; opacity: .8; }
  .hn-sub { margin-top: 8px; padding: 13px 12px 10px; background: #efe1c0; color: var(--lux-ink); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
  .hn-sub p { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
  .hn-sub b { color: var(--lux-wine); }
  .hn-note { margin: 10px 0 0 !important; font-size: 10.5px; color: rgba(30,30,30,.72); line-height: 1.5; word-break: keep-all; }
}

/* 휴대폰 첫 화면 높이를 힐스테이트(720×1185)와 같게, 글·안내 상자는 조금 작게 */
@media (max-width: 768px) {
  .op-hero-bg img { aspect-ratio: 720 / 1185 !important; object-fit: cover; object-position: 50% 100%; }
  .op-hero-copy { top: 5vw; box-sizing: border-box; width: auto; max-width: none !important; }
  .hc-chip { font-size: 11.5px; padding: 6px 10px; }
  .hc-tit { margin-top: 10px !important; font-size: clamp(26px, 7.4vw, 36px) !important; }
  .op-hero-copy .hc-sub { margin-top: 10px !important; font-size: 12.5px; padding: 7px 10px; }
  .hc-notice { margin-top: 14px; width: min(84%, 330px); }
  .hn-main { padding: 12px 10px 9px; } .hn-main p { font-size: 16px; } .hn-main hr { margin: 6px auto; }
  .hn-sub { padding: 10px 10px 8px; margin-top: 6px; } .hn-sub p { font-size: 15px; }
  .hn-main small, .hn-sub small { font-size: 10px; }
  .hn-note { font-size: 9.5px; margin-top: 7px !important; }
}

/* 아래 줄: 힐스테이트처럼 바닥글보다 살짝 밝게 해서 구분 */
@media (max-width: 1024px) { .mobile-bar { background: color-mix(in srgb, var(--lux-ink) 88%, #fff); } .mobile-bar a:nth-child(1), .mobile-bar a:nth-child(3), .mobile-bar a:nth-child(4) { background: transparent; } }

/* 떨어지는 낙엽·눈·꽃잎을 사진 위 문구·안내 상자보다 위로 */
.op-leaves { z-index: 5; }

/* 하위 페이지 제목 위 작은 단지 이름 — 검색엔진은 "단지명 + 페이지명" 한 제목으로 읽는다 */
.page-title h1 .pt-brand { display: block; margin-bottom: 10px; font-family: var(--font-sans, inherit); font-size: max(14px, .36em); font-weight: 500; letter-spacing: .02em; color: var(--c-ink); opacity: .55; }

/* ===== LUXE v2 START — 고급 마감 (이 구간만 지우면 이전 모습) ===== */
/* 머리: 반투명 유리 + 얇은 금선 */
.site-header { background: transparent; }
/* 흐림은 뒤 층에만 — 머리 자체에 걸면 안의 고정 메뉴 창이 머리 높이에 갇힌다 */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); pointer-events: none; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--lux-gold) 50%, transparent); opacity: .55; pointer-events: none; }

/* 첫 화면 사진: 아주 천천히 다가오는 움직임 + 아래쪽 은은한 그늘 */
.op-hero-bg { display: block; position: relative; overflow: hidden; }
.op-hero-bg img { animation: luxKen 14s cubic-bezier(.2,.6,.2,1) both; transform-origin: 50% 60%; }
.op-hero-bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(180deg, transparent, rgba(10,8,6,.28)); pointer-events: none; }
@keyframes luxKen { from { transform: scale(1.07); } to { transform: scale(1); } }

/* 어두운 띠: 금빛이 번지는 조명 */
.op-hero-panel, .op-dark { position: relative; background-image: radial-gradient(1200px 380px at 85% -10%, color-mix(in srgb, var(--lux-gold) 16%, transparent), transparent 70%), radial-gradient(900px 300px at 0% 110%, color-mix(in srgb, var(--lux-wine) 22%, transparent), transparent 70%); }
.op-hero-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lux-gold2) 50%, transparent); opacity: .6; }

/* 구역 제목: 아래 짧은 금선, 글자 숨 */
.op-tit { letter-spacing: -.035em; }
.op-sec .op-tit::after { content: ""; display: block; width: 46px; height: 1px; margin-top: 22px; background: var(--lux-gold); }
.op-reg .op-tit::after { margin-left: auto; margin-right: auto; }
.op-en { font-size: 12px; letter-spacing: .42em; }

/* 숫자: 금빛 그라데이션 세리프 */
.op-stats b { background: linear-gradient(180deg, var(--lux-ink) 0%, color-mix(in srgb, var(--lux-gold) 70%, var(--lux-ink)) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-deal-list .n { font-style: italic; }

/* 카드: 올리면 위 금선이 자라고 살짝 떠오름 */
.op-cards li, .op-vision li { position: relative; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, background .3s; }
.op-cards li::before, .op-vision li::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--lux-gold), var(--lux-gold2)); transition: width .55s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .op-cards li:hover, .op-vision li:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(30,20,5,.35); }
  .op-cards li:hover::before, .op-vision li:hover::before { width: 100%; }
  .op-deal-list li { transition: background .3s; }
  .op-deal-list li:hover { background: color-mix(in srgb, var(--lux-gold) 6%, transparent); }
}

/* 사진: 올리면 천천히 확대 */
.op-fig, .op-wide { overflow: hidden; }
.op-fig img, .op-wide img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .op-fig:hover img, .op-wide:hover img { transform: scale(1.035); } }

/* 단추: 빛이 한 번 스쳐 지나감 */
.op-btn { position: relative; overflow: hidden; isolation: isolate; }
.op-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s ease; z-index: -1; pointer-events: none; }
@media (hover: hover) { .op-btn:hover::after { left: 130%; } }
.op-btn-red { box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--lux-wine) 80%, transparent); }

/* 등록 상자: 안쪽 금선 한 줄 더 */
.op-form { position: relative; background: #fff; }
.op-form::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--lux-gold) 35%, transparent); pointer-events: none; }

/* 갤러리 */
.op-gal li { overflow: hidden; }
.op-gal img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
@media (hover: hover) { .op-gal li:hover img { transform: scale(1.05); filter: brightness(1.04); } }

/* 바닥글 금선 */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lux-gold) 50%, transparent); opacity: .7; }

/* 하위 페이지 제목 아래 금빛 다이아몬드 */
.page-title .bar { position: relative; }
.page-title .bar::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -4px; transform: rotate(45deg); border: 1px solid var(--lux-gold); background: var(--lux-paper, #fff); }

/* 고르기·스크롤바 */
::selection { background: color-mix(in srgb, var(--lux-gold) 45%, #fff); color: var(--lux-ink); }
@media (min-width: 1025px) { html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--lux-gold) 70%, #fff) transparent; } }

@media (prefers-reduced-motion: reduce) { .op-hero-bg img { animation: none; } .op-fig img, .op-wide img, .op-gal img, .op-cards li, .op-vision li { transition: none; } }
/* ===== LUXE v2 END ===== */

/* ===== LUXE v3 START — 움직임의 결·질감 (이 구간만 지우면 v2 모습) ===== */
/* 나타나기: 흐릿했다가 또렷하게, 목록은 하나씩 차례로 */
[data-reveal] { transform: translateY(34px); filter: blur(6px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].revealed { filter: none; }
li[data-reveal]:nth-child(2) { transition-delay: .08s; } li[data-reveal]:nth-child(3) { transition-delay: .16s; }
li[data-reveal]:nth-child(4) { transition-delay: .24s; } li[data-reveal]:nth-child(5) { transition-delay: .32s; }
li[data-reveal]:nth-child(6) { transition-delay: .4s; } li[data-reveal]:nth-child(7) { transition-delay: .48s; }
li[data-reveal]:nth-child(n+8) { transition-delay: .56s; }

/* 첫 화면 문구: 차례로 떠오름 */
.op-hero-copy > * { animation: luxRise 1.2s cubic-bezier(.2,.7,.2,1) both; }
.op-hero-copy > :nth-child(1) { animation-delay: .35s; } .op-hero-copy > :nth-child(2) { animation-delay: .55s; }
.op-hero-copy > :nth-child(3) { animation-delay: .75s; } .op-hero-copy > :nth-child(4) { animation-delay: .95s; }
.op-hero-panel .op-wrap > * { animation: luxRise 1s cubic-bezier(.2,.7,.2,1) both; }
.op-hero-panel .op-wrap > :nth-child(2) { animation-delay: .12s; } .op-hero-panel .op-wrap > :nth-child(3) { animation-delay: .24s; }
.op-hero-panel .op-wrap > :nth-child(n+4) { animation-delay: .36s; }
@keyframes luxRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 읽은 만큼 위에 금빛 줄 (지원하는 브라우저만) */
@supports (animation-timeline: scroll()) {
  body::after { content: ""; position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 3px; background: linear-gradient(90deg, var(--lux-wine) 0 82%, var(--lux-gold)); transform-origin: 0 50%; transform: scaleX(0); animation: luxProgress linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes luxProgress { to { transform: scaleX(1); } }
}

/* 어두운 구역: 고운 종이 질감 */
.op-dark::after, .op-hero-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.op-hero-panel { position: relative; }

/* 사진 액자: 네 모서리 금빛 꺾쇠 */
.op-fig::before { content: ""; position: absolute; inset: 6px; z-index: 2; pointer-events: none; opacity: .9;
  background:
    linear-gradient(var(--lux-gold2), var(--lux-gold2)) 0 0 / 26px 1px no-repeat, linear-gradient(var(--lux-gold2), var(--lux-gold2)) 0 0 / 1px 26px no-repeat,
    linear-gradient(var(--lux-gold2), var(--lux-gold2)) 100% 0 / 26px 1px no-repeat, linear-gradient(var(--lux-gold2), var(--lux-gold2)) 100% 0 / 1px 26px no-repeat,
    linear-gradient(var(--lux-gold2), var(--lux-gold2)) 0 100% / 26px 1px no-repeat, linear-gradient(var(--lux-gold2), var(--lux-gold2)) 0 100% / 1px 26px no-repeat,
    linear-gradient(var(--lux-gold2), var(--lux-gold2)) 100% 100% / 26px 1px no-repeat, linear-gradient(var(--lux-gold2), var(--lux-gold2)) 100% 100% / 1px 26px no-repeat; }

/* 제목 강조 글씨: 밑에 옅은 금빛 붓질 */
.op-sec:not(.op-dark):not(.op-final) .op-tit b { background: linear-gradient(transparent 68%, color-mix(in srgb, var(--lux-gold) 22%, transparent) 68%, color-mix(in srgb, var(--lux-gold) 22%, transparent) 92%, transparent 92%); padding: 0 .08em; }

/* 탭: 고른 칸 아래 금선 */
.op-tabs button, .tabs button { position: relative; transition: background .3s, color .3s, border-color .3s; }
.op-tabs button.on::after, .tabs button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 1px; background: var(--lux-gold2); }

/* 자주 묻는 질문: 펼친 칸은 아이보리, 올리면 테마색 */
.op-faq details { transition: background .35s; }
.op-faq details[open] { background: color-mix(in srgb, var(--lux-ivory) 70%, transparent); }
.op-faq details[open] p { animation: luxRise .5s cubic-bezier(.2,.7,.2,1) both; }
@media (hover: hover) { .op-faq summary { transition: color .25s; } .op-faq summary:hover { color: var(--lux-wine); } }

/* 갤러리 이름 앞 금빛 마름모 */
.op-gal p::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 3px 1px; transform: rotate(45deg); background: var(--lux-gold); vertical-align: middle; }

/* 휴대폰 아래 줄: 위에 금선 */
@media (max-width: 1024px) {
  .mobile-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lux-gold) 50%, transparent); opacity: .8; pointer-events: none; z-index: 1; }
}

/* 첫 화면 단지 이름: 금빛 글씨 사이 넓게 */
.op-hero-brand { letter-spacing: .2em; }
.op-chip { position: relative; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { filter: none; transition: none; }
  .op-hero-copy > *, .op-hero-panel .op-wrap > *, .op-faq details[open] p { animation: none; }
  body::after { display: none; }
}
/* ===== LUXE v3 END ===== */

/* tel-ko-font: '분양문의' 같은 한글은 영문 서체(Marcellus)에 글자가 없어 아무 바탕체로 대신 나왔다 — 한글만 본문 고딕으로 */
.op-bar-tel small, .ft-tel small, .popup-tel, .hd-tel small { font-family: var(--font-sans); font-weight: 600; letter-spacing: .06em; }
.op-bar-tel span, .ft-tel { font-variant-numeric: lining-nums; }

/* op-bar-tel-tone: PC 아래 상담바 — 연락처 칸을 한 톤 밝게 해 등록 칸과 구분 (호반은 이미 구분돼 제외) */
.op-bar-tel { background: color-mix(in oklch, color-mix(in oklch, var(--lux-ink) 50%, var(--lux-wine)) 84%, #fff); }  /* 테마색을 섞어 채도를 살짝 올림 */
.op-bar-tel:hover { background: color-mix(in oklch, color-mix(in oklch, var(--lux-ink) 50%, var(--lux-wine)) 76%, #fff); }
/* mobile-bar-tone: 휴대폰 아래 줄도 PC 상담바 연락처 칸과 같은 색(테마색 섞어 채도 살짝) — 등록 칸만 진한 색 */
@media (max-width: 1024px) {
  .mobile-bar { background: color-mix(in oklch, color-mix(in oklch, var(--lux-ink) 50%, var(--lux-wine)) 84%, #fff); }
  .mobile-bar a:nth-child(1), .mobile-bar a:nth-child(3), .mobile-bar a:nth-child(4) { background: transparent; }
}
/* op-bar-clear: 맨 아래까지 내리면 떠 있는 상담바(높이 62px + 아래 18px)가 바닥글 글씨를 덮었다 — 그만큼 비워 둔다 */
@media (min-width: 769px) { .op-body .site-footer { padding-bottom: 124px; } }

/* ===== LUXE v4 START — 세부 다듬기 PC·휴대폰 (이 구간만 지우면 v3 모습) ===== */
:root { --lux-gold-text: color-mix(in srgb, var(--lux-gold) 70%, var(--lux-ink)); }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }

/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 글자만 남지 않게 */
.op-tit, .op-lead, .hc-tit, .op-hero-tit, .page-title h1, .op-faq summary, .op-vision h3, .op-cards h3 { text-wrap: balance; }
.op p, .op li, .seo-sum p, .seo-sum li, .op-faq details p { text-wrap: pretty; }

/* 밝은 바탕의 작은 금색 글씨는 흐렸다 — 한 톤 진하게 (어두운 구역은 그대로) */
.op-sec:not(.op-dark):not(.op-final) .op-en, .op-sec:not(.op-dark) .op-deal-list .n, .op-sec:not(.op-dark) .op-table th { color: var(--lux-gold-text); }
.op-sec:not(.op-dark) .op-en::before { border-color: var(--lux-gold-text); }

/* 분양 포인트: 번호 폭이 달라 글 시작선이 어긋나던 것 */
.op-deal-list .n { min-width: 2.3em; text-align: left; font-variant-numeric: lining-nums; }
.op-deal-list small, .op-stats span { font-size: 13.5px; line-height: 1.55; }

/* 개요 표: 줄에 올리면 옅게, 제목 칸 굵기 */
.op-table th { font-weight: 600; }
.op-table tr { transition: background .25s; }
@media (hover: hover) { .op-table tr:hover { background: color-mix(in srgb, var(--lux-gold) 6%, transparent); } }
.op-stats b { font-variant-numeric: lining-nums; }

/* '자세히' 단추: 조금 크게, 올리면 테마색으로 채움 */
.op-more a { height: 48px; padding: 0 22px; transition: background .3s, color .3s, border-color .3s; }
.op-more a::after { transition: transform .3s; }
@media (hover: hover) { .op-more a:hover { background: var(--lux-wine); border-color: var(--lux-wine); color: #fff; } .op-more a:hover::after { color: #fff; transform: translateX(3px); } .op-dark .op-more a:hover { background: var(--lux-gold2); border-color: var(--lux-gold2); color: var(--lux-ink); } .op-dark .op-more a:hover::after { color: var(--lux-ink); } }

/* 키보드로 다닐 때 보이는 테두리 */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 3px; }

/* 입력칸: 고르면 테마 금선 */
.op-form input:not([type=checkbox]):not([type=radio]), .op-form textarea, .op-form select { transition: border-color .25s, box-shadow .25s; }
.op-form input:not([type=checkbox]):not([type=radio]):focus, .op-form textarea:focus, .op-form select:focus { border-color: var(--lux-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-gold) 18%, transparent); outline: none; }

@media (max-width: 768px) {
  .op-sec { padding: 76px 0; }
  .op-tit { font-size: clamp(23px, 6.6vw, 27px); line-height: 1.4; letter-spacing: -.04em; }
  .op-sec .op-tit::after { margin-top: 16px; width: 36px; }
  .op-en { font-size: 11px; letter-spacing: .34em; }
  .op-lead { font-size: 15px; line-height: 1.7; }
  .op-deal-list li { padding: 20px 6px; gap: 16px; }
  .op-deal-list .n { font-size: 24px; min-width: 2.1em; }
  .op-deal-list p { font-size: 16.5px; }
  .op-more { gap: 8px; }
  .op-more a { height: 44px; padding: 0 16px; font-size: 13.5px; }
  .op-table th { width: 30%; padding-left: 4px; font-size: 13.5px; }
  .op-table td { font-size: 14px; line-height: 1.6; }
  .op-faq summary { line-height: 1.5; }
  .op-fig::before { inset: 4px; background-size: 18px 1px, 1px 18px, 18px 1px, 1px 18px, 18px 1px, 1px 18px, 18px 1px, 1px 18px; }
}
/* ===== LUXE v4 END ===== */
/* mobile-bar-same-hue (10-03 주인): 휴대폰 아래 줄 — 전화상담·홍보영상(갤러리)·오시는길 칸은 관심고객등록 칸과 같은 색에서 채도만 살짝 낮춘다 */
@media (max-width: 1024px) {
  :root { --mb-reg: var(--lux-wine); }
  .mobile-bar a:nth-child(2) { background: var(--mb-reg); }
  @supports (color: oklch(from red l c h)) { .mobile-bar { background: oklch(from var(--mb-reg) calc(l * .9) calc(c * .58) h); } }
}
/* op-bar-same-hue (10-03 주인): PC 아래 상담바도 휴대폰과 같은 방식 — 연락처 칸은 등록 칸 색에서 채도만 살짝 낮춤, 글씨는 보통 굵기 */
.op-bar a, .op-bar a small, .op-bar a span { font-weight: 400; }
@supports (color: oklch(from red l c h)) {
  .op-bar-tel { background: oklch(from var(--lux-wine) calc(l + (.5 - l) * .3) calc(c * .58) h); }  /* 밝기는 중간 쪽으로 — 어두운 테마색(네이비·브라운)에서도 구분되게 */
  .op-bar-tel:hover { background: oklch(from var(--lux-wine) calc(l + (.5 - l) * .45) calc(c * .7) h); }
}
/* 10-03 주인 "SK 더 진하게": 송암 아래 줄(휴대폰)·상담바(PC)의 나머지 칸을 더 짙은 SK 레드 계열로 */
@supports (color: oklch(from red l c h)) {
  @media (max-width: 1024px) { .mobile-bar { background: oklch(from var(--mb-reg) calc(l * .74) calc(c * .78) h); } }
  .op-bar-tel { background: oklch(from var(--lux-wine) calc(l * .74) calc(c * .78) h); }
  .op-bar-tel:hover { background: oklch(from var(--lux-wine) calc(l * .82) calc(c * .85) h); }
}

/* ===== mobile-lite: 휴대폰·인앱 브라우저(카카오톡 등)에서 스크롤이 버벅이지 않게 무거운 효과를 끈다 =====
   - 상단 게이지(스크롤 연동 애니메이션)는 구형 WebView 에서 스크롤마다 다시 그려 버퍼링처럼 보인다
   - 머리줄 유리 흐림(backdrop-filter)·어두운 구역 질감(mix-blend-mode)·나타날 때 흐림(filter)도 같은 이유 */
@media (max-width: 1024px) {
  body::after { content: none !important; animation: none !important; }
  .site-header::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.97) !important; }
  .op-dark::after, .op-hero-panel::after { content: none !important; }
  [data-reveal] { filter: none !important; transition: opacity .8s ease, transform .8s ease !important; }
}

/* ===== wide-in-wrap: 화면 끝까지 붙던 넓은 사진을 본문과 같은 폭(좌우 여백)으로 ===== */
.op-wide { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 768px) { .op-wide { padding: 0 16px; } }

/* ===== hs-tools: 공유 버튼 · 방문 예약 칸 · 분양가 계산기 · 평형 비교 · 계약 체크리스트 ===== */
.hs-share { display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: var(--lux-ink, #222); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.2); cursor: pointer; padding: 0; font: 600 10px/1 "Pretendard Variable", "Pretendard", sans-serif; }
.hs-share svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; margin-top: 6px; }
.hs-share span { margin: -10px 0 0; letter-spacing: .02em; }
.hs-share-m { display: none; }
@media (max-width: 1024px) {
  .quick .hs-share { display: none; }
  .hs-share-m { display: grid; position: fixed; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 96; width: 46px; height: 46px; border-radius: 0; background: var(--lux-ink, #222); border: 1px solid rgba(217,195,154,.25); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .hs-share-m svg { width: 17px; height: 17px; margin-top: 5px; }
}
@media (max-width: 768px) { .hs-share-m { right: 12px; bottom: calc(128px + env(safe-area-inset-bottom, 0px)); } }
.hs-toast { position: fixed; left: 50%; bottom: 96px; z-index: 400; transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 12px 18px; background: rgba(20,18,16,.92); color: #fff; font-size: 14px; line-height: 1.5; opacity: 0; transition: .35s; pointer-events: none; text-align: center; }
.hs-toast.on { opacity: 1; transform: translate(-50%, 0); }

.op-visit select, .op-visit input[type=date], .reg-visit select, .reg-visit input[type=date] { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #d8d2c8; background: #fff; font-size: 15px; color: inherit; box-sizing: border-box; border-radius: 0; -webkit-appearance: none; appearance: none; }
.reg-visit .fld { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .reg-visit .fld { grid-template-columns: 1fr; } }

.hs-tool { margin: 48px 0 0; padding: 34px 32px; border: 1px solid var(--lux-line, #e5ded2); background: #fff; }
.hs-tool > h2 { margin: 0 0 6px; font-size: 24px; }
.hs-tool > .lead { margin: 0 0 22px; color: #6b6259; font-size: 15px; }
.ht-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.ht-f span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #5e554c; }
.ht-f select, .ht-f input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #d8d2c8; background: #fff; font-size: 16px; box-sizing: border-box; border-radius: 0; color: inherit; }
.ht-range { margin: 10px 0 0; font-size: 14px; color: var(--lux-wine, #7a2335); font-weight: 600; }
.ht-quick { display: flex; gap: 8px; margin-top: 8px; }
.ht-quick button { height: 34px; padding: 0 12px; border: 1px solid #cfc6b8; background: #faf7f2; font-size: 13px; cursor: pointer; }
.ht-loan { margin-top: 16px; }
.ht-loan summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #5e554c; }
.ht-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15px; }
.ht-table th, .ht-table td { padding: 12px 10px; border-bottom: 1px solid #ece6dc; text-align: left; vertical-align: top; }
.ht-table th { width: 38%; font-weight: 600; color: #4d453d; }
.ht-table td b { font-size: 16px; }
.ht-table td small { display: block; margin-top: 3px; font-size: 12.5px; color: #8a8076; }
.ht-sum th, .ht-sum td { border-bottom: 0; border-top: 2px solid var(--lux-ink, #222); }
.ht-sum td b { font-size: 18px; color: var(--lux-wine, #7a2335); }
.ht-loan-out { margin: 14px 0 0; padding: 12px 14px; background: #faf7f2; font-size: 14.5px; }
.ht-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: #8a8076; }
.ht-ptable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ht-ptable th, .ht-ptable td { padding: 10px 8px; border-bottom: 1px solid #ece6dc; text-align: left; }
.ht-ptable thead th { border-bottom: 2px solid var(--lux-ink, #222); font-size: 13px; color: #5e554c; }
.ht-ptable td.n { text-align: right; white-space: nowrap; }

.hc-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.hc-pick select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #d8d2c8; background: #fff; font-size: 16px; border-radius: 0; color: inherit; }
.hc-pick span { font-weight: 700; color: var(--lux-gold, #b08d57); }
.hc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.hc-col { min-width: 0; }
.hc-col h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--lux-ink, #222); font-size: 18px; }
.hc-col dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0 0 14px; font-size: 14px; }
.hc-col dt { color: #8a8076; }
.hc-col dd { margin: 0; font-weight: 600; word-break: keep-all; }
.hc-img { display: block; position: relative; border: 1px solid #ece6dc; background: #fff; }
.hc-img img { display: block; width: 100%; height: auto; }
.hc-img span { position: absolute; right: 6px; bottom: 6px; padding: 4px 8px; background: rgba(20,18,16,.75); color: #fff; font-size: 12px; }

.hs-check ul { list-style: none; margin: 0; padding: 0; }
.hs-check li { border-bottom: 1px solid #ece6dc; }
.hs-check label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 2px; font-size: 15px; line-height: 1.55; cursor: pointer; }
.hs-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lux-wine, #7a2335); }
.hs-check label small { display: block; font-size: 13px; color: #8a8076; }
.hs-check h3 { margin: 24px 0 6px; font-size: 16px; }

@media (max-width: 768px) {
  .hs-tool { margin-top: 36px; padding: 24px 16px; }
  .hs-tool > h2 { font-size: 20px; }
  .hc-cols { gap: 10px; }
  .hc-col h3 { font-size: 15px; }
  .hc-col dl { grid-template-columns: 1fr; gap: 2px; font-size: 13px; }
  .hc-col dd { margin-bottom: 6px; }
  .ht-table { font-size: 14px; }
}
.hs-tool h3.ht-sub { margin: 30px 0 10px; font-size: 17px; }
.ht-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* hs-tools-fix: 휴대폰 가격표는 타입 이름을 위, 금액·발코니를 아래 한 줄로 */
@media (max-width: 768px) {
  .ht-ptable thead { display: none; }
  .ht-ptable tr { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid #ece6dc; }
  .ht-ptable th, .ht-ptable td { padding: 0; border: 0; }
  .ht-ptable th { grid-column: 1 / -1; margin-bottom: 3px; font-size: 14px; }
  .ht-ptable td.n { text-align: left; font-size: 14px; }
  .ht-ptable td.n + td.n { text-align: right; color: #6b6259; }
  .ht-ptable td.n + td.n::before { content: "발코니 "; font-size: 12px; color: #8a8076; }
}

/* hs-lb: 평면도 크게 보기 */
.hs-lb { position: fixed; inset: 0; z-index: 500; background: rgba(15,14,13,.94); }
.hs-lb-body { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; box-sizing: border-box; touch-action: pan-x pan-y pinch-zoom; }
.hs-lb-body img { display: block; max-width: min(100%, 1200px); height: auto; margin: auto; background: #fff; }
.hs-lb-x { position: fixed; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.hc-img { cursor: zoom-in; }

/* ===== hs-zoom: 세부 쪽 그림 크게 보기 · 분양 일정 안내 띠 ===== */
.hs-zwrap { position: relative; display: block; cursor: zoom-in; }
.hs-zwrap > img { display: block; }
.hs-ztag { position: absolute; right: 8px; bottom: 8px; padding: 5px 9px 5px 24px; background: rgba(20,18,16,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") 7px 50%/13px no-repeat; color: #fff; font-size: 12px; line-height: 1; pointer-events: none; }
.hs-lb { position: fixed; inset: 0; z-index: 500; background: rgba(15,14,13,.95); }
.hs-lb-body { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 56px 12px 40px; box-sizing: border-box; }
.hs-lb-body img { display: block; max-width: min(100%, 1400px); max-height: 100%; width: auto; height: auto; background: #fff; }
.hs-lb-x { position: fixed; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.hs-lb-tip { position: fixed; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; color: rgba(255,255,255,.7); font-size: 12.5px; pointer-events: none; }
@media (hover: hover) { .hs-lb-tip { display: none; } }
.hc-img { cursor: zoom-in; }

.hs-notice { display: block; position: relative; z-index: 5; margin-top: var(--header-h, 64px); padding: 10px 16px; background: var(--lux-ink, #222); color: var(--lux-gold2, #e8d3a6); font-size: 14px; line-height: 1.45; text-align: center; letter-spacing: .01em; text-decoration: none; word-break: keep-all; }
a.hs-notice::after { content: " ›"; }
.has-notice .op, .has-notice .sub-visual, .has-notice .main-hero, .has-notice .mo-main { margin-top: 0 !important; }
@media (max-width: 768px) { .hs-notice { font-size: 13px; padding: 9px 12px; } }

/* hs-share-show: 휴대폰 공유 버튼은 TOP 버튼처럼 내렸을 때만 */
@media (max-width: 1024px) {
  .hs-share-m { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, visibility .3s, transform .3s; }
  .hs-share-m.show { opacity: .92; visibility: visible; transform: none; }
}

/* gnb-reg-m: 휴대폰 메뉴에서 관심고객등록 따로 */
.gnb-reg-m { display: none; }
@media (max-width: 1024px) {
  .gnb > ul > li.gnb-reg-m { display: block; }
  .gnb-reg-m .d1 { color: var(--lux-wine, var(--c-primary)); font-weight: 600; }
  .gnb .d2 a[href="register.html"], .gnb .d2 a[href="#reg"] { display: none; }
}

.hs-zwrap > picture, .hs-zwrap > picture img { display: block; width: 100%; height: auto; }

/* btn-hover-calm (10-04 주인): 관심고객등록 버튼에 마우스를 올리면 금색(너무 밝음) 대신 조금 진한 테마색 */
.op-btn-red:hover, .op-btn-red:focus-visible { background: color-mix(in srgb, var(--lux-wine) 80%, #000) !important; color: #fff; }

/* btn-line-hover (10-04 주인): 상담 버튼에 마우스를 올리면 금색 대신 테마색을 채도만 낮춘 색 */
.op-btn-line:hover, .op-btn-line:focus-visible { background: color-mix(in srgb, var(--lux-wine) 70%, #777) !important; border-color: transparent !important; color: #fff !important; }
@supports (color: oklch(from red l c h)) { .op-btn-line:hover, .op-btn-line:focus-visible { background: oklch(from var(--lux-wine) calc(l + (.5 - l) * .3) calc(c * .58) h) !important; } }

/* no-blur (10-04 주인): PC 에서도 느려져 흐림 효과를 모두 끈다 — 나타날 때 흐림, 머리줄·메뉴 유리 흐림 */
[data-reveal] { filter: none !important; }
.site-header::before, .site-header, .gnb-bg, .quick, .op-bar, .mobile-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.site-header::before { background: rgba(255,255,255,.97) !important; }

/* quick-below-header (10-04 주인): 빠른 메뉴가 길어져(공유 추가) 화면 가운데 맞춤이면 위가 머리줄에 가린다 — 머리줄 바로 아래에서 시작 */
@media (min-width: 1025px) {
  .quick { top: calc(var(--header-h) + 18px) !important; transform: none !important; max-height: calc(100vh - var(--header-h) - 30px); }
}
@media (min-width: 1025px) and (max-height: 860px) {
  .quick { gap: 7px !important; }
  .quick .q-open { width: 88px; height: 88px; }
  .quick .q-video li img { max-height: 56px; object-fit: cover; }
}


/* ===== lux-modern (10-05 마지막 업그레이드): 고급스러운 모던함 — 가벼운 효과만, 휴대폰은 더 줄여서 ===== */
/* 머리: 내려가면 얇은 그림자로 본문과 분리 */
.site-header { transition: box-shadow .35s ease; }
.site-header.is-scrolled { box-shadow: 0 12px 30px -20px rgba(20, 14, 6, .32); }
/* 숫자: 자릿수 폭을 맞춰 정돈된 느낌(가격·면적·세대수) */
.op-stats b, .op-table td, .op-deal-list, .hn-main, .hs-tool table, .ht-ptable td { font-variant-numeric: tabular-nums lining-nums; }
.op-stats b { letter-spacing: -.01em; }
/* 표: 줄에 마우스를 올리면 은은하게 */
.op-table tbody tr { transition: background-color .25s ease; }
.op-table tbody tr:hover { background: color-mix(in srgb, var(--lux-gold) 7%, transparent); }
/* 등록 폼: 입력칸 포커스는 금색 테두리 + 옅은 빛 */
form[action="register.php"] :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea) { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
form[action="register.php"] :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea):focus { outline: none; border-color: var(--lux-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-gold) 20%, transparent); background-color: #fff; }
form[action="register.php"] .op-chip span, form[action="register.php"] .chips span { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
form[action="register.php"] input:checked + span { box-shadow: 0 6px 16px -10px rgba(20, 14, 6, .55); }
/* 버튼: 누를 때 살짝 눌리는 느낌 */
.op-btn:active, .btn-reg:active, .hs-share:active { transform: translateY(1px); }
/* 키보드로 이동할 때 금색 테두리(마우스로 누를 때는 안 보임) */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 3px; }
/* PC: 사진이 화면에 들어올 때 위에서 아래로 열리는 커튼 효과 (휴대폰·움직임 줄이기 설정에서는 없음) */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .lux-js .op-fig[data-reveal] > img, .lux-js .op-fig[data-reveal] > picture > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.65, .05, .25, 1) .1s, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .lux-js .op-fig[data-reveal].revealed > img, .lux-js .op-fig[data-reveal].revealed > picture > img { clip-path: inset(0 0 0 0); }
}
/* 숫자 세기 동안 폭이 흔들리지 않게 */
.op-stats b.lux-count { display: inline-block; min-width: var(--lux-w, auto); }

/* 세부 쪽 위 사진: 공식 홈페이지 사진으로 */
.sub-visual .sv-bg { background-image: url(../img/sub_top2.jpg); background-position: center; }

/* 상단 메뉴: 예전처럼 메뉴에 올리면 전체 하위 메뉴가 한 번에 펼쳐진다 (2026-10-10 주인 요청 "전처럼 메뉴 전체 보이게").
   스크롤하다 마우스가 메뉴 위를 스치기만 해도 흰 판이 내려오지 않게, 잠깐(0.18초) 머물러야 열린다. */
@media (min-width: 1025px) {
  .site-header .gnb-bg { transition: height .28s ease 0s; }
  .site-header:has(.gnb:hover) .gnb-bg { transition-delay: .18s; }
  .site-header .gnb .d2 { transition: opacity .2s ease 0s, visibility 0s linear .2s; }
  .site-header:has(.gnb:hover) .gnb .d2 { transition: opacity .25s ease .22s, visibility 0s linear .22s; }
}

/* 휴대폰 하위 페이지: 위 사진이 천천히 커지는(kenburns) 동안 아래 탭을 덮던 것 (2026-10-09 주인 캡처). 탭을 사진 위에 둔다. */
.sub-visual { overflow: hidden; }
.sub-visual .lnb { position: relative; z-index: 3; }
@media (min-width: 769px) { .sub-visual .lnb { position: absolute; } }

/* TOP 게이지가 네모 밖으로 1px 밀려 겹쳐 보이던 것 → 네모 안쪽에 4px 여백을 두고 그린다 (2026-10-09 주인 캡처) */
@media (max-width: 1024px) {
  .hs-backtop { box-sizing: border-box; }
  .hs-backtop svg { width: calc(100% - 8px); height: calc(100% - 8px); place-self: center; overflow: visible; }
  .hs-bt-bar { stroke-width: 2.4; }
}
@media (max-width: 1024px) { .hs-bt-count { font-size: 11px; letter-spacing: -.04em; } .hs-bt-arrow { font-size: 10px; } }
/* 게이지 여백 2px (2026-10-09 주인 요청) */
@media (max-width: 1024px) { .hs-backtop svg { width: calc(100% - 4px); height: calc(100% - 4px); } }

/* 사진이 틀 안에서 커진 채 줄어들지 않던 것 (2026-10-10 주인 캡처). 나타날 때 1.06배에서 1배로 줄어드는 효과가
   '나타남' 표시(revealed)를 붙이던 스크립트를 끈 뒤로 1.06배에 머물러 있었다. 기본은 원래 크기, 마우스를 올렸을 때만 살짝 키운다. */
[data-reveal] img, [data-reveal].revealed img { transform: scale(1) !important; }
@media (hover: hover) { .op-fig:hover img, .op-wide:hover img { transform: scale(1.035) !important; } }
/* 넓은 사진(op-wide)은 틀에 좌우 여백(padding)이 있어, 마우스를 올려 키우면 사진이 위 칸보다 넓게 삐져나왔다 (2026-10-10 주인 캡처).
   여백을 바깥 폭으로 옮겨 틀 = 사진 크기로 맞추고, 키워도 틀 안에서만 커지게 한다. */
.op-wide { padding: 0 !important; width: calc(100% - 48px); max-width: calc(var(--maxw, 1200px) - 48px); }
@media (max-width: 768px) { .op-wide { width: calc(100% - 32px); max-width: none; } }
.op-wide, .op-fig { overflow: hidden; }

/* 스크롤 효과 (2026-10-10, 짝: assets/js/k-fx.js). 움직임은 opacity·transform 만 써서 스크롤 속도에 영향이 없다. */
html.k-fx-on .k-fx { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .6s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
html.k-fx-on .k-fx.k-in { opacity: 1; transform: none; }
html.k-fx-on .op-tit.k-fx::after { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2,.7,.2,1) .25s; }
html.k-fx-on .op-tit.k-fx.k-in::after { transform: scaleX(1); }
/* 첫 화면 사진: 내릴 때 글자보다 느리게 올라가는 깊이감. 지원하는 브라우저(크롬·엣지·삼성 인터넷)만, 자바스크립트 없이. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .op-hero { overflow: hidden; }
    .op-hero-bg { animation: kPara linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    @keyframes kPara { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 14%, 0); } }
  }
}

/* 2026-10-10 휴대폰·카카오 브라우저 스크롤 버벅임 줄이기: 흐림 효과 빼고, 휴대폰에선 첫 화면 사진 확대·깊이감·겹침 무늬 끔 */
[data-reveal]{filter:none!important}
[data-reveal] img{will-change:auto!important}
@media (max-width:1024px),(hover:none){.op-hero-bg{animation:none!important;transform:none!important}.op-hero-bg img{animation:none!important}.op-dark::after,.op-hero-panel::after{display:none!important}}

/* 2026-10-10 글자 크기 다듬기: 휴대폰에서 9.5~12px 글씨를 읽기 쉬운 크기로, PC 답변 줄 길이 제한 */
@media (max-width:768px){.hc-notice small{font-size:12px!important;line-height:1.5}.hc-notice .hn-note{font-size:11.5px!important;line-height:1.55}.op-hero .hc-sub{font-size:13.5px!important}.op-hero .hc-chip{font-size:12.5px!important}.op-opt-tit small{font-size:13px!important}.quick a span,.quick button span{font-size:11px}}
@media (min-width:1025px){.op-faq details p{max-width:820px}.site-footer p,footer p{font-size:13.5px}}

/* 2026-10-10 광주 모델하우스 드롭다운 (바닥글 로고 아래) */
.k-xl { margin: 14px 0 0; }
.k-xl > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 16px; border: 1px solid currentColor; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .85; transition: opacity .2s, border-color .2s; }
.k-xl > summary::-webkit-details-marker { display: none; }
.k-xl > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
.k-xl[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.k-xl > summary:hover, .k-xl[open] > summary { opacity: 1; }
.k-xl-box { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 10px 0 4px 2px; animation: kXl .3s ease; }
.k-xl-box a { font-size: 13px; line-height: 1.75; text-decoration: none; color: inherit; opacity: .72; }
.k-xl-box a:hover { opacity: 1; text-decoration: underline; }
@keyframes kXl { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.site-footer .k-xl { color: rgba(255,255,255,.88); max-width: 320px; }
.site-footer .k-xl > summary { border-color: rgba(255,255,255,.3); }
.site-footer .k-xl[open] > summary { border-color: rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce) { .k-xl-box { animation: none; } }

/* 2026-10-10 광주 모델하우스 단추를 로고 오른쪽 끝에 맞춤 */
.site-footer.has-kxl .ft-logo { display: inline-flex; flex-direction: column; align-items: flex-start; }
.site-footer.has-kxl .ft-logo .k-xl { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; }
.site-footer.has-kxl .ft-logo .k-xl-box { align-items: flex-end; text-align: right; padding-left: 0; padding-right: 2px; }


/* 2026-10-10 광주 모델하우스 드롭다운 자리: 바닥글 오른쪽 단추 줄 (개인정보 안내 아래) */
.site-footer .ft-right .k-xl { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.site-footer .ft-right .k-xl > summary { min-height: 34px; padding: 0 12px 0 14px; }
.site-footer .ft-right .k-xl-box { align-items: flex-end; text-align: right; margin-top: 8px; padding: 4px 2px 0 0; }
@media (max-width: 1024px) { .site-footer .ft-right .k-xl { align-items: flex-start; } .site-footer .ft-right .k-xl-box { align-items: flex-start; text-align: left; padding: 4px 0 0 2px; } }

/* 2026-10-10 바닥글 오른쪽 단추 3개(개인정보·광주 모델하우스·ADMIN) 높이·폭·간격 통일 */
.site-footer .ft-right { gap: 12px; }
.site-footer .ft-right .ft-tel { margin-bottom: 8px; }
.site-footer .ft-right .ft-privacy, .site-footer .ft-right .k-xl > summary, .site-footer .ft-right .ft-admin { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 184px; height: 38px; min-height: 38px; margin: 0; padding: 0 14px; line-height: 1; text-decoration: none; }
.site-footer .ft-right .k-xl { margin: 0; }

/* 2026-10-10 개인정보 안내 단추: 로고 아래 */
.site-footer .ft-logo { display: inline-flex; flex-direction: column; align-items: flex-start; }
.site-footer .ft-logo .ft-privacy { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 184px; height: 38px; margin-top: 18px; padding: 0 14px; line-height: 1; text-decoration: none; }

/* 2026-10-10 바닥글 세 칸(로고 · 정보 · 분양문의) 사이 간격을 똑같이 */
@media (min-width: 1025px) { .site-footer .ft-left { display: contents; } .site-footer .ft-inner { justify-content: space-between; gap: 48px; } .site-footer .ft-info { flex: 0 1 auto; min-width: 0; } }

/* 2026-10-10 개인정보 안내 단추를 로고 오른쪽 끝에 맞춤 */
.site-footer .ft-logo .ft-privacy { align-self: flex-end; }

/* 로고가 단추보다 좁은 단지도 오른쪽 끝을 맞춤 (로고·단추 모두 오른쪽 정렬) */
.site-footer .ft-logo { align-items: flex-end; }
.site-footer.has-kxl .ft-logo { align-items: flex-end; }

/* 2026-10-10 모던 정리 (k-modern) */
/* 13개 단지 공통. premium.css 맨 끝에 붙인다. 색은 각 사이트 변수(--lux-*, --c-*)만 쓴다.
   CSS 만 바꾼다 (글·숫자·링크·그림 그대로). 무거운 효과(흐림·섞기·스크롤 연동) 없음. 이 구간만 지우면 이전 모습. */
:root {
  --km-r: 4px;
  --km-ink: var(--lux-ink, var(--c-ink, #1a1a1a));
  --km-accent: var(--lux-wine, var(--c-primary, #333));
  --km-gold: var(--lux-gold, var(--c-accent, #b8975a));
  --km-soft: var(--lux-ivory, var(--c-bg-soft, #f6f5f3));
  --km-line: color-mix(in srgb, var(--km-ink) 12%, transparent);
  --km-line2: color-mix(in srgb, var(--km-ink) 7%, transparent);
  --km-text: color-mix(in srgb, var(--km-ink) 76%, #fff);
  --km-sec: clamp(72px, 8.4vw, 112px);
}

/* ---------- 머리줄 ---------- */
.site-header { border-bottom-color: var(--km-line2); }
.site-header .hd-reg { border-radius: var(--km-r); }

/* ---------- 첫 화면: 구역 간격·제목 ---------- */
.op .op-sec { padding-top: var(--km-sec); padding-bottom: var(--km-sec); }
.op .op-en { margin-bottom: 12px; }
.op .op-tit { font-size: clamp(26px, 1.15rem + 1.85vw, 40px); line-height: 1.36; letter-spacing: -.03em; margin-bottom: 18px; }
.op .op-sec .op-tit::after { width: 40px; margin-top: 18px; }
.op .op-lead { font-size: clamp(15px, .88rem + .3vw, 17.5px); line-height: 1.75; font-weight: 400; margin-bottom: clamp(28px, 3.4vw, 40px); }
.op .op-note { font-size: 13.5px; line-height: 1.65; }
@media (min-width: 769px) { .op .op-deal-list small { font-size: 14px; } }

/* ---------- 단추: 높이·모서리 통일 ---------- */
.op .op-btn { border-radius: var(--km-r); height: 56px; padding: 0 30px; font-size: 16px; letter-spacing: .02em; }
.op .op-btn-red { box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--km-accent) 70%, transparent); }
.op .op-more a { border-radius: var(--km-r); border-color: var(--km-line); }
.op .op-dark .op-more a { border-color: rgba(255,255,255,.28); }
.op-submit, .btn-submit, .reg-submit button { border-radius: var(--km-r) !important; }
.op-bar { border-radius: var(--km-r); overflow: hidden; }

/* ---------- 탭 ---------- */
.op .op-tabs button, .sub-content .tabs button { border-radius: var(--km-r); }
.op .op-tabs button { height: 48px; }
/* 하위 페이지 평면 탭: 회색 덩어리 대신 흰 칸 + 가는 선 (고른 칸은 그대로 짙은색) */
.sub-content .tabs button:not(.on) { background: #fff; color: var(--km-text); box-shadow: inset 0 0 0 1px var(--km-line); }
@media (hover: hover) { .sub-content .tabs button:not(.on):hover { background: var(--km-soft); color: var(--km-ink); } }

/* ---------- 카드·상자: 얇은 선 하나 + 작은 모서리 ---------- */
.k-more .k-mc { border: 1px solid var(--km-line) !important; border-top: 2px solid var(--km-accent) !important; border-radius: var(--km-r); box-shadow: none; }
.k-more .k-mc h3 { color: var(--km-ink); letter-spacing: -.02em; }
.k-more .k-mc-go { font-size: 15px; }
.op .op-form { border-radius: var(--km-r); border: 1px solid var(--km-line2); }
.op .op-form::before { display: none; }
.op .op-opt { border-radius: var(--km-r); }
.op .op-fld :is(input, select, textarea) { border-radius: var(--km-r); }
.op .op-chips span, .op .op-chip span { border-radius: var(--km-r); }
.op .op-plan { border-radius: var(--km-r); }

/* 그림 틀: 안쪽 흰 선 겹틀 빼고 모서리 꺾쇠만 은은하게, 그림자 작게 */
.op .op-fig { border-radius: var(--km-r); box-shadow: 0 18px 36px -28px rgba(20, 14, 6, .35); }
.op .op-fig::after { display: none; }
.op .op-fig::before { opacity: .55; }
.op .op-wide { border-radius: var(--km-r); }
.op .op-gal li { border-radius: var(--km-r); }
.op .op-zoom { border-radius: var(--km-r); }
.op .k-deal figure { border-radius: var(--km-r); overflow: hidden; }

/* ---------- 하위 페이지: 위 사진·탭·제목 ---------- */
.sub-visual .lnb a { letter-spacing: -.01em; }
main.sub { padding-top: clamp(44px, 6vw, 80px); }
.page-title { margin-bottom: clamp(32px, 4.4vw, 56px); }
.page-title .en { font-size: 13px; letter-spacing: .32em; margin-bottom: 12px; }
.page-title h1, .page-title h2 { font-size: clamp(28px, 1.1rem + 2.2vw, 44px); line-height: 1.3; letter-spacing: -.03em; }
.page-title h1 .pt-brand { margin-bottom: 8px; line-height: 1.4; }
.page-title .bar { height: 22px; margin-top: 20px; }

@media (max-width: 768px) {
  /* 휴대폰 하위 메뉴 탭: 짙은 칸 → 밝은 칸 + 가는 선, 고른 칸만 테마 짙은색. 빈 칸에 비치던 빨강 띠 없앰 */
  .sub-visual .lnb { background: #fff; border-bottom: 1px solid var(--km-line); }
  .sub-visual .lnb ul { background: #fff; }
  .sub-visual .lnb a { background: #fff; color: var(--km-ink); font-weight: 500; border-right: 1px solid var(--km-line2); border-bottom: 1px solid var(--km-line2); }
  .sub-visual .lnb a:hover { background: var(--km-soft); }
  .sub-visual .lnb a.on { background: var(--km-ink); color: #fff; font-weight: 600; }
  /* 칸 수가 5·6·7 이면 줄마다 빈자리 없이 나눈다 (5 = 3+2, 6 = 3+3, 7 = 4+3) */
  .sub-visual .lnb ul:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .sub-visual .lnb ul:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .sub-visual .lnb ul:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: span 3; }
  .sub-visual .lnb ul:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
  .sub-visual .lnb ul:has(> li:nth-child(7):last-child) { grid-template-columns: repeat(12, 1fr); }
  .sub-visual .lnb ul:has(> li:nth-child(7):last-child) > li { grid-column: span 3; }
  .sub-visual .lnb ul:has(> li:nth-child(7):last-child) > li:nth-child(n+5) { grid-column: span 4; }
  .page-title .bar { height: 16px; margin-top: 16px; }
}

/* ---------- 하위 페이지 본문 부품 ---------- */
.info-table { border-top-width: 1px; }
.info-table th { background: color-mix(in srgb, var(--km-soft) 70%, #fff); }
.info-table th, .info-table td { border-bottom-color: var(--km-line2); }
.info-table td { color: var(--km-text); }
.k-imgtxt h2, .k-h2 { color: var(--km-ink); letter-spacing: -.02em; line-height: 1.4; }
.k-imgtxt h3 { color: var(--km-ink); }
.seo-sum { border: 1px solid var(--km-line2); border-radius: var(--km-r); }
.seo-sum h2 { letter-spacing: -.02em; line-height: 1.45; }
.notice-box { border-radius: var(--km-r); }
.hs-tool { border-color: var(--km-line); border-radius: var(--km-r); }
.hs-tool select, .hs-tool input:not([type=checkbox]):not([type=radio]) { border-radius: var(--km-r); }
.addr-list, .doc-list { border-radius: var(--km-r); overflow: hidden; }
.addr-list .btns a, .zoom-link { border-radius: var(--km-r); }
.agree-box { border-radius: var(--km-r); }
.reg-form .chips span { border-radius: var(--km-r); }
.reg-form .req-note { border-bottom-width: 1px; }
.sub-content .calc :is(input, select), .sub-content .ccalc :is(.form, .won-in) :is(input, select) { border-radius: var(--km-r); }
.sub-content .calc button { border-radius: var(--km-r); }
.sub-content .pc-out { border-radius: var(--km-r); }
.gal-item { border-radius: var(--km-r); overflow: hidden; }
/* 호반 분양 핵심 자료(point.html) */
.ez-nav a { border-radius: var(--km-r); border-color: var(--km-line); }
.ez figure { border-radius: var(--km-r); overflow: hidden; border-color: var(--km-line2); }
.ez h2 { letter-spacing: -.02em; line-height: 1.4; }

/* ---------- 바닥글: 배치 그대로, 간격·글자 대비만 ---------- */
.site-footer { padding-top: 64px; }
.site-footer .ft-info p, .site-footer .ft-notes li { color: rgba(255,255,255,.62); line-height: 1.75; }
.site-footer .ft-info p.copy { color: rgba(255,255,255,.72); margin-top: 14px; }
.site-footer .ft-privacy, .site-footer .k-xl > summary, .site-footer .ft-admin { border-radius: var(--km-r); }
.site-footer .ft-tel small { letter-spacing: .04em; }

/* ---------- 휴대폰: 읽기 크기·누르는 크기 ---------- */
@media (max-width: 768px) {
  .op .op-tit { letter-spacing: -.035em; line-height: 1.4; }
  .op .op-btn { height: 52px; }
  .op .op-more a { min-height: 44px; }
  .op .op-table td { font-size: 15px; }
  .op .op-faq details p { font-size: 15px; line-height: 1.75; }
  .op .op-vision p { font-size: 15px; }
  .info-table { font-size: 15px; }
  .seo-sum, .seo-sum p { font-size: 15px; }
  .k-imgtxt h2 { font-size: 20px; }
  .sub-content .pc-quick button { min-height: 44px; }
  .k-more .k-mc-go { min-height: 44px; display: flex; align-items: center; }
  .op .op-terms-btn { min-height: 44px; }
  .ez-nav a { min-height: 44px; }
  .op .op-zoom { min-height: 44px; }
  .op .op-cards:not(.op-cards-img) li { padding: 28px 22px; }
  .op .op-vision li { padding: 26px 22px; }
  .op .op-stats li { padding: 26px 18px; }
  .site-footer .ft-tel { min-height: 44px; align-items: center; }
  .site-footer .ft-logo .ft-privacy, .site-footer .ft-right .ft-privacy, .site-footer .ft-right .k-xl > summary, .site-footer .ft-right .ft-admin { height: 44px; min-height: 44px; }
  .site-footer { padding-top: 52px; }
  .site-footer .ft-info p, .site-footer .ft-notes li { font-size: 13.5px; }
}

/* 2026-10-10 바닥글 로고 왼쪽 정렬 (휴대폰·PC): 로고와 개인정보 단추 모두 왼쪽 */
.site-footer .ft-logo, .site-footer.has-kxl .ft-logo { align-items: flex-start !important; }
.site-footer .ft-logo .ft-privacy { align-self: flex-start !important; }

/* 동의 체크 그림자 없앰 (2026-10-11) */
form[action="register.php"] .op-check input:checked + span, form[action="register.php"] .check input:checked + span { box-shadow: none !important; background: none !important; }

/* 넓은 표 가로 넘김 (2026-10-11) */
.k-tscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 34px 0 10px; }
.k-tscroll > table { margin: 0 !important; }
.k-tscroll th, .k-tscroll td { white-space: nowrap; }

/* PC 메뉴 키보드 포커스로 펼치기 · 이미 가로 스크롤되는 표 틀 안의 감싸기 여백 없앰 (2026-10-11) */
@media (min-width: 1025px) {
  .site-header.gnb-kb .d2 { opacity: 1 !important; visibility: visible !important; }
  .site-header.gnb-kb .gnb-bg { height: var(--kb-h, 270px) !important; }
}
.cmp-wrap > .k-tscroll { margin: 0; }
/* 약관 이동 위치·닫힌 휴대폰 메뉴·숫자 색 대체값 (2026-10-11) */
#op-terms { scroll-margin-top: 110px; }
@media (min-width: 1025px) { #op-terms { scroll-margin-top: 150px; } }
@media (max-width: 1024px) {
  .site-header .gnb { visibility: hidden; transition: transform .35s, visibility 0s linear .35s; }
  .site-header.menu-open .gnb { visibility: visible; transition: transform .35s, visibility 0s; }
}
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .op-stats b { background: none; color: var(--lux-ink, #222); -webkit-text-fill-color: currentColor; }
}
/* 하위 메뉴 탭 선택 칸: 검정 대신 단지 고유색 (2026-10-11) */
.sub-visual .lnb a.on { background: var(--c-primary) !important; color: #fff !important; border-color: var(--c-primary) !important; }

/* PC 메뉴 펼침 유지 (2026-10-11) */
@media (min-width: 1025px) {
  .site-header.gnb-hold .d2 { opacity: 1 !important; visibility: visible !important; }
  .site-header.gnb-hold .gnb-bg { height: var(--kb-h, 270px) !important; }
}

/* PC 메뉴: 마우스로는 메뉴 글자에 올렸을 때만 펼침 (2026-10-11) */
@media (min-width: 1025px) {
  .site-header:not(.gnb-hold):not(.gnb-kb) .gnb-bg { height: 0 !important; }
  .site-header:not(.gnb-hold):not(.gnb-kb) .gnb .d2 { opacity: 0 !important; visibility: hidden !important; }
}
/* PC 동그란 버튼: 마우스 올리면 테마색 바탕 + 테마색보다 밝은 테두리, 움직임 없음 (2026-10-11) */
@media (hover: hover) and (min-width: 1025px) {
  .quick .q-open { --qo-ring: rgba(255,255,255,.55); transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
  @supports (color: color-mix(in srgb, red 50%, white)) { .quick .q-open { --qo-ring: color-mix(in srgb, var(--c-primary) 50%, #fff); } }
  .quick .q-open::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 2px var(--qo-ring); transition: opacity .3s ease; }
  .quick .q-open:hover { background: var(--c-primary) !important; color: #fff !important; border-color: var(--qo-ring) !important; }
  .quick .q-open:hover::after { opacity: 1; }
}
/* PC 동그란 버튼 크기 살짝 줄임 (2026-10-11) */
@media (min-width: 1025px) {
  .quick .q-open { width: 96px; height: 96px; }
  .quick .q-open b { font-size: 15px; }
}
@media (min-width: 1025px) and (max-width: 1400px) { .quick .q-open { width: 84px; height: 84px; } .quick .q-open b { font-size: 14px; } }
@media (min-width: 1025px) and (max-height: 860px) { .quick .q-open { width: 78px; height: 78px; } .quick .q-open b { font-size: 14px; } }
/* 첫 화면 숫자 칸 5개(세대당 주차 추가) (2026-10-11) */
@media (min-width: 1025px) { .op-stats.has5 { grid-template-columns: repeat(5, 1fr); } .op-stats.has5 li { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 1024px) { .op-stats.has5 li:nth-child(5) { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--lux-line, #e5e5e5); } }
/* 맨 위 테마색 게이지 (2026-10-11) */
body::after { content: none !important; animation: none !important; }
.hs-prog { position: fixed; left: 0; top: 0; z-index: 1001; width: 100%; height: 3px; background: var(--c-primary); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; will-change: transform; }
/* 첫 화면 숫자 칸: 휴대폰은 6칸(2×3)으로 맞춤 (2026-10-11) */
.op-stats .m-only { display: none; }
@media (max-width: 1024px) {
  .op-stats.has5 { grid-template-columns: repeat(2, 1fr) !important; }
  .op-stats.has5 .m-only { display: block; }
  .op-stats.has5 li:nth-child(5) { grid-column: auto; }
  .op-stats.has5 li:nth-child(odd) { border-left: 0 !important; }
  .op-stats.has5 li:nth-child(even) { border-left: 1px solid var(--lux-line, #e5e5e5) !important; }
  .op-stats.has5 li:nth-child(n+3) { border-top: 1px solid var(--lux-line, #e5e5e5); }
}
/* 맨 위 게이지: 왼쪽 옅게 → 오른쪽 테마색, 부드럽게 따라옴 (2026-10-11) */
.hs-prog { background: var(--c-primary); transition: transform .18s ease-out; }
@supports (color: color-mix(in srgb, red 50%, white)) { .hs-prog { background: linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 70%, #bdbdbd) 0%, var(--c-primary) 100%); } }
@media (prefers-reduced-motion: reduce) { .hs-prog { transition: none; } }
/* 관심평형 체크칸: 휴대폰에서 누르기 쉽게 조금 키움 (2026-10-11) */
input[type="checkbox"][name="types[]"] { width: 18px; height: 18px; accent-color: var(--c-primary); vertical-align: -3px; }
/* 계산기 결과 칸의 상담 버튼: 노랑 대신 테마색을 어둡게 (2026-10-11) */
.score .k-btn { background: rgba(0, 0, 0, .28) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #fff !important; transition: background .2s, filter .2s; }
@supports (color: color-mix(in srgb, red 50%, white)) { .score .k-btn { background: color-mix(in srgb, var(--c-primary, #333) 62%, #000) !important; } }
.score .k-btn:hover, .score .k-btn:focus-visible { background: #fff !important; border-color: #fff !important; color: var(--c-primary, #333) !important; filter: none; }
/* 그림 크게 보기·메뉴가 열리면 맨 위 게이지 숨김 (2026-10-11) */
body:has(.hs-lb) .hs-prog, body.lb-open .hs-prog, html.hs-lb-open .hs-prog { display: none; }
.hs-prog { z-index: 101 !important; } /* 머리글(100) 바로 위 — 첫 화면 사진 확대(300)·평면도 확대(500)·영상 창이 열리면 그 아래로 가려짐 */

/* 디자인 검토 반영 (2026-10-12) */
.op-bar { display: none !important; }   /* PC 화면 아래 가운데 고정 바 제거 (내용을 가림) */
.op-form .op-submit { background: var(--c-primary) !important; border-color: var(--c-primary) !important; color: #fff !important; transition: filter .2s; }   /* 첫 화면 상담 폼 버튼도 테마색으로 */
.op-form .op-submit:hover { filter: brightness(1.1); }
body:has(#reg-form) .sub-visual .sv-bg { background-image: url('../img/visual_pc_1.jpg') !important; background-size: cover !important; background-position: center 62% !important; }   /* 관심고객등록 상단: 빈 벽 사진 대신 단지 조감도 */

/* A2 글꼴 위계 정리: 섹션 제목은 가는 명조 큰 글씨, 영문 소제목은 넓은 자간 (2026-10-12) */
.op-tit, main.sub .page-title h1, .ar-tit { font-family: "Nanum Myeongjo", "Noto Serif KR", serif !important; font-size: 48px !important; font-weight: 400 !important; letter-spacing: -.02em !important; line-height: 1.3 !important; }
.op-en, main.sub .page-title .en, .ar-en { font-family: Marcellus, "Cormorant Garamond", serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .32em !important; }
@media (max-width: 1024px) { .op-tit, main.sub .page-title h1, .ar-tit { font-size: 38px !important; } }
@media (max-width: 640px) { .op-tit, main.sub .page-title h1, .ar-tit { font-size: 30px !important; line-height: 1.35 !important; } .op-en, main.sub .page-title .en, .ar-en { font-size: 11px !important; letter-spacing: .28em !important; } }

/* 아래 전체 메뉴(사이트맵) 정돈: 묶음별 칸으로 나눠 가지런히 (2026-10-12) */
.seo-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 48px; padding-top: 44px; padding-bottom: 48px; }
.seo-links p { margin: 0; line-height: 1.85; word-break: keep-all; }
.seo-links b { display: block; min-width: 0; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #ece6dc; font-size: 13px; letter-spacing: .02em; }
.seo-links a { white-space: nowrap; }
@media (max-width: 1024px) { .seo-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; } }
@media (max-width: 480px) { .seo-links { gap: 20px 18px; padding-top: 30px; padding-bottom: 32px; } .seo-links b { font-size: 12.5px; margin-bottom: 6px; padding-bottom: 6px; } }
/* 가운뎃점(·)이 줄 맨 앞에 떨어지지 않게: 점을 앞 링크 끝에 붙임 */
.seo-links p { font-size: 0; }
.seo-links p b, .seo-links p a { font-size: 13px; }
.seo-links p a:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 7px 0 7px; color: #c3bab0; }
@media (max-width: 480px) { .seo-links p b, .seo-links p a { font-size: 12.5px; } .seo-links p a:not(:last-child)::after { margin: 0 5px; } }

/* 관심고객등록 고급 디자인 (2026-10-11) */
main.sub .reg-lead { max-width: 640px; margin: 0 auto 34px; font-family: var(--font-serif, inherit); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.85; color: var(--lux-ink, #2a2523); text-align: center; word-break: keep-all; }
main.sub .reg-form { position: relative; max-width: 880px; margin: 0 auto; padding: 54px clamp(20px, 5vw, 60px) 46px; background: #fff; border: 1px solid #ece6dc; border-radius: 14px; box-shadow: 0 30px 70px -40px rgba(40, 28, 15, .35), 0 2px 6px rgba(40, 28, 15, .04); }
main.sub .reg-form::before { content: "CONSULTING FORM"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 7px 18px; border-radius: 999px; background: var(--c-primary, #333); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .24em; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }
main.sub .reg-form .req-note { margin: 0 0 10px; padding: 0 0 6px; border: 0; text-align: right; color: #9a9288; font-size: 12.5px; }
main.sub .reg-form .req-note em, main.sub .reg-form .tit em { color: var(--c-primary, #b33); font-style: normal; margin-left: 2px; }
main.sub .reg-form .reg-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid #f1ece4; min-width: 0; }
main.sub .reg-form fieldset.reg-row { display: block; padding-left: 0; padding-right: 0; }
main.sub .reg-form fieldset.reg-row::after { content: ""; display: block; clear: both; }
main.sub .reg-form fieldset.reg-row > legend.tit { float: left; width: 150px; margin: 0; line-height: 44px; }
main.sub .reg-form fieldset.reg-row > .fld { margin-left: 170px; }
main.sub .reg-form .chips label { display: inline-flex; width: auto; margin: 0; }
main.sub .reg-form .reg-row .tit { float: none; padding: 0; color: var(--lux-ink, #2a2523); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
main.sub .reg-form input[type="text"], main.sub .reg-form input[type="tel"], main.sub .reg-form input[type="email"], main.sub .reg-form input[type="date"], main.sub .reg-form select, main.sub .reg-form textarea {
  width: 100%; height: 52px; padding: 0 16px; border: 1px solid #e3ddd3; border-radius: 8px; background: #fcfbf9; color: #222; font: inherit; font-size: 15px; box-shadow: none; transition: border-color .2s, box-shadow .2s, background .2s; }
main.sub .reg-form textarea { height: 120px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
main.sub .reg-form input:hover, main.sub .reg-form select:hover, main.sub .reg-form textarea:hover { border-color: #d3cabd; }
main.sub .reg-form input:focus, main.sub .reg-form select:focus, main.sub .reg-form textarea:focus { outline: 0; background: #fff; border-color: var(--c-primary, #333); box-shadow: 0 0 0 4px rgba(0, 0, 0, .06); }
@supports (color: color-mix(in srgb, red 50%, white)) { main.sub .reg-form input:focus, main.sub .reg-form select:focus, main.sub .reg-form textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary, #333) 14%, transparent); } }
main.sub .reg-form .reg-visit .fld { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
main.sub .reg-form .chips { display: flex; flex-wrap: wrap; gap: 8px; }
main.sub .reg-form .chips label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #e3ddd3; border-radius: 999px; background: #fcfbf9; color: #4a443e; font-size: 14.5px; transition: background .2s, color .2s, border-color .2s; cursor: pointer; }
main.sub .reg-form .chips label:hover span { border-color: var(--c-primary, #333); }
main.sub .reg-form .chips input:checked + span { background: var(--c-primary, #333); border-color: var(--c-primary, #333); color: #fff; }
main.sub .reg-form .chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 0, 0, .15); }
main.sub .reg-form .agree-box { margin: 30px 0 0; padding: 26px 26px 18px; border-radius: 10px; background: #faf8f4; border: 1px solid #efe9df; }
main.sub .reg-form .agree-box h3 { margin: 0 0 10px; color: var(--lux-ink, #2a2523); font-size: 15px; font-weight: 700; }
main.sub .reg-form .agree-box h3 + .terms, main.sub .reg-form .agree-box .terms { max-height: 120px; overflow: auto; padding: 14px 16px; border: 1px solid #ebe4d8; border-radius: 8px; background: #fff; color: #6d665e; font-size: 13px; line-height: 1.7; }
main.sub .reg-form .agree-box .check { display: flex; align-items: center; gap: 10px; margin: 12px 0 20px; color: #2a2523; font-size: 14.5px; font-weight: 500; cursor: pointer; }
main.sub .reg-form .agree-box .check input { width: 20px; height: 20px; accent-color: var(--c-primary, #333); }
main.sub .reg-form .reg-submit { margin-top: 30px; text-align: center; }
main.sub .reg-form .btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; height: 62px; border: 0; border-radius: 999px; background: var(--c-primary, #333); color: #fff; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .04em; cursor: pointer; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55); transition: filter .2s, box-shadow .2s; }
main.sub .reg-form .btn-submit::after { content: "→"; font-weight: 400; }
main.sub .reg-form .btn-submit:hover { filter: brightness(1.1); box-shadow: 0 22px 34px -18px rgba(0, 0, 0, .6); }
main.sub .reg-form .form-msg:empty { display: none; }
main.sub .notice-box { max-width: 880px; margin: 26px auto 0; padding: 18px 22px; border-radius: 10px; background: transparent; border: 1px dashed #e3dccf; color: #8a8278; font-size: 13px; line-height: 1.75; text-align: center; }
main.sub .notice-box a { color: var(--c-primary, #333); font-weight: 600; }
@media (max-width: 640px) {
  main.sub .reg-form { padding: 46px 18px 32px; border-radius: 12px; }
  main.sub .reg-form .reg-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  main.sub .reg-form .reg-visit .fld { grid-template-columns: 1fr; }
  main.sub .reg-form fieldset.reg-row > legend.tit { float: none; width: auto; line-height: 1.4; margin-bottom: 8px; }
  main.sub .reg-form fieldset.reg-row > .fld { margin-left: 0; }
  main.sub .reg-form .agree-box { padding: 20px 16px 10px; }
  main.sub .reg-form .btn-submit { height: 58px; font-size: 16px; }
}
main.sub .notice-box::before { display: none !important; }
main.sub .notice-box p { padding-left: 0; }
main.sub .hs-tool.hs-check { max-width: 880px; margin-left: auto; margin-right: auto; padding: 40px clamp(20px, 5vw, 56px); border: 1px solid #ece6dc; border-radius: 14px; background: #fff; box-shadow: 0 30px 70px -44px rgba(40, 28, 15, .3); }
main.sub .hs-tool.hs-check input[type="checkbox"] { accent-color: var(--c-primary, #333); }
@media (max-width: 640px) { main.sub .hs-tool.hs-check { padding: 28px 18px; border-radius: 12px; } }
main.sub .notice-box { padding: 18px 24px; }
main.sub .notice-box p { position: relative; margin: 0; padding: 0; }
main.sub .notice-box p + p { margin-top: 4px; }
main.sub .notice-box p::before { position: static !important; display: inline !important; margin-right: 5px; }

/* ==== PC 글씨 키우기 (2026-10-12 주인 요청 '단지 폰트사이즈가 이정도는'; 자동 생성 — 사이트 CSS의 11~19px 글씨를 PC에서 1.2배) ==== */
@media (min-width: 1025px) {
body{font-size:19px}
.gnb .d1{font-size:18px}
.gnb .d2 a{font-size:15px}
.hd-reg{font-size:18px}
.hd-tel{font-size:31px}
.q-open b{font-size:20.5px}
.q-video p{font-size:19px}
.vm-title{font-size:20px}
.vm-close{font-size:38px}
.vm-tabs button{font-size:17px}
.q-top{font-size:14.5px}
.hero-links a{font-size:19px}
.contact-txt .sub{font-size:22px}
.contact-txt h2{font-size:clamp(40px, 5vw, 64px)}
.contact-txt dt{font-size:21px}
.contact-txt dd{font-size:21px}
.map-btns a{font-size:19px}
.view-more svg.ring text{font-size:10.5px}
.sec-title .en{font-size:18px}
.sec-title h2{font-size:clamp(26px, 3vw, 40px)}
.popup-foot{font-size:17px}
.popup-foot button{font-size:18px}
.lnb a{font-size:18px}
.page-title .en{font-size:18px}
.page-title h1, .page-title h2{font-size:clamp(30px, 3.4vw, 46px)}
.tabs button{font-size:21px}
.tabs button span{font-size:15.5px}
.tabs.many button{font-size:19px}
.notice-box{font-size:16px}
.notice-box::before{font-size:30px}
.down-btn a{font-size:21px}
.video-tit{font-size:20px}
.vr-link{font-size:18px}
.reg-lead{font-size:21px}
.req-note{font-size:15.5px}
.reg-row .tit{font-size:19px}
.reg-form input[type=text], .reg-form input[type=tel], .reg-form input[type=email], .reg-form select, .reg-form textarea{font-size:19px}
.chips span{font-size:18px}
.chips small{font-size:14.5px}
.agree-box h3{font-size:19px}
.terms{font-size:17px}
.check{font-size:18px}
.btn-submit{font-size:19px}
.site-footer{font-size:15.5px}
.ft-tel{font-size:40px}
.ft-tel small{font-size:17px}
.ft-privacy{font-size:15.5px}
@media (max-width: 1500px){.gnb .d1{font-size:18px}
.hd-tel{font-size:26px}
.q-open b{font-size:18px}
.q-video p{font-size:19px}
}.vr-launch strong{font-size:clamp(24px, 3vw, 34px)}
.vr-launch span:not(.vr-ico){font-size:19px}
.op-en{font-size:18px}
.op-tit{font-size:clamp(28px, 3.4vw, 42px)}
.op-lead{font-size:21px}
.op-note{font-size:15.5px}
.op-more a{font-size:18px}
.op-btn{font-size:20.5px}
.op-chip{font-size:17px}
.op-hero-tit{font-size:clamp(26px, 3.2vw, 40px)}
.op-hero-brand{font-size:.62em}
.op-hero-sub{font-size:19px}
.op-hero-deal{font-size:19px}
.op-deal-list .n{font-size:18px}
.op-deal-list p{font-size:19px}
.op-deal-list small{font-size:15.5px}
.op-fld > span, .op-fld > legend{font-size:18px}
.op-fld input[type=text], .op-fld input[type=tel], .op-fld textarea{font-size:19px}
.op-opt-tit{font-size:18px}
.op-chips span{font-size:18px}
.op-check{font-size:18px}
.op-terms-btn{font-size:15.5px}
.op-terms{font-size:15.5px}
.op-submit{font-size:21px}
.op-form .form-msg{font-size:18px}
.op-stats b{font-size:clamp(24px, 2.4vw, 32px)}
.op-stats span{font-size:18px}
.op-tabs button{font-size:19px}
.op-tabs button small{font-size:13px}
.op-table{font-size:19px}
.op-cards .k{font-size:14.5px}
.op-cards h3{font-size:20px}
.op-cards p{font-size:18px}
.op-cards .op-card-cta h3{font-size:24px}
.op-dl{font-size:19px}
.op-checks li{font-size:19px}
.op-checks li::before{font-size:14.5px}
.op-zoom{font-size:17px}
.op-lb-close{font-size:30px}
.op-docs a{font-size:19px}
.op-docs b{font-size:15.5px}
.op-final .op-dl a{font-size:22px}
.op-bar a{font-size:21px}
.op-bar-tel small{font-size:15.5px}
.op-en{font-size:15.5px}
.op-btn{font-size:19px}
.op-more a{font-size:17px}
.op-chip{font-size:15.5px}
.op-hero-brand{font-size:.55em}
.op-deal-list .n{font-size:30px}
.op-stats span{font-size:17px}
.op-cards .k{font-size:13px}
.op-cards h3{font-size:21px}
.op-dl dt{font-size:15.5px}
.op-final .op-dl a{font-size:28px}
.q-video p{font-size:19px}
.gal-cap strong{font-size:19px}
.gal-cap span{font-size:15.5px}
.gal-lb figcaption{font-size:18px}
.gal-lb button{font-size:30px}
.ft-admin{font-size:14.5px}
.seo-sum{font-size:18.5px}
.seo-sum h2{font-size:22px}
.op-faq summary{font-size:20.5px}
.op-faq summary::after{font-size:24px}
.op-faq details p{font-size:18.5px}
.info-table{font-size:19px}
.zoom-link{font-size:15.5px}
.doc-list a{font-size:20px}
.doc-list b{font-size:15.5px}
.doc-list span{font-size:14.5px}
.addr-list .k{font-size:14.5px}
.addr-list h2{font-size:24px}
.addr-list .btns a{font-size:17px}
.tabs button span{font-size:.78em}
.op-vision .k{font-size:14.5px}
.op-vision h3{font-size:20px}
.op-vision p{font-size:17.5px}
.popup-tel{font-size:18px}
.popup-tel span{font-size:19px}
.seo-links{font-size:15.5px}
.hc-chip{font-size:clamp(13px, 1.05vw, 17px)}
.hc-tit{font-size:clamp(30px, 4.1vw, 68px)}
.hc-sub{font-size:clamp(14px, 1.25vw, 20px)}
.prem-list .k{font-size:14.5px}
.prem-list h2{font-size:22px}
.op-gal p{font-size:20.5px}
.page-title h1 .pt-brand{font-size:max(14px, .36em)}
.op-en{font-size:14.5px}
.op-deal-list small, .op-stats span{font-size:16px}
.hs-toast{font-size:17px}
.op-visit select, .op-visit input[type=date], .reg-visit select, .reg-visit input[type=date]{font-size:18px}
.hs-tool > h2{font-size:24px}
.hs-tool > .lead{font-size:18px}
.ht-f span{font-size:15.5px}
.ht-f select, .ht-f input{font-size:19px}
.ht-range{font-size:17px}
.ht-quick button{font-size:15.5px}
.ht-loan summary{font-size:17px}
.ht-table{font-size:18px}
.ht-table td b{font-size:19px}
.ht-table td small{font-size:15px}
.ht-sum td b{font-size:21px}
.ht-loan-out{font-size:17.5px}
.ht-note{font-size:15px}
.ht-ptable{font-size:17.5px}
.ht-ptable thead th{font-size:15.5px}
.hc-pick select{font-size:19px}
.hc-col h3{font-size:21px}
.hc-col dl{font-size:17px}
.hc-img span{font-size:14.5px}
.hs-check label{font-size:18px}
.hs-check label small{font-size:15.5px}
.hs-check h3{font-size:19px}
.hs-tool h3.ht-sub{font-size:20.5px}
.hs-lb-x{font-size:30px}
.hs-ztag{font-size:14.5px}
.hs-lb-x{font-size:30px}
.hs-lb-tip{font-size:15px}
.hs-notice{font-size:17px}
@media (min-width:1025px){.site-footer p,footer p{font-size:16px}
}.k-xl > summary{font-size:15.5px}
.k-xl-box a{font-size:15.5px}
.op .op-tit{font-size:clamp(26px, 1.15rem + 1.85vw, 40px)}
.op .op-lead{font-size:clamp(15px, .88rem + .3vw, 17.5px)}
.op .op-note{font-size:16px}
@media (min-width: 769px){.op .op-deal-list small{font-size:17px}
}.op .op-btn{font-size:19px}
.k-more .k-mc-go{font-size:18px}
.page-title .en{font-size:15.5px}
.page-title h1, .page-title h2{font-size:clamp(28px, 1.1rem + 2.2vw, 44px)}
@media (min-width: 1025px){.quick .q-open b{font-size:18px}
}@media (min-width: 1025px) and (max-width: 1400px){.quick .q-open b{font-size:17px}
}@media (min-width: 1025px) and (max-height: 860px){.quick .q-open b{font-size:17px}
}.op-tit, main.sub .page-title h1, .ar-tit{font-size:48px !important}
.op-en, main.sub .page-title .en, .ar-en{font-size:14.5px !important}
.seo-links b{font-size:15.5px}
.seo-links p{font-size:0}
.seo-links p b, .seo-links p a{font-size:15.5px}
main.sub .reg-lead{font-size:clamp(16px, 1.6vw, 19px)}
main.sub .reg-form::before{font-size:13px}
main.sub .reg-form .req-note{font-size:15px}
main.sub .reg-form .reg-row .tit{font-size:18px}
main.sub .reg-form input[type="text"], main.sub .reg-form input[type="tel"], main.sub .reg-form input[type="email"], main.sub .reg-form input[type="date"], main.sub .reg-form select, main.sub .reg-form textarea{font-size:18px}
main.sub .reg-form .chips label span{font-size:17.5px}
main.sub .reg-form .agree-box h3{font-size:18px}
main.sub .reg-form .agree-box h3 + .terms, main.sub .reg-form .agree-box .terms{font-size:15.5px}
main.sub .reg-form .agree-box .check{font-size:17.5px}
main.sub .reg-form .btn-submit{font-size:20.5px}
main.sub .notice-box{font-size:15.5px}
.op-hero .op-hero-copy .hc-chip::before, .op-hero .op-hero-copy .hc-chip::after{font-size:.62em}
.kp-lead{font-size:18.5px}
.kp-note{font-size:15px}
.kp-btn{font-size:18px}
.kp-chips button{font-size:17.5px}
.kp-img span{font-size:14.5px}
.kp-num small{font-size:15.5px}
.kp-num b{font-size:30px}
.kp-num span{font-size:15.5px}
.kp-lv button{font-size:16px}
.kp-rows span{font-size:17.5px}
.kp-rows span small{font-size:14.5px}
.kp-rows b{font-size:19px}
.kp-loan{font-size:17px}
.kp-loan small{font-size:14.5px}
.kp-loan b{font-size:20px}
.kp-bk b{font-size:18px}
.kp-bk small{font-size:15px}
.kp-bv{font-size:18.5px}
.kp-more a{font-size:17.5px}
.kp-lb button{font-size:34px}
.kp-cond-note{font-size:15.5px}
.kp-pl button{font-size:15.5px}
.kp-areas button{font-size:18px}
.kp-areas button small{font-size:14px}
.kp-pl-note{font-size:15.5px}
}
@media (min-width: 1025px) and (max-width: 1439.98px) {
.gnb .d1{font-size:17px}
.gnb .d2 a{font-size:14.5px}
.hd-reg{font-size:17px}
.lnb a{font-size:17px}
@media (max-width: 1500px){.gnb .d1{font-size:17px}
}}

/* 자주 묻는 질문: 휴대폰에서 질문이 한 줄에 들어오게 살짝 작게 (2026-10-12 주인 요청) */
@media (max-width: 768px) { .op-faq summary { font-size: 14.5px; letter-spacing: -.02em; padding-right: 34px; } .op-faq summary::before { margin-right: 8px; } }

/* 견본주택 안내 단추: 네이버 지도·카카오 지도를 한 줄에 나란히, 관심고객등록은 그 위 한 줄 (2026-10-12 주인 요청) */
.op-btns:has(> .op-btn-line + .op-btn-line) > .op-btn-red { flex: 1 1 100%; }
.op-btns:has(> .op-btn-line + .op-btn-line) > .op-btn-line { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }

/* 첫 화면 칸 순서 정리 뒤 배경 번갈이: 스크립트가 끼워 넣는 분양가 계산·주변 시설 칸 (2026-10-12) */
#myplan.kp-sec { background: var(--lux-ivory, var(--c-bg-soft)); }
#nearby.kp-sec { background: transparent; }

/* 갤러리 사진 이름: 명조체가 잘 안 읽혀 본문 고딕체로 (2026-10-12 주인 요청) */
.op-gal p { font-family: inherit; font-weight: 600; letter-spacing: -.01em; }

/* 맞춤견적 평형 단추: 휴대폰에서 간격·여백을 줄여 오른쪽 단추가 더 보이게 (2026-10-12 주인 요청) */
@media (max-width: 768px) { section .kp-areas { gap: 7px; } section .kp-areas button { min-height: 42px; padding: 0 16px; gap: 5px; font-size: 14.5px; } section .kp-areas button small { min-width: 19px; height: 19px; font-size: 11px; } }

/* 칸 제목 아래 금색 선: 더 굵고 길게 (2026-10-12 주인 요청) */
.op .op-sec .op-tit::after { width: 72px; height: 2px; background: var(--c-primary, var(--lux-gold)); }   /* 2026-10-12 주인: 단지 테마색으로 통일 */
.op .op-dark .op-tit::after, .op .op-final .op-tit::after { background: var(--lux-gold); }   /* 어두운 칸은 금색 그대로(테마색이 어두우면 안 보임) */
@media (max-width: 768px) { .op .op-sec .op-tit::after { width: 56px; } }

/* 첫 화면 정보 상자: 단지 테마색 바탕 (2026-10-12 주인 요청 '이 상자도 테마색') */
@media (max-width: 768px) {
  .op-hero .hc-notice { background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--c-primary) 46%, #0c0b0a) 100%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--c-primary) 46%, #0c0b0a) 80%, transparent) 100%) !important; }   /* 2026-10-12 주인: 위는 진하게, 아래는 진하기 80% — 뒤 아파트가 비치게 */
  .op-hero .hc-notice { -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; }   /* 뒤 흐림을 약하게 해야 아파트가 보인다 */
  /* 2026-10-12 주인: 글씨가 바탕과 비슷해 안 보임 → 더 밝게·크게 */
  .op-hero .hc-notice .hn-main p, .op-hero .hc-notice .hn-sub p { color: #fff !important; font-size: 16.5px !important; }
  .op-hero .hc-notice .hn-main p b { color: #ffd98c !important; font-size: 23px !important; font-weight: 700 !important; }
  .op-hero .hc-notice .hn-sub p b { color: #ffd98c !important; font-size: 17px !important; font-weight: 700 !important; }
  .op-hero .hc-notice small { color: rgba(255,255,255,.86) !important; font-size: 13.5px !important; }
  .op-hero .hc-notice .hn-note { color: rgba(255,255,255,.72) !important; font-size: 12.5px !important; }
}

/* 첫 화면 정보 상자의 ※ 안내문 빼기: 상자가 길어져 아래 아파트 사진을 가렸다 (2026-10-12 주인 요청) */
.op-hero .hc-notice p.hn-note { display: none !important; }

/* 첫 화면 타입별 평면도: 누르면 크게 보기 (2026-10-12 주인 요청) */
.op-plan img[data-lb] { cursor: zoom-in; }

/* 2026-10-13 좁은 화면(네이버 앱 등)에서 하단 메뉴 긴 링크가 쪽을 밀어내지 않게 */
@media (max-width:760px){.seo-links a{white-space:normal!important}.seo-links,.seo-links p{overflow-wrap:anywhere;min-width:0}}