html{scroll-behavior:smooth}
body{margin:0}
*{box-sizing:border-box}
/* ═══════════════════════════════════════════════════════════════════
디자인 토큰 — Stayfolio 문법 채택 (대표 확정 2026-08-04)
⛔ 폐기: 더스티모브(#7A5C61 / #A98C91) 액센트 체계.
사유는 "촌스러워서"가 아니다 — **액센트 하나가 브랜드 전체를 대표하려다
A룸(어둡고 극적) 쪽에 붙어버려 B룸(밝은 자연광)을 못 받았다.**
룸별 페이지(/a·/b)가 생긴 지금 그 편향이 그대로 페이지 정체성이 된다.
채택 원칙(Stayfolio):
① **브랜드는 흑백과 사진** — 색으로 정체성을 만들지 않는다.
⇒ 화면의 색은 전부 **사진**이 담당한다. A룸 페이지는 검은 사진이,
B룸 페이지는 흰 사진이 지배한다. 틀은 같고 사진만 바뀐다.
② **액센트는 프로모 전용** — `--promo` 는 할인·프로모 배지에만 쓴다.
일반 UI(킥커·라벨·숫자·링크)에 **쓰지 않는다**.
③ **그림자 대신 헤어라인** — 면은 선으로 나눈다.
④ **위계는 크기 + 웨이트 2단(700/400)** — 색은 위계 도구가 아니다.
⚠️ 변수 **이름은 바꾸지 않았다**(--accent 등 49곳이 그대로 따라오게).
이름이 「accent」지만 값은 이제 **뉴트럴**이다 — 색을 넣지 말 것.
═══════════════════════════════════════════════════════════════════ */
:root{
/* 다크 = 우리 기본값. Stayfolio 는 라이트 전용이라 같은 원칙으로 자체 설계했다.
순검정(#000) 대신 살짝 띄운다 — 사진의 검정이 배경에 먹히지 않게. */
--bg:#0B0B0C; --panel:#151517; --elev:#1C1C1F; --line:#2B2B2E;
--line2:#4A4A4E; /* 테두리가 유일한 경계인 컨트롤용(WCAG 비텍스트 3:1) */
--ink:#F5F5F6; --dim:#A8A8AC; --faint:#7F7F84;
--accent:#A8A8AC; --accentSoft:#F5F5F6; --onAccent:#0B0B0C; /* 뉴트럴 — 색 아님 */
--btnBg:#F5F5F6; --btnFg:#0B0B0C; --btnHover:#D9D9DC;
--roomA:#A8A8AC; --roomB:#A8A8AC; /* 룸을 색으로 구분하지 않는다(사진이 구분한다) */
/* 🎨 달력 칩만 예외 — **기능적 구분이라 진짜 색을 쓴다** (2026-08-04 대표 지시).
종전 값(A #F5F5F6 / B #B8B8BE)은 «명도만 다른 회색 2개» 였고, 모바일은 텍스트를 숨겨
5px 바 색만 남기므로 **두 룸이 사실상 구분되지 않았다** — 대표 「회색끼리 두면 의미가
없잖아요」. 예외를 선언해 놓고 회색으로 구현하면 예외가 죽는다.
A=동양풍 달 조명의 앰버 / B=자연광·통창의 청록. 색상환에서 멀고 **황-청 축**이라
적록색맹에서도 갈린다. 대비는 칩 배경(15/18% 틴트) 위 5.1:1 이상 실측(테스트로 박제).
⚠️ 이건 --roomA/--roomB(룸 카드)의 「색으로 구분하지 않는다」와 층이 다르다 — 저긴
브랜드 표현, 여긴 **읽어내야 하는 데이터**다. 색맹 안전판으로 칩에 룸 글자도 넣는다. */
--calA:#E8965A; --calB:#5CC9BE;
--promo:#017BC6; /* ⚠️ 프로모·할인 배지 전용. 일반 UI 사용 금지 */
--label-font:'Pretendard',sans-serif;
}
[data-theme="light"]{
/* 라이트 = Stayfolio 값을 거의 그대로 채택 */
--bg:#FFFFFF; --panel:#F7F7F8; --elev:#FFFFFF; --line:#DFE0E2;
--line2:#B4B4B8;
/* --faint 2026-08-05: #8A8A8E → #6E6E72. 흰 배경에서 3.21:1 로 AA(4.5) 미달이었다(실측).
후기 작성자·날짜, 예약 안내문, 푸터가 전부 이 토큰이라 라이트 모드에서 본문급 텍스트가 규격 미달로 나갔다.
새 값 = 흰 배경 5.11:1 · 패널(#F5F5F6) 위 4.68:1 로 둘 다 통과. 다크(#7F7F84)는 4.83:1 이라 그대로 둔다. */
--ink:#181818; --dim:#5E5E61; --faint:#6E6E72;
--accent:#5E5E61; --accentSoft:#181818; --onAccent:#FFFFFF;
--btnBg:#000000; --btnFg:#FFFFFF; --btnHover:#2A2A2C;
--roomA:#5E5E61; --roomB:#5E5E61;
--calA:#8F3D12; --calB:#0C5F5B; /* 라이트: 같은 앰버/청록을 어둡게 — 대비 5.45 / 5.30 */
}
body{font-family:'Pretendard',system-ui,sans-serif;font-weight:400;line-height:1.7;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;word-break:keep-all}
[data-theme] *{transition:background-color .45s ease, border-color .45s ease, color .35s ease}
a{color:inherit}
@keyframes nvKen{from{transform:scale(1.05)}to{transform:scale(1.13)}}
@keyframes nvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* ── 헤더 = 상단 고정 바 (2026-08-04 Stayfolio 레이아웃 전환) ──────────────
종전엔 데스크탑만 좌측 고정 사이드바(284px)였다. 그걸 걷어낸 이유는 미감이 아니라:
① 사이드바가 **사진 폭을 284px 깎는다** — 방금 채택한 「사진이 주인공」 원칙과 충돌.
② 예약 UI 가 좌측 세로 막대에 갇혀 있어 **나중에 결제(PortOne)를 붙일 자리가 없다.**
Stayfolio 처럼 상세 우측에 예약 카드를 두면 그 카드가 그대로 체크아웃이 된다.
⚠️ HTML 구조는 그대로 두고 CSS 로만 재배치한다(index.html·room.template.html 공용).
`.sidetop` 은 인라인 style 로 flex 라 `display:contents!important` 로 풀어
자식(로고·테마버튼)을 상단 바의 직접 flex 아이템으로 만든다 → 테마버튼만 order 로 우측 이동. */
.side{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
padding:13px 40px;background:color-mix(in srgb,var(--panel) 88%,transparent);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-bottom:1px solid var(--line)}
.sidetop{display:contents!important}
.sidetag,.siderule,.sidefoot{display:none}
.brandsub{display:none}
/* ⚠️ .sidenav 는 인라인 style="display:flex;flex-direction:column;gap:1px" 를 갖고 있다.
인라인이 스타일시트를 이기므로 gap 도 !important 가 필수다(안 하면 링크가 전부 붙어 나온다). */
.sidenav{flex-direction:row!important;gap:24px!important;margin-left:6px}
.side a.nav{color:var(--dim);font-size:14px;padding:0;display:flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
.side a.nav:hover{color:var(--ink)}
.side a.nav .no{display:none} /* 가로 배치에선 번호가 노이즈다 */
#themeBtn{order:99;flex:none}
.book{margin:0 0 0 auto!important;flex-direction:row!important;gap:9px}
.book a{width:auto!important;padding:9px 18px;font-size:13.5px;white-space:nowrap;
transition:background .25s,transform .25s,border-color .25s,color .25s}
.main{margin-left:0;min-width:0}
.inner{max-width:1380px;margin:0 auto;padding:0 40px}
.sec{padding:96px 0;border-top:1px solid var(--line)}
.sechead{display:flex;align-items:flex-start;gap:18px;margin-bottom:18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sechead .snum{font-family:var(--label-font);font-weight:700;font-size:clamp(30px,3.4vw,50px);line-height:.9;letter-spacing:-.02em;color:var(--accent)}
/* 킥커(섹션 위 작은 라벨). 종전엔 `.sechead .skick` 자손 선택자뿐이라 .sechead 밖에서 쓰면
안 먹었고, 그래서 룸 페이지 예약 카드에서 **같은 값을 인라인으로 통째 복사**하게 됐다
(= 값이 두 곳으로 갈라짐. CSS 를 고쳐도 그쪽은 안 따라온다). 독립 클래스로 올린다. */
.skick{font-family:var(--label-font);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.sechead .skick{margin-bottom:6px}
.sechead h2{font-weight:700;font-size:clamp(28px,3.8vw,44px);letter-spacing:-.025em;margin:0;line-height:1.08}
.desc{color:var(--dim);max-width:560px;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--btnBg);color:var(--btnFg);font-weight:700;padding:12px 26px;border-radius:3px;font-size:14px;text-decoration:none;transition:background .25s,transform .25s}
.btn:hover{background:var(--btnHover);transform:translateY(-2px)}
/* 2026-07-29 대비: 테두리가 유일한 경계인 컨트롤(.btn.line/.nv-chip)만 --line(1.19:1) 에서 분리.
WCAG 비텍스트 3:1 기준. --line 전역은 불변(구분선·카드테두리는 그대로).
⚠️지정값 ink 32% 는 실측 1.98~2.67:1 로 미달이라 50% 로 올림(라이트 3.17 / 다크 4.76). */
.btn.line{background:transparent;color:var(--ink);border:1px solid color-mix(in srgb, var(--ink) 50%, transparent);font-weight:500}
.btn.line:hover{border-color:var(--accent);color:var(--accent);background:transparent;transform:translateY(-1px)}
/* ── 룸 카드 그리드 (2026-08-04 정보구조 재편) ──────────────────────
Stayfolio 홈은 **큰 사진 카드가 사진을 나르고** 별도 갤러리 섹션이 없다.
허브는 「고르는 곳」이고 상세는 /a·/b 가 맡는다 — 그래서 카드는 사진·이름·한 줄·태그까지만.
⚠️ 카드 전체가 링크다(a.roomcard) — 안에 또 버튼을 넣지 않는다(중첩 링크 금지). */
.roomcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.roomcard{display:block;text-decoration:none;color:inherit;min-width:0}
.roomcard-img{aspect-ratio:4/3;overflow:hidden;border-radius:8px;border:1px solid var(--line);
background:linear-gradient(135deg,var(--elev),var(--panel))}
.roomcard-img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.roomcard:hover .roomcard-img img{transform:scale(1.04)}
.roomcard-body{padding:16px 2px 0}
.roomcard-kick{font-family:var(--label-font);font-size:11px;letter-spacing:.2em;color:var(--dim)}
/* 「NEW」 칩 — 새로 연 룸 표시(B룸 2026-08-03 오픈).
⚠️ 색으로 강조하지 않는다 — 디자인 정본 v1.3 은 액센트 색이 없고 위계는 «크기+웨이트»다.
그래서 --promo(#017BC6) 도 쓰지 않는다(그건 할인·프로모 배지 «면» 전용이고 NEW 는 프로모가 아니다).
강조 수단 = **명도 반전**. 배경 --ink / 글자 --bg 라 다크·라이트 양쪽에서 자동으로 뒤집히고
대비는 다크 18:1 · 라이트 16.9:1 이다(--btnBg/--btnFg 와 같은 반전 문법). */
.roomcard-new{display:inline-block;margin-left:8px;
font-family:var(--label-font);font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1;
background:var(--ink);color:var(--bg);padding:4px 7px 3px;border-radius:3px}
.roomcard h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:7px 0 8px}
.roomcard p{color:var(--dim);font-size:14px;line-height:1.7;margin:0 0 12px}
.roomcard-tags{display:flex;gap:6px;flex-wrap:wrap}
.roomcard-tags span{font-family:var(--label-font);font-size:11px;color:var(--dim);
border:1px solid var(--line);padding:4px 10px;border-radius:999px}
@media(max-width:760px){.roomcards{grid-template-columns:1fr;gap:32px}}
/* ── 히어로 높이 (2026-08-04) ──────────────────────────────────────
⚠️ `height:76vh/90vh` **고정**은 짧은 창에서 콘텐츠를 **위쪽부터** 잘라먹는다
(flex-end + overflow:hidden 조합이라 아래가 아니라 위가 손실된다).
2026-07-29 에 ≤640px 에서 같은 버그를 고쳤는데, 상단 바 도입으로 히어로 가용 높이가
줄면서 **데스크탑 짧은 창(≈675px)에서 재현**됐다 — .herotop 과 h1 이 겹쳤다(실측).
⇒ 높이는 콘텐츠에 맡기고(height:auto) 뷰포트 비율은 **하한(min-height)으로만** 쓴다.
svh = 인앱 브라우저 바를 뺀 실제 표시 높이(vh 는 과대계산 → 같은 잘림 재발).
⚠️ 인라인 height/min-height 를 이겨야 하므로 !important 가 필수다. */
.hero{height:auto!important;min-height:76svh!important;padding-top:92px}
/* ── 룸 페이지 2단 본문 (2026-08-04) ─────────────────────────────────
좌측 = 소개·공간·후기 / 우측 = 고정 예약 카드.
🔜 우측 카드가 **PortOne V2 체크아웃이 들어갈 자리**다(Stayfolio 상세 구조를 그대로 가져왔다).
⚠️ 좌측 섹션은 .sec/.inner 를 쓰지 않는다 — 여기서 폭·여백을 잡으므로 붙이면 이중이 된다. */
.roombody{padding:80px 0;border-top:1px solid var(--line)}
.roomgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.roomgrid-main{min-width:0}
.roomgrid-main > section{margin:0 0 76px;min-width:0}
.roomgrid-main > section:last-child{margin-bottom:0}
.roomgrid-side{position:sticky;top:76px;min-width:0} /* 76px = 상단 바 높이 여유 */
.bookcard{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--panel)}
@media(max-width:1080px){
.roomgrid{grid-template-columns:1fr;gap:44px}
.roomgrid-side{position:static}
.roombody{padding:56px 0}
.roomgrid-main > section{margin-bottom:56px}
}
/* calendar */
#calGrid .cell{min-height:96px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 7px 9px;display:flex;flex-direction:column;gap:3px;overflow:hidden;cursor:pointer}
#calGrid .cell:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
@media(max-width:920px){
/* 좁아지면 nav 링크는 접고 하단 chipbar 에 넘긴다(바 높이 유지). 나머지는 상단 바 기본값 그대로. */
.side{gap:10px;padding:8px 18px}
.sidenav{display:none!important}
/* ⚠️ .book 은 인라인 style="margin-top:24px" 를 갖고 있고 인라인이 스타일시트를 이긴다
→ margin 오버라이드는 !important 가 필수다(2026-07-29 실측). 상단 바 전환 후에도 동일.
※ 구 주석의 「데스크탑 세로 사이드바에서 nav 와 예약버튼 사이 간격」 사유는 2026-08-04
상단 바 전환으로 소멸했다(세로 사이드바가 없다). !important 는 인라인 때문에 남는다. */
.book a{padding:7px 16px;font-size:13px}
.book .book2{display:none}
.herotop{display:none!important}
.inner,.heroin,.herotop{padding-left:22px;padding-right:22px}
/* ≤920px 은 .herotop 을 숨기므로(위 규칙) 상단 여백을 줄인다.
⚠️ 구 `height:78vh;min-height:440px` 는 제거했다 — 기본 규칙(.hero height:auto!important)에
이미 져서 죽은 선언이었다(2026-08-04 상단 바 전환 후). */
.hero{padding-top:28px}
.info{grid-template-columns:1fr 1fr}
.info .it:nth-child(2){border-right:none}
}
@media(max-width:760px){.room{grid-template-columns:1fr!important}.room .rimg{min-height:300px!important}.roomwrap{direction:ltr!important}}
@media(max-width:560px){.gal{grid-template-columns:1fr!important}.specs{grid-template-columns:1fr!important}.specs .it{border-right:none!important}.info{grid-template-columns:1fr 1fr!important}.sechead{flex-wrap:wrap}}
/* 후기 카드 데스크탑 매이슨리(컬럼형): 원래 인라인 style="column-width:250px"였던 것을 여기로 이전.
이유(핀치줌 버그 근본원인) — #reviewCards가 인라인 style로 항상(모바일 포함) column-width를 갖고 있으면,
모바일 미디어쿼리가 즉시 display:flex로 덮어써도 그 찰나에 이미 생성된 멀티컬럼 레이아웃 객체가
내부적으로 남아 폭 계산이 깨짐(자체 폭에 대해 %/뷰포트 계산이 어긋나 고정 스티키바가 문서 밖으로 확장 →
documentElement.scrollWidth 급증 → 핀치 확대/축소 시 가로 넘침·스티키바 이탈로 체감). 데스크탑 전용 규칙으로
옮겨 모바일에서는 애초에 컬럼 레이아웃 객체가 생성되지 않게 함(재현·수정 검증 완료). */
@media(min-width:641px){
#reviewCards{column-width:250px;column-gap:14px}
}
/* ===== 모바일 전용 개선(설계안 C) — 전부 ≤640px 스코프, 데스크탑 규칙 변경 없음 ===== */
@media(max-width:640px){
/* 1) 히어로: SCROLL 인디케이터가 줄바꿈된 CTA와 겹치는 버그 → 모바일에서 숨김. 높이 축소. CTA 세로 스택으로 겹침 방지 */
.scrollind{display:none!important}
/* ⚠️2026-07-29 P0: 종전 height:72vh 고정 + justify-content:flex-end + overflow:hidden 조합에서
히어로 콘텐츠(.heroin 551.7px)가 박스(478.1px@390 / 460.8px@360)보다 크면 넘친 만큼이
**위쪽부터** 잘려나갔다(flex-end라 아래가 아니라 위가 손실). 실측: 390×664에서 h1 첫 줄이
3px만 보이고 킥커는 완전 소멸, 360×640은 h1 첫 줄까지 통째로 소멸.
⇒ 높이를 콘텐츠에 맡기고(height:auto) 뷰포트 비율은 하한(min-height)으로만 쓴다.
svh = 인앱 브라우저 상·하단 바를 뺀 실제 표시 높이(vh는 바를 무시해 과대계산 → 같은 잘림 재발).
미지원 구형 브라우저용 vh 선언을 앞에 둔다(뒤 선언이 이기는 CSS 폴백). */
.hero{height:auto!important;min-height:72vh!important;min-height:72svh!important}
.herocta{width:100%;flex-direction:column;align-items:stretch}
.herocta a{width:100%;justify-content:center}
/* 2) 통계바 4열→2×2 + 격자선 정합 + 패딩 축소 (베이스가 inline grid-template-columns/border라 !important 필요) */
.info{grid-template-columns:repeat(2,1fr)!important}
.info .it{padding:20px 16px!important;border-right:1px solid var(--line)!important}
.info .it:nth-child(2n){border-right:none!important}
.info .it:nth-child(1),.info .it:nth-child(2){border-bottom:1px solid var(--line)}
/* 3) 🗑️ 구 "B룸 카드 압축"(모바일에서 카드 숨기고 한 줄 요약만) 제거 — 2026-07-26.
리뉴얼 중이라 보여줄 사진도 없고 예약도 못 받던 시절의 처리였다. 지금은
낮 촬영본 7장이 있고 예약도 받는데, 모바일에서만 **사진 0장·예약버튼 숨김**
상태였다(A룸은 풀카드). 모바일 사용자에게 B룸은 텍스트 한 줄이었고
예약은 페이지 한참 아래까지 내려가야 닿았다.
⇒ A룸과 동일하게 풀카드로 노출한다(760px 쿼리가 1열로 세로 적층 처리). */
/* 4) 갤러리: 세로 적층(560px 쿼리) → 가로 스와이프 카드
contain:layout — 가로 스크롤 컨테이너 내부 콘텐츠 폭이 문서/뷰포트 계산으로 새어나가는 것을 차단
(핀치줌 버그 재현·근본원인, 아래 #reviewCards 주석 참조). .gal은 현재 미재현이나 방어적으로 동일 적용 */
.gal{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding-bottom:6px;contain:layout;scrollbar-width:none;-ms-overflow-style:none}
.gal::-webkit-scrollbar{display:none}
.gal>div{flex:0 0 82%;scroll-snap-align:center;scroll-snap-stop:always;min-width:0}
/* 5) 후기: 컬럼 매이슨리 → 가로 스와이프 캐러셀 재도입(설계안 A: 활성 카드 실측 높이로 컨테이너 동적 조정)
⚠️2026-07-16 1차 시도 실패 이력: flex-nowrap 캐러셀로 바꿨더니 후기 카드마다 높이가 제각각(사진無
1줄 글만 vs 사진 포함 여러 줄)인데 flex 행 기본 align-items:stretch 때문에 전 카드가 그 행 최대
카드높이(524px)로 강제 스트레치 → 짧은 카드 아래 큰 빈 공간 발생(devtools 확정) → 세로스택 롤백.
2차: align-items:flex-start(스트레치 금지, 카드 자연높이)로 스트레치 자체를 제거하고, #reviewCards의
CSS height는 고정하지 않되 JS(아래 스크립트, 스크롤 위치로 가운데 스냅 카드 감지 후 그 카드의
getBoundingClientRect().height를 host.style.height에 반영)가 캐러셀 행 전체 높이를 활성 카드에
맞춰 동적으로 줄이거나 늘림 → 짧은 카드로 스와이프하면 행 자체가 줄어 빈공간 0, 후기 전문 유지.
⚠️핀치줌 버그 재유입 금지: column-width(멀티컬럼) 사용 안 함, contain:layout·
width/min-width/max-width:100%는 그대로 유지(.gal과 동일 방어). 카드는 flex:0 0 85%+min-width:0+
scroll-snap-align:center, 카드 inline margin-bottom은 !important로 0 오버라이드.
⚠️실측 버그: 컨테이너 자체에 인라인 style="min-height:200px"(로딩 중 레이아웃 점프 방지용)가 있어
짧은 카드(예: 93.7px)로 스와이프해도 min-height가 바닥을 200px로 고정 → 정확히 재발하려던 빈공간
버그(devtools 재현·확정, 도착지 385~390 에뮬레이션). min-height:0!important로 무력화(로딩 중
점프는 JS syncReviewHeight 초기 실행이 대신 방지). */
#reviewCards{column-width:unset!important;column-gap:unset!important;columns:unset!important;
display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;
overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;
gap:12px!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:0!important;
contain:layout;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;
transition:height .25s ease}
#reviewCards::-webkit-scrollbar{display:none}
#reviewCards>div{flex:0 0 85%!important;scroll-snap-align:center;scroll-snap-stop:always;min-width:0;margin:0!important}
/* 6) 아코디언: 처음이세요 4단계 — 탭하면 펼침(순수 CSS, 클래스는 JS로 aria-expanded만 토글). 텍스트는 DOM에 그대로 유지 */
.fv-h{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.fv-ico{display:inline-block!important;transition:transform .2s ease}
.fv-h[aria-expanded="true"] .fv-ico{transform:rotate(45deg)}
.fv-body{display:none}
.fv-h[aria-expanded="true"] + .fv-body{display:block;margin-top:10px!important}
/* FAQ(details/summary)는 네이티브 접힘이 이미 기본 동작이라 추가 규칙 없음 */
/* 7) 섹션 상하 패딩 축소(~40%) */
.sec{padding:58px 0}
.sec-cta{padding:70px 0!important}
/* 8) 예약현황 달력(#calGrid): 360px에서 7열×51px 셀에 이벤트 텍스트("18:00 - 21:00 예약됨",
font-size:10px·white-space:nowrap·ellipsis)가 잘려 거의 안 보이던 버그(devtools 재현·확정,
before_360.png) 수정. ⚠️실측: 이벤트 div는 JS(renderCal)가 class 없이 순수 인라인 style.cssText만
주입해 생성(".ev"는 데스크탑 CSS에도 있지만 매치되는 요소가 없는 죽은 셀렉터였음, devtools outerHTML로
확인) → 구조 셀렉터(.cell > 두 번째 div(이벤트 박스) > 그 자식 div)로 타겟팅. renderCal()이 매 렌더
.cell에 인라인으로 min-height:96px 등을 강제 주입하므로 외부 CSS로 덮으려면 !important 필수. 월간
7열 그리드는 그대로 유지하고(설계안 우선순위: 마커 그리드), 셀을 조밀화 + 이벤트 텍스트는 시각적으로
숨기고 룸별 배경색(ROOM.A/B, --calA/--calB, 인라인 style이라 오버라이드 없이 그대로 유지)은 남긴 채
가는 색상 바("예약 있음" 마커)로 축소 — 어느 날 예약됐는지 한눈에 보이게. 탭→상세는 기존 showDay()/
#dayDetail JS(클릭 리스너·fetch 로직 포함)가 완전히 그대로 처리하므로 JS 변경 없음(CSS 전용). */
#calGrid .cell{min-height:46px!important;padding:4px 3px 3px!important}
#calGrid .cell>div:nth-child(2)>div{font-size:0!important;line-height:0!important;padding:0!important;margin:0!important;
height:5px!important;min-height:5px!important;border-radius:3px!important;background:currentColor!important;opacity:1;white-space:nowrap;overflow:hidden}
/* ⚠️2026-07-29: 종전 background:var(--accent)!important 가 renderCal() 의 룸별 인라인 색을 전부 덮어
마커가 일색(rgb(169,140,145))이었다. 그런데 그 선언을 **제거만** 하면 인라인 배경
color-mix(--calA 15%, transparent) 가 드러나는데, 5px 바에서 15% 틴트는 실측 대비 1.22~1.34:1 로
사실상 안 보인다(원래 목적인 "B룸 가동을 읽는다"를 그대로 놓친다. opacity 로는 못 고친다 —
흐림의 원인이 opacity 가 아니라 color-mix 알파다).
⇒ currentColor 를 쓴다. 같은 인라인이 color:var(--calA/B) 를 풀채도로 이미 갖고 있어
룸별 색이 그대로 살고 대비도 확보된다(실측 A 6.04:1 / B 9.30:1 on --panel).
데스크탑(>640px)은 이 규칙 밖이라 기존 15% 틴트+텍스트 라벨 그대로. */
/* 9) 탭 타겟 44px 확보(2026-07-29 P2) — 인라인 style로 34/30px이 박혀 있어 !important 필수.
.rdot(8×8 점 인디케이터)만 시각 크기를 유지해야 하므로 히트영역만 ::after로 넓힌다. */
#rimgAPrev,#rimgANext,.nv-arrow,#calPrev,#calNext,#themeBtn{width:44px!important;height:44px!important}
.rdot{position:relative}
.rdot::after{content:"";position:absolute;inset:-18px}
.nv-privacy{display:inline-block;padding:10px 6px}
/* ===== 2026-08-05 모바일 E2E 검수(390×844 실측) 수정 3건 ===== */
/* 10) 🔴 히어로 스크림이 헤드라인 구간에서 사실상 사라져 라이트 모드 h1 2행이 안 읽혔다.
원인: 스크림 중간 정지점이 **26%에서 alpha .06** 인데, 모바일 h1 은 래퍼의 10~29% 구간에 온다
(실측: 래퍼 top 61 h 621 / h1 top 125 bottom 241). 그 구간 실효 alpha 가 .21→.10 로 떨어져
밝은 B룸 사진(라이트 모드 히어로) 위에 흰 글자가 그대로 얹혔다.
실측 대비: h1 1행 평균 5.46·최악 3.22 / **h1 2행(white .68) 평균 3.43·최악 2.05** (large 기준 3:1 미달)
/ 본문 16px 평균 5.02·**최악 2.19** (4.5 필요).
⚠️ 데스크탑은 히어로가 더 커서 텍스트가 다른 구간에 앉는다 → **모바일에서만** 중간을 올린다.
상단도 .30→.58 로 올린다(로고·"무인·까치산" 라벨이 얹히는 구간). */
.heroScrim{background:linear-gradient(180deg,rgba(6,6,7,.58) 0%,rgba(6,6,7,.46) 30%,rgba(6,6,7,.66) 62%,rgba(6,6,7,.94) 100%)!important}
/* 11) 🔴 후기 캐러셀 화살표가 카드 **본문 위**에 얹혀 첫 줄을 가렸다.
카드가 flex:0 0 85%(=331px/390) 라 좌우 끝이 arrow(left:6·right:6, 44px)와 정확히 겹친다.
⇒ 트랙을 좌우 52px 인셋해 화살표를 여백으로 밀어낸다. 카드는 content-box 를 꽉 채워(=286px)
x 52~338 에 앉고 화살표는 6~50 / 340~384 에 남는다(겹침 0).
⚠️ flex-basis 를 calc(100% - 104px) 로 쓰면 안 된다 — % 가 이미 좁아진 content box 기준이라 이중 차감된다. */
#reviewCards{padding-left:52px!important;padding-right:52px!important;scroll-padding-left:52px;scroll-padding-right:52px}
#reviewCards>div{flex:0 0 100%!important}
/* 11b) 인셋만 하면 카드가 176px 로 쪼그라들어(후기 한 줄에 8자) 더 나빠진다 —
후기 패널의 모바일 좌우 패딩이 32px 이라 캐러셀 가용폭이 280px 뿐이었다.
패널 패딩을 20px 로 줄이고 캐러셀만 그만큼 **블리드**(음수 마진)해 폭을 되찾는다 → 카드 242px.
같은 32px 패딩 때문에 패널 헤더("A ROOM · 후기 / ★5.0 / 11개 후기")도 3줄로 깨져 있었다. */
#reviews .inner > div{padding:20px!important}
#reviews .nv-carwrap{margin-left:-20px;margin-right:-20px}
/* 12) 탭 타겟 44px — 9)에서 화살표·달력 버튼만 잡고 나머지가 남아 있었다(실측 13개 미달).
히어로 뱃지 32px·칩바 35px·「이번 달」30px·헤더 예약 36px·로고 25px·개인정보 41px.
⚠️ 시각 크기는 유지하고 **히트영역만** 넓힌다(패딩·min-height) — 레이아웃 밀림 최소화. */
.herobadges a{min-height:44px;display:inline-flex;align-items:center;font-size:12.5px!important}
.nv-chip{min-height:44px;display:inline-flex;align-items:center}
#calToday{min-height:44px!important}
/* ⚠️ 허브와 룸 페이지의 마크업이 다르다 — 허브 로고는 href="#top"·예약은 id="book-side" 인데
룸 페이지(room.template.html)는 href="/"·id 없음이다. 공통 조상 클래스로 잡아야 둘 다 걸린다. */
.side a.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sidetop > a{min-height:44px;display:flex!important;flex-direction:column;justify-content:center}
.nv-privacy{min-height:44px;display:inline-flex;align-items:center}
}
/* 모바일 스티키 예약 CTA — ≤640px에서만 노출, 스크롤 무관 상시 접근.
2026-07-29 P0: 라벨은 룸 중립("지금 예약하기")인데 목적지는 A룸 고정이라 B룸 소구로 온 방문자가
A룸으로 새고 있었다(B룸도 이미 예약을 받는 중). ⇒ A룸/B룸 2분할.
⚠️ book_click 배선 불변 — id="book-mobile"(A)은 그대로 두고 book-mobile-b(B)를 추가해
두 버튼 모두 기존 trackBook()으로 room:'a'/'b'를 넘긴다(GA4 room 분해 유지). */
.sticky-book{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--btnBg);color:var(--btnFg);font-weight:700;font-size:15px;text-align:center;padding:0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 18px rgba(0,0,0,.22)}
.sticky-book a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;color:inherit;text-decoration:none;padding:14px 6px;white-space:nowrap;transition:transform .2s ease}
.sticky-book a + a{border-left:1px solid color-mix(in srgb,var(--btnFg) 20%,transparent)}
@media(max-width:640px){.sticky-book{display:flex}body{padding-bottom:60px}}
/* FAQ 열림 상태 표시 — 종전엔 details[open]이어도 summary의 "+"가 그대로라 열림/닫힘이 구분되지 않았다.
45° 회전으로 "+"를 "×"로 읽히게 한다(전 뷰포트 공통). */
/* 2026-07-29 탭 타겟: summary 실측 높이 27.2px → 44px 확보. 늘어난 만큼은 details 인라인
padding 을 20px→12px 로 낮춰(아래 #faq details 규칙) 상쇄해 섹션 길이를 유지한다. */
#faq summary{min-height:44px;align-items:center}
/* 2026-08-05: Checklist Design 「Accordion」 States 항목(default·expanded·hover·focused·disabled) 중
**hover 만 없었다** — 마우스 사용자에게 "눌리는 것"이라는 신호가 cursor:pointer 하나뿐이었다.
⚠️ summary 의 color 는 인라인이라 클래스 규칙으로 못 덮는다 → opacity 로 상태를 만든다. */
#faq summary:hover{opacity:.68}
#faq summary{transition:opacity .15s ease}
#faq details{padding:12px 0!important}
details > summary > span:last-child{display:inline-block;transition:transform .2s ease}
details[open] > summary > span:last-child{transform:rotate(45deg)}
/* A룸 대표이미지 스와이프(작업2) — 데스크탑/모바일 공통, 룸 카드 그리드·rimg 크기는 불변 */
#rimgASwipe::-webkit-scrollbar{display:none}
/* ============================================================
모션 시스템 & UX 개선 (2026-07-16) — transform/opacity만, reduced-motion 존중.
데스크탑(≥641px) 레이아웃 불변: 신규 요소는 모바일 전용이거나(칩바·신설화살표) 시각효과만(리빌·패럴랙스·nav바·호버).
============================================================ */
/* 3) 버튼/CTA 피드백 — :active 미세 축소, :focus-visible 접근성 아웃라인(키보드만 노출→마우스 외관 불변) */
.btn:active,.book a:active,.btn.line:active,.nv-chip:active{transform:scale(.98)}
.sticky-book a:active{transform:scale(.97)}
a:focus-visible,button:focus-visible,[role="button"][tabindex]:focus-visible,summary:focus-visible,.fv-h:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* 4) 캐러셀 화살표 호버(A룸 기존 + 신설 공통) — hover 시 배경 진해짐 */
#rimgAPrev,#rimgANext,.nv-arrow{transition:background .2s ease,transform .2s ease}
#rimgAPrev:hover,#rimgANext:hover,.nv-arrow:hover{background:rgba(0,0,0,.68)}
#rimgAPrev:active,#rimgANext:active,.nv-arrow:active{transform:translateY(-50%) scale(.92)}
/* 4b) 신설 갤러리/후기 캐러셀 화살표 — 모바일 전용(데스크탑은 그리드/매이슨리라 미노출→레이아웃 불변) */
.nv-carwrap{position:relative}
.nv-arrow{display:none}
@media(max-width:640px){
.nv-arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;
/* 2026-08-05: .42 는 흰 패널 위에서 흰 화살표 대비 3.0:1(그래픽 하한 턱걸이)이라 실기기에서 흐렸다 → .60 (약 4.4:1) */
align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.60);color:#fff;
font-size:19px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.nv-arrow.prev{left:6px}
.nv-arrow.next{right:6px}
}
/* 5) 갤러리 호버 줌 — JS(data-zoom)가 scale(1.03) 적용, 트랜지션은 이미 이미지에 있음(hover 기기만) */
/* 6) 캘린더 셀 진입 fade + 오늘 셀 부드러운 강조(전역 [data-theme] * 트랜지션이 background 담당) */
@media(prefers-reduced-motion:no-preference){
#calGrid .cell{animation:nvCellIn .34s ease-out both}
}
@keyframes nvCellIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 8) nav 활성 인디케이터(데스크탑 좌측 nav) — 활성 항목 좌측 슬라이드 바 */
.side a.nav{position:relative}
.side a.nav::before{content:"";position:absolute;left:-26px;top:50%;width:2px;height:15px;background:var(--accent);
border-radius:2px;transform:translateY(-50%) scaleY(0);transform-origin:center;opacity:0;
transition:transform .28s ease,opacity .28s ease}
.side a.nav.active::before{transform:translateY(-50%) scaleY(1);opacity:1}
/* 9) 모바일 섹션 앵커칩 바 — ≤640px 전용, 스티키 top은 JS가 헤더 높이로 설정(겹침 방지) */
.nv-chipbar{display:none}
@media(max-width:640px){
.nv-chipbar{display:flex;position:sticky;top:0;z-index:40;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;background:color-mix(in srgb,var(--panel) 92%,transparent);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
padding:9px 14px;contain:layout;width:100%;max-width:100%}
.nv-chipbar::-webkit-scrollbar{display:none}
.nv-chip{flex:0 0 auto;white-space:nowrap;font-family:var(--label-font);font-size:12.5px;color:var(--dim);
text-decoration:none;border:1px solid color-mix(in srgb, var(--ink) 50%, transparent);border-radius:999px;padding:6px 14px;background:var(--bg);
transition:color .2s,border-color .2s,transform .15s}
/* 실측 고정 스택 = 헤더(.side) + 칩바(.nv-chipbar). 104px은 실제 스택보다 37px 부족해
앵커 도착 시 섹션 제목이 칩바 아래로 파묻혔다(클릭 1위 「공간 보기」가 정통으로 맞음). */
section[id],#firstvisit{scroll-margin-top:146px}
}
/* 11) 로딩 스켈레톤 — 은은한 opacity 펄스(글로우/시머 아님), reduced-motion이면 정지 */
.nv-skel{background:color-mix(in srgb,var(--ink) 9%,var(--panel));border-radius:5px;animation:nvSkel 1.4s ease-in-out infinite}
@keyframes nvSkel{0%,100%{opacity:.55}50%{opacity:.92}}
/* 1) 스크롤 리빌 — CSS 네이티브(지원 브라우저만 html.nv-vt), 미지원/Firefox는 기존 JS 폴백 */
@supports (animation-timeline: view()){
html.nv-vt [data-reveal]{opacity:0;animation:nvRevealVT linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
}
@keyframes nvRevealVT{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* 7) 히어로 패럴랙스 — 데스크탑 전용(≥641px)·reduced-motion OFF·모바일 OFF. 래퍼에만 적용(img 켄번즈 scale과 비충돌). ≤8px */
@supports (animation-timeline: scroll()){
@media(min-width:641px) and (prefers-reduced-motion:no-preference){
.heroImgWrap{animation:nvParallax linear both;animation-timeline:scroll(root);animation-range:0 560px}
}
}
@keyframes nvParallax{from{transform:translateY(0)}to{transform:translateY(-8px)}}
/* reduced-motion: 신규 모션 전부 즉시전환/비활성 */
@media(prefers-reduced-motion:reduce){.scrollind{animation:none!important}
html.nv-vt [data-reveal]{animation:none!important;opacity:1!important;transform:none!important}
.heroImgWrap{animation:none!important}
.nv-skel{animation:none!important}
#calGrid .cell{animation:none!important}
}