/**
 * pwa-install-guide.css
 * といろ PWA インストール案内 — フローティングカード + ワイプ小窓
 * 仕様：みつは差し戻し指示 2026-05-17
 *       ボトムシート → フローティングカード（下部浮遊）
 *       オーバーレイ削除・スクロールロック廃止・role="region"
 *       P0-3 断定禁止 / といろらしさ §5 絵文字禁止
 * 作成：2026-05-17 / 改修：2026-05-17
 */

/* ━━━━━ カラー変数（tokens.css に合わせたフォールバック） ━━━━━ */
:root {
  --pwa-washi:      var(--paper-warm, #f8f4ea);
  --pwa-sumi-1:     var(--ink, #1c1916);
  --pwa-sumi-2:     var(--ink-muted, rgba(28,25,22,.72));
  --pwa-sumi-3:     rgba(28,25,22,.40);
  --pwa-sumi-4:     rgba(28,25,22,.12);
  --pwa-sumi-5:     rgba(28,25,22,.06);
  --pwa-kin:        var(--kintsugi, #c8a96e);
  --pwa-kin-lt:     rgba(200,169,110,.18);
  --pwa-serif:      "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  --pwa-sans:       "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --pwa-dur:        220ms;
  --pwa-ease:       cubic-bezier(.4,0,.2,1);
}

/* ━━━━━ フローティングカード本体 ━━━━━ */
/* ボトムシートから変更：下端から 20px 浮遊・角丸全周・浮遊影 */
.pwa-sheet {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 20px));
  max-width: 340px;
  width: calc(100vw - 32px);
  background: var(--pwa-washi);
  border-radius: 18px;
  border: 1px solid rgba(200,169,110,.28);
  padding: 16px 18px 18px;
  box-shadow: 0 12px 32px rgba(28,24,19,.16), 0 2px 8px rgba(28,24,19,.08);
  z-index: 500;
  opacity: 0;
  /* 出現アニメ：fade in + 8px slide up */
  transition:
    transform var(--pwa-dur) var(--pwa-ease),
    opacity   var(--pwa-dur) var(--pwa-ease);
  font-family: var(--pwa-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  pointer-events: none;
}
.pwa-sheet[data-open="true"] {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-sheet {
    /* モーション軽減：fade in のみ・slide なし */
    transition: opacity var(--pwa-dur) linear;
    transform: translateX(-50%) translateY(0) !important;
  }
  .pwa-sheet[data-open="true"] { opacity: 1; }
  .pwa-sheet:not([data-open="true"]) { opacity: 0; }
}

/* 閉じるボタン（右上 ×） */
.pwa-sheet__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 18px; line-height: 1;
  color: var(--pwa-sumi-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.pwa-sheet__close:hover { color: var(--pwa-sumi-1); background: var(--pwa-sumi-5); }

/* ━━━━━ パネル（Step1 案内 / Step2 OS選択）━━━━━ */
.pwa-panel {
  display: none;
}
.pwa-panel[data-active="true"] {
  display: block;
}

/* ━━━━━ Step 1：案内パネル ━━━━━ */
.pwa-panel--guide .pwa-sheet__title {
  font-family: var(--pwa-serif);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--pwa-sumi-1);
  margin-bottom: 10px;
  margin-right: 20px; /* × ボタン分の余白 */
  line-height: 1.7;
}
.pwa-panel--guide .pwa-sheet__body {
  font-size: 13.5px;
  color: var(--pwa-sumi-2);
  line-height: 1.85;
  margin-bottom: 20px;
}

/* ボタン群 */
.pwa-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pwa-btn--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: var(--pwa-kin);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--pwa-serif);
  font-size: 13px;
  letter-spacing: .12em;
  cursor: pointer;
  min-height: 48px;
  transition: opacity .2s, transform .1s;
}
.pwa-btn--primary:active { transform: scale(0.98); opacity: .9; }

.pwa-btn--later {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--pwa-sumi-2);
  cursor: pointer;
  letter-spacing: .05em;
  text-align: center;
  transition: color .15s;
  min-height: 44px;
}
.pwa-btn--later:hover { color: var(--pwa-sumi-1); }

.pwa-btn--never {
  display: block;
  width: 100%;
  padding: 6px;
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--pwa-sumi-3);
  cursor: pointer;
  letter-spacing: .04em;
  text-align: center;
  transition: color .15s;
  min-height: 36px;
}
.pwa-btn--never:hover { color: var(--pwa-sumi-2); }

/* ━━━━━ Step 2：OS 選択パネル ━━━━━ */
.pwa-panel--os .pwa-sheet__title {
  font-family: var(--pwa-serif);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--pwa-sumi-1);
  margin-bottom: 16px;
  margin-right: 20px; /* × ボタン分の余白 */
  line-height: 1.7;
}

.pwa-os-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.pwa-os-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--pwa-washi);
  border: 1px solid var(--pwa-sumi-4);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s;
  min-height: 56px;
}
.pwa-os-btn:hover {
  border-color: var(--pwa-kin);
  background: var(--pwa-kin-lt);
}

/* OS アイコン：スマホシルエット SVG を縦中央配置 */
.pwa-os-btn__icon {
  flex-shrink: 0;
  width: 28px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-os-btn__icon svg {
  display: block;
}

.pwa-os-btn__label {
  font-size: 13.5px;
  color: var(--pwa-sumi-1);
  letter-spacing: .03em;
  line-height: 1.4;
}

/* 戻るリンク */
.pwa-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--pwa-sumi-3);
  cursor: pointer;
  letter-spacing: .04em;
  padding: 6px 0;
  transition: color .15s;
  min-height: 36px;
}
.pwa-back-btn:hover { color: var(--pwa-sumi-2); }

/* ━━━━━ ワイプ小窓（watashinoma 外からでも使えるよう再定義） ━━━━━ */
.wipeGuide {
  display: none;
  position: fixed;
  top: 16px; right: 16px;
  width: min(220px, calc(100vw - 32px));
  max-height: min(460px, calc(100vh - 32px));
  z-index: 9999;
  background: var(--pwa-washi, #f8f4ea);
  border: 1px solid var(--pwa-kin, #c8a96e);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(28,25,22,.18), 0 2px 8px rgba(28,25,22,.10);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  flex-direction: column;
  transition: max-height .18s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 374px) {
  .wipeGuide { width: calc(100vw - 16px); right: 8px; top: 8px; }
}
@media (min-width: 768px) {
  .wipeGuide { width: 220px; }
}
body.wipe-active .wipeGuide { display: flex; }

.wipeGuide.wipe-minimized {
  max-height: 40px !important;
  height: 40px !important;
}
.wipeGuide.wipe-minimized .wipeBody,
.wipeGuide.wipe-minimized .wipeFoot {
  display: none;
}

.wipeHead {
  flex-shrink: 0;
  height: 40px;
  display: flex; align-items: center;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid rgba(28,25,22,.12);
  cursor: grab;
  background: var(--pwa-washi, #f8f4ea);
  filter: brightness(.96);
}
.wipeHead:active { cursor: grabbing; }
.wipeHeadTitle {
  flex: 1;
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  font-size: 10px; letter-spacing: .16em;
  color: rgba(28,25,22,.40);
  pointer-events: none;
}
.wipeHeadBtns { display: flex; gap: 2px; pointer-events: auto; }
.wipeHeadBtn {
  width: 28px; height: 28px;
  border: none; background: transparent;
  font-size: 12px; color: rgba(28,25,22,.40);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.wipeHeadBtn:hover { color: #1c1916; background: rgba(28,25,22,.06); }

.wipeBody {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 12px 8px;
  gap: 10px;
  overflow: hidden;
}
.wipeSvgWrap { flex-shrink: 0; width: 116px; height: 240px; }
.wipeSvgWrap svg { width: 100%; height: 100%; }

.wipeMsg {
  font-size: 11px; font-weight: 300; letter-spacing: .06em;
  color: rgba(28,25,22,.72);
  line-height: 1.8;
  text-align: center;
  min-height: 2.4em;
}
.wipeBlinkDots {
  display: inline-block;
  color: #c8a96e;
  font-weight: 600;
  animation: wipeDotsBlink 1.1s ease-in-out infinite;
}
.wipeAlert {
  font-size: 10px; letter-spacing: .05em;
  color: #c8a96e;
  line-height: 1.7;
  border-left: 2px solid #c8a96e;
  padding-left: 8px;
  text-align: left;
}

.wipeFoot {
  flex-shrink: 0;
  height: 44px;
  border-top: 1px solid rgba(28,25,22,.12);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  background: var(--pwa-washi, #f8f4ea);
  filter: brightness(.96);
}
.wipeNavBtn {
  width: 44px; height: 36px;
  border: 1px solid rgba(28,25,22,.12); border-radius: 4px;
  background: transparent;
  font-size: 11px; letter-spacing: .08em;
  color: rgba(28,25,22,.40);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.wipeNavBtn:hover:not(:disabled) { border-color: #c8a96e; color: #c8a96e; }
.wipeNavBtn:disabled { opacity: .32; cursor: default; }
.wipeCounter {
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  font-size: 10px; letter-spacing: .10em;
  color: rgba(28,25,22,.40);
}

.wipeAutoRow {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 4px 0 2px;
  flex-shrink: 0;
}
.wipeAutoLabel {
  font-size: 9px; letter-spacing: .10em; color: rgba(28,25,22,.40);
  cursor: pointer;
}
.wipeAutoToggle {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 16px;
  border-radius: 8px;
  background: rgba(28,25,22,.14);
  border: none; cursor: pointer;
  position: relative;
  transition: background .2s;
}
.wipeAutoToggle:checked { background: #c8a96e; }
.wipeAutoToggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.wipeAutoToggle:checked::after { transform: translateX(12px); }

@keyframes wipeDotsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-sheet { transition: opacity var(--pwa-dur) linear; }
  .wipeGuide { transition: none; }
  .wipeBlinkDots { animation: none; }
  .wipeAutoToggle { transition: none; }
  .wipeAutoToggle::after { transition: none; }
}