/* plan-v2.css — 원본 plan은 그대로 두고, 새 헤더/푸터(nav)만 입힘. ※ 원본 common.css가 html{font-size:62.5%}라 1rem=10px → nav/footer는 px로 고정. */ :root{ --paper:#faf7f1; --white:#fff; --ink:#241f1b; --muted:#6f665b; --line:#e7ded0; --red:#a5282c; --red-deep:#8a242a; --gold-soft:#c6a15b; --dark:#241819; --serif:"Zen Old Mincho",serif; --sans:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif; } #page_top{ display:none!important; } /* ---- 프리뷰 리본 ---- */ .ribbon{ background:var(--dark); color:#f3ead9; text-align:center; font-size:12px; letter-spacing:.04em; padding:8px 16px; } .ribbon b{ color:var(--gold-soft); } /* ---- 새 헤더/푸터 (다른 페이지와 동일 톤, px 고정) ---- */ .wrap{ max-width:1140px; margin:0 auto; padding-inline:clamp(16px,3vw,40px); } header{ position:sticky!important; top:0; z-index:60; height:auto!important; text-align:left!important; background:rgba(250,247,241,.94)!important; backdrop-filter:blur(8px); border-bottom:1px solid var(--line)!important; } .nav{ display:flex; align-items:center; justify-content:space-between; height:62px; } .brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; } .brand .jp{ font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:.12em; color:var(--ink); } .brand .en{ font-family:var(--sans); font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } .menu{ display:flex; align-items:center; gap:26px; } .menu a{ font-family:var(--sans); font-size:14px; letter-spacing:.06em; color:var(--ink); opacity:.85; text-decoration:none; transition:.2s; } .menu a:hover{ opacity:1; color:var(--red); } .menu a.strong{ color:var(--red); opacity:1; font-weight:700; } .nav .btn{ display:inline-flex; align-items:center; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.08em; padding:9px 18px; border-radius:3px; text-decoration:none; background:var(--red); color:#fff!important; border:1px solid var(--red); transition:.22s; } .nav .btn:hover{ background:var(--red-deep); } .burger{ display:none; background:none; border:0; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; } @media (max-width:860px){ .menu{ position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; background:var(--white); border-bottom:1px solid var(--line); padding:6px 0 16px; transform:translateY(-140%); transition:.32s; box-shadow:0 20px 30px -20px rgba(0,0,0,.25); z-index:59; } .menu.open{ transform:translateY(0); } .menu a{ width:100%; padding:14px 22px; font-size:15px; } .nav .btn{ margin:8px 22px 0; justify-content:center; font-size:14px; padding:12px 18px; } .burger{ display:block; } } footer{ background:var(--white)!important; border-top:1px solid var(--line)!important; color:var(--ink)!important; } .foot{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:42px 0 20px; text-align:left; } .foot .brand .jp{ font-size:22px; } .foot p{ font-family:var(--sans); color:var(--muted); font-size:13px; max-width:30ch; margin:12px 0 0; line-height:1.7; } .foot-links{ display:flex; gap:20px; flex-wrap:wrap; } .foot-links a{ font-family:var(--sans); color:var(--muted); font-size:13px; text-decoration:none; } .foot-links a:hover{ color:var(--red); } .copy{ text-align:center; font-family:var(--sans); font-size:11px; letter-spacing:.12em; color:var(--muted); padding:18px 0 26px; border-top:1px solid var(--line); margin:0; } /* ───────────────────────────────────────────── 「ご用意いただく物」 일러스트 (사장님 요청 2026-07-26) 원본 홈 FLOW 섹션의 인라인 SVG를 plan 페이지 「ご予約までの流れ」 모달 안으로 이관. 모달 배경이 녹색(#849576)이라 흰색 아이콘이 잘 보인다. ※ common.css 가 html{font-size:62.5%} 이므로 rem 대신 px 로 지정. ───────────────────────────────────────────── */ #plan .plan-flow .h__wrapper{ width:100%; display:flex; justify-content:center; margin-top:38px; } #plan .plan-flow .h__wrapper h3{ position:relative; display:inline-block; margin:0 0 26px; padding:0; font-size:20px; font-weight:500; color:#fff; letter-spacing:.1em; text-align:center; } #plan .plan-flow .h__wrapper h3::before, #plan .plan-flow .h__wrapper h3::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); width:8px; height:8px; background:#fff; border-radius:50%; } #plan .plan-flow .h__wrapper h3::before{ left:114%; } #plan .plan-flow .h__wrapper h3::after{ right:114%; } #plan .plan-flow .flow__bring{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; color:#fff; font-size:13px; line-height:1.75; } #plan .plan-flow .flow__bring .bring__item{ margin:0; } #plan .plan-flow .flow__bring svg{ display:block; margin:0 auto 12px; } #plan .plan-flow .flow__bring .tops{ width:96px; height:auto; } #plan .plan-flow .flow__bring .bottoms{ width:46px; height:auto; } #plan .plan-flow .flow__bring .bring__list--text{ margin:0; color:#fff; } @media screen and (min-width:768px){ #plan .plan-flow .h__wrapper h3{ font-size:22px; } #plan .plan-flow .flow__bring{ flex-direction:row; justify-content:center; align-items:flex-end; gap:52px; font-size:15px; } #plan .plan-flow .flow__bring .tops{ width:112px; } #plan .plan-flow .flow__bring .bottoms{ width:54px; } } /* ───────────────────────────────────────────── plan 페이지 톤 통일 (사장님 피드백 2026-07-26: 「構成は完璧ですが、少しデザインや色を変えて下さい」) 바꾸는 것 (홈/About 과 같은 톤으로): ・페이지 배경 #e7e1de(차가운 회베이지) → #faf7f1(따뜻한 종이색, 홈과 동일) ・본문 글자색 순수 검정 → #241f1b(홈의 ink) ・세로쓰기 제목 액자 검정 테두리 → 금색(#a97e2f) + 잉크 글자 ・본문 줄간격 지정 없음(=1.15, 매우 빽빽) → 1.9 └ 「スマホでの見やすさ：文字の段落がなく、見にくいです」의 실질적 원인 바꾸지 않는 것 (의도적으로 유지): ・구성·카탈로그 코드·사진·문구 (「写真と文章はそのまま」) ・플랜별 모달 색(녹/남/청/베이지/자…) = 플랜을 구분해주는 기능적 색 ・흰색 버튼, 오렌지 상세 배너 ・세로쓰기 제목의 줄간격 (건드리면 액자 밖으로 넘침) ───────────────────────────────────────────── */ body{ background-color:#faf7f1; color:#241f1b; } .section-title{ border-color:#a97e2f; } .section-title__line{ border-left-color:#a97e2f; } .section-title__content{ color:#241f1b; } .section-title__side-text{ color:#a97e2f; } .section-title__side-text::after{ background-color:#a97e2f; } #plan dd, #plan .title-text, #plan .details__text, #plan .details__attention, .cancel__text p, .cancel__rental p{ line-height:1.9; } /* ═════════════════════════════════════════════ plan 페이지 2차 피드백 반영 (사장님 2026-07-28) ① 세로쓰기 제목 액자 -> 다른 페이지와 같은 형식 ② 상단 사진 슬라이드쇼 삭제 (HTML) ③ 요금 안내 박스(주황) 색 변경 ④ 플랜 배너: 사진 제거 -> 색 블록 + 선그림 + 글자 (색 구분은 유지) ═════════════════════════════════════════════ */ /* ① 페이지 제목 — 홈/About/FAQ 와 같은 구성(작은 영문 + 제목 + 금색 선) */ .page-head{ text-align:center; padding:0 20px; margin:0 auto 34px; } .page-head .ph-kicker{ margin:0; font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--red); } .page-head .ph-title{ margin:10px 0 0; font-family:var(--serif); font-weight:500; font-size:clamp(22px, 18px + 1.4vw, 33px); line-height:1.4; letter-spacing:.03em; color:var(--ink); } .page-head .ph-line{ width:40px; height:1px; margin:14px auto 0; border:0; background:#a97e2f; } /* ③ 요금 안내 박스: 주황(#c37b44) -> 깊은 금색. 흰 글자 대비도 2.9:1 -> 4.6:1 로 개선된다. */ #plan .plan__details{ background-color:#8a6520; } /* ④ 「プランの選び方」 배너: 초록(#849576) -> 深紅(홈의 red-deep) ※ 배너와 모달은 원본 설계상 같은 색을 쓰므로 함께 변경한다. (모달만 초록으로 남으면 배너를 눌렀을 때 색이 튄다) ※ 나머지 7개 배너 색(남/청/베이지/자/올리브/모브/슬레이트)은 요청 범위 밖이므로 유지. 배너에 이미 background-color 가 지정되어 있어, 사진만 제거하면 색 블록이 된다. */ #plan .plan-flow .plan__banner{ background-color:var(--red-deep); } #plan .plan-flow .plan__banner::after{ background:linear-gradient(90deg, rgba(138,36,42,0) 0%, rgba(138,36,42,1) 50%); } #plan .plan-flow .plan__content{ background-color:var(--red-deep); } /* ⑥ 좌측 세로 「予約はこちら」 탭 삭제 (사장님 요청 2026-07-28) ※ .reserve-link 는 라이브 복제본 plan.html 과 공용 클래스이므로, 재디자인 페이지만 읽는 이 파일에서 숨긴다 → 라이브에는 영향 없음. 예약 경로는 상단 메뉴 「ご予約」 버튼 + 각 플랜의 「予約はこちら」 + 취소안내 아래 버튼으로 충분. */ #subpage .reserve-link{ display:none !important; } /* ⑦ 「プランの選び方」 배너·모달의 붉은색 톤다운 (사장님: 「赤色が強すぎて文字が読めないです」) 대비 자체는 8.87:1 로 충분했지만 채도가 높아 흰 글자가 번져 보이는 문제. #8a242a → #6f3034 (채도를 낮춘 えんじ). 대비 9.78:1 로 오히려 개선. */ #plan .plan-flow .plan__banner{ background-color:#6f3034; } #plan .plan-flow .plan__banner::after{ background:linear-gradient(90deg, rgba(111,48,52,0) 0%, rgba(111,48,52,1) 50%); } #plan .plan-flow .plan__content{ background-color:#6f3034; } /* ═══════════════════════════════════════════════════════════════ 플랜 카드 디자인 = A안 「紙(かみ)」 — 사장님 확정 (2026-07-28) 흰 카드 + 왼쪽 색 띠 + 잉크 글자. 색은 배경이 아니라 '표식'으로만 쓴다. → 「赤色が強すぎて文字が読めない」 문제가 원천적으로 사라지고(대비 16:1), 홈·About·FAQ 의 '종이 + 금선' 톤과 가장 잘 맞는다. ※ B안(색 블록 톤다운)·C안(메뉴판 목록)은 커밋 8c67f0f 의 css/plan-styles.css 에 남아 있어 언제든 되돌릴 수 있다. ═══════════════════════════════════════════════════════════════ */ /* 플랜별 식별 색 — 왼쪽 띠·버튼 글자·선그림에 사용 */ #plan .plan-flow { --pc:#6f3034; } /* 채도를 낮춘 えんじ (사장님 지적 반영) */ #plan .formal-plan { --pc:#2f3242; } #plan .antique-plan { --pc:#2f4546; } #plan .yukata-plan { --pc:#a98545; } #plan .omakase-plan { --pc:#6f4144; } #plan .kituke-plan { --pc:#4b5750; } #plan .pair-plan { --pc:#8a6274; } #plan .option-plan { --pc:#4d5468; } #plan .plan__banner{ /* !important 필요: plan.css 의 `#plan .<플랜>-plan .plan__banner{background-color}` 가 더 구체적이라 이것 없이는 플랜별 색이 배경으로 남는다. */ background-color:var(--white) !important; aspect-ratio:auto; color:var(--ink); text-align:left; display:grid; grid-template-columns:1fr; /* 글자 한 칼럼. 선그림은 아래에서 절대배치로 빼낸다 */ grid-template-rows:auto auto; gap:2px 0; padding:20px 22px 18px 86px; /* 왼쪽 여백은 선그림 자리 */ border:1px solid var(--line); border-left:5px solid var(--pc); border-radius:2px; transition:box-shadow .25s ease, transform .25s ease; } /* 원본이 이 플랜에만 `grid-template-columns:30% 70%` 를 걸어두어 칼럼 폭이 제각각이었다 → 통일 */ #plan .plan-flow .plan__banner{ grid-template-columns:1fr; } #plan .plan__banner:hover{ box-shadow:0 6px 22px rgba(36,31,27,.09); transform:translateY(-2px); } #plan .plan__banner::after{ display:none; } /* 사진 위 그라데이션이었던 것 — 불필요 */ #plan .plan__banner .empty{ display:none; } /* 선그림 — 그리드에서 빼내 절대배치. 이유 ① 행을 2개 span 하는 그리드 아이템이 자동 행 높이를 부풀려 카드가 261px 까지 커졌다. ② 원본이 `.banner__logo{width:20%}`(플랜선택만 120%)로 폭을 잡아 크기가 13px~196px 로 제각각이었다. 절대배치로 빼면 카드 높이는 글자만으로 정해지고, 8장이 같은 규칙을 따른다. SVG 는 플랜마다 종횡비가 달라(94x358 / 122x140) 높이를 기준으로 맞추고 폭을 제한한다 (preserveAspectRatio 기본값 덕에 왜곡 없이 안쪽에 맞춰 들어간다). */ #plan .plan__banner .banner__logo, #plan .plan-flow .banner__logo{ grid-area:auto; position:absolute; left:18px; top:50%; transform:translateY(-50%); width:auto; margin:0; opacity:.28; pointer-events:none; } /* 높이는 "가장 낮은 카드(제목 1줄 = 110px)"에도 여유가 남는 값으로 고정. 너무 크면 카드에 꽉 끼어 답답해 보인다. */ #plan .plan__banner .banner__logo svg{ width:auto; height:70px; max-width:50px; } #plan .plan__banner .banner__logo svg [fill="white"]{ fill:var(--pc); } #plan .plan__banner .banner__logo svg [stroke="white"]{ stroke:var(--pc); } #plan .plan__banner .banner__title{ grid-area:1 / 1 / 2 / 2; justify-self:start; align-self:end; } #plan .plan__banner h3{ font-size:19px; line-height:1.45; color:var(--ink); text-align:left; filter:none; } #plan .plan__banner h3 span{ font-size:13px; color:var(--muted); } #plan .plan__banner .banner__button{ grid-area:2 / 1 / 3 / 2; justify-self:start; align-self:start; margin:10px 0 0; font-size:12px; letter-spacing:.06em; color:var(--pc); filter:none; } #plan .plan__banner .banner__button::after{ border-top-color:var(--pc); border-right-color:var(--pc); } @media screen and (min-width:768px){ #plan .plan__banner{ padding:26px 26px 22px 104px; } #plan .plan__banner .banner__logo, #plan .plan-flow .banner__logo{ left:22px; } #plan .plan__banner .banner__logo svg{ height:84px; max-width:58px; } #plan .plan__banner h3{ font-size:23px; } #plan .plan__banner h3 span{ font-size:14px; } #plan .plan__banner .banner__button{ font-size:13px; } } /* 카드 높이 균일화 (사장님 지적 2026-07-28: 카드마다 크기가 달라 보인다) 원인: 제목이 1~3줄로 달라 카드 높이가 110/144/177px 로 벌어지고, 데스크톱에서 2단으로 나란히 놓이니 들쭉날쭉함이 눈에 띈다. 해결: 원본의 flex(`width:48%`) 대신 **그리드**로 바꾸고 `grid-auto-rows:1fr` → 모든 행이 '가장 높은 카드' 기준으로 같아지고, 배너가 그 높이를 채운다. (모달은 position:fixed 이므로 레이아웃에 영향 없음) */ #plan .plan__list{ display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; row-gap:26px; column-gap:4%; } #plan .plan__item{ width:auto !important; margin:0; } #plan .plan__banner{ height:100%; } @media screen and (min-width:1024px){ #plan .plan__list{ grid-template-columns:1fr 1fr; } }