/* 여포존스냅 · 웨딩 한복스냅 — "우리, 너무 예쁘다"  (v7)
   Photographs first. Deep navy ground, ivory type, one wide cinematic hero photograph on desktop,
   an uninterrupted album below it, and quiet, compact information.
   This file is the fully static page. All hero motion lives in motion-enhancements.css. */

:root{
  --ink:#091b35; --ink-2:#0d2240; --ink-3:#17365a;
  --text:#f4f0e8; --muted:#b4c1d3; --line:rgba(244,240,232,.16);
  --rose:#e5afbf; --amber:#edbb7f;
  --serif:"Noto Serif KR","Nanum Myeongjo","Batang","AppleMyungjo",serif;
  --sans:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(20px,4.6vw,72px);
  --apad:clamp(14px,1.8vw,32px);   /* album side padding: small, so photographs get the width */
  --gut:clamp(8px,.9vw,14px);      /* slim gutter between photographs */
  --hdr:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink);scroll-behavior:smooth;scroll-padding-top:72px}
html.lock{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.7 var(--sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--rose);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--text);color:var(--ink);padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* ---------- shared ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--rose);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
h2{font:300 clamp(26px,2.7vw,40px)/1.25 var(--serif);letter-spacing:-.04em}
.btn{--bg:var(--text);--fg:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 8px 0 24px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--rose),var(--amber));transform:translateX(-101%);transition:transform .6s var(--ease)}
.btn i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fg);color:var(--bg);transition:transform .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover i,.btn:focus-visible i{transform:rotate(45deg)}
.btn:active{transform:scale(.98)}
.btn-link{display:inline-flex;align-items:center;min-height:48px;font-weight:600;font-size:15px;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-block:4px;transition:background-size .4s var(--ease),color .3s}
.btn-link:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--hdr);padding:0 var(--pad);background:linear-gradient(180deg,rgba(9,27,53,.78),rgba(9,27,53,0))}
.hdr::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(9,27,53,.86);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);opacity:0;transition:opacity .3s}
.hdr.solid::before{opacity:1}
.hdr>*{position:relative}
.brand{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;z-index:3}
.brand b{font:600 21px/1 var(--serif);letter-spacing:-.03em}
.brand span{font-size:13px;color:var(--muted);letter-spacing:.06em}
.nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px);margin-left:auto}
.nav>a{position:relative;font-size:15px;font-weight:500;text-decoration:none;padding:10px 0;color:var(--text)}
.nav>a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--rose);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav>a:hover::after,.nav>a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-extra{display:none}
.hdr-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid rgba(244,240,232,.4);border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.hdr-cta:hover,.hdr-cta:focus-visible{background:var(--text);color:var(--ink);border-color:var(--text)}
.menu{display:none;position:relative;z-index:3;width:48px;height:48px;margin-right:-10px;background:none;border:0;cursor:pointer}
.menu-bars,.menu-bars::before{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--text);border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-bars{top:19px}
.menu-bars::before{top:10px;left:0;right:0}
.menu[aria-expanded="true"] .menu-bars{top:23px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-bars::before{top:0;transform:rotate(-90deg)}

/* ---------- hero: desktop = right-anchored upper crop of hero-night; copy stays on the navy left ----------
   The source's lower brush lettering is outside the desktop frame. Mobile preserves main-12 below. */
.hero{--fs:clamp(46px,4.8vw,88px);position:relative;height:100vh;height:min(100svh,62vw,980px);min-height:560px;display:flex;align-items:flex-end;padding:calc(var(--hdr) + 12px) var(--pad) clamp(28px,5svh,56px);overflow:hidden;isolation:isolate}
.hero-glow{position:absolute;inset:0;z-index:-2;background:radial-gradient(50% 60% at 62% 40%,rgba(71,125,190,.22),transparent 70%)}
.hero-photo{position:absolute;z-index:-1;inset:0 0 0 auto;width:min(80vw,1560px);height:100%;margin:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hero-frame{position:absolute;inset:0}
.hero-frame picture{display:block;width:100%;height:100%}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.6;
  background:
    radial-gradient(18% 22% at 17% 46%,rgba(237,187,127,.36),transparent 70%),
    radial-gradient(10% 12% at 80% 24%,rgba(229,175,191,.26),transparent 70%),
    radial-gradient(36% 20% at 52% 4%,rgba(110,160,220,.24),transparent 70%)}
/* Join the navy copy area at the left; keep the central faces bright. */
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,27,53,.68),rgba(9,27,53,.12) 26%,transparent 46%),linear-gradient(0deg,rgba(9,27,53,.22),transparent 24%)}
.hero-copy{position:relative;width:100%;max-width:clamp(300px,29vw,470px);margin-right:auto;text-shadow:0 1px 16px rgba(9,27,53,.55)}
.kicker{font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--amber);margin-bottom:12px}
.hero h1{font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:-.045em;color:var(--text)}
.ln{display:block;overflow:hidden;padding:.06em .08em .12em;margin:-.06em -.08em -.12em}
.ln>span{display:block}
.ln1{font-size:calc(var(--fs)*.5)}
.ln2{font-size:var(--fs);font-weight:600;letter-spacing:-.06em}
.hero-sub{max-width:19em;margin-top:18px;font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:var(--text);opacity:.92}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:20px}
.hero-pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;margin-left:-8px;padding:0 8px;background:none;border:0;font-size:13px;color:var(--muted);cursor:pointer;letter-spacing:.04em}
.hero-pause[hidden]{display:none}
.hero-pause:hover{color:var(--text)}
.hero-pause .ico-play{display:none}
.hero-pause[aria-pressed="true"] .ico-pause{display:none}
.hero-pause[aria-pressed="true"] .ico-play{display:block}

/* ---------- photo album (static; native aspect ratios; justified rows share one height) ---------- */
.essay{background:var(--ink)}
.album{max-width:1560px;margin:0 auto;padding:0 var(--apad) clamp(40px,5vw,72px)}
.album-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 32px;padding:clamp(40px,4.5vw,64px) 0 clamp(18px,2vw,28px)}
.album-head h2{font-size:clamp(24px,2.2vw,32px)}
.album-head p{font-size:14px;color:var(--muted)}

.row{display:flex;align-items:flex-start;gap:var(--gut);margin-bottom:clamp(32px,3.6vw,56px)}
.row:last-child{margin-bottom:0}
.row--solo{max-width:1280px;margin-inline:auto;margin-bottom:clamp(32px,3.6vw,56px)}
.shot{flex:var(--ar,1) 1 0;min-width:0;margin:0}
.ph{display:block;position:relative;cursor:zoom-in;text-decoration:none;color:inherit}
.ph img{width:100%;height:auto}
.shot figcaption{margin-top:10px;font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--muted)}

/* ---------- plan: last photograph beside compact package information ---------- */
.plan{padding:clamp(48px,6vw,96px) var(--apad);background:var(--ink-2);border-top:1px solid var(--line)}
.plan-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center;max-width:1560px;margin:0 auto}
.plan-photo{margin:0}
.plan-photo img{width:100%}
.plan-info{max-width:620px}
.plan-description{margin-top:14px;font-size:15.5px;line-height:1.8;color:var(--muted)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;margin:22px 0 22px;font-family:var(--serif);letter-spacing:-.04em;line-height:1.1}
.price .num{font-size:clamp(30px,2.7vw,40px);font-weight:600}
.price .won{font-size:clamp(18px,1.6vw,22px);font-weight:300;margin:0 18px 0 2px}
.price-note{font:400 14.5px/1.5 var(--sans);letter-spacing:0;color:var(--muted)}
.specs{border-top:1px solid var(--text)}
.specs>div{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:13.5px;font-weight:600;color:var(--muted);padding-top:.3em}
.specs dd b{display:block;font:400 clamp(17px,1.4vw,20px)/1.4 var(--serif);letter-spacing:-.03em}
.specs dd span{display:block;margin-top:2px;font-size:14px;line-height:1.6;color:var(--muted)}
.plan-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:26px}
.plan-foot{margin-top:18px;font-size:13px;color:var(--muted)}

/* ---------- guide: steps + faq ---------- */
.guide{padding:clamp(48px,6vw,88px) var(--apad)}
.guide-in{max-width:1560px;margin:0 auto}
.guide-head h2{font-size:clamp(24px,2.4vw,34px)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.steps li{position:relative;padding:18px 24px 0 0}
.steps li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.step-no{display:block;font:300 13px/1 var(--sans);letter-spacing:.1em;color:var(--amber);margin-bottom:8px}
.steps b{display:block;font:400 clamp(17px,1.4vw,20px)/1.35 var(--serif);letter-spacing:-.03em}
.steps small{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--muted)}
.faq{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(20px,5vw,96px);margin-top:clamp(44px,5vw,72px)}
.faq-title{font:300 clamp(20px,1.8vw,26px)/1.35 var(--serif);letter-spacing:-.04em}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font:400 clamp(16px,1.3vw,19px)/1.5 var(--serif);letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary i{position:relative;flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;transition:background .3s,transform .4s var(--ease),border-color .3s}
summary i::before,summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform .4s var(--ease)}
summary i::after{transform:rotate(90deg)}
summary:hover i{border-color:var(--rose)}
details[open] summary i{background:var(--rose);border-color:var(--rose);color:var(--ink);transform:rotate(180deg)}
details[open] summary i::after{transform:rotate(0)}
.faq-a{padding:0 56px 20px 0;color:var(--muted);font-size:15.5px}
.faq-a a{color:var(--text);text-underline-offset:4px}

/* ---------- closing: one compact line, not a screen ---------- */
.closing{padding:clamp(40px,5vw,72px) var(--apad);background:var(--ink-2);border-top:1px solid var(--line)}
.closing-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;max-width:1560px;margin:0 auto}
.closing-line{font:300 clamp(28px,3vw,44px)/1.2 var(--serif);letter-spacing:-.045em}
.closing-line span{display:inline}
.closing-line .em{font-weight:600;color:var(--rose)}
.closing-sub{max-width:26em;margin-top:10px;font-size:15px;color:var(--muted)}
.closing-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}

/* ---------- footer ---------- */
.footer{padding:36px var(--apad) 40px;background:var(--ink);border-top:1px solid var(--line)}
.footer-in{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 48px;max-width:1560px;margin:0 auto}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 26px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none}
.footer-links a:hover{color:var(--rose)}
.footer-note{flex-basis:100%;max-width:44em;font-size:13.5px;line-height:1.8;color:var(--muted)}

/* ---------- back to top + mobile booking bar (JS only; hidden otherwise) ---------- */
.totop{position:fixed;z-index:54;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(16,40,73,.9);color:var(--text);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s,background .3s,color .3s}
.totop.show{opacity:1;visibility:visible;transition-delay:0s}
.totop:hover{background:var(--text);color:var(--ink)}
.bookbar{display:none}

/* ---------- lightbox: one photograph, then back ---------- */
.lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:rgba(9,27,53,.97);color:var(--text)}
.lb:not([open]){display:none}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr);animation:lbIn .25s ease}
@keyframes lbIn{from{opacity:0}}
.lb::backdrop{background:var(--ink)}
.lb-bar{display:flex;justify-content:flex-end;padding:16px var(--pad)}
.lb-close{min-height:48px;padding:0 24px;border:1px solid var(--line);border-radius:999px;background:none;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.lb-close:hover{background:var(--text);color:var(--ink)}
.lb-fig{display:grid;min-height:0;padding:0 var(--pad) max(20px,env(safe-area-inset-bottom))}
.lb-img{min-height:0;display:grid;place-items:center}
.lb-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* ---------- tablet & mobile ---------- */
@media (max-width:900px){
  :root{--hdr:64px}
  /* nav: full-screen overlay when JS is available; plain inline row otherwise */
  .hdr{flex-wrap:wrap;height:auto;min-height:var(--hdr)}
  .hdr-cta{display:none}
  .nav{order:3;width:100%;gap:18px;overflow-x:auto;padding-bottom:10px}
  .js .hdr{flex-wrap:nowrap;height:var(--hdr)}
  .js .menu{display:block;margin-left:auto}
  .js .nav{position:fixed;inset:0;z-index:2;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;width:auto;margin:0;padding:calc(var(--hdr) + 24px) var(--pad) 40px;overflow:auto;background:var(--ink);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--ease),visibility 0s .5s}
  .js .nav.open{clip-path:inset(0);visibility:visible;transition-delay:0s}
  .js .nav>a{font:300 clamp(40px,12vw,64px)/1.25 var(--serif);letter-spacing:-.04em;padding:6px 0}
  .js .nav>a::after{display:none}
  .js .nav-extra{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px;width:100%;max-width:380px}
  .js .nav-extra .btn{width:100%}
  .btn{min-height:58px;padding:0 9px 0 28px;font-size:16px}
  .btn i{width:40px;height:40px}
  .btn-link{font-size:16px}

  /* hero: portrait photograph first (main-12), copy rises over its soft lower edge (dress, no faces) */
  .hero{--fs:25vw;display:block;height:auto;min-height:0;padding:calc(max(400px,min(124vw,78svh)) - 60px) var(--pad) 36px}
  .hero-glow{background:radial-gradient(70% 40% at 50% 32%,rgba(71,125,190,.27),transparent 70%)}
  .hero-photo{inset:0 0 auto 0;width:100%;height:124vw;max-height:78svh;min-height:400px;-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
  .hero-frame img{object-position:50% 20%}
  .hero-photo::after{display:none}
  .hero-light{background:
    radial-gradient(40% 18% at 8% 46%,rgba(237,187,127,.40),transparent 70%),
    radial-gradient(18% 10% at 90% 36%,rgba(229,175,191,.30),transparent 70%),
    radial-gradient(60% 20% at 50% 6%,rgba(110,160,220,.24),transparent 70%)}
  .hero-copy{max-width:none;margin-right:0;text-shadow:0 1px 18px rgba(9,27,53,.7)}
  .kicker{font-size:13px;margin-bottom:clamp(10px,2svh,22px)}
  .ln1{font-size:calc(var(--fs)*.46)}
  .hero-sub{max-width:21em;font-size:16px;margin-top:16px}
  .hero-actions{margin-top:18px;flex-direction:column;align-items:stretch;gap:4px}
  .hero-actions .btn{width:100%}
  .hero-actions .btn-link{justify-content:center}
  .hero-pause{margin-top:8px}

  /* album: single column, native aspect, comfortable measure on tablets */
  .album{max-width:720px;padding:0 var(--pad) 36px}
  .album-head{padding:48px 0 22px}
  .row{flex-direction:column;align-items:stretch;gap:36px;margin-bottom:36px}
  .row--solo{max-width:none}
  .shot{flex:none;width:100%}

  .plan{padding:44px var(--pad) 52px}
  .plan-in{grid-template-columns:1fr;gap:32px;max-width:720px}
  .plan-info{max-width:none}
  .plan-cta .btn{width:100%}
  .plan-cta .btn-link{width:100%;justify-content:center}
  .guide{padding:48px var(--pad)}
  .steps{grid-template-columns:1fr;border-top:0}
  .steps li{padding:16px 0 16px 28px;border-top:1px solid var(--line)}
  .steps li::before{top:-4px}
  .faq{grid-template-columns:1fr;gap:14px;margin-top:40px}
  .faq-a{padding-right:0}
  .closing{padding:44px var(--pad)}
  .closing-in{flex-direction:column;align-items:stretch}
  .closing-cta{flex-direction:column;align-items:stretch}
  .closing-cta .btn-link{justify-content:center}

  .footer{padding:40px var(--pad) calc(48px + env(safe-area-inset-bottom))}

  /* booking bar: small, appears only in the guide/FAQ stretch — never over the photo album */
  .js .bookbar{position:fixed;z-index:55;left:12px;right:68px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(16,40,73,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  .js .bookbar.show{opacity:1;visibility:visible;transition-delay:0s}
  .bookbar-info b{display:block;font:600 16px/1.2 var(--serif)}
  .bookbar-info small{font-size:12.5px;color:var(--muted)}
  .bookbar-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--text);color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
}
@media (max-width:380px){.btn{padding-left:22px;font-size:15px}}

/* Optional soundtrack. No equalizer or decorative motion outside the hero. */
.bgm[hidden]{display:none}
.bgm{position:relative;display:flex;align-items:center;flex:none;gap:0;z-index:1}
.bgm-toggle,.bgm-volume summary{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--text);cursor:pointer;border-radius:50%}
.bgm-toggle:hover,.bgm-volume summary:hover{background:rgba(244,240,232,.09)}
.bgm-toggle:focus-visible,.bgm-volume summary:focus-visible,.bgm-panel input:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.bgm-toggle .bgm-on{display:none}
.bgm-toggle[aria-pressed="true"] .bgm-on{display:block}
.bgm-toggle[aria-pressed="true"] .bgm-off{display:none}
.bgm-volume summary{list-style:none}
.bgm-volume summary::-webkit-details-marker{display:none}
.bgm-volume{position:static}
.bgm-panel{position:absolute;top:calc(100% + 10px);right:0;width:228px;max-width:calc(100vw - 32px);padding:16px;background:#102849;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center;font:14px/1.5 var(--sans)}
.bgm-panel label{grid-column:1/-1}
.bgm-panel input{width:100%;min-width:0;accent-color:var(--rose);height:28px}
.bgm-panel output{font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
@media(max-width:1100px) and (min-width:901px){.hdr:has(.bgm:not([hidden])){gap:12px}.hdr:has(.bgm:not([hidden])) .nav{gap:20px}.hdr:has(.bgm:not([hidden])) .brand span{display:none}}
@media(max-width:900px){.hdr:has(.bgm:not([hidden])){gap:8px}.bgm{margin-left:auto}.js .hdr:has(.bgm:not([hidden])) .menu{margin-left:0}}
@media(max-width:600px){.hdr:has(.bgm:not([hidden])) .brand span{display:none}.bgm-panel{right:-44px}}

/* ---------- reduced motion: no transitions at all, everything fully shown ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* Native disclosure and real links keep every language reachable without JS. */
.locale-switch{flex:none;z-index:4;font-size:12px}
.locale-switch>summary{min-width:44px;min-height:44px;display:grid;place-items:center;cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:999px}
.locale-switch>summary::-webkit-details-marker{display:none}
.locale-links{position:absolute;right:0;top:calc(100% + 8px);min-width:148px;padding:8px;background:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0006}
.locale-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;text-decoration:none;white-space:nowrap}
.locale-links a:hover,.locale-links a[aria-current="page"]{background:var(--ink-3);color:var(--amber)}
.locale-recommendation[hidden]{display:none}
.locale-recommendation{position:fixed;z-index:70;right:var(--pad);bottom:100px;width:min(360px,calc(100% - 40px));padding:20px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px #0008;font-size:14px}
.locale-recommendation p{margin-bottom:10px}
.locale-recommendation a,.locale-recommendation button{display:inline-flex;align-items:center;min-height:44px;padding:4px 10px;color:var(--text);border:0;border-radius:6px;font:inherit;background:transparent;cursor:pointer}
.locale-recommendation a{background:var(--text);color:var(--ink);text-decoration:none;font-weight:600}
.locale-recommendation button{text-decoration:underline;text-underline-offset:4px}
.locale-external-note{max-width:42em}
html[lang="en"] .hero{--fs:clamp(44px,4.1vw,78px)}
html[lang="en"] .hero h1{letter-spacing:-.045em}
html[lang="en"] .kicker{letter-spacing:.06em;font-size:11px}
html[lang="en"] .specs>div{grid-template-columns:5.5em 1fr}
html[lang="en"] .price-note{flex-basis:100%;margin-top:6px}
html[lang="ja"] body,html[lang="zh-CN"] body{word-break:normal;line-break:strict}
html[lang="ja"] .brand span,html[lang="zh-CN"] .brand span{letter-spacing:0}
@media(min-width:901px) and (max-width:1400px){
  .hdr{gap:14px}.brand span{display:none}.nav{gap:22px}
  html[lang="en"] .brand b{font-size:19px}
  html[lang="en"] .hdr-cta{padding-inline:16px}
}
@media(max-width:900px){
  .hdr,.hdr:has(.bgm:not([hidden])){gap:6px}
  .hdr .brand{margin-right:auto}.hdr .brand span{display:none}
  .bgm{margin-left:0}.js .hdr .menu{margin-left:0}
  html[lang="en"] .hero{--fs:clamp(46px,14.5vw,92px)}
  html[lang="en"] .ln1{font-size:calc(var(--fs)*.56)}
  html[lang="ja"] .hero{--fs:22vw}
  html[lang="en"] .hero .kicker{max-width:25em;font-size:11px}
}
@media(max-width:430px){
  .hdr .brand b{font-size:16px;line-height:1.15}
  html[lang="en"] .hdr .brand b{font-size:15px;max-width:94px}
  .bgm-toggle,.bgm-volume summary{width:36px;min-height:44px}
  .js .hdr .menu{width:40px;margin-right:-8px}
  .menu-bars{left:8px;right:8px}
  .locale-switch>summary{min-width:40px}
  .locale-switch .locale-links{right:-72px}
  html[lang="ja"] .hdr .brand b{max-width:104px;font-size:14px}
  .specs>div{gap:8px}
}

/* ---------- optional hotel & travel affiliate section ---------- */
.stay{padding:72px var(--pad) 84px;border-top:1px solid var(--line);background:var(--ink-2)}
.stay-in{display:grid;grid-template-columns:300px minmax(0,680px);align-items:center;justify-content:center;gap:clamp(32px,5vw,72px);max-width:1180px;margin-inline:auto}
.stay-banner{display:block;width:300px;max-width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 14px 40px #0003;transition:box-shadow .3s}
.stay-banner:hover{box-shadow:0 18px 48px #0005}
.stay-banner img{width:100%;height:auto}
.stay-copy{min-width:0}
.stay-copy .eyebrow{font-size:11px;letter-spacing:.08em}
.stay-copy h2{font-size:clamp(25px,2.5vw,34px);line-height:1.4;text-wrap:balance}
.stay-description{max-width:40em;margin-top:16px;color:var(--muted);font-size:14px;line-height:1.9}
.stay-widget-group{margin-top:28px;min-width:0}
.stay-widget-group h3{margin-bottom:12px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--text)}
.stay-widget{width:100%;max-width:680px;min-width:0}
.stay-widget iframe{display:block;width:100%;max-width:100%;border:0;border-radius:8px}
.stay-fallback{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-top:8px;font-size:13px;text-underline-offset:5px;text-decoration-color:var(--line)}
.stay-fallback:hover{color:var(--amber)}
.stay-disclosure{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.8}
.stay-language-note{margin-top:4px;font-size:11px;color:var(--muted)}
@media(max-width:1000px){
  .stay-in{grid-template-columns:minmax(0,680px);gap:32px}
  .stay-banner{width:280px;justify-self:center}
}
@media(max-width:600px){
  .stay{padding-block:48px 56px}
  .stay-in{gap:28px}
  .stay-copy .eyebrow{margin-bottom:12px}
  .stay-copy h2{max-width:18em}
  .stay-description{font-size:13px}
}