/* ridia 見た目つき試作の共通 CSS(D-280)。数値の正本は docs/design/ui-proto/tokens.md。
   使い方: <link rel="stylesheet" href="../base.css"> を読み、<div class="app"> の中に
   .topbar / .content / .tabbar を並べる。クラスの一覧は docs/design/ui-mock/README.md ではなく、この下の見出しコメントが正。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* ============ 1. トークン ============ */
:root{
  --coral:#FF5E62; --peach:#FF8A5C;
  --primary:#D93B42;            /* 白い文字を載せるボタンの地・強調 */
  --primary-text:#B32631;       /* 赤系の文字 */
  --bg:#FFFFFF; --bg-grouped:#F2F2F7; --surface:#FCF8FB;
  --ink:#1C1C1E; --text-2:#6C6C70; --sep:#E5E5EA;
  --success:#34C759; --warning:#FF9F0A; --danger:#FF3B30;
  --coral-10:rgba(255,94,98,.10);
  --r-card:20px; --r-input:12px; --r-sheet:24px; --r-pill:9999px;
  --shadow-card:0 12px 32px -4px rgba(28,28,30,.12),0 4px 12px -2px rgba(28,28,30,.04);
  --shadow-cta:0 10px 24px rgba(255,94,98,.35);
  --shadow-sheet:0 -10px 30px rgba(0,0,0,.08);
  --scrim:rgba(0,0,0,.4);
  --shade:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.3) 40%,transparent 100%);
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --safe-b:max(env(safe-area-inset-bottom,0px),16px);   /* 下の安全域。PC の枠では 34px */
}
@media (min-width:431px){ :root{ --safe-b:34px; } }

/* ============ 2. 土台 ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg-grouped);color:var(--ink);font-size:16px;line-height:25px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

/* .app: 幅 390px の列。PC では真ん中に 1 本(外は #F2F2F7)、スマホでは全幅。 */
.app{position:relative;width:100%;max-width:390px;height:100vh;height:100dvh;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:431px){ .app{box-shadow:0 0 40px rgba(28,28,30,.10)} }
/* .content: 上のバーと下のタブの間。ここだけがスクロールする。 */
.content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg)}
.content.is-grouped{background:var(--bg-grouped)}
/* .screen-id: 画面 ID(右下の安全域に小さく) */
.screen-id{position:absolute;right:10px;bottom:3px;z-index:60;font-size:10px;line-height:12px;font-weight:500;letter-spacing:.02em;color:var(--text-2);opacity:.8;pointer-events:none}

/* ============ 3. 文字(tokens.md 2) ============ */
.t-headline-xl{font-size:34px;line-height:41px;font-weight:700}
.t-headline-lg{font-size:28px;line-height:34px;font-weight:700}
.t-headline-md{font-size:22px;line-height:28px;font-weight:700}
.t-headline-sm{font-size:20px;line-height:25px;font-weight:600}
.t-body-lg{font-size:17px;line-height:27px}
.t-body-md{font-size:16px;line-height:25px}
.t-label-md{font-size:13px;line-height:18px;font-weight:500}
.t-caption{font-size:12px;line-height:16px}
.t-label-sm{font-size:11px;line-height:14px;font-weight:500}
.t-bold{font-weight:600}
.t-secondary{color:var(--text-2)}
.t-accent{color:var(--primary-text)}
.t-long{line-height:1.6}   /* 日本語の長文 */

/* ============ 4. アイコン(.ico + .ico-名前) ============ */
.ico{display:inline-block;flex:none;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-12{width:12px;height:12px}.ico-16{width:16px;height:16px}.ico-20{width:20px;height:20px}.ico-28{width:28px;height:28px}
.ico-coral{color:var(--coral)}
/* アイコンの絵(--i-名前)と、使うクラス(.ico-名前)。足す時は同じ形で 1 つずつ。線の太さは 2、24px の枠 */
:root{
  --i-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36z'/%3E%3C/svg%3E");
  --i-ticket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E");
  --i-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --i-heart-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='black' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.66V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.66'/%3E%3C/svg%3E");
  --i-chevron-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --i-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --i-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle fill='black' cx='5' cy='12' r='1.6'/%3E%3Ccircle fill='black' cx='12' cy='12' r='1.6'/%3E%3Ccircle fill='black' cx='19' cy='12' r='1.6'/%3E%3C/svg%3E");
  --i-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E");
  --i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-shield-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-check-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-camera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --i-coffee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E");
  --i-eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E");
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --i-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
  --i-smartphone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
.ico-compass{--ico:var(--i-compass)}
.ico-ticket{--ico:var(--i-ticket)}
.ico-heart{--ico:var(--i-heart)}
.ico-heart-fill{--ico:var(--i-heart-fill)}
.ico-chat{--ico:var(--i-chat)}
.ico-user{--ico:var(--i-user)}
.ico-chevron-left{--ico:var(--i-chevron-left)}
.ico-chevron-right{--ico:var(--i-chevron-right)}
.ico-chevron-down{--ico:var(--i-chevron-down)}
.ico-more{--ico:var(--i-more)}
.ico-sliders{--ico:var(--i-sliders)}
.ico-lock{--ico:var(--i-lock)}
.ico-shield-check{--ico:var(--i-shield-check)}
.ico-pin{--ico:var(--i-pin)}
.ico-check-circle{--ico:var(--i-check-circle)}
.ico-check{--ico:var(--i-check)}
.ico-camera{--ico:var(--i-camera)}
.ico-close{--ico:var(--i-close)}
.ico-coffee{--ico:var(--i-coffee)}
.ico-eye-off{--ico:var(--i-eye-off)}
.ico-search{--ico:var(--i-search)}
.ico-bell{--ico:var(--i-bell)}
.ico-smartphone{--ico:var(--i-smartphone)}


/* ============ 5. 上のバー ============ */
/* .topbar: 高さ 44px。中に .topbar-slot(左右)と .topbar-title。.topbar-title.is-left は最上位の画面(探す・いいね…)用 */
.topbar{position:relative;z-index:5;flex:none;height:44px;display:flex;align-items:center;gap:4px;padding:0 4px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:.5px solid var(--sep)}
.topbar-title{flex:1;min-width:0;text-align:center;font-size:17px;line-height:24px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title.is-left{text-align:left;font-size:22px;line-height:28px;font-weight:700;padding-left:12px}
.topbar-slot{flex:none;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.icon-btn{width:44px;height:44px;display:grid;place-items:center}                     /* 押せる所 44px */
.icon-btn-face{width:36px;height:36px;border-radius:50%;background:var(--bg-grouped);display:grid;place-items:center}
.pill-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--bg-grouped);font-size:14px;line-height:20px;font-weight:600}
.pill-btn .ico{color:var(--coral)}
.topbar-slot.is-wide{padding-right:8px;min-width:0}

/* ============ 6. 下のタブ ============ */
/* .tabbar > .tab(.is-active で選択中)。いいねの印は .tab-dot */
.tabbar{position:relative;z-index:5;flex:none;display:flex;padding-bottom:var(--safe-b);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-top:.5px solid var(--sep)}
.tab{position:relative;flex:1;min-width:0;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-2);font-size:10px;line-height:12px;font-weight:700}
.tab.is-active{color:var(--primary-text)}
.tab.is-active .ico{color:var(--coral)}
.tab-dot{position:absolute;top:7px;left:calc(50% + 5px);width:9px;height:9px;border-radius:50%;background:var(--coral);border:1.5px solid #fff}

/* ============ 7. ボタン ============ */
/* .btn + .btn-primary(主・52px)/.btn-secondary(副・48px)/.btn-danger(取り返しのつかない操作)。
   .btn-sm は一覧の中(44px)、.btn-block は全幅、.btn-grow は横並びで等分、.btn-icon は ‹ › などの角丸ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-pill);font-size:17px;line-height:24px;font-weight:600;white-space:nowrap;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-primary{height:52px;background:var(--primary);color:#fff;box-shadow:var(--shadow-cta)}
.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--sep)}
.btn-danger{background:#fff;color:var(--danger);border:1.5px solid var(--danger);font-weight:700}
.btn-sm{height:44px;padding:0 16px;font-size:15px;box-shadow:none}
.btn-block{display:flex;width:100%}
.btn-grow{flex:1 1 0;min-width:0}
.btn-icon{flex:none;width:44px;padding:0;background:#fff;border:1.5px solid var(--sep)}
.btn:disabled,.btn.is-disabled{opacity:.4;box-shadow:none;pointer-events:none}

/* ============ 8. 入力 ============ */
/* .field > .field-label + .input/.textarea (+ .field-error)。.check はチェックボックス */
.field{display:block}
.field-label{display:block;margin-bottom:6px;font-size:13px;line-height:18px;font-weight:500;color:var(--text-2)}
.input,.textarea{display:block;width:100%;height:48px;padding:0 16px;background:var(--bg-grouped);border:1.5px solid transparent;border-radius:var(--r-input);font:inherit;font-size:16px;color:var(--ink);outline:0;-webkit-appearance:none;appearance:none}
.textarea{height:auto;min-height:120px;padding:12px 16px;line-height:25px;resize:vertical}
.input:focus,.textarea:focus,.input.is-focus{background:#fff;border-color:var(--coral)}
.input::placeholder,.textarea::placeholder{color:var(--text-2)}
.field-error{margin-top:6px;font-size:13px;line-height:18px;font-weight:700;color:var(--danger)}
.check{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;line-height:20px;color:var(--text-2);cursor:pointer}
.check input{position:absolute;opacity:0;width:44px;height:44px;left:-11px;margin:0}
.check-box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid #C7C7CC;background:#fff;display:grid;place-items:center}
.check-box::after{content:"";width:14px;height:14px;background:#fff;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat;opacity:0}
.check input:checked+.check-box{background:var(--primary);border-color:var(--primary)}
.check input:checked+.check-box::after{opacity:1}
.check input:focus-visible+.check-box{outline:2px solid var(--coral);outline-offset:2px}

/* ============ 9. タグ・バッジ・切替 ============ */
/* .tag(.is-selected で選択中)。.tags は並べる入れ物 */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--bg-grouped);font-size:14px;line-height:20px;color:var(--ink)}
.block .tag{background:#fff}
.tag.is-selected{background:var(--coral-10);box-shadow:inset 0 0 0 1.5px var(--primary-text);color:var(--primary-text);font-weight:600}
/* .badge: 小さな印。.badge-verified(年齢確認済み)/.badge-new(NEW)/.badge-info(会えた率など・灰)/.badge-warn(注意)/.badge-proof(年収証明済み)。
   写真の上では .badge-on-photo を足す(白い地+ink 文字) */
.badge{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:11px;line-height:14px;font-weight:600;white-space:nowrap;max-width:100%;background:var(--bg-grouped);color:var(--ink)}
.badge .ico{color:var(--success)}
.badge-verified{background:rgba(52,199,89,.16)}
.badge-proof{background:rgba(52,199,89,.16)}
.badge-info .ico{color:var(--text-2)}
.badge-warn{background:rgba(255,159,10,.18)}
.badge-warn .ico{color:#B26A00}
.badge-new{background:var(--primary);color:#fff;letter-spacing:.04em}
.badge-on-photo{background:rgba(255,255,255,.92);color:var(--ink)}
.badge-lg{height:26px;padding:0 10px;font-size:12px;line-height:16px}
.online-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid #fff;box-sizing:content-box}
/* .segmented > .segmented-item(.is-active): 並び替えの 3 タブ、いいねの「お相手から/あなたから」 */
.segmented{display:flex;gap:2px;margin:12px 16px 0;padding:3px;border-radius:var(--r-input);background:var(--bg-grouped)}
.segmented-item{flex:1 1 0;min-width:0;height:44px;display:grid;place-items:center;border-radius:10px;font-size:14px;line-height:20px;font-weight:500;color:var(--text-2)}
.segmented-item.is-active{background:#fff;color:var(--primary-text);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* .notice: 一覧の上などの案内帯。.notice-icon に印。.notice-action は右端の導線 */
.notice{display:flex;align-items:flex-start;gap:8px;margin:12px 16px 0;padding:12px;border-radius:var(--r-input);background:var(--bg-grouped);font-size:12px;line-height:18px;color:var(--text-2)}
.notice strong{color:var(--ink);font-weight:600}
.notice .ico{margin-top:1px;color:var(--coral)}
.notice.is-warn{background:rgba(255,159,10,.14);color:var(--ink)}
.notice-action{margin-left:auto;align-self:center;font-size:13px;font-weight:700;color:var(--primary-text)}

/* ============ 10. 写真(仮) ============ */
/* .ph + .ph-1〜.ph-6: 人の写真の代わりのグラデーション。.photo-restricted は「写真はマッチ後に公開」 */
.ph{position:relative;overflow:hidden;background-color:#7d5a63;background-image:radial-gradient(ellipse 19% 13% at 50% 33%,rgba(255,255,255,.22) 55%,transparent 100%),radial-gradient(ellipse 40% 24% at 50% 99%,rgba(255,255,255,.17) 55%,transparent 100%),var(--ph-grad,none)}
.ph-1{--ph-grad:linear-gradient(160deg,#B27A72,#6A4556)}
.ph-2{--ph-grad:linear-gradient(160deg,#5E8794,#2F4658)}
.ph-3{--ph-grad:linear-gradient(160deg,#9A6E9C,#52385F)}
.ph-4{--ph-grad:linear-gradient(160deg,#B8855A,#6E4332)}
.ph-5{--ph-grad:linear-gradient(160deg,#6F8AA6,#34495E)}
.ph-6{--ph-grad:linear-gradient(160deg,#869562,#4A5636)}
.photo-restricted{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,#F2F2F7,#E5E5EA);color:var(--ink);font-size:12px;line-height:16px;font-weight:600;text-align:center}
.photo-restricted-icon{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--primary-text)}

/* ============ 11. 写真カード(一覧) ============ */
/* .card-grid(2 列)> .photo-card > .ph(背景)+ .photo-card-top(バッジ)+ .photo-card-info(名前など)。
   .photo-card.is-locked は写真が出ない相手(下に文字) */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 16px 16px}
.photo-card{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);color:#fff;background:#888}
.photo-card>.ph,.photo-card>.photo-restricted{position:absolute;inset:0}
.photo-card::after{content:"";position:absolute;inset:0;background:var(--shade);pointer-events:none}
.photo-card-top{position:absolute;z-index:1;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.photo-card-count{margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-pill);background:rgba(0,0,0,.5);color:#fff;font-size:11px;line-height:14px;font-weight:600}
.photo-card-info{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.photo-card-info>.badge{align-self:flex-start;margin-bottom:4px}
.photo-card-name{font-size:17px;line-height:24px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-card-name small{margin-left:6px;font-size:13px;font-weight:500;opacity:.92}
.photo-card-line{display:flex;align-items:center;gap:4px;min-width:0;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-card-line>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.photo-card-line .ico{flex:none}
.photo-card.is-locked{color:var(--ink)}
.photo-card.is-locked::after{display:none}
.photo-card.is-locked .photo-restricted{justify-content:flex-start;padding-top:44px;gap:6px}
.photo-card.is-locked .photo-restricted-icon{width:40px;height:40px}
.photo-card.is-locked .photo-card-count{background:rgba(0,0,0,.5)}

/* ============ 12. 一覧の行 ============ */
/* .list > .list-row(.avatar + .list-row-main)。区切り線は左から 80px */
.list{background:var(--bg)}
.list-row{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:72px;padding:12px 16px}
.list-row::after{content:"";position:absolute;left:80px;right:0;bottom:0;height:.5px;background:var(--sep)}
.list-row:last-child::after{display:none}
.avatar{position:relative;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden}
.list-row-main{flex:1;min-width:0}
.list-row-title{display:flex;align-items:center;gap:6px;min-height:25px;font-size:16px;line-height:25px;font-weight:600}
.list-row-sub{font-size:13px;line-height:18px;color:var(--text-2)}
.list-row-text{margin-top:6px;padding:8px 12px;border-radius:12px;background:var(--bg-grouped);font-size:14px;line-height:22px}
.list-row-actions{display:flex;gap:8px;margin-top:10px}

/* ============ 13. まとまり(プロフィールなど) ============ */
/* .block(角丸のまとまり)> .block-title + 中身。.block-lead は大きめの 1 行、.block-note は注記、
   .kv は項目名と値の 2 列、.lock-row は月額会員向けの鍵つき行 */
.block{margin:12px 16px 0;padding:16px;border-radius:var(--r-card);background:var(--bg-grouped)}
.block-title{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--text-2)}
.block-title.is-accent{color:var(--primary-text)}
.block-lead{font-size:17px;line-height:27px;font-weight:600}
.block-note{margin-top:4px;font-size:12px;line-height:16px;color:var(--text-2)}
.block-body{font-size:15px;line-height:1.6}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:15px;line-height:22px}
.kv dt{color:var(--text-2)}
.kv dd{text-align:right}
.lock-row{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:8px 12px;border-radius:var(--r-input);background:#fff;font-size:13px;line-height:18px}
.lock-row .ico{color:var(--primary-text)}
.lock-row-text{flex:1;min-width:0}
.lock-row-text small{display:block;color:var(--text-2);font-size:12px}
.purpose-row{display:flex;align-items:center;gap:12px}
.purpose-icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--coral-10);color:var(--primary-text);display:grid;place-items:center}
/* .hero: プロフィールの大きな写真(4:5)。.hero-progress(枚数の線)・.hero-count・.hero-info(名前) */
.hero{position:relative;aspect-ratio:4/5;color:#fff}
.hero>.ph,.hero>.photo-restricted{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;background:var(--shade);pointer-events:none}
.hero-progress{position:absolute;z-index:1;top:12px;left:12px;right:84px;display:flex;gap:4px}
.hero-progress i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.hero-progress i.is-on{background:#fff}
.hero-count{position:absolute;z-index:1;top:4px;right:12px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:rgba(0,0,0,.5);font-size:12px;line-height:16px;font-weight:600}
.hero-info{position:absolute;z-index:1;left:16px;right:16px;bottom:16px}
.hero-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:28px;line-height:34px;font-weight:700}
.hero-name small{font-size:20px;font-weight:600}
.hero-sub{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:13px;line-height:18px;flex-wrap:wrap}
/* .action-bar: プロフィールの下のボタン列 */
.action-bar{position:relative;z-index:4;flex:none;display:flex;gap:8px;padding:8px 12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-top:.5px solid var(--sep)}
.action-bar .btn{height:48px}
.empty{padding:64px 32px;text-align:center;color:var(--text-2);font-size:15px;line-height:24px}
.empty .ico{width:48px;height:48px;color:var(--coral);margin-bottom:12px}
.empty .btn{margin-top:20px}

/* ============ 14. 重ねる物(ダイアログ・シート・トースト・帯) ============ */
/* .overlay(暗い幕)の中に .dialog か .sheet を 1 つ。.overlay.is-bottom はシート用 */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--scrim)}
.overlay.is-bottom{align-items:flex-end;padding:0}
.dialog{width:100%;padding:24px 20px 20px;border-radius:var(--r-sheet);background:#fff;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.dialog-title{font-size:20px;line-height:25px;font-weight:600}
.dialog-body{margin-top:8px;font-size:16px;line-height:25px}
.dialog-extra{display:flex;justify-content:center;margin-top:8px}
.dialog-actions{display:flex;gap:8px;margin-top:16px}
.dialog-actions .btn{height:48px;padding:0 12px}
.sheet{width:100%;padding:8px 16px calc(16px + var(--safe-b));border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:#fff;box-shadow:var(--shadow-sheet)}
.sheet-handle{width:36px;height:5px;margin:0 auto 16px;border-radius:3px;background:#D1D1D6}
.sheet-title{font-size:20px;line-height:25px;font-weight:600}
.sheet-body{margin-top:8px;font-size:15px;line-height:24px;color:var(--text-2)}
.sheet-actions{display:flex;gap:8px;margin-top:16px}
.sheet-actions .btn{height:48px;padding:0 12px}
/* .toast: 下から出る短い知らせ(.is-top で上)。.banner-top: 相手の操作でマッチした時の上の帯 */
.toast{position:absolute;z-index:40;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--r-pill);background:rgba(28,28,30,.92);color:#fff;font-size:15px;line-height:22px;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast .ico{color:var(--success)}
.toast.is-top{top:56px}
.toast.is-bottom{bottom:calc(var(--safe-b) + 50px + 64px + 12px)}
.banner-top{position:absolute;z-index:40;top:52px;left:12px;right:12px;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:var(--r-input);background:rgba(28,28,30,.92);color:#fff;font-size:14px;line-height:20px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.banner-top .ico{color:var(--coral)}
/* マッチ成立の二人の写真 */
.avatar-pair{display:flex;align-items:center;justify-content:center;margin:16px 0 12px}
.avatar-pair .avatar{width:88px;height:88px;border:4px solid #fff;box-shadow:0 6px 16px rgba(28,28,30,.18)}
.avatar-pair .avatar+.avatar{margin-left:-14px}
.avatar-pair-heart{position:relative;z-index:1;margin:0 -10px;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;border:3px solid #fff}

/* ============ 15. 見出し・並べ方の小物 ============ */
.section-title{padding:20px 16px 8px;font-size:22px;line-height:28px;font-weight:700}
.row{display:flex;align-items:center;gap:8px}
.grow{flex:1;min-width:0}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.pb-16{padding-bottom:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ 16. 一覧ページ(index.html)用 ============ */
.index{padding:16px 16px 40px}
.index h1{font-size:22px;line-height:28px;font-weight:700}
.index-lead{margin-top:4px;font-size:13px;line-height:20px;color:var(--text-2)}
.index h2{margin-top:24px;padding-bottom:6px;border-bottom:.5px solid var(--sep);font-size:16px;line-height:24px;font-weight:700}
.index ul{margin-top:4px}
.index li a,.index li .pending{display:flex;align-items:center;gap:8px;min-height:44px;font-size:15px;line-height:22px;border-bottom:.5px solid var(--sep)}
.index li .id{flex:none;width:52px;font-size:12px;font-weight:600;color:var(--text-2)}
.index li .pending{color:var(--text-2);padding-left:60px}
.index li a .ico{margin-left:auto;color:var(--text-2)}
.index-switch{display:flex;gap:8px;margin-top:12px;font-size:13px}
.index-switch a{color:var(--primary-text);font-weight:600}

/* ============ 17. 登録の流れ(R-A01〜R-A09)用 ============ */
/* .reg-footer: 下のタブが無い画面の、下に固定するボタン置き場。.reg-body: 左右 16px の本文 */
.reg-body{padding:16px 16px 24px}
.reg-footer{position:relative;z-index:4;flex:none;padding:12px 16px calc(12px + var(--safe-b) - 16px);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-top:.5px solid var(--sep)}
.reg-footer .btn+.btn{margin-top:8px}
.reg-lead{font-size:15px;line-height:24px;color:var(--text-2)}
.reg-link{color:var(--primary-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* R-A01: ロゴとボタン */
.reg-hero{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px 24px 24px;text-align:center;background:linear-gradient(180deg,#fff 0%,var(--surface) 100%)}
.reg-logo{width:88px;height:88px;border-radius:26px;background:linear-gradient(135deg,var(--coral),var(--peach));color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-cta)}
.reg-wordmark{font-size:40px;line-height:48px;font-weight:700;letter-spacing:.02em}
.reg-legal{margin-top:16px;font-size:12px;line-height:18px;color:var(--text-2);text-align:center}
.reg-legal a{text-decoration:underline;text-underline-offset:2px}
/* R-A02: 同意の行 */
.consent{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:.5px solid var(--sep)}
.consent .check{align-items:flex-start;gap:12px;min-height:0;font-size:15px;line-height:24px;color:var(--ink)}
.consent .check-box{margin-top:1px}
.consent-note{margin:8px 0 0 34px;font-size:12px;line-height:18px;color:var(--text-2)}
.consent-tag{display:inline-block;margin-right:6px;padding:0 6px;border-radius:6px;background:var(--bg-grouped);font-size:11px;line-height:18px;font-weight:600;color:var(--text-2);vertical-align:1px}
/* R-A03: 選ぶカード(.choice.is-selected) */
.choice-list{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;gap:12px;min-height:72px;padding:0 20px;border-radius:var(--r-card);background:#fff;border:1.5px solid var(--sep);font-size:20px;line-height:25px;font-weight:600;text-align:left;width:100%}
.choice-mark{flex:none;margin-left:auto;width:24px;height:24px;border-radius:50%;border:1.5px solid #C7C7CC;display:grid;place-items:center}
.choice.is-selected{background:var(--coral-10);border-color:var(--primary-text);color:var(--primary-text)}
.choice.is-selected .choice-mark{background:var(--primary);border-color:var(--primary)}
.choice.is-selected .choice-mark::after{content:"";width:14px;height:14px;background:#fff;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
/* R-A05: ホイール(React Wheel Picker の見た目を CSS で描く。PC もスマホも同じ)。
   .wheel > .wheel-col > .wheel-item(.d0 選択中 / .d1 / .d2 は中心からの距離)。真ん中の帯は .wheel::before */
.wheel{position:relative;display:flex;height:180px;padding:0 8px;border-radius:var(--r-card);background:var(--bg-grouped);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%)}
.wheel::before{content:"";position:absolute;left:8px;right:8px;top:72px;height:36px;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wheel-col{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:300px}
.wheel-col.is-wide{flex:1.3 1 0}
.wheel-item{height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:24px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.wheel-item.d0{font-size:20px;font-weight:600;color:var(--ink)}
.wheel-item.u1{transform:rotateX(32deg)}.wheel-item.u2{transform:rotateX(55deg)}
.wheel-item.l1{transform:rotateX(-32deg)}.wheel-item.l2{transform:rotateX(-55deg)}
.wheel-value{margin-bottom:12px;text-align:center;font-size:22px;line-height:28px;font-weight:700}
/* R-A09: ボット対策の枠と、6 桁のコード欄 */
.bot-check{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 16px;border-radius:var(--r-input);border:1.5px solid var(--sep);background:#fff;font-size:15px;line-height:22px}
.bot-check .check-box{width:28px;height:28px}
.bot-check-note{margin-left:auto;font-size:11px;line-height:14px;color:var(--text-2);text-align:right}
.code-boxes{display:flex;gap:8px}
.code-box{flex:1 1 0;min-width:0;height:56px;border-radius:var(--r-input);background:var(--bg-grouped);border:1.5px solid transparent;display:grid;place-items:center;font-size:24px;line-height:30px;font-weight:700;font-variant-numeric:tabular-nums}
.code-box.is-focus{background:#fff;border-color:var(--coral)}
.resend{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;font-size:13px;line-height:18px;color:var(--text-2);text-align:center}
.resend .btn{margin-top:4px}

/* ============ 18. メッセージと約束(R-M01・M02・M05・M07・M10)用 ============ */
:root{
  --i-m-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --i-m-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E");
  --i-m-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
  --i-m-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}
.ico-m-plus{--ico:var(--i-m-plus)}
.ico-m-image{--ico:var(--i-m-image)}
.ico-m-arrow-up{--ico:var(--i-m-arrow-up)}
.ico-m-calendar{--ico:var(--i-m-calendar)}
/* R-M01: スレッドの行(名前と時刻、本文の 1 行、未読の数) */
.thread-head{display:flex;align-items:baseline;gap:8px}
.thread-name{flex:1;min-width:0;font-size:16px;line-height:25px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-time{flex:none;font-size:12px;line-height:16px;color:var(--text-2)}
.thread-line{display:flex;align-items:center;gap:8px}
.thread-preview{flex:1;min-width:0;font-size:14px;line-height:20px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-preview.is-unread{color:var(--ink);font-weight:600}
.unread{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--primary);color:#fff;font-size:12px;line-height:20px;font-weight:700;text-align:center}
/* R-M02: 吹き出し(.msg + .is-mine)。時刻と「既読」は吹き出しの横 */
.chat{display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px}
.chat-date{align-self:center;margin-top:4px;padding:2px 10px;border-radius:var(--r-pill);background:var(--bg-grouped);font-size:11px;line-height:16px;font-weight:500;color:var(--text-2)}
.chat-system{align-self:center;padding:4px 12px;border-radius:var(--r-pill);background:var(--bg-grouped);font-size:12px;line-height:16px;color:var(--text-2)}
.msg{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.msg.is-mine{align-self:flex-end;flex-direction:row-reverse}
.bubble{max-width:300px;padding:9px 14px;word-break:auto-phrase;border-radius:20px 20px 20px 6px;background:var(--bg-grouped);font-size:16px;line-height:24px;overflow-wrap:anywhere}
.msg.is-mine .bubble{border-radius:20px 20px 6px 20px;background:var(--primary);color:#fff}
.bubble-image{position:relative;width:176px;height:220px;padding:0;border-radius:20px 20px 20px 6px;overflow:hidden}
.msg-meta{flex:none;font-size:11px;line-height:14px;color:var(--text-2);white-space:nowrap}
.msg.is-mine .msg-meta{text-align:right}
.verified-inline{margin-left:6px;vertical-align:middle}
/* 入力欄の帯(＋・画像・本文・送信) */
.composer{position:relative;z-index:4;flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-top:.5px solid var(--sep)}
.composer-input{flex:1;min-width:0;height:44px;padding:0 16px;display:flex;align-items:center;border-radius:var(--r-pill);background:var(--bg-grouped);font-size:16px;color:var(--text-2)}
.composer-send{flex:none;width:44px;height:44px;display:grid;place-items:center}
.composer-send span{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.composer-send.is-disabled span{opacity:.4}
/* R-M07・M10: スレッドの中の約束カード */
.promise-card{align-self:stretch;padding:16px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card);border:1px solid var(--sep)}
.promise-reminder{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;border-radius:var(--r-input);background:var(--coral-10);font-size:13px;line-height:18px;font-weight:600;color:var(--primary-text)}
.promise-head{display:flex;align-items:center;gap:8px}
.promise-when{margin-top:10px;font-size:20px;line-height:25px;font-weight:700}
.promise-rows{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.promise-rows li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:22px}
.promise-rows .ico{margin-top:1px;color:var(--text-2)}
.promise-actions{display:flex;gap:8px;margin-top:14px}
.promise-note{margin-top:12px;font-size:12px;line-height:18px;color:var(--text-2)}
/* R-M05: 選ぶ欄(押すとホイールが開く) */
.pick{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:48px;padding:0 16px;border:1.5px solid transparent;border-radius:var(--r-input);background:var(--bg-grouped);font-size:16px;line-height:24px;text-align:left}
.pick .ico{color:var(--text-2)}
.pick.is-focus{background:#fff;border-color:var(--coral)}
.pick.is-empty{color:var(--text-2)}
.mform{display:flex;flex-direction:column;gap:20px;padding:16px 16px 24px}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field-count{margin-top:6px;text-align:right;font-size:12px;line-height:16px;color:var(--text-2)}
.action-bar.is-safe{padding-bottom:calc(8px + var(--safe-b))}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-bar .sheet-title{font-size:17px;line-height:24px}
.sheet-bar a{min-width:80px;height:44px;display:flex;align-items:center;font-size:16px;color:var(--text-2)}
.sheet-bar a:last-child{justify-content:flex-end;color:var(--primary-text);font-weight:700}
/* R-M10: 答えの選択肢を縦に並べる */
.dialog-actions.is-stack{flex-direction:column}
.dialog-actions.is-stack .btn{width:100%}
.dialog-note{margin-top:8px;font-size:13px;line-height:20px;color:var(--text-2)}

/* ============ 募集・マイページ用(R-B01/B02/B04/P01/P03) ============ */
:root{
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --i-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.ico-plus{--ico:var(--i-plus)}.ico-calendar{--ico:var(--i-calendar)}.ico-eye{--ico:var(--i-eye)}.ico-clock{--ico:var(--i-clock)}
.badge-now{background:var(--primary);color:#fff}
.badge-boost{background:var(--coral-10);color:var(--primary-text)}
.badge-boost .ico{color:var(--primary-text)}
.fab{position:absolute;right:16px;bottom:calc(var(--safe-b) + 50px + 16px);z-index:6;display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 20px 0 16px;border-radius:var(--r-pill);background:var(--primary);color:#fff;font-size:16px;line-height:24px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-cta)}
/* 募集カード */
.bd-list{display:flex;flex-direction:column;gap:12px;padding:12px 16px 88px}
.bd-card{display:block;padding:16px;border-radius:var(--r-card);background:#fff;border:.5px solid var(--sep);box-shadow:var(--shadow-card)}
.bd-card.is-boost{border:1.5px solid rgba(255,94,98,.55)}
.bd-head{display:flex;align-items:center;gap:12px}
.bd-head .avatar{width:48px;height:48px}
.bd-head-main{flex:1;min-width:0}
.bd-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:17px;line-height:24px;font-weight:600}
.bd-name small{font-size:13px;font-weight:500;color:var(--text-2)}
.bd-ago{font-size:12px;line-height:16px;color:var(--text-2)}
.bd-when{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bd-where{display:flex;align-items:flex-start;gap:6px;margin-top:10px;font-size:15px;line-height:22px;font-weight:600}
.bd-where .ico{margin-top:3px;color:var(--coral)}
.bd-facts{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-size:13px;line-height:20px;color:var(--text-2)}
.bd-facts b{font-weight:500;color:var(--ink)}
.bd-comment{margin-top:10px;font-size:14px;line-height:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-thumb{position:relative;width:72px;height:72px;margin-top:10px;border-radius:12px;overflow:hidden}
.bd-thumb .ph{position:absolute;inset:0}
.bd-thumb.is-review{display:grid;place-items:center;background:var(--bg-grouped);color:var(--text-2);font-size:11px;line-height:14px;font-weight:600;text-align:center}
/* 詳細 */
.bd-detail-head{display:flex;align-items:center;gap:12px;padding:16px 16px 4px}
.bd-detail-head .avatar{width:60px;height:60px}
.bd-photo{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.bd-photo .ph{position:absolute;inset:0}
.counter{margin-top:6px;text-align:right;font-size:12px;line-height:16px;color:var(--text-2)}
.pt-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;line-height:18px;color:var(--text-2)}
.pt-line b{flex:none;color:var(--ink);font-weight:600;white-space:nowrap}
.action-bar.is-col{flex-direction:column;gap:6px}
.action-bar.is-last{padding-bottom:calc(8px + var(--safe-b))}
/* フォーム */
.form{padding:16px 16px 24px}
.form .field+.field,.form .field+.check,.form .block-like+.field{margin-top:20px}
.form .segmented{margin:0}
.req{margin-left:4px;color:var(--primary-text);font-weight:600}
.field-hint{margin-top:6px;font-size:12px;line-height:18px;color:var(--text-2)}
.sel{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:48px;padding:0 16px;border-radius:var(--r-input);background:var(--bg-grouped);font-size:16px;color:var(--ink);text-align:left}
.sel.is-empty{color:var(--text-2)}
.sel.is-open{background:#fff;box-shadow:inset 0 0 0 1.5px var(--coral)}
.sel .ico{color:var(--text-2)}
.block-like{padding:12px 16px;border-radius:var(--r-input);background:var(--surface);border:.5px solid var(--sep)}
.block-like .t-label-md{color:var(--text-2)}
.uploader{display:flex;gap:8px}
.up-slot{position:relative;flex:none;width:88px;height:88px;border-radius:14px;overflow:hidden;display:grid;place-items:center;border:1.5px dashed #C7C7CC;color:var(--text-2)}
.up-slot .ph{position:absolute;inset:0}
.up-slot .badge{position:absolute;left:4px;bottom:4px}
.up-slot.has-img{border:0}
/* マイページ */
.me-card{display:flex;align-items:center;gap:16px;margin:16px 16px 0;padding:16px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card)}
.me-card .avatar{width:72px;height:72px}
.me-name{font-size:22px;line-height:28px;font-weight:700}
.me-name small{margin-left:6px;font-size:16px;font-weight:500;color:var(--text-2)}
.me-edit{font-size:13px;line-height:18px;color:var(--text-2)}
.pt-card{margin:12px 16px 0;padding:16px;border-radius:var(--r-card);background:var(--surface);border:.5px solid var(--sep)}
.pt-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pt-num{margin-top:4px;font-size:34px;line-height:41px;font-weight:700}
.pt-num small{margin-left:4px;font-size:17px;font-weight:600}
.pt-card .btn{margin-top:12px}
.menu-group{margin:16px 16px 0;border-radius:var(--r-card);background:#fff;overflow:hidden}
.menu-row{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 16px}
.menu-row::after{content:"";position:absolute;left:60px;right:0;bottom:0;height:.5px;background:var(--sep)}
.menu-row:last-child::after{display:none}
.menu-ico{flex:none;width:32px;height:32px;border-radius:50%;background:var(--coral-10);color:var(--primary-text);display:grid;place-items:center}
.menu-main{flex:1;min-width:0;font-size:16px;line-height:22px}
.menu-main small{display:block;font-size:12px;line-height:16px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-value{flex:0 1 auto;max-width:58%;font-size:14px;line-height:20px;color:var(--text-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-row>.ico-chevron-right{color:#C7C7CC}
.progress{height:8px;margin-top:10px;border-radius:4px;background:#fff;overflow:hidden}
.progress i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--coral))}
.check-badge{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--primary);color:#fff;font-size:12px;line-height:22px;font-weight:700;text-align:center}
.menu-group.is-plain .menu-row::after{left:16px}