/* 핵심 요약(AT A GLANCE) — ★ 수한 교육자료 표준 스타일코드 + 400px 줄바꿈 규칙 · hs_glance2.py */
.glance{--gl-bg:color-mix(in srgb,var(--accent,#a8874a) 7%,var(--bg,#faf8f4));--gl-line:color-mix(in srgb,var(--accent,#a8874a) 28%,transparent);--gl-accent:var(--accent,#a8874a);--gl-max:1240px;background:var(--gl-bg);color:var(--ink,#292824);border-top:1px solid var(--gl-line);border-bottom:1px solid var(--gl-line)}
.glance .gl-wrap{max-width:var(--gl-max);margin:0 auto;padding:34px 24px 30px}
.glance .gl-title{font:700 11px/1.6 Arial,sans-serif;letter-spacing:.2em;color:var(--gl-accent);margin:0 0 14px;text-transform:uppercase}
.glance ol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 32px;margin:0;padding:0;list-style:none;counter-reset:gl}
.glance li{position:relative;padding-left:34px;font-size:15px;line-height:1.75;word-break:keep-all;counter-increment:gl;text-wrap:pretty}
.glance li::before{content:counter(gl,decimal-leading-zero);position:absolute;left:0;top:2px;font:700 12px/1.75 Arial,sans-serif;letter-spacing:.08em;color:var(--gl-accent)}
.glance a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--gl-accent) 45%,transparent)}
.glance a:hover{text-decoration-color:var(--gl-accent)}
.glance ol.gl-4{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.glance ol,.glance ol.gl-4{grid-template-columns:1fr;gap:12px}.glance .gl-wrap{padding:26px 20px 22px}.glance li{font-size:14px}}
/* 400px 줄바꿈 — 제목·버튼은 줄 폭을 맞추고, 문단·항목은 마지막 줄 고아 글자를 막는다 */
h1,h2,h3,.button{text-wrap:balance}
p,li,dd,summary{text-wrap:pretty}
/* 400px: 손으로 넣은 <br> 은 PC 폭 기준이라 모바일에서 줄 폭이 어긋난다 → 숨기고 balance 에 맡긴다. 히어로 H1 은 38px 로 눌러 6줄 → 4줄 */
@media(max-width:600px){h1 br,h2 br,h3 br{display:none!important}.hero h1{font-size:var(--h1m,32px)!important}.sub-hero h1{font-size:34px!important}}
/* 화면 검사 9-24: 격자 고아(7타입 3열→4열) · noir 아웃라인 버튼 글자 대비 · 이웃 섹션 배경 구분(.alt-band 는 hs_bands.py 가 붙인다) */
@media(min-width:901px){main .type-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.noir .button.outline{color:var(--accent)}
section.alt-band{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.location-list p+p{margin-top:14px}
/* 글자 대비 9-24 (사장님 실물 지적: 15호 산책 섹션 흰 글씨) — 밝은 배경 섹션은 먹색으로, 확대 힌트는 어디서나 어두운 알약 */
.v15 .nature,.v15 .nature h2,.v15 .nature h3,.v15 .nature p,.v15 .nature .text-link{color:var(--ink)}
.v15 .nature-copy .eyebrow,.v15 .nature-copy .note,.v15 .nature-copy .section-heading>p:last-child:not(.eyebrow){color:color-mix(in srgb,var(--ink) 78%,transparent)}
.v18 .nature,.v18 .nature h2,.v18 .nature h3,.v18 .nature p,.v18 .nature .text-link{color:#151c1b}
.v18 .nature-copy .eyebrow,.v18 .nature-copy .note,.v18 .nature-copy .section-heading>p:last-child:not(.eyebrow){color:rgba(21,28,27,.78)}
.v18 .unit-tabs button{color:#151c1b}
.v12 .nature,.v12 .nature h2,.v12 .nature h3,.v12 .nature p,.v12 .nature .text-link{color:var(--ink)}
.v12 .nature-copy .eyebrow,.v12 .nature-copy .note,.v12 .nature-copy .section-heading>p:last-child:not(.eyebrow){color:color-mix(in srgb,var(--ink) 78%,transparent)}
.noir .site-plan figcaption{color:#3b3f3c}
section.alt-band .eyebrow{color:color-mix(in srgb,var(--accent) 82%,var(--ink))}
/* 섹션 일러스트(hs_illus.py) — 글만 긴 섹션의 개념도 */
.illus{margin:0 0 30px;text-align:left}
.illus img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:#f7f4ee}
.illus.square img{max-width:480px}
.illus figcaption{font-size:12px;margin-top:8px;opacity:.85}
.about-grid .illus{margin-bottom:22px}
.source-information .illus{margin-top:-6px}
/* about 좌우 비율(사장님 9-24) — 주석은 전폭 한 줄로, 열은 1.15:1 */
@media(min-width:901px){.about-grid{grid-template-columns:1.15fr 1fr!important;gap:48px!important}}
.about-basis{margin-top:22px;font-size:12px}
/* 자연 섹션 리드 — 문장마다 한 줄(PC·모바일 두 줄) */
.nature-copy .section-heading>p:last-child:not(.eyebrow){max-width:none!important;white-space:normal}
.nature-copy .section-heading>p:last-child:not(.eyebrow) br{display:block}
/* 하단 연락 바 — 비아이피 레일 꼴 (사장님 9-24: 버튼 모양·모바일 전화번호 노출). PC=우측 하단 카드 2개, 모바일=두 칸 라벨만 */
.noir,.v18{--on-accent:#202423}
aside.floating-contact{position:fixed!important;right:24px!important;bottom:28px!important;left:auto!important;top:auto!important;width:auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:60!important;grid-template-columns:none!important}
aside.floating-contact>a{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;width:232px!important;min-height:62px!important;padding:10px 18px 10px 16px!important;border-radius:10px!important;box-shadow:0 8px 24px rgba(0,0,0,.16)!important;text-decoration:none!important;font-size:14px!important;line-height:1.3!important;text-align:left!important}
aside.floating-contact .floating-register{background:var(--bg)!important;color:var(--ink)!important;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)!important}
aside.floating-contact .floating-phone{background:var(--accent)!important;color:var(--on-accent,#fff)!important;border:1px solid var(--accent)!important}
aside.floating-contact .floating-label{display:flex!important;align-items:center!important;gap:8px!important;font-size:14px!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.3!important}
aside.floating-contact .floating-icon{width:18px!important;height:18px!important;flex:none!important}
aside.floating-contact .floating-detail{display:block!important;font-size:11px!important;opacity:.78;margin:0!important;letter-spacing:0!important}
aside.floating-contact .floating-number{display:block!important;font-size:15px!important;font-weight:700!important;margin:0!important;letter-spacing:0!important;line-height:1.3!important}
.back-to-top{display:none!important}
@media(max-width:600px){
 aside.floating-contact{left:0!important;right:0!important;bottom:0!important;flex-direction:row!important;gap:0!important;background:var(--bg)!important;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)!important;box-shadow:0 -6px 20px rgba(0,0,0,.12)!important;padding:0 0 env(safe-area-inset-bottom,0px)!important}
 aside.floating-contact>a{flex:1 1 0!important;width:auto!important;min-height:56px!important;padding:0 10px!important;border-radius:0!important;box-shadow:none!important;border:0!important;align-items:center!important;justify-content:center!important;gap:0!important}
 aside.floating-contact .floating-register{border-right:1px solid color-mix(in srgb,var(--ink) 12%,transparent)!important}
 aside.floating-contact .floating-detail,aside.floating-contact .floating-number{display:none!important}
 aside.floating-contact .floating-label{font-size:15px!important}
 body,body:has(>.floating-contact){padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))!important}
}
.zoom-hint{background:rgba(18,26,24,.82)!important;color:#fff!important}
/* 회색 주석·캡션은 대비 4.5 를 넘기도록 먹색 72% (테마 색을 따라간다) */
.note,p.note,figcaption,.section-heading>p:last-child:not(.eyebrow){color:color-mix(in srgb,var(--ink) 74%,var(--bg))}
/* 모바일 전용 줄바꿈(hs_h1mobile.py 가 실측해 넣는다) — PC 에서는 숨기고 400px 에서만 보인다 */
br.mbr{display:none}
@media(max-width:600px){h1 br.mbr,h2 br.mbr,h3 br.mbr,p br.mbr{display:inline!important}h1[style*="--hm"],h2[style*="--hm"],h3[style*="--hm"]{font-size:var(--hm)!important}}
