/* 예약 웹 — 2a (필터 사이드바 + 목록형, 딥 포레스트) 디자인 토큰 * 색상 토큰은 전역 파일(common/css/tokens.css) 한 곳에서만 정의한다. * 변수명은 기존 계약(--sage 등)을 유지 — JS 인라인 참조 호환 */ /* 폰트는 tokens.css 의 @font-face 가 우리 서버에서 직접 받는다 (2026-08-30). 외부 CDN @import 를 여기 되살리지 말 것 — 이유는 tokens.css 주석에. */ @import url('../../common/css/tokens.css'); /* 예약(객실 선택) 화면 리디자인 토큰. docs/reservation-redesign/tokens.css 가 원본이며 그 문서가 «값의 단일 출처» 다 — 이 아래 규칙에서 hex/px 를 새로 쓰지 말고 --rsv-* 를 참조한다. */ @import url('rsv-tokens.css'); /* ───────────────────────────────────────────── 손님 웹 전용 중립 팔레트 (2026-09-01, 당진 스테이 디자인 이식) 크림 바탕(#F6F4EF) + 웜 베이지 선에서 «흰 바탕 + 중립 회색 선» 으로 간다. 브랜드 초록(--sage:#204A12)은 이미 당진 사이트와 같은 값이라 손대지 않는다. ⚠ 왜 tokens.css 가 아니라 여기인가 — tokens.css 는 관리자·로그인·결제완료가 «같이» 읽는 파일이다. 거기서 --bg 를 흰색으로 바꾸면 관리자 화면 전체가 같이 하얘진다. 이 파일(web/css/main.css)은 손님 웹 10개 템플릿만 읽으므로, 여기서 덮으면 범위가 정확히 손님 웹이다. 관리자까지 통일할 일이 생기면 그때 tokens.css 로 «올리면» 된다. ⚠ 값을 --rsv-* 와 «따로» 적지 말 것. 아래는 전부 참조다 — 색을 바꾸려면 rsv-tokens.css 한 곳만 고친다. ──────────────────────────────────────────── */ :root{ --bg:var(--rsv-bg); --card:var(--rsv-surface); --line:var(--rsv-line); --line2:var(--rsv-line); --line3:var(--rsv-line-soft); --ink:var(--rsv-text); --ink2:var(--rsv-text-2); --ink3:var(--rsv-text-3); --sage-bg:var(--rsv-surface-sunken); --sage-tint-faint:var(--rsv-surface-sunken); /* 색을 채운 면 — 담기 바 · 결제 박스 · 예약완료 헤더 · 갤러리가 이 둘을 쓴다. 거의 검정(#1F241E)이었다. 흰 바탕에 진녹색 띠가 두 군데(객실선택·결제금액 안내) 들어오면서, 검정 덩어리가 세 번째 색으로 끼어 화면이 «초록·검정·흰» 삼색이 됐다. 같은 초록으로 모으면 색은 둘로 줄고, 채운 면끼리는 서로 같은 것으로 읽힌다. */ --dark:var(--rsv-brand); --dark-ink:var(--rsv-text-on-brand); /* 그 «초록 면 위» 의 주 버튼. 연두(#8FA96B)였는데 바닥이 초록이 되면서 초록 위 초록이라 버튼으로 보이지 않는다. 흰 버튼 + 초록 글자로 뒤집는다 (10.4:1). */ --lime:var(--rsv-surface); --lime-ink:var(--rsv-brand); /* 「주의 · 시간이 간다」 계열 — 홀딩 배지 · 입금 대기 안내 · 결제 남은 시간 · 달력의 오늘. 갈색/크림(#8A6A3F on #FBF6EC)이라 흰 바탕에서 혼자 빛바랜 종이처럼 보였다. 같은 «호박색» 을 유지하되 채도를 올려 초록·흰색 옆에서 또렷하게 만든다. 빨강(--rsv-accent)으로 옮기지 않는 것은 이것이 «오류가 아니라 재촉» 이기 때문이다. 대비 4.90:1 — 본문 기준(WCAG 1.4.3 AA 4.5:1)을 넘긴다. */ --terra:#9A5B00; --terra-bg:#FFF7E8; --terra-line:#EFD9AE; /* 「되돌릴 수 없다」 계열 — 취소 버튼 · 수수료 · 필수 표시 · 일요일. 공용 토큰의 #93502F 는 이 화면의 갈색(--terra)과 거의 같은 색이라, 「예약 취소하기」가 홀딩 안내와 같은 무게로 읽혔다. 이식해 온 팔레트의 빨강(--rsv-accent)으로 모은다. ⚠ 공용 tokens.css 를 고치면 관리자까지 따라오므로 «손님 웹에서만» 덮는다. 흰 글자 대비 5.4:1 — AA 통과. */ --danger:var(--rsv-accent); --danger-bg:var(--rsv-accent-tint); --danger-line:#F0BFC1; --rad:var(--rsv-r-md); --rad-s:var(--rsv-r-sm); /* 모바일 메뉴 서랍의 폭. 여기 한 곳에서만 정한다. 280px 은 「긴 라벨 + 22px 아이콘 + 좌우 여백」이 줄바꿈 없이 들어가는 최소치고, 좁은 폰에서 화면을 다 먹지 않도록 78vw 로도 묶는다 (아래 .gnb.drawer). ⚠ 옛 --tabbar-h(68px)는 없앴다. 하단 탭바를 걷으면서 그 높이를 피하던 규칙 (본문 아래 여백 · 담기 바 · 맨 위로 버튼)이 전부 사라졌기 때문이다 (2026-09-11). */ --drawer-w:280px; /* 그림자는 «거의 없앤다». 흰 바탕에서 카드를 띄우는 일은 #ccc 테두리가 맡는다 — 당진 사이트에 그림자가 한 곳도 없다. 완전히 0 으로 두지 않는 것은 떠 있는 것 (담기 바·시트)만큼은 바닥과 구분돼야 하기 때문이다. */ --sh:none; --sh-lg:0 8px 28px rgba(0,0,0,.14); } *{margin:0;padding:0;box-sizing:border-box} /* display 를 지정한 요소(.modal-back 등)에서도 hidden 속성이 항상 이기도록 */ [hidden]{display:none !important} body{font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink); line-height:1.6;-webkit-font-smoothing:antialiased} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit;font-size:inherit} a{text-decoration:none;color:inherit} /* 스크롤바 — 관리자(admin/css/common.css)와 같은 바닥값이다 (2026-08-25). * 손님 웹은 admin/css/common.css 를 읽지 않아 OS 기본 그대로였다. * 토큰 파일이 같아 값도 한 글자까지 같다 — 한쪽을 고치면 다른 쪽도 고칠 것. * 손잡이 색은 --scroll-thumb (WCAG 3:1 을 맞춘 전용 토큰. 근거는 tokens.css 주석에). * ⚠ scrollbar-width / scrollbar-color 를 같이 쓰면 안 된다 — * Chrome 은 표준 속성이 있으면 아래 규칙을 통째로 무시한다. * (그래서 .chips · .gal-track 은 그 속성으로 «숨기는» 쪽을 택했다) */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:vertical:start, ::-webkit-scrollbar-button:vertical:end{display:none;width:0;height:0} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-corner{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px; border:1px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--ink2);background-clip:content-box} /* ── 헤더 ── */ .hd{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--line)} .hd-in{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px} /* 오픈 전 미리보기 띠 — 관리자 세션에서만 그려진다 (publicPage/inc/header.html). 손님 화면과 헷갈리지 않게 «어두운 면» 으로 둔다. 손님 화면에 없는 색이라야 한눈에 갈린다. */ .pv-bar{background:var(--dark);color:var(--dark-ink);display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:8px 16px;padding:8px 16px;font-size:14px;line-height:1.45} .pv-bar-text{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline} .pv-bar-text b{font-weight:800} .pv-bar-end{min-height:36px;padding:0 14px;border:1px solid var(--dark-ink);border-radius:var(--rad-s); background:transparent;color:var(--dark-ink);font-size:13.5px;font-weight:700;cursor:pointer} .pv-bar-end:hover{background:var(--dark-ink);color:var(--dark)} .pv-bar-end:focus-visible{outline:2px solid var(--dark-ink);outline-offset:2px} .brand{display:flex;align-items:center;gap:10px} /* 가로 조합 로고. 이미지는 2배 해상도(415×64)를 높이로만 제어한다 — 너비를 지정하면 비율이 틀어지고, 원본 여백은 이미 잘라내 뒀다. */ .brand img{height:28px;width:auto;display:block} .brand .mark{width:10px;height:26px;border-radius:2px;background:var(--sage);display:block;flex:none} .brand b{font-size:17px;font-weight:800;letter-spacing:-.01em;display:block;white-space:nowrap} .brand small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.22em;color:var(--ink2);margin-top:-3px;white-space:nowrap} .gnb{display:flex;align-items:center;gap:26px} .gnb a{font-size:14px;font-weight:500;color:var(--ink2);transition:.2s;white-space:nowrap} .gnb a.on{font-weight:800;color:var(--sage)} .gnb a:hover:not(.on):not(.disabled){color:var(--ink)} .gnb a.disabled{opacity:.45;cursor:default} /* 아이콘과 짧은 라벨은 «좁은 화면 전용» 이다 — 켜는 것은 아래 «모바일 하단 탭바» 블록. PC 헤더는 예전 그대로 긴 라벨만 쓴다. */ .gnb-ic{display:none} .gnb-short{display:none} @media(max-width:760px){ .hd-in{flex-wrap:wrap;gap:8px;padding:12px 16px} .brand b{font-size:15px} .brand img{height:24px} /* 탭바로 내려가지 않는 nav(점검 중 헤더)는 예전처럼 로고 아래 줄에 깔린다 */ .gnb{width:100%;justify-content:space-between;gap:6px} .gnb a{flex:1;text-align:center;font-size:12.5px} } /* ── 모바일 메뉴 서랍 ── * * 좁은 화면에서는 메뉴 셋을 헤더 오른쪽 «햄버거» 안으로 넣고, 누르면 오른쪽에서 * 서랍이 나온다 (2026-09-11, 사용자 지시). * * 그 전에는 화면 맨 아래 «고정 탭바» 였다. 셋이 늘 보이는 것은 좋았지만 값이 비쌌다 — * 모든 화면이 세로 68px + 안전영역을 영구히 내줬고, 객실 목록처럼 세로로 긴 화면에서는 * 그게 카드 반 장이다. 게다가 담기 바·액션 바가 뜰 때마다 탭바를 감추고 본문 여백을 * 다시 계산하는 규칙이 CSS 네 곳에 흩어져 있었다. 서랍은 바닥을 아예 안 쓰므로 * 그 계산이 통째로 없어진다. * * 잃는 것은 «발견성» 이다. 메뉴가 한 번 눌러야 나오고, 지금 어느 화면인지도 열어야 안다. * 셋 중 둘(전체 예약 현황 · 예약 확인·취소)은 자주 눌리지 않고, 가장 많이 눌리는 * 「실시간 예약」은 로고를 눌러도 간다 — 그 길이 이미 있다. * * 겹치는 것들 정리: * .hd 는 z-index:100 인 «쌓임 맥락» 이라, 그 안의 서랍은 아무리 높여도 100 층에 머문다. * 담기 바·액션 바가 150 이므로 그대로 두면 서랍 아래쪽이 그 바들에 가린다. * 그래서 서랍이 열려 있는 «동안만» 헤더 자체를 올린다 (body.gnb-open .hd). * 290 인 이유: 담기·액션 바(150)와 필터 시트(280) 위, 모달(300) 아래. * 모달이 떠 있는데 서랍이 같이 열려 있는 경우는 없지만, 순서는 정해 두는 편이 낫다. */ .gnb-burger{display:none} .gnb-scrim{display:none} @media(max-width:760px){ /* 헤더는 «로고 + 햄버거» 한 줄이다. 예전에는 wrap 으로 메뉴 줄을 아래에 깔았는데 (탭바가 되기 전의 모양), 이제 nav 가 서랍이라 흐름에서 빠져 줄바꿈할 것이 없다. */ .hd-in{flex-wrap:nowrap;gap:8px;padding:12px 16px} .brand b{font-size:15px} .brand img{height:24px} /* 탭바로도 서랍으로도 내려가지 않는 nav(점검 중 헤더)는 예전처럼 로고 아래 줄에 깔린다. :not(.drawer) 로 좁혀 둔다 — 안 그러면 서랍이 이 규칙을 같이 맞아 폭이 100% 가 된다. */ .gnb:not(.drawer){width:100%;justify-content:space-between;gap:6px;flex-wrap:wrap} .gnb:not(.drawer) a{flex:1;text-align:center;font-size:12.5px} .hd-in:has(.gnb:not(.drawer)){flex-wrap:wrap} /* ── 여는 단추 ── 보이는 것은 19px 짜리 세 줄이지만 «누르는 것» 은 40px 이다 — 터치 최소 권장치(44px)에 가깝게 두고, 음수 margin 으로 헤더 높이는 늘리지 않는다. */ /* ⚠ display:grid 로 두지 말 것. 세 막대가 «각자의 행» 이 되고 행이 버튼 높이(40px)에 맞춰 늘어나, 사이 여백을 2px 로 적어도 실제로는 12px 씩 벌어진다 (2026-09-11에 겪었다 — 막대 셋의 전체 높이가 10px 이어야 하는데 30px 이었다). 세로 flex 는 내용만큼만 차지하고 남는 높이는 justify-content 가 «바깥» 으로 돌리므로 gap 이 적은 그대로 선다. */ .gnb-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; flex:none;width:40px;height:40px;margin:-6px -8px -6px 0;border-radius:8px;color:var(--ink)} /* ── 막대 사이 6px ── 여기까지 온 길 (전부 2026-09-11, 사용자가 보고 정했다): 12px 처음. display:grid 탓에 «의도한 3px 이 아니라» 그렇게 벌어져 있었다 → 너무 넓다 2px flex 로 고치면서 바짝 붙였다 → 이번엔 너무 밀집됐다 6px 둘의 가운데. 세 줄이 한 덩어리로 읽히면서도 틈이 답답하지 않다 막대 폭을 19px 그대로 두면 아이콘이 19 × 18px 로 «거의 정사각» 이 된다. 햄버거는 보통 가로가 긴 물건이라 22px 로 넓혀 균형을 되돌린다 (22 × 18, 가로세로비 1.2). 보이는 것은 22 × 18px 이지만 «누르는 것» 은 40px 그대로다. */ .gnb-burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px} .gnb-burger:focus-visible{outline:2px solid var(--sage);outline-offset:1px} /* ── 서랍 ── visibility 로 닫는다. transform 만으로 화면 밖에 밀어 두면 «보이지 않는 채로» 탭 이동과 스크린리더에 남아, 닫힌 메뉴를 훑게 된다. transition 에 visibility 를 0s 지연으로 함께 걸어 닫힐 때는 미끄러짐이 끝난 뒤에 사라지게 한다. */ .gnb.drawer{position:fixed;top:0;right:0;bottom:0;z-index:2; width:min(78vw,var(--drawer-w)); flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px; background:var(--card);border-left:1px solid var(--line); padding:calc(10px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); transform:translateX(100%);visibility:hidden; /* .26s → .18s (2026-09-11, 사용자 지시 — 「반응이 느리다」). 메뉴는 «보러» 여는 것이지 감상하는 것이 아니라, 미끄러짐이 길면 그만큼 기다림이 된다. 0 으로 두지 않는 이유는 어디서 나왔는지를 보여 주기 위해서다 — 갑자기 나타나면 화면이 «바뀐» 것으로 읽혀 뒤로 가기로 되돌리려 한다. */ transition:transform .18s cubic-bezier(.2,.8,.2,1),visibility 0s .18s} body.gnb-open .gnb.drawer{transform:none;visibility:visible;transition-delay:0s} body.gnb-open .hd{z-index:290} body.gnb-open{overflow:hidden} /* 서랍 안의 줄. 탭바처럼 아이콘을 위에 얹지 않는다 — 가로로 긴 자리라 «아이콘 + 글자»가 한 줄로 읽히고, 그래야 손가락이 줄 전체를 누를 수 있다. */ .gnb.drawer a{display:flex;align-items:center;gap:12px;flex:none; padding:14px 12px;border-radius:8px;font-size:14px;font-weight:500; text-align:left;color:var(--ink)} .gnb.drawer a.on{background:var(--sage-bg);font-weight:700;color:var(--sage)} .gnb.drawer .gnb-ic{display:block;width:22px;height:22px;flex:none;color:var(--ink2); fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* 활성 — 면을 채우고 선은 끈다. 채운 면 위의 «파내는 선»(.c)만 배경색으로 뒤집어 덩어리에 묻히지 않게 한다. 클래스 없는 것(달력 걸이·침대 다리)은 면 밖이라 그대로 선이다. 색 하나로만 알리지 않는다는 규칙(SPEC 10)을 이 «채움» 이 지켜 준다. */ .gnb.drawer a.on .gnb-ic{color:var(--sage)} .gnb.drawer a.on .gnb-ic .f{fill:currentColor;stroke:none} .gnb.drawer a.on .gnb-ic .c{stroke:var(--card)} /* 라벨은 «긴 쪽» 을 쓴다 — 서랍 폭이 280px 이라 줄일 이유가 없다. 짧은 쪽(.gnb-short)은 전역 규칙이 이미 감추고 있어 여기서 할 일이 없다. */ /* ── 뒤를 덮는 막 ── 서랍보다 «먼저» 나오는 형제라 같은 층에서 아래에 깔린다 (둘 다 헤더 안이다). */ /* 막은 서랍보다 «조금 빨리» 짙어진다. 같이 끝나면 어두워지는 것이 늦게 느껴진다 */ .gnb-scrim{display:block;position:fixed;inset:0;z-index:1; background:rgba(31,36,30,.42);opacity:0;pointer-events:none;transition:opacity .14s ease} body.gnb-open .gnb-scrim{opacity:1;pointer-events:auto} } @media(prefers-reduced-motion:reduce){ .gnb.drawer,.gnb-scrim{transition:none} } /* ── 검색 밴드 (입실일 · 퇴실일 · 조회하기) ── * * 당진 스테이 이식 (2026-09-02). 칸을 각각 상자로 두는 대신 «하나의 테두리 상자» 안에 * 두 날짜와 버튼을 담는다 — 셋이 한 동작(조회)의 부품이라 한 덩어리로 읽혀야 한다. * * 인원 칸은 없앴다. 인원은 객실 카드마다 그 자리에서 고른다 (main.js 의 paxRowHtml). */ .band{background:var(--card);border-bottom:1px solid var(--line)} .band-in{max-width:1160px;margin:0 auto;padding:18px 24px;position:relative} .band-box{display:flex;align-items:center;gap:var(--rsv-sp-4); border:1px solid var(--rsv-brand);border-radius:var(--rsv-r-md);padding:12px 16px} /* 날짜 칸은 «버튼» 이다. 눌러서 달력을 여는 것이므로 테두리 없이 내용만 놓는다 */ .s-date{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--rsv-sp-3); padding:8px 10px;border-radius:var(--rsv-r-sm);cursor:pointer;transition:background .15s} /* hover 는 «중립 회색» 이다. 연둣빛(--rsv-brand-tint #F2FAEC)을 쓰면 흰 바탕 위에서 누렇게 떠 보인다 — 브랜드 초록도 아니고 회색도 아닌 색이 손끝을 따라다닌다. 같은 이유로 스테퍼·필터 항목 hover 도 이 값으로 맞췄다. */ .s-date:hover{background:var(--rsv-surface-sunken)} /* 「입실일자」 pill — 값과 라벨이 나란히 서므로 라벨은 테두리로 묶어 구분한다 */ .s-tag{flex:none;border:1px solid var(--rsv-line);border-radius:var(--rsv-r-pill); padding:6px 16px;font-size:var(--rsv-fs-sm);font-weight:700;color:var(--rsv-text)} .s-date b{font-size:18px;font-weight:700;color:var(--rsv-text);white-space:nowrap} .s-cal{width:20px;height:20px;flex:none;color:var(--rsv-text-3)} .s-sep{width:1px;height:22px;background:var(--rsv-line);flex:none} .search-go{flex:none;background:var(--sage);color:var(--dark-ink);border-radius:var(--rad-s); font-size:15px;font-weight:800;padding:14px 40px;transition:.2s} .search-go:hover{background:var(--sage-deep)} /* * 좁은 화면 — 날짜·인원을 화면 위에 붙인다. * * 예전에는 밴드가 그냥 흘러가 버려서, 목록을 조금만 내려도 「지금 며칠·몇 명으로 보고 있는지」가 * 사라졌다. 객실 카드 하나가 화면을 거의 채우는 폭이라 두어 장만 넘겨도 그렇게 된다. * * 자리를 내주려고 두 가지를 한다. * ① 헤더(.hd)의 sticky 를 푼다 — 메뉴는 이미 하단 탭바에 있어 로고를 계속 붙여 둘 이유가 없다. * ② 밴드를 한 줄로 압축한다 — 보조 설명(small)은 접고 값만 남긴다. * 조회 버튼도 뺀다: 날짜 「선택 완료」와 인원 「적용」이 그 자리에서 곧바로 조회하고 * 조건은 고르는 즉시 목록에 반영되므로, 좁은 줄에서 자리만 차지한다. */ @media(max-width:760px){ /* 헤더 · 밴드 · 조건 줄이 «세 층으로 쌓여» 화면 위에 붙는다. 각자 부모가 달라 서로의 높이를 모르므로, 위 두 층의 실제 높이를 main.js 가 재서 --hd-h · --band-h 로 넘긴다 (값이 없으면 0 이라 그냥 겹치지 않고 맨 위에 붙는다). */ .hd{position:sticky;top:0;z-index:100} /* ⚠ z-index 는 담기 바(150)·하단 탭바(140)보다 «높아야» 한다. sticky + z-index 는 쌓임 맥락을 만들어서, 안에 든 날짜 시트(.range-pop, z 200)가 밴드 값으로 눌린다 — 90 을 주면 전체 화면 달력 위로 탭바가 얹힌다. 서로 겹칠 일은 없다(위/아래 끝). */ .band{position:sticky;top:var(--hd-h,0px);z-index:160} /* 좌우 여백은 본문(.wrap)과 같은 16px 로 맞춘다 — .wrap 쪽 규칙은 아래 «본문 폭» 에 있다 */ .band-in{padding:8px 16px} /* 셋을 한 줄에 넣으면 날짜가 잘린다. 날짜 둘만 나란히 두고 버튼은 아래로 내린다 */ .band-box{flex-wrap:wrap;gap:var(--rsv-sp-2);padding:8px 10px} .s-date{flex:1 1 40%;flex-direction:column;gap:2px;padding:6px 4px} .s-tag{padding:3px 10px;font-size:11px} .s-date b{font-size:14px} .s-cal{display:none} /* 좁은 줄에서 아이콘은 자리만 먹는다 */ .s-sep{display:none} .search-go{flex:1 1 100%;padding:11px 0} /* 날짜 문구는 길다. 줄을 접는 대신 말줄임 — 밴드 높이가 글자에 따라 들썩이면 안 된다 */ .search-go{display:none} } /* 날짜 범위 팝오버 */ /* 가운데 정렬 — 예전에는 left:24px 로 밴드 왼쪽 끝에 붙었다. 날짜 칸이 「입실 · 퇴실」 둘로 나뉘면서 어느 칸에서 열든 달력은 왼쪽에만 떠, 퇴실일을 누르면 달력이 엉뚱한 쪽에 나타났다. 두 칸 «사이» 를 기준으로 삼을 수도 없다 — 칸 너비가 글자 길이에 따라 변한다. 밴드 폭 한가운데면 어느 칸에서 열어도 같은 자리다. */ .range-pop{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%); z-index:120;width:648px; background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);padding:14px; /* 날짜 칸은 글자라, 손가락으로 굴리면 스크롤 대신 텍스트가 선택된다(iOS 확인). 달력에서 글자를 긁을 일은 없으므로 선택·길게 눌러 나오는 메뉴를 함께 끈다. */ -webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 두 달을 나란히. 달 사이 경계선이 있어야 "8월 31일"과 "9월 1일"이 붙어 보이지 않는다 */ .rc-months{display:grid;grid-template-columns:1fr 1fr;gap:24px} .rc-months .rc-month + .rc-month{border-left:1px solid var(--line);padding-left:24px} .rc-title{display:block;text-align:center;font-size:14.5px;font-weight:800;margin-bottom:8px} /* 이동 버튼은 두 달 바깥 양 끝에 둔다 — 어느 달에 딸린 버튼인지 헷갈리지 않게 */ .rc-nav{position:absolute;top:14px;width:30px;height:30px;border-radius:8px; border:1px solid var(--line2);background:var(--card); font-size:14px;font-weight:800;color:var(--ink2);transition:.15s;z-index:1} .rc-prev{left:14px} .rc-next{right:14px} .rc-nav:hover:not(:disabled){border-color:var(--sage);color:var(--sage)} /* 예약 범위 밖의 달 — 눌러도 전부 비활성인 달이 나오므로 아예 잠근다 */ .rc-nav:disabled{color:var(--line2);border-color:var(--line);background:var(--bg);cursor:default} .rc-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:800; color:var(--ink2);padding:4px 0;border-bottom:1px solid var(--line);margin-bottom:4px} /* 요일·공휴일 색은 관리자 달력(랙 · 예약현황 · 요금관리 · 공용 날짜 피커)과 같은 토큰을 쓴다. 예전에는 여기만 #A0503A/#3F5F86 로 하드코딩돼 있어 브랜드 색을 바꿔도 안 따라왔다. 이 줄은 모바일의 고정 요일줄(.rc-dow-fixed)도 함께 받는다 — 같은 요소가 두 클래스를 쓴다. */ .rc-dow .sun{color:var(--danger)} .rc-dow .sat{color:var(--info)} .rc-grid{display:grid;grid-template-columns:repeat(7,1fr)} .rc-day{height:38px;display:grid;place-items:center;font-size:13px;font-weight:600;border-radius:8px; cursor:pointer;transition:.12s;position:relative} /* 고른 날(start/end)은 hover 에서 뺀다. 빼지 않으면 :hover 쪽 명시도가 높아 선택 배경을 덮어써, 흰 글씨가 연한 배경에 얹혀 방금 고른 날이 사라진 것처럼 보인다. 터치 기기는 탭한 뒤에도 :hover 가 남아 있어 특히 눈에 띈다. */ .rc-day:hover:not(.off):not(.dis):not(.start):not(.end){background:var(--sage-bg)} .rc-day.off{visibility:hidden} .rc-day.dis{color:var(--line2);cursor:default} /* 순서 주의 — .holiday 가 .sat 뒤에 와야 한다. 명시도가 같아 순서가 승패를 정하는데, 앞으로 옮기면 토요일에 걸린 공휴일(2026-10-03 개천절)이 그냥 토요일 색으로 나온다. */ .rc-day.sun{color:var(--danger)} .rc-day.sat{color:var(--info)} .rc-day.holiday{color:var(--danger)} /* 고를 수 없는 날은 무슨 날이든 회색이다. 공휴일만 빨갛게 남으면 누를 수 있어 보인다 */ .rc-day.dis.sun,.rc-day.dis.sat,.rc-day.dis.holiday{color:var(--line2)} .rc-day.in-range{background:var(--sage-bg);border-radius:0} .rc-day.start,.rc-day.end{background:var(--sage);color:var(--on-brand) !important;font-weight:800;border-radius:8px} .rc-day.start.has-range{border-radius:8px 0 0 8px} .rc-day.end.has-range{border-radius:0 8px 8px 0} .rc-day.today::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--terra)} .rc-hint{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--ink2);text-align:center; background:var(--bg);border-radius:8px;padding:7px} /* 예약 가능한 마지막 날 안내. 비어 있으면(경계를 못 받았을 때) 자리도 차지하지 않는다 */ .rc-range{font-size:11.5px;font-weight:600;color:var(--ink2);text-align:center} .rc-range:not(:empty){margin-top:6px} /* 데스크톱에서는 시트용 조각(헤더·요약·하단바)을 쓰지 않는다 */ .rc-sheet-head,.rc-sum,.rc-dow-fixed,.rc-actions{display:none} /* ── 모바일: 전체 화면 시트 ── 좁은 화면에 두 달을 나란히 두면 한 칸이 30px 이하로 줄어 손가락으로 못 누른다. 그래서 화면을 덮는 시트로 바꾸고 예약 가능한 달을 전부 쌓아 세로로 굴린다. 이동 버튼이 사라지므로 「다음 달이 안 열린다」 같은 막다른 길도 같이 사라진다. */ @media(max-width:720px){ body.rc-sheet-open{overflow:hidden} /* ⚠ transform 을 «반드시» 되돌린다. 넓은 화면의 가운데 정렬이 translateX(-50%) 인데, 여기서는 inset:0 로 화면을 꽉 채우므로 그게 남으면 시트가 화면 밖으로 절반 밀린다. */ .range-pop{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;width:auto;transform:none; border:0;border-radius:0;box-shadow:none;padding:0;z-index:200; display:flex;flex-direction:column} .rc-nav{display:none} .rc-sheet-head{display:flex;align-items:center;justify-content:center;position:relative; padding:16px;border-bottom:1px solid var(--line);flex:0 0 auto} .rc-sheet-head b{font-size:16px;font-weight:800} .rc-close{position:absolute;left:10px;top:50%;transform:translateY(-50%); width:40px;height:40px;border-radius:10px;background:none;font-size:16px;color:var(--ink2)} /* 지금 무엇이 잡혔는지 항상 위에 보인다 — 굴려 내려가도 선택 상태를 놓치지 않는다 */ .rc-sum{display:block;flex:0 0 auto;padding:14px 16px;font-size:15px;font-weight:800; color:var(--ink);border-bottom:1px solid var(--line)} /* 요일 줄은 달마다 반복하지 않고 하나만 위에 고정한다 */ .rc-dow-fixed{display:grid;flex:0 0 auto;font-size:12px;padding:10px 0;margin:0; background:var(--card);border-bottom:1px solid var(--line)} .rc-month .rc-dow{display:none} .rc-months{display:block;position:relative;flex:1 1 auto;overflow-y:auto; -webkit-overflow-scrolling:touch;padding:4px 10px 20px} .rc-months .rc-month + .rc-month{border-left:0;padding-left:0} .rc-title{text-align:left;font-size:16px;font-weight:800;padding:18px 6px 10px} /* 손가락으로 누를 수 있는 크기. 44px 은 터치 타깃 최소 권장치다 */ .rc-day{height:46px;font-size:15px;border-radius:10px} .rc-day.start,.rc-day.end{border-radius:10px} .rc-day.start.has-range{border-radius:10px 0 0 10px} .rc-day.end.has-range{border-radius:0 10px 10px 0} .rc-foot{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);background:var(--card)} /* 「체크인 날짜를 선택해 주세요」 는 위 요약 줄이 이미 말하고 있다. 둘 다 두면 날짜를 골라 둔 상태에서도 고르라고 하는 꼴이 된다 */ .rc-hint{display:none} .rc-range{font-size:12.5px} .rc-actions{display:flex;align-items:center;gap:12px;margin-top:10px} .rc-reset{flex:0 0 auto;padding:14px 16px;font-size:14px;font-weight:700; color:var(--ink2);background:none;border-radius:10px} .rc-reset:disabled{color:var(--line2)} .rc-done{flex:1 1 auto;height:52px;border-radius:12px;background:var(--sage); color:var(--dark-ink);font-size:16px;font-weight:800} .rc-done:disabled{background:var(--line);color:var(--ink3)} } /* 인원 팝오버 */ .g-hint{margin-top:10px;font-size:11.5px;color:var(--ink2);line-height:1.6} /* ── 본문 레이아웃 (사이드바 + 목록) ── */ /* width:100% 가 있어야 한다. body 가 flex column 이고 .wrap 은 margin:0 auto 라, 가로 auto 마진이 stretch 를 이겨 «내용 폭»으로 줄어든다 — 내용이 화면보다 넓으면 그만큼 본문이 «넓어져» 페이지 전체가 오른쪽으로 삐져나간다. */ .wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%} /* 좁은 화면에서는 좌우를 16px 로 줄여 헤더·담기 바와 맞춘다. 24px 은 그냥 버리는 폭이라, 인원 ± 버튼처럼 한 줄을 셋으로 나눠 쓰는 자리가 그만큼 좁아진다. ⚠ 이 규칙은 위 .wrap 보다 «뒤» 에 있어야 한다 — 미디어쿼리는 명시도를 올리지 않아 앞에 두면 같은 명시도끼리 뒤엣것(24px)이 이긴다. */ @media(max-width:760px){.wrap{padding:0 16px}} /* 조건이 «배치도와 목록 사이» 로 내려오면서 한 칸이 됐다 (2026-09-01). 예전에는 236px 기둥이 왼쪽에 서서, 배치도에서 방을 보고 목록으로 내려오는 흐름을 가로로 한 번 꺾었고 조건을 안 쓰는 손님에게도 목록 폭을 236px 뺏었다. .flt-back 이 display:contents 라 .filter 가 그대로 첫 줄, section 이 둘째 줄이 된다. */ .layout{display:grid;grid-template-columns:1fr;gap:0;align-items:start;padding-top:28px} @media(max-width:900px){.layout{padding-top:16px}} /* 그리드 칸의 최소 너비는 «내용의 min-content» 다. 안에 가로 스크롤 줄(.chips)이 있으면 그 줄이 접히지 않은 폭만큼 칸이 벌어지고, 좁은 화면에서는 그만큼 오른쪽이 잘린다. 0 으로 내려야 칸이 화면에 맞고, 넘치는 것은 스크롤 줄이 «자기 안에서» 굴린다. */ .layout > section{min-width:0} /* ── 결제를 마치지 않은 «내» 예약 안내 ── 담았던 방이 목록에서 사라진 이유와, 되돌아갈 길을 함께 말한다. */ .pending{margin-top:20px;background:var(--terra-bg);border:1px solid var(--terra-line);border-radius:var(--rad); padding:14px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .pending .pd-txt{flex:1;min-width:0} .pending .pd-txt b{display:block;font-size:14.5px;font-weight:800;color:var(--terra)} .pending .pd-txt small{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6;margin-top:3px} .pending .pd-left{font-weight:800;color:var(--danger);font-style:normal} .pending .pd-act{display:flex;align-items:center;gap:10px;flex:none} .pending .pd-go{font-size:13.5px;font-weight:800;color:var(--dark-ink);background:var(--sage); border-radius:var(--rad-s);padding:11px 20px;transition:.2s;white-space:nowrap} .pending .pd-go:hover{background:var(--sage-deep)} /* 링크에서 버튼으로 바뀌었다 — 그 자리에서 놓는다 (ui.js pendingBar 주석). font/cursor 를 되돌리지 않으면 버튼 기본 글꼴이 그대로 나와 옆 버튼과 어긋난다. */ .pending .pd-cancel{font:inherit;font-size:13px;font-weight:700;color:var(--ink2); border:1px solid var(--line2);cursor:pointer; border-radius:var(--rad-s);padding:10px 16px;transition:.2s;white-space:nowrap;background:var(--card)} .pending .pd-cancel:disabled{opacity:.6;cursor:default} .pending .pd-cancel:hover{border-color:var(--danger-line);color:var(--danger)} @media(max-width:640px){ .pending{padding:13px 15px;gap:12px} .pending .pd-act{width:100%} .pending .pd-go,.pending .pd-cancel{flex:1;text-align:center;padding:12px 10px} } /* 필터 사이드바 */ .filter{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:20px 22px;position:sticky;top:86px} .filter .f-t{font-size:13px;font-weight:800;padding-bottom:12px;border-bottom:1px solid var(--line3)} .flt-group{padding:16px 0;border-bottom:1px solid var(--line3)} .flt-group .g-label{font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:.06em;margin-bottom:10px} .flt-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#3F4239;padding:5px 0;cursor:pointer} .flt-none{font-size:12.5px;color:var(--ink2)} .flt-item input{width:15px;height:15px;accent-color:var(--sage)} .flt-reset{width:100%;margin-top:16px;font-size:13px;font-weight:700;color:var(--ink2); border:1px solid var(--line2);border-radius:var(--rad-s);padding:11px;transition:.2s;background:none} .flt-reset:hover{border-color:var(--sage);color:var(--sage)} /* 바닥 버튼 줄 — 적용은 시트(좁은 화면)에서만 보인다. 넓은 화면은 아래 미디어 쿼리가 줄을 지운다 */ .flt-foot{display:flex;gap:8px;margin-top:16px} .flt-foot .flt-reset{margin-top:0} .flt-apply{display:none} /* 껍데기는 데스크톱 레이아웃에서 사라진다 — .filter 가 그대로 그리드 칸이 된다 */ .flt-back{display:contents} .flt-close{display:none} /* 고른 조건 태그. 드롭다운을 닫으면 값이 안 보이므로 이 줄이 «무엇으로 좁혔는지» 를 들고 있다. */ .flt-picked{display:none;align-items:center;gap:6px;flex-wrap:wrap} .flt-picked:empty{display:none} .flt-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700; background:var(--sage-tint);color:var(--sage);border-radius:999px;padding:4px 5px 4px 10px} .flt-tag button{padding:0 3px;font-size:12px;line-height:1;color:inherit;opacity:.7;background:none;border:0} .flt-tag button:hover{opacity:1} /* ── 넓은 화면 — 조건이 가로 밴드가 된다 ────────────────────────────── 마크업은 시트와 «같은 것 하나» 다. 데스크톱용을 따로 만들면 조건 목록이 두 곳에 생기고 한쪽만 고치는 사고가 난다 (관리자 OFFLINE_METHODS 가 그랬다). */ @media(min-width:901px){ .filter{position:static;display:flex;align-items:center;flex-wrap:wrap;gap:8px; padding:12px 14px;margin-bottom:10px} /* 태그가 없을 때도 밴드와 목록 사이가 벌어져야 한다. .flt-picked 는 :empty 면 사라지므로 그 몫을 섹션이 들고 있는다. */ .layout > section{padding-top:8px} /* 「조건」 제목은 드롭다운 이름들이 대신한다 */ .filter .f-t{display:none} .flt-group{position:relative;padding:0;border-bottom:0} /* 묶음 이름 → 드롭다운 버튼 */ .flt-group > .g-label{display:inline-flex;align-items:center;gap:6px;margin:0; font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--ink2); background:var(--card);border:1px solid var(--line2);border-radius:var(--rad-s); padding:9px 13px;transition:.2s;white-space:nowrap;cursor:pointer} .flt-group > .g-label::after{content:"▾";font-size:9px;opacity:.65} .flt-group > .g-label:hover{border-color:var(--sage);color:var(--sage)} .flt-group > .g-label[aria-expanded="true"]{border-color:var(--sage);color:var(--sage)} .flt-group > .g-label.has{background:var(--sage-tint);border-color:var(--sage); color:var(--sage);font-weight:800} .flt-group > .g-label .g-n{font-size:11px;font-weight:800;background:var(--sage); color:var(--dark-ink);border-radius:999px;padding:0 6px;line-height:1.6} /* 값 목록 → 팝오버. 열기 전에는 그리지 않는다 */ .flt-values{position:absolute;top:calc(100% + 6px);left:0;z-index:120;min-width:172px; background:var(--card);border:1px solid var(--line2);border-radius:var(--rad); padding:8px;box-shadow:0 10px 28px rgba(31,36,30,.13);display:none} .flt-group.is-open > .flt-values{display:block} .flt-values .flt-item{padding:7px 8px;border-radius:6px;white-space:nowrap} .flt-values .flt-item:hover{background:var(--rsv-surface-sunken)} .flt-values .flt-none{padding:7px 8px} .flt-picked{display:flex;margin:0 0 8px} /* 바닥 버튼 줄은 밴드에서 사라진다 — 초기화가 그대로 밴드의 한 칸이 된다 */ .flt-foot{display:contents} /* 초기화는 오른쪽 끝. 고른 것이 없으면 눌러도 할 일이 없다 */ .flt-reset{width:auto;margin:0 0 0 auto;padding:9px 14px;font-size:12.5px} .flt-reset[disabled]{opacity:.4;cursor:default} .flt-reset[disabled]:hover{border-color:var(--line2);color:var(--ink2)} } @media(max-width:900px){ /* 좁은 화면 — «조건» 버튼으로 여는 시트. 예전에는 여기서 사이드바를 통째로 감췄는데, 대신 나오는 칩 줄은 시설유형만 그려서 구역·시설옵션으로 좁힐 길이 사라졌다. */ .flt-back{display:none;position:fixed;inset:0;z-index:280;background:rgba(31,36,30,.42); backdrop-filter:blur(2px);align-items:center;justify-content:center;padding:20px} .flt-back.open{display:flex} .filter{position:relative;top:auto;width:100%;max-width:420px;max-height:calc(100vh - 40px); overflow-y:auto;overscroll-behavior:contain;border-radius:16px;padding:20px 18px; animation:pop .3s cubic-bezier(.2,.8,.2,1) both} .filter .f-t{display:flex;align-items:center;gap:8px} /* 시트에서는 열고 닫을 것이 없다 — 버튼이지만 예전 라벨 그대로 보인다. 실제 잠금(aria-disabled·tabindex)은 main.js 가 건다. */ .flt-group > .g-label{display:block;width:100%;text-align:left;background:none; border:0;padding:0;cursor:default} .flt-group > .g-label .g-n{display:none} .flt-picked{display:none} /* 적용이 주 버튼이다. 목록이 길어도 손이 닿게 시트 바닥에 붙인다 (.filter 의 padding 20px 만큼 내려야 시트 끝에 맞닿는다) */ .flt-foot{position:sticky;bottom:-20px;margin:16px -18px -20px;padding:12px 18px 16px; background:var(--card);border-top:1px solid var(--line3)} .flt-foot .flt-reset{width:auto;flex:0 0 auto;padding:12px 14px} .flt-apply{display:block;flex:1;font-size:14px;font-weight:800;color:var(--rsv-text-on-brand); background:var(--rsv-brand);border:0;border-radius:var(--rad-s);padding:12px} .flt-close{display:grid;place-items:center;margin-left:auto;width:30px;height:30px; border-radius:8px;font-size:13px;color:var(--ink2);background:var(--card);border:1px solid var(--line2)} /* 시트가 화면을 덮는 동안 뒤 목록이 같이 굴러가면 어느 쪽을 만지는지 알 수 없다 (달력 시트의 rc-sheet-open 과 같은 처리) */ body.flt-sheet-open{overflow:hidden} } /* 섹션 타이틀 — 진녹색 바 (당진 스테이의 .room-info 를 그대로 옮겼다). * * 흰 바탕에 카드가 줄줄이 늘어서면 「어디서부터가 목록인가」가 사라진다. * 색을 채운 띠 하나가 그 경계를 만든다 — 당진 사이트가 객실선택·결제금액 안내 * 두 군데에서 같은 띠를 쓰는 이유다. 그래서 여기도 «한 벌» 로 두고 둘 다 쓴다. * * 실측값: padding 10px 20px · radius 5px · 좌 16px/700 · 우 14px/500 · #204A12 */ .sec-t{display:flex;align-items:center;justify-content:space-between;gap:12px; margin:0 0 var(--rsv-sp-4);padding:10px 20px; background:var(--rsv-brand);color:var(--rsv-text-on-brand); border-radius:var(--rsv-r-sm);flex-wrap:wrap} .sec-t h2{font-size:var(--rsv-fs-name);font-weight:700;letter-spacing:-.01em} /* ⚠ 색을 상속시키지 않는다. 전역 span 규칙이 --ink2(회색)라 녹색 위에서 읽히지 않는다. */ .sec-t span{font-size:var(--rsv-fs-body);font-weight:500;color:var(--rsv-text-on-brand)} @media(max-width:560px){ /* 좁은 화면에서 좌우를 고집하면 오른쪽 안내가 두세 글자씩 끊겨 접힌다. 세로로 쌓는다. */ .sec-t{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px} .sec-t span{font-size:var(--rsv-fs-sm)} } /* 필터 줄 (모바일) — «조건» 버튼 + 유형 칩 */ .fltbar{display:none} @media(max-width:900px){ /* 가운데가 아니라 «윗줄» 을 맞춘다. .chips 는 숨긴 스크롤바 자리로 padding-bottom:4px 을 달고 있어 상자가 칩보다 4px 크다 — 가운데로 맞추면 그 절반인 2px 만큼 칩이 떠올라 「조건」 버튼과 높낮이가 어긋나 보인다. 두 상자의 높이는 33px 로 이미 같다. */ .fltbar{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;min-width:0} .fltbar .chips{margin:0;min-width:0} } /* 좁은 화면에서는 헤더·검색 밴드 바로 아래에 함께 붙는다 — 조건과 유형 칩도 목록을 내리는 내내 손에 닿아야 한다. 두 층의 높이는 main.js 가 재서 --hd-h · --band-h 로 넣는다. 바탕색을 깔지 않으면 아래로 지나가는 카드가 칩 사이로 비쳐 보인다. */ @media(max-width:760px){ /* ⚠ 아래 여백은 padding 이 아니라 margin 이다. padding 은 sticky 요소의 «배경 안쪽» 이라 카드 위 테두리가 그 배경 경계에 그대로 맞닿아 «잘린 것처럼» 보였다 — 선택된 카드의 초록 테두리에서 특히 눈에 띈다. margin 으로 빼면 배경 밖에 실제 간격이 생긴다. */ .fltbar{position:sticky;top:calc(var(--hd-h,0px) + var(--band-h,0px));z-index:80; margin:0 0 var(--rsv-sp-3);padding:10px 0;background:var(--bg)} } .flt-open-btn{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--card); border:1px solid var(--line2);border-radius:999px;padding:8px 14px;transition:.2s} .flt-open-btn.on{border-color:var(--sage);color:var(--sage);font-weight:800} .flt-open-btn .n{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px; border-radius:999px;background:var(--sage);color:var(--on-brand);font-size:10.5px;font-weight:800} /* 필터 칩 (모바일). 스크롤바를 숨긴 가로 스크롤러라 그냥 두면 «오른쪽이 잘린» 것처럼 보인다 (실제로 그런 제보를 받았다). 굴릴 수 있는 쪽 끝을 흐려 「더 있다」를 말한다 — 끝에 닿으면 사라진다. 폭은 --fl/--fr 로만 준다: 한 줄짜리 mask 하나로 좌·우를 같이 다루기 위해서다. */ .chips{display:none;gap:6px;flex-wrap:nowrap;overflow-x:auto;margin:0 0 14px;padding-bottom:4px;scrollbar-width:none; --fl:0px;--fr:0px; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)} .chips.fade-l{--fl:26px} .chips.fade-r{--fr:26px} .chips::-webkit-scrollbar{display:none} .chip{font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--card);border:1px solid var(--line2); border-radius:999px;padding:8px 16px;transition:.2s;white-space:nowrap;flex:none} .chip.on{background:var(--sage);border-color:var(--sage);color:var(--on-brand);font-weight:800} @media(max-width:900px){.chips{display:flex}.chips[hidden]{display:none !important}} /* ── 객실 목록 (요약 카드, SPEC 4-1) ── * * 카드는 «어느 객실인가» 와 «몇 명인가» 를 말한다. 옵션은 다음 화면이 맡는다. * 값은 docs/reservation-redesign/tokens.css 의 --rsv-* 를 참조한다. */ .rooms{display:flex;flex-direction:column;gap:var(--rsv-sp-3);padding-bottom:40px} .rooms-notice{margin:0 0 12px;padding:11px 14px;border-radius:var(--rsv-r-md); background:var(--rsv-brand-tint);border:1px solid var(--rsv-line); font-size:var(--rsv-fs-sm);font-weight:700;color:var(--rsv-brand);line-height:var(--rsv-lh)} .rooms .empty{text-align:center;color:var(--rsv-text-2);font-size:var(--rsv-fs-body);padding:64px 0; background:var(--rsv-surface);border:1px dashed var(--rsv-line);border-radius:var(--rsv-r-lg)} .room{background:var(--rsv-surface);border:1px solid var(--rsv-line);border-radius:var(--rsv-r-lg); padding:var(--rsv-sp-3);display:grid;grid-template-columns:var(--rsv-thumb-card) 1fr; gap:var(--rsv-sp-3);align-items:stretch;cursor:pointer; transition:border-color var(--rsv-dur-state) ease,box-shadow var(--rsv-dur-state) ease; } .room.is-new{animation:pop .4s cubic-bezier(.2,.8,.2,1) both} @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 선택 시 테두리가 굵어지면 카드가 1px 씩 움직인다 — padding 으로 상쇄한다 (SPEC 4-1) */ .room.sel{border:1.5px solid var(--rsv-brand);padding:11.5px} .room:focus-visible{outline:2px solid var(--rsv-brand);outline-offset:2px} /* 담기 한 건이 캠핑톡 응답을 기다리는 동안 다른 객실 클릭을 막는다 (2026-11-05 정책 복원). 누른 카드(.is-busy)는 밝게 두어 「지금 반응하고 있는 방」임을 보이고, 나머지는 반투명 + 포인터 차단으로 「대기 중」을 알린다. 스피너는 .r-pick 의 .btn-loading 이 맡는다. */ body.is-pick-busy .room:not(.is-busy){opacity:.55;pointer-events:none;filter:saturate(.7)} body.is-pick-busy .room.is-busy{cursor:wait} /* 내 결제 대기 예약이 잡고 있는 객실. «보이되 담을 수 없다» — 안 보이면 방이 사라진 것처럼 보이고, 담을 수 있으면 두 번 잡는다. 그래서 커서도 손가락이 아니고, 눌러도 아무 일이 없다는 것이 색으로 먼저 읽혀야 한다. */ .room.held{cursor:default;border-style:dashed;background:var(--rsv-surface-2,#faf9f6)} .room.held .r-photo{opacity:.7} .r-held-badge{flex:0 0 auto;align-self:flex-start;padding:3px 10px;border-radius:999px; background:var(--rsv-warn-bg,#fdf1e3);color:var(--rsv-warn,#b26a1a); font-size:12px;font-weight:700;white-space:nowrap} .r-held-msg{margin:6px 0 0;color:var(--rsv-ink-2,#6b6f63);font-size:13px} .r-held-act{margin-top:10px} .r-held-go{display:inline-block;padding:8px 16px;border-radius:var(--rsv-r-sm,8px); background:var(--rsv-brand);color:#fff;font-size:13px;font-weight:700;text-decoration:none} .r-held-go:hover{filter:brightness(1.06)} .r-held-go:focus-visible{outline:2px solid var(--rsv-brand);outline-offset:2px} /* 사진 자리는 «중립 회색» 이다. 웜 베이지(#E2DDD0)였는데 흰 바탕으로 바뀌면서 혼자 누렇게 떴다 — 사진이 안 붙은 카드가 고장난 것처럼 보였다. 최소 높이를 두는 것은 세로로 짧은 카드에서 사진이 띠처럼 눌리기 때문이다. */ .r-photo{position:relative;border-radius:var(--rsv-r-md); background:var(--rsv-surface-sunken) center/cover no-repeat; background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 1px,transparent 1px 11px)} .r-photo.has-img{cursor:zoom-in} .r-shots{position:absolute;left:6px;bottom:6px;font-size:10.5px;font-weight:700; color:var(--rsv-text-on-brand);background:rgba(0,0,0,.6);border-radius:var(--rsv-r-sm);padding:2px 7px} .r-zone{position:absolute;top:6px;left:6px;font-size:10.5px;font-weight:700; color:var(--rsv-text-on-brand);background:rgba(0,0,0,.6);border-radius:var(--rsv-r-sm);padding:2px 7px} .r-body{display:flex;flex-direction:column;gap:var(--rsv-sp-1);min-width:0} .r-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--rsv-sp-2)} .r-title{min-width:0} /* 긴 이름은 한 줄 말줄임. 금액은 절대 줄바꿈되지 않는다 (SPEC 4-1) */ .r-body h3{font-size:var(--rsv-fs-name);font-weight:600;color:var(--rsv-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* * 아주 좁은 화면(≤389px)에서는 «두 줄까지» 편다. * * 한 줄 말줄임(SPEC 4-1)은 이름 «뒤» 를 자르는데, 이 시설의 이름은 뒤가 「3호」처럼 * 카드를 구별하는 번호다. 360px 에서 21곳 중 17곳, 375px 에서 14곳이 그 번호를 잃었다 * (390px 이상은 한 곳도 안 잘린다 — 그래서 경계를 389px 로 잡았다). * 「A구역 - STANDARD 3호」와 「… 8호」가 둘 다 「A구역 - STANDARD…」로 보이면 * 무엇을 담는지 알 수 없다. 두 줄로 묶어(line-clamp) 카드 높이는 지키면서 번호를 살린다. */ @media(max-width:389px){ .r-body h3{white-space:normal;overflow-wrap:anywhere; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} } .r-body .cap{font-size:var(--rsv-fs-cap);color:var(--rsv-text-2)} .r-body .cap b{color:var(--rsv-brand);font-weight:700} /* 카드 안 인원 줄 (2026-09-02). 예전의 «요약 + 변경 링크»(.r-sum/.r-edit)를 대신한다 — 요약을 읽고 링크를 눌러 시트를 여는 대신, 고칠 것을 그 자리에 둔다. 라벨과 스테퍼를 붙여 짝을 만들고, 항목들은 내용 크기대로 흐르다 넘치면 줄을 바꾼다 (권종은 관리자가 만드는 것이라 셋으로 못박을 수 없다). */ .r-pax{display:flex;flex-wrap:wrap;align-items:center; gap:var(--rsv-sp-2) var(--rsv-sp-4);margin:var(--rsv-sp-1) 0} .r-pax-item{display:flex;align-items:center;gap:var(--rsv-sp-2)} .r-pax-name{font-size:var(--rsv-fs-sm);color:var(--rsv-text-2);white-space:nowrap} /* 카드 안에서는 조금 작게 — 스물여덟 장이 각자 스테퍼 셋을 들고 있다 */ .r-pax .rsv-stepper button{width:30px;height:30px;font-size:15px} .r-pax .rsv-stepper__val{min-width:26px;font-size:var(--rsv-fs-sm)} /* * 좁은 화면에서는 스테퍼 대신 «요약 한 줄» 을 둔다 (2026-09-03). * * 실측: 375px 화면에서 카드 본문은 235px 인데 스테퍼 한 벌이 118.5px + 간격 16px 이라 * 권종 셋이면 387.5px 이 필요하다 — 석 줄로 쌓여 카드 한 장이 화면의 4분의 1을 먹었다. * 390px 도 가용 253px 대 필요 253.0px 으로 종이 한 장 차이라, 권종이 넷이 되거나 이름이 * 한 글자 길어지는 순간 무너진다. 카드 폭을 다 내줘도(358px) 387.5px 에 못 미친다. * * 그래서 고르는 일은 시트(.rsv-sheet)로 내보내고, 카드에는 «지금 몇 명인지» 만 남긴다. * 두 벌을 다 그려 두고 CSS 로 가른다 — 화면을 돌릴 때마다 JS 로 다시 그리면 스테퍼를 * 누르던 손끝에서 카드가 갈아 끼워진다. */ .r-pax-sum{display:none} @media(max-width:760px){ .r-pax{display:none} .r-pax-sum{display:flex;align-items:center;justify-content:space-between; gap:var(--rsv-sp-3);margin:var(--rsv-sp-1) 0;min-width:0} .r-pax-sum-txt{font-size:var(--rsv-fs-sm);color:var(--rsv-text-2);min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 「인원 변경」은 카드 전체가 이미 시트를 여는 과녁이라 «표지» 에 가깝다. 그래도 버튼으로 두는 것은 키보드·스크린리더에서 그 길이 이름을 갖게 하기 위해서다. */ .r-pax-edit{flex:none;font-size:var(--rsv-fs-sm);font-weight:700;color:var(--rsv-brand); text-decoration:underline;text-underline-offset:2px;padding:2px 0;background:none} } .r-addon{display:flex;align-items:center;justify-content:space-between;gap:var(--rsv-sp-2); min-width:0;font-size:var(--rsv-fs-sm);color:var(--rsv-text-2)} .r-addon span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .r-addon b{flex:none;color:var(--rsv-accent);font-weight:600} .r-price{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--rsv-sp-2); margin-top:auto;white-space:nowrap} .r-price .lbl{font-size:var(--rsv-fs-cap);color:var(--rsv-text-2)} .r-price b{font-size:var(--rsv-fs-price);font-weight:700;color:var(--rsv-text)} /* ── 결제금액 안내 (당진 스테이 이식) ── * * 목록 «아래» 본문 흐름 안에 있는 패널이다. 떠 있는 담기 바와 역할이 갈린다: * 담기 바는 굴리는 내내 따라다니며 남은 시간을 말하고, 이 패널은 멈춰 서서 내역을 편다. * * 금액 줄은
이다 — 「이름: 값」 쌍이 네 개라 목록이 아니라 정의 목록이 맞다. * 스크린리더가 「객실요금, 200,000원」으로 짝지어 읽는다. */ .paysum{margin:var(--rsv-sp-5) 0 40px} .paysum-body{display:grid;grid-template-columns:1fr auto;gap:var(--rsv-sp-4); align-items:start;padding:var(--rsv-sp-5); background:var(--rsv-surface);border:1px solid var(--rsv-line);border-radius:var(--rsv-r-lg)} .paysum-rooms{min-width:0} .paysum-rooms>b{display:block;font-size:var(--rsv-fs-name);font-weight:700;color:var(--rsv-text); margin-bottom:var(--rsv-sp-3)} .paysum-rooms ul{list-style:none;display:flex;flex-direction:column;gap:var(--rsv-sp-2)} .paysum-rooms li{font-size:var(--rsv-fs-sm);color:var(--rsv-text-2);line-height:var(--rsv-lh)} .paysum-rooms li b{color:var(--rsv-text);font-weight:600} /* 아직 아무것도 안 담았을 때. 자리를 비워 두면 패널이 「고장난 상자」로 보인다 */ .paysum-rooms .none{color:var(--rsv-text-3)} .paysum-amt{text-align:right;white-space:nowrap} .paysum-amt>div{display:flex;align-items:baseline;justify-content:flex-end; gap:var(--rsv-sp-4);font-size:var(--rsv-fs-sm);color:var(--rsv-text-2)} .paysum-amt dd{font-variant-numeric:tabular-nums} .paysum-amt .paysum-total{margin-bottom:var(--rsv-sp-3)} .paysum-amt .paysum-total dt{font-size:var(--rsv-fs-name);font-weight:700;color:var(--rsv-text)} .paysum-amt .paysum-total dd{font-size:var(--rsv-fs-total);font-weight:700;color:var(--rsv-brand)} .paysum-foot{display:flex;justify-content:flex-end;margin-top:var(--rsv-sp-4)} .paysum-foot .rsv-cta{min-width:180px} @media(max-width:760px){ /* 좁은 화면에서 좌우 두 칸을 고집하면 금액이 오른쪽 끝에 몰려 이름과 멀어진다. 세로로 쌓고, 금액 묶음은 선 하나로 객실 목록과 나눈다. */ .paysum-body{grid-template-columns:1fr;gap:var(--rsv-sp-3);padding:var(--rsv-sp-4)} .paysum-amt{padding-top:var(--rsv-sp-3);border-top:1px solid var(--rsv-line-soft)} .paysum-amt>div{justify-content:space-between} /* 「다음단계」를 숨긴다 — 담기 바의 「예약하기」와 «같은 곳으로 가는 같은 버튼» 이고, 좁은 화면에서는 둘이 맞붙어 초록 버튼 두 개가 겹친 것처럼 보인다. 담기 바는 화면 아래 붙어 있어 언제든 닿으므로 잃는 길이 없다. 넓은 화면에서는 담기 바가 가운데 카드로 떨어져 있어 그대로 둔다. */ .paysum-foot{display:none} } /* * 카드에 손을 얹으면 «누를 수 있다» 를 알린다. * * 인원 스테퍼가 카드 안으로 들어오면서 「선택하면 인원을 설정합니다」 안내 줄이 사라졌고, * 그 뒤로 카드가 눌리는 것인지 알려 주는 것이 커서 모양뿐이었다. * * 테두리 «색» 만 바꾸고 굵기는 그대로 둔다 — 굵어지면 카드가 1px 씩 움직인다. * 옅은 링을 더해 「지금 이 카드」를 짚어 준다. 바탕은 칠하지 않는다: 카드 안에 흰 스테퍼가 * 셋 있어서 바탕을 회색으로 깔면 그것들만 떠 보인다. */ /* * ⚠ hover 규칙은 «마우스가 있는 기기» 로 한정한다 (@media (hover:hover)). * 터치 기기에서는 탭한 카드에 :hover 가 «그대로 남는다» — 다른 카드를 누를 때까지 * 초록 테두리와 링이 붙어 있어 「담긴 카드」로 오해된다. 담김 표시는 .sel 하나뿐이어야 한다. */ @media (hover:hover){ .room:hover{border-color:var(--rsv-brand);box-shadow:0 0 0 3px rgba(var(--sage-rgb),.10)} /* 담긴 카드는 이미 초록 테두리다 — 링만 조금 더 또렷하게 해서 «뺄 수 있다» 를 알린다 */ .room.sel:hover{box-shadow:0 0 0 3px rgba(var(--sage-rgb),.18)} .room:hover .r-pick-hint{opacity:1} /* 손을 얹으면 과녁인 원도 같이 반응해야 «저기를 누르는구나» 로 읽힌다 */ .room:hover .r-pick:not(.on){border-color:var(--rsv-brand)} } /* 「담기」/「빼기」 — 평소에는 자리만 지키고 있다가 손을 얹으면 나타난다. opacity 로만 감춘다: display 로 지우면 나타날 때 원이 옆으로 밀린다. */ .r-actions{display:flex;align-items:center;gap:var(--rsv-sp-2)} .r-pick-hint{font-size:var(--rsv-fs-sm);font-weight:700;color:var(--rsv-brand); white-space:nowrap;opacity:0;transition:opacity var(--rsv-dur-state) ease} .room:focus-within .r-pick-hint{opacity:1} /* * 터치 기기에서는 «항상» 보인다. * * hover 가 없는 기기에서 opacity:0 + :hover 조합은 「영영 안 보인다」와 같다 — 손님 눈에는 * 26px 짜리 빈 동그라미만 남아, 그것이 누를 수 있는 것인지 담김 표시인지 알 수 없었다. */ @media (hover:none){ .r-pick-hint{opacity:1} } /* * ⚠ 단, 좁은 화면에서는 «아예 뺀다». * * 카드 머리는 「객실명 + 원」 한 줄인데, 그 사이에 「담기」가 끼면 객실명이 그만큼 눌린다 — * 이 시설의 이름은 뒤가 「3호」처럼 카드를 구별하는 번호라 말줄임에 가장 먼저 걸리는 곳이다. * * 빼도 잃는 것이 적다: 좁은 화면에서는 카드를 누르면 시트가 열려 「이 객실 담기 · N원」이 * 큰 CTA 로 그 말을 하고, 원 자체도 눌리면 초록으로 차고 체크가 들어와 담김을 알린다. * 스크린리더에는 그대로 남는다 — 원의 aria-label 과 aria-pressed 가 같은 말을 하고 있고, * 이 문구는 어차피 aria-hidden 이라 처음부터 읽히지 않았다. * * opacity 가 아니라 display 로 지운다. 투명하게만 두면 자리를 그대로 차지해 * 「이름이 눌리는 것」이 하나도 나아지지 않는다. */ @media(max-width:760px){ .r-pick-hint{display:none} } /* 담기 토글 — 색 단독으로 알리지 않는다: 테두리 + 체크 + aria-pressed (SPEC 10) */ .r-pick{flex:none;width:26px;height:26px;border-radius:50%;position:relative; border:1.5px solid var(--rsv-line);background:var(--rsv-surface); transition:background var(--rsv-dur-state) ease,border-color var(--rsv-dur-state) ease} .r-pick.on{border-color:var(--rsv-selected);background:var(--rsv-selected)} .r-pick.on::after{content:'';position:absolute;left:8px;top:5px;width:6px;height:11px; border-right:2px solid var(--rsv-text-on-brand);border-bottom:2px solid var(--rsv-text-on-brand); transform:rotate(45deg)} /* 보이는 원은 26px 이지만 누를 자리는 44px 로 넓힌다 */ .r-pick::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:44px;height:44px} /* * 빼는 동안에는 체크를 «지우고» 로딩만 남긴다. * * 체크는 CSS 의사요소(::after)라 StayUI.spin 이 innerHTML 을 바꿔도 그대로 남는다 — * 그래서 초록 원 위에 체크와 도는 원이 겹쳐 보였다. 지금 일어나는 일은 «빼는 중» 하나이므로 * 보이는 것도 하나여야 한다. */ .r-pick.btn-loading::after{display:none} .r-pick.btn-loading{opacity:1} /* 26px 원은 흐려지면 아예 안 보인다 */ /* * ⚠ 스피너를 transform 으로 가운데 두지 말 것. * 회전 애니메이션(@keyframes spin)이 transform:rotate 를 매 프레임 덮어써서 * translate(-50%,-50%) 가 지워진다 — 원 가운데가 아니라 «왼쪽 위» 로 튄다. * 버튼을 격자로 만들어 정렬을 맡기면 transform 은 회전만 하면 된다. */ .r-pick{display:grid;place-items:center} .r-pick .spinner{width:14px;height:14px;border-width:2px;margin:0;vertical-align:0; border-color:rgba(255,255,255,.4);border-top-color:var(--rsv-text-on-brand)} .r-err{display:none;font-size:var(--rsv-fs-cap);font-weight:600;color:var(--rsv-accent); background:var(--rsv-accent-tint);border-radius:var(--rsv-r-sm);padding:6px 10px;margin-top:var(--rsv-sp-1)} .r-err.show{display:block} /* ── 인원 선택 시트 (좁은 화면 전용, 2026-09-03 복원) ── * * 9/1 까지 쓰던 시트를 되살린 것이다. 그때는 인원과 «옵션» 을 함께 맡았는데, 옵션은 * 다음 화면(/reserve)으로 옮겨 갔으므로 여기에는 인원만 남는다 — 스크롤 없이 한 화면이다. * * ⚠ 넓은 화면에서는 열지 않는다 (main.js 의 isSheetView). 거기서는 카드 안 .r-pax 가 * 그대로 맡으므로 이 규칙들이 걸릴 일 자체가 없다. */ body.rsv-sheet-open{overflow:hidden} /* ⚠ z-index 는 토큰(--rsv-z-scrim 50)이 아니라 이 화면의 층에 맞춘다. 토큰은 예약 화면만 있는 전제로 매겨졌는데, 여기에는 하단 탭바(140)와 담기 바(150)가 이미 있다. 50 으로 두면 시트가 열려도 탭바가 그 위에 그려져 「담기」 버튼을 덮는다. 화면을 덮는 것들(.flt-back 280 · .modal-back 300)과 같은 층에 세운다. */ .rsv-sheet-wrap{position:fixed;inset:0;z-index:300;display:flex; align-items:flex-end;justify-content:center} .rsv-scrim{position:absolute;inset:0;border:0;padding:0;background:var(--rsv-scrim)} .rsv-sheet-wrap.is-open .rsv-scrim{animation:rsvScrim 200ms ease-out both} @keyframes rsvScrim{from{opacity:0}to{opacity:1}} /* * ⚠ 시트의 «기본» 상태는 제자리(transform 없음)다. 등장 효과는 열릴 때(.is-open)만 얹는다. * * 예전에는 .rsv-sheet 에 곧바로 animation 을 걸었다. 시트는 페이지가 열릴 때부터 * hidden(=display:none) 이라 그 애니메이션은 재생되지 않은 채 fill-mode:both 때문에 * 첫 프레임(translateY(28%))에 «멈춰» 버렸다 — 시트를 열면 화면 아래로 내려간 자리에 * 그려져 「담기」 버튼이 화면 밖으로 나갔다. */ .rsv-sheet{position:relative;z-index:1;width:100%; max-height:calc(100% - 34px);overflow-y:auto;overscroll-behavior:contain; background:var(--rsv-surface);border-radius:var(--rsv-r-xl) var(--rsv-r-xl) 0 0; box-shadow:var(--rsv-shadow-sheet); padding:var(--rsv-sp-2) var(--rsv-sp-4) calc(var(--rsv-sp-4) + env(safe-area-inset-bottom))} .rsv-sheet-wrap.is-open .rsv-sheet{animation:rsvSheet var(--rsv-dur-sheet) var(--rsv-ease) both} @keyframes rsvSheet{from{transform:translateY(28%);opacity:.4}to{transform:none;opacity:1}} .rsv-grip{width:36px;height:4px;border-radius:var(--rsv-r-pill);background:var(--rsv-line); margin:0 auto var(--rsv-sp-3)} .rsv-sheet-title{font-size:17px;font-weight:700;color:var(--rsv-text);line-height:1.35} .rsv-sheet-title:focus{outline:none} .rsv-sheet-cap{font-size:var(--rsv-fs-cap);color:var(--rsv-text-2);margin-top:2px} .rsv-sec{font-size:var(--rsv-fs-label);font-weight:700;letter-spacing:.08em; color:var(--rsv-text-3);margin:var(--rsv-sp-4) 0 var(--rsv-sp-2)} /* ⚠ .rsv-row 는 «시트 안으로» 한정한다. 예약 화면의 옵션 표(.rsv-opts .rsv-row)가 같은 이름을 쓰고 있어, 바깥에 두면 그 표의 여백·밑줄까지 바뀐다. */ .rsv-sheet .rsv-row{display:flex;align-items:center;justify-content:space-between; gap:var(--rsv-sp-3);padding:var(--rsv-sp-2) 0;border-bottom:1px solid var(--rsv-line-soft)} .rsv-sheet .rsv-row:last-child{border-bottom:none} .rsv-sheet .rsv-row-label{min-width:0} .rsv-sheet .rsv-row-label b{display:block;font-size:var(--rsv-fs-body);font-weight:600; color:var(--rsv-text)} .rsv-sheet-err{margin-top:var(--rsv-sp-3);padding:9px 12px;border-radius:var(--rsv-r-sm); background:var(--rsv-accent-tint);color:var(--rsv-accent); font-size:var(--rsv-fs-sm);font-weight:600} .rsv-sheet-tot{display:flex;align-items:baseline;justify-content:space-between; margin-top:var(--rsv-sp-4);padding-top:var(--rsv-sp-3);border-top:1px solid var(--rsv-line); font-size:var(--rsv-fs-body);color:var(--rsv-text-2)} .rsv-sheet-tot strong{font-size:var(--rsv-fs-total);font-weight:700;color:var(--rsv-text)} #paxSheetCta{margin-top:var(--rsv-sp-3)} /* ── 넓은 화면(PC) ── * * 모바일에서 정한 것들을 그대로 늘리지 않는다. 여기서는 폭이 남으므로 * ① 썸네일을 키우고 * ② 담기 바를 가운데 상자가 아니라 화면 아래 «띠» 로 붙이고(내용은 본문 폭에 정렬) */ @media(min-width:761px){ /* 당진 사이트 실측(193px). 사진을 크게 쓰는 것이 그 디자인의 인상 절반이다 */ :root{ --rsv-thumb-card:190px } .r-photo{min-height:110px} } /* ── 홀딩 타이머 (담기 바 안, 「N곳 담김」 아래) ── * 담기 바는 이미 어두운 바탕이라 브랜드색 띠를 겹치면 두 겹으로 보인다 — 옅은 반투명으로 얹는다. */ .rsv-hold{display:flex;align-items:center;gap:var(--rsv-sp-2);flex-basis:100%; margin:2px 0 0;padding:7px 11px;border-radius:var(--rsv-r-sm); background:rgba(255,255,255,.12);color:var(--rsv-text-on-brand); font-size:var(--rsv-fs-cap);transition:background var(--rsv-dur-state) ease} .rsv-hold svg{width:16px;height:16px;flex:none} .rsv-hold-txt{flex:none} .rsv-hold-txt b{font-variant-numeric:tabular-nums;font-weight:700} .rsv-hold-track{flex:1;height:3px;border-radius:var(--rsv-r-pill); background:rgba(255,255,255,.25);overflow:hidden;min-width:36px} .rsv-hold-fill{display:block;height:100%;width:100%;background:var(--rsv-text-on-brand); transition:width 1s linear} /* * 임박 — 색만 바꾸지 않는다. 문구도 「곧 만료」로 올라간다 (main.js). * * 예전에는 띠 전체를 순빨강(#D0121B)으로 칠했다. 담기 바가 이미 진녹색 면이라 그 위에 * 빨간 판이 얹히면 화면 아래에 «빨간 줄» 이 그어진 것처럼 보였다 — 남은 시간을 알리는 * 것치고 너무 크게 말한다. 붉은 기운만 얹고, 실제로 빨개지는 것은 «줄어드는 진행 바» 다. * 그 편이 「무엇이 줄고 있는가」를 가리키기도 한다. */ .rsv-hold.is-urgent{background:rgba(208,18,27,.34)} .rsv-hold.is-urgent .rsv-hold-txt{color:var(--rsv-accent-on-brand)} .rsv-hold.is-urgent .rsv-hold-fill{background:var(--rsv-accent-on-brand)} /* 담긴 것이 있으면 하단 바가 선다 (SPEC 3). 본문 아래는 담기 바 높이(--cartbar-h, ui.js 가 잰다)만큼 비운다 — 안 그러면 목록 끝이 가린다. ⚠ 2026-09-11 이전에는 여기서 탭바를 감추고 담기 바를 탭바 «위» 로 띄웠다. 메뉴가 서랍으로 올라가면서 바닥을 다투는 것이 없어져, 담기 바는 그냥 바닥에 선다. */ @media(max-width:760px){ body.has-cart{padding-bottom:var(--cartbar-h,0px)} body.has-cart .cartbar.show ~ .topbtn{bottom:calc(var(--cartbar-h,0px) + 10px)} } /* 넓은 화면도 담기 바가 화면 바닥 «띠» 로 붙는다(아래 «하단 담기 바» 의 min-width:761px). 여백 규칙이 위 좁은 화면 블록에만 있어서 넓은 화면에서는 푸터 아래 126px 이 바에 가렸다 (2026-09-11). 좁은 화면은 위 :has(.gnb.tabbar) 규칙이 명시도로 이기므로 그대로다. ⚠ 미디어쿼리 안으로 다시 넣지 말 것 — PublicCartBarKeepsFooterVisibleTest 가 막는다. */ body.has-cart{padding-bottom:var(--cartbar-h,0px)} /* ── 하단 액션 바 (예약 정보 입력 · 결제) ── * * 2026-09-02 부터 «넓은 화면에서도» 뜬다. 예전에는 좁은 화면 전용이었다 — 넓은 화면에는 * 오른쪽에 결제 금액 상자가 붙어 있어 총액과 버튼이 늘 보였기 때문이다. * 당진 스테이 디자인으로 옮기면서 그 사이드바를 걷어냈고, 그러자 넓은 화면에서 * 폼을 채우는 동안 총액도 다음 버튼도 사라졌다. 그 자리를 이 바가 대신한다. * * 늘 떠 있다 — 홀딩 타이머가 이 바 안에 있어서다. 같은 버튼을 위아래로 두지 않으려고 * 본문 맨 아래 버튼 줄(#reserveFoot)을 감춘다 (.rsv-foot 주석). .is-hidden 은 이제 붙이는 곳이 없다. */ .rsv-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:150; background:var(--rsv-brand);color:var(--rsv-text-on-brand); padding:12px var(--rsv-sp-4) calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px -12px rgba(0,0,0,.45); transition:transform .28s var(--rsv-ease), opacity .28s var(--rsv-ease)} /* 감출 때 display:none 이 아니라 «밀어낸다» — 높이를 재는 ResizeObserver 가 0 을 읽으면 본문 아래 여백이 사라져 페이지가 통째로 튄다. */ .rsv-actionbar.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none} /* * 담기 바(.cart-card)와 «똑같은» 두 줄 배치다 — * 윗줄 「총 N건 결제금액」 「총 결제 금액 / 금액」 * 아랫줄 「홀딩 띠 ────────」 「이전단계 · 결제 단계로」 * * flex 로 흘리면 홀딩 띠가 자기 줄을 독점해 세 줄이 되고 바가 목록을 그만큼 가린다. * grid-template-areas 로 자리를 직접 지정해 DOM 순서에 기대지 않는다. */ .rsv-actionbar-in{max-width:1200px;margin:0 auto; display:grid;grid-template-columns:1fr auto; grid-template-areas:"info total" "hold go"; column-gap:var(--rsv-sp-4);row-gap:10px;align-items:center} .ab-info{grid-area:info;font-size:var(--rsv-fs-sm);color:rgba(255,255,255,.75)} .ab-info b{color:var(--rsv-text-on-brand);font-size:14.5px} .ab-total{grid-area:total;text-align:right;white-space:nowrap} .ab-total small{display:block;font-size:10.5px;color:rgba(255,255,255,.5)} .ab-total b{font-size:20px;color:var(--rsv-text-on-brand)} .rsv-actionbar .rsv-hold{grid-area:hold;margin:0} .rsv-actionbar-btns{grid-area:go} .rsv-actionbar-btns{display:flex;gap:var(--rsv-sp-2)} .rsv-back{min-height:var(--rsv-touch-cta);padding:0 26px;border-radius:var(--rsv-r-md); background:var(--rsv-surface);color:var(--rsv-brand);font-size:15px;font-weight:700} .rsv-actionbar .rsv-cta{background:var(--rsv-surface);color:var(--rsv-brand)} .rsv-actionbar .rsv-cta:hover:not(:disabled){background:var(--rsv-surface-sunken)} body:has(.rsv-actionbar){padding-bottom:var(--actionbar-h,96px)} @media(max-width:760px){ /* * 좁은 화면은 «세 줄» 이다: * 1줄 「총 N건 결제금액」 「금액」 * 2줄 홀딩 띠 ─────────────────── * 3줄 [이전단계] [결제 단계로] * * 예전에는 네 줄이었다(185px = 812px 화면의 23%). 격자를 풀어 세로로 쌓았더니 * 「총 N건 결제금액」과 「총 결제 금액」이 «같은 말을 두 번» 하면서 각자 한 줄을 먹었다. * 금액은 건수 줄의 오른쪽으로 올리고, 되풀이되는 작은 라벨은 지운다. */ .rsv-actionbar-in{display:grid;grid-template-columns:1fr auto; grid-template-areas:"info total" "hold hold" "go go"; column-gap:var(--rsv-sp-3);row-gap:8px;align-items:center} .ab-info{text-align:left} .ab-total{text-align:right} .ab-total small{display:none} .ab-total b{font-size:22px} .rsv-actionbar-btns .rsv-back{flex:0 0 38%;padding:0} .rsv-actionbar .rsv-cta{flex:1} /* 폴백은 세 줄 바의 실측(≈150px)보다 넉넉하게. 모자라면 본문 마지막 줄이 바 뒤로 들어간다 */ body:has(.rsv-actionbar){padding-bottom:var(--actionbar-h,164px)} /* 위쪽 결제 상자의 버튼은 아래 바가 대신한다 */ .paybox .pay-btn{display:none} /* * 결제 화면의 상자는 좁은 화면에서 «껍데기» 가 된다. * * 이 상자에 들어 있던 것은 총액과 결제하기 둘뿐인데, 버튼은 바로 위 규칙이 감추고 * 총액은 아래 바가 똑같이 다시 보여준다. 남는 것은 아무것도 안 나누는 구분선 하나와 * 빈 어두운 카드다 — 갤럭시에서 실제로 그렇게 떴다 (2026-09-02). * 같은 금액이 두 번 뜨는 것도 «어느 쪽이 정본인가» 를 흔든다. * * 예약 화면(reserve.html)의 paybox 는 건드리지 않는다 — 그쪽은 객실료·옵션료 내역이 * 있어서 합계가 그 계산의 마지막 줄이다. 지우면 내역만 남고 답이 사라진다. * 그래서 결제 화면 전용 클래스(.paybox-pay)에만 건다. * * 총액 줄은 «지우지» 않고 감추기만 한다 — 하단 바가 이 값을 그대로 비춘다 * (web/js/ui.js 의 mountActionBar). */ .paybox-pay .row.tot{display:none} /* 카드를 벗었으니 문구도 어두운 배경용 색을 벗는다 (카드 자체를 벗기는 규칙은 .paybox 정의 «뒤» 에 있어야 이긴다 — 아래 .pay-err 근처 참고) */ .paybox-pay .pay-note{color:var(--ink2);margin-top:0} } /* ── 예약 정보 입력 화면 (당진 스테이 이식, 2026-09-02) ── * * 「제목 + 3px 진녹색 밑줄」 한 벌이 이 화면의 뼈대다. 목록 화면은 «색을 채운 띠» * (.sec-t)를 쓰는데, 여기서는 섹션이 다섯이라 그걸 반복하면 화면이 초록 줄무늬가 된다. * 밑줄은 같은 초록을 쓰면서도 면적이 작아 여러 번 나와도 배경으로 물러난다. * 값은 당진 사이트 실측이다 — h2 36px/700, padding 21px 0, margin-top 80px. */ .rsv-page{max-width:1200px} .rsv-sec-h{display:flex;align-items:center;justify-content:space-between;gap:var(--rsv-sp-4); border-bottom:3px solid var(--rsv-brand);margin-top:64px} .rsv-sec-h h2{font-size:32px;font-weight:700;color:var(--rsv-text); padding:21px 0;letter-spacing:-.02em} .rsv-loading{padding:40px 0;text-align:center;color:var(--rsv-text-2);font-size:var(--rsv-fs-body)} .rsv-loading.err{color:var(--rsv-accent)} .rsv-loading a{color:var(--rsv-brand);font-weight:700;text-decoration:underline} /* 객실 안내 — 사진 · 이름/정원/상세보기 · 객실요금 (설명은 모달로, V071) */ .rsv-rooms{display:flex;flex-direction:column} .rsv-room{display:grid;grid-template-columns:210px 1fr auto;gap:var(--rsv-sp-5); align-items:center;padding:30px 0;border-bottom:1px solid var(--rsv-line-soft)} .rsv-room-photo{height:140px;border-radius:var(--rsv-r-md); background:var(--rsv-surface-sunken) center/cover no-repeat} .rsv-room-body{min-width:0} .rsv-room-head{display:flex;align-items:baseline;gap:var(--rsv-sp-3);flex-wrap:wrap} .rsv-room-head b{font-size:24px;font-weight:700;color:var(--rsv-brand)} .rsv-room-head .cap{font-size:var(--rsv-fs-name);color:var(--rsv-text-2)} /* 인원 바로 옆. 이름·정원과 한 줄에 서므로 높이를 글줄에 맞춘다 */ .rsv-room-more{border:1px solid var(--rsv-line);background:var(--rsv-surface); color:var(--rsv-text-2);border-radius:999px;padding:4px 12px; font-size:var(--rsv-fs-sm);font-family:inherit;cursor:pointer; transition:border-color .15s,color .15s} .rsv-room-more:hover{border-color:var(--rsv-brand);color:var(--rsv-brand)} .rsv-room-more:focus-visible{outline:2px solid var(--rsv-brand);outline-offset:2px} /* 상세 보기 모달 본문 — 약관 모달 껍데기를 그대로 쓰고 안쪽만 라벨–값 표로 */ .rsv-room-spec{display:grid;grid-template-columns:80px minmax(0,1fr); gap:10px 16px;margin:0} .rsv-room-spec dt{font-weight:700;color:var(--rsv-text)} .rsv-room-spec dd{margin:0;color:var(--rsv-text-2);word-break:keep-all} .rsv-room-price{text-align:right;white-space:nowrap} .rsv-room-price small{display:block;font-size:var(--rsv-fs-sm);color:var(--rsv-text-2)} .rsv-room-price b{font-size:26px;font-weight:700;color:var(--rsv-text)} /* 눌러서 크게 볼 수 있는 사진 — 돋보기 배지로 클릭 가능함을 알린다 */ .rsv-room-photo.is-zoomable{position:relative;cursor:zoom-in} .rsv-room-photo.is-zoomable:focus-visible{outline:2px solid var(--rsv-brand);outline-offset:2px} .rsv-room-zoom{position:absolute;right:8px;bottom:8px;width:28px;height:28px; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.55);color:#fff;border-radius:50%;pointer-events:none} .rsv-room-zoom svg{width:16px;height:16px} /* 사진 확대 라이트박스 (전체화면 오버레이) */ .rsv-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.85); display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out} .rsv-lightbox img{max-width:100%;max-height:100%;border-radius:var(--rsv-r-md); box-shadow:0 10px 40px rgba(0,0,0,.5)} .rsv-lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px; border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff; font-size:20px;line-height:1;cursor:pointer} .rsv-lightbox-close:hover{background:rgba(255,255,255,.28)} /* 예약 정보 확인 표 */ .rsv-table-wrap{overflow-x:auto} /* * table-layout:fixed — 칸 폭을 «내용이 아니라 우리가» 정한다. * * 기본값(auto)에서는 브라우저가 글자 길이를 재서 폭을 나눈다. 그래서 인원을 한 명 올릴 * 때마다 「성인 2」→「성인 3 · 아동 1」, 금액도 「990원」→「2,490원」 으로 글자 수가 바뀌고, * 표 전체가 매번 다시 배치돼 화면이 미세하게 흔들렸다. 폭을 못박으면 그 일이 없다. * * 아래 백분율 합은 100 이다. 좁은 화면에서는 min-width 가 가로 스크롤을 만든다. */ .rsv-table{width:100%;border-collapse:collapse;table-layout:fixed} .rsv-table th:nth-child(1),.rsv-table td:nth-child(1){width:24%} /* 객실명/기간 */ .rsv-table th:nth-child(2),.rsv-table td:nth-child(2){width:26%} /* 예약일 */ .rsv-table th:nth-child(3),.rsv-table td:nth-child(3){width:9%} /* 기간 */ .rsv-table th:nth-child(4),.rsv-table td:nth-child(4){width:17%} /* 인원 */ .rsv-table th:nth-child(5),.rsv-table td:nth-child(5){width:24%} /* 결제 금액 */ /* 반려동물 칸이 켜지면 여섯 칸이 된다 — 인원·금액에서 조금씩 떼어 준다 */ .rsv-table thead .col-pet:not([hidden]) ~ th{width:20%} .rsv-table:has(thead .col-pet:not([hidden])) th:nth-child(4), .rsv-table:has(thead .col-pet:not([hidden])) td:nth-child(4){width:14%} .rsv-table:has(thead .col-pet:not([hidden])) th:nth-child(5), .rsv-table:has(thead .col-pet:not([hidden])) td:nth-child(5){width:10%} .rsv-table:has(thead .col-pet:not([hidden])) th:nth-child(6), .rsv-table:has(thead .col-pet:not([hidden])) td:nth-child(6){width:20%} /* 편집기 줄은 colspan 이라 위 폭 규칙에 걸리지 않는다 — 그대로 전체 폭을 쓴다 */ .rsv-table .sel-editrow td{width:auto} .rsv-table th{font-size:18px;font-weight:700;color:var(--rsv-text); padding:22px 8px;border-bottom:1px solid var(--rsv-line-soft)} .rsv-table td{padding:18px 8px;text-align:center;vertical-align:middle; font-size:var(--rsv-fs-name);color:var(--rsv-text-2);border-bottom:1px solid var(--rsv-line)} .rsv-table .c-room{font-size:19px;font-weight:700;color:var(--rsv-brand)} /* * 예약일은 «두 줄을 묶어» 가운데에 둔다. * * 각 줄을 따로 가운데 정렬하면 두 줄의 폭이 같을 때만 배지가 세로로 맞는다 — * 지금은 날짜가 늘 같은 자릿수라 맞지만, 문구가 하나라도 바뀌면(「입실 예정」 같은) * 배지가 어긋난다. 감싸개를 inline-block 으로 두고 그 «덩어리» 를 가운데 두면, * 안쪽은 계속 왼쪽 정렬이라 배지가 언제나 한 세로선에 선다. */ .rsv-table .c-date{text-align:center} .rsv-dates{display:inline-block;text-align:left} .rsv-date{display:flex;align-items:center;gap:10px;white-space:nowrap} .rsv-date + .rsv-date{margin-top:8px} .rsv-date-tag{flex:none;display:inline-grid;place-items:center;width:48px;height:25px; border:1px solid var(--rsv-line-soft);border-radius:2px; font-size:11px;font-weight:500;color:var(--rsv-text-2)} .rsv-table .c-price{white-space:nowrap;position:relative} .rsv-table .c-price > b{font-size:24px;font-weight:700;color:var(--rsv-brand)} /* 그 객실의 내역. 목록 화면의 「결제금액 안내」와 같은 세 줄이다 */ .rsv-breakdown{margin-top:10px;padding:10px 12px;border-radius:var(--rsv-r-sm); background:var(--rsv-surface-sunken);font-size:var(--rsv-fs-cap);color:var(--rsv-text-2)} .rsv-breakdown div{display:flex;justify-content:space-between;gap:var(--rsv-sp-4)} .rsv-acts{display:flex;gap:var(--rsv-sp-2);justify-content:center;margin-top:12px;flex-wrap:wrap} /* 「인원 변경」은 손님이 «누를 수 있는 것» 으로 보여야 한다 — 예전에는 맨몸 회색 글자라 못 찾았다(2026-09-06). 브랜드색 알약으로 세워 눈에 걸리게 한다. (빼기는 아래 .rsv-x 로 뺐다) */ .rsv-acts .rm{font-family:inherit;line-height:1;white-space:nowrap;cursor:pointer; border:1px solid var(--rsv-brand);border-radius:var(--rsv-r-pill);padding:8px 15px; font-size:13px;font-weight:600;background:var(--rsv-surface);color:var(--rsv-brand); transition:background .15s,border-color .15s,color .15s} .rsv-acts .js-edit:hover{background:var(--rsv-surface-sunken)} /* 「빼기」는 «이 객실을 지우는» 동작이라 행 우측의 × 로 뺐다 — 인원 변경(초록 알약)과 뜻이 섞이지 않고, 카트 한 줄을 닫듯 지운다. 짚으면 빨강으로 지우는 동작임을 알린다. .js-rm 클래스는 그대로라 reserve.js 의 빼기 핸들러가 그대로 잡는다. */ .rsv-x{position:absolute;top:12px;right:6px;width:26px;height:26px;padding:0; border:1px solid var(--rsv-line);border-radius:50%;background:var(--rsv-surface); color:var(--rsv-text-2);font-size:18px;line-height:1;cursor:pointer; display:grid;place-items:center; transition:border-color .15s,color .15s,background .15s} .rsv-x:hover{border-color:var(--rsv-accent);color:var(--rsv-accent);background:var(--rsv-accent-tint)} .rsv-dropped{margin-top:10px;font-size:var(--rsv-fs-sm);color:var(--terra)} /* 편집기 줄은 «표의 한 칸» 이라 가운데 정렬을 물려받는다 — 왼쪽으로 되돌린다 */ /* * 편집기 줄은 «표 밖» 처럼 보이면 안 된다. * * 표 칸은 가운데 정렬인데 이 줄만 왼쪽 끝에서 시작해서, 「기준 2명 · 최대 4명」과 스테퍼가 * 표 테두리에 붙어 어느 줄에 딸린 것인지 읽히지 않았다. 안쪽 여백을 표 칸(18px)에 맞추고 * 옅은 바탕을 깔아 «위 줄의 속» 임을 보인다. */ .rsv-table .sel-editrow td{text-align:left;padding:0 24px;border-bottom:1px solid var(--rsv-line); background:var(--rsv-surface-sunken)} .rsv-table .sel-editrow:has(.sel-edit[hidden]) td{padding:0;border:0} /* 합계금액 · 총 결제 금액 */ .rsv-sum-row,.rsv-final-row{display:flex;align-items:center;justify-content:space-between; gap:var(--rsv-sp-4);padding:26px 24px} .rsv-sum-row{font-size:19px;font-weight:600;color:var(--rsv-text-2); border-bottom:2px solid var(--rsv-text-2)} /* 총액만 빨강이다 — 당진 사이트와 같은 값(#D0121B = --rsv-accent). 이 화면에서 빨강은 여기 한 곳뿐이라 「마지막 숫자」로 읽힌다. */ .rsv-final-row{font-size:26px;font-weight:700;color:var(--rsv-accent)} /* 추가 옵션 — 담은 객실마다 한 묶음. 방이 하나뿐이면 객실명 줄은 군더더기다(위 표에 이미 있다). :only-child 로 그때만 감춘다. */ .rsv-opts{padding:var(--rsv-sp-5) 0 0} .rsv-opt-group + .rsv-opt-group{margin-top:var(--rsv-sp-5); padding-top:var(--rsv-sp-5);border-top:1px solid var(--rsv-line-soft)} .rsv-opt-room{display:block;font-size:var(--rsv-fs-name);font-weight:700; color:var(--rsv-brand);margin-bottom:var(--rsv-sp-3)} .rsv-opt-group:only-child .rsv-opt-room{display:none} /* * 날짜 블록 (V064) — 「이용일 : 9월 7일(월)」 아래에 그 밤에 살 수 있는 옵션만 편다. * * 날짜가 옵션보다 «위» 다. 반대로 옵션 아래에 날짜를 늘어놓으면, 같은 날 무엇무엇을 * 골랐는지 보려고 목록을 세로로 훑어야 한다 — 손님이 실제로 묻는 것은 「그날 뭘 시킬까」다. * * 1회 과금 옵션은 「숙박 전체」 블록으로 맨 위에 선다. 날짜마다 반복하면 픽업이 세 번 떠서 * 「매일 픽업해 준다」로 읽힌다. */ .rsv-opt-day + .rsv-opt-day{margin-top:var(--rsv-sp-4)} .rsv-opt-date{display:block;font-size:var(--rsv-fs-sm);font-weight:700; color:var(--rsv-text-2);padding-bottom:6px;border-bottom:1px solid var(--rsv-line-soft)} /* * 옵션은 «표» 다 — 한 줄에 하나, 넓은 화면에서만 두 칸. * * 예전에는 라벨과 스테퍼를 붙여 옆으로 흘렸다(flex-wrap). 옵션이 둘일 때는 한 줄에 담겨 * 깔끔했지만, 이름 길이가 제각각이라 스테퍼가 줄마다 다른 자리에 섰다. 옵션이 대여섯 개로 * 늘면 「화목난로 … [− 0 +] 바베큐세트 … [− 0 +]」가 한 덩어리로 이어져, * 어느 스테퍼가 어느 옵션의 것인지 눈으로 되짚어야 한다. * * 칸을 고정하면 스테퍼가 «같은 세로선» 에 서고, 밑줄이 옵션 하나의 경계를 긋는다. * 개수가 늘어도 줄만 늘어난다. 관리자가 옵션을 몇 개 만들지는 정해져 있지 않다. */ .rsv-opts .rsv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px;row-gap:0} .rsv-opts .rsv-row{display:flex;align-items:center;justify-content:space-between; gap:var(--rsv-sp-4);min-width:0;padding:14px 0;background:none;border:0; border-bottom:1px solid var(--rsv-line-soft)} /* 마지막 «줄» 에는 밑줄을 긋지 않는다. 두 칸이므로 마지막 항목과 — 그 줄이 꽉 찼을 때만 — 그 왼쪽 항목까지 둘이다. */ .rsv-opts .rsv-row:last-child, .rsv-opts .rsv-row:nth-last-child(2):nth-child(odd){border-bottom:none} .rsv-opts .rsv-row-label{display:block;min-width:0} .rsv-opts .rsv-row-label b{font-weight:700} .rsv-opts .rsv-row-label small{color:var(--rsv-text-2);font-size:var(--rsv-fs-cap)} /* 단가는 이름 아래 «따로» 둔다. 이름 옆에 이어 붙이면 어디까지가 옵션 이름인지 흐려진다 */ .rsv-opts .rsv-row-price{display:block;margin-top:4px; font-size:var(--rsv-fs-sm);font-weight:600;color:var(--rsv-text-2)} /* 「언제부터 쓸 수 있는가」는 «주의» 지 오류가 아니다 — 빨강이 아니라 호박색(--terra) */ .rsv-opts .opt-from{margin-top:4px;font-size:var(--rsv-fs-cap);color:var(--terra)} .rsv-opts .rsv-stepper{display:inline-flex;width:auto;flex:none} /* [hidden] 이 이 display 에 져서 안 사라진다 — 체크 전에는 스테퍼를 감춰야 하므로 되돌린다 */ .rsv-opts .rsv-stepper[hidden]{display:none} /* * 한 줄이 «그 날 담는가, 담으면 몇 개인가» 다 (V064·V066). * * 왼쪽 절반(.rsv-optmain)만