:root{
  --ink:#0b1622;
  --ink-2:#2a3a4a;
  --sub:#5b6b7c;
  --paper:#f6f2e9;
  --paper-2:#fbf8f0;
  --card:#ffffff;
  --line:#e5dfd0;
  --sea:#0a4d68;
  --sea-2:#1b6b8a;
  --wave:#7ab7c9;
  --coral:#e86a4c;
  --sun:#f4a261;
  --gold:#b88a3b;
}
body.dark{
  --ink:#eef0f5;
  --ink-2:#c9cfda;
  --sub:#8b95a5;
  --paper:#0a131d;
  --paper-2:#0f1b28;
  --card:#15212e;
  --line:#233042;
  --sea:#7ec2e0;
  --sea-2:#a1d4eb;
  --coral:#ff8a70;
  --sun:#ffc480;
  --gold:#e0b86a;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;
  background:var(--paper);color:var(--ink);
  line-height:1.8;-webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
  transition:background .4s,color .4s;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--sea);}

/* Nav */
.detail-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(246,242,233,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:14px 28px;
  display:flex;align-items:center;gap:20px;
}
body.dark .detail-nav{background:rgba(10,19,29,.92);}
.back-btn{
  text-decoration:none;color:var(--sea);
  font-size:13px;letter-spacing:.05em;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border:1px solid var(--line);
  border-radius:999px;transition:all .2s;
}
.back-btn:hover{background:var(--sea);color:#fff;}
.nav-page-title{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;letter-spacing:.25em;color:var(--sub);
  text-transform:uppercase;
}

/* Floating Controls */
.controls{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;}
.ctrl-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .2s,background .3s;}
.ctrl-btn:hover{transform:translateY(-2px);}
.ctrl-btn.active{background:var(--coral);color:#fff;border-color:var(--coral);}

/* Hero */
.detail-hero{
  position:relative;height:60vh;min-height:420px;max-height:640px;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
  padding:0 28px 64px;
  color:#fff;overflow:hidden;
}
.detail-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,30,50,.2) 0%,rgba(10,30,50,.1) 40%,rgba(10,30,50,.85) 100%);
}
.detail-hero-text{position:relative;z-index:2;max-width:1000px;margin:0 auto;width:100%;}
.detail-hero .num-area{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;letter-spacing:.3em;opacity:.9;
}
.detail-hero .num-area .num{
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:500;
}
.detail-hero h1{
  font-size:clamp(32px,5vw,56px);font-weight:900;
  letter-spacing:.06em;line-height:1.2;margin-bottom:10px;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.detail-hero .en-title{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:15px;letter-spacing:.2em;opacity:.8;
}

/* Main */
.detail-main{max-width:900px;margin:0 auto;padding:70px 28px 40px;}
.section-detail{margin-bottom:70px;}
.section-heading{
  font-size:22px;font-weight:700;margin-bottom:24px;
  border-left:4px solid var(--coral);padding-left:14px;
  letter-spacing:.05em;
}

/* Info grid */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.info-item{
  background:var(--card);border:1px solid var(--line);
  padding:18px 20px;border-radius:4px;
}
.info-item .label{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--sea);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:4px;
}
.info-item .value{font-size:14px;font-weight:600;color:var(--ink);}

/* Text */
.lead-text{
  font-size:17px;line-height:2;color:var(--ink-2);
  max-width:720px;margin-bottom:24px;
}
.body-text p{
  font-size:14px;line-height:2;color:var(--ink-2);margin-bottom:14px;
}

/* Trivia */
.trivia-block{
  background:linear-gradient(135deg,var(--paper-2),var(--card));
  border:1px solid var(--line);
  border-left:3px solid var(--sun);
  padding:28px 32px;border-radius:4px;
  margin-bottom:16px;
}
body.dark .trivia-block{background:linear-gradient(135deg,#16263a,#142030);}
.trivia-block h3{
  font-size:15px;color:var(--gold);font-weight:700;
  margin-bottom:10px;letter-spacing:.02em;
}
.trivia-block p{font-size:14px;line-height:1.9;color:var(--ink-2);}

/* Tip */
.tip-block{
  background:#fff8ec;
  border:1px solid var(--line);
  border-left:3px solid var(--coral);
  padding:22px 28px;border-radius:4px;
  margin-bottom:14px;
}
body.dark .tip-block{background:#20283a;}
.tip-block h3{font-size:14px;color:var(--coral);font-weight:700;margin-bottom:8px;}
.tip-block p{font-size:13px;line-height:1.9;color:var(--ink-2);}
.tip-block b{color:var(--coral);}

/* Souvenirs */
.souvenir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.souvenir-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.souvenir-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(10,77,104,.12);}
.souvenir-img{
  width:100%;height:160px;
  background-size:cover;background-position:center;
  background-color:var(--paper-2);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.souvenir-img.emoji{
  background:radial-gradient(circle at 30% 30%,#fbf2e0 0%,#f4e6c8 60%,#f4a261 100%);
  font-size:68px;line-height:1;
}
.souvenir-body{padding:18px 20px 20px;}
.souvenir-body h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--ink);}
.souvenir-body .price{
  display:inline-block;padding:2px 10px;
  background:var(--paper-2);color:var(--coral);
  font-size:11px;font-family:"JetBrains Mono",monospace;
  border-radius:3px;margin-bottom:8px;
}
.souvenir-body p{font-size:12px;color:var(--sub);line-height:1.7;}

/* Map */
.map-wrap{
  background:var(--card);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;
}
.map-wrap iframe{display:block;width:100%;height:400px;border:0;}
.map-links{
  padding:14px 22px;font-size:13px;color:var(--sub);
  border-top:1px solid var(--line);background:var(--paper-2);
  display:flex;gap:16px;flex-wrap:wrap;
}
.map-links a{
  color:var(--sea);text-decoration:none;
  font-weight:500;display:inline-flex;align-items:center;gap:4px;
}
.map-links a:hover{color:var(--coral);}

/* CTA */
.cta-bar{
  display:flex;gap:14px;justify-content:center;
  margin:80px 0 20px;flex-wrap:wrap;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;background:var(--sea);color:#fff;
  text-decoration:none;border-radius:999px;
  font-weight:500;font-size:14px;
  transition:transform .2s,background .3s;
  letter-spacing:.05em;
}
.cta-btn:hover{transform:translateY(-2px);background:var(--coral);}
.cta-btn.secondary{background:transparent;color:var(--sea);border:1px solid var(--sea);}
.cta-btn.secondary:hover{background:var(--sea);color:#fff;}

footer{text-align:center;padding:50px 24px 40px;background:linear-gradient(180deg,var(--paper),var(--paper-2));border-top:1px solid var(--line);}
footer .en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--sea);margin-bottom:8px;}
footer .credit{font-size:11px;color:var(--sub);letter-spacing:.2em;margin-top:12px;}

@media(max-width:700px){
  .detail-hero{padding:0 20px 44px;}
  .detail-hero h1{font-size:28px;}
  .detail-main{padding:50px 20px 30px;}
  .section-detail{margin-bottom:50px;}
  .controls{right:14px;bottom:14px;}
  .ctrl-btn{width:42px;height:42px;font-size:16px;}
}