:root{
  --paper:#faf7f1; --paper2:#f3ede1; --white:#ffffff;
  --ink:#241f1b; --muted:#6f665b; --line:#e7ded0;
  --red:#a5282c; --red-deep:#8a242a; --gold:#a97e2f; --gold-soft:#c6a15b;
  --dark:#241819;
  --serif:"Zen Old Mincho",serif;
  --sans:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --wrap:1140px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-size:16px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:clamp(1.1rem,.6rem+2vw,2.4rem); }
h1,h2,h3{ font-family:var(--serif); font-weight:500; letter-spacing:.03em; text-wrap:balance; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:700;
  font-size:.8rem; letter-spacing:.08em; padding:.85rem 1.6rem; border-radius:3px; cursor:pointer;
  background:var(--red); color:#fff; border:1px solid var(--red); transition:.22s; }
.btn:hover{ background:var(--red-deep); transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(138,36,42,.6); }
.btn.ghost{ background:transparent; color:var(--red); }
.btn.ghost:hover{ background:rgba(165,40,44,.06); }
.btn.ghost.light{ color:#fff; border-color:rgba(255,255,255,.6); }
.btn.ghost.light:hover{ background:rgba(255,255,255,.12); }
.btn.big{ padding:1rem 2rem; font-size:.86rem; }
.kicker{ font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .9rem; }
.cream .kicker,.white .kicker{ color:var(--red); }
.line{ width:40px; height:1px; background:var(--gold); margin:.9rem 0; border:0; }
.center{ text-align:center; } .center .line{ margin-inline:auto; }
.sec-h{ font-size:clamp(1.4rem,1.05rem+1.4vw,2.05rem); line-height:1.4; color:var(--ink); }
.pad{ padding:clamp(2.8rem,1.8rem+4vw,5.2rem) 0; }
.white{ background:var(--white); } .cream{ background:var(--paper2); }

/* header */
header{ position:sticky; top:0; z-index:40; background:rgba(250,247,241,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ display:flex; align-items:baseline; gap:.5rem; }
.brand .jp{ font-family:var(--serif); font-size:1.3rem; font-weight:700; letter-spacing:.12em; }
.brand .en{ font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.menu{ display:flex; align-items:center; gap:1.5rem; }
.menu a{ font-size:.78rem; letter-spacing:.08em; color:var(--ink); opacity:.82; transition:.2s; }
.menu a:hover{ opacity:1; color:var(--red); }
.menu a.strong{ color:var(--red); opacity:1; font-weight:700; }
.menu .btn{ padding:.55rem 1.1rem; }
.burger{ display:none; background:none; border:0; color:var(--ink); font-size:1.4rem; cursor:pointer; }
@media (max-width:860px){
  .menu{ position:fixed; inset:60px 0 auto 0; flex-direction:column; gap:0; background:var(--white);
    border-bottom:1px solid var(--line); padding:.4rem 0 1rem; transform:translateY(-140%); transition:.32s; box-shadow:0 20px 30px -20px rgba(0,0,0,.25); }
  .menu.open{ transform:translateY(0); }
  .menu a{ width:100%; padding:.85rem 1.4rem; }
  .menu .btn{ margin:.5rem 1.4rem 0; justify-content:center; }
  .burger{ display:block; }
}

/* hero */
.hero{ position:relative; min-height:clamp(460px,72vh,640px); display:grid; align-items:end;
  background:linear-gradient(180deg, rgba(30,20,20,.15) 0%, rgba(30,20,20,.08) 42%, rgba(28,18,18,.72) 100%),
    var(--hero-img, url('img/hero.webp')) center 30%/cover no-repeat; }
.hero.short{ min-height:clamp(320px,44vh,440px); }
.hero-in{ padding:0 0 clamp(2.4rem,1.5rem+3vw,4rem); }
.hero .kicker{ color:#e9c887; }
.hero h1{ font-size:clamp(1.7rem,1.15rem+2.9vw,3rem); line-height:1.4; font-weight:500; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45); }
.hero h1 .hi{ color:#e9c887; }
.hero .lead{ color:#f1e7da; font-size:clamp(.86rem,.78rem+.4vw,1.02rem); letter-spacing:.1em; margin:1rem 0 0; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.hero .cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.7rem; }

/* two-column feature (about / profile) */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.4rem,1rem+3vw,3.6rem); align-items:center; }
.about.rev{ grid-template-columns:.95fr 1.05fr; }
@media (max-width:800px){ .about,.about.rev{ grid-template-columns:1fr; gap:1.6rem; } .about.rev .fig{ order:-1; } }
.about p{ color:var(--muted); max-width:48ch; }
.about .fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; }

/* cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.4rem; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; gap:1.1rem; } }
.card{ background:var(--white); border:1px solid var(--line); border-top:2px solid var(--gold-soft);
  border-radius:6px; transition:.25s; }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(60,40,30,.4); }
.card .bd{ padding:2rem 1.6rem 2.1rem; }
.card .no{ font-family:var(--serif); font-size:2rem; line-height:1; color:var(--gold); margin-bottom:.5rem; }
.card h3{ font-size:1.18rem; margin:0 0 .55rem; }
.card p{ font-size:.86rem; color:var(--muted); margin:0; }

/* plans table */
.tablewrap{ overflow-x:auto; margin-top:2.2rem; border:1px solid var(--line); border-radius:6px; background:var(--white); }
table{ border-collapse:collapse; width:100%; min-width:460px; font-size:.9rem; }
th,td{ padding:.95rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); }
thead th{ background:var(--paper2); font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
tbody tr:last-child td{ border-bottom:0; }
td .name{ font-family:var(--serif); font-size:1.02rem; }
td .price{ font-family:var(--serif); color:var(--red); font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
td .inc{ font-size:.8rem; color:var(--muted); }
.plan-notes{ margin-top:1.2rem; display:grid; gap:.45rem; font-size:.82rem; color:var(--muted); }
.plan-notes b{ color:var(--ink); font-weight:700; }
.chip{ display:inline-block; background:rgba(169,126,47,.12); color:var(--gold); border-radius:3px; padding:.1rem .5rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; margin-right:.4rem; }

/* flow */
.flow{ display:grid; gap:0; max-width:760px; margin:2.2rem auto 0; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.05rem 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step .n{ font-family:var(--serif); font-size:.95rem; color:var(--red); width:2.3rem; height:2.3rem; flex:none;
  border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; }
.step .t b{ font-family:var(--serif); font-weight:500; font-size:1rem; }
.step .t span{ display:block; font-size:.82rem; color:var(--muted); margin-top:.15rem; }

/* gallery */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:2.2rem; }
@media (max-width:900px){ .gal{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .gal{ grid-template-columns:repeat(2,1fr); } }
.gal a{ overflow:hidden; border-radius:4px; aspect-ratio:3/4; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.gal a:hover img{ transform:scale(1.05); }

/* faq */
.faq{ max-width:780px; margin:2rem auto 0; }
details{ border-bottom:1px solid var(--line); }
summary{ cursor:pointer; list-style:none; padding:1.05rem .3rem; font-family:var(--serif); font-size:1rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"＋"; color:var(--gold); font-family:var(--sans); }
details[open] summary::after{ content:"−"; }
details .a{ padding:0 .3rem 1.1rem; color:var(--muted); font-size:.9rem; }

/* reserve */
.reserve{ background:linear-gradient(150deg,#2a1819,#3a1f22); color:#f4e7d6; text-align:center; }
.reserve::before{ content:""; display:block; height:2px; background:linear-gradient(90deg,transparent,var(--gold-soft),transparent); }
.reserve h2{ color:#fdf5e9; font-size:clamp(1.5rem,1.1rem+2vw,2.4rem); line-height:1.4; }
.reserve p{ color:#cbb6a3; max-width:40ch; margin:1rem auto 0; }
.reserve .cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

/* service highlight banner (homepage emphasis) */
.svc{ background:var(--white); }
.svc .box{ border:1px solid var(--line); border-left:4px solid var(--red); border-radius:6px;
  background:var(--paper); padding:clamp(1.4rem,1rem+2vw,2.4rem); display:flex; gap:1.4rem;
  align-items:center; justify-content:space-between; flex-wrap:wrap; }
.svc .box h3{ font-size:1.3rem; margin:0 0 .4rem; }
.svc .box p{ margin:0; color:var(--muted); font-size:.9rem; max-width:52ch; }

/* footer */
footer{ background:var(--white); border-top:1px solid var(--line); }
.foot{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:2.6rem 0 1.2rem; }
.foot .brand .jp{ font-size:1.4rem; }
.foot p{ color:var(--muted); font-size:.82rem; max-width:30ch; margin:.8rem 0 0; }
.foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); }
.foot-links a:hover{ color:var(--red); }
.copy{ text-align:center; font-size:.7rem; letter-spacing:.12em; color:var(--muted); padding:1.1rem 0 1.6rem; border-top:1px solid var(--line); }

/* profile */
.profile-card{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,.8rem+2vw,2.6rem); align-items:center; }
@media (max-width:620px){ .profile-card{ grid-template-columns:1fr; } }
.profile-card .pic{ width:clamp(140px,30vw,210px); aspect-ratio:1; border-radius:50%; object-fit:cover; }
.profile-card .en-name{ font-family:var(--sans); letter-spacing:.24em; text-transform:uppercase; font-size:.72rem; color:var(--gold); }
.profile-card .jp-name{ font-family:var(--serif); font-size:1.6rem; margin:.2rem 0 .8rem; }
.timeline{ display:grid; gap:.5rem; margin-top:.6rem; }
.timeline div{ font-size:.88rem; color:var(--muted); }
.timeline b{ color:var(--red); font-family:var(--serif); margin-right:.5rem; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

.ribbon{ background:var(--ink); color:#f3ead9; text-align:center; font-size:.72rem; letter-spacing:.04em; padding:.5rem 1rem; }
.ribbon b{ color:var(--gold-soft); }

/* ─────────────────────────────────────────────
   모바일 본문 가독성 (사장님 피드백 2026-07-26:
   「スマホでの見やすさ：文字の段落がなく、見にくいです」)
   ・긴 문단은 마크업에서 문장 단위로 분할 (문구는 변경하지 않음)
   ・좁은 화면에서 줄간격을 넓혀 일본어 본문이 벽처럼 보이지 않게
   ───────────────────────────────────────────── */
@media (max-width:640px){
  body{ line-height:1.95; }
  main p{ margin-block:0 1em; }
  main p:last-child{ margin-bottom:0; }
}

/* ── 예약 페이지: 구글 캘린더 임베드
   원본 iframe 은 800x600 고정이라 그대로 두면 모바일에서 넘친다 → 반응형 박스로 감쌈 ── */
.cal{ position:relative; width:100%; max-width:840px; margin:1.8rem auto 0; aspect-ratio:4/3;
  background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.cal iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:640px){ .cal{ aspect-ratio:3/4; margin-top:1.3rem; } }