/* ぬいぐるみプロフ帳 — 画面
   デザインは <html data-skin="…"> で切り替える（a〜d: レトロ雑誌風の色違い、paper: 紙のプロフ帳）。
   暗い画面は <html data-dark> のとき。どちらも app.js と index.html の先頭のスクリプトが付ける。 */

/* ---------- デザインの共通の値（レトロ雑誌風） ---------- */
:root{
  --font-head:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif; --w-head:400;
  --font-name:"M PLUS 1","Hiragino Sans","Yu Gothic",sans-serif; --w-name:800;
  --font-num:"Dela Gothic One","Hiragino Sans",sans-serif; --w-num:400;
  --body:"M PLUS 1","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;
  --bw:2px; --r:10px; --r-s:8px;
  --shadow:4px 4px 0 var(--edge); --shadow-s:2px 2px 0 var(--edge);
  --pattern:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.2px,transparent 1.3px); --pattern-size:16px 16px;
  --danger:#C62828;
  --tabh:64px;
  --accent-text:var(--accent);   /* 文字・線・マークに使う差し色。塗りの --accent が薄いデザインだけ別の濃い色にする */
}
:root[data-dark]{color-scheme:dark;--danger:#FF8A80}

/* 色A 黄×赤×紺（いちばん最初の色） */
:root,:root[data-skin="a"]{
  --bg:#FFF4D6; --surface:#FFFFFF; --surface-2:#FFF0C2; --ink:#1E2A5E; --muted:#56608A; --line:#1E2A5E; --edge:#1E2A5E;
  --accent:#E8392B; --accent-ink:#FFFFFF; --accent-soft:#FFE0DA; --sea:#2758D6; --sea-soft:#DDE6FF;
  --head:#FFD23F; --head-ink:#1E2A5E; --mark:#FFD23F;
  --map0:#F3E9CC; --map1:#FFD23F; --map2:#FF9F3F; --map3:#E8392B; --map4:#A11F3B; --map-stroke:#1E2A5E;
  --ph1:#FFD9E0; --ph2:#CDEBFF; --ph3:#FFE9A8; --ph4:#D8F5C9; --ph5:#E5DAFF; --ph6:#FFDCC2;
}
:root[data-dark],:root[data-skin="a"][data-dark]{
  --bg:#141A3A; --surface:#1D2550; --surface-2:#283166; --ink:#FFF4D6; --muted:#B7BCD9; --line:#FFF4D6; --edge:#070A1C;
  --accent:#FF5A4A; --accent-ink:#FFFFFF; --accent-soft:#48203A; --sea:#8FAEFF; --sea-soft:#26305E;
  --head:#FFD23F; --head-ink:#1E2A5E; --mark:#5A5436;
  --map0:#262F63; --map1:#8A7426; --map2:#D9822F; --map3:#FF5A4A; --map4:#FFB3A8; --map-stroke:#141A3A;
  --ph1:#4A2A3A; --ph2:#23385A; --ph3:#4A4122; --ph4:#2B4430; --ph5:#35305E; --ph6:#4A3326;
}
/* 色B ミント×オレンジ×こげ茶（レトロ喫茶） */
:root[data-skin="b"]{
  --bg:#F6EEDF; --surface:#FFFFFF; --surface-2:#F1E4CC; --ink:#4A2C1D; --muted:#7D604E; --line:#4A2C1D; --edge:#4A2C1D;
  --accent:#E8692A; --accent-ink:#FFFFFF; --accent-soft:#FDE2CF; --sea:#2E8B78; --sea-soft:#D3EEE6;
  --head:#8FD3BE; --head-ink:#4A2C1D; --mark:#8FD3BE;
  --map0:#EDE0C8; --map1:#BFE6D9; --map2:#F7BE8A; --map3:#E8692A; --map4:#9C3A10; --map-stroke:#4A2C1D;
  --ph1:#FDE2CF; --ph2:#D3EEE6; --ph3:#F6E3B4; --ph4:#E6DCF2; --ph5:#FFD9D0; --ph6:#DDEBC8;
}
:root[data-skin="b"][data-dark]{
  --bg:#2A1B13; --surface:#36251B; --surface-2:#443024; --ink:#F6EEDF; --muted:#C9B29E; --line:#F6EEDF; --edge:#120B07;
  --accent:#FF8A4C; --accent-ink:#2A1B13; --accent-soft:#4A2A1A; --sea:#7AD8C1; --sea-soft:#1F3B34;
  --head:#8FD3BE; --head-ink:#4A2C1D; --mark:#3D5A4F;
  --map0:#3A2A1F; --map1:#3F6B5E; --map2:#B8683A; --map3:#FF8A4C; --map4:#FFC79E; --map-stroke:#2A1B13;
  --ph1:#4A2E22; --ph2:#1F3B34; --ph3:#4A3E22; --ph4:#3A3048; --ph5:#4A2A2A; --ph6:#33402A;
}
/* 色C ピンク×水色×黒（平成のプリクラ・シール帳） */
:root[data-skin="c"]{
  --bg:#FFF1F6; --surface:#FFFFFF; --surface-2:#FFE0EC; --ink:#1B1A1F; --muted:#5E5563; --line:#1B1A1F; --edge:#1B1A1F;
  --accent:#FF3D8B; --accent-ink:#FFFFFF; --accent-soft:#FFD8E7; --sea:#1C9BE0; --sea-soft:#D4F0FF;
  --head:#8FDCFF; --head-ink:#1B1A1F; --mark:#8FDCFF;
  --map0:#F6E4EC; --map1:#BDE9FF; --map2:#FFA8CB; --map3:#FF3D8B; --map4:#B3125A; --map-stroke:#1B1A1F;
  --ph1:#FFD8E7; --ph2:#D4F0FF; --ph3:#FFF3B0; --ph4:#E9DDFF; --ph5:#D9F7E4; --ph6:#FFE2CC;
}
:root[data-skin="c"][data-dark]{
  --bg:#19171C; --surface:#242128; --surface-2:#302B35; --ink:#FFF1F6; --muted:#C2B6C6; --line:#FFF1F6; --edge:#000000;
  --accent:#FF5C9E; --accent-ink:#19171C; --accent-soft:#4A2033; --sea:#6FD0FF; --sea-soft:#1C3444;
  --head:#8FDCFF; --head-ink:#1B1A1F; --mark:#2E5366;
  --map0:#2E2A33; --map1:#245A78; --map2:#A3346A; --map3:#FF5C9E; --map4:#FFB3D1; --map-stroke:#19171C;
  --ph1:#4A2033; --ph2:#1C3444; --ph3:#45401F; --ph4:#342A4A; --ph5:#1F3F2E; --ph6:#4A3222;
}
/* 色D 空色×黄色×紺（昭和の文房具） */
:root[data-skin="d"]{
  --bg:#EAF5FC; --surface:#FFFFFF; --surface-2:#D8ECF8; --ink:#14224F; --muted:#4D5B80; --line:#14224F; --edge:#14224F;
  --accent:#2446B8; --accent-ink:#FFFFFF; --accent-soft:#DCE4FF; --sea:#0E8A9A; --sea-soft:#D2F1F4;
  --head:#7CC8F0; --head-ink:#14224F; --mark:#FFD23F;
  --map0:#DCE9F2; --map1:#FFE58A; --map2:#8FCBF0; --map3:#3C6FD8; --map4:#14224F; --map-stroke:#14224F;
  --ph1:#FFF0B8; --ph2:#CDEBFA; --ph3:#DCE4FF; --ph4:#FFE0D6; --ph5:#D8F3E3; --ph6:#EFE2FF;
}
:root[data-skin="d"][data-dark]{
  --bg:#0F1A38; --surface:#182550; --surface-2:#213064; --ink:#EAF5FC; --muted:#A9B8D6; --line:#EAF5FC; --edge:#050B1E;
  --accent:#7C9BFF; --accent-ink:#0F1A38; --accent-soft:#25336B; --sea:#5FD0DC; --sea-soft:#173B45;
  --head:#7CC8F0; --head-ink:#14224F; --mark:#5A4F24;
  --map0:#1E2B55; --map1:#6B5A1F; --map2:#2F6FA8; --map3:#7C9BFF; --map4:#FFD23F; --map-stroke:#0F1A38;
  --ph1:#45401F; --ph2:#1D3D55; --ph3:#25336B; --ph4:#4A2E2A; --ph5:#1F3F33; --ph6:#3A2E55;
}
/* 色E ミント×薄ピンク（薄ミント地）と 色F ミント×薄ピンク（ミルクティー地）。違いは背景とカードの色だけ */
:root[data-skin="e"],:root[data-skin="f"]{
  --bg:#EAF7F2; --surface:#FFFFFF; --surface-2:#FFF1F5; --ink:#2B5A52; --muted:#53746E; --line:#2B5A52; --edge:#2B5A52;
  --accent:#FFE3EC; --accent-ink:#2B5A52; --accent-soft:#FFE3EC; --accent-text:#C43F6D; --sea:#2E8C78; --sea-soft:#DDF4EC;
  --head:#A7E3D0; --head-ink:#2B5A52; --mark:#FFD3E0;
  --map0:#EEF7F4; --map1:#C8EEE1; --map2:#FFC6D7; --map3:#E57FA2; --map4:#B23A64; --map-stroke:#2B5A52;
  --ph1:#FFE3EC; --ph2:#DDF4EC; --ph3:#FFF3D6; --ph4:#E8E4F8; --ph5:#E0F1FB; --ph6:#F1F7DF;
}
:root[data-skin="e"][data-dark],:root[data-skin="f"][data-dark]{
  --bg:#17211F; --surface:#20302C; --surface-2:#2A3C38; --ink:#F2FBF8; --muted:#A8C4BE; --line:#F2FBF8; --edge:#0B1311;
  --accent:#FF9EBC; --accent-ink:#17211F; --accent-soft:#4A2A37; --accent-text:#FF9EBC; --sea:#8EE0C8; --sea-soft:#21403A;
  --head:#A7E3D0; --head-ink:#2B5A52; --mark:#4C3540;
  --map0:#2A3C38; --map1:#2F6455; --map2:#9C4766; --map3:#FF9EBC; --map4:#FFD3E0; --map-stroke:#17211F;
  --ph1:#4A2A37; --ph2:#21403A; --ph3:#45401F; --ph4:#342F4A; --ph5:#1F3A48; --ph6:#33402A;
}
:root[data-skin="f"]{--bg:#F5EDE4; --surface:#FFFAF5}
:root[data-skin="f"][data-dark]{--bg:#211C19; --surface:#2D2622; --surface-2:#39302B; --ink:#F7F0EA; --muted:#C2B4A8; --line:#F7F0EA; --edge:#0F0C0A; --map-stroke:#211C19}
/* 紙のプロフ帳風の形と文字（<html data-style="paper">）。「紙のプロフ帳」と、自分で作る着せ替えで紙を選んだときに付く */
:root[data-style="paper"]{
  --font-head:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; --w-head:700;
  --font-name:"Klee One","Hiragino Mincho ProN",serif; --w-name:600;
  --font-num:"Klee One","Hiragino Mincho ProN",serif; --w-num:600;
  --body:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --bw:1px; --r:4px; --r-s:2px; --shadow:none; --shadow-s:none;
  --pattern:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); --pattern-size:22px 22px;
  --tape:color-mix(in srgb,var(--head) 55%,transparent); --grid:color-mix(in srgb,var(--ink) 7%,transparent); --photo:#FFFFFF;
}
/* 紙のプロフ帳（色） */
:root[data-skin="paper"]{
  --bg:#F3EEE3; --surface:#FBF8F1; --surface-2:#EDE6D8; --ink:#2B2723; --muted:#7A7064; --line:#D6CBB8; --edge:#2B2723;
  --accent:#C0432E; --accent-ink:#FFF9F0; --accent-soft:#F4DED5; --sea:#2F5877; --sea-soft:#DDE5EA;
  --head:#F3EEE3; --head-ink:#2B2723; --mark:transparent; --tape:rgba(214,186,112,.5); --grid:rgba(120,100,70,.07); --photo:#FFFFFF;
  --map0:#E9E2D3; --map1:#F0CDBF; --map2:#E09A83; --map3:#CC6246; --map4:#9E3322; --map-stroke:#FBF8F1;
  --ph1:#F1E4D6; --ph2:#E2E7E0; --ph3:#E8E0EA; --ph4:#F2E8CF; --ph5:#DFE5EA; --ph6:#E6EAD7;
}
:root[data-skin="paper"][data-dark]{
  --bg:#1F1C18; --surface:#2A2621; --surface-2:#34302A; --ink:#EDE6D8; --muted:#A89D8C; --line:#4A443B; --edge:#EDE6D8;
  --accent:#E27A5F; --accent-ink:#1F1C18; --accent-soft:#3F2A22; --sea:#8FB3CF; --sea-soft:#26313A;
  --head:#1F1C18; --head-ink:#EDE6D8; --tape:rgba(214,186,112,.3); --grid:rgba(255,255,255,.035); --photo:#EDE6D8;
  --map0:#34302A; --map1:#5A3A2E; --map2:#8E4A36; --map3:#C8644A; --map4:#F0A48C; --map-stroke:#1F1C18;
  --ph1:#3F3128; --ph2:#2E3530; --ph3:#372F3A; --ph4:#3D3525; --ph5:#2C333A; --ph6:#343A2A;
}

/* ---------- 基本 ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
body{margin:0;background-color:var(--bg);background-image:var(--pattern);background-size:var(--pattern-size);color:var(--ink);font-family:var(--body);font-weight:500;font-size:15px;line-height:1.65;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:6px}
.wrap{max-width:760px;margin:0 auto;padding-inline:16px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* 枠線とずらした影（カード類で共通） */
.mini div,.row,.filters,.mapbox,.place,.tile,.panel,.book,.memo,.fs,.confirm,.tag,.empty-note,.anni button{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* header */
.top{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);z-index:20;background:var(--head);color:var(--head-ink);border-bottom:3px solid var(--head-ink)}
.top .wrap{display:flex;align-items:center;gap:10px;height:54px}
.brand{font-family:var(--font-head);font-weight:var(--w-head);font-size:18px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.brand svg{flex:none;width:26px;height:26px}
.brand svg circle:nth-child(-n+3){stroke:var(--head-ink);stroke-width:1.5}
.top .count{margin-left:auto;font-size:13px;opacity:.8;white-space:nowrap}
.top .count b{font-family:var(--font-num);font-weight:var(--w-num);font-size:17px;margin-right:2px}
.gear{position:relative;border:var(--bw) solid var(--head-ink);padding:0;flex:none;background:var(--surface);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:2px 2px 0 var(--head-ink)}
.gear svg,.fab svg,.favbtn svg,.heart svg{position:absolute;inset:0;margin:auto}
.gear svg{display:block;width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round}
.settings{display:grid;gap:14px;margin-top:14px}
.settings .who{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.settings a.btn{text-align:center;text-decoration:none;color:var(--ink)}
.steps{margin:0;padding-left:1.3em;font-size:14px;display:grid;gap:4px}

main{padding-block:16px calc(var(--tabh) + 96px + env(safe-area-inset-bottom,0px))}
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--sea-soft);color:var(--ink);border:var(--bw) solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:13.5px;margin-bottom:16px}
.banner .dot{flex:none;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--sea)}
.loading{padding:64px 0;text-align:center;color:var(--muted);font-family:var(--font-head);font-weight:var(--w-head)}

/* 見出し: 蛍光ペンの線と星 */
h2.h{font-family:var(--font-head);font-weight:var(--w-head);font-size:19px;margin:32px 0 12px;display:table;text-wrap:balance;background:linear-gradient(transparent 62%,var(--mark) 62%)}
h2.h::before{content:"★";color:var(--accent-text);font-size:16px;margin-right:2px}
h2.h small{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--muted);margin-left:6px}

/* bottom tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:3px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs .wrap{display:grid;grid-template-columns:repeat(4,1fr);height:var(--tabh)}
.tab{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px;font-weight:800;color:var(--muted)}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:var(--accent-text)}
.fab{position:fixed;z-index:31;right:max(16px,calc(50vw - 364px));bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;border:3px solid var(--line);background:var(--accent);color:var(--accent-ink);padding:0;box-shadow:var(--shadow);display:grid;place-items:center}
.fab svg{width:28px;height:28px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* home */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.hello h1{font-family:var(--font-head);font-weight:var(--w-head);font-size:26px;line-height:1.35;margin:0;text-wrap:balance}
.hello .big{font-family:var(--font-num);font-weight:var(--w-num);font-size:44px;line-height:1;color:var(--accent-text);text-shadow:3px 3px 0 var(--mark)}
.hello .big span{font-family:var(--body);font-weight:800;font-size:16px;color:var(--ink);margin-left:2px;text-shadow:none}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.mini div{padding:10px 12px}
.mini dt{font-size:11.5px;font-weight:700;letter-spacing:.04em}
.mini dd{margin:0;font-family:var(--font-num);font-weight:var(--w-num);font-size:20px}
.mini dd small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted);margin-left:2px}
.anni{display:grid;gap:8px}
.anni button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--accent-soft);padding:10px 12px}
.anni .when{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.anni .what{font-size:12.5px;color:var(--accent-text);font-weight:700}
.anni b{font-family:var(--font-name);font-weight:var(--w-name);display:block;font-size:15px}
.empty-note{padding:14px;font-size:13.5px;color:var(--muted)}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:128px;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:10px;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
.scroller > *{scroll-snap-align:start}
.linkbtn{display:inline-flex;align-items:center;gap:6px;border:var(--bw) solid var(--line);background:var(--mark);border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px;margin-top:8px;box-shadow:var(--shadow-s)}

/* thumbs and cards */
.ph{display:grid;place-items:center;font-family:var(--font-head);font-weight:var(--w-head);color:var(--ink);background:var(--ph1);width:100%;height:100%}
.ph.c2{background:var(--ph2)}.ph.c3{background:var(--ph3)}.ph.c4{background:var(--ph4)}.ph.c5{background:var(--ph5)}.ph.c6{background:var(--ph6)}
.thumb{position:relative;aspect-ratio:1;max-width:100%;border-radius:12px;overflow:hidden;background:var(--surface-2);border:var(--bw) solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{font-size:34px}
.heart{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--surface) 85%,transparent);display:grid;place-items:center}
.heart svg{width:15px;height:15px;fill:var(--accent-text)}
.card{border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0}
.card .nm{font-family:var(--font-name);font-weight:var(--w-name);font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.card .sub{font-size:12px;color:var(--muted);line-height:1.45}
/* 場所名が1文字だけ次の行に落ちないよう、県と施設名をそれぞれひとかたまりで折り返す */
.pl{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rows{display:grid;gap:10px}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:8px}
.row .thumb{border-radius:8px}
.row .thumb .ph{font-size:22px}
.row .nm{font-family:var(--font-name);font-weight:var(--w-name)}
.row .sub{font-size:12.5px;color:var(--muted);line-height:1.5}
.row .date{font-size:12px;color:var(--muted);text-align:right}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap}
.chip.ufo{background:var(--accent);color:var(--accent-ink)}
.chip.sea{background:var(--sea-soft);color:var(--ink)}

/* list controls */
.controls{display:grid;gap:10px;margin-bottom:14px}
.search{position:relative}
.search input{width:100%;border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 12px 10px 38px;font-size:16px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2}
.ctl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.select{border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:8px 10px;font-size:14px;max-width:100%}
.seg{display:inline-flex;border:var(--bw) solid var(--line);border-radius:var(--r-s);overflow:hidden;margin-left:auto}
.seg button{border:0;background:var(--surface);padding:7px 10px;display:grid;place-items:center;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.pill{border:var(--bw) solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.pill[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pill .n{font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px}
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}
.filters label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.filters .select{width:100%}
.filters .clear{grid-column:1/-1;justify-self:start;border:0;background:none;color:var(--accent-text);font-weight:700;font-size:13px;padding:4px 0}
.ghead{display:flex;align-items:baseline;gap:8px;margin:22px 0 10px;font-family:var(--font-head);font-weight:var(--w-head);font-size:15px}
.ghead:first-child{margin-top:4px}
.ghead small{font-family:var(--body);font-size:12px;color:var(--muted);font-weight:500}
.ghead::after{content:"";flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.result{font-size:12.5px;color:var(--muted)}
.none{padding:40px 0;text-align:center;color:var(--muted)}

/* map */
.mapbox{padding:12px}
.maphead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.maphead b{font-family:var(--font-num);font-weight:var(--w-num);font-size:26px;color:var(--accent-text)}
.maphead b span{font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink)}
.legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:16px;height:10px;border-radius:3px}
#jmap{display:block;width:100%;height:auto;max-height:560px}
#jmap path{stroke:var(--map-stroke);stroke-width:.6;cursor:pointer;transition:fill .2s}
#jmap path.sel{stroke:var(--accent-text);stroke-width:1.4}
#jmap .okibox{fill:none;stroke:var(--muted);stroke-dasharray:3 3}
.prefchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.prefchips button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}
.prefchips button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.prefchips .n{font-family:var(--font-num);font-weight:var(--w-num);margin-left:4px}
.place{padding:12px;display:grid;gap:10px}
.place + .place{margin-top:12px}
.place .ph-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.place .ph-head b{font-family:var(--font-name);font-weight:var(--w-name);font-size:15px}
.place .ph-head .cnt{margin-left:auto;font-size:12.5px;color:var(--muted)}
.minis{display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:8px;overflow-x:auto}
.minis .card .nm{font-size:12px}
.minis .thumb{border-radius:8px}
.minis .thumb .ph{font-size:22px}
.credit{font-size:11px;color:var(--muted);margin-top:10px}
.credit a{color:inherit}

/* stats */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{padding:12px 14px}
.tile dt{font-size:12px;font-weight:700}
.tile dd{margin:2px 0 0;font-family:var(--font-num);font-weight:var(--w-num);font-size:26px;line-height:1.2}
.tile dd small{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--muted);margin-left:3px}
.panel{padding:14px}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:minmax(84px,34%) 1fr 34px;gap:10px;align-items:center;font-size:13px}
.bar .bl{overflow-wrap:anywhere;line-height:1.35}
.bar .bt{height:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.bar .bf{display:block;height:100%;background:var(--accent);min-width:2px}
.bar .bv{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.regions{display:grid;gap:14px}
.region{display:grid;gap:6px}
.region .rh{display:flex;align-items:baseline;gap:8px;font-family:var(--font-head);font-weight:var(--w-head);font-size:15px}
.region .rh .v{margin-left:auto;font-family:var(--body);color:var(--muted);font-weight:500;font-size:12.5px;font-variant-numeric:tabular-nums}
.region .rh .v.done{color:var(--accent-text);font-weight:800}
.prefs{display:flex;flex-wrap:wrap;gap:5px}
.prefs > *{display:inline-flex;align-items:center;gap:3px;border:1.5px solid color-mix(in srgb,var(--line) 35%,transparent);border-radius:999px;padding:2px 9px;font-size:12.5px;line-height:1.5;background:var(--surface);color:var(--muted)}
.prefs button.on{background:var(--accent);border-color:var(--line);color:var(--accent-ink);font-weight:800;box-shadow:var(--shadow-s)}
.prefs .n{font-size:11px;font-variant-numeric:tabular-nums;opacity:.9}
dl.ufo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
dl.ufo dt{font-size:11.5px;color:var(--muted)}
dl.ufo dd{margin:0;font-family:var(--font-num);font-weight:var(--w-num);font-size:20px}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* sheets */
.sheet{position:fixed;inset:0;z-index:50;background-color:var(--bg);background-image:var(--pattern);background-size:var(--pattern-size);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.bar-top{position:sticky;top:0;z-index:2;background:var(--head);color:var(--head-ink);border-bottom:3px solid var(--head-ink)}
.bar-top .wrap{display:flex;align-items:center;gap:8px;height:54px}
.bar-top .ttl{font-family:var(--font-head);font-weight:var(--w-head);flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tbtn{border:0;background:none;padding:8px 6px;font-weight:800;color:var(--head-ink);min-width:64px;font-size:15px}
.tbtn.l{text-align:left}.tbtn.r{text-align:right}
.tbtn[disabled]{opacity:.4}

.gallery{display:flex;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border:var(--bw) solid var(--line);border-radius:18px;background:var(--surface-2);aspect-ratio:1;margin-top:14px;box-shadow:var(--shadow)}
.gallery::-webkit-scrollbar{display:none}
@media (min-width:560px){.gallery{aspect-ratio:4/3}}
.gallery > *{flex:0 0 100%;width:100%;height:100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.gallery img{object-fit:cover;display:block;cursor:zoom-in}
.gallery .ph{font-size:96px}
.viewer{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:calc(56px + env(safe-area-inset-top,0px)) 12px calc(24px + env(safe-area-inset-bottom,0px))}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer button{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;padding:0;display:grid;place-items:center}
.gdots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.gdots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5}
.gdots i.on{background:var(--accent-text);opacity:1}
.phead{display:flex;align-items:flex-start;gap:10px;margin-top:14px}
.phead .kana{font-size:12.5px;color:var(--muted);letter-spacing:.08em;margin:0}
.phead h1{font-family:var(--font-head);font-weight:var(--w-head);font-size:28px;line-height:1.3;margin:0;overflow-wrap:anywhere;text-wrap:balance}
.favbtn{position:relative;padding:0;margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-s)}
.favbtn svg{width:22px;height:22px;stroke:var(--accent-text);stroke-width:1.8;fill:none}
.favbtn[aria-pressed="true"] svg{fill:var(--accent-text)}
.samplebadge{display:inline-block;font-family:var(--body);font-size:11px;font-weight:700;background:var(--sea-soft);color:var(--sea);padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}

/* the sewn plush tag */
.tag{position:relative;margin-top:16px;padding:16px 16px 14px 44px}
.tag::before{content:"";position:absolute;inset:6px;border:2px dashed var(--accent-text);opacity:.8;border-radius:calc(var(--r) - 3px);pointer-events:none}
.tag::after{content:"";position:absolute;left:16px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line)}
.tag dl{margin:0;display:grid;gap:10px}
.tag dt{font-size:11px;letter-spacing:.12em;color:var(--accent-text);font-weight:800}
.tag dd{margin:0;font-family:var(--font-name);font-weight:var(--w-name);font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.tag dd small{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--muted);margin-left:6px}
.tag .since{display:inline-block;margin-top:2px;font-family:var(--body);font-size:12px;font-weight:700;color:var(--ink);background:var(--mark);border:1.5px solid var(--line);border-radius:999px;padding:0 8px}

/* profile book page */
.book{margin-top:16px;padding:0;overflow:hidden}
.book .ln{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 14px;border-bottom:var(--bw) solid var(--line)}
.book .ln:last-child{border-bottom:0}
.book .k{font-size:12px;color:var(--accent-text);font-weight:800;padding-top:2px;border-right:2px dotted var(--line)}
.book .v{overflow-wrap:anywhere;white-space:pre-wrap}
.book .v.e{color:var(--muted);opacity:.6}
.memo{margin-top:16px;padding:14px 16px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,color-mix(in srgb,var(--sea) 35%,transparent) 27px,color-mix(in srgb,var(--sea) 35%,transparent) 28px);background-position:0 12px;line-height:28px;white-space:pre-wrap;overflow-wrap:anywhere}
.memo .k{font-size:12px;color:var(--muted);display:block}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.meta{margin-top:16px;font-size:12px;color:var(--muted);display:grid;gap:2px}
.danger{margin-top:20px;display:grid;gap:8px}
.btn{border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r);padding:11px 16px;font-weight:800;font-size:15px;box-shadow:var(--shadow-s)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.warn{color:var(--danger);border-color:var(--danger)}
.confirm{padding:12px;display:grid;gap:10px}
.confirm .acts{display:flex;gap:8px;flex-wrap:wrap}

/* editor */
.form{display:grid;gap:16px;margin-top:14px}
.fs{padding:14px;display:grid;gap:12px;margin:0;min-width:0}
.fs-h{font-family:var(--font-head);font-weight:var(--w-head);font-size:15px;line-height:1.4;margin:0 0 2px}
.fld{display:grid;gap:4px;min-width:0}
.fld > span{font-size:12.5px;color:var(--muted);font-weight:700}
.fld > span em{font-style:normal;color:var(--accent-text);margin-left:4px}
input.inp,textarea.inp,.search input{-webkit-appearance:none;appearance:none}
.inp[type="date"]{display:block;min-height:46px;text-align:left}
.inp[type="date"]::-webkit-date-and-time-value{text-align:left}
.inp{width:100%;border:var(--bw) solid var(--line);background:var(--bg);border-radius:var(--r-s);padding:10px 12px;font-size:16px;min-width:0}
textarea.inp{min-height:96px;resize:vertical;line-height:1.6}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.radios{display:flex;flex-wrap:wrap;gap:6px}
.radios label{position:relative}
.radios input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.radios span{display:inline-block;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-size:14px}
.radios input:checked + span{background:var(--accent);color:var(--accent-ink);font-weight:800;box-shadow:var(--shadow-s)}
.radios input:focus-visible + span{outline:2px solid var(--accent-text);outline-offset:2px}
.err{color:var(--danger);font-size:12.5px;font-weight:700}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pslot{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--r-s);overflow:hidden;background:var(--surface-2);border:var(--bw) solid var(--line)}
.pslot img{width:100%;height:100%;object-fit:cover;display:block}
.pslot .main{position:absolute;left:6px;top:6px;font-size:10.5px;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 7px}
.pslot .pa{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:4px;background:linear-gradient(transparent,rgba(0,0,0,.45))}
.pslot .pa button{border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#1E2A5E;font-size:11px;font-weight:700;padding:2px 8px}
.pslot.busy{display:grid;place-items:center;font-size:12px;color:var(--muted)}
.addphoto{aspect-ratio:1;max-width:100%;border-radius:var(--r-s);border:2px dashed var(--line);display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--muted);cursor:pointer;position:relative;background:var(--bg)}
.addphoto input{position:absolute;inset:0;opacity:0;cursor:pointer}
.addphoto svg{width:26px;height:26px;stroke:var(--accent-text);fill:none;stroke-width:2;display:block;margin:0 auto 2px}
.hint{font-size:12px;color:var(--muted);margin:0}
.savebar{display:flex;gap:10px}
.savebar .btn{flex:1}

/* 写真の範囲選択 */
.cropper{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;background:#111;padding-top:env(safe-area-inset-top,0px)}
.cropper .bar-top{position:relative}
.cropper .ttl small{display:block;font-family:var(--body);font-size:11px;font-weight:700;opacity:.75;line-height:1.2}
.crop-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
.crop-area{position:relative;line-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.crop-area canvas{display:block}
.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.6);cursor:move;touch-action:none;
  background-image:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.35)),linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.35));
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-position:0 33.33%,0 66.67%,33.33% 0,66.67% 0;background-repeat:no-repeat}
.crop-box i{position:absolute;width:30px;height:30px;touch-action:none}
.crop-box i::after{content:"";position:absolute;width:18px;height:18px;border:0 solid #fff}
.crop-box i[data-h="nw"]{left:-10px;top:-10px;cursor:nwse-resize}.crop-box i[data-h="nw"]::after{left:6px;top:6px;border-width:4px 0 0 4px}
.crop-box i[data-h="ne"]{right:-10px;top:-10px;cursor:nesw-resize}.crop-box i[data-h="ne"]::after{right:6px;top:6px;border-width:4px 4px 0 0}
.crop-box i[data-h="sw"]{left:-10px;bottom:-10px;cursor:nesw-resize}.crop-box i[data-h="sw"]::after{left:6px;bottom:6px;border-width:0 0 4px 4px}
.crop-box i[data-h="se"]{right:-10px;bottom:-10px;cursor:nwse-resize}.crop-box i[data-h="se"]::after{right:6px;bottom:6px;border-width:0 4px 4px 0}
.crop-bar{background:var(--surface);color:var(--ink);border-top:3px solid var(--line);padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px))}
.crop-bar .wrap{display:grid;gap:8px}
.crop-row{display:flex;gap:8px;align-items:stretch}
.crop-row .modes{flex:1}
.crop-row .btn{padding:8px 14px;font-size:14px}

/* デザインの選択（設定） */
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.skin{display:grid;gap:6px;text-align:left;border:1.5px solid color-mix(in srgb,var(--line) 40%,transparent);background:var(--bg);border-radius:var(--r);padding:8px}
.skin[aria-checked="true"]{border:var(--bw) solid var(--accent-text);box-shadow:0 0 0 2px var(--accent-text)}
.skin .sw{display:flex;height:34px;border-radius:6px;overflow:hidden;border:1.5px solid rgba(0,0,0,.25)}
.skin .sw i{flex:1}
.skin b{font-size:13px;line-height:1.3}
.skin small{font-size:11.5px;color:var(--muted);line-height:1.3}
.custom{display:grid;gap:12px;padding:12px;border:1.5px dashed color-mix(in srgb,var(--line) 45%,transparent);border-radius:var(--r)}
.cpicks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cpick{display:grid;justify-items:center;gap:6px;text-align:center;font-size:12px;font-weight:700;color:var(--muted);line-height:1.3}
.cpick input{-webkit-appearance:none;appearance:none;width:52px;height:52px;padding:0;border:var(--bw) solid var(--line);border-radius:50%;background:none;cursor:pointer;box-shadow:var(--shadow-s)}
.cpick input::-webkit-color-swatch-wrapper{padding:0}
.cpick input::-webkit-color-swatch{border:0;border-radius:50%}
.cpick input::-moz-color-swatch{border:0;border-radius:50%}
.modes{display:flex;border:var(--bw) solid var(--line);border-radius:var(--r-s);overflow:hidden}
.modes button{flex:1;border:0;background:var(--surface);padding:8px 6px;font-size:14px;font-weight:700;color:var(--muted)}
.modes button + button{border-left:1.5px solid var(--line)}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:var(--shadow-s);max-width:calc(100vw - 32px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- 紙のプロフ帳風の飾り（data-style="paper"） ---------- */
[data-style="paper"] .top,[data-style="paper"] .bar-top{background:color-mix(in srgb,var(--head) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--ink)}
[data-style="paper"] .brand{letter-spacing:.08em}
[data-style="paper"] .brand svg circle:nth-child(-n+3){stroke:none}
[data-style="paper"] .gear{border-width:1px;box-shadow:none;background:transparent}
[data-style="paper"] .gear svg{stroke-width:1.8}
[data-skin="paper"] .tbtn{color:var(--accent-text)}
/* マスキングテープの見出し */
[data-style="paper"] h2.h{background:var(--tape);padding:2px 14px 1px;margin:30px 0 12px -4px;letter-spacing:.06em;transform:rotate(-1.2deg);clip-path:polygon(2% 0,98% 3%,100% 50%,97% 100%,1% 96%,0 50%)}
[data-style="paper"] h2.h::before{content:none}
[data-style="paper"] .hello h1{letter-spacing:.06em}
[data-style="paper"] .hello .big{text-shadow:none}
[data-style="paper"] .hello .big span,[data-style="paper"] .mini dt,[data-style="paper"] .tile dt{font-weight:500;color:var(--muted)}
[data-style="paper"] .tabs{border-top:3px double var(--ink)}
[data-style="paper"] .tab{font-family:var(--font-head);font-weight:700}
[data-style="paper"] .fab{border:2px solid var(--accent-ink);outline:2px solid var(--accent-text)}
[data-style="paper"] .anni button{border:1px dashed var(--accent-text);background:var(--surface)}
[data-style="paper"] .linkbtn{background:transparent;border-color:var(--ink)}
[data-style="paper"] .banner{border-color:var(--sea);background:var(--surface)}
/* 写真はインスタント写真のように白ふち */
[data-style="paper"] .thumb{border-radius:2px;background:var(--photo);padding:5px;border-color:var(--line)}
[data-style="paper"] .row .thumb{padding:3px}
[data-style="paper"] .gallery{border-radius:2px;border:8px solid var(--photo);outline:1px solid var(--line)}
[data-style="paper"] .chip{border-radius:2px;border-width:1px;border-color:var(--line);color:var(--muted)}
[data-style="paper"] .chip.ufo{border-color:var(--accent-text);color:var(--accent-text);background:transparent}
[data-style="paper"] .chip.sea{border-color:var(--sea);color:var(--sea);background:transparent}
[data-style="paper"] .pill,[data-style="paper"] .linkbtn,[data-style="paper"] .prefchips button,[data-style="paper"] .prefs > *,[data-style="paper"] .radios span{border-radius:4px;border-width:1px}
[data-style="paper"] .favbtn{border-color:var(--accent-text);background:transparent}
[data-style="paper"] .tag::before{border:1px dashed var(--ink);opacity:.5}
[data-style="paper"] .tag::after{box-shadow:inset 0 0 0 1px var(--ink)}
[data-style="paper"] .tag dt,[data-style="paper"] .book .k{color:var(--muted);font-weight:500}
[data-style="paper"] .tag .since{border-radius:2px;background:transparent;border-color:var(--accent-text);color:var(--accent-text)}
[data-style="paper"] .book{padding:6px 16px}
[data-style="paper"] .book .ln{grid-template-columns:96px 1fr;padding:10px 0;border-bottom-width:1px}
[data-style="paper"] .book .k{border-right:0}
[data-style="paper"] .book .k::after{content:"："}
[data-style="paper"] .book .v,[data-style="paper"] .memo{font-family:var(--font-name);font-weight:var(--w-name)}
[data-style="paper"] .book .v{font-size:16px}
[data-style="paper"] .memo{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,var(--line) 27px,var(--line) 28px)}
[data-style="paper"] .ghead::after{border-bottom:1px dashed var(--line)}
[data-style="paper"] .bar .bt{border-width:1px;border-radius:0}
[data-style="paper"] .bar .bf{background:repeating-linear-gradient(45deg,var(--accent) 0 6px,color-mix(in srgb,var(--accent) 78%,var(--surface)) 6px 9px)}
[data-style="paper"] .prefs button.on{border-color:var(--accent-text)}
[data-style="paper"] .seg button[aria-pressed="true"],[data-style="paper"] .modes button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* ---------- ログイン・おうちの用意（アプリ版） ---------- */
.gate:empty{display:none}
body.gated .top,body.gated main,body.gated .tabs,body.gated .fab{display:none!important}
.gate{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.cover{flex:1;display:flex;flex-direction:column;background:var(--head);color:var(--head-ink);background-image:radial-gradient(color-mix(in srgb,var(--head-ink) 12%,transparent) 1.4px,transparent 1.5px);background-size:18px 18px;padding-top:env(safe-area-inset-top,0px)}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:32px 24px}
.hero .logo{width:128px;height:128px;background:var(--surface);border:3px solid var(--head-ink);border-radius:50%;display:grid;place-items:center;box-shadow:5px 5px 0 var(--head-ink)}
.hero .logo svg{width:90px;height:90px}
.hero h1{font-family:var(--font-head);font-weight:var(--w-head);font-size:34px;line-height:1.25;margin:0}
.hero h1 span{display:block;font-size:20px}
.hero p{margin:0;font-weight:700;font-size:14.5px;line-height:1.7}
.dock{background:var(--surface);color:var(--ink);border-top:3px solid var(--head-ink);border-radius:26px 26px 0 0;padding:22px 20px calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:11px;width:100%;max-width:520px;margin:0 auto;box-sizing:border-box}
.dock .q{text-align:center;font-weight:800;font-size:14px;margin:0 0 2px}
.sso{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border-radius:12px;font-size:17px;font-weight:700;font-family:-apple-system,"Hiragino Sans",var(--body);padding:0 16px;box-sizing:border-box}
.sso svg{width:20px;height:20px;flex:none}
.sso.apple{background:#000;color:#fff;border:0}
.sso.google{background:#fff;color:#1f1f1f;border:1.5px solid #747775}
.sso.mail{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line);box-shadow:var(--shadow-s);font-family:var(--body);font-weight:800}
.last-wrap{text-align:center;margin:0}
.last{display:inline-block;font-size:12px;font-weight:800;background:var(--mark);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:1px 10px}
.legal{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6;margin:0}
.legal a,.legal-links a{color:var(--ink)}
.legal-links{font-size:13px;text-align:center;margin:4px 0 0}
.gate-msg{margin:0;background:var(--accent-soft);color:var(--ink);border:1.5px solid var(--accent-text);border-radius:var(--r-s);padding:8px 12px;font-size:13.5px;font-weight:700}
.gate-form{display:flex;flex-direction:column;gap:12px}
.gate-note{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.gate-note b{color:var(--ink);overflow-wrap:anywhere}
.btn.wide{width:100%}
.btn.sm{padding:4px 10px;font-size:13px}
.linkish{background:none;border:0;padding:6px;font-weight:700;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;align-self:center}
.gate-dim{position:fixed;inset:0;background:rgba(20,20,40,.45);z-index:60}
.gate-modal{position:fixed;z-index:61;left:16px;right:16px;top:50%;transform:translateY(-50%);max-width:420px;margin:0 auto;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 18px;display:flex;flex-direction:column;gap:12px;text-align:center}
.gate-modal .emoji{font-size:34px}
.gate-modal h2{margin:0;font-family:var(--font-head);font-weight:var(--w-head);font-size:19px;line-height:1.45}
.gate-modal p{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.gate-modal .small{font-size:12px;color:var(--muted)}
.onboard{min-height:100vh;min-height:100dvh;background-color:var(--bg);background-image:var(--pattern);background-size:var(--pattern-size)}
.ob{display:flex;flex-direction:column;gap:16px;padding-block:20px 40px;max-width:520px}
.ob-h{font-family:var(--font-head);font-weight:var(--w-head);font-size:24px;line-height:1.4;margin:0}
.ob-lead{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.ob-box{background:var(--surface);border:var(--bw) solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.ob-box h2{margin:0;font-family:var(--font-head);font-weight:var(--w-head);font-size:17px;display:flex;align-items:center;gap:10px}
.ico{width:34px;height:34px;border-radius:50%;border:var(--bw) solid var(--line);display:grid;place-items:center;flex:none;font-size:17px;background:var(--mark)}
.ico.sea{background:var(--sea-soft)}
.codeinp{font-family:ui-monospace,Menlo,monospace;font-size:24px;letter-spacing:.18em;text-align:center;font-weight:700;text-transform:uppercase}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:700}
.or::before,.or::after{content:"";flex:1;border-top:1.5px dashed var(--muted)}
/* 設定の「おうち」 */
.hh-name{display:grid;gap:8px}
.hh-title{margin:0;font-weight:800;font-size:16px}
.members{list-style:none;margin:0;padding:0}
.members li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1.5px dashed var(--surface-2);flex-wrap:wrap}
.members li:last-child{border-bottom:0}
.members .av{width:32px;height:32px;border-radius:50%;border:var(--bw) solid var(--line);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.members .av.c1{background:var(--ph1)}.members .av.c2{background:var(--ph2)}.members .av.c3{background:var(--ph3)}.members .av.c4{background:var(--ph4)}.members .av.c5{background:var(--ph5)}.members .av.c6{background:var(--ph6)}
.members b{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}
.role{font-size:11.5px;font-weight:800;border:1.5px solid var(--line);border-radius:999px;padding:0 8px;background:var(--mark);white-space:nowrap}
.rm-q{display:flex;gap:6px}
.ticket{background:var(--surface);border:var(--bw) dashed var(--line);border-radius:14px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;gap:6px}
.ticket .code{font-family:var(--font-num);font-weight:var(--w-num);font-size:30px;white-space:nowrap;letter-spacing:.04em;color:var(--accent-text);text-shadow:3px 3px 0 var(--mark)}
.ticket small{color:var(--muted);font-size:12.5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acct{display:grid;gap:10px}
.acct .confirm{display:grid;gap:8px;border:var(--bw) solid var(--danger);border-radius:var(--r);padding:12px}
.acct .confirm .muted{font-size:13px}
.acct .confirm .acts{display:flex;gap:8px}