/* 体験の試作で足した部品。土台は styles.css（案1 和紙と朱）。 */

/* ---------- 外の操作盤 ---------- */
.p-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.p-chip { padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(251, 246, 234, .6); font: 600 12px var(--gothic); }
.p-chip.on { background: var(--seal); border-color: var(--seal); color: #FFF7EC; }
.p-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 12px var(--gothic); color: var(--ink); }
.p-range { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 12px var(--gothic); }
.p-range input { flex: 1; accent-color: var(--seal); }
#panel h2 { margin-top: 16px; }

/* ---------- 共通 ---------- */
#buzz { position: absolute; right: 22px; top: 54px; z-index: 70; padding: 3px 10px; border-radius: 999px; background: rgba(34, 32, 28, .85); color: #fff; font: 700 10px var(--gothic); letter-spacing: .1em; opacity: 0; pointer-events: none; }
#buzz.show { animation: buzz .9s ease; }
@keyframes buzz { 0% { opacity: 0; transform: translateX(0); } 10%, 70% { opacity: 1; } 15% { transform: translateX(-3px); } 25% { transform: translateX(3px); } 35% { transform: translateX(-2px); } 45% { transform: none; } 100% { opacity: 0; } }
#tabbar::before { width: calc((100% - 10px) / var(--n, 4)); }
.tabtop { justify-content: center; }
.tabtop h1 { flex: none; }
.voice { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 0 4px 6px; vertical-align: middle; color: var(--seal); }
.voice svg { width: 15px; height: 15px; }
.gb.pop .gb-face, .gface.pop { animation: gpop .35s ease-out; transform-origin: bottom center; }
.gb.pop .gb-bubble { animation: fade .25s ease; }
@keyframes gpop { 0% { transform: translateY(8px) scale(.95); } 60% { transform: translateY(-3px) scale(1.02); } }
.ink-btn.strong { border-color: var(--seal); color: var(--seal); background: #FFF7EC; }
.ink-btn.glass { background: rgba(255, 255, 255, .1); border-color: var(--glass-line); color: #fff; }
.ink-btn.glass svg { width: 17px; height: 17px; }
.textbtn.light { color: rgba(251, 246, 234, .75); }
.callchip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 30px; border: 1px solid var(--glass-line); background: rgba(16, 15, 14, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font: 600 13px var(--gothic); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.callchip img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: #EADBB9; }
.dive { animation: dive .62s cubic-bezier(.2, 1.4, .4, 1) .35s backwards; }
@keyframes dive { 0% { transform: translateY(60px) scale(.6); opacity: 0; } 70% { transform: translateY(-6px) scale(1.04, .96); opacity: 1; } }

/* ---------- ホーム ---------- */
.seal-btn.cta2 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 18px; }
.cta2 b { font: 700 18px var(--mincho); letter-spacing: .2em; }
.cta2 small { font: 600 12px var(--gothic); letter-spacing: .06em; opacity: .85; }
.home-cta .again { margin-top: 10px; }
.progress-card { display: block; width: calc(100% - 32px); margin: 20px 16px 0; padding: 14px 16px; text-align: left; }
.pc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pc-row b { font: 700 15px var(--mincho); letter-spacing: .06em; }
.pc-row em { font: 500 13px var(--gothic); font-style: normal; color: var(--muted); }
.pc-row em strong { font: 700 26px var(--mincho); color: var(--seal); margin-right: 2px; }
.pc-row.small { margin-top: 8px; font: 12px var(--gothic); color: var(--muted); }
.pc-row .link { color: var(--seal); font-weight: 700; }
.pc-bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.pc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--seal); }

/* ---------- コースの旅程 ---------- */
.itinerary { position: relative; list-style: none; margin: 0 16px; padding: 6px 14px; }
.itinerary::before { content: ""; position: absolute; left: 24px; top: 26px; bottom: 26px; width: 2px; background: var(--seal); opacity: .55; }
.it-stop, .it-end { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.it-stop .num { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--seal); color: #fff; font: 700 12px var(--gothic); box-shadow: 0 0 0 3px var(--paper); }
.it-stop .print { flex: none; width: 60px; height: 44px; border-radius: 6px; }
.it-end i { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--sumi); background: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
.it-end b { font: 700 14px var(--mincho); letter-spacing: .04em; }
.it-end small { margin-left: auto; font: 11px var(--gothic); color: var(--muted); }

/* ---------- 出発の儀式（旅窓の切符・改札・発車の札） ---------- */
.ceremony { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px calc(var(--sab) + 20px);
	background: rgba(26, 22, 18, .82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .6s; }
.ceremony.gone { opacity: 0; pointer-events: none; }
.skipc { position: absolute; right: 16px; top: calc(var(--sat) + 6px); padding: 5px 12px; border: 1px solid rgba(251, 246, 234, .6); background: none; color: #FBF6EA; font: 600 12px var(--mincho); letter-spacing: .08em; }
/* 切符と半券。半券は点線（ミシン目）の右。右へ引っぱるか押すとちぎれる */
.ticket { position: relative; display: flex; width: 322px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); animation: issue .9s cubic-bezier(.2, 1.2, .4, 1); transition: transform .6s ease-in, opacity .6s; }
@keyframes issue { from { transform: translateY(200px) rotate(-4deg); opacity: 0; } }
.tk-main, .tk-stub { color: #3A2E1E; background: #EFE0BF repeating-linear-gradient(45deg, rgba(120, 90, 50, .09) 0 2px, transparent 2px 6px); }
.tk-main { flex: 1; min-width: 0; padding: 14px 14px 12px 18px; border: 1.4px solid #6B5A3E; border-right: 0; border-radius: 4px 0 0 4px; }
.tk-head { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #6B5A3E; font: 700 12px var(--mincho); letter-spacing: .18em; }
.tk-route { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 12px 0 6px; font: 900 23px var(--mincho); letter-spacing: .04em; white-space: nowrap; }
.tk-route span { font-weight: 400; color: #8A7552; }
.tk-via { display: block; text-align: center; font: 11px var(--mincho); }
.tk-foot { display: flex; justify-content: space-between; margin-top: 10px; font: 10.5px var(--mincho); }
.tk-stub { position: relative; flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 10px 4px 9px; margin: 0;
	border: 1.4px solid #6B5A3E; border-left: 0; border-radius: 0 4px 4px 0; cursor: grab; touch-action: none; transform-origin: 0 100%;
	background-image: repeating-linear-gradient(45deg, rgba(120, 90, 50, .09) 0 2px, transparent 2px 6px), linear-gradient(#6B5A3E, #6B5A3E); background-size: auto, 2px 7px; background-repeat: repeat, repeat-y; background-position: 0 0, 0 2px;
	transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); animation: nudge 1.8s ease-in-out 1s infinite; }
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; left: -7px; width: 13px; height: 13px; border-radius: 50%; background: #2A2520; }
.tk-stub::before { top: -7px; }
.tk-stub::after { bottom: -7px; }
.tk-stub small { padding: 1px 6px; border-radius: 3px; background: var(--seal); color: #FFF7EC; font: 700 10px var(--gothic); letter-spacing: .12em; }
.tk-stub b { writing-mode: vertical-rl; font: 900 17px/1 var(--mincho); letter-spacing: .14em; }
.tk-stub span { font: 9px var(--mincho); }
.tk-stub.dragging { transition: none; animation: none; cursor: grabbing; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(5px) rotate(2deg); } 90% { transform: translateX(-1px); } }
/* ちぎれた: 半券は回りながら落ちて消える。切符の右の縁はぎざぎざに */
.tk-stub.off { animation: none; transition: transform .8s cubic-bezier(.4, .1, .6, 1), opacity .8s .1s; transform: translate(60px, 300px) rotate(40deg) !important; opacity: 0; pointer-events: none; }
.ticket.torn .tk-main { clip-path: polygon(0 0, 100% 0, 98.6% 5%, 100% 10%, 98.6% 15%, 100% 20%, 98.6% 25%, 100% 30%, 98.6% 35%, 100% 40%, 98.6% 45%, 100% 50%, 98.6% 55%, 100% 60%, 98.6% 65%, 100% 70%, 98.6% 75%, 100% 80%, 98.6% 85%, 100% 90%, 98.6% 95%, 100% 100%, 0 100%); animation: tug .3s; }
@keyframes tug { 40% { transform: translateX(-6px) rotate(-1deg); } }
.ticket.away { transform: translateY(-160%) rotate(8deg); opacity: 0; }
.tk-hint { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 30px 0 0; color: #FBF6EA; font: 700 15px var(--mincho); letter-spacing: .1em; }
/* 横スワイプの合図。点が左から右へ流れる。払っている間は消す */
.ceremony.ph-ticket { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.tk-main { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.ceremony.pulling .tk-main { transition: none; }
/* 払うほど、ミシン目が朱に光る */
.ceremony.pulling .tk-stub { box-shadow: -3px 0 0 rgba(200, 56, 43, calc(var(--pull, 0) * .9)); }
.tk-swipe { position: relative; display: block; width: 168px; height: 4px; border-radius: 2px; background: rgba(251, 246, 234, .22); }
.tk-swipe::after { content: ""; position: absolute; right: -2px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid rgba(251, 246, 234, .7); border-right: 2px solid rgba(251, 246, 234, .7); transform: rotate(45deg); }
.tk-swipe i { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #FBF6EA; box-shadow: 0 0 10px rgba(255, 255, 255, .7); animation: swipehint 1.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes swipehint { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateX(150px); opacity: 1; } 100% { transform: translateX(154px); opacity: 0; } }
.ceremony.pulling .tk-swipe, .ceremony.pulling .tk-stub { animation: none; }
.ceremony.pulling .tk-swipe { opacity: .3; }
.ph-torn .tk-hint { animation: none; }
.platform-wrap { display: flex; flex-direction: column; align-items: center; animation: fade .4s; }
.pl-shisa { position: relative; z-index: 1; width: 150px; height: 150px; margin-bottom: -14px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.go-card { position: relative; min-width: 286px; padding: 20px 30px 26px; text-align: center; color: var(--sumi); background: var(--paper) var(--grain); border: 1.4px solid #6B5A3E; border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.go-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(107, 90, 62, .4); border-radius: 2px; pointer-events: none; }
.go-from { display: block; font: 700 12px var(--mincho); letter-spacing: .26em; color: var(--muted); }
.go-title { display: block; margin: 8px 0 12px; font: 900 30px var(--mincho); letter-spacing: .14em; }
.go-first { display: block; margin: -4px 0 12px; font: 600 13px var(--mincho); letter-spacing: .12em; color: var(--ink); }
.go-say { display: inline-block; padding: 4px 16px; border-radius: 3px; background: var(--seal); color: #FFF7EC; font: 700 14px var(--mincho); letter-spacing: .26em; }
.go-seal { position: absolute; right: 8px; bottom: 6px; width: 60px; }
.go-seal .seal { animation: stamp .45s .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.walk.in-ritual .lane, .walk.in-ritual .em-shisa, .walk.in-ritual .wb-face img { animation: none !important; }
.walk.departing .lane { animation: setoff 1.5s cubic-bezier(.3, .1, .2, 1); }
@keyframes setoff { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
.walk.departing .em-shisa { animation: walkbob .3s ease-in-out 5 alternate; }

/* ---------- コースの保存（旅窓の地域パック） ---------- */
.packs { margin: 0 16px; padding: 4px 14px; }
.pack { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; }
.pk-thumb { flex: none; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px; background: #fff; }
.pk-thumb img { border-radius: 2px; }
.pk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-body b { font: 700 15px var(--mincho); letter-spacing: .04em; }
.pk-body small { font: 12px var(--gothic); color: var(--muted); }
.pk-note { font-size: 11px !important; }
.pk-ctl { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pk-del { width: 32px; height: 32px; color: var(--ink); }
.pk-del svg { width: 20px; height: 20px; }
.pk-bar { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: rgba(43, 38, 32, .1); }
.pk-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--seal), var(--shu)); transition: width .12s linear; }
.pk-pct { flex: none; width: 42px; text-align: right; font: 700 13px var(--mincho); color: var(--seal); }
.pk-row-cta { display: flex; justify-content: flex-end; padding: 0 0 10px; }
.storage { margin: 0 16px; padding: 14px; }
.st-bar { display: block; height: 10px; border: 1px solid var(--sumi); background: #fff; }
.st-bar i { display: block; height: 100%; min-width: 4px; background: #1F3B6E; }
.storage small { display: block; margin-top: 8px; font: 12px var(--gothic); color: var(--muted); }
.home-pack { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 12px var(--gothic); color: var(--muted); }
.tag.strong { background: var(--seal); color: #FFF7EC; }
.del-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* ---------- 歩く画面 ---------- */
.jtitle { flex: 1; min-width: 0; text-align: center; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.jtitle small { display: block; font: 600 10.5px var(--gothic); letter-spacing: .2em; opacity: .8; }
.jtitle h1 { margin: 1px 0 0; font: 700 17px var(--mincho); letter-spacing: .12em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes soon { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); } }
.walk.near .arrive-btn { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(200, 56, 43, .35), 0 8px 26px rgba(200, 56, 43, .6); } }
.walk-call { align-self: flex-start; margin: 12px 14px 0; }

/* ---------- 到着 ---------- */
.clabel .first, .first-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: #C9A45C; color: #2A2014; font: 700 10.5px var(--gothic); letter-spacing: .1em; font-style: normal; vertical-align: 1px; }
.cguide img.dive { animation-delay: .7s; }

/* ---------- スポットの案内（旅窓の散策のガイド欄。チャットにしない） ---------- */
.tour .ttop { position: relative; z-index: 3; }
.tour .ttop .iconbtn { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tour .ttl h1 { font-size: 19px; }
.tnode { display: block; margin-top: 3px; font: 500 11.5px var(--gothic); letter-spacing: .08em; color: rgba(251, 246, 234, .82); }
.tnode .first { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: #C9A45C; color: #2A2014; font: 700 10px/1.6 var(--gothic); font-style: normal; }
.tour-ai { top: calc(var(--sat) + 96px); bottom: auto; }
.mood { position: absolute !important; left: 24px; right: 24px; top: calc(var(--sat) + 70px); z-index: 2 !important; margin: 0; text-align: center; color: #FBF6EA; font: 600 15px/1.9 var(--mincho); letter-spacing: .1em; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); opacity: 0; transition: opacity .9s; pointer-events: none; }
.tour .ttop, .tour .recpill, .tour .tbottom, .tour .tour-ai { transition: opacity .9s; }
.tour.idle .ttop, .tour.idle .recpill, .tour.idle .tbottom, .tour.idle .tour-ai { opacity: 0; pointer-events: none; }
.tour.idle .mood { opacity: 1; }
.tour .gpanel { padding-top: 92px; }
.tour .gface { width: 108px; height: 108px; }
.gface.pop { animation: gpop .35s ease-out; }
.gtext.pop { animation: fade .3s ease; }
.tour .gmeta { padding-left: 100px; gap: 6px; }
.tour .gmeta .gname, .tour .gmeta .gcount { flex: none; white-space: nowrap; }
.gmeta .gcount { margin-left: 4px; }
.gtext .me { display: block; margin-bottom: 6px; font: 600 12px var(--gothic); color: rgba(251, 246, 234, .65); }
.gtext .me::before { content: "あなた「"; }
.gtext .me::after { content: "」"; }
.gbox .gchoices { margin-top: 12px; }
.gchoices.two { grid-template-columns: 1fr 1fr; gap: 8px; }
.gchoices .ink-btn, .gchoices .seal-btn { padding: 12px 8px; font-size: 15px; letter-spacing: .1em; }
.tbottom { position: relative; margin-top: auto; padding: 0 14px calc(var(--sab) + 12px); }
.tbottom .gcall { margin-bottom: 14px; }
.tactions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tactions button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: rgba(251, 246, 234, .9); font: 600 11px var(--gothic); letter-spacing: .04em; }
.tactions .roundbtn { width: 52px; height: 52px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; }
.tactions .roundbtn svg { width: 22px; height: 22px; }
.tactions .go .roundbtn { background: var(--seal); border-color: transparent; box-shadow: 0 6px 14px rgba(200, 56, 43, .4); }
.ink-btn.glass.block { justify-content: center; }
.spot-tag { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 4px; background: var(--ai); color: var(--paper); font: 600 11.5px var(--gothic); letter-spacing: .1em; }
.sheet .details { margin: 0; }

/* ---------- アルバム ---------- */
.al-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 16px 0; }
.al-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: 600 10.5px var(--gothic); color: var(--muted); }
.al-stats b { font: 700 22px var(--mincho); color: var(--sumi); }
.al-stats b small { font-size: 12px; color: var(--muted); }
.al-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; margin: 0 16px; padding: 14px 10px;
	background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 50%; }
.al-st { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.al-slot { position: relative; display: grid; place-items: center; width: 80px; height: 80px; }
.al-slot img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; filter: grayscale(.85) sepia(.3); opacity: .35; border: 1.5px dashed var(--line-strong); }
.al-slot i { position: absolute; font: 700 19px var(--mincho); font-style: normal; color: rgba(43, 38, 32, .35); }
.al-st b { font: 700 12.5px var(--mincho); }
.al-st small { font: 11px var(--gothic); color: var(--muted); }
.lrow.rec { gap: 14px; }
.rec-date { flex: none !important; display: flex; flex-direction: column; }
.rec-date b { font: 700 15px var(--mincho); }
.rec-date small, .lrow.rec span small { display: block; font: 11px var(--gothic); color: var(--muted); }
.nl-day { margin: 14px 18px 6px; font: 700 12px var(--gothic); letter-spacing: .06em; color: var(--muted); }
.nl-rows { margin: 0 16px; padding: 2px 0; }
.nl-row { display: grid; grid-template-columns: 60px 1fr 14px; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--sumi); text-align: left; }
.nl-row:last-child { border-bottom: 0; }
.nl-row .print { width: 60px; height: 60px; border-radius: 6px; }
.nl-row > svg { width: 14px; height: 14px; color: var(--muted); }
.nl-t b { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font: 700 15px/1.4 var(--mincho); letter-spacing: .04em; }
.nl-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font: 12.5px/1.6 var(--gothic); color: var(--ink); }
.nl-meta { display: block; margin-top: 3px; font: 600 11px var(--gothic); color: var(--muted); }
.note-sheet .nl-body { flex: 1; overflow-y: auto; padding: 0 2px 8px; }
.nl-photo { height: 220px; margin: 4px 0 12px; border-radius: 8px; }
.nl-id { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 12px/1.6 var(--gothic); color: var(--muted); }
.nl-id .tag, .nl-t .tag { flex: none; }
.nl-summary { margin: 0 0 12px; font: 600 15px/1.85 var(--mincho); color: var(--ink); }
.nl-tip { margin: 0 0 10px; }
.nl-src { margin: 0 0 6px; font: 11.5px/1.6 var(--gothic); color: var(--muted); }
.timeline { list-style: none; margin: 14px 0; padding: 0 0 0 4px; }
.timeline li { position: relative; display: flex; gap: 14px; padding: 7px 0 7px 18px; border-left: 2px solid var(--line-strong); font: 600 14px var(--mincho); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--seal); }
.timeline time { width: 44px; font: 600 12px var(--gothic); color: var(--muted); }
.sheet .end-seals { margin: 0; }

.ink-btn.block { display: flex; }


/* ---------- 歩く画面（W1 絵巻、2026-10-21 採用。下書き walk-redesign/w1-emaki.png） ---------- */
@keyframes walkbob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
@keyframes sway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.walk { display: flex; flex-direction: column; background: var(--washi) var(--grain); color: var(--sumi); overflow: hidden; }
.emaki { position: relative; flex: 1 1 auto; min-height: 300px; overflow: hidden; background: #9CC3DA; }
.emaki::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 8, 10, .42) 0%, rgba(8, 8, 10, 0) 22%); }
.lane { position: absolute; inset: 0; }
.walk.moving .lane { animation: sway .84s ease-in-out infinite; }
.ln { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 36%; will-change: transform, opacity; }
.ln-a { transform: scale(calc(1.25 + .25 * var(--phase, 0))); opacity: calc(1 - var(--phase, 0)); }
.ln-b { transform: scale(calc(1 + .25 * var(--phase, 0))); opacity: var(--phase, 0); }
.em-shisa { position: absolute; z-index: 3; left: 26%; bottom: 7%; width: 116px; height: 116px; object-fit: contain; transform-origin: bottom center; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .3)); }
.walk.moving .em-shisa { animation: walkbob .42s ease-in-out infinite alternate; }
/* 行き先の札。残り100mまでは奥に小さく立ち、近づくと手前へ大きくなる */
.em-sign { --k: calc(1 - min(var(--rem, 999), 100) / 100); position: absolute; z-index: 2; left: calc(74% + 8% * var(--k)); top: calc(34% + 10% * var(--k)); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 6px 6px 7px; border-radius: 4px;
	background: #F6EEDC; border: 2px solid #7A5A3A; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); transform: translateX(-50%) scale(calc(.86 + .3 * var(--k))); transform-origin: 50% 0; }
.em-sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: 40px; margin-left: -3px; background: linear-gradient(90deg, #6A4C30, #8A6A48); }
.em-sign .print { width: 78px; height: 54px; border-radius: 2px; }
.em-sign b { font: 700 12.5px var(--mincho); letter-spacing: .04em; white-space: nowrap; color: var(--sumi); }
.em-ai { top: auto; bottom: 34px; right: 10px; }
.whead { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: calc(var(--sat) + 2px) 8px 4px; color: #fff; }
.whead .iconbtn { color: #fff; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)); }
.whead .iconbtn.more { width: 32px; }
.wh-title { flex: 1; min-width: 0; margin: 0; text-align: center; font: 700 19px var(--mincho); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recdot { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(16, 15, 14, .55); color: #fff; font: 600 11.5px var(--gothic); letter-spacing: .06em; border: 0; }
.recdot i { width: 9px; height: 9px; border-radius: 50%; background: #E0442F; animation: rec 1.6s infinite; }
.recdot.paused i { background: #B9B0A0; animation: none; }
.wsheet { position: relative; z-index: 4; flex: none; margin-top: -26px; padding: 20px 20px calc(var(--sab) + 10px); border-radius: 26px 26px 0 0; background: var(--washi) var(--grain); box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); }
.wk { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 4px; font: 700 11px/1.7 var(--gothic); letter-spacing: .16em; }
.wk.soon { background: var(--seal); color: #FFF7EC; animation: soon 1.4s ease-in-out infinite; }
@keyframes soon { 50% { box-shadow: 0 0 0 6px rgba(200, 56, 43, .2); } }
.walk.near .arrive-btn { animation: glow 1.6s ease-in-out infinite; }
.w-name { margin: 0; font: 700 36px/1.2 var(--mincho); letter-spacing: .1em; }
.w-dist { display: flex; align-items: center; gap: 2px; margin: 6px 0 0; font: 600 16px var(--mincho); letter-spacing: .04em; color: var(--ink); }
.w-dist > span { white-space: nowrap; }
.w-gmaps { flex: none; margin-left: auto; padding: 6px 11px; border: 1.2px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 11.5px var(--gothic); letter-spacing: .02em; white-space: nowrap; }
.w-arrow { display: inline-block; margin-left: 10px; font: 700 22px/1 var(--gothic); color: var(--sumi); transform: rotate(var(--deg)); transition: transform .3s; }
.wb { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; }
.wb-face { flex: none; display: flex; flex-direction: column; align-items: center; width: 74px; }
.wb-face img { width: 70px; height: 70px; object-fit: contain; transform-origin: bottom center; }
.wb.pop .wb-face img { animation: gpop .35s ease-out; }
.walk.moving .wb-face img { animation: walkbob .42s ease-in-out infinite alternate; }
.wb-face .gname { margin: -6px 0 0; position: relative; }
.wb-bubble { position: relative; flex: 1; min-width: 0; margin-top: 4px; padding: 13px 14px; border-radius: 22px; background: var(--paper); border: 1.5px solid rgba(43, 38, 32, .22); }
.wb-bubble::before { content: ""; position: absolute; left: -8px; top: 22px; width: 13px; height: 13px; background: var(--paper); border-left: 1.5px solid rgba(43, 38, 32, .22); border-bottom: 1.5px solid rgba(43, 38, 32, .22); transform: rotate(45deg); }
.wb-bubble p { margin: 0; font: 600 16px/1.6 var(--mincho); letter-spacing: 0; }
.wb.pop .wb-bubble p { animation: fade .25s ease; }
.wb-bubble .voice { position: absolute; right: 8px; top: -9px; margin: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1.5px solid rgba(43, 38, 32, .22); }
.wb-bubble .voice svg { width: 13px; height: 13px; }
.wb.talking .wb-bubble .voice { color: #fff; background: var(--seal); border-color: var(--seal); animation: voicepulse 1.1s ease-in-out infinite; }
@keyframes voicepulse { 50% { box-shadow: 0 0 0 5px rgba(200, 56, 43, .18); } }
.walk-call { margin-top: 14px; }
.stamprow { display: flex; justify-content: space-between; width: 100%; margin: 14px 0 0; padding: 0; border: 0; background: none; }
.stamprow > span { width: 50px; height: 50px; display: grid; place-items: center; }
.sr-empty { border-radius: 50%; border: 1.6px dashed var(--line-strong); }
.sr-seal .seal { width: 50px; height: 50px; }
.wf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font: 600 12.5px var(--mincho); color: var(--ink); letter-spacing: .04em; }
.wf-link { padding: 6px 0; border: 0; background: none; font: 700 12.5px var(--mincho); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wsheet .arrive-btn { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
	.walk.moving .lane, .walk.moving .em-shisa, .walk.moving .wb-face img { animation: none; }
}
/* 順のない旅: コースの場所は並び順の線でつながず、写真の格子にする */
.spotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 0 16px; }
.sg-card { display: flex; flex-direction: column; gap: 3px; }
.sg-card .print { aspect-ratio: 1; border-radius: 10px; box-shadow: var(--lift); }
.sg-card b { margin-top: 3px; font: 700 13px var(--mincho); letter-spacing: .02em; }
.sg-card small { font: 10.5px/1.5 var(--gothic); color: var(--muted); }

.roundbtn { display: grid; place-items: center; border-radius: 50%; }
.tour .gface { animation: hop 2.8s ease-in-out infinite; }
.tour .gface.pop { animation: gpop .35s ease-out, hop 2.8s ease-in-out .35s infinite; }

/* ---------- スポットの概要（着く前に見る。旅窓の駅の画面をなぞる） ---------- */
.preview { padding-bottom: 0; }
.pv-hero { position: relative; height: 430px; overflow: hidden; background: #1A1714; }
.pv-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 8, 10, .5) 0%, rgba(8, 8, 10, 0) 24%, rgba(8, 8, 10, 0) 44%, rgba(8, 8, 10, .8) 100%); }
.pv-hero .back { position: absolute; left: 14px; top: calc(var(--sat) + 4px); z-index: 2; }
.pv-ai { top: calc(var(--sat) + 12px); bottom: auto; right: 14px; }
.pv-title { position: absolute; left: 20px; right: 20px; bottom: 44px; z-index: 2; color: #FBF6EA; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.pv-tags { display: flex; gap: 6px; margin-bottom: 10px; text-shadow: none; }
.pv-tags .tag:not(.red):not(.green):not(.strong) { background: rgba(251, 246, 234, .92); color: var(--ink); }
.pv-title h1 { margin: 2px 0 0; font: 700 38px/1.2 var(--mincho); letter-spacing: .12em; }
.pv-title p { margin: 6px 0 0; font: 500 13px/1.6 var(--gothic); letter-spacing: .04em; opacity: .85; }
.tag.red { background: var(--seal); color: #FFF7EC; }
.pv-body > .facts { margin: 12px 18px 0; }
.pv-guide { margin-top: 14px; }
.pv-tag { margin: 0 18px 0; }
.pv-tag + .details { margin-top: 10px; }
.pv-cta { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.pv-cta .ink-btn { background: var(--paper); white-space: nowrap; }
.w-name { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; background: none; text-align: left; color: var(--sumi); }
.w-more { font: 700 12px var(--gothic); font-style: normal; letter-spacing: .06em; color: var(--seal); white-space: nowrap; }
.em-sign { cursor: pointer; }
.sg-card { padding: 0; border: 0; background: none; text-align: left; color: var(--sumi); }

/* ---------- 島の地図（今のアプリ 0.44.0 の地図をなぞる） ---------- */
.mapbox { position: relative; }
/* 衛星写真（1200×1714）を幅いっぱいに置き、高さは見せる所だけ（ピンの上下に合わせて 6% 上へずらす） */
.mapframe { position: relative; height: 420px; overflow: hidden; border-radius: 16px; background: #2C4A57; }
.mapbox.tab .mapframe { height: 456px; }
.mp-pan { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1200 / 1714; transform: translateY(-7%); }
.mapbox.tab .mapframe { margin: 10px 10px 0; border-radius: 18px; }
.mp-img { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.82) brightness(1.04) contrast(.96); }
.mp-fog { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-plate { position: absolute; left: 0; top: 0; z-index: 3; padding: 18px 46px 26px 18px; color: #2B2620; pointer-events: none;
	background: radial-gradient(120% 100% at 0% 0%, rgba(245, 241, 232, .94) 0%, rgba(245, 241, 232, .86) 48%, rgba(245, 241, 232, 0) 100%); }
.mp-plate b { display: block; font: 700 32px/1.1 var(--mincho); letter-spacing: .14em; }
.mp-plate small { display: block; margin-top: 6px; font: 600 9px var(--gothic); letter-spacing: .32em; color: #6E665A; }
.mp-compass { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(250, 248, 242, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.mp-compass i { position: absolute; top: 3px; font: 700 8px var(--gothic); font-style: normal; color: #2B2620; }
.mp-compass svg { width: 24px; height: 24px; margin-top: 6px; fill: #22201C; }
.mp-all { position: absolute; right: 10px; top: 64px; z-index: 3; padding: 5px 11px; border: 0; border-radius: 999px; background: rgba(250, 248, 242, .94); color: #2B2620; font: 700 11px var(--mincho); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.mp-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mp-line line { stroke: #fff; stroke-width: 2.6; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.mpin { position: absolute; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.mpin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mtag { --mtag-x: 26px; --mtag-y: 34px; position: absolute; left: var(--mtag-x); top: var(--mtag-y); width: var(--mtag-w); height: 19px; padding: 3px 9px; border-radius: 6px; background: #FBF8F1; color: #2B2620; font: 700 10.5px/13px var(--mincho); letter-spacing: .04em; text-align: left; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.mtag::before { content: ""; position: absolute; left: 6px; top: -5px; width: 9px; height: 9px; background: inherit; transform: rotate(45deg); }
.mtag.lb, .mtag.lt { left: auto; right: var(--mtag-x); }
.mtag.lt, .mtag.rt { top: auto; bottom: var(--mtag-y); }
.mtag.lb::before { left: auto; right: 6px; }
.mtag.lt::before { left: auto; right: 6px; top: auto; bottom: -5px; }
.mtag.rt::before { top: auto; bottom: -5px; }
.mpin.sel { z-index: 4; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: #FBF8F1; box-shadow: 0 0 0 3px #9C3A28, 0 6px 16px rgba(0, 0, 0, .4); }
.mpin.sel .mtag { --mtag-x: 30px; --mtag-y: 46px; background: #9C3A28; color: #FFF7EC; }
.mpin.visited img { filter: grayscale(.4); }
.mpin.done { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid #B7412E; background: rgba(251, 248, 241, .94); color: #B7412E; font: 800 12px var(--mincho); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.mp-here { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.mp-here i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #1E7BF0; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(30, 123, 240, .22), 0 2px 4px rgba(0, 0, 0, .3); }
.mp-here b { position: absolute; right: 12px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(34, 32, 28, .86); color: #fff; font: 700 10.5px var(--mincho); white-space: nowrap; }
.mp-here img { position: absolute; left: 12px; top: -30px; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.mp-flower { position: absolute; right: 14px; bottom: 18px; z-index: 2; width: 58px; height: 58px; transform: rotate(-12deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); pointer-events: none; }
.mp-attr { position: absolute; left: 10px; bottom: 8px; z-index: 2; font: 600 9.5px var(--gothic); color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none; }
.mcard { margin: 10px 0 0; padding: 12px; border-radius: 16px; background: #FDFBF6; box-shadow: 0 4px 16px rgba(34, 32, 28, .14); }
.mapbox.tab .mcard { margin: 10px 10px 0; }
.mc-main { display: flex; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--sumi); }
.mc-main .print { flex: none; width: 100px; height: 78px; border-radius: 8px; }
.mc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-body b { font: 700 19px var(--mincho); letter-spacing: .06em; }
.mc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 12.5px var(--mincho); color: var(--ink); }
.mc-tag { padding: 1px 8px; border: 1.2px solid #9C3A28; border-radius: 999px; color: #9C3A28; font: 700 10.5px/1.6 var(--mincho); }
.mc-tag.done { border-color: var(--green); color: var(--green); }
.mc-body small { font: 12px/1.6 var(--gothic); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.mc-gmaps { padding: 4px 0; font-size: 12px; color: #9C3A28; }
.mc-go { padding: 7px 14px; border: 0; border-radius: 999px; background: #9C3A28; color: #FFF7EC; font: 700 13px var(--mincho); letter-spacing: .06em; box-shadow: 0 4px 10px rgba(156, 58, 40, .3); }
.mc-go.ghost { background: none; color: #9C3A28; border: 1.2px solid #9C3A28; box-shadow: none; }
.mcard.all { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; align-items: center; }
.mcard.all img { width: 96px; height: 96px; object-fit: contain; }
.mcard.all b { font: 700 20px var(--mincho); letter-spacing: .06em; }
.mcard.all p { margin: 6px 0 0; font: 13px/1.6 var(--gothic); }
.mcard.all .seal-btn { grid-column: 1 / -1; }
.map-sheet { padding-top: 16px; }
.closepill { padding: 7px 14px; border: 0; border-radius: 999px; background: #FDFBF6; color: #9C3A28; font: 700 13px var(--gothic); box-shadow: 0 2px 8px rgba(34, 32, 28, .14); margin-bottom: 8px; }
.ms-head { display: flex; align-items: center; gap: 12px; }
.ms-head b { font: 700 16px var(--mincho); letter-spacing: .1em; margin-bottom: 8px; }
.textbtn.omakase { display: flex; align-items: center; gap: 6px; margin: 8px auto 0; color: var(--ink); }
.textbtn.omakase svg { width: 18px; height: 18px; }
.fog-say { position: absolute; left: 8px; right: 8px; top: 132px; z-index: 5; animation: rise .35s ease; transition: opacity .6s; }
.fog-say.out { opacity: 0; pointer-events: none; }
.fog-say .gb { margin: 0; }
.fog-say .gb-face { width: 58px; height: 58px; }
.fog-say .gb-bubble { margin-bottom: 6px; }

/* ---------- 外の操作盤: 画面へ飛ぶ ---------- */
#panel { width: 340px; }
#panel h2 small { display: block; margin-top: 3px; font: 500 10.5px/1.5 var(--gothic); letter-spacing: 0; color: var(--muted); }
.p-pages { display: grid; gap: 6px; }
.p-prow { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 4px; }
.p-prow > span { padding-top: 5px; font: 600 10.5px var(--gothic); color: var(--muted); }
.p-prow .p-seg { gap: 4px; }
.p-page { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(251, 246, 234, .6); font: 600 11.5px var(--gothic); color: var(--sumi); cursor: pointer; }
.p-page.on { background: var(--sumi); color: var(--paper); border-color: var(--sumi); }
.p-jumps { display: block; margin-top: 10px; padding: 10px 12px 12px; border: 1px solid var(--line-strong); border-left: 3px solid var(--seal); border-radius: 8px; background: rgba(251, 246, 234, .55); }
.p-jumps:empty { display: none; }
.p-here { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.p-here b { font: 700 15px var(--mincho); letter-spacing: .08em; }
.p-here code { font: 10.5px ui-monospace, Menlo, monospace; color: var(--muted); }
.p-here small { font: 10.5px var(--gothic); color: var(--muted); }
.p-sub { display: flex; align-items: center; gap: 5px; margin: 10px 0 5px; font: 600 10.5px var(--gothic); color: var(--muted); }
.p-sub em { font-style: normal; }
.p-jumps .p-seg { gap: 5px; }
.p-jump { padding: 4px 9px; font-size: 11px; }

/* ---------- 旅のアンケート ---------- */
.sv-progress { position: sticky; top: calc(var(--sat) + 54px); z-index: 4; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 18px 10px; background: rgba(243, 235, 221, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); font: 600 12px var(--gothic); color: var(--ink); }
.sv-progress b { font: 700 16px var(--mincho); color: var(--seal); }
.sv-bar { display: block; height: 5px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.sv-bar b { display: block; height: 100%; border-radius: 3px; background: var(--seal); transition: width .3s; }
.sv-progress small { font: 10.5px var(--gothic); color: var(--muted); }
.sv-offline { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: #F3E2C8; border: 1px solid #D9B98A; font: 600 12.5px/1.6 var(--gothic); color: #6B4A22; }
.sv-guide { margin-top: 14px; }
.sv-q { margin: 14px 16px 0; padding: 14px 14px 16px; transition: border-color .2s; }
.sv-q.done { border-color: rgba(95, 127, 76, .45); }
.sv-q header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sv-no { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sumi); color: #fff; font: 700 13px var(--gothic); }
.sv-no svg { width: 15px; height: 15px; }
.sv-q.done .sv-no { background: var(--green); }
.sv-q h3 { flex: 1; margin: 0; font: 700 16px/1.5 var(--mincho); letter-spacing: .04em; }
.sv-req { flex: none; padding: 1px 8px; border-radius: 4px; background: var(--seal); color: #FFF7EC; font: 700 10.5px/1.7 var(--gothic); letter-spacing: .1em; }
.sv-q.done .sv-req { background: var(--fill); color: var(--muted); }
.sv-req.opt { background: none; border: 1px solid var(--line-strong); color: var(--muted); }
.sv-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sv-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 4px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 600 10.5px/1.35 var(--gothic); text-align: center; }
.sv-face img { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; background: var(--land); padding: 3px; opacity: .78; filter: saturate(.8); transition: transform .15s, opacity .15s, box-shadow .15s; }
.sv-face.on { color: var(--seal); font-weight: 800; }
.sv-face.on img { opacity: 1; filter: none; transform: scale(1.12); box-shadow: 0 0 0 3px var(--seal), 0 6px 14px rgba(200, 56, 43, .25); background: #FFF7EC; }
.sv-opts { display: grid; gap: 8px; }
.sv-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #FFFCF4; text-align: left; font: 600 14px/1.5 var(--mincho); color: var(--sumi); }
.sv-opt i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.6px solid var(--line-strong); border-radius: 6px; color: transparent; font-style: normal; }
.sv-opt.radio i { border-radius: 50%; }
.sv-opt i svg { width: 15px; height: 15px; }
.sv-opt.on { border-color: var(--seal); background: #FFF3EE; }
.sv-opt.on i { border-color: var(--seal); background: var(--seal); color: #fff; }
.sv-opt.excl { margin-top: 6px; }
.sv-text { display: block; width: 100%; min-height: 104px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #FFFCF4; font: 500 14.5px/1.7 var(--gothic); color: var(--sumi); resize: vertical; }
.sv-text:focus { outline: 2px solid rgba(200, 56, 43, .35); border-color: var(--seal); }
.sv-count { display: block; margin-top: 4px; text-align: right; font: 11px var(--gothic); color: var(--muted); }
.survey .ctabar { text-align: center; }
.sv-later { margin-top: 4px; }

.sv-group { margin: 26px 18px 0; }
.sv-note { margin: -4px 0 10px 36px; font: 12px/1.6 var(--gothic); color: var(--muted); }
.sv-opts.chips { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sv-opts.chips .sv-opt { justify-content: center; padding: 10px 4px; font-size: 13.5px; }
.sv-opts.chips .sv-opt i { display: none; }
.sv-caution { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: #F6EBDD; font: 11.5px/1.6 var(--gothic); color: #6B4A22; }
.cs-link { display: inline; padding: 0 0 0 6px; font-size: 12px; color: var(--seal); text-decoration: underline; text-underline-offset: 3px; }
.cs-read { padding: 4px 0 0; margin-left: 8px; font-size: 12px; color: var(--seal); text-decoration: underline; }

/* ---------- 個人情報の取り扱いと同意 ---------- */
.consent-sheet .cs-body { flex: 1; overflow-y: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.cs-body p { margin: 0; font: 500 14px/1.85 var(--gothic); color: var(--sumi); }
.cs-body .cs-lead { font: 600 14.5px/1.9 var(--mincho); }
.cs-body p + p { margin-top: 10px; }
.cs-ret { margin-top: 10px !important; padding: 8px 10px; border-left: 3px solid var(--seal); background: var(--paper); }
.cs-items { margin: 12px 0 0; padding: 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.cs-items dt { margin-top: 10px; font: 700 13.5px var(--mincho); letter-spacing: .04em; }
.cs-items dd { margin: 3px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 13px/1.75 var(--gothic); }
.cs-items dd:last-child { border-bottom: 0; }
/* 〔　〕は運営者が決める所の印（試作だけ。アプリには出ない） */
.cs-body mark { background: #FBE3C2; color: #8A3B12; padding: 0 2px; border-radius: 3px; }
.cs-foot { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cs-foot .ink-btn { white-space: nowrap; }
.cs-foot.on { display: block; }
.cs-foot.on .note { margin: 0 0 8px; }
.consent-sheet > .ink-btn.block { margin-top: 8px; }

/* 旅のしおり（紹介）。コースの説明と、場所ごとの簡単な紹介を横にめくる紙のページ。旅の最初（切符のあと）と「コースの紹介を読む」で同じもの */
.shiori { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--washi) var(--grain); color: var(--sumi); animation: fade .45s; }
.sheet.shiori-sheet { height: calc(100% - var(--sat) - 6px); max-height: none; padding: 0; overflow: hidden; background: var(--washi) var(--grain); }
.shiori-sheet .shiori { position: relative; inset: auto; z-index: auto; height: 100%; background: none; }
.sh-top { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 4px) 16px 10px; border-bottom: 1px solid var(--line); }
.shiori.read .sh-top { padding-top: 22px; }
.sh-label { display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--mincho); letter-spacing: .16em; color: var(--seal); }
.sh-label svg { width: 16px; height: 16px; }
.sh-dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.sh-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width .25s, background .25s; }
.sh-dots i.on { width: 18px; background: var(--seal); }
.sh-x { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); font: 600 12px var(--mincho); letter-spacing: .08em; }
.sh-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sh-page { flex: 0 0 100%; min-width: 0; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; scrollbar-width: none; padding-bottom: 22px; }
.sh-in { padding: 0 18px; }
.sh-hero { position: relative; height: 196px; overflow: hidden; border-bottom: 1px solid var(--line); }
.sh-hero img { width: 100%; height: 100%; object-fit: cover; }
.sh-kicker { display: inline-block; margin: 18px 0 8px; padding: 1px 10px; border: 1px solid var(--seal); border-radius: 3px; font: 700 11px/1.7 var(--gothic); letter-spacing: .16em; color: var(--seal); }
.sh-title { margin: 0; font: 700 20px/1.55 var(--mincho); letter-spacing: .06em; }
.sh-lead { margin: 8px 0 0; font: 600 15px/1.8 var(--mincho); color: var(--ink); }
.sh-course .facts { margin: 14px 0 0; }
.sh-say { display: flex; align-items: flex-end; gap: 6px; width: 100%; margin: 14px 0 0; padding: 0; border: 0; background: none; text-align: left; }
.sh-say img { flex: none; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2)); animation: gpop .35s ease-out; }
.sh-bub { position: relative; flex: 1; min-width: 0; margin-bottom: 12px; padding: 9px 14px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--lift); }
.sh-bub::before { content: ""; position: absolute; left: -7px; bottom: 18px; width: 12px; height: 12px; background: var(--paper); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.sh-meta { display: flex; align-items: center; }
.sh-meta .gname { margin: 0; }
.sh-meta .voice { margin: 0 0 0 6px; }
.sh-meta em { margin-left: auto; font: 600 11px var(--gothic); font-style: normal; color: var(--muted); }
.sh-line { display: block; margin-top: 6px; font: 500 14.5px/1.75 var(--gothic); }
.sh-bub .gnext { right: 12px; bottom: 3px; color: var(--muted); }
.sh-course .mist-title { margin: 26px 0 12px; font-size: 15px; }
.sh-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sh-ix { display: flex; flex-direction: column; gap: 5px; padding: 5px 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-align: left; }
.sh-ix .print { aspect-ratio: 4 / 3; border-radius: 6px; }
.sh-ix b { margin: 0 3px; font: 700 12px/1.35 var(--mincho); }
.sh-free { margin: 10px 0 0; text-align: center; font: 12px var(--gothic); color: var(--muted); }
/* 場所のページ（旅窓の駅の画面: 白い縁の写真に、縦書きの名前の札） */
.sh-photo { position: relative; margin: 18px 16px 0; padding: 8px; background: #fff; box-shadow: 0 6px 18px rgba(34, 32, 28, .16); transform: rotate(-.6deg); }
.sh-photo .print { height: 250px; border-radius: 2px; }
.sh-tz { position: absolute; top: -8px; right: 20px; font-size: 19px; padding: 12px 7px; }
.sh-photo .sh-ai { right: 16px; bottom: 16px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-spot .sh-lead { margin-top: 12px; font-size: 17px; }
.sh-text { margin: 8px 0 0; font: 14px/1.9 var(--gothic); }
.sh-spot .details { margin: 14px 0 0; }
.sh-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 16px calc(var(--sab) + 10px); border-top: 1px solid var(--line); background: var(--washi); }
.sh-foot .seal-btn { padding: 13px 10px; font-size: 16px; letter-spacing: .12em; }
.sh-foot .ink-btn { padding: 12px 8px; white-space: nowrap; letter-spacing: .02em; }

/* 旅のおわり。エンディング（夕日の版画の上で、シーサーが1行ずつ）と、ふりかえりのページ */
.screen.looking > .skipc { position: absolute; z-index: 3; }
.ef-ai { top: calc(var(--sat) + 10px); left: 14px; right: auto; bottom: auto; }
.ef-head { margin-top: calc(var(--sat) + 54px); text-align: center; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.ef-head span { font: 700 12px var(--gothic); letter-spacing: .3em; color: #FFD9A0; }
.ef-head h1 { margin: 8px 0 6px; font: 700 30px var(--mincho); letter-spacing: .16em; }
.ef-head p { margin: 0; font: 600 13px var(--gothic); letter-spacing: .08em; opacity: .88; }
.ef-go { margin-top: 14px; }
.er-hero { position: relative; margin: 6px 16px 0; height: 190px; }
.er-hero .print { height: 100%; border-radius: 14px; }
.er-hero::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(12, 10, 8, .72)); }
.er-title { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; color: #FBF6EA; }
.er-title .clabel { color: #FFD9A0; }
.er-title h1 { margin: 4px 0 2px; font: 700 26px var(--mincho); letter-spacing: .14em; }
.er-title small { font: 600 12px var(--gothic); opacity: .85; }
.er-facts { margin: 12px 16px 0; }
.er-facts span { font-size: 13.5px; }
.er-list { list-style: none; margin: 0 16px; padding: 2px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--lift); }
.er-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.er-row:last-child { border-bottom: 0; }
.er-row .print { flex: none; width: 58px; height: 58px; border-radius: 8px; }
.er-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.er-body b { font: 700 15px var(--mincho); letter-spacing: .04em; }
.er-body small { font: 12px var(--gothic); color: var(--muted); }
.er-ans { align-self: flex-start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #F6EBDD; font: 600 11px/1.6 var(--gothic); color: #8A5A1E; }
.er-seal { flex: none; width: 58px; height: 58px; }
.er-seal.empty { display: grid; place-items: center; }
.er-seal.empty i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--line-strong); font: 700 14px var(--mincho); font-style: normal; color: rgba(43, 38, 32, .22); }
.er-row.not .print { filter: grayscale(.8); opacity: .55; }
.er-row.not b { color: var(--muted); }
.er-guide { margin-top: 22px; }

/* アンケートをページに分ける。やんばるハッピーアンケートの設問（0〜10・一覧から選ぶ・前の答えで出す） */
.sv-page { font: 700 12.5px var(--mincho); letter-spacing: .08em; color: var(--seal); }
.sv-gnote { margin: -4px 18px 0; font: 12px/1.65 var(--gothic); color: var(--muted); }
.sv-unconf { display: inline-block; margin: -4px 0 10px 36px; padding: 1px 8px; border-radius: 4px; background: #F6EBDD; font: 600 10.5px/1.7 var(--gothic); color: #8A5A1E; }
.sv-nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.sv-n { padding: 9px 0; border: 1px solid var(--line-strong); border-radius: 8px; background: #FFFCF4; font: 700 13px var(--gothic); color: var(--sumi); }
.sv-n.on { border-color: var(--seal); background: var(--seal); color: #fff; }
.sv-nps-ends { display: flex; justify-content: space-between; margin-top: 6px; font: 10.5px var(--gothic); color: var(--muted); }
.sv-select { position: relative; display: block; }
.sv-select::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sv-select select { width: 100%; padding: 12px 36px 12px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #FFFCF4; font: 600 15px var(--mincho); color: var(--sumi); appearance: none; }
.sv-foot.two { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
.sv-foot.one { display: grid; }
.sv-foot .ink-btn { white-space: nowrap; letter-spacing: .02em; }
.sv-foot .sv-later { grid-column: 1 / -1; }

/* トンマナの見本（画面の右）。幅が足りないときは出さない */
#tonmana { flex: none; width: 330px; max-height: 844px; overflow-y: auto; scrollbar-width: thin; padding: 4px 6px 24px 2px; color: var(--sumi); }
#tonmana h1 { margin: 0 0 8px; font: 700 26px/1.2 var(--mincho); letter-spacing: .08em; }
#tonmana h1 small { display: block; margin-top: 4px; font: 600 11.5px/1.5 var(--gothic); letter-spacing: .04em; color: var(--muted); }
#tonmana h2 { margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); font: 700 13px var(--mincho); letter-spacing: .16em; }
#tonmana h3:not(.mist-title) { margin: 12px 0 6px; font: 700 11.5px var(--gothic); letter-spacing: .1em; color: var(--muted); }
.tm-rules { margin: 0; padding-left: 16px; font: 11.5px/1.65 var(--gothic); }
.tm-rules li { margin-bottom: 3px; }
.tm-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tm-sw { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(251, 246, 234, .7); }
.tm-sw i { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-strong); }
.tm-sw b { font: 700 12.5px var(--mincho); letter-spacing: .04em; }
.tm-sw small { font: 10px/1.35 var(--gothic); color: var(--muted); }
.tm-sw code { grid-column: 1 / -1; margin-top: 3px; font: 9.5px ui-monospace, Menlo, monospace; color: var(--muted); word-break: break-all; }
.tm-type p { margin: 0 0 10px; }
.tm-type small { display: block; margin-top: 2px; font: 10px var(--gothic); letter-spacing: 0; color: var(--muted); }
.tm-m1 { font: 700 26px var(--mincho); letter-spacing: .14em; }
.tm-m2 { font: 600 15px/1.8 var(--mincho); }
.tm-g1 { font: 14px/1.85 var(--gothic); }
.tm-g2 { font: 12px/1.65 var(--gothic); color: var(--muted); }
.tm-row { display: flex; align-items: center; gap: 8px; }
.tm-row.wrap { flex-wrap: wrap; gap: 6px; }
.tm-row .seal-btn { padding: 11px 16px; font-size: 15px; }
.tm-row .ink-btn { padding: 10px 12px; font-size: 14px; }
.tm-row .spot-tag, .tm-row .first-tag, .tm-row .sh-kicker, .tm-row .gname, .tm-row .sv-unconf { margin: 0; }
.tm-cap { margin: 6px 0 0; font: 10.5px/1.5 var(--gothic); color: var(--muted); }
#tonmana .gb { margin: 0; }
.tm-mist { margin: 4px 0 8px; font-size: 14px; }
.tm-marks { align-items: flex-start; gap: 14px; padding-top: 6px; }
.tm-seal { width: 78px; }
.tm-tz { font-size: 16px; }
.tm-photo { width: 120px; padding: 5px; background: #fff; box-shadow: 0 4px 12px rgba(34, 32, 28, .16); transform: rotate(-1.2deg); }
.tm-photo .print { height: 84px; border-radius: 2px; }
.tm-dark { position: relative; overflow: hidden; border-radius: 14px; background: #2A2520; }
.tm-go { display: grid; place-items: center; padding: 22px 26px; }
.tm-go .go-card { min-width: 0; width: 100%; padding: 16px 18px 18px; }
.tm-go .go-title { font-size: 24px; }
.tm-photo-ui { height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; }
.tm-photo-ui img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-photo-ui::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); }
.tm-photo-ui > :not(img) { position: relative; z-index: 1; }
.tm-photo-ui .recpill { align-self: flex-end; margin: 0; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tm-glass { padding: 9px 12px; border-radius: 12px; color: var(--on-photo); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tm-glass b { display: block; font: 700 17px var(--mincho); letter-spacing: .1em; }
.tm-glass small { font: 11.5px var(--gothic); opacity: .85; }
@media (max-width: 1180px) { #tonmana { display: none; } }

/* シーサーの案内の UX（計画の段階G0）。自動で進む・話している印・もう一度・これまでの話・44pt の操作・すぐ話し始める到着 */
.tour .gface { animation: none; }
.tour .gface.pop { animation: gpop .35s ease-out; }
.gtools { position: absolute; right: 14px; top: 16px; z-index: 2; display: flex; gap: 10px; }
.gtool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #fff; font: 600 10.5px var(--gothic); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.gtool span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(16, 15, 14, .55); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gtool svg { width: 20px; height: 20px; }
.tour .gbox { padding-top: 30px; }
.ghandle { position: absolute; left: 50%; top: 2px; z-index: 1; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: rgba(251, 246, 234, .72); font: 600 11px var(--gothic); letter-spacing: .08em; white-space: nowrap; }
.ghandle::before { content: ""; position: absolute; left: 50%; top: 0; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.ghandle i { width: 7px; height: 7px; border-left: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: translateY(2px) rotate(45deg); }
.tour.hist .ghandle i { transform: translateY(-2px) rotate(225deg); }
.gsay { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--gothic); color: rgba(251, 246, 234, .7); white-space: nowrap; }
.gsay i { display: none; width: 15px; height: 12px; background: linear-gradient(currentColor, currentColor) 0 50% / 3px 40% no-repeat, linear-gradient(currentColor, currentColor) 6px 50% / 3px 90% no-repeat, linear-gradient(currentColor, currentColor) 12px 50% / 3px 60% no-repeat; }
.gsay.on { color: #FFB89E; }
.gsay.on i { display: block; animation: saybars .7s ease-in-out infinite alternate; }
@keyframes saybars { to { background-size: 3px 90%, 3px 35%, 3px 80%; } }
.gsay.wait i { display: block; opacity: .45; }
.gsay.warn { color: #FF9C73; }
.gprog { position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, .12); opacity: 0; transition: opacity .2s; }
.gprog.run { opacity: 1; }
.gprog.run::after { content: ""; position: absolute; inset: 0; background: rgba(255, 184, 158, .85); transform-origin: left; transform: scaleX(0); animation: sayfill var(--dur) linear forwards; animation-delay: calc(var(--el) * -1); }
@keyframes sayfill { to { transform: scaleX(1); } }
.gwarn { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 156, 115, .12); border: 1px solid rgba(255, 156, 115, .35); }
.gwarn p { margin: 0 0 8px; font: 600 13px/1.6 var(--gothic); color: #FFD2BF; }
.gwarn p:last-child { margin-bottom: 0; }
.tour.hist .gpanel { padding-top: 14px; }
.ghist { margin: 0 0 24px; max-height: 360px; overflow-y: auto; scrollbar-width: none; padding: 14px 16px 6px; border-radius: 18px; color: #FBF6EA; background: rgba(16, 15, 14, .74); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: fade .25s; }
.ghist b { display: block; margin-bottom: 6px; font: 700 13px var(--mincho); letter-spacing: .14em; color: #FFD9A0; }
.ghist ol { margin: 0; padding: 0; list-style: none; }
.ghist li { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.ghist li:first-child { border-top: 0; }
.ghist p { margin: 0; font: 13.5px/1.75 var(--gothic); color: rgba(251, 246, 234, .78); }
.ghist p.mine { margin: 4px 0; font-size: 12px; color: rgba(251, 246, 234, .55); }
.ghist li.now p { color: #fff; }
.ar-auto { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 220px; margin: 14px auto 8px; font: 600 13px var(--mincho); letter-spacing: .12em; color: #FFD9A0; }
.ar-auto i { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .18); }
.ar-auto i::after { content: ""; position: absolute; inset: 0; background: #FFB89E; transform-origin: left; transform: scaleX(0); animation: sayfill 2s linear forwards; }


/* ガイドの形（ガイド感の研究）。写真を話している物へ寄せ、朱の輪と札で指す（旅窓の look と朱の輪）。めぐるは見どころの点と「着いたら押す」 */
.tour .pan { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .9s cubic-bezier(.3, .7, .3, 1); will-change: transform; }
.tour .pan img { max-width: none; object-fit: fill; }
.gring { position: absolute; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 3px solid #EF5A3C; box-shadow: 0 0 0 4px rgba(239, 90, 60, .22), 0 0 18px rgba(239, 90, 60, .55); opacity: 0; pointer-events: none; }
.gring.on { opacity: 1; transition: opacity .35s .75s; animation: ringpulse 1.6s ease-in-out .9s infinite; }
@keyframes ringpulse { 50% { box-shadow: 0 0 0 11px rgba(239, 90, 60, .1), 0 0 28px rgba(239, 90, 60, .7); } }
.glabel { position: absolute; margin: -54px 0 0 30px; padding: 3px 10px; border-radius: 999px; transform-origin: left bottom; background: rgba(16, 15, 14, .7); border: 1px solid rgba(239, 90, 60, .7); color: #fff; font: 700 12px var(--gothic); letter-spacing: .06em; white-space: nowrap; opacity: 0; transition: opacity .35s .85s; pointer-events: none; }
.gring.on + .glabel { opacity: 1; }

/* ---------- 縦書きの看板（白。大きさは字の大きさ em に合わせる） ---------- */
.tm-tz { position: relative; }
.tanzaku { padding: .95em .5em 2.2em; border: 0; border-radius: .12em; color: var(--sumi); letter-spacing: .2em; background: var(--grain), linear-gradient(180deg, #FFFEFA, #F7F1E3); box-shadow: 0 0 0 1px rgba(107, 90, 62, .55), inset 0 0 0 .17em #FFFEFA, inset 0 0 0 calc(.17em + 1px) rgba(107, 90, 62, .5), 0 8px 20px rgba(0, 0, 0, .28); }
.tanzaku::after { content: ""; position: absolute; left: 50%; bottom: .66em; width: .74em; height: .74em; margin-left: -.37em; border-radius: .14em .06em .12em .05em; background: radial-gradient(circle at 30% 25%, #D8493A, var(--seal) 60%, #A92B20); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); transform: rotate(-5deg); }

/* ---------- 最初の行き先（儀式の、しおりと出発の札の間） ---------- */
.fp-body { flex: 1; overflow-y: auto; padding: 6px 16px 18px; }
.fp-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.fp-row { display: grid; grid-template-columns: 64px 1fr 26px; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper); color: var(--sumi); text-align: left; transition: border-color .2s, box-shadow .2s; }
.fp-row .print { width: 64px; height: 48px; border-radius: 6px; }
.fp-t b { display: block; font: 700 16px/1.4 var(--mincho); letter-spacing: .06em; }
.fp-t small { display: block; margin-top: 2px; font: 12px/1.5 var(--gothic); color: var(--muted); }
.fp-t .tag { margin-top: 4px; }
.fp-mark { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: transparent; }
.fp-mark svg { width: 14px; height: 14px; }
.fp-row.on { border-color: var(--seal); box-shadow: 0 0 0 2px rgba(200, 56, 43, .15); }
.fp-row.on .fp-mark { background: var(--seal); border-color: var(--seal); color: #fff; }

/* ---------- ホームの「この旅で出会う場所」（比べる「出会う場所」） ---------- */
.places.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; margin: 0 18px; }
.pl-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--sumi); }
.pl-item .print { width: 100%; aspect-ratio: 1; border-radius: 12px; box-shadow: var(--lift); }
.pl-item b { font: 700 12.5px/1.35 var(--mincho); letter-spacing: .04em; text-align: center; }
.pl-seal { position: absolute; z-index: 1; right: -5px; top: -7px; width: 44px; height: 44px; padding: 2px; border-radius: 50%; background: rgba(251, 246, 234, .92); box-shadow: 0 2px 6px rgba(34, 32, 28, .18); }
#p-heading { margin-top: 8px; align-items: center; }
#p-heading .p-note { margin: 0 4px 0 0; }
.wb-ask { display: flex; gap: 8px; margin-top: 10px; }
.wb-ask .seal-btn, .wb-ask .ink-btn { flex: 1; padding: 9px 10px; font-size: 14px; }

/* ---------- 写真をめくる（ADR-0100。代表 → ほかの写真。点と名前は画面ごとに置く） ---------- */
.bg::after { pointer-events: none; }
.pf-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.pf-track::-webkit-scrollbar { display: none; }
.pf-track.drag { scroll-snap-type: none; cursor: grabbing; }
.pf-track > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; -webkit-user-drag: none; user-select: none; }
.bg > .pf-track, .pv-hero > .pf-track { position: absolute; inset: 0; }
.pf-foot { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.pf-cap { padding: 3px 10px; border-radius: 999px; font: 600 12px/1.5 var(--gothic); letter-spacing: .04em; color: #FFFDF7; background: rgba(16, 15, 14, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-cap.none { visibility: hidden; }
.pf-dots { display: flex; gap: 6px; margin-left: auto; }
.pf-dots button { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .55); transition: width .25s, background-color .25s; }
.pf-dots button::before { content: ""; position: absolute; inset: -10px -3px; }
.pf-dots button.on { width: 18px; background: #FFFDF7; }
.tbottom .pf-foot { margin-bottom: 12px; }
.pv-title .pf-foot { margin-bottom: 12px; text-shadow: none; }
.sh-photo .pf-foot { padding: 8px 2px 0; }
.sh-photo .pf-cap { padding: 0; color: var(--sumi); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 600 13px/1.5 var(--mincho); }
.sh-photo .pf-dots button { background: rgba(34, 32, 28, .22); }
.sh-photo .pf-dots button.on { background: var(--seal); }
.sh-photo:has(.pf-foot) .sh-ai { bottom: 48px; }
/* ガイドで行の写真が替わるとき、前の写真を上に重ねて0.4秒で消す */
.tour .pan-old { transition: opacity .4s ease; pointer-events: none; }
.tour .pan-old.out { opacity: 0; }
/* 旅の一時停止（アプリ 0.46.0 の形を試作に足した）: 景色の札・名前・「行き先を変える」は薄くして押せない。「到着しました」の代わりの文は角ゴ 16/24 */
.w1.paused .em-sign { opacity: .45; pointer-events: none; }
.w1 .w-name:disabled, .w1 .wf-link:disabled { opacity: .45; }
.w-frozen { margin: 10px 0 0; padding: 13px 0; font: 700 16px/24px var(--gothic); text-align: center; color: var(--ink); }

/* ---------- 段階5: 試作に無かった観光客の画面（設計 §9.1） ---------- */
.home-others { margin-top: 28px; }
.home-others .course-card { margin-bottom: 10px; }
.home-others .course-card > svg { flex: none; width: 18px; color: var(--muted); }
.home-others .cc-body small:first-child { letter-spacing: .08em; }
.home-others .tag { font-style: normal; }
.notice-line { display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); min-height: 48px; margin: 10px 20px 0; padding: 8px 2px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; color: var(--seal); text-align: left; font: 600 13px var(--gothic); }
.notice-line span { flex: 1; }
.notice-line svg { flex: none; width: 19px; height: 19px; }

/* 位置情報の確認。5状態で並びは同じ、下の1文と主役だけが替わる。 */
.gate-screen { display: flex; flex-direction: column; padding: calc(var(--sat) + 18px) 24px calc(var(--sab) + 16px); }
.gate-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.gate-brand img { width: 34px; height: 34px; object-fit: contain; }
.gate-brand b { font: 700 20px var(--gothic); letter-spacing: .04em; }
.gate-body { display: flex; flex: 1; min-height: 0; flex-direction: column; padding-top: 34px; }
.gate-body h1 { margin: 0; font: 700 32px/1.45 var(--mincho); letter-spacing: .06em; }
.gate-shisa { width: 190px; height: 190px; margin: 18px auto 12px; object-fit: contain; }
.gate-body p { margin: 0; font: 500 15px/1.9 var(--gothic); color: var(--muted); }
.gate-body small { display: block; margin-top: 12px; font: 500 12px/1.7 var(--gothic); color: var(--muted); }
.gate-foot { flex: none; padding-top: 12px; }

/* 設定からだけ開く5ページの使い方。 */
.howto-screen { display: flex; flex-direction: column; padding: calc(var(--sat) + 4px) 22px calc(var(--sab) + 12px); }
.howto-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.howto-brand { display: flex; align-items: center; gap: 7px; font: 700 14px var(--gothic); letter-spacing: .08em; }
.howto-brand img { width: 26px; height: 26px; object-fit: contain; }
.howto-body { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.howto-body h1 { margin: 14px 0 10px; font: 700 31px/1.45 var(--mincho); letter-spacing: .06em; }
.howto-body > p { margin: 12px 0 0; font: 500 14px/1.85 var(--gothic); color: var(--muted); }
.howto-art { display: grid; place-items: center; height: 270px; min-height: 0; }
.howto-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; transform: rotate(-1deg); }
.howto-card .print { flex: none; width: 112px; height: 96px; }
.howto-card div { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.howto-card b { font: 700 17px var(--mincho); }
.howto-card small { font: 12px var(--gothic); color: var(--muted); }
.howto-picture { position: relative; width: 100%; height: 230px; overflow: hidden; border-radius: var(--card-radius); box-shadow: var(--lift); color: var(--on-photo); }
.howto-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(16, 15, 14, .75)); }
.howto-picture img { width: 100%; height: 100%; object-fit: cover; }
.howto-picture .tag { position: absolute; left: 14px; bottom: 48px; z-index: 1; background: var(--seal); color: #fff; }
.howto-picture b { position: absolute; left: 14px; bottom: 16px; z-index: 1; font: 700 21px var(--mincho); letter-spacing: .08em; }
.howto-stamp { position: relative; width: 100%; height: 250px; }
.howto-stamp > .seal { position: absolute; left: 14px; bottom: 14px; width: 126px; height: 126px; }
.howto-stamp > img { position: absolute; right: 4px; top: 0; width: 152px; height: 152px; object-fit: contain; }
.howto-stamp > span { position: absolute; right: 4px; bottom: 22px; width: 210px; padding: 14px; text-align: center; font: 700 15px/1.6 var(--mincho); }
.howto-photo { width: 100%; }
.howto-photo > .print { height: 172px; }
.howto-photo .howto-bubble { margin: -26px 0 0; position: relative; }
.howto-photo .howto-bubble .gb-face { width: 66px; height: 66px; }
.howto-photo .howto-bubble .gb-bubble { margin-bottom: 4px; padding: 8px 11px; }
.howto-photo .howto-bubble .gb-bubble p { font-size: 12px; line-height: 1.6; }
.howto-finish { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; padding: 18px 12px; }
.howto-finish span { display: grid; place-items: center; }
.howto-finish .seal { width: 94px; height: 94px; }
.howto-foot { flex: none; }
.howto-progress { display: flex; align-items: center; margin-bottom: 8px; }
.howto-progress > span { display: flex; flex: 1; align-items: center; justify-content: center; gap: 9px; }
.howto-progress i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.howto-progress i.on { background: var(--seal); }
.howto-progress small { margin-left: 5px; font: 11px var(--gothic); color: var(--muted); }

/* 設定 › 撮影と保存の設定。 */
.settings-more .gb { margin-top: 18px; }
.settings-copy { margin: 0 16px; padding: 14px 16px; }
.settings-copy p { margin: 0; font: 500 13px/1.75 var(--gothic); }
.settings-copy p + p { margin-top: 8px; color: var(--muted); }

/* 失敗のカードと一言（ADR-0095）。 */
.notice-backdrop { align-items: center; justify-content: center; padding: calc(var(--sat) + 36px) 20px calc(var(--sab) + 24px); }
.notice-card { position: relative; width: 100%; padding: 62px 24px 12px; text-align: center; }
.notice-card > img { position: absolute; left: 50%; top: -62px; width: 124px; height: 124px; margin-left: -62px; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(34, 32, 28, .2)); }
.notice-card h2 { margin: 0; font: 700 25px/1.55 var(--mincho); letter-spacing: .05em; }
.notice-copy { margin: 8px 0 16px; }
.notice-copy p { margin: 0; font: 500 14px/1.7 var(--gothic); color: var(--muted); }
.notice-copy small { display: block; margin-top: 8px; font: 500 10px/1.5 ui-monospace, monospace; color: var(--muted); }
.notice-card > .textbtn { display: block; width: 100%; min-height: 44px; color: var(--seal); }

/* iPhoneで撮る・撮った写真。OSのカメラを、試作の中では同じ操作順で再現する。 */
.phone-camera { background: #0c0b0a; color: #fff; }
.phone-view { position: absolute; inset: 0; }
.phone-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 22%, transparent 60%, rgba(0, 0, 0, .75)); }
.phone-view img { width: 100%; height: 100%; object-fit: cover; }
.phone-camera > header { position: relative; z-index: 2; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: calc(var(--sat) + 7px) 14px 0; text-align: center; }
.phone-camera > header b { font: 700 16px var(--mincho); letter-spacing: .1em; }
.camera-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font: 300 30px/1 var(--gothic); }
.phone-camera > footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 28px 20px calc(var(--sab) + 16px); }
.camera-mode { margin-bottom: 12px; color: #ffd66b; font: 600 13px var(--gothic); }
.shutter { display: grid; place-items: center; width: 76px; height: 76px; padding: 4px; border: 3px solid #fff; border-radius: 50%; background: transparent; }
.shutter i { width: 62px; height: 62px; border-radius: 50%; background: #fff; }
.phone-camera > footer > small { margin-top: 14px; font: 500 11px var(--gothic); color: rgba(255, 255, 255, .78); }
.captured .phone-view img { object-fit: contain; }
.captured-actions { align-items: stretch !important; padding-top: 84px !important; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9) 30%); }
.captured-actions p { margin: 0 0 14px; font: 500 12px/1.7 var(--gothic); text-align: center; color: rgba(255, 255, 255, .82); }
.captured-actions .textbtn { color: #fff; }