/* 間取りdialog・階切替・スワイプヒント。 */

/* 全数値は元のraw宣言。QA未合格の外部候補。 */

.plan-viewer {
  width:min(1040px,calc(100vw - 32px));
  height:min(840px,calc(100dvh - 32px));
  max-width:none;
  max-height:none;
  margin:auto;
  padding:0;
  border:0;
  border-radius:12px;
  overflow:hidden;
  color:var(--c-navy);
  background:#f9f6ef;
  box-shadow:0 12px 48px #0003;
  opacity:1;
  scale:1;
  transition:opacity 220ms var(--m-ease-out),scale 220ms var(--m-ease-out);
}

.plan-viewer[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.plan-viewer::backdrop {
  background:var(--c-navy);
  opacity:.6;
  transition:opacity 220ms var(--m-ease-out);
}

.plan-viewer__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px 8px 20px;
  border-bottom:1px solid #22395c33;
}

.plan-viewer__header h2 {
  margin:0;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  line-height:1.6;
}

.plan-viewer__close {
  flex:0 0 48px;
  width:48px;
  height:48px;
  border:0;
  border-radius:6px;
  color:inherit;
  background:transparent;
  font:32px/1 sans-serif;
  cursor:pointer;
}

.plan-viewer__scroll {
  min-height:0;
  min-width:0;
  overflow:auto;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y pinch-zoom;
  background:white;
  cursor:grab;
}

.plan-viewer__scroll.is-dragging {
  cursor:grabbing;
  user-select:none;
}

.plan-viewer .plan-viewer__image {
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  margin:0;
  object-fit:initial;
  touch-action:pan-x pan-y pinch-zoom;
}

.plan-viewer__floors {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:10px;
  border-top:1px solid #22395c33;
}

.plan-viewer__floors button {
  min-width:72px;
  min-height:48px;
  padding:6px 16px;
  border:2px solid var(--c-navy);
  border-radius:6px;
  font:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  color:var(--c-navy);
  background:var(--c-white);
  cursor:pointer;
}

.plan-viewer__floors button[aria-pressed=true] {
  color:white;
  background:var(--c-navy);
}

.plan-viewer__hint {
  position:absolute;
  left:12px;
  right:12px;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:0 auto;
  padding:8px 10px;
  border-radius:8px;
  pointer-events:none;
  color:var(--c-white);
  background:rgb(34 57 92/.8);
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
  opacity:0;
  transition:opacity 180ms var(--m-ease-out,ease);
}

.plan-viewer__hint.is-visible {
  opacity:1;
}

.plan-viewer button:focus-visible {
  outline:3px solid var(--c-terracotta);
  outline-offset:-3px;
}

.plan-viewer__scroll:focus-visible {
  outline:3px solid var(--c-terracotta);
  outline-offset:-3px;
}

@starting-style {
  .plan-viewer[open] {
    opacity:0;
    scale:.96;
  }
}

@starting-style {
  .plan-viewer[open]::backdrop {
    opacity:0;
  }
}

@media(max-width:1023px) {
  .plan-viewer {
    width:calc(min(100vw,480px) - 16px);
    height:calc(100dvh - 16px);
  }
}

@media(max-width:1023px) {
  .plan-viewer__header {
    padding-left:12px;
  }
}

@media(max-width:1023px) {
  .plan-viewer__header h2 {
    font-size:15px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .plan-viewer {
    transition:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .plan-viewer::backdrop {
    transition:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .plan-viewer__hint {
    transition:none;
  }
}

html[data-plan-still] .plan-viewer {
  transition:none;
}

html[data-plan-still] .plan-viewer::backdrop {
  transition:none;
}

html[data-plan-still] .plan-viewer__hint {
  transition:none;
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  a[data-plan-zoom] {
    cursor:zoom-in;
  }
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-plan-still]) a[data-plan-zoom] {
    transition:box-shadow 200ms;
  }
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-plan-still]) a[data-plan-zoom]:hover {
    box-shadow:0 4px 14px #22395c29;
  }
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-plan-still]) a[data-plan-zoom] .pc-kozu-plan-zoom {
    background-position:left bottom;
  }
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-plan-still]) a[data-plan-zoom].pc-nagao-original>span {
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:0 1px;
    transition:background-size 200ms;
  }
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-plan-still]) a[data-plan-zoom]:hover .pc-kozu-plan-zoom {
    background-size:100% 1px;
    text-decoration-color:transparent;
  }
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not([data-plan-still]) a[data-plan-zoom].pc-nagao-original:hover>span {
    background-size:100% 1px;
    text-decoration-color:transparent;
  }
}