/*
 * Mobile Rhythm v10
 * A final cascade layer for balanced iPhone spacing, compact navigation,
 * and consistent section/card rhythm without changing services or content.
 */

@media (max-width: 680px) {
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] {
    --mobile-gutter: 20px;
    --mobile-section-top: 60px;
    --mobile-section-bottom: 64px;
    --mobile-card-gap: 14px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] :where(section[id]) {
    scroll-margin-top: 72px;
  }

  /* Header and navigation share one measured edge on every phone width. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .site-header,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .site-header.is-menu-open {
    min-height: 64px;
    padding: 10px var(--mobile-gutter);
    background: rgba(236, 246, 246, 0.76);
    box-shadow: 0 8px 30px rgba(3, 38, 51, 0.07);
    backdrop-filter: blur(24px) saturate(126%);
    -webkit-backdrop-filter: blur(24px) saturate(126%);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .brand-logo {
    width: 110px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(248, 252, 251, 0.72);
    box-shadow: 0 8px 24px rgba(3, 38, 51, 0.08);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .site-header .nav {
    top: 68px;
    right: var(--mobile-gutter);
    left: var(--mobile-gutter);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: auto;
    max-width: none;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 22px;
    background: rgba(242, 249, 248, 0.76);
    box-shadow: 0 20px 54px rgba(3, 38, 51, 0.14);
    backdrop-filter: blur(28px) saturate(132%);
    -webkit-backdrop-filter: blur(28px) saturate(132%);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nav a {
    display: flex;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    color: #082f3d;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    box-shadow: none;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nav .nav-reserve {
    grid-column: 1 / -1;
    width: auto;
    min-inline-size: 0;
    min-height: 56px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 15px;
    background: #008b68;
    box-shadow: 0 12px 28px rgba(0, 110, 84, 0.18);
  }

  /* Hero glass uses the same page gutter instead of stopping short at 598px. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nm-hero {
    padding-bottom: 14px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nm-hero-copy {
    width: calc(100% - (var(--mobile-gutter) * 2));
    max-width: none;
    margin: -58px var(--mobile-gutter) 0;
    padding: 22px 20px 19px;
    border-radius: 24px 24px 0 0;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nm-hero h1 {
    font-size: clamp(2.7rem, 10.5vw, 3.85rem);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nm-hero-details {
    width: calc(100% - (var(--mobile-gutter) * 2));
    max-width: none;
    margin: 0 var(--mobile-gutter);
    padding: 12px 18px 20px;
    border-radius: 0 0 24px 24px;
  }

  /* One vertical rhythm for every numbered public section. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] main > .junpa-section {
    padding: var(--mobile-section-top) var(--mobile-gutter) var(--mobile-section-bottom);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .junpa-section[data-editorial-no] {
    padding-top: var(--mobile-section-top);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .junpa-section[data-editorial-no]::before {
    position: static;
    inset: auto;
    display: block;
    grid-column: 1 / -1;
    width: auto;
    margin: 0 0 18px;
    font-size: clamp(3.5rem, 13vw, 4.4rem);
    line-height: 0.88;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] :where(
    .service-focus-section .section-heading,
    .price-section .section-heading,
    .reference-gallery-section .section-heading,
    .trust-section .section-heading,
    .journal-section .section-heading,
    .faq-section .section-heading
  ) {
    gap: 14px;
    margin-bottom: 28px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] :where(
    .experience-flow-section,
    .pause-section,
    .register-section,
    .access-section,
    .journal-section,
    .evidence-section,
    .safety-panel
  ) {
    gap: 24px;
  }

  /* Four services remain first and readable, without oversized card interiors. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .service-focus-grid {
    gap: 10px;
    border-radius: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .service-focus-card > div {
    min-height: clamp(164px, 29vw, 176px);
    padding: 14px 13px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .service-focus-card h3 {
    margin: 6px 0 9px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .service-focus-card dl {
    margin: auto 0 9px;
  }

  /* The experience image now follows its number directly. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nemuri-section {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nemuri-section::before {
    top: auto;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nemuri-visual {
    margin: 0;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nemuri-copy {
    padding: 24px 20px;
    border-radius: 22px;
  }

  /* Pricing keeps its hierarchy while reducing nested frame padding. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .price-groups {
    gap: var(--mobile-card-gap);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .price-group {
    border-radius: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .price-group-heading {
    padding: 14px 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .plan-card,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .plan-card.featured {
    padding: 20px 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .standalone-prices details {
    margin-top: 12px;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 18px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .addon-guide {
    margin-top: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .addon-guide-card {
    padding: 16px;
    border-radius: 18px;
  }

  /* Materials and supporting information use a tighter editorial cadence. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-grid {
    gap: var(--mobile-card-gap);
    margin-top: 32px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-card {
    border-radius: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-copy {
    padding: 22px 18px 24px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-copy h3 {
    margin-bottom: 14px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-copy ul,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-copy blockquote {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .material-story-copy blockquote {
    padding: 16px;
    border-radius: 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .reference-source-note {
    margin-top: 18px;
    padding: 14px 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .trust-cards,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .pause-grid,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .location-box,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .blog-grid {
    gap: var(--mobile-card-gap);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] :where(
    .trust-cards article,
    .pause-grid article,
    .location-box article,
    .sns-panel
  ) {
    padding: 20px;
    border-radius: 20px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .evidence-disclosure {
    margin-top: 20px;
    border-radius: 20px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .evidence-section {
    gap: 18px;
    padding: 20px 16px;
    border-radius: 20px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .evidence-explorer {
    padding: 14px;
    border-radius: 18px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .safety-panel {
    padding: 22px 18px;
    border-radius: 20px;
  }

  /* Reservation keeps 44px targets, but removes the double outer padding. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .register-section {
    gap: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .register-grid {
    gap: 18px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .register-form {
    margin-right: 0;
    margin-left: 0;
    padding: 22px 18px;
    border-radius: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .booking-form-step {
    padding: 18px 0 0;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .booking-steps {
    gap: 0;
    margin-top: 22px;
  }

  /* Journal and FAQ lose unnecessary outer frames while retaining glass cards. */
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .journal-section {
    gap: 22px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .blog-card {
    border-radius: 20px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .faq-list {
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .faq-list details,
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .faq-list details:last-child {
    border-radius: 18px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .faq-list summary {
    min-height: 54px;
    padding: 14px 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .salon-final-cta {
    padding: 64px var(--mobile-gutter);
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .site-footer {
    padding: 48px var(--mobile-gutter) calc(100px + env(safe-area-inset-bottom));
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .mobile-action-bar {
    min-height: calc(68px + env(safe-area-inset-bottom));
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
}

/* 431px includes 430px iPhone viewports that resolve a fractional CSS pixel in embedded browsers. */
@media (max-width: 431px) {
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] {
    --mobile-gutter: 16px;
    --mobile-section-top: 56px;
    --mobile-section-bottom: 60px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nm-hero-copy {
    padding-right: 16px;
    padding-left: 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .nm-hero-details {
    padding-right: 16px;
    padding-left: 16px;
  }

  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] .junpa-section[data-editorial-no]::before {
    margin-bottom: 16px;
    font-size: 3.65rem;
  }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  @media (max-width: 680px) {
    body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] :where(.site-header, .site-header .nav) {
      background-color: rgba(242, 249, 248, 0.96);
    }
  }
}

@media (prefers-reduced-transparency: reduce) and (max-width: 680px) {
  body[data-design="mukunal-editorial-v2"][data-layout="reference-v7"][data-mobile-rhythm="v10"] :where(.site-header, .site-header .nav) {
    background-color: #f2f9f8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* visit-guide-20260913: 06だけに適用。既存の濃紺・緑と720px区切りを継承。 */
body[data-design][data-layout] #philosophy.visit-guide { padding-top: 72px; padding-bottom: 64px; }
#philosophy .visit-guide-inner { grid-column: 1 / -1; width: 100%; max-width: 1120px; margin: 0 auto; }
#philosophy .visit-guide-intro h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.45; margin: 12px 0 18px; }
#philosophy .visit-guide-intro > p:last-child { color: #d1e4e4; line-height: 1.9; }
#philosophy .visit-guide-scenes { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
#philosophy .visit-guide-scenes li { padding: 20px 0; border-top: 1px solid #ffffff36; min-width: 0; }
#philosophy .visit-guide-scenes h3 { font-size: 1.1rem; line-height: 1.6; margin: 0 0 8px; color: #fff; }
#philosophy .visit-guide-scenes p { font-size: .95rem; line-height: 1.85; margin: 0; color: #c6dddd; }
#philosophy .visit-guide-booking { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 28px; background: #ffffff09; border: 1px solid #ffffff26; border-radius: 18px; }
#philosophy .visit-guide-booking h3 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.5; }
#philosophy .visit-guide-booking p { margin: 0; color: #d1e4e4; font-size: 1rem; line-height: 1.9; }
#philosophy .visit-guide-booking strong { color: #fff; white-space: nowrap; }
#philosophy .visit-guide-booking small { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.7; color: #c6dddd; }
#philosophy .visit-guide-action .button { display: flex; justify-content: center; text-align: center; white-space: normal; margin: 14px 0 0; padding: 16px; font-size: 1rem; line-height: 1.5; color: #fff; background: #00846b; border-radius: 8px; }
@media(max-width:720px) {
  body[data-design][data-layout] #philosophy.visit-guide { padding-top: 52px; padding-bottom: 44px; }
  #philosophy .visit-guide-scenes { grid-template-columns: minmax(0,1fr); gap: 0; margin: 22px 0; }
  #philosophy .visit-guide-scenes li { padding: 15px 0; }
  #philosophy .visit-guide-booking { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 20px; }
}

/* experience-mobile-20260911: three narrow columns become readable horizontal rows */
@media (max-width: 760px) {
  #nemuri .experience-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  #nemuri .experience-flow li {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: start;
    min-width: 0;
    min-height: 0;
    padding: 14px 16px;
  }
  #nemuri .experience-flow li > span {
    grid-column: 1;
    grid-row: 1 / 3;
    padding-top: 3px;
  }
  #nemuri .experience-flow li > strong,
  #nemuri .experience-flow li > small {
    grid-column: 2;
    min-width: 0;
    writing-mode: horizontal-tb;
    word-break: normal;
    line-height: 1.6;
  }
  #nemuri .experience-flow li > strong { grid-row: 1; font-size: 1rem; }
  #nemuri .experience-flow li > small { grid-row: 2; font-size: .875rem; }
}