/* ============ パスポート（手帳）：表紙・見開き・インクのスタンプ ============ */
.pp-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.pp-book { position: relative; width: min(980px, 100%); aspect-ratio: 1.42; container-type: inline-size; perspective: 2200px; }
.pp-stage { position: absolute; inset: 0; }
.pp-nav { display: flex; align-items: center; gap: 16px; }
.pp-nav span { min-width: 140px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pp-nav button:disabled { opacity: .35; cursor: default; }
.pp-tip { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---- 表紙：深い緑の革に、金の箔押し ---- */
.pp-coverwrap { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 5; transform-origin: left center; transform-style: preserve-3d;
  transform: translateX(-50%); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.pp-book.open .pp-coverwrap { transform: translateX(0) rotateY(-178deg); pointer-events: none; }
.pp-book.open:not(.opening) .pp-coverwrap { visibility: hidden; }
.pp-cover {
  position: absolute; inset: 0; border-radius: 1.2cqw 2.2cqw 2.2cqw 1.2cqw; overflow: hidden; cursor: pointer; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 7cqw 4cqw 6cqw; text-align: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 3.5%),
    linear-gradient(160deg, #24493d 0%, #1b382f 55%, #132820 100%);
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .45), inset 0 0 0 .25cqw rgba(0, 0, 0, .25), inset .6cqw 0 1cqw rgba(0, 0, 0, .35);
}
.cv-grain { position: absolute; inset: 0; opacity: .35; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-radial-gradient(circle at 17% 23%, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, .12) 1px 2px, rgba(255, 255, 255, 0) 2px 3px); }
.pp-cover .cv-title, .pp-cover .cv-en {
  position: relative; font-family: 'Noto Serif JP', 'Yu Mincho', serif; line-height: 1.3;
  background: linear-gradient(180deg, #fff2b8 0%, #e1b84d 38%, #b88a2a 55%, #f2d67c 75%, #a67a22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .12cqw 0 rgba(0, 0, 0, .55)) drop-shadow(0 -.06cqw 0 rgba(255, 240, 200, .25));
}
.cv-title { font-size: 2.7cqw; letter-spacing: .3em; }
.cv-title span { display: inline-block; margin-top: .8cqw; font-size: 4.6cqw; letter-spacing: .6em; }
.cv-en { font-family: 'Noto Sans JP', system-ui, sans-serif !important; font-weight: 800; font-size: 1.9cqw; letter-spacing: .12em; }
.cv-en span { display: inline-block; margin-top: .6cqw; font-size: 3.4cqw; letter-spacing: .28em; }
.pp-cover .pp-emblem { position: relative; width: 17cqw; height: 17cqw; color: #d9b457; filter: drop-shadow(0 .15cqw 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 .6cqw rgba(255, 220, 140, .25)); }
.cv-chip { position: absolute; left: 50%; bottom: 2.4cqw; width: 3.2cqw; height: 2cqw; margin-left: -1.6cqw; border: .22cqw solid #d9b457; border-radius: .4cqw; opacity: .9; }
.cv-chip::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1cqw; height: 1cqw; margin: -.5cqw 0 0 -.5cqw; border: .2cqw solid #d9b457; border-radius: 50%; }
.cv-hint { position: absolute; bottom: .8cqw; left: 0; right: 0; font-size: 1.1cqw; color: rgba(217, 180, 87, .6); letter-spacing: .2em; }
.pp-cover:hover { filter: brightness(1.06); }

/* ---- 見開き ---- */
.pp-spread { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; transition: opacity .5s .3s; }
.pp-book.open .pp-spread { opacity: 1; }
.pp-book:not(.open) .pp-spread { pointer-events: none; }
.pp-page { position: relative; height: 100%; cursor: pointer; }
.pp-page.left { border-radius: 1.4cqw 0 0 1.4cqw; overflow: hidden; box-shadow: -1cqw 1.6cqw 3cqw rgba(0, 0, 0, .35); }
.pp-page.right { border-radius: 0 1.4cqw 1.4cqw 0; overflow: hidden; box-shadow: 1cqw 1.6cqw 3cqw rgba(0, 0, 0, .35); }
/* 紙：うすい地紋（細かい模様）と、とじ目の影 */
.pg { position: absolute; inset: 0; overflow: hidden; color: #33403a; background: #f3eee0; font-family: 'Noto Sans JP', system-ui, sans-serif; }
.pg-guil { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    repeating-radial-gradient(ellipse at 50% 120%, rgba(90, 140, 120, .10) 0 .25cqw, rgba(255, 255, 255, 0) .25cqw .9cqw),
    repeating-linear-gradient(35deg, rgba(200, 120, 140, .07) 0 .12cqw, rgba(255, 255, 255, 0) .12cqw .7cqw),
    repeating-linear-gradient(-35deg, rgba(90, 120, 170, .07) 0 .12cqw, rgba(255, 255, 255, 0) .12cqw .7cqw),
    radial-gradient(60% 45% at 50% 50%, rgba(120, 170, 150, .12), rgba(255, 255, 255, 0) 70%);
}
.pp-page.left .pg::after, .lf .pg::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3.5cqw; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(60, 50, 30, .18)); }
.pp-page.right .pg::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3.5cqw; pointer-events: none; background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(60, 50, 30, .2)); }
.pg.blank { background: #efe9d9; }

/* 表紙の裏 */
.pg.inside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 5cqw; text-align: center; }
.pg.inside .pp-emblem { position: relative; width: 11cqw; height: 11cqw; color: rgba(40, 90, 70, .5); }
.pg-note { position: relative; margin: 0; font-size: 1.35cqw; line-height: 1.8; }
.pg-note.en { font-size: 1.1cqw; opacity: .75; font-style: italic; }
.pg-issuer { position: relative; font-family: 'Noto Serif JP', serif; font-size: 1.6cqw; letter-spacing: .2em; }

/* 身分事項のページ */
.pg.data { padding: 3cqw 3.2cqw; display: flex; flex-direction: column; }
.pd-h { position: relative; display: flex; flex-wrap: wrap; gap: .6cqw 2cqw; font-size: 1cqw; color: #5d6b64; }
.pd-h b { color: #1f2a26; font-size: 1.3cqw; margin-left: .3cqw; font-family: var(--mono, monospace); }
.pd-grid { position: relative; flex: 1; display: grid; grid-template-columns: 13cqw 1fr; gap: 2.4cqw; margin-top: 2cqw; }
.pd-photo { position: relative; aspect-ratio: .78; border-radius: .6cqw; overflow: hidden; background: linear-gradient(180deg, #dfe6e2, #c9d4cf); box-shadow: inset 0 0 0 .15cqw rgba(0, 0, 0, .15); }
.pd-photo i { position: absolute; left: 50%; bottom: 0; width: 70%; height: 72%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 30%, #8b9a94 0 22%, rgba(0, 0, 0, 0) 23%), radial-gradient(ellipse at 50% 100%, #8b9a94 0 55%, rgba(0, 0, 0, 0) 56%); }
.pd-photo .pp-emblem { position: absolute; right: -2cqw; bottom: -2cqw; width: 9cqw; height: 9cqw; color: rgba(40, 90, 70, .25); }
.pd-grid dl { margin: 0; display: grid; gap: 1.1cqw; align-content: start; }
.pd-grid dt { font-size: .95cqw; color: #6a766f; }
.pd-grid dd { margin: .2cqw 0 0; font-size: 1.7cqw; font-weight: 700; color: #1f2a26; letter-spacing: .04em; }
.pd-mrz { position: relative; margin: 0; padding-top: 1.2cqw; border-top: .1cqw solid rgba(0, 0, 0, .12); font: 600 1.28cqw/1.6 'OCR B', 'Consolas', 'Courier New', monospace; letter-spacing: .12em; color: #26302c; white-space: pre; overflow: hidden; }

/* 査証のページ：インクのスタンプ */
.pg.visa .pg-head { position: absolute; top: 1.6cqw; left: 0; right: 0; text-align: center; font-size: 1.05cqw; letter-spacing: .5em; color: #7b8a83; }
.pg-no { position: absolute; bottom: 1.2cqw; left: 0; right: 0; text-align: center; font-family: var(--mono, monospace); font-size: 1cqw; color: #7b8a83; }
.pg-stamp { position: absolute; width: 20cqw; aspect-ratio: 1; transform: rotate(var(--rot, 0deg)); mix-blend-mode: multiply; opacity: .9; }
.ink-stamp { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- ページをめくる ---- */
.pp-under { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; z-index: 1; }
.pp-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.35, .1, .25, 1); }
.pp-leaf.fwd { left: 50%; transform-origin: left center; }
.pp-leaf.back { left: 0; transform-origin: right center; }
.pp-leaf.fwd.go { transform: rotateY(-180deg); }
.pp-leaf.back.go { transform: rotateY(180deg); }
.pp-leaf .lf { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .3); }
.pp-leaf .lf.back { transform: rotateY(180deg); }
.pp-leaf.fwd .lf.front, .pp-leaf.back .lf.back { border-radius: 0 1.4cqw 1.4cqw 0; }
.pp-leaf.fwd .lf.back, .pp-leaf.back .lf.front { border-radius: 1.4cqw 0 0 1.4cqw; }
.pp-spread > .pp-page { z-index: 2; }
.pp-spread:has(.pp-leaf) > .pp-page { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pp-coverwrap, .pp-leaf { transition: none; }
}
/* 画面の高さにも収める */
.pp-book { width: min(980px, 100%, calc((100vh - 230px) * 1.42)); }
/* 表紙の革のしぼ（細かいノイズ） */
.cv-grain { opacity: .5; mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 紙の地紋は、うすく細かく */
.pg-guil { opacity: .32; }
.pg-stamp { width: 21cqw; }