/* キルフク デザイントークン（方針は docs/design.md）
   生成りの紙・墨・朱の一色。ファッション誌の誌面のように、明朝の見出しと Bodoni の数字で組む */
:root{
  --bg:#f2eee5;--surface:#fbf9f3;--sunk:#e9e3d6;--ink:#141312;--muted:#635c52;--line:#dcd4c4;
  --accent:#b03019;--accent-ink:#fff;--accent-soft:#f5dcd2;--danger:#b3261e;
  --serif-ja:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --display:"Bodoni 72","Bodoni Moda","Didot","Bodoni MT","Noto Serif Display",Georgia,serif;
  --r-sm:10px;--r:16px;--r-lg:24px;
  --shadow:0 1px 2px rgb(20 18 16/.06),0 6px 20px -8px rgb(20 18 16/.14);
  --ease:cubic-bezier(.2,.7,.2,1);--dur:160ms;
  --fs-hero:clamp(2.1rem,7.5vw,3.6rem);--fs-h1:clamp(1.45rem,4.6vw,2rem);--fs-h2:1.15rem;
  --glow-a:#f7e3d3;--glow-b:#efe9f6;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#11100e;--surface:#1a1916;--sunk:#24211d;--ink:#f3eee5;--muted:#a59d90;--line:#34302a;
  --accent:#ff6a4a;--accent-ink:#1a0d08;--accent-soft:#3d1d14;
  --shadow:0 0 0 1px var(--line);--glow-a:#3a2619;--glow-b:#25223a;color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#11100e;--surface:#1a1916;--sunk:#24211d;--ink:#f3eee5;--muted:#a59d90;--line:#34302a;
  --accent:#ff6a4a;--accent-ink:#1a0d08;--accent-soft:#3d1d14;
  --shadow:0 0 0 1px var(--line);--glow-a:#3a2619;--glow-b:#25223a;color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-text-size-adjust:100%;font-feature-settings:"palt"}
main{max-width:1040px;margin:0 auto;padding:16px 16px 32px}
[hidden]{display:none!important}
a{color:var(--accent);text-underline-offset:.2em}
h1{font-size:var(--fs-h1);line-height:1.35;letter-spacing:.01em;margin:.5rem 0 1rem;font-weight:800}
h2{font-size:var(--fs-h2);margin:2rem 0 .8rem;font-weight:700}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ヘッダー：半透明で内容を隠しすぎない */
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hd nav{display:flex;gap:18px;align-items:center;overflow-x:auto;white-space:nowrap}
.hd nav a{text-decoration:none;color:var(--ink);font-size:.92rem}
.hd nav a:hover{color:var(--accent)}
.hd nav a.btn{color:var(--accent-ink);background:var(--accent)}
.hd nav a.btn:hover{color:var(--accent-ink)}
@media (max-width:519px){.hd nav a:not(.btn){display:none}}
.logo{flex:none;white-space:nowrap;font-weight:900;font-size:1.15rem;letter-spacing:.14em;text-decoration:none;color:var(--ink)}

/* ログイン後のスマホ：親指の届く下部タブ（デスクトップは上のナビ） */
.tabbar{display:none}
@media (max-width:719px){
  .has-tabbar .hd nav{display:none}
  .has-tabbar main{padding-bottom:96px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:6;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:grid;place-items:center;gap:2px;min-height:48px;text-decoration:none;color:var(--muted);font-size:.72rem}
  .tabbar a[aria-current=page]{color:var(--ink);font-weight:700}
  .tabbar .ic{font-size:1.25rem;line-height:1}
  .tabbar .plus .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:1.4rem}
}

.ft form{margin:0}

/* ボタン：押した感触を短い動きで返す */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:.75em 1.5em;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;min-height:48px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:scale(.97)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.sm{padding:.45em 1.1em;font-size:.9rem;min-height:40px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.danger{background:var(--danger);color:#fff}
.btn:disabled{opacity:.5;cursor:wait}
.link{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.ft .link{color:var(--muted)}
.link.danger{color:var(--danger)}

.card{background:var(--surface);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.muted{color:var(--muted);font-size:.9rem}
.lead{font-size:1.05rem;color:var(--muted);max-width:36em}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.2em .8em;margin:0 0 .8rem}

/* トップ：大きな言い切りの見出し＋色相差の小さい柔らかなグラデーション＋点在する色のタイル */
.hero{position:relative;overflow:hidden;margin:0 -16px;padding:48px 16px 40px;background:radial-gradient(60% 70% at 85% 10%,var(--glow-a),transparent 70%),radial-gradient(50% 60% at 10% 90%,var(--glow-b),transparent 70%)}
.hero h1{font-size:var(--fs-hero);line-height:1.18;letter-spacing:-.01em;margin:0 0 1rem;max-width:11em}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem;position:relative}

/* Bento：ブロックの大きさで優先度を示す */
.bento{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.bento{grid-template-columns:repeat(4,1fr)}}
.bento>*{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);margin:0}
.bento .wide,.bento .big{grid-column:span 2}
@media (min-width:720px){.bento .big{grid-row:span 2}}
.bento h2,.bento h3{margin:0 0 .4rem;font-size:1.02rem}
.bento p{margin:0;color:var(--muted);font-size:.92rem}
.bento .num{font-size:2.2rem;font-weight:800;line-height:1.1;color:var(--ink)}
.features .big h2{font-size:1.35rem}
.features .big p{font-size:1rem}
.features{margin-top:8px}

/* 色から探す入口 */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem;padding:0;list-style:none}
.tags a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:999px;padding:.35em .95em;box-shadow:var(--shadow);font-size:.9rem}
.tags a::before{content:"";width:.85em;height:.85em;border-radius:50%;background:var(--swatch,#999);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.tags a:hover{color:var(--accent)}

/* 一覧：写真（服）が主役。UIは控えめに */
.grid{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.items{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.items{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.item{background:var(--surface);border-radius:var(--r);padding:10px;box-shadow:var(--shadow)}
.item img{aspect-ratio:1;object-fit:contain;width:100%;background:var(--sunk);border-radius:var(--r-sm)}
.item .name{margin:.5rem 0 0;font-weight:700;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item p{margin:0}
.look{position:relative;background:var(--surface);border-radius:var(--r);padding:8px;box-shadow:var(--shadow);transition:transform var(--dur) var(--ease)}
.look:hover{transform:translateY(-2px)}
.look a{text-decoration:none;color:var(--ink)}
.look-imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.look-imgs img{aspect-ratio:1;object-fit:contain;background:var(--sunk);border-radius:var(--r-sm);width:100%}
.look-imgs.big{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.look-title{display:block;margin:.5rem 4px .1rem;font-size:.88rem;font-weight:700;line-height:1.5}
.temp-badge{position:absolute;top:14px;left:14px;font-size:.75rem;font-weight:700;background:var(--surface);color:var(--ink);border-radius:999px;padding:.1em .6em;box-shadow:var(--shadow)}
.look form{margin:.2rem 4px 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.88rem}
.look form .btn{width:100%}

/* 今日：おすすめを主役にしたダッシュボード */
.dash{margin-bottom:8px}
.weather{position:relative;overflow:hidden}
.weather h1{font-size:1.1rem;margin:0 0 .2rem}
.weather .temp{font-size:2.4rem;font-weight:800;line-height:1.15;margin:.2rem 0}
.weather .wx{margin:0;color:var(--muted)}
.bento .band-cold{background:linear-gradient(140deg,#e3ecf8,#eef0fb)}
.bento .band-cool{background:linear-gradient(140deg,#e7eff4,#f1eff7)}
.bento .band-mild{background:linear-gradient(140deg,#f3eee6,#eef2ea)}
.bento .band-warm{background:linear-gradient(140deg,#fbeadd,#f7efe3)}
.bento .band-hot{background:linear-gradient(140deg,#fde1d3,#fbeedd)}
:root[data-theme=dark] .bento [class*=band-]{background:linear-gradient(140deg,var(--glow-a),var(--glow-b))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bento [class*=band-]{background:linear-gradient(140deg,var(--glow-a),var(--glow-b))}}
.weather .inline{margin-top:.6rem}
.progress{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:6px}
.progress li{font-size:.8rem;border-radius:999px;padding:.1em .7em;background:var(--sunk);color:var(--muted)}
.progress li.on{background:var(--ink);color:var(--bg)}
.sugg{margin-bottom:16px;padding:12px}
@media (min-width:720px){
  .suggs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
  .suggs .sugg{margin:0}
  .suggs .look-imgs.big{grid-template-columns:repeat(2,1fr)}
}
.sugg h3{margin:.2rem 4px .6rem;font-size:.95rem}
.reasons{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:.8rem 0;padding:0}
.reasons li{font-size:.82rem;background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:.15em .75em}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions form{margin:0}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline input{width:5em}

/* フォーム */
.form{display:grid;gap:14px;max-width:560px}
.form label{display:grid;gap:4px;font-size:.92rem;font-weight:600}
.form label.check{display:flex;gap:8px;align-items:center;font-weight:400}
input,select{font:inherit;padding:.6em .75em;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);min-height:48px}
input:focus,select:focus{border-color:var(--ink);outline:none}
input[type=color]{padding:2px;width:64px}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;background:var(--sunk);font-weight:700}
.drop:hover{border-color:var(--ink)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.preview canvas{width:100%;max-width:320px;aspect-ratio:1;background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0 0/16px 16px;border-radius:var(--r-sm)}
.error{color:var(--danger)}
.flash{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.65em 1.3em;border-radius:999px;margin:0;box-shadow:var(--shadow);animation:rise .3s var(--ease);z-index:7;max-width:calc(100% - 32px)}
@media (min-width:720px){.flash{bottom:24px}}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.row h1{margin:.5rem 0}
.empty{text-align:center;padding:2.2rem 1.2rem}
.empty h2{margin-top:0}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{background:var(--surface);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.stat span{display:block;color:var(--muted);font-size:.85rem}
.stat b{font-size:1.6rem;font-weight:800}
.rank{padding-left:1.4em}
.rank li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:.45em 0}
.bars{list-style:none;padding:0}
.bars li{display:grid;grid-template-columns:7em 1fr 3em;gap:8px;align-items:center}
meter{width:100%;height:10px}
.crumbs{font-size:.82rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem}
.chip,.sw{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.chip{border-radius:999px;padding:.3em .95em;font-size:.9rem;background:var(--surface);box-shadow:var(--shadow)}
.sw::before{content:"";width:.9em;height:.9em;border-radius:50%;background:var(--swatch,#999);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.chip[class*=sw-]::before{content:"";width:.85em;height:.85em;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.tag{font-size:.8rem;color:var(--muted)}
.cta{text-align:center;margin:2rem 0}
.faq details{border-bottom:1px solid var(--line);padding:.8em 0}
.faq summary{cursor:pointer;font-weight:700}
.pager{display:flex;justify-content:space-between;margin:1.5rem 0}
.share{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}
.guide ul{padding-left:1.2em}
.photo-add{font-size:.85rem;font-weight:700}

/* 服の色（写真なしの服のタイル・色の目印） */
.sw-black{--swatch:#1e1e1e}.sw-white{--swatch:#f7f7f5}.sw-gray{--swatch:#8c8c8a}.sw-navy{--swatch:#1f2a44}.sw-blue{--swatch:#3d6db5}
.sw-beige{--swatch:#d8c29c}.sw-brown{--swatch:#5a3a24}.sw-khaki{--swatch:#9a8a5e}.sw-olive{--swatch:#5a5838}.sw-green{--swatch:#2e9e4f}
.sw-yellow{--swatch:#e3c03b}.sw-orange{--swatch:#e07b2c}.sw-red{--swatch:#c0392b}.sw-pink{--swatch:#e59ab0}.sw-purple{--swatch:#7a4ea0}

/* 写真なし登録 */
.presets fieldset{border:0;background:var(--surface);border-radius:var(--r);padding:8px 16px;margin:0 0 14px;box-shadow:var(--shadow)}
.presets legend{font-weight:800;padding:12px 0 0;float:left;width:100%}
.preset{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);clear:both}
.preset:last-child{border-bottom:0}
.preset label{display:flex;align-items:center;gap:10px;min-height:48px;flex:1}
.preset input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--ink)}
.preset select{max-width:9.5em}

/* ===== キルフクらしさ：服とクローゼットの道具をそのままUIにする（docs/design.md） ===== */
:root{--table:repeating-linear-gradient(0deg,rgb(0 0 0/.028) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgb(0 0 0/.022) 0 1px,transparent 1px 5px),var(--sunk)}

/* 写真なしの服＝服の形のシルエット（着せ替えのように） */
.ph{position:relative;display:block;width:100%;aspect-ratio:1;filter:drop-shadow(0 1px 0 rgb(0 0 0/.22)) drop-shadow(0 6px 8px rgb(0 0 0/.12))}
/* 写真なしの服：種類ごとの絵（templates/garments.html）。地の色は currentColor = 色見本、陰影と縫い目は絵の側で重ねる */
.ph-g{position:absolute;inset:2%;width:96%;height:96%;color:var(--swatch,#999);stroke:#000;stroke-opacity:.32;stroke-width:1.2;stroke-linejoin:round;overflow:visible}
:root[data-theme=dark] .ph{filter:drop-shadow(0 0 1px rgb(255 255 255/.45)) drop-shadow(0 6px 8px rgb(0 0 0/.4))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ph{filter:drop-shadow(0 0 1px rgb(255 255 255/.45)) drop-shadow(0 6px 8px rgb(0 0 0/.4))}}
.ph-label{position:absolute;left:50%;bottom:2px;translate:-50% 0;background:var(--surface);color:var(--ink);font-size:.72rem;line-height:1.4;padding:1px 8px;border-radius:999px;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 1px 3px rgb(0 0 0/.15)}
.look-imgs .ph,.item .ph{background:var(--table);border-radius:var(--r-sm)}

/* 今日のコーデ＝リネンの上の平置き。着る順（羽織り・トップス・ボトムス・靴）に少し傾けて重ねる */
.flatlay{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"tops outer" "bottoms outer" "bottoms shoes";padding:16px 14px 10px;border-radius:var(--r);background:var(--table)}
.flatlay:not(:has(.c-outer)){grid-template-areas:"tops shoes" "bottoms shoes" "bottoms ."}
.flatlay .fl{min-width:0;transition:rotate .5s var(--ease),translate .5s var(--ease)}
.flatlay img{width:100%;aspect-ratio:1;object-fit:contain;background:transparent;filter:drop-shadow(0 6px 8px rgb(0 0 0/.18))}
.c-tops{grid-area:tops;rotate:-5deg;z-index:2}
.c-outer{grid-area:outer;rotate:6deg;align-self:center;margin-left:-16%;z-index:1}
.c-bottoms{grid-area:bottoms;rotate:3deg;margin-top:-14%;z-index:1}
.c-shoes{grid-area:shoes;rotate:-9deg;align-self:end;justify-self:center;width:80%;z-index:3}
.sugg:hover .c-tops{rotate:-9deg;translate:-4px -2px}
.sugg:hover .c-outer{rotate:10deg;translate:4px 0}
.sugg:hover .c-shoes{rotate:-14deg}
.sugg h3 .no{display:inline-grid;place-items:center;width:1.7em;height:1.7em;margin-right:.35em;border-radius:50%;background:var(--ink);color:var(--bg);font-size:.85em}

/* おすすめの理由＝服の内側の洗濯タグ（布・縫い目） */
.care{position:relative;margin:14px 4px 12px;padding:12px 16px;max-width:24em;background:#fffdf6;color:#2a2925;border-radius:3px;box-shadow:0 1px 2px rgb(0 0 0/.14),0 4px 10px -6px rgb(0 0 0/.2);font-size:.82rem;line-height:1.6}
.care::before{content:"";position:absolute;inset:4px;border:1px dashed rgb(42 41 37/.3);border-radius:2px;pointer-events:none}
.care-h{margin:0 0 4px;font-size:.66rem;font-weight:900;letter-spacing:.35em}
.care ul{margin:0;padding-left:1.1em}

/* 「これを着る」＝紐穴のある値札 */
.btn{position:relative}
.btn.tag{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding-left:2.2em;clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%,0 50%)}
.btn.tag::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--surface)}

/* 天気＝今日の一言と、服装の温度計 */
.weather h1{font-size:.95rem;font-weight:700;color:var(--muted);margin:0}
.weather h1 .wx{display:inline;margin-left:.6em;font-weight:400}
.weather .say{font-size:clamp(1.35rem,4.4vw,1.75rem);font-weight:900;line-height:1.35;margin:.3rem 0 .2rem}
.weather .temp{font-size:2.6rem}
.weather .temp small{font-size:.5em;margin-left:2px}
.weather .lo{font-size:.45em;color:var(--muted);font-weight:700}
.gauge{margin:.9rem 0 .5rem}
.g-bar{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,#6f9ad3 0%,#a7c2e6 30%,#cad8d3 42.5%,#e3dbc3 52.5%,#f1c9a1 62.5%,#ee9e73 75%,#dc6f4f 100%)}
.g-range{position:absolute;top:-4px;bottom:-4px;left:var(--a);right:calc(100% - var(--b));min-width:6px;border-radius:999px;box-shadow:0 0 0 2px var(--ink)}
.g-mark{position:absolute;top:50%;left:var(--x);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 4px var(--ink),0 3px 8px rgb(0 0 0/.25)}
.g-zones{display:grid;grid-template-columns:30fr 12.5fr 10fr 10fr 12.5fr 25fr;list-style:none;margin:8px 0 0;padding:0;font-size:.68rem;color:var(--muted)}
.g-zones li{border-left:1px solid var(--line);padding-left:4px;white-space:nowrap;overflow:visible;line-height:1.3}
/* 狭い目盛りでも文字が重ならないよう、隣どうしを上下2段に互い違いにする */
.g-zones li:nth-child(even){padding-top:1.3em}
.at-0{--x:0.0%}.from-0{--a:0.0%}.to-0{--b:0.0%}.at-1{--x:2.5%}.from-1{--a:2.5%}.to-1{--b:2.5%}.at-2{--x:5.0%}.from-2{--a:5.0%}.to-2{--b:5.0%}.at-3{--x:7.5%}.from-3{--a:7.5%}.to-3{--b:7.5%}.at-4{--x:10.0%}.from-4{--a:10.0%}.to-4{--b:10.0%}
.at-5{--x:12.5%}.from-5{--a:12.5%}.to-5{--b:12.5%}.at-6{--x:15.0%}.from-6{--a:15.0%}.to-6{--b:15.0%}.at-7{--x:17.5%}.from-7{--a:17.5%}.to-7{--b:17.5%}.at-8{--x:20.0%}.from-8{--a:20.0%}.to-8{--b:20.0%}.at-9{--x:22.5%}.from-9{--a:22.5%}.to-9{--b:22.5%}
.at-10{--x:25.0%}.from-10{--a:25.0%}.to-10{--b:25.0%}.at-11{--x:27.5%}.from-11{--a:27.5%}.to-11{--b:27.5%}.at-12{--x:30.0%}.from-12{--a:30.0%}.to-12{--b:30.0%}.at-13{--x:32.5%}.from-13{--a:32.5%}.to-13{--b:32.5%}.at-14{--x:35.0%}.from-14{--a:35.0%}.to-14{--b:35.0%}
.at-15{--x:37.5%}.from-15{--a:37.5%}.to-15{--b:37.5%}.at-16{--x:40.0%}.from-16{--a:40.0%}.to-16{--b:40.0%}.at-17{--x:42.5%}.from-17{--a:42.5%}.to-17{--b:42.5%}.at-18{--x:45.0%}.from-18{--a:45.0%}.to-18{--b:45.0%}.at-19{--x:47.5%}.from-19{--a:47.5%}.to-19{--b:47.5%}
.at-20{--x:50.0%}.from-20{--a:50.0%}.to-20{--b:50.0%}.at-21{--x:52.5%}.from-21{--a:52.5%}.to-21{--b:52.5%}.at-22{--x:55.0%}.from-22{--a:55.0%}.to-22{--b:55.0%}.at-23{--x:57.5%}.from-23{--a:57.5%}.to-23{--b:57.5%}.at-24{--x:60.0%}.from-24{--a:60.0%}.to-24{--b:60.0%}
.at-25{--x:62.5%}.from-25{--a:62.5%}.to-25{--b:62.5%}.at-26{--x:65.0%}.from-26{--a:65.0%}.to-26{--b:65.0%}.at-27{--x:67.5%}.from-27{--a:67.5%}.to-27{--b:67.5%}.at-28{--x:70.0%}.from-28{--a:70.0%}.to-28{--b:70.0%}.at-29{--x:72.5%}.from-29{--a:72.5%}.to-29{--b:72.5%}
.at-30{--x:75.0%}.from-30{--a:75.0%}.to-30{--b:75.0%}.at-31{--x:77.5%}.from-31{--a:77.5%}.to-31{--b:77.5%}.at-32{--x:80.0%}.from-32{--a:80.0%}.to-32{--b:80.0%}.at-33{--x:82.5%}.from-33{--a:82.5%}.to-33{--b:82.5%}.at-34{--x:85.0%}.from-34{--a:85.0%}.to-34{--b:85.0%}
.at-35{--x:87.5%}.from-35{--a:87.5%}.to-35{--b:87.5%}.at-36{--x:90.0%}.from-36{--a:90.0%}.to-36{--b:90.0%}.at-37{--x:92.5%}.from-37{--a:92.5%}.to-37{--b:92.5%}.at-38{--x:95.0%}.from-38{--a:95.0%}.to-38{--b:95.0%}.at-39{--x:97.5%}.from-39{--a:97.5%}.to-39{--b:97.5%}
.at-40{--x:100.0%}.from-40{--a:100.0%}.to-40{--b:100.0%}

/* クローゼット＝ハンガーラック（横にスワイプ）と靴の棚 */
.count{font-size:.55em;color:var(--muted);margin-left:.5em;font-weight:700}
.palette{margin:0 0 1.5rem}
.palette-strip{display:flex;height:30px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.palette-strip span{flex:1;background:linear-gradient(180deg,rgb(255 255 255/.18),transparent 60%),var(--swatch)}
.palette figcaption{font-size:.78rem;color:var(--muted);margin-top:6px}
.rack,.shelf{list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0;-webkit-overflow-scrolling:touch}
.rack{padding:28px 6px 14px;background:linear-gradient(var(--ink),var(--ink)) left 0 top 8px/100% 4px no-repeat}
.shelf{padding:6px 6px 18px;background:linear-gradient(var(--line),var(--line)) left 0 bottom 6px/100% 8px no-repeat}
.rack .hang,.shelf .hang{flex:0 0 44%;max-width:200px;scroll-snap-align:start}
@media (min-width:720px){.rack .hang,.shelf .hang{flex-basis:190px}}
.rack .hang{position:relative;transform-origin:50% -20px;animation:sway 1.1s var(--ease) both}
.rack .hang:nth-child(2){animation-delay:.08s}.rack .hang:nth-child(3){animation-delay:.16s}.rack .hang:nth-child(4){animation-delay:.24s}
.rack .hang::before{content:"";position:absolute;top:-22px;left:50%;width:16px;height:16px;margin-left:-8px;border:2.5px solid var(--muted);border-color:var(--muted) var(--muted) transparent transparent;border-radius:50%;rotate:-45deg}
.rack .hang::after{content:"";position:absolute;top:-9px;left:20%;right:20%;height:12px;border:2.5px solid var(--muted);border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}
.rack .hang:hover{rotate:2deg;transition:rotate .4s var(--ease)}
@keyframes sway{0%{rotate:-4deg}45%{rotate:2.5deg}75%{rotate:-1deg}100%{rotate:0deg}}

/* トップ：何をしてくれるアプリかを、動く見本で見せる */
.hero{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.hero{grid-template-columns:1.25fr 1fr}}
.hero-copy{position:relative;z-index:1}
.demo{position:relative;width:100%;max-width:330px;height:330px;justify-self:center;margin-right:28px}
.demo-look{position:absolute;inset:0;opacity:0;animation:demo 12s var(--ease) infinite}
.demo .d2{animation-delay:4s}.demo .d3{animation-delay:8s}
.demo .flatlay{height:100%;padding:34px 22px 18px;box-shadow:var(--shadow)}
.demo-t{position:absolute;top:-10px;left:-8px;z-index:4;margin:0;background:var(--ink);color:var(--bg);border-radius:999px;padding:.35em 1em;font-size:.85rem;box-shadow:var(--shadow)}
.demo-t b{margin-right:.6em;font-size:1.05em}
@keyframes demo{0%{opacity:0;translate:0 12px}5%,30%{opacity:1;translate:0 0}36%,100%{opacity:0;translate:0 -8px}}
.tate{position:absolute;top:6px;right:-30px;margin:0;writing-mode:vertical-rl;font-weight:900;font-size:1.05rem;letter-spacing:.32em;color:var(--muted)}
@media (max-width:719px){.demo{max-width:270px;height:270px}}
@media (prefers-reduced-motion:reduce){.demo .d2{opacity:1}}

/* ===== 誌面レイヤー：文字は必要なところだけ。あとは形・色・数字で伝える ===== */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.5em;height:1.5em;display:inline-block;vertical-align:middle;flex:none}
h1,h2{font-family:var(--serif-ja);font-weight:600;letter-spacing:.06em}
.logo{display:flex;align-items:center;gap:6px;font-family:var(--serif-ja);font-weight:600;letter-spacing:.35em;font-size:1.05rem}
.logo .ic{width:26px;height:26px}
.btn.accent,.btn.tag{background:var(--accent);color:var(--accent-ink)}
.icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.icon-btn .ic{width:22px;height:22px}
.icon-btn.sm{width:34px;height:34px}.icon-btn.sm .ic{width:16px;height:16px}
.icon-btn.like:hover,.icon-btn.like:focus-visible{color:var(--accent);border-color:var(--accent)}

/* 下部タブ：アイコンだけ（名前は読み上げで） */
@media (max-width:719px){
  .tabbar a .ic{width:26px;height:26px}
  .tabbar a[aria-current=page]{color:var(--accent)}
  .tabbar .plus{color:var(--bg)}
  .tabbar .plus .ic{width:44px;height:44px;padding:9px;border-radius:50%;background:var(--ink);color:var(--bg)}
}

/* 扉：日付と地域。雑誌の号数のように */
.mast{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 12px;border-bottom:1.5px solid var(--ink);padding:2px 0 8px;margin:4px 0 14px}
.mast p{margin:0}
.mast-date .md{font-family:var(--display);font-size:2.9rem;line-height:.9;letter-spacing:-.02em}
.mast-date .dow{font-family:var(--display);font-style:italic;font-size:1rem;letter-spacing:.22em;margin-left:.5em}
.mast-area{font-family:var(--serif-ja);letter-spacing:.4em;font-size:.95rem}

/* 空：天気アイコン・大きな気温・服装の温度計（目盛りは服のアイコン） */
.sky{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--shadow)}
.sky.band-cold{background:linear-gradient(150deg,#d9e4f2,#eceef6 60%,var(--surface))}
.sky.band-cool{background:linear-gradient(150deg,#e0e9ef,#efedf2 60%,var(--surface))}
.sky.band-mild{background:linear-gradient(150deg,#ebe4d6,#e9ede3 60%,var(--surface))}
.sky.band-warm{background:linear-gradient(150deg,#f6dfcd,#f5ebdc 60%,var(--surface))}
.sky.band-hot{background:linear-gradient(150deg,#fbd2bd,#f9e6d2 60%,var(--surface))}
:root[data-theme=dark] .sky{background:linear-gradient(150deg,var(--glow-a),var(--glow-b) 70%,var(--surface))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sky{background:linear-gradient(150deg,var(--glow-a),var(--glow-b) 70%,var(--surface))}}
.wx-ic{position:absolute;top:16px;right:18px;width:70px;height:70px;color:var(--ink)}
.deg{display:flex;align-items:center;gap:2px;margin-left:-10px}
.deg .big{margin:0;font-family:var(--display);font-size:clamp(5.4rem,27vw,8rem);line-height:.86;letter-spacing:-.05em}
.deg .u{font-size:.5em;vertical-align:top;margin-left:.04em}
.step{display:grid;place-items:center;width:40px;height:56px;color:var(--ink);opacity:.35;transition:opacity var(--dur)}
.step:hover,.step:focus-visible{opacity:1}
.range{display:flex;gap:16px;margin:.4rem 0 0;font-family:var(--display);font-size:1.15rem}
.sky .gauge{margin:1rem 0 .2rem}
.g-icons{display:grid;grid-template-columns:30fr 12.5fr 10fr 10fr 12.5fr 25fr;align-items:end;list-style:none;margin:10px 0 0;padding:0}
.g-icons li{display:flex;justify-content:center;color:var(--muted);opacity:.5}
.g-icons .ic{width:22px;height:22px}
.g-icons li.on{opacity:1;color:var(--ink)}
.g-icons li.on .ic{width:38px;height:38px}
.g-icons li.on::after{content:"";position:absolute;width:6px;height:6px;margin-top:42px;border-radius:50%;background:var(--accent)}

/* 1週間の帯：着た日の服の色を積む */
.week{display:flex;align-items:flex-end;gap:14px;margin:18px 2px 6px}
.week ol{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;list-style:none;margin:0;padding:0}
.week li{display:grid;justify-items:center;gap:5px}
.week .stack{display:flex;flex-direction:column;width:100%;max-width:30px;height:46px;border-radius:9px;overflow:hidden;background:repeating-linear-gradient(-45deg,var(--sunk) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px var(--line)}
.week .stack i{flex:1;background:var(--swatch)}
.week b{font-size:.68rem;font-weight:500;color:var(--muted)}
.week .today .stack{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.week .today b{color:var(--ink);font-weight:800}
.streak{margin:0;text-align:center;font-family:var(--display);min-width:3.4em}
.streak .n{display:block;font-size:2.6rem;line-height:.9}
.streak .u{font-style:italic;font-size:.78rem;letter-spacing:.15em;color:var(--muted)}

/* 足りない種類：線だけのシルエット＋追加 */
.kit{display:flex;align-items:center;gap:6px;width:fit-content;margin:6px 0 4px;padding:8px 14px;border:1.5px dashed var(--line);border-radius:999px;text-decoration:none;color:var(--muted)}
.kit .ph{width:30px;filter:none}
.kit .plus{width:18px;height:18px}
.ph.miss{filter:none}
.ph.miss .ph-g{color:var(--sunk);stroke:var(--muted);stroke-opacity:.6;stroke-dasharray:4 3;opacity:.55}
.empty-closet{display:grid;justify-items:center;gap:16px;padding:28px 12px}
.empty-closet .ghosts{display:grid;grid-template-columns:repeat(4,60px);gap:8px}
.empty-closet .icon-btn{margin-top:-6px}

/* おすすめ＝誌面の1ページ。番号はイタリックの数字 */
.look-sheet{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:14px 14px 16px;box-shadow:var(--shadow);margin:14px 0 18px}
.look-sheet .no{position:absolute;top:8px;left:16px;z-index:5;margin:0;font-family:var(--display);font-style:italic;font-size:2.6rem;line-height:1}
.look-sheet .flatlay{padding-top:40px;min-height:300px}
.look-sheet:hover .c-tops{rotate:-9deg;translate:-4px -2px}
.look-sheet:hover .c-outer{rotate:10deg;translate:4px 0}
.look-sheet:hover .c-shoes{rotate:-14deg}
@media (min-width:720px){.suggs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}.suggs .look-sheet{margin:0}}

/* 理由＝洗濯表示のような記号 */
ul.care{list-style:none;display:flex;flex-wrap:wrap;gap:12px;width:fit-content;max-width:100%;margin:12px 2px;padding:12px 16px 10px}
.care li{display:grid;justify-items:center;gap:3px;min-width:36px}
.care .sym{position:relative;display:grid;place-items:center;width:30px;height:30px;border:1.7px solid #2a2925;color:#2a2925}
.care small{font-size:.6rem;letter-spacing:.12em;font-weight:700}
.cs-classic .sym{grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:3px}
.cs-classic .sym i{width:100%;height:100%;background:var(--swatch);border-radius:1px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.cs-liked .sym{border-radius:50%}
.cs-liked .sym::before{content:"";width:14px;height:13px;background:var(--accent);clip-path:path("M7 13S0 8.6 0 3.9A3.8 3.8 0 0 1 7 1.6 3.8 3.8 0 0 1 14 3.9C14 8.6 7 13 7 13z")}
.cs-contrast .sym{border-radius:50%;background:linear-gradient(90deg,#2a2925 50%,transparent 50%)}
.cs-warm .sym{height:22px;margin-top:8px;border-top:0;border-radius:0 0 9px 9px}
.cs-warm .sym::before{content:"";position:absolute;top:-9px;left:-4px;right:-4px;height:2px;background:#2a2925;rotate:-8deg}
.actions{display:flex;align-items:center;gap:10px}
.actions .btn.tag{min-width:9em}

/* クローゼット */
.closet-mast .mast-title{margin:0;font-size:1.5rem;letter-spacing:.3em}
.mast-count{font-family:var(--display)}
.mast-count .n{font-size:2.6rem;line-height:.9}
.mast-count .u{font-style:italic;letter-spacing:.15em;margin-left:5px;color:var(--muted)}
.mast-tools{display:flex;gap:8px;margin-left:auto}
.palette-strip{margin:0 0 6px}
.rail-h{display:flex;align-items:baseline;gap:10px;margin:1.6rem 0 0;font-size:.95rem;letter-spacing:.35em}
.rail-h small{font-family:var(--display);font-style:italic;font-size:1.1rem;letter-spacing:0;color:var(--muted)}
.rail-empty{display:grid;place-items:center;width:60px;height:60px;margin:10px 0;border:1.5px dashed var(--line);border-radius:50%;color:var(--muted)}
.hang{position:relative}
.hang img{background:transparent!important}
.item-tools{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}
.item-tools form{margin:0}

/* コーデカード：題名の文字の代わりに色の点と気温 */
.look-meta{display:flex;justify-content:space-between;align-items:center;margin:.55rem 4px .2rem}
.dots{display:flex}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--swatch);margin-right:-4px;box-shadow:0 0 0 2px var(--surface),inset 0 0 0 1px rgb(0 0 0/.12)}
.temp-badge{font-family:var(--display);font-size:1rem;padding:.05em .6em}

/* トップ */
.hero h1{font-family:var(--serif-ja);font-weight:600;letter-spacing:.04em;line-height:1.3}
.ways{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:8px}
@media (min-width:720px){.ways{grid-template-columns:repeat(4,1fr)}}
.way{background:var(--surface);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow)}
.way h2{margin:.7rem 2px .1rem;font-size:.92rem;line-height:1.5;letter-spacing:.04em}
.way-art{display:flex;align-items:center;justify-content:center;gap:6px;height:118px;border-radius:var(--r);background:var(--table)}
.art-weather .ic{width:46px;height:46px}
.art-weather .big-n{font-family:var(--display);font-size:3.4rem;line-height:1}
.art-quick .ph{width:44px}
.art-like i{width:44px;height:44px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.art-like .ic{width:26px;height:26px;color:var(--accent)}
.art-local .ic{width:54px;height:54px}
.swatchbook{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 10px;list-style:none;margin:0;padding:0}
@media (min-width:720px){.swatchbook{grid-template-columns:repeat(8,1fr)}}
.swatchbook a{display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--muted)}
.swatchbook .fab{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgb(255 255 255/.35),transparent 45%),repeating-linear-gradient(45deg,rgb(0 0 0/.05) 0 2px,transparent 2px 4px),var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12),0 4px 10px -4px rgb(0 0 0/.3);transition:transform var(--dur) var(--ease)}
.swatchbook a:hover .fab{transform:translateY(-3px) rotate(-6deg)}
.swatchbook small{font-size:.7rem;letter-spacing:.15em}

/* ===== STREET COLOR REPORT（/trend）：解析結果を、黒い誌面で1画面に1つずつ見せる =====
   巨大な縦長の文字を服の後ろに置き、服（平置き）を前に浮かせる。写真の代わりに、その配色で描いた服を使う */
:root{--cond:"Avenir Next Condensed","AvenirNextCondensed-Heavy","Helvetica Neue Condensed Black","HelveticaNeue-CondensedBlack","sans-serif-condensed","Roboto Condensed","Arial Narrow",sans-serif}
html{overflow-x:clip}
.report{--r-ink:#f3eee6;--r-mute:#9d958a;--r-bg:#0f0e0c;--r-rose:#d29b8e;--r-line:#2c2925;
  margin:-16px calc(50% - 50vw) 0;padding:0 max(16px,calc(50vw - 520px)) 48px;background:var(--r-bg);color:var(--r-ink)}
.report h1,.report h2,.report h3{font-family:var(--cond);font-weight:800;letter-spacing:-.01em;margin:0}
.report .ph{filter:drop-shadow(0 0 1px rgb(255 255 255/.5)) drop-shadow(0 22px 30px rgb(0 0 0/.65))}

.rp-hero{position:relative;min-height:88svh;display:grid;align-content:end;padding:28px 0 56px}
.rp-kicker{display:flex;justify-content:space-between;margin:0 0 auto;font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--r-rose)}
.rp-title{display:grid;font-size:clamp(4.6rem,25vw,15.5rem);line-height:.8;text-transform:uppercase}
.rp-title .o{color:transparent;-webkit-text-stroke:1.6px var(--r-ink)}
.rp-lead{max-width:min(24em,calc(100% - 34px));margin:22px 0 0;font-family:var(--serif-ja);font-size:1.02rem;line-height:1.9;color:var(--r-mute)}
.rp-lead b{font-family:var(--display);font-size:1.6em;color:var(--r-ink);font-weight:400}
.rp-scroll{position:absolute;right:0;bottom:56px;margin:0;writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--r-mute)}
.rp-scroll::after{content:"";display:block;width:1px;height:56px;margin:10px auto 0;background:linear-gradient(var(--r-ink),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{from{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}

.marquee{overflow:hidden;margin:0 calc(-1 * max(16px,calc(50vw - 520px)));border-block:1px solid var(--r-line);padding:14px 0}
.mq-track{display:flex;align-items:center;gap:26px;width:max-content;padding-left:26px;font-family:var(--cond);font-weight:800;font-size:1.7rem;letter-spacing:.04em;animation:mq 34s linear infinite}
.mq-track i{font-style:normal;font-size:.5em;color:var(--r-rose)}
@keyframes mq{to{transform:translateX(-50%)}}

.rp-look{position:relative;min-height:94svh;display:grid;place-items:center;isolation:isolate;border-bottom:1px solid var(--r-line)}
.rp-rank{position:absolute;top:7%;left:0;margin:0;font-family:var(--display);font-style:italic;font-size:clamp(3rem,11vw,6.5rem);line-height:1;color:var(--r-rose)}
.rp-name{position:absolute;inset:0;z-index:-1;display:grid;place-content:center;text-align:center;font-size:clamp(4.2rem,23vw,14rem);line-height:.84;text-transform:uppercase;color:rgb(243 238 230/.9)}
.rp-name .x{font-family:var(--display);font-style:italic;font-weight:400;font-size:.45em;line-height:1.2;color:var(--r-rose)}
.rp-lay{display:grid;width:min(58vw,330px)}
.rp-lay .cat-tops{rotate:-7deg;z-index:2}
.rp-lay .cat-bottoms{rotate:4deg;margin-top:-26%;width:86%;justify-self:center}
.rp-stat{position:absolute;right:0;bottom:6%;margin:0;text-align:right;display:grid;justify-items:end}
.rp-stat .n{font-family:var(--display);font-size:clamp(3.4rem,13vw,5.5rem);line-height:.9}
.rp-stat .u{font-family:var(--display);font-style:italic;font-size:1.4rem;margin-top:-.3em}
.rp-stat .ja{font-family:var(--serif-ja);font-size:.82rem;letter-spacing:.3em;color:var(--r-mute);margin-top:6px}
@supports (animation-timeline: view()){
  .rp-lay{animation:lay linear both;animation-timeline:view();animation-range:entry 0% cover 48%}
  .rp-name span{animation:spread linear both;animation-timeline:view();animation-range:entry 5% cover 50%}
  .rp-stat{animation:fadeup linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
}
@keyframes lay{from{opacity:0;transform:translateY(90px) scale(.9) rotate(5deg)}to{opacity:1;transform:none}}
@keyframes spread{from{opacity:0;letter-spacing:-.09em}to{opacity:1;letter-spacing:-.01em}}
@keyframes fadeup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.rp-fact{min-height:72svh;display:grid;place-content:center;text-align:center;border-bottom:1px solid var(--r-line)}
.rp-fact .big{margin:0;font-family:var(--cond);font-weight:800;line-height:.8;font-size:clamp(9rem,46vw,22rem)}
.rp-fact .big .u{font-size:.32em;color:var(--r-rose)}
.rp-fact .cap{margin:18px 0 0;font-family:var(--serif-ja);font-size:1.15rem;letter-spacing:.12em}

.rp-slots{display:grid;gap:36px;padding:64px 0;border-bottom:1px solid var(--r-line)}
@media (min-width:860px){.rp-slots{grid-template-columns:1fr 1fr;column-gap:48px}}
.slot h3{display:flex;align-items:baseline;justify-content:space-between;font-size:2.2rem;line-height:1}
.slot h3 small{font-family:var(--serif-ja);font-weight:400;font-size:.8rem;letter-spacing:.3em;color:var(--r-mute)}
.strip{display:flex;height:58px;margin:12px 0 10px;border-radius:4px;overflow:hidden}
.strip span{flex:var(--f,1) 1 0;min-width:2px;background:linear-gradient(180deg,rgb(255 255 255/.16),transparent 55%),repeating-linear-gradient(90deg,rgb(0 0 0/.08) 0 1px,transparent 1px 3px),var(--swatch)}
.f-1{--f:1}.f-2{--f:2}.f-3{--f:3}.f-4{--f:4}.f-5{--f:5}.f-6{--f:6}.f-7{--f:7}.f-8{--f:8}.f-9{--f:9}.f-10{--f:10}.f-11{--f:11}.f-12{--f:12}.f-13{--f:13}.f-14{--f:14}.f-15{--f:15}.f-16{--f:16}.f-17{--f:17}.f-18{--f:18}.f-19{--f:19}.f-20{--f:20}.f-21{--f:21}.f-22{--f:22}.f-23{--f:23}.f-24{--f:24}.f-25{--f:25}.f-26{--f:26}.f-27{--f:27}.f-28{--f:28}.f-29{--f:29}.f-30{--f:30}.f-31{--f:31}.f-32{--f:32}.f-33{--f:33}.f-34{--f:34}.f-35{--f:35}.f-36{--f:36}.f-37{--f:37}.f-38{--f:38}.f-39{--f:39}.f-40{--f:40}.f-41{--f:41}.f-42{--f:42}.f-43{--f:43}.f-44{--f:44}.f-45{--f:45}.f-46{--f:46}.f-47{--f:47}.f-48{--f:48}.f-49{--f:49}.f-50{--f:50}.f-51{--f:51}.f-52{--f:52}.f-53{--f:53}.f-54{--f:54}.f-55{--f:55}.f-56{--f:56}.f-57{--f:57}.f-58{--f:58}.f-59{--f:59}.f-60{--f:60}.f-61{--f:61}.f-62{--f:62}.f-63{--f:63}.f-64{--f:64}.f-65{--f:65}.f-66{--f:66}.f-67{--f:67}.f-68{--f:68}.f-69{--f:69}.f-70{--f:70}.f-71{--f:71}.f-72{--f:72}.f-73{--f:73}.f-74{--f:74}.f-75{--f:75}.f-76{--f:76}.f-77{--f:77}.f-78{--f:78}.f-79{--f:79}.f-80{--f:80}.f-81{--f:81}.f-82{--f:82}.f-83{--f:83}.f-84{--f:84}.f-85{--f:85}.f-86{--f:86}.f-87{--f:87}.f-88{--f:88}.f-89{--f:89}.f-90{--f:90}.f-91{--f:91}.f-92{--f:92}.f-93{--f:93}.f-94{--f:94}.f-95{--f:95}.f-96{--f:96}.f-97{--f:97}.f-98{--f:98}.f-99{--f:99}.f-100{--f:100}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0;font-size:.8rem;color:var(--r-mute)}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgb(255 255 255/.25)}
.legend b{font-family:var(--display);font-weight:400;color:var(--r-ink)}

.rp-more{padding:56px 0;border-bottom:1px solid var(--r-line)}
.rp-more h2{font-size:2.4rem;margin-bottom:18px}
.rp-more ol{list-style:none;margin:0;padding:0;display:grid;gap:0 32px}
@media (min-width:720px){.rp-more ol{grid-template-columns:1fr 1fr}}
.rp-more li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--r-line);font-family:var(--serif-ja);letter-spacing:.08em}
.rp-more li b{margin-left:auto;font-family:var(--display);font-weight:400;font-size:1.3rem}
.rp-more .pair{display:flex}
.rp-more .pair i{width:26px;height:26px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 2px var(--r-bg),0 0 0 3px rgb(255 255 255/.18)}
.rp-more .pair i+i{margin-left:-9px}

.rp-cta{padding:72px 0 24px;text-align:center}
.rp-cta .cap{margin:0 0 22px;font-family:var(--serif-ja);font-size:clamp(1.3rem,5vw,1.9rem);letter-spacing:.08em}
.rp-note{margin:22px 0 0;font-size:.72rem;color:var(--r-mute)}

/* トップの予告帯：レポートの上位3組を、黒い帯に平置きで */

/* 今日の提案：街で多い配色なら順位の札 */
.street-tag{position:absolute;top:12px;right:14px;z-index:5;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#0f0e0c;color:#f3eee6;text-decoration:none;font-family:var(--cond);font-weight:800;font-size:.8rem;letter-spacing:.08em}
.street-tag b{font-family:var(--display);font-style:italic;font-weight:400;font-size:1rem;color:#d29b8e}

/* トップの見本：入れ替わる平置きの後ろに、その日の気温を巨大な数字で（文字を服の後ろに置く） */
.demo-look{isolation:isolate}
.demo-deg{position:absolute;inset:0;z-index:-1;display:grid;place-content:center;font-family:var(--cond);font-weight:800;font-size:clamp(10rem,46vw,15rem);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--ink);opacity:.35}
.demo .flatlay{background:transparent;box-shadow:none}
.demo-look::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:var(--r);background:var(--table);box-shadow:var(--shadow)}

/* ===== あと1着（買い足し提案・PR） ===== */
.pr{display:inline-grid;place-items:center;padding:1px 6px;border:1.5px solid currentColor;border-radius:4px;font-family:var(--cond);font-weight:800;font-size:.7rem;letter-spacing:.08em;line-height:1.3}
.shop{display:grid;gap:12px}
.sp-hero{position:relative;padding:8px 0 6px}
.pr-note{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.75rem;color:var(--muted)}
.sp-title{display:flex;flex-direction:column;margin:0;font-family:var(--cond);font-weight:800;font-size:clamp(5.5rem,30vw,11rem);line-height:.8;letter-spacing:-.03em}
.sp-title .o{color:transparent;-webkit-text-stroke:2px var(--ink);padding-left:.35em}
.sp-lead{margin:14px 0 0;font-size:.95rem;line-height:1.8}
.sp-fit{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;font-size:.9rem}
.sp-one{position:relative;display:grid;gap:14px;padding:22px 0 26px;border-top:2px solid var(--ink)}
.sp-rank{position:absolute;top:10px;right:0;z-index:4;margin:0;font-family:var(--cond);font-weight:800;font-size:4.2rem;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.sp-lay{padding-top:34px;min-height:280px}
.fl.is-new{position:relative}
.fl.is-new .ph{filter:drop-shadow(0 0 0 transparent) drop-shadow(0 10px 14px rgb(0 0 0/.22))}
.new-tag{position:absolute;top:2%;left:50%;translate:-50% 0;z-index:5;padding:2px 9px;border-radius:999px;background:#d29b8e;color:#1b1412;font-family:var(--cond);font-weight:800;font-size:.75rem;letter-spacing:.12em}
.sp-head{display:flex;justify-content:space-between;align-items:end;gap:12px}
.sp-name{display:flex;flex-direction:column;margin:0;font-size:1.6rem;line-height:1.2}
.sp-name small{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
.sp-n{display:flex;align-items:end;gap:4px;margin:0}
.sp-n .n{font-family:var(--cond);font-weight:800;font-size:3.6rem;line-height:.8}
.sp-n .u{font-size:.7rem;line-height:1.25;color:var(--muted)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(138px,42%);gap:10px;margin:0 -16px;padding:2px 16px 8px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail li{scroll-snap-align:start}
.rail a{display:grid;gap:4px;height:100%;padding:8px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.rail img,.rail .noimg{width:100%;aspect-ratio:1;object-fit:contain;border-radius:calc(var(--r) - 4px);background:#fff}
.rail .price{font-family:var(--cond);font-weight:800;font-size:1.25rem;letter-spacing:.01em}
.rail .pname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.75rem;line-height:1.45}
.rail small{color:var(--muted);font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail a:hover{translate:0 -2px}
.sp-more{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700}
.sp-note{margin:6px 0 0;font-size:.72rem;line-height:1.7;color:var(--muted)}
@media (min-width:760px){
  .sp-one{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;column-gap:28px}
  .sp-lay{grid-row:span 3}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);margin:0;padding:0;overflow:visible}
}

/* 今日の画面の入り口 */
.next-one{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"k k k" "lay name n";align-items:center;gap:6px 14px;margin:18px 0 6px;padding:14px 16px 16px;border-radius:var(--r);background:#0f0e0c;color:#f3eee6;text-decoration:none;overflow:hidden}
.nx-k{grid-area:k;display:flex;justify-content:space-between;align-items:center;font-family:var(--cond);font-weight:800;font-size:1rem;letter-spacing:.1em}
.nx-k .pr{color:#d29b8e}
.nx-lay{grid-area:lay;display:flex;align-items:center;gap:2px}
.nx-lay .ph{width:44px}
.nx-lay .ph.is-new{width:64px}
.nx-plus{font-family:var(--cond);font-weight:800;font-size:1.4rem;color:#d29b8e;margin:0 2px}
.nx-name{grid-area:name;display:flex;flex-direction:column;font-weight:700;font-size:1.05rem;line-height:1.3;min-width:0}
.nx-name small{font-size:.72rem;font-weight:600;color:#b9b2a8}
.nx-n{grid-area:n;display:flex;flex-direction:column;align-items:end;font-size:.65rem;color:#b9b2a8}
.nx-n b{font-family:var(--cond);font-weight:800;font-size:2.4rem;line-height:.85;color:#f3eee6}
.next-one:hover .is-new{translate:0 -3px;transition:translate .3s var(--ease)}
.next-one .ph{filter:drop-shadow(0 0 1px rgb(243 238 230/.7)) drop-shadow(0 0 6px rgb(243 238 230/.18))}
.nx-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 規約・ポリシー：読みやすさ優先（行長を抑え、見出しと番号を明確に） */
.agree{margin:10px 0 0;font-size:.75rem;color:var(--muted)}
.agree a{color:inherit}
.legal{max-width:40em;line-height:1.9}
.legal h2{font-size:1.1rem;margin:2.2rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--line)}
.legal ul,.legal ol{padding-left:1.3em}
.legal li{margin:.35em 0}
.legal-date{font-size:.85rem;color:var(--muted)}
.legal-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.legal-dl dt{color:var(--muted)}
.legal-dl dd{margin:0}
.legal-contact{margin-top:2.5rem}

/* 写真の処理：すぐに元の写真を出し、処理中は走査線を流す。段階とバーで進み具合を見せる */
.preview{display:grid;gap:10px;justify-items:start}
.stage{position:relative;width:100%;max-width:320px;overflow:hidden;border-radius:var(--r-sm)}
.stage canvas{display:block}
.stage.busy canvas{filter:saturate(.6) brightness(.85)}
.stage.busy::after{content:"";position:absolute;left:0;right:0;height:28%;top:-28%;background:linear-gradient(180deg,transparent,rgb(210 155 142/.45) 70%,rgb(255 255 255/.9) 72%,transparent 74%);animation:scan 1.6s var(--ease) infinite}
@keyframes scan{to{top:100%}}
@media (prefers-reduced-motion:reduce){.stage.busy::after{animation:none;top:0;height:100%;background:rgb(210 155 142/.18)}}
.steps{display:flex;gap:6px;margin:0;padding:0;list-style:none;width:100%;max-width:320px}
.steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;color:var(--muted)}
.steps li::before{content:"";width:100%;height:4px;border-radius:2px;background:var(--line)}
.steps li.on{color:var(--ink);font-weight:700}
.steps li.on::before{background:linear-gradient(90deg,var(--accent),var(--line));background-size:200% 100%;animation:stepflow 1.2s linear infinite}
.steps li.done{color:var(--ink)}
.steps li.done::before{background:var(--accent)}
@keyframes stepflow{from{background-position:100% 0}to{background-position:-100% 0}}
#prog{width:100%;max-width:320px;height:6px;border:0;border-radius:3px;background:var(--line);accent-color:var(--accent);overflow:hidden}
#prog::-webkit-progress-bar{background:var(--line)}
#prog::-webkit-progress-value{background:var(--accent);transition:width .3s}
#prog::-moz-progress-bar{background:var(--accent)}
/* 残りが読めない間（背景を消している最中）は、バーの中を光が流れる */
#prog:indeterminate{background:linear-gradient(90deg,var(--line) 0 30%,var(--accent) 50%,var(--line) 70% 100%) 0 0/300% 100%;animation:indet 1.4s linear infinite}
#prog:indeterminate::-webkit-progress-bar{background:transparent}
#prog:indeterminate::-moz-progress-bar{background:transparent}
@keyframes indet{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){#prog:indeterminate{animation:none;background:var(--accent-soft)}}

/* スクショから登録：2つ目の入口と、服の部分を囲む枠 */
.drops{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.drops{grid-template-columns:1fr 1fr}}
.drop.alt{background:transparent;font-weight:600;padding:18px}
.crop{display:grid;gap:10px;justify-items:start}
.crop-note{margin:0;font-size:.85rem;color:var(--muted)}
.crop-note.small{font-size:.72rem}
.crop-stage{position:relative;width:100%;max-width:360px;touch-action:none;user-select:none}
.crop-stage canvas{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.crop-box{position:absolute;box-shadow:0 0 0 9999px rgb(0 0 0/.55);outline:2px solid #fff;border-radius:4px;cursor:move;touch-action:none}
.crop-stage{overflow:hidden;border-radius:var(--r-sm)}
.crop-box.busy{animation:framepulse 1.1s ease-in-out infinite}
@keyframes framepulse{50%{outline-color:#d29b8e}}
.crop-box .h{position:absolute;width:26px;height:26px;border:3px solid #fff;touch-action:none}
.crop-box .tl{left:-4px;top:-4px;border-right:0;border-bottom:0;cursor:nwse-resize}
.crop-box .tr{right:-4px;top:-4px;border-left:0;border-bottom:0;cursor:nesw-resize}
.crop-box .bl{left:-4px;bottom:-4px;border-right:0;border-top:0;cursor:nesw-resize}
.crop-box .br{right:-4px;bottom:-4px;border-left:0;border-top:0;cursor:nwse-resize}
/* 角は指で掴みやすいよう、見た目より広く反応させる */
.crop-box .h::after{content:"";position:absolute;inset:-14px}

/* ===== 着せ替え（/app/fit） ===== */
.fit{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.fit>*{min-width:0}
.fit-hd{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fit-title{display:flex;align-items:baseline;gap:10px;margin:0;font-family:var(--cond);font-weight:800;font-size:clamp(2.6rem,12vw,4.2rem);line-height:.85;letter-spacing:-.02em}
.fit-title small{font-family:inherit;font-size:.9rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.fit-hint{margin:0;font-size:.78rem;color:var(--muted)}
.fit-main{display:grid;gap:10px;justify-items:center}
.fit-stage{position:relative;width:min(100%,340px,36vh);aspect-ratio:1/2;border-radius:var(--r-lg);background:radial-gradient(60% 40% at 50% 30%,rgb(255 255 255/.55),transparent 70%),var(--table,var(--sunk));overflow:hidden;touch-action:none;user-select:none}
@supports not (aspect-ratio:1/2){.fit-stage{height:calc(min(340px,36vh)*2)}}
.fit-body{position:absolute;inset:4% 0 2%;width:100%;height:94%}
.fit-body .skin{fill:var(--line);stroke:#000;stroke-opacity:.12;stroke-width:1}
:root[data-theme=dark] .fit-body .skin{fill:#3a3631}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .fit-body .skin{fill:#3a3631}}
.fit-layers{position:absolute;inset:0}
.layer{position:absolute;aspect-ratio:1;cursor:grab;touch-action:none;filter:drop-shadow(0 6px 8px rgb(0 0 0/.22));transition:filter .2s}
.layer img,.layer .ph{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.layer .ph{filter:none}
.layer.sel{outline:2px dashed var(--accent);outline-offset:2px;border-radius:8px}
.fit-empty{position:absolute;left:0;right:0;bottom:46%;margin:0;text-align:center;font-size:.85rem;color:var(--muted)}
.fit-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:360px}
.tool{min-width:44px;height:40px;padding:0 12px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.tool .ic{width:16px;height:16px}
.tool[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.fit-tray{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.fit-tray>*{min-width:0}
.tray-row h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.85rem;font-family:inherit;letter-spacing:.04em;color:var(--muted)}
.tray-row ul{display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:8px;margin:0 -16px;padding:2px 16px 6px;list-style:none;overflow-x:auto;scrollbar-width:none}
.tray-row ul::-webkit-scrollbar{display:none}
.pick{position:relative;display:block;width:72px;height:72px;padding:6px;border:0;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);cursor:pointer}
.pick img,.pick .ph{width:100%;height:100%;object-fit:contain}
.pick .ph{filter:none}
.pick[aria-pressed=true]{box-shadow:0 0 0 3px var(--accent),var(--shadow)}
.pick .new-tag{top:auto;bottom:-6px;font-size:.6rem;padding:1px 6px}
.fit-wear{display:flex;justify-content:center}
.fit-wear .btn:disabled{opacity:.4}
@media (min-width:760px){
  .fit{grid-template-columns:360px minmax(0,1fr);align-items:start;column-gap:28px}
  .fit-stage{width:min(340px,40vh)}
  .fit-hd{grid-column:1/-1}
  .fit-main{grid-row:2/4;position:sticky;top:76px}
  .tray-row ul{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,72px);margin:0;padding:0;overflow:visible}
}
.sp-try{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:999px;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700}
.sp-try .ic{width:20px;height:20px}
/* 羽織ったアウター：襟元から裾に向けてV字に前を開け、中の服を見せる */
.layer.open>*{clip-path:polygon(0 0,100% 0,100% 100%,58% 100%,50% 26%,42% 100%,0 100%)}
/* AIで着せた姿 */
.ai-go{display:flex;align-items:center;justify-content:center;gap:8px;width:min(100%,340px);background:linear-gradient(100deg,#1b1412,#3a2520 60%,#d29b8e);color:#fff;border:0}
.ai-go .spark{color:#f3d0c6;font-size:1.1em}
.ai-go:disabled{opacity:.4}
.ai-status{margin:0;min-height:1.2em;font-size:.8rem;text-align:center}
.fit-stage.busy::after{content:"";position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(180deg,transparent,rgb(210 155 142/.4) 70%,rgb(255 255 255/.8) 72%,transparent 74%);animation:scan 1.6s var(--ease) infinite;z-index:60}
.fit-ai{position:absolute;inset:0;z-index:50;margin:0;background:#eae7e2;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:6px;padding-bottom:10px}
.fit-ai img{width:100%;height:100%;object-fit:contain;min-height:0}

/* ===== 着こなし図鑑（/coordinate/:color/:kind） ===== */
.wear{display:grid;gap:18px}
.wear-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:12px;padding:18px;border-radius:var(--r-lg);background:var(--table,var(--sunk))}
.wear-art .ph{width:100%}
.wear-kicker{margin:0;font-size:.78rem;color:var(--muted);letter-spacing:.06em}
.wear-head h1{margin:.2em 0 .4em;font-size:clamp(1.35rem,5.4vw,2.2rem);line-height:1.3}
.wear-temp{display:flex;align-items:end;gap:6px;margin:0}
.wear-temp .n{font-family:var(--cond);font-weight:800;font-size:clamp(3.4rem,15vw,5.6rem);line-height:.8}
.wear-temp .u{font-family:var(--cond);font-weight:800;font-size:2rem;line-height:1}
.wear-temp .t{font-size:.72rem;line-height:1.35;color:var(--muted)}
.wear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.wear-look{margin:0;display:grid;gap:8px}
.wear-look .flatlay{min-height:260px;padding-top:24px}
.wear-look figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.78rem;color:var(--muted)}
.wear-look figcaption span::before{content:"+ ";color:var(--accent)}
.wear-try{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-lg);background:#0f0e0c;color:#f3eee6;text-decoration:none}
.wt-k{font-family:var(--cond);font-weight:800;font-size:1.6rem;letter-spacing:.04em;color:#d29b8e}
.wt-t{display:flex;flex-direction:column;gap:2px;font-weight:700;line-height:1.4}
.wt-t small{font-weight:400;font-size:.75rem;color:#b9b2a8}
.wear-try:hover .wt-k{color:#f3eee6}
.wear-shop{display:grid;gap:10px}
.wear-shop h2,.try-gap h2{display:flex;align-items:center;gap:8px;margin:0}
.wear-links h2{font-size:.9rem;color:var(--muted);margin:1rem 0 .4rem}
.wear-links .chips{margin:0}

/* ===== 今日の服装ページの「今日の1着」 ===== */
.day-pick{display:grid;gap:10px;margin:18px 0;padding:14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.dp-head{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.dp-art .ph{width:96px}
.dp-t{display:flex;flex-direction:column;gap:2px}
.dp-t small{font-size:.75rem;color:var(--muted)}
.dp-t b{font-size:1.25rem}
.dp-link{font-size:.8rem;color:var(--accent);font-weight:700}
.dp-link::after{content:" →"}

/* ===== おためし（/try） ===== */
.try{display:grid;gap:16px;padding-bottom:90px}
.try-cat h2{margin:.6rem 0 .4rem;font-size:.9rem;color:var(--muted);font-family:inherit}
.try-kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.try-kind{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"art name" "art colors";align-items:center;column-gap:8px;padding:8px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.tk-art{grid-area:art}
.tk-art .ph{width:44px;filter:none}
.tk-name{grid-area:name;font-size:.8rem;font-weight:700}
.tk-colors{grid-area:colors;display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tk-c{width:24px;height:24px;border-radius:50%;border:0;background:var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0/.18);cursor:pointer;position:relative}
.try-bar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 8px 30px rgb(0 0 0/.25)}
body:not(.has-tabbar) .try-bar{bottom:calc(12px + env(safe-area-inset-bottom))}
.try-count{margin:0;font-size:.85rem}
.try-count b{font-family:var(--cond);font-size:1.6rem}
.try-area{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted)}
.try-area select{font-size:.85rem}
.try-bar .ai-go{flex:1 1 100%;width:auto}
.try-result{display:grid;gap:14px}
.try-head{margin:0;font-weight:700}
.try-gap{display:grid;gap:10px;padding:14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.try-gap .muted{margin:0}
.try-import{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft)}
.try-import p{margin:0;flex:1 1 100%}
.wear-intro{margin:0;max-width:40em;line-height:1.9;font-size:.95rem}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.guide-grid a{display:grid;gap:6px;justify-items:center;padding:12px 8px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;font-size:.8rem;font-weight:700;text-align:center}
.guide-grid .ph{width:80px}
.guide-grid a:hover .ph{translate:0 -3px;transition:translate .25s var(--ease)}

/* ---- ワンピース：ボトムスなしの平置き ---- */
.flatlay:not(:has(.c-bottoms)){grid-template-areas:"tops outer" "tops outer" "tops shoes"}
.flatlay:not(:has(.c-bottoms)):not(:has(.c-outer)){grid-template-areas:"tops shoes" "tops shoes" "tops ."}

/* ---- ふだん着る服（売り場）：3着のハンガーから選ぶ ---- */
.sty{margin:0;padding:0;border:0;min-width:0}
.sty legend{padding:0 0 6px;font-size:.82rem;font-weight:700;color:var(--muted)}
.sty-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:12px;background:linear-gradient(var(--ink),var(--ink)) left 0 top 2px/100% 3px no-repeat}
.sty-o{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 4px 8px;border-radius:0 0 var(--r-sm) var(--r-sm);cursor:pointer;font-size:.82rem;transform-origin:50% 0;transition:rotate .35s var(--ease),background .2s}
.sty-o::before{content:"";position:absolute;top:-10px;left:50%;width:2px;height:22px;background:var(--ink)}
.sty-o input{position:absolute;opacity:0;inset:0;margin:0;min-height:0;cursor:pointer}
.sty-o .ph{width:68px;aspect-ratio:1}
.sty-o b{font-weight:600}
.sty-o:hover{rotate:-2deg}
.sty-o:has(:checked){background:var(--accent-soft)}
.sty-o:has(:checked) b{font-weight:800;color:var(--accent)}
.sty-o:has(:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.sty-scope:has(input[name=fit][value=mens]:checked) [data-only=ladies],.sty-scope:has(input[name=fit][value=ladies]:checked) [data-only=mens]{display:none}
.ask-style{display:grid;gap:12px;margin:0 0 20px;padding:14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.ask-style .btn{justify-self:end}

/* ---- ブランド：服の襟の織りネーム ---- */
.brands{margin:0;padding:0;border:0}
.brands legend,.brands summary{font-weight:700;font-size:.92rem;padding:0 0 8px}
.brands small{margin-left:.6em;font-weight:400;color:var(--muted)}
.wlabels{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wlabel{position:relative;display:block;cursor:pointer}
.wlabel input{position:absolute;opacity:0;inset:0;margin:0;min-height:0;cursor:pointer}
.wlabel span,.wlabel-s{display:block;padding:.5em .95em;font:600 .74rem/1.2 "Avenir Next Condensed","Roboto Condensed",system-ui,sans-serif;letter-spacing:.09em;background:var(--sunk);color:var(--ink);border-inline:2px dashed var(--line)}
.wlabel input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--accent)}
.wlabel input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.wlabel-s{background:var(--ink);color:var(--bg);border-color:var(--accent)}
.sp-brands{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;text-decoration:none}
.pbrand{align-self:flex-start;display:inline-block;margin:6px 0 -2px;padding:.2em .55em;font:700 .66rem/1.2 "Avenir Next Condensed","Roboto Condensed",system-ui,sans-serif;letter-spacing:.08em;background:var(--ink);color:var(--bg)}
.try-brands{margin:18px 0}
.try-brands summary{cursor:pointer}
.try>.sty{margin-bottom:18px}

/* ---- トップ：触れる見本 ---- */
.front{padding:30px 0 8px;text-align:center}
.front h1{margin:0 0 .35em;font-size:clamp(2.1rem,10.5vw,4rem);font-weight:900;line-height:1.14;letter-spacing:-.02em}
.front-sum{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35em;margin:0 0 18px;font-size:.92rem;color:var(--muted)}
.front-sum i{font-style:normal;color:var(--accent);font-weight:800}
.front-sum b{color:var(--ink)}
.front .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.front .agree{max-width:30em;margin-inline:auto}
.stg{--tint:#d9e2e6;position:relative;max-width:440px;margin:0 auto}
#stg-6:checked~*{--tint:#c8d6e4}#stg-13:checked~*{--tint:#d9dfd8}#stg-20:checked~*{--tint:#ece0c9}#stg-28:checked~*{--tint:#f3d3bd}
.stg-tabs{display:inline-flex;margin-bottom:-1px;position:relative;z-index:2}
.stg-tabs label{padding:.55em 1.2em;font-size:.86rem;font-weight:700;color:var(--muted);cursor:pointer;border-radius:10px 10px 0 0;transition:background .3s,color .2s}
#stg-l:checked~.stg-tabs [for=stg-l],#stg-m:checked~.stg-tabs [for=stg-m]{background:var(--tint);color:#141312}
.stg-board{position:relative;aspect-ratio:1/1.08;overflow:hidden;border-radius:var(--r);background:var(--tint);transition:background .6s var(--ease)}
.stg-look{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;translate:0 10px;transition:opacity .45s var(--ease),translate .45s var(--ease),visibility .45s}
.stg-look .flatlay{height:100%;padding:34px 40px 18px 22px;background:none}
.stg-deg{position:absolute;right:-.04em;bottom:-.16em;font:italic 700 clamp(8rem,44vw,12rem)/1 "Bodoni 72",Didot,Georgia,serif;color:transparent;-webkit-text-stroke:1.5px rgb(20 19 18/.2);letter-spacing:-.04em}
#stg-l:checked~#stg-6:checked~.stg-board .s-l.t-6,#stg-l:checked~#stg-13:checked~.stg-board .s-l.t-13,#stg-l:checked~#stg-20:checked~.stg-board .s-l.t-20,#stg-l:checked~#stg-28:checked~.stg-board .s-l.t-28,
#stg-m:checked~#stg-6:checked~.stg-board .s-m.t-6,#stg-m:checked~#stg-13:checked~.stg-board .s-m.t-13,#stg-m:checked~#stg-20:checked~.stg-board .s-m.t-20,#stg-m:checked~#stg-28:checked~.stg-board .s-m.t-28{opacity:1;visibility:visible;translate:0 0}
.stg .tate{position:absolute;top:14px;right:12px;margin:0;writing-mode:vertical-rl;font-size:.82rem;font-weight:700;letter-spacing:.3em;color:#141312}
.stg-scale{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:10px;padding-top:12px;background:linear-gradient(90deg,#7fa3c7,#b7c4a8,#e2c28d,#e08a5e) left 0 top 3px/100% 4px no-repeat}
.stg-scale label{display:grid;justify-items:center;padding:4px 0;cursor:pointer;color:var(--muted);transition:color .2s}
.stg-scale label::before{content:"";position:absolute;top:0;width:10px;height:10px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--line)}
.stg-scale b{font-size:1.15rem;line-height:1.3}
.stg-scale small{font-size:.7rem}
#stg-6:checked~.stg-scale [for=stg-6],#stg-13:checked~.stg-scale [for=stg-13],#stg-20:checked~.stg-scale [for=stg-20],#stg-28:checked~.stg-scale [for=stg-28]{color:var(--ink)}
#stg-6:checked~.stg-scale [for=stg-6]::before,#stg-13:checked~.stg-scale [for=stg-13]::before,#stg-20:checked~.stg-scale [for=stg-20]::before,#stg-28:checked~.stg-scale [for=stg-28]::before{background:var(--accent);box-shadow:0 0 0 2px var(--ink)}
.stg input:focus-visible~.stg-board{outline:3px solid var(--accent);outline-offset:3px}

/* 使い方：ラックに吊った下げ札 */
.htags{display:flex;gap:14px;margin:34px -16px 0;padding:24px 16px 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:linear-gradient(var(--ink),var(--ink)) left 0 top 8px/100% 4px no-repeat}
.htag{position:relative;flex:0 0 min(72vw,250px);padding:0 0 14px;scroll-snap-align:center;background:var(--surface);box-shadow:var(--shadow);clip-path:polygon(16% 0,84% 0,100% 7%,100% 100%,0 100%,0 7%);text-align:center;transform-origin:50% -20px}
.htag:nth-child(2){rotate:1.2deg}.htag:nth-child(1){rotate:-1deg}.htag:nth-child(3){rotate:-.6deg}
.htag::before{content:"";position:absolute;top:8px;left:50%;z-index:2;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line)}
.htag h2{margin:10px 0 0;font-size:2rem;font-weight:900;letter-spacing:.1em;line-height:1.2}
.htag p{margin:0;font-size:.82rem;color:var(--muted)}
.htag-art{position:relative;height:190px;display:grid;place-items:center;overflow:hidden;background:var(--table)}
.htag-art .ph{width:128px;aspect-ratio:1}
.shot{background:repeating-conic-gradient(var(--sunk) 0 25%,var(--surface) 0 50%) 0 0/20px 20px}
.scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:hscan 2.4s ease-in-out infinite alternate}
@keyframes hscan{to{top:calc(100% - 3px)}}
.ping{align-content:center;padding:26px 14px 10px;text-align:left}
.ping>*{width:100%}
.ping-t{display:flex;justify-content:space-between;margin:0;font-size:.68rem;color:var(--muted)}
.ping-m{margin:0 0 4px;font-size:.84rem;font-weight:700}
.ping-row{display:flex;justify-content:center}
.ping-row .ph{width:62px}
.worn .ph{width:150px}
.worn-tag{position:absolute;right:10px;bottom:14px;padding:.3em .8em .3em 1.5em;font-size:.72rem;font-weight:800;background:var(--accent);color:var(--accent-ink);clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);rotate:-8deg}

/* 1着足すと：組み合わせの数がそのまま増える */
.combo{margin:44px 0 0;text-align:center}
.combo-h{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25em .4em;margin:0 0 14px;font-size:1rem;font-weight:700}
.combo-h span{flex-basis:100%}
.combo-h b{font:italic 700 3.6rem/1 "Bodoni 72",Didot,Georgia,serif}
.combo-h small{font:700 .9rem system-ui,sans-serif}
.combo-h i{font-style:normal;color:var(--muted)}
.combo-h .up{color:var(--accent)}
.combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:380px;margin:0 auto;padding:0;list-style:none}
.combo-grid li{display:grid;justify-items:center;padding:8px 4px 4px;border-radius:var(--r-sm);background:var(--table)}
.combo-grid .ph{width:62%;aspect-ratio:1}
.combo-grid .cat-bottoms{margin-top:-14%}
.combo-grid .new{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);animation:pop 1.2s var(--ease) infinite alternate}
@keyframes pop{to{translate:0 -3px}}
.combo-go{display:inline-flex;align-items:center;gap:.4em;margin-top:14px;font-weight:700}

/* ブランドの帯：織りネームが流れる */
.bandw{margin:44px -16px 0;padding:14px 0 10px;background:var(--ink);color:var(--bg);overflow:hidden;text-align:center}
.bandw-run{display:flex;width:max-content;animation:run 46s linear infinite}
.bandw-run span{display:flex}
.bandw-run i{padding:0 1.1em;font:600 1rem/1.4 "Avenir Next Condensed","Roboto Condensed",system-ui,sans-serif;font-style:normal;letter-spacing:.14em;white-space:nowrap;border-right:1px dashed rgb(255 255 255/.25)}
@keyframes run{to{translate:-50% 0}}
.bandw p{margin:8px 16px 0;font-size:.8rem;opacity:.75}

/* 最後の一押し */
.last{margin:44px -16px -24px;padding:34px 16px 40px;text-align:center;background:var(--sunk)}
.last h2{margin:6px 0 16px;font-size:clamp(1.5rem,6.6vw,2.2rem);font-weight:900}
.last-art{display:flex;justify-content:center}
.last-art .ph{width:min(30vw,130px);aspect-ratio:1}
.last-art .ph:nth-child(1){rotate:-7deg;margin-right:-14px}.last-art .ph:nth-child(3){rotate:7deg;margin-left:-14px}

@media (prefers-reduced-motion:reduce){.scan,.bandw-run,.combo-grid .new{animation:none}}
@media (min-width:800px){.htags{justify-content:center;overflow:visible}}

/* 着たい服から組む */
.pick-main{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:.95rem}
.pick-main small{display:block;flex-basis:100%;color:var(--accent);font-weight:700}
.pick-main{flex-wrap:wrap}
.pick-art{width:72px;flex:none}
.pick-art .ph,.pick-art img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.pickw a.pick{display:block}
.try-main-pick{margin:18px 0}
.try-main-pick h2{margin:0 0 8px;font-size:.95rem}
.try-main-pick .chips{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;min-width:0}
.try-main-pick .chip{padding:.4em .9em;font:inherit;font-size:.82rem;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer}
.try-main-pick .chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* 登録で使えること：下げ札を並べる */
.unlock{margin:26px 0 8px;text-align:center}
.unlock h2{margin:0;font-size:1.3rem;font-weight:900}
.unlock .htags{margin-top:12px}
.unlock h3{margin:10px 0 0;font-size:1.7rem;font-weight:900;letter-spacing:.1em;line-height:1.2}
.unlock .htag{flex-basis:min(62vw,210px)}
.unlock .htag-art{height:160px}
.unlock .htag-art .ph{width:110px}
.unlock .ping .ph{width:54px}
.fitted{position:relative;background:var(--table)}
.fitted:has([data-only=ladies]):has([data-only=mens]){grid-auto-flow:column}
.fitted i{position:absolute;right:10px;top:26px;font:800 .72rem/1 system-ui,sans-serif;font-style:normal;padding:.35em .6em;background:var(--ink);color:var(--bg)}
.learn{grid-auto-flow:column;gap:6px;font-size:1.6rem;color:var(--accent)}
.learn i{width:46px;height:46px;border-radius:50%;background:var(--swatch)}
.count{align-content:center;background:var(--ink);color:var(--bg)}
.count b{font:italic 700 4.2rem/1 "Bodoni 72",Didot,Georgia,serif}
.count small{font-size:.72rem}
.unlock-go{margin-top:14px;padding-inline:2.4em}
.unlock-note{margin:6px 0 0;font-size:.78rem}
.try-result,.unlock{min-width:0;max-width:100%}
.unlock .htags{width:100%;margin-inline:0;padding-inline:0}

/* フッター：服の内側の縫い付けネームと、整理された棚 */
.ft{max-width:1040px;margin:1.5rem auto 0;padding:0 16px 32px;font-size:.84rem;color:var(--muted)}
.ft-label{display:grid;justify-items:center;width:min(100%,240px);margin:0 auto 28px;padding:12px 16px;color:var(--bg);background:var(--ink);translate:0 -1px;border-inline:3px dashed var(--line);text-align:center}
.ft-label .ic{font-size:1.1rem}
.ft-label b{font-size:1.05rem;font-weight:900;letter-spacing:.3em;margin-right:-.3em}
.ft-label small{font-size:.68rem;opacity:.75}
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;max-width:520px;margin-inline:auto}
.ft-h{margin:0 0 8px;padding-bottom:6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.ft-cols ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.ft-cols a,.ft-cols .link{display:block;padding:.3em 0;color:var(--muted);text-decoration:none;text-align:left;font-size:inherit}
.ft-cols a:hover,.ft-cols .link:hover{color:var(--accent)}
.ft-src{margin:24px 0 0;font-size:.72rem;text-align:center}
.ft-src a{color:inherit}

/* LINEログインの案内：緑のボタンを押すとアプリが開く */
.line-go{display:grid;justify-items:center;gap:12px;max-width:26em;margin:48px auto;text-align:center}
.line-go h1{margin:0;font-size:1.5rem}
.line-go p{margin:0;color:var(--muted)}
.line-btn{min-width:16em;margin-top:8px;background:#06c755;color:#fff}
.line-back{font-size:.84rem;color:var(--muted)}

/* 写真なしで登録：色をタップ */
.quick fieldset{margin:0 0 20px;padding:0;border:0}
.quick legend{padding:0 0 8px;font-weight:700}
.tk-c{display:block}
.tk-c input{position:absolute;inset:0;margin:0;min-height:0;opacity:0;cursor:pointer}
.tk-c:has(:checked){box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.tk-c:has(:checked)::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.7rem;font-weight:800;color:#fff;mix-blend-mode:difference;pointer-events:none}
.tk-c:has(:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.quick-go{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));width:100%}

/* 登録しました：少し見せて消える */
.flash{animation:rise .3s var(--ease),flash-out 3.2s var(--ease) forwards}
@keyframes flash-out{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* 使い方が見える下のメニューとボタン */
.tabbar a{display:grid;justify-items:center;gap:1px;font-size:.62rem;line-height:1.2;text-decoration:none}
.look-sheet .actions{padding-bottom:18px}
.icon-btn[data-cap]{position:relative;overflow:visible}
.icon-btn[data-cap]::after{content:attr(data-cap);position:absolute;top:100%;left:50%;translate:-50% 3px;font-size:.62rem;font-weight:600;color:var(--muted);white-space:nowrap}

/* はじめかた：3つのチェック */
.start{display:grid;gap:6px;margin:0 0 16px;padding:12px 14px;list-style:none;counter-reset:s;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.start li{counter-increment:s}
.start a{position:relative;display:grid;padding:6px 0 6px 38px;color:var(--ink);text-decoration:none}
.start a::before{content:counter(s);position:absolute;left:0;top:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:800;font-size:.85rem}
.start .done a::before{content:"✓";background:var(--accent);color:var(--accent-ink)}
.start .done b{color:var(--muted);text-decoration:line-through}
.start small{color:var(--muted);font-size:.74rem}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 0;padding:0;list-style:none;counter-reset:s}
.how3 li{counter-increment:s;font-size:.7rem;line-height:1.35;color:var(--muted)}
.how3 li::before{content:counter(s);display:grid;place-items:center;width:22px;height:22px;margin-bottom:3px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:800}
.how3 b{display:block;font-size:.8rem;color:var(--ink)}

/* 押した提案：その場で変わる */
.icon-btn.like.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.icon-btn.dislike.on{color:var(--accent);border-color:var(--accent)}
.btn.tag.on{background:var(--ink);color:var(--bg)}
.icon-btn.still .ic,.icon-btn.still::before,.icon-btn.still,.look-sheet.still .icon-btn.dislike{animation:none}
.icon-btn:disabled,.btn.tag:disabled{cursor:default}
.look-sheet.passed .flatlay{opacity:.4;scale:.96;filter:grayscale(.7);transition:opacity .45s var(--ease),scale .45s var(--ease),filter .45s var(--ease)}
.look-sheet.passed .icon-btn.dislike{color:var(--accent);border-color:var(--accent);animation:shake .4s var(--ease)}
.icon-btn.like.on .ic{animation:heart-pop .55s var(--ease)}
.icon-btn.like.on::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:heart-ring .6s var(--ease)}
.look-sheet.worn .btn.tag{transform-origin:12px 50%;animation:tag-swing .7s var(--ease)}
.look-sheet.worn .fl{animation:hop .5s var(--ease) both}
.look-sheet.worn .fl:nth-child(2){animation-delay:.07s}.look-sheet.worn .fl:nth-child(3){animation-delay:.14s}.look-sheet.worn .fl:nth-child(4){animation-delay:.21s}
@keyframes heart-pop{0%{scale:1}35%{scale:1.5}65%{scale:.9}100%{scale:1}}
@keyframes heart-ring{0%{opacity:.8;scale:.8}100%{opacity:0;scale:1.7}}
@keyframes shake{0%,100%{translate:0}25%{translate:-3px}75%{translate:3px}}
@keyframes tag-swing{0%{rotate:0deg}25%{rotate:-7deg}55%{rotate:4deg}80%{rotate:-2deg}100%{rotate:0deg}}
@keyframes hop{0%,100%{translate:0 0}45%{translate:0 -12px}}
@media (prefers-reduced-motion:reduce){.icon-btn.like.on .ic,.icon-btn.like.on::before,.look-sheet.worn .btn.tag,.look-sheet.worn .fl,.look-sheet.passed .icon-btn.dislike{animation:none}}
.icon-btn.like.on.still .ic,.icon-btn.like.on.still::before,.look-sheet.passed.still .icon-btn.dislike{animation:none}

/* 服の登録の入口：3つの方法を絵で選ぶ */
.drops[hidden],.drops-tips[hidden]{display:none}
.ways3{display:grid;grid-template-columns:1fr;gap:10px}
.way3{position:relative;display:grid;grid-template-columns:76px 1fr;grid-template-areas:"art title" "art sub";align-items:center;column-gap:12px;padding:12px;border-radius:var(--r);background:var(--sunk);color:var(--ink);text-decoration:none;cursor:pointer}
.way3:hover{outline:2px solid var(--ink)}
.way3:has(:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.way3 input{position:absolute;inset:0;width:100%;height:100%;margin:0;min-height:0;opacity:0;cursor:pointer}
.way3 b{grid-area:title;align-self:end;font-size:1rem}
.way3 small{grid-area:sub;align-self:start;color:var(--muted);font-size:.78rem}
.w3-art{grid-area:art;position:relative;display:grid;place-items:center;width:76px;height:76px}
.w3-art .ph{width:62px}
.w3-frame{position:absolute;inset:4px;border:2px solid var(--accent);border-radius:8px;border-style:dashed}
.w3-phone{border:3px solid var(--ink);border-radius:12px;width:54px;margin-inline:auto;background:var(--surface);overflow:hidden}
.w3-phone .ph{width:44px}
.w3-price{position:absolute;right:3px;bottom:2px;font:800 .62rem system-ui,sans-serif;font-style:normal;color:var(--accent)}
.w3-dots{grid-template-columns:repeat(2,26px);gap:6px;place-content:center}
.w3-dots i{width:26px;height:26px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0/.18)}
.shot-tips{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:.78rem;color:var(--muted)}
.shot-tips li::before{margin-right:.3em;font-weight:900}
.shot-tips .ok::before{content:"○";color:var(--ink)}
.shot-tips .ng::before{content:"×";color:var(--accent)}
.again{justify-self:start;font-size:.84rem}
.add-fields{display:grid;gap:inherit}
.add-fields[hidden]{display:none}
.add-more summary{cursor:pointer;font-size:.88rem;font-weight:700}
.add-more[open]{display:grid;gap:12px}
.not-cloth{margin-top:8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--accent-soft)}
.not-cloth p{margin:0;font-weight:800}
.not-cloth small{color:var(--muted)}

/* 入力欄のお手本は、押したら消す（入力済みに見えないように） */
input:focus::placeholder,textarea:focus::placeholder{color:transparent}
input::placeholder{color:var(--muted);opacity:.6}
.edit-art{width:120px;justify-self:center}
.edit-colors{margin:0;padding:0;border:0}
.edit-colors legend{padding:0 0 6px}

/* 着せ替え：指を置いても画面をスクロールできる。動かせるのは選んだ服だけ */
.fit-stage,.layer{touch-action:pan-y}
/* 中の重なり順を体の枠の中だけにして、下のタブより上に出ないように */
.fit-stage{isolation:isolate}
.layer.sel{touch-action:none}
/* スマホ：体を左、操作を右に並べて、下の服まで1画面に収める */
@media (max-width:719px){
  .fit{gap:10px}
  .fit-title{font-size:2.2rem}
  /* 大きさは数字で決める（aspect-ratio に頼ると、古い端末で体の枠の幅が 0 になる）。
     dvh はスクロールでアドレスバーが隠れるたびに変わるので、変わらない svh を使う */
  .fit-main{--fit-h:min(42vh,360px);grid-template-columns:calc(var(--fit-h)/2) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-items:start;justify-items:stretch;gap:8px 10px}
  @supports (height:1svh){.fit-main{--fit-h:min(42svh,360px)}}
  .fit-stage{grid-row:1/span 4;width:calc(var(--fit-h)/2);height:var(--fit-h);min-height:240px}
  .fit-main .ai-go{width:100%;padding:.7em .5em;font-size:.82rem}
  .fit-main .ai-status{margin:0;font-size:.72rem}
  .fit-tools{display:block;max-width:none}
  .fit-tools .tool{min-width:0;padding-inline:4px}
  .fit-wear .btn{width:100%;min-width:0;padding-inline:1.6em .4em;font-size:.82rem}
  .fit-main .ai-status:empty{display:none}
}
.ai-go.wait{opacity:.55}
.ai-go.going{cursor:progress}
.ai-go.going .spark{animation:spark-spin 1.2s linear infinite}
@keyframes spark-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.ai-go.going .spark{animation:none}}

/* 動線 */
.hd-gear{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;color:var(--ink);font-size:1.25rem}
.hd>nav{margin-left:auto}
.seg{display:grid;grid-template-columns:1fr 1fr;margin:8px 0 16px;padding:3px;border-radius:999px;background:var(--sunk)}
.seg a{padding:.45em 0;border-radius:999px;color:var(--muted);font-size:.88rem;font-weight:700;text-align:center;text-decoration:none}
.seg a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.item-link{display:block;color:inherit;text-decoration:none}
.again-bar{display:flex;align-items:center;justify-content:center;gap:.4em;margin:0 0 14px;padding:.75em;border-radius:var(--r);background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.item-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.item-acts a{display:grid;justify-items:center;gap:4px;padding:12px 4px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-size:.76rem;font-weight:700;text-decoration:none}
.item-acts .ic{font-size:1.3rem}
.item-del{margin:14px 0 0;text-align:center}
.item-del .link{color:var(--muted);font-size:.84rem}
@media (max-width:719px){.closet-mast .mast-tools{display:none}}

/* 定番セット：1タップで始める */
.starters h2{margin:0 0 4px;font-size:1.1rem}
.starters .muted{margin:0 0 10px;font-size:.8rem}
.starters[hidden]{display:none}
#starters{margin:14px 0}
.starter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.starter-grid form{margin:0}
.starter{display:grid;justify-items:center;width:100%;padding:8px 6px 10px;border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer;transition:transform var(--dur) var(--ease)}
.starter:active{transform:scale(.97)}
.starter b{margin-top:6px;font-size:.95rem}
.starter small{color:var(--muted);font-size:.72rem}
.starter-art{width:100%;padding:8px 8px 2px;min-height:0}
.starter-own{display:block;margin:12px 0 0;text-align:center;font-size:.88rem}
.try-own{margin:6px 0 -6px;font-size:1rem}
.grow{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px 14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.grow-n{font-size:.8rem;white-space:nowrap}
.grow-n b{font:italic 700 2rem/1 "Bodoni 72",Didot,Georgia,serif;margin-right:2px}
.grow-t{display:grid;font-size:.84rem;font-weight:700}
.grow-t small{color:var(--accent);font-weight:700}
.grow .plus{margin-left:auto}
.try-bar:has(#try-go:disabled) .ai-go{display:none}
.try .how3{margin-top:6px}

/* ラックの端に吊る「足すなら」：手持ちと区別して、影のように見せる */
.next-hang{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.next-hang .ph{background:none;opacity:.75}
.next-cap{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--muted)}
.next-cap .pr{font-size:.6rem}
.try-more .pick[aria-pressed=false]{outline:1.5px dashed var(--line);outline-offset:-3px}
/* 着せている間だけ出る商品の画像リンク */
.try-shop[hidden]{display:none}
.try-shop{margin-top:6px}
.try-rail{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:8px;margin:0 -16px;padding:2px 16px 6px;list-style:none;overflow-x:auto;scrollbar-width:none}
.try-rail a{display:grid;gap:2px;color:var(--ink);text-decoration:none}
.try-rail img{width:96px;height:96px;object-fit:cover;border-radius:10px;background:var(--sunk)}
.try-rail b{font-size:.78rem}
.try-all{display:inline-block;margin-top:2px;font-size:.78rem}
/* ラックの端だと見てもらえないので、手前から3番目に吊る */
.rack .hang:nth-child(-n+2),.shelf .hang:nth-child(-n+2),.next-hang{order:-1}

/* 記録の中の「足すなら」：カードに混ざるが、枠で手持ちと区別する */
.next-card{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.next-card a{display:grid;justify-items:center;gap:1px;height:100%;padding:10px 8px;color:var(--ink);text-decoration:none;text-align:center}
.next-card .ph{width:70%;aspect-ratio:1;background:none;opacity:.8}
.next-card small{color:var(--muted);font-size:.7rem}
.next-card>a>b{font-size:.82rem;line-height:1.3}
.grid>li{min-width:0}

/* はじめての案内：画面の実物を照らす */
.tour-hole{position:fixed;z-index:100;border-radius:14px;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgb(0 0 0/.62);pointer-events:none;transition:left .3s var(--ease),top .3s var(--ease),width .3s var(--ease),height .3s var(--ease)}
.tour-tip{position:fixed;z-index:101;left:16px;right:16px;max-width:420px;margin-inline:auto;padding:14px 16px 12px;border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);transition:top .3s var(--ease)}
.tour-tip p{margin:0;font-size:.88rem}
.tour-tip .tour-no{font-size:.72rem;color:var(--muted)}
.tour-tip .tour-t{font-size:1.1rem;font-weight:900}
.tour-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.tour-row .link{color:var(--muted);font-size:.84rem}
@media (prefers-reduced-motion:reduce){.tour-hole,.tour-tip{transition:none}}
.hint[hidden]{display:none}
.hint{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:.82rem}
.hint .link{color:var(--ink);text-decoration:none;font-size:1rem}
.hd-help{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border:1.8px solid var(--ink);border-radius:50%;color:var(--ink);font-weight:800;font-size:.9rem;text-decoration:none}
.hd-help+.hd-gear{margin-left:0}

/* できること */
.gd{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.gd a{display:grid;grid-template-columns:48px 1fr auto;grid-template-areas:"art title where" "art sub sub";align-items:center;column-gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.gd-art{grid-area:art;display:grid;place-items:center;width:48px;height:48px;font-size:1.4rem}
.gd-art .ph{width:44px;filter:none}
.gd b{grid-area:title;font-size:.95rem}
.gd small{grid-area:sub;color:var(--muted);font-size:.76rem;line-height:1.4}
.gd i{grid-area:where;padding:.1em .6em;border-radius:999px;background:var(--sunk);color:var(--muted);font-size:.68rem;font-style:normal;white-space:nowrap}
.gd-again{display:block;width:100%;text-align:center}

/* アクセシビリティ */
html{scroll-padding-top:72px;scroll-padding-bottom:90px}
.skip{position:fixed;left:8px;top:-60px;z-index:200;padding:.6em 1em;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.bandw:hover .bandw-run,.bandw:focus-within .bandw-run{animation-play-state:paused}
.motion-off,.motion-off *{animation-play-state:paused!important}
.motion{display:block;margin:6px auto 0;font-size:.8rem}
.crop-all{justify-self:start;font-size:.84rem}
.layer:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 服の管理ガイド */
.front-kicker{margin:0 0 .4em;font-size:.84rem;font-weight:700;color:var(--muted)}
.guide-lead{font-size:1rem}
.guide-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.guide-list a{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.guide-list b{font-size:.92rem;line-height:1.5}
.guide-list small{color:var(--muted);font-size:.76rem;line-height:1.5}
.guide-art .wear-try{margin:1.6rem 0}

/* 今日の予定 */
.scene{display:flex;gap:6px;margin:12px 0 4px;overflow-x:auto;scrollbar-width:none}
.scene a{flex:none;padding:.4em 1em;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-size:.84rem;font-weight:700;text-decoration:none}
.scene a[aria-current]{background:var(--ink);color:var(--bg)}
.suggs[aria-busy=true]{opacity:.5;transition:opacity .2s}

/* イマイチの理由 */
.why{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.why button{min-height:36px;padding:0 .9em;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.why button:hover{border-color:var(--ink)}

/* 今日と明日 */
.days{display:grid;grid-template-columns:1fr 1fr;margin:0 0 12px;padding:3px;border-radius:999px;background:var(--sunk)}
.days a{padding:.45em 0;border-radius:999px;color:var(--muted);font-size:.88rem;font-weight:700;text-align:center;text-decoration:none}
.days a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.plan{margin:0}
.plan-badge{position:absolute;top:12px;right:14px;z-index:6;margin:0;padding:.15em .7em;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.72rem;font-weight:700}
/* 端末で動く処理の説明（服の内タグの見立て） */
.dev-note{border:1px solid var(--line);border-left:6px double var(--line);border-radius:4px;padding:8px 12px;font-size:.82rem;color:var(--muted)}
.dev-note summary{cursor:pointer;font-weight:700;min-height:24px}
.dev-note ul{margin:8px 0 2px;padding-left:1.1em;display:grid;gap:6px}
.drops[hidden]~.dev-note{display:none}
ul.chips{list-style:none;padding:0;margin-left:0}
/* クローゼットの服の名前：服に付いた下げ札 */
.hang-tag{position:relative;display:block;width:fit-content;max-width:100%;margin:8px auto 0;padding:3px 9px 3px 19px;border:1px solid var(--line);border-radius:3px;background:var(--surface);font-size:.74rem;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hang-tag::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border:1px solid var(--muted);border-radius:50%}
/* 試着：調整は服を選んだときだけ、名前付きで出す */
.fit-tools.off .tool-adj{display:none}
.fit-tools>.tool{width:100%}
.tool-adj{display:grid;gap:5px;width:100%}
.tool-g{margin:3px 0 0;font-size:.72rem;font-weight:700;color:var(--muted)}
.tool-g small{margin-left:.6em;font-weight:400;font-size:.66rem}
.tool-2,.tool-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.tool-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tool-adj .tool{width:100%;min-width:0;height:36px;padding-inline:2px}
.tool-adj .tool-done{background:var(--ink);color:var(--bg)}
.fit.ai-on .ai-go,.fit.ai-on .fit-tools{display:none}
.ai-zoom{display:block;width:100%;height:100%;min-height:0;padding:0;border:0;background:none;cursor:zoom-in}
.ai-big{width:min(100vw - 24px,440px);max-height:calc(100vh - 24px);padding:12px;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
.ai-big::backdrop{background:rgb(0 0 0/.6)}
.ai-big img{display:block;width:100%;height:auto;max-height:calc(100vh - 170px);object-fit:contain;background:#eae7e2}
.ai-big p{margin:8px 0;font-size:.74rem;color:var(--muted);text-align:center}
.ai-big form{display:flex;justify-content:center}
@media (max-width:719px){
  /* 服を選ぶ間もマネキンが見えるように、上に残す（グリッドの中では sticky が効かないのでブロックにする） */
  .fit{display:block}
  .fit-hd{margin-bottom:8px}
  .fit-main{position:sticky;top:56px;z-index:5;margin-inline:-16px;padding:6px 16px 8px;background:var(--bg);box-shadow:0 8px 8px -8px rgb(0 0 0/.14)}
  .fit-tray{margin-top:10px}
  .fit.adjusting .ai-go,.fit.adjusting .ai-status,.fit.adjusting .fit-wear{display:none}
}
/* クローゼットの選択 */
.sel-row{display:flex;justify-content:flex-end;margin:0 0 6px;font-size:.84rem}
.selecting .next-hang,.selecting .rail-empty{display:none}
.selecting .hang .item-link{position:relative;cursor:pointer}
.selecting .hang .item-link::after{content:"";position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--muted);background:var(--surface);font-size:.8rem;font-weight:800;color:var(--bg)}
.selecting .hang.picked .item-link::after{content:"✓";border-color:var(--accent);background:var(--accent)}
.selecting .hang.picked .item-link{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.hang.gone{opacity:0;scale:.9;transition:opacity .22s var(--ease),scale .22s var(--ease)}
.sel-bar{position:fixed;left:50%;translate:-50% 0;bottom:calc(84px + env(safe-area-inset-bottom));z-index:7;display:flex;align-items:center;gap:12px;width:min(calc(100vw - 24px),440px);padding:8px 10px 8px 16px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}
.sel-bar[hidden]{display:none}
.sel-n{margin:0 auto 0 0;font-size:.85rem}
.sel-n b{font-size:1.2rem}
.sel-del{background:var(--accent);color:#fff}
.sel-del:disabled{opacity:.4}
@media (min-width:720px){.sel-bar{bottom:20px}}
/* ホーム画面への追加の案内（服の下げ札の見立て） */
.inst{position:relative;margin:0 0 12px;padding:10px 38px 12px 14px;border:1px solid var(--line);border-left:6px double var(--line);border-radius:4px;background:var(--surface);font-size:.85rem}
.inst[hidden],.inst [hidden]{display:none}
.inst p{margin:2px 0 8px;color:var(--muted);font-size:.78rem}
.inst-x{position:absolute;top:2px;right:2px;width:36px;height:36px;border:0;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer}
.inst-ios{margin:0;padding-left:1.3em;display:grid;gap:4px;font-size:.8rem}
.inst-ios .ic{width:16px;height:16px;margin-right:4px;vertical-align:-3px}
/* 登録した服がクローゼットへ入る動き */
.fly{position:fixed;left:calc(50% - 60px);top:38%;width:120px;z-index:40;pointer-events:none;will-change:transform}
.fly[hidden]{display:none}
.fly-host{position:relative}
.fly-n{position:absolute;top:-8px;left:calc(50% + 8px);padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;line-height:1.5;white-space:nowrap;pointer-events:none}