/* =========================================================
   UPDVAPE JP PRODUCT DETAIL DESIGN SYSTEM — V2.0.2
   Bubblemon-layout master system
   Scope: .updv-pd only
   ========================================================= */

.updv-pd {
  --pd-ink:#17191d;
  --pd-muted:#646b75;
  --pd-line:#e6e8ec;
  --pd-surface:#f6f7f9;
  --pd-white:#ffffff;
  --pd-accent:#b8ef27;
  --pd-accent-2:#7658ff;
  --pd-accent-3:#3b8cff;
  --pd-dark:#17191d;

  width:100%;
  max-width:1180px;
  margin-left:0;
  margin-right:auto;
  color:var(--pd-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8;
}

.updv-pd,
.updv-pd *,
.updv-pd *::before,
.updv-pd *::after {
  box-sizing:border-box;
}

.updv-pd--bubblemon {
  --pd-accent:#b8ef27;
  --pd-accent-2:#7658ff;
  --pd-accent-3:#3b8cff;
}

.updv-pd--snowplus {
  --pd-accent:#c7ff24;
  --pd-accent-2:#9b8cff;
  --pd-accent-3:#74cce5;
}

.updv-pd img {
  display:block;
  width:100%;
  height:auto;
}

.updv-pd a {
  color:inherit;
  text-underline-offset:3px;
}

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.updv-pd__nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 28px;
  padding:14px;
  border:1px solid var(--pd-line);
  border-radius:16px;
  background:#fff;
}

.updv-pd__nav a {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 15px;
  border-radius:999px;
  background:var(--pd-surface);
  color:var(--pd-ink);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}

.updv-pd__nav a:hover,
.updv-pd__nav a:focus-visible {
  background:var(--pd-ink);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------------------------------------------------------
   TYPOGRAPHY / SECTIONS
   --------------------------------------------------------- */
.updv-pd h2,
.updv-pd h3,
.updv-pd p {
  margin-top:0;
}

.updv-pd__section {
  padding:clamp(42px,6vw,68px) clamp(4px,2vw,18px) 0;
  scroll-margin-top:100px;
}

.updv-pd__section-heading {
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:16px;
  width:100%!important;
  max-width:780px;
  min-width:0;
  margin:0 0 26px;
}

.updv-pd__section-heading > div {
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}

.updv-pd__number {
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:50%;
  background:var(--pd-accent);
  color:#111;
  font-size:14px;
  font-weight:900;
}

.updv-pd__section-heading h2 {
  width:auto!important;
  max-width:none!important;
  margin-bottom:8px;
  color:var(--pd-ink);
  font-size:clamp(27px,3.2vw,42px);
  line-height:1.25;
  letter-spacing:-.025em;
  writing-mode:horizontal-tb!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

.updv-pd__section-heading p {
  width:auto!important;
  max-width:100%!important;
  margin-bottom:0;
  color:var(--pd-muted);
  writing-mode:horizontal-tb!important;
  word-break:normal!important;
}

/* ---------------------------------------------------------
   FEATURE GRID
   --------------------------------------------------------- */
.updv-pd__feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.updv-pd__feature {
  min-height:190px;
  padding:26px;
  border:1px solid var(--pd-line);
  border-radius:18px;
  background:var(--pd-surface);
}

.updv-pd__feature-mark {
  display:block;
  width:34px;
  height:5px;
  margin-bottom:26px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--pd-accent),var(--pd-accent-3),var(--pd-accent-2));
}

.updv-pd__feature h3 {
  margin-bottom:8px;
  color:var(--pd-ink);
  font-size:19px;
  line-height:1.45;
}

.updv-pd__feature p {
  margin-bottom:0;
  color:var(--pd-muted);
  font-size:14px;
}

/* ---------------------------------------------------------
   OPTIONAL TWO-COLUMN / MODE CARDS
   --------------------------------------------------------- */
.updv-pd__split {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,48px);
  align-items:center;
}

.updv-pd__mode-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.updv-pd__mode {
  padding:clamp(26px,4vw,42px);
  border-radius:22px;
}

.updv-pd__mode--light {
  border:1px solid var(--pd-line);
  background:#fff;
}

.updv-pd__mode--dark {
  background:var(--pd-dark);
  color:#fff;
}

.updv-pd__mode-label {
  margin-bottom:18px;
  color:var(--pd-accent-2);
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.updv-pd__mode--dark .updv-pd__mode-label {
  color:var(--pd-accent);
}

.updv-pd__mode h3 {
  margin-bottom:8px;
  color:inherit;
  font-size:28px;
}

.updv-pd__mode p {
  margin-bottom:0;
  color:inherit;
  opacity:.76;
}

/* ---------------------------------------------------------
   SPEC TABLE
   --------------------------------------------------------- */
.updv-pd__table-wrap {
  overflow-x:auto;
  border:1px solid var(--pd-line);
  border-radius:18px;
  background:#fff;
}

.updv-pd__specs {
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

.updv-pd__specs caption {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.updv-pd__specs th,
.updv-pd__specs td {
  padding:16px 20px;
  border-bottom:1px solid var(--pd-line);
  text-align:left;
  vertical-align:middle;
}

.updv-pd__specs tr:last-child th,
.updv-pd__specs tr:last-child td {
  border-bottom:0;
}

.updv-pd__specs th {
  width:34%;
  background:var(--pd-surface);
  color:var(--pd-ink);
  font-size:14px;
  font-weight:800;
}

.updv-pd__specs td {
  color:#414750;
}

.updv-pd__note {
  margin:18px 0 0;
  padding-left:16px;
  border-left:3px solid var(--pd-accent);
  color:var(--pd-muted);
  font-size:14px;
}

.updv-pd__package {
  margin-top:18px;
  padding:22px 24px;
  border-radius:16px;
  background:var(--pd-surface);
}

.updv-pd__package h3 {
  margin-bottom:8px;
  font-size:18px;
}

.updv-pd__package p {
  margin-bottom:0;
  color:var(--pd-muted);
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.updv-pd__faq {
  display:grid;
  gap:10px;
}

.updv-pd__faq details {
  border:1px solid var(--pd-line);
  border-radius:14px;
  background:#fff;
}

.updv-pd__faq summary {
  position:relative;
  padding:20px 52px 20px 20px;
  cursor:pointer;
  color:var(--pd-ink);
  font-weight:800;
  line-height:1.55;
  list-style:none;
}

.updv-pd__faq summary::-webkit-details-marker {
  display:none;
}

.updv-pd__faq summary::after {
  content:"+";
  position:absolute;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  font-size:24px;
  font-weight:500;
}

.updv-pd__faq details[open] summary::after {
  content:"−";
}

.updv-pd__faq-answer {
  padding:0 20px 20px;
  color:var(--pd-muted);
}

.updv-pd__faq-answer p {
  margin-bottom:0;
}

/* ---------------------------------------------------------
   IMPORTANT / DISCLAIMER
   --------------------------------------------------------- */
.updv-pd__legal {
  margin-top:clamp(42px,6vw,68px);
  padding:clamp(26px,4vw,42px);
  border-radius:22px;
  background:var(--pd-dark);
  color:rgba(255,255,255,.78);
}

.updv-pd__legal h2,
.updv-pd__legal h3 {
  color:#fff!important;
}

.updv-pd__legal h2 {
  margin-bottom:12px;
  font-size:clamp(24px,3vw,34px);
}

.updv-pd__legal > .updv-pd__number {
  margin-bottom:16px;
}

.updv-pd__legal h3 {
  margin:26px 0 8px;
  font-size:18px;
}

.updv-pd__legal p:last-child {
  margin-bottom:0;
}

.updv-pd__legal a {
  color:var(--pd-accent);
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */
@media (max-width:900px) {
  .updv-pd__split {
    grid-template-columns:1fr;
  }

  .updv-pd__feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width:640px) {
  .updv-pd {
    font-size:15px;
    line-height:1.75;
  }

  .updv-pd__nav {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:10px;
    scrollbar-width:thin;
  }

  .updv-pd__nav a {
    flex:0 0 auto;
  }

  .updv-pd__feature-grid,
  .updv-pd__mode-grid {
    grid-template-columns:1fr;
  }

  .updv-pd__feature {
    min-height:0;
  }

  .updv-pd__section-heading {
    gap:12px;
  }

  .updv-pd__number {
    width:38px;
    height:38px;
  }

  .updv-pd__specs th,
  .updv-pd__specs td {
    padding:14px 16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .updv-pd__nav a {
    transition:none;
  }
}