/* 시안 «별빛» 공간 대관 화면 CSS 그대로(https://hnart-media.imdsvr.com/15-daylight/) — site.css 뒤에 읽는다 */

/* ═══════════════════════════════════════════════════════════════════
   안 15 · 낮빛 (DAYLIGHT) — 공간대관
   정본 = 아트디렉션.md §3-E · §2-1(월×시간 격자 한 장) · §2-5(안내/신청 분리) · §2-13 · §2-14
        + 시안-콘텐츠-대본.md §2-3 · §2-4 · §2-7

   🔴 격자 축을 뒤집지 않는다 — 가로=날짜 · 세로=시간. 좁은 화면에서는 날짜를 열흘씩
      세 덩이로 잘라 세로로 쌓아 390px 가로 스크롤을 0 으로 만든다.
   🔴 어두운 바탕에서 상태 3종은 «면 + 테두리 + 글자 라벨» 로 가른다. 색만으로 가르지 않는다.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --bg2:#F1F5FC; --pane:#FFFFFF; --pane2:#F5F8FD;
  --line:#DCE3EF; --line2:#EAEFF7;
  /* 🔴 5판(2026-09-03) — 주색을 «별빛 밤하늘 남색»으로 잡는다.
     사용자: 「그 배경색을 메인컬러로 · 그라데이션도 그걸로」.
     🔴 12안 코발트 hsl(236°) 와 «색상각이 6° 밖에» 안 떨어진다 — 3축 중 색상각은
     겹친다. 갈리는 것은 나머지 둘이다: 명도 27 vs 58 · 채도 56 vs 86.
     12안은 «순백 위 밝은 코발트가 점점이», 15안은 «짙은 남색이 히어로에 모인다».
     흰 글자 대비 — #1E2A6B 13.10:1 · #131C4A 15.9:1 · #4C5BC4 5.89:1 */
  --gl:#3A4A9E;        /* 테두리·링 hsl(230,46%,42%) — 흰 바탕 7.80:1 */
  --g2:#1E2A6B;        /* 🔴 주색 — 칠. hsl(230,56%,27%) — 흰 글자 13.10:1 */
  --gv:#4C5BC4;        /* 램프의 밝은 끝 hsl(232,50%,53%) — 흰 글자 5.89:1 */
  --g1:#1E2A6B;        /* 🔴 글자·선 등급 강조 — 흰 바탕 13.10:1 */
  --g2-soft:#CFD5F1;   /* 주색 --g2 의 옅은 값 hsl(230,56%,88%) — 같은 색상·채도, 명도만 올림. 격자 '다른 공간에서 고른 시간' 칠 */
  --ink:#0F1633; --dim:#505D7C; --deep:#06091A;
  /* 🔴 «약간» 이다 — 램프 폭을 좁게 잡는다(#16204F → #2C3A8A · 명도차 한 단).
     넓은 램프는 작은 칩·달력 칸에서 «칸마다 다른 구간»이 잡혀 색이 제각각으로
     보였다. 그래서 이 램프는 «큰 면»에만 쓴다 — 큰 CTA · 켜진 4관 탭.
     🔴 마지막 «20%»만 보라로 넘긴다(#4A2E92 hsl 262°) — 밤하늘이 보라기를 띠는
     그 느낌이다. 80% 까지는 네이비라 색이 흔들리지 않는다.
     흰 글자 대비 = 네 스톱 전부 9.9:1 이상 (15.5 / 13.1 / 10.1 / 9.92) */
  --grad:linear-gradient(100deg, #16204F 0%, #1E2A6B 52%, #2C3A8A 80%, #4A2E92 100%);
  --grad-d:linear-gradient(148deg, #16204F 0%, #1E2A6B 52%, #2C3A8A 80%, #4A2E92 100%);
  --ease:cubic-bezier(.33,1,.68,1);
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;
  --wrap:1440px; --gap:20px; --r:16px; --sec:80px;
}
/* 🔴 4열 격자에서 카드 폭이 331.25px 처럼 «소수점»으로 떨어지면(세로 스크롤바가
   콘텐츠 폭을 1385 로 만든다) 1px 테두리가 두 픽셀에 걸쳐 그려져 칸마다 진하기가
   달라 보인다. 테두리를 box-shadow 링으로 바꾸고 아주 옅은 그림자를 함께 깔아
   가장자리가 «면»으로 읽히게 한다 — 편차가 눈에 걸리지 않는다.
   🔵 12안의 「호버 그림자」와 다르다 — 이건 «쉬는 상태»의 가장자리 처리다 */
:root{ --edge:0 0 0 1px rgba(15,22,51,.10), 0 1px 3px rgba(15,22,51,.045);
        --edge-on:0 0 0 1.5px var(--g1), 0 2px 10px rgba(15,22,51,.07) }
*{box-sizing:border-box}
/* 🔴 스크롤바 자리를 «늘» 비워 둔다 — 사이트맵을 열 때 body 스크롤을 잠그면
   스크롤바가 사라지면서 화면 전체가 그 폭만큼 옆으로 흔들린다 */
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{margin:0; color-scheme:light; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6; word-break:keep-all;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--g1); outline-offset:2px}
h1,h2,h3,h4{margin:0; color:var(--ink); letter-spacing:-.03em; line-height:1.24}
p,ul,ol,dl{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
b,strong{font-weight:700}

/* 🔴 4관 탭과 로그인·사이트맵을 «한 줄»에 둔다 — 검은 띠 하나가 둘을 다 받는다 */
.sitebar{background:#101010}
.sitebar-in{display:flex; align-items:center; justify-content:space-between; gap:16px}
.sitebar ul{display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none}
/* 🔴 2안과 «같은 높이·같은 글자»로 맞춘다 — padding 9px · 14px · line-height 1.3.
   어두운 띠 위 작은 흰 글자는 서브픽셀 렌더링에서 색이 번져 «깨져» 보인다.
   antialiased 로 끄면 또렷해진다 */
.sitebar{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.sitebar a{display:block; padding:9px 18px; font-size:14px; color:#FFFFFF;
  text-decoration:none; line-height:1.3; white-space:nowrap}
.sitebar ul a:hover{background:#2B2B2B}
/* 🔴 켜진 탭은 «단색»이다. 그라디언트 위 14px 흰 글자는 배경이 자리마다 달라져
   글자 테두리가 뭉갠 것처럼 보인다. 코발트 단색은 흰 글자 5.45:1 이다 */
.sitebar li.on a{background-image:var(--grad); color:#FFFFFF; font-weight:700}
/* 🔴 모바일에서는 로그인·사이트맵 줄을 걷는다 — 좁은 화면에 «머리»가 세 줄이 된다.
   대신 「메뉴」 버튼이 사이트맵(전체 메뉴)을 연다. 로그인은 그 안에 둔다 */
@media(max-width:760px){ .sitebar .util{display:none} }
.smap-login{display:none; margin-left:auto; margin-right:10px; border:0; cursor:pointer;
  background:var(--pane2); box-shadow:inset 0 0 0 1.5px var(--line2); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:700; padding:12px 20px; border-radius:999px}
.smap-login:hover{box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
@media(max-width:760px){ .smap-login{display:inline-flex} }
@media(max-width:760px){
  .sitebar-in{flex-wrap:wrap; gap:0}
  /* 🔴 다섯 관을 390px 에 욱여넣으면 4 + 1 로 접혀 마지막 하나가 혼자 한 줄을 먹는다.
     접지 말고 한 줄로 두고 옆으로 넘긴다 — 흘리는 것은 이 줄뿐이라 body 는 그대로다 */
  .sitebar ul{flex:1 1 100%; order:2; flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none}
  .sitebar ul::-webkit-scrollbar{display:none}
  .sitebar a{padding:8px 12px; font-size:12px}
  .sitebar li{flex:0 0 auto}
  .util{order:1; flex:1 1 100%; justify-content:flex-end; padding:4px 0 2px}
}

/* 검은 띠 «위»의 유틸 — 탭보다 한 톤 죽여 둘의 역할을 가른다 */
.util{display:flex; align-items:center; gap:2px; flex:none}
.util button,.util a{background:none; border:0; font-family:var(--sans); font-size:14px;
  color:rgba(255,255,255,.78); cursor:pointer; padding:0 11px; line-height:1;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:color .3s ease}
.util button:hover,.util a:hover{color:#FFFFFF}
.util svg{width:14px; height:14px}
.util .sep{color:rgba(255,255,255,.34); font-size:10px}
#loginbox{display:none; background:var(--pane); border-bottom:1px solid var(--line)}
#loginbox.on{display:block}
#loginbox .wrap{padding:18px 20px; font-size:15px; line-height:1.7; color:var(--dim)}
#loginbox b{color:var(--ink)}
#loginbox a{color:var(--g1); font-weight:700}

/* ═══ 사이트맵 — 전체 메뉴 한 판 ═══ */
/* 🔴 흐름 안에 두면 열 때마다 아래 내용이 통째로 밀린다. 화면 «위»를 덮는다.
   z-index 는 sticky 머리(40)보다 위여야 머리까지 덮는다 */
/* 🔴 «위에서 내려오는» 서랍이다 — 화면 위 가장자리에 붙어 내려오고, 아래는 가림막이다.
   가림막을 누르면 닫힌다 */
#sitemap{position:fixed; inset:0; z-index:80; background:rgba(15,22,51,.44);
  overflow-y:auto; overscroll-behavior:contain; display:none}
/* 🔴 부드럽게 열린다 — display 는 전이가 안 되므로 «켜질 때» 애니메이션을 건다.
   가림막은 옅어지며 나타나고, 판은 살짝 위에서 내려오며 커진다.
   닫을 때는 즉시 사라진다 — 닫는 동작은 기다릴 이유가 없다 */
#sitemap.on{display:block; animation:smapVeil .22s ease both}
#sitemap.on .smap{animation:smapPanel .3s var(--ease) both}
@keyframes smapVeil{from{opacity:0} to{opacity:1}}
/* 위에서 «내려온다». 🔴 이동 거리를 «묶어» 둔다 — -100% 로 두면 모바일에서 판이
   1086px 라 화면 밖 저 위에서 날아오고, 애니메이션이 중간에 멈추면 그대로 안 보인다.
   32px 만 밀어도 «내려오는» 것으로 읽히고, 최악의 경우에도 제자리 근처에 있다 */
@keyframes smapPanel{from{transform:translateY(-32px); opacity:0}
                     to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){
  #sitemap.on,#sitemap.on .smap{animation:none}
}
.smap{background:var(--bg); border-radius:0 0 24px 24px;
  box-shadow:0 20px 56px rgba(15,22,51,.24); padding:26px 0 52px; overflow:hidden}
.smap-top,.smap nav{max-width:var(--wrap); margin:0 auto;
  padding-left:20px; padding-right:20px}
.smap-top{display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-bottom:24px; border-bottom:1px solid var(--line)}
.smap-ttl{font-size:14px; font-weight:800; letter-spacing:.18em; color:var(--g1)}
.smap-x{width:52px; height:52px; flex:none; border:0; border-radius:999px; cursor:pointer;
  background:var(--pane2); box-shadow:inset 0 0 0 1.5px var(--line2);
  font-family:var(--sans); font-size:22px; line-height:1; color:var(--ink);
  transition:box-shadow .3s ease, color .3s ease}
.smap-x:hover{box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
.smap nav{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:40px 32px;
  align-content:start; padding-top:34px}
.smap h3{font-size:24px; font-weight:800; letter-spacing:-.035em; padding-bottom:16px;
  border-bottom:2px solid var(--ink)}
.smap h3 a:hover{color:var(--g1)}
.smap ul{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:15px}
.smap li a{font-size:18px; color:var(--dim); letter-spacing:-.02em}
.smap li a:hover{color:var(--g1)}
@media(max-width:1080px){ .smap nav{grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 26px} }
@media(max-width:680px){
  .smap{padding:18px 0 36px; border-radius:0 0 18px 18px}
  .smap-top,.smap nav{padding-left:14px; padding-right:14px}
  .smap nav{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding-top:26px}
  .smap h3{font-size:20px} .smap li a{font-size:16px}
}
@media(max-width:400px){ .smap nav{grid-template-columns:1fr} }
.head{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:40}
.head .wrap{display:flex; align-items:center; gap:26px; height:80px}
/* 🔴 로고 = 재단 워드마크(실물) + 세로 선 + 센터 이름. 4관 탭이 이미 「재단 아래 다섯 관」을
   말하고 있으므로 머리도 같은 구조로 읽힌다. 워드마크는 실제 기관 로고라 형태를 고치지 않는다 */
.ci{display:flex; align-items:center; gap:13px; flex:none}
.ci-org{width:auto; height:29px; flex:none}
.ci-bar{width:1px; height:26px; background:var(--line); flex:none}
.ci-ko{display:block; font-size:18px; font-weight:800; letter-spacing:-.045em; line-height:1.15;
  white-space:nowrap; color:var(--ink)}
.ci-en{display:block; font-size:9px; font-weight:600; color:var(--dim); letter-spacing:.16em; line-height:1.35}
.gnb{display:flex; gap:36px; margin-left:auto}
/* 🔴 주 메뉴는 «가장 먼저 읽히는 글씨»다 — 15px 700 은 로고 옆에서 묻혔다 */
.gnb a{font-size:18px; font-weight:700; letter-spacing:-.02em; padding:10px 0;
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .3s ease, border-color .3s ease}
.gnb a:hover{border-bottom-color:var(--g1); color:var(--g1)}
.gnb a[aria-current]{border-bottom-color:var(--g1); color:var(--g1)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:999px;
  font-family:var(--sans); font-size:13px; padding:8px 14px; cursor:pointer; color:var(--ink)}
#drop{display:none; border-bottom:1px solid var(--line); background:var(--bg2)}
#drop.on{display:block}
#drop a{display:block; padding:14px 0; border-bottom:1px solid var(--line2); font-weight:700}
#drop a:last-child{border-bottom:0}
@media(max-width:980px){ .gnb{display:none} .burger{display:block} .head .wrap{height:60px; gap:10px} }
@media(max-width:420px){ .ci-org{height:24px} .ci{gap:9px} }

/* 🔴 간격을 «위쪽 하나»로만 준다. 예전 방식(양쪽 패딩 + 인접 선택자로 위를 0)은
   두 섹션 사이에 다른 요소가 하나만 끼어도 인접이 끊겨 간격이 116 / 232 로 들쌂날쌂했다.
   위쪽에만 주면 무엇이 끼든 항상 같은 간격이 나온다 */
/* 🔴 섹션 사이 여백 = 96px. 근거는 «섹션 안»의 가장 큰 간격이다 —
   제목 → 내용 32px · 카드 사이 20px. 섹션 사이는 그보다 뚜렷이 커야 «다른 덩어리»로
   읽히지만, 128 은 제목 간격의 3.6배라 1440 에서 빈 구멍이 생겼다.
   80 = 32 × 2.5 — 제목 간격(32)의 두 배 반이라 «다른 덩어리»로는 읽히되
   빈 구멍은 생기지 않는다. 카드 사이 20 · 제목 32 · 섹션 80 의 리듬이다 */
.sec{padding:var(--sec) 0 0}
/* 🔴 바닥 여백은 main 이 «한 번»만 준다 — 섹션이 감싸개 안에 나뉘어 있으면
   :last-child 가 여러 번 맞아 아래 여백이 두 번 붙는다(대관에서 실제로 그랬다) */
main{padding-bottom:var(--sec)}
.sec-h{display:flex; align-items:flex-end; gap:20px; margin-bottom:32px; flex-wrap:wrap}
.sec-h h2{font-size:32px; font-weight:800; margin-top:10px}
/* 🔴 한 줄짜리 안내가 두 줄로 꺾이지 않게 폭을 넓혔다 — 좁은 화면에서는 그대로 접힌다 */
.sec-h .cap{font-size:15px; color:var(--dim); max-width:1120px; margin-top:12px}
.note{font-size:14px; color:var(--dim); margin-top:18px; line-height:1.75}
.note b{color:var(--ink)}

.btn{display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  border:0; box-shadow:inset 0 0 0 1.5px var(--line);
  background:transparent; color:var(--ink); font-family:var(--sans); font-size:15px; font-weight:700;
  padding:13px 24px; cursor:pointer; line-height:1.2; transition:border-color .3s ease, color .3s ease}
.btn:hover{box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
.btn:disabled{color:var(--dim); box-shadow:inset 0 0 0 1.5px var(--line2); cursor:default}
.gcta{position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:20px;
  width:min(428px,100%); min-height:74px; padding:14px 28px; border:0; border-radius:999px;
  background-image:var(--grad); color:#FFFFFF; font-family:var(--sans); font-weight:800; font-size:18px;
  cursor:pointer; overflow:hidden; text-align:left}
.gcta::before{content:''; position:absolute; inset:0; border-radius:999px;
  background-image:var(--grad-d); opacity:0; transition:opacity .3s ease}
.gcta > *{position:relative; z-index:1}
.gcta:hover::before{opacity:1}
.gcta small{display:block; font-size:13px; font-weight:700; margin-top:3px}
.gcta .ar{font-size:24px; font-weight:700; flex:none}

.st{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.st.on{background:var(--g2); color:#FFFFFF}
/* 🔴 26px 알약의 1px 테두리는 소수점 위치에서 두 픽셀에 걸쳐 흐려진다.
   테두리 대신 1.5px 안쪽 링으로 그어 또렷하게 만든다(레이아웃도 안 밀린다) */
.st.wait{background:var(--pane); box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
.st.off{background:var(--pane2); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--dim)}

/* ═══ 페이지 머리 ═══ */
/* 🔴 배경에 색을 깔지 않는다 — 메인과 같은 규칙(§3-F-4 ③) */
.ph{position:relative; overflow:hidden; padding:56px 0 0}
.ph .bc{font-size:13px; color:var(--dim); font-weight:700}
.ph h1{font-size:clamp(26px,2.4vw,34px); font-weight:800; margin-top:14px; letter-spacing:-.04em}
.ph .cap{font-size:16px; color:var(--dim); margin-top:18px; max-width:920px; line-height:1.75}
/* 흐리고 큰 «떠 있는 빛» — 또렷한 점으로 읽히지 않게 한다 */
.dot{position:absolute; border-radius:50%; background-image:var(--grad);
  opacity:.26; filter:blur(1.5px); pointer-events:none}
.d1{width:18px; height:18px; left:8%;  top:26%; animation:loop1 5s ease-in-out infinite}
.d2{width:11px;  height:11px;  left:52%; top:14%; animation:loop2 3s ease-in-out infinite}
.d3{width:16px; height:16px; left:93%; top:62%; animation:loop3 4s ease-in-out infinite}
.d4{width:12px;  height:12px;  left:31%; top:80%; animation:loop4 10s ease-in-out infinite}
@keyframes loop1{0%,100%{transform:translate(0,0)}   50%{transform:translate(14px,-18px)}}
@keyframes loop2{0%,100%{transform:translate(0,0)}   50%{transform:translate(-16px,12px)}}
@keyframes loop3{0%,100%{transform:translate(0,0)}   50%{transform:translate(-12px,-16px)}}
@keyframes loop4{0%,100%{transform:translate(0,0)}   50%{transform:translate(18px,10px)}}
.floaty{animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}

/* 머리 요약 4칸 */
/* 🔴 §2-16 로 그라디언트 막대를 걷고 나니 «가는 선»만 남아 칸이 흐려졌다.
   선으로 가르는 대신 각 칸을 «둥근 면»으로 세운다 — 면이 있으면 눈이 먼저 잡는다.
   🔵 §2-16 이 막는 것은 「둥근 카드 + 두꺼운 색선」이지 둥근 카드 자체가 아니다.
      여기에는 색선을 얹지 않는다. */
.sum{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
  gap:12px; margin-top:34px}
.sum > div{background:var(--pane2); border:0; border-radius:var(--r);
  padding:22px 24px 24px; box-shadow:var(--edge)}
.sum dt{font-size:14px; font-weight:700; color:var(--dim); margin-bottom:12px}
.sum dd{margin:0; font-size:30px; font-weight:800; letter-spacing:-.05em; line-height:1.05}
/* 단위·부가는 «작고 회색» — 숫자가 먼저 읽혀야 한다 */
.sum dd small{font-size:15px; font-weight:700; color:var(--dim); margin-left:5px;
  letter-spacing:-.01em}
@media(max-width:760px){
  /* 🔴 다섯 칸이 세로로 쌓이면 530px 를 먹는다 — 두 열로 접는다 */
  .sum{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .sum > div{padding:16px 16px 18px}
  .sum dt{font-size:13px; margin-bottom:8px}
  .sum dd{font-size:26px}
  .sum > div:last-child{border-bottom:0}
}

/* 탭 */
/* 🔴 위만 둥근 반쪽 알약(999px 999px 0 0)은 어디에도 붙어 있지 않아 어설프게 떠 보였다.
   한 트랙 안에 둘을 넣는 «분절 컨트롤»로 바꾼다 — 두 개 중 하나라는 것이 형태로 읽힌다 */
/* 🔴 선택 표시를 «칸마다» 칠하지 않고, 알약 하나를 미끄러뜨린다 —
   색이 켜졌다 꺼지는 것이 아니라 «하나가 옮겨 가는» 것으로 읽힌다.
   두 칸을 같은 폭으로 두어야 이동 거리가 정확히 100% 가 된다 */
.tabs{position:relative; display:inline-flex; gap:0; margin-top:34px; list-style:none; padding:4px;
  background:var(--pane2); border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line2)}
.tabs li{flex:1 1 0; display:flex; min-width:118px}
.tabs::before{content:''; position:absolute; left:4px; top:4px; bottom:4px;
  width:calc((100% - 8px) / 2); border-radius:999px; background:var(--g2);
  transition:transform .34s var(--ease); z-index:0}
.tabs[data-i="1"]::before{transform:translateX(100%)}
.tabs button{position:relative; z-index:1; flex:1; justify-content:center;
  font-family:var(--sans); font-size:15px; font-weight:700; cursor:pointer;
  padding:11px 26px; border-radius:999px; border:0; background:transparent; color:var(--dim);
  transition:color .28s ease}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:#FFFFFF; font-weight:800}
@media (prefers-reduced-motion: reduce){ .tabs::before{transition:none} }

/* ═══ 공간 칩 여덟 ═══ */
/* 🔴 auto-fit 으로 두면 1400px 에서 «7 + 1» 로 떨어져 라운지 하나가 홀로 남는다.
   공간이므로 넓은 화면에서는 4열로 못박아 4 + 4 로 반듯하게 떨어뜨린다 */
.rooms{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr)); gap:10px;
  /* 🔴 공간을 고르는 줄과 아래 달력은 «다른 일»이다 — 10px 로는 한 덩어리로 붙어 보인다 */
  list-style:none; padding:0; margin:0 0 28px}
@media(min-width:900px){ .rooms{grid-template-columns:repeat(4,minmax(0,1fr))} }
.rooms button{width:100%; text-align:left; font-family:var(--sans); cursor:pointer;
  background:var(--pane); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  color:var(--ink); display:flex; flex-direction:column; gap:4px;
  transition:border-color .3s ease, background .3s ease}
.rooms button:hover{border-color:var(--g1)}
/* 🔴 사진 자체에는 테두리를 두르지 않는다 — 카드 링과 두 겹이 되어 답답하다.
   면을 가르는 일은 카드의 링·그림자가 이미 하고 있다 */
/* 🔴 사진 자체에는 테두리를 두르지 않는다 — 카드 링과 두 겹이 되어 답답하다.
   카드의 그림자·링이 이미 면을 가르고 있다 */
.rooms img{width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; border-radius:8px;
  margin-bottom:4px}
.rooms .nm{font-size:16px; font-weight:800; letter-spacing:-.035em}
/* 🔴 요금은 «작게» — 고르는 기준은 공간 이름이고 요금은 곁들이다.
   층·호와 같은 줄에 두되 오른쪽 끝으로 밀어 둘의 역할을 가른다 */
.rooms .fl{font-size:12px; color:var(--dim); font-weight:700;
  display:flex; align-items:baseline; gap:8px}
.rooms .fl b{margin-left:auto; font-size:12px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.rooms button[aria-pressed="true"] .fl b{color:#FFFFFF}
.rooms button[aria-pressed="true"]{background:var(--g2); border-color:transparent; color:#FFFFFF}
.rooms button[aria-pressed="true"] .fl{color:rgba(255,255,255,.85)}
/* 그 공간에서 고른 시간 수(A안 숫자 배지, PO 2026-10-26) — 고른 공간(진한 남색) 단추 위에서는 흰 배지 */
.rooms .cnt{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  margin-left:7px; border-radius:999px; background:var(--g2); color:#FFFFFF; font-size:12px; font-weight:800; font-style:normal;
  letter-spacing:0; vertical-align:2px; font-variant-numeric:tabular-nums; line-height:1}
.rooms button[aria-pressed="true"] .cnt{background:#FFFFFF; color:var(--g1)}
/* 🔴 §2-15 ④ — 공간 블록 끝에 «한 번»만 */

/* ═══ 격자 ═══ */
.gridbox{background:var(--pane); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px}
.gridmeta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; font-size:14px;
  color:var(--dim); padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px}
.gridmeta b{color:var(--ink); font-size:16px}
.cal{overflow:hidden}
.cal + .cal{margin-top:20px}
.cal .ttl{font-size:13px; font-weight:800; color:var(--g1); margin-bottom:8px}
table.g{width:100%; border-collapse:collapse; table-layout:fixed}
/* 🔴 13안(불빛)의 달력을 «그대로» 밝은 판으로 옮긴다.
   칠은 «버튼»이 아니라 «칸»이 진다 — 버튼에 칠하면 알약이 되고, 알약을 앉히려고
   칸에 준 여백(td padding 3px)이 표 전체를 부풀린다. 13안처럼 칸을 꽉 채운다.
   색만 뒤집는다 — 어두운 칠 두 가지(#233260 대기 · #161D3E 마감)의 자리에
   밝은 칠을 넣고, 글자 대비를 다시 쟀다 */
/* 🔴 14안(틀) 방식 그대로 — 다만 먹 대신 «진한 청남»을 쓴다.
   ① 빈 칸 = 흰색 ② 대기 = 흰 칸에 «테두리만» ③ 마감 = 채움 + «흰 사선» ④ 고름 = 코발트.
   상태를 색뿐 아니라 «형태»(테두리 / 사선 / 채움)로도 갈라 놓는다 — 색각이상에서도 읽힌다.
   격자선은 --line2(#EAEFF7) 가 너무 옅어 흐리멍텅했다 → --line(#DCE3EF) */
table.g th,table.g td{border:1px solid var(--line); padding:0; text-align:center}
table.g thead th{font-size:12px; font-weight:800; color:var(--ink); padding:7px 0 6px; background:var(--pane2)}
table.g thead th .dw{display:block; font-size:10px; font-weight:700; color:var(--dim)}
table.g thead th.sun .dw{color:var(--g1)}
table.g th.hcol{width:62px; font-size:11px; font-weight:700; color:var(--ink); background:var(--pane2);
  padding:0 4px; white-space:nowrap}
table.g td button{width:100%; height:29px; border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:11px; font-weight:800; color:var(--dim); padding:0;
  transition:background .25s ease}
table.g td.ok{background:#FFFFFF}                          /* ① 선택가능 */
/* 🔴 호버도 «칸»에 칠한다. 버튼(29px)에 칠하면 테두리 두께만큼 짧아 보인다 —
   다른 상태는 전부 칸이 지고 있어 호버만 어긋났다 */
table.g td.ok:hover{background:var(--g2)}
table.g td.ok:hover button{color:#FFFFFF}
table.g td.wait{background:#FFFFFF; box-shadow:inset 0 0 0 2px var(--gl)}   /* ② 대기 = 테두리만 */
table.g td.wait button{color:var(--g1)}
/* ③ 마감 — 🔴 «무채색» 짙은 회색이다. 주색이 네이비가 되면서 청남 마감과
   붙어 안 갈렸다. 색을 빼면 셋이 성질로 갈린다 —
   대기(흰 칸+네이비 테두리) · 마감(회색 채움+사선) · 고름(네이비 채움).
   흰 글자 10.13:1 */
table.g td.full{background:#3A4050;
  background-image:linear-gradient(to top right,transparent calc(50% - .7px),rgba(255,255,255,.6) 50%,transparent calc(50% + .7px))}
table.g td.full button{color:#FFFFFF}
/* 휴관일(매주 월) — 열은 남겨 날짜가 안 건너뛴다 */
table.g td.closed{background:#EDEFF3}
table.g td.closed button{color:#9AA1AE; font-weight:700; cursor:default}
table.g thead th.closed{color:#9AA1AE; background:#EDEFF3}
table.g thead th.closed .dw{color:#9AA1AE}
table.g td button:disabled{cursor:default}
table.g td.sel{background:var(--g2)}                       /* ④ 고른 칸 · 흰 글자 5.45:1 */
table.g td.sel button{color:#FFFFFF}
/* 같은 시각 막기 — 다른 공간에서 고른 시간과 같은 시각 칸. 글자 없이 «옅은 남색 채움»만(PO 2026-10-26).
   고른 칸(진한 남색 채움) · 대기(흰 칸 + 남색 테두리) · 휴관(회색 채움)과 갈린다 — 같은 남색 계열이라 '내가 고른 것'과 이어져 읽힌다 */
table.g td.over{background:var(--g2-soft)}
table.g td.over button{cursor:default}
.legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; font-size:14px; color:var(--dim)}
.legend .k{display:inline-flex; align-items:center; gap:8px}
.legend i{display:inline-flex; align-items:center; justify-content:center; width:38px; height:22px;
  font-style:normal; font-size:10px; font-weight:800; border:1px solid var(--line)}
.legend i.ok{background:#FFFFFF}
.legend i.wait{background:#FFFFFF; box-shadow:inset 0 0 0 2px var(--gl); color:var(--g1); border-color:transparent}
.legend i.full{background:#3A4050; color:#FFFFFF; border-color:transparent;
  background-image:linear-gradient(to top right,transparent calc(50% - .7px),rgba(255,255,255,.6) 50%,transparent calc(50% + .7px))}
.legend i.sel{background:var(--g2); color:#FFFFFF; border-color:transparent}
.legend i.closed{background:#E9ECF1; color:#8B93A3; font-size:0}
.legend i.closed.mk{font-size:11px}   /* 글자가 든 회색 칸(이 공간 쉬는 날 · 운영 안 함) — 격자 칸 글자와 같은 크기 */
.legend i.over{background:var(--g2-soft); border-color:transparent}

/* ═══ 모바일 달력 — 같은 표를 옆으로 민다 ═══ */
@media(max-width:760px){
  /* 흘리는 것은 이 상자뿐이다 — body 는 그대로 overflow-x:hidden(390px 규칙 유지) */
  /* 🔴 max-width 를 못박지 않으면 상자가 표만큼 커져 «흘리지 않고» body 를 넘긴다 */
  #grid{min-width:0}
  .cal{max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
  table.g{table-layout:auto; width:max-content; min-width:100%}
  table.g td{min-width:44px}
  table.g thead th{min-width:44px; font-size:13px}
  /* 🔴 시간 열을 고정한다 — 옆으로 밀 때 몇 시 줄인지 잃지 않게 */
  table.g th.hcol{position:sticky; left:0; z-index:2; width:58px; min-width:58px;
    box-shadow:1px 0 0 var(--line2)}
  table.g thead th.hcol{z-index:3}
  table.g td button{height:34px; font-size:12px}
}

/* ═══ (안 씀) 날짜→시간 방식의 잔재 — 되살리려면 narrow() 를 monthGrid+dayList 로 ═══ */
.mcal{margin-bottom:24px}
.mcal-h{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:7px}
.mcal-h span{text-align:center; font-size:12px; font-weight:800; color:var(--dim)}
.mcal-h span:first-child{color:var(--g1)}
.mcal-g{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.mday{aspect-ratio:1; border:0; border-radius:12px; background:var(--bg2); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:700; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .12s ease}
.mday:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--g1)}
.mday:not(:disabled):active{transform:scale(.9)}
.mday.on{background:var(--g2); color:#FFFFFF; font-weight:800}
.mday.closed{background:#E9ECF1; color:#9AA1AE; cursor:default}
.mday-ttl{font-size:17px; font-weight:800; margin:0 0 12px}
.mslots{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.mslots button{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:0; border-radius:12px; padding:13px 14px; cursor:pointer; font-family:var(--sans);
  background:var(--bg2); color:var(--ink); font-size:15px; font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background .2s ease, box-shadow .2s ease, transform .12s ease}
.mslots button:not(:disabled):active{transform:scale(.96)}
.mslots .s{font-size:12px; font-weight:700; color:var(--dim)}
.mslots button.wait{background:var(--pane); box-shadow:inset 0 0 0 2px var(--g1)}
.mslots button.wait .s{color:var(--g1)}
.mslots button.full{background:var(--ink); color:#A8B0C8; cursor:default}
.mslots button.full .s{color:#8B93A3}
.mslots button.sel{background:var(--g2); color:#FFFFFF}
.mslots button.sel .s{color:rgba(255,255,255,.86)}

/* 선택 시간 */
.picked{margin-top:var(--gap); background:var(--pane); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 22px}
.picked h3{font-size:19px; font-weight:800}
.picked .empty{font-size:14px; color:var(--dim); margin:12px 0 18px}
.picked ul{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.picked li{display:inline-flex; align-items:center; gap:8px; background:var(--pane2);
  border:1px solid var(--line); border-radius:999px; padding:7px 8px 7px 14px; font-size:14px; font-weight:700}
.picked li button{width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--dim); cursor:pointer; font-size:12px; line-height:1;
  font-family:var(--sans); transition:border-color .3s ease, color .3s ease}
.picked li button:hover{border-color:var(--g1); color:var(--g1)}
.picked .total{margin-top:18px; font-size:15px; color:var(--dim)}
.picked .total b{color:var(--ink); font-size:17px}
.picked .memo{display:block; font-size:13px; margin-top:8px; line-height:1.7}
.picked .go{margin-top:20px}
/* 🔴 잠긴 신청 버튼 — 색을 걷고 «있다는 것»만 남긴다 */
.picked .gcta:disabled{background:var(--pane2); background-image:none; color:var(--dim);
  box-shadow:inset 0 0 0 1px var(--line); cursor:default}
.picked .gcta:disabled small{color:var(--dim)}
/* 선택 시간을 공간별로 묶음(PO 2026-10-26) — 이름 · 층호 줄(오른쪽에 그 공간 길이 · 요금) 아래 시간 칩 */
.picked h3 .n{font-size:15px; font-weight:700; color:var(--dim); margin-left:6px}
.picked .pgrps{margin-top:16px; display:flex; flex-direction:column; gap:14px}
.picked .pgrp + .pgrp{padding-top:14px; border-top:1px solid var(--line2)}
.picked .pgh{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; width:100%; text-align:left; background:none;
  border:0; padding:0; font-family:var(--sans); color:var(--ink); cursor:default}
.picked .pgh .pn{font-size:16px; font-weight:800; letter-spacing:-.03em}
.picked .pgh .pp{font-size:14px; font-weight:700; color:var(--dim)}
.picked .pgh .pcur{font-size:12px; font-weight:800; color:var(--g1); box-shadow:inset 0 0 0 1.5px var(--gl);
  border-radius:999px; padding:0 8px; line-height:20px}
.picked .pgh .ps{margin-left:auto; font-size:14px; font-weight:700; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap}
.picked .pgh .ps b{color:var(--ink); font-size:14px}
.picked .pgrp ul{margin-top:10px}
.picked .pgh .chev{display:none}
/* 폰 폭 — 지금 보는 공간 묶음만 펼치고 나머지는 이름 줄만(누르면 펼침, rental.js NARROW 와 같은 640) */
@media(max-width:640px){
  .picked .pgh{cursor:pointer; min-height:44px; align-content:center; position:relative; padding-right:28px}
  .picked .pgh .ps{margin-left:0; width:100%}
  .picked .pgh .chev{display:block; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-7px;
    border-right:2px solid var(--dim); border-bottom:2px solid var(--dim); transform:rotate(45deg)}
  .picked .pgrp.shut .chev{transform:rotate(-45deg); margin-top:-4px}
  .picked .pgrp.shut ul{display:none}
}

/* 요금 2단 */
.two{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--gap); align-items:start}
@media(max-width:900px){ .two{grid-template-columns:1fr} }
/* 한 칸짜리 묶음 — 옆 칸 내용이 짧아 하얗게 비는 곳(공간대관 요금) */
.two.two--one{grid-template-columns:minmax(0,1fr)}
.card{background:var(--pane); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px}
.tb{width:100%; border-collapse:collapse; font-size:15px}
.tb caption{text-align:left; font-size:13px; color:var(--g1); font-weight:800; padding-bottom:12px}
.tb th,.tb td{text-align:left; padding:13px 10px; border-bottom:1px solid var(--line2)}
.tb thead th{font-size:13px; font-weight:800; color:var(--g1); border-bottom:1px solid var(--line); padding-top:0}
.tb tbody th{font-weight:700}
.tb .n{text-align:right; font-variant-numeric:tabular-nums}
.tb tbody tr{transition:background .3s ease}
.tb tbody tr:hover{background:var(--pane2)}
.dl2{display:grid; grid-template-columns:88px minmax(0,1fr); gap:11px 14px; font-size:15px}
.dl2 dt{color:var(--g1); font-weight:800}
.dl2 dd{margin:0; color:var(--dim)}
.dl2 dd b{color:var(--ink)}
.stack{display:grid; gap:var(--gap); align-content:start}

/* 단계 다섯 */
.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:var(--gap)}
.steps li{counter-increment:s; background:var(--pane); border:0; box-shadow:var(--edge);
  border-radius:var(--r); padding:24px 22px; position:relative; overflow:hidden}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; right:16px; top:12px;
  font-size:34px; font-weight:800; color:var(--line); letter-spacing:-.05em}
/* 🔴 §2-16 — 둥근 카드 위의 두꺼운 색선을 걷었다. 순서는 «번호»가 말한다 */
.steps h3{font-size:18px; font-weight:800; margin-top:8px}
.steps p{font-size:14px; color:var(--dim); margin-top:10px; line-height:1.7}

.ul{margin:0; padding-left:18px; font-size:14px; color:var(--dim); line-height:1.9}
.ul li::marker{color:var(--g1)}

/* 배너모음·푸터는 site.css 한 곳에서만 꾸민다 — 쪽 CSS에 다시 적으면 메인과 서브 푸터가 달라진다(2026-10-30) */

@media(max-width:640px){
  :root{--sec:60px}
  :root{--sec:52px; --gap:14px}
  .wrap{padding:0 14px}
  .sec-h h2{font-size:25px}
  .gridbox,.picked,.card,.steps li{padding:18px 15px}
  .tabs button{padding:11px 18px; font-size:14px}
}

/* 모션 */
.rv{opacity:0; transform:translateY(var(--rv-y,20px));
    transition:opacity .45s var(--ease), transform .45s var(--ease); will-change:opacity,transform}
.rv.is-in{opacity:1; transform:none}
.rv--text{--rv-y:24px; transition-duration:.5s}
.rv--card{--rv-y:20px;  transition-duration:.45s}
.rv--item{--rv-y:16px;  transition-duration:.45s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .dot{display:none}
}
/* 공간·장비 상세 보기 — 밑줄 글 대신 시안 .btn.sm 테두리 단추를 강조색으로(PO 2026-10-26 C안 '링크 키우기', 자리는 그대로) */
.gridmeta .roomlink.btn{margin-left:10px; vertical-align:middle; text-decoration:none; color:var(--g1); font-weight:800;
  box-shadow:inset 0 0 0 1.5px var(--g1)}
.gridmeta .roomlink.btn:hover{background:var(--pane2)}