/* 丸ゴシック Mochiy Pop One（Google Fonts・OFL・商用可）をローカル同梱（オフライン現場でも確実に表示）。
   ボタンで使う文字だけにサブセット化した woff2（約1.9KB）。CDNは使わない。 */
@font-face {
    font-family: 'Mochiy Pop One';
    src: url('../assets/fonts/MochiyPopOne-subset.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
/* 再利用できる“型”：このクラスを付けるだけでボタンが丸字書体になる（u-font-luc と同じ流儀の命名）。 */
.u-font-mochiy {
    font-family: 'Mochiy Pop One', sans-serif;
}

.validation-error-text {
    color: red;
    position:relative;
    text-align:left;
    width:100%;
    font-size: 1.4rem;
    font-weight: 500;
}
.js-modal--cards .splide__track::before {
    border: none;
    background: none;
}
.js-modal .splide__track::before {
    border: none;
    background: none;
}
/* 閉じた（aria-hidden=true）モーダルは、is-open除去の600ms余韻の間も含めポインタを一切食わない。
   ＝閉じた瞬間に下のペット丸ストリップの操作（スクロール/プラス）を奪わない。開く時(aria-hidden=false)は通常どおり。 */
.js-modal[aria-hidden="true"] {
    pointer-events: none;
}
/* IN中（is-progress）の「光る枠」は style.css の .is-progress::before（position:absolute; inset:-.3rem; z-index:1）で
   カード全面に重なる透明な板。既定 pointer-events:auto のため、その下のペット丸ストリップのスクロール/タップを奪っていた。
   見た目（光るアニメ）は変えず、操作だけ素通りさせる。style.css は触らず、後勝ち＆高詳細度の上書きでポインタを解放。 */
.p-in-out__task-card.is-progress::before {
    pointer-events: none;
}

/* ペット丸アイコンストリップ（予約詳細 OutMap のお名前（種類）欄）
   3頭フル＋4頭目が半分のぞく幅（丸幅 ≒ コンテナ幅 ÷ 3.5）。横スクロールバーは非表示。 */
.p-in-out__pet-strip {
    display: flex;
    gap: 3.5%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 1.2rem; /* A: 「お名前（種類）：」ラベルと写真の丸の間を少し広げる（旧 padding-top 6px → 約12px） */
    padding: 0;         /* 旧 margin-bottom:22px は廃止。下の区切りは標準ルール（合鍵受取側のborder-top）に委ねる */
}
/* B: ストリップ(div)が .item + .item の隣接セレクタを分断して、次の項目（合鍵受取/同行者）のborder-topが
   消えていた。ストリップ直後の項目に、他ブロック間とまったく同じ区切り線・前後余白を付けてリズムを揃える。 */
.p-in-out__pet-strip + .p-in-out__task-card-item {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid #957e6f;
}
.p-in-out__pet-strip::-webkit-scrollbar {
    display: none;
}
.p-in-out__pet-item {
    flex: 0 0 auto;
    width: 26%;
    text-align: center;
}
.p-in-out__pet-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfaf4;
    cursor: pointer; /* 未登録・登録済みどちらもタップで写真選択（差し替え）を起動 */
}
/* 登録済み（写真）は丸でクリップ。未登録は右下プラスがはみ出すので clip しない（下記 --empty）。 */
.p-in-out__pet-circle:not(.p-in-out__pet-circle--empty) {
    overflow: hidden;
}
.p-in-out__pet-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 未登録：破線の丸。右下プラスを切らないため overflow:visible */
.p-in-out__pet-circle--empty {
    border: 2px dashed #e0c4b2;
    background: #fdfaf4;
    overflow: visible;
}
/* 中央：カメラのイラスト（うっすい茶・インラインSVG）。丸の約1/3 */
.p-in-out__pet-camera {
    width: 36%;
    height: auto;
    color: #dcc4af;
}
/* 右下：テラコッタのプラス（白縁・割合34%・はみ出して切れない）。白い＋は擬似要素の棒で割合描画 */
.p-in-out__pet-plus {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #f05a24;
    border: 2.5px solid #fff;
    box-sizing: border-box;
}
.p-in-out__pet-plus::before,
.p-in-out__pet-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 1px;
}
.p-in-out__pet-plus::before { width: 52%; height: 13%; }
.p-in-out__pet-plus::after { width: 13%; height: 52%; }
.p-in-out__pet-name {
    margin-top: 5px;
    font-weight: bold;
    font-size: .86em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p-in-out__pet-kind {
    font-size: .74em;
    color: #9a8b7e;
}
.js-pet-add {
    cursor: pointer;
}

/* ===== ペット写真：丸クロップのモーダル ===== */
.js-cropper,
.js-photoget {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.js-cropper.is-open,
.js-photoget.is-open {
    display: block;
}
.js-cropper__backdrop,
.js-photoget__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* ゲット演出（決定後）の背景：決定直後はクロップから続くぼかし(上の共通ルール)が見えている状態から、
   短く（約0.25秒）ふわっと opacity フェードで晴らす（is-cleared 付与で opacity:0）。
   ※クロップ作業中の .js-cropper__backdrop は上のルールのまま（集中のため暗くぼかす）。
   opacity:0 でも要素は全面に残るので「暗幕タップで即閉じ」はそのまま効く。 */
.js-photoget__backdrop {
    transition: opacity .25s ease;
}
.js-photoget.is-cleared .js-photoget__backdrop {
    opacity: 0;
}
.js-cropper__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 16px;
}
.js-cropper__stage {
    position: relative;
    width: min(86vw, 360px);
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    touch-action: none;
}
.js-cropper__canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}
/* 丸い切り抜き枠：外側を暗幕（box-shadow）で覆い、中央に白い細リング */
.js-cropper__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
    border: 2px solid rgba(255, 255, 255, .9);
    pointer-events: none;
}
/* スライダー：太線8px（紙色レール）＋テラコッタの丸つまみ（白縁）。四角い既定の見た目を上書き。 */
.js-cropper__slider {
    -webkit-appearance: none;
    appearance: none;
    width: min(86vw, 360px);
    height: 26px;
    background: transparent;
    cursor: pointer;
}
.js-cropper__slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: #e7ddc9;
}
.js-cropper__slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #e7ddc9;
}
.js-cropper__slider::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: #f05a24;
}
.js-cropper__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f05a24;
    border: 3.5px solid #fff;
    box-sizing: border-box;
    margin-top: -9px; /* 8pxレールの中央に26pxつまみを乗せる: (8-26)/2 */
}
.js-cropper__slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f05a24;
    border: 3.5px solid #fff;
    box-sizing: border-box;
}
/* ボタン：左右同幅・同サイズ。フォントはアプリ本文と統一（IBM Plex Sans JP）。 */
.js-cropper__actions {
    display: flex;
    gap: 12px;
    width: min(86vw, 360px);
}
/* アプリの「はい/いいえ」ボタン（button-yes.svg=#f05a24 / button-no.svg=#957e6f・白文字・pill）に合わせる。
   ※はい/いいえの丸字は SVG内の輪郭パス（@font-face無し）のため、フォントそのものは流用不可＝アプリ標準書体の太字で代替。
   色・白文字・pill・左右同寸は完全一致。 */
.js-cropper__btn {
    flex: 1 1 0;
    box-sizing: border-box;
    border: none;
    border-radius: 99em;
    padding: 16px 0;
    /* 書体は u-font-mochiy（Mochiy Pop One）をボタン側のクラスで付与。Mochiyは単一ウェイト(400)＝太字合成を避け400で。 */
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.js-cropper__btn--cancel {
    background: #957e6f; /* 「いいえ」(button-no.svg)と同色 = u-bg-brown */
}
.js-cropper__btn--ok {
    background: #f05a24; /* 「はい」(button-yes.svg)と同色 = u-bg-orange */
}
.js-cropper__btn:disabled {
    opacity: .5;
}
.js-cropper__msg {
    color: #fff;
    font-size: 1.3rem;
    min-height: 1.3rem;
    text-align: center;
}

/* ===== ペット写真：ゲット演出 ===== */
.js-photoget__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.js-photoget__card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 26px 26px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    opacity: 0;
}
.js-photoget__label {
    color: #f05a24;
    font-weight: bold;
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 16px;
}
.js-photoget__img {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 12px;
}
.js-photoget__name {
    color: #957e6f;
    font-weight: bold;
    font-size: 1.4rem;
}