/* ============================================================
   OPTIC — 淡いグレーの地に、白い面と写真を浮かべる
   ・番号マーカーにカードが接続する。カードに番号は入れない
   ・文字はサンセリフ一種類
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-size:15px;line-height:1.5;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
[lang="ja"],.ja{font-family:var(--f-jp);line-height:1.85;font-feature-settings:"palt" 1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--card)}

.wrap,.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:var(--shell)}
main{padding-bottom:90px;min-height:70vh}

/* ============================================================
   TYPE
   ============================================================ */
.d1{font-weight:700;line-height:1.05;letter-spacing:-.03em;font-size:clamp(26px,4vw,38px);margin:0}
.d2{font-weight:700;line-height:1.1;letter-spacing:-.028em;font-size:clamp(21px,3vw,28px);margin:0}
.d3{font-weight:600;line-height:1.2;letter-spacing:-.02em;font-size:16px;margin:0}
.eyebrow,.lb{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut)}
.mono{font-size:12px;color:var(--ink-2);letter-spacing:0;line-height:1.5}
.mut{color:var(--mut)}
.lede{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:36em}

.sh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.sh .d3{flex:none;font-size:17px;font-weight:700;letter-spacing:-.025em}
.sh .ln{flex:1;min-width:8px;height:0}
.sh .mono{color:var(--mut);flex:none;margin-left:auto;font-size:12px}
.sh a.mono{color:var(--ink);font-weight:500}

/* ============================================================
   CHIP
   ============================================================ */
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;box-shadow:var(--sh-1);
  transition:color var(--t1) linear,background-color var(--t1) linear,
             border-color var(--t1) linear,transform var(--t1) var(--e)}
@media (hover:hover){ .chip:hover{color:var(--ink);border-color:currentColor} }
.chip:active{transform:scale(.97)}
.chip.on,.chip[aria-pressed="true"],.chip.volt{background:var(--ink);color:var(--card);
  border-color:var(--ink)}
.chip.hot{background:var(--warn);color:#fff;border-color:var(--warn)}
.chip.ghost{background:transparent;border-color:transparent;box-shadow:none;
  padding:0 8px;color:var(--mut)}
@media (hover:hover){ .chip.ghost:hover{color:var(--ink);background:var(--cred-hi)} }
.chip[disabled]{opacity:.35;cursor:default}
.chip .n{opacity:.55}
.chip.sm{height:32px;padding:0 12px;font-size:12px}
.chip.lg{height:46px;padding:0 22px;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ============================================================
   HEADER — 構造は据え置き
   ============================================================ */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--card);
  border-bottom:1px solid var(--line);
  transition:transform var(--t2) var(--e),box-shadow var(--t2) linear}
.hd.up{transform:translateY(-110%)}
.hd.deep{box-shadow:0 2px 12px -6px rgba(16,16,20,.22)}
.hd-pad{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.hd-in{display:flex;align-items:center;gap:10px;height:var(--head)}
.mark{display:flex;align-items:center;gap:8px;flex:none;
  font-weight:800;font-size:17px;letter-spacing:-.025em}
.mark .eye{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.srch{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;
  border:1px solid transparent;border-radius:var(--r-pill);background:var(--bg);
  transition:border-color var(--t1) linear,background-color var(--t1) linear}
.srch:focus-within{border-color:var(--ink);background:var(--card)}
.srch svg{width:15px;height:15px;flex:none;stroke:var(--mut);fill:none;stroke-width:1.9}
.srch input{flex:1;min-width:0;font-size:14px}
.srch input:focus{outline:0}
.srch input::placeholder{color:var(--mut)}
.srch input::-webkit-search-cancel-button{-webkit-appearance:none}
.ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  position:relative;color:var(--ink);transition:background-color var(--t1) linear}
.ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .ico:hover{background:var(--bg)} }
.ico .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--card)}
.ico.add{background:var(--ink);color:var(--card);box-shadow:var(--sh-2)}
/* 戻る。文字は置かない */
.ico.back{width:34px;height:34px;margin-left:-6px;color:var(--ink-2)}
.ico.back svg{width:20px;height:20px;stroke-width:1.8}
@media (hover:hover){ .ico.back:hover{color:var(--ink);background:var(--bg-2)} }
@media (max-width:760px){ .ico.back{width:42px;height:42px;margin-left:-10px} }
@media (hover:hover){ .ico.add:hover{background:var(--red)} }
.me-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;background:var(--well)}
.me-wrap{position:relative;display:block;flex:none;border-radius:50%}
.me-wrap[aria-current]::after{content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--ink)}
.burger{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--ink);transition:background-color var(--t1) linear}
@media (hover:hover){ .burger:hover{background:var(--bg)} }
.burger i{display:block;width:16px;height:1.6px;background:currentColor;border-radius:2px;
  position:relative;transition:background-color var(--t1) linear}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:16px;height:1.6px;
  background:currentColor;border-radius:2px;transition:transform var(--t2) var(--e)}
.burger i::before{top:-5px} .burger i::after{top:5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:760px){
  .hd-in{display:grid;height:auto;padding:9px 0 10px;row-gap:9px;column-gap:8px;
    grid-template-columns:auto auto 1fr auto auto auto;
    grid-template-areas:'burger mark . bell add me' 'srch srch srch srch srch srch';
    align-items:center}
  .burger{grid-area:burger} .mark{grid-area:mark}
  .sugwrap{grid-area:srch} .bell{grid-area:bell} .add{grid-area:add} .me-wrap{grid-area:me}
  .ico,.burger{width:42px;height:42px}
  .srch{height:42px}
}
@media (max-width:380px){ .mark .txt{display:none} .hd-in{column-gap:4px} }

/* ============================================================
   DRAWER
   ============================================================ */
.drw{position:fixed;inset:0;z-index:85;display:none}
.drw.open{display:block}
.drw .scrim{position:absolute;inset:0;background:var(--veil);animation:fade var(--t2) linear}
.drw .pane{position:absolute;left:0;top:0;bottom:0;width:min(370px,88vw);
  display:flex;flex-direction:column;background:var(--card);
  animation:slidein var(--t3) var(--e-out)}
@keyframes slidein{from{transform:translateX(-16px);opacity:0}to{transform:none;opacity:1}}
@keyframes drwin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.drw .top{flex:none;display:flex;align-items:center;gap:12px;
  padding:16px var(--pad) 13px;border-bottom:1px solid var(--line)}
.drw .top .d3{flex:1;font-size:17px;font-weight:700;letter-spacing:-.025em}
.drw .body{flex:1 1 auto;overflow-y:auto;padding:4px var(--pad) 30px;-webkit-overflow-scrolling:touch}
.drw .g{border-bottom:1px solid var(--line-2)}
.drw .gh{display:flex;align-items:center;gap:10px;width:100%;padding:15px 0;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.drw .gh .ar{margin-left:auto;font-size:13px;color:var(--mut);transition:transform var(--t2) var(--e)}
.drw .g.open .gh .ar{transform:rotate(90deg)}
.drw .g .kids{display:none;padding:0 0 12px}
.drw .g.open .kids{display:block}
.drw .ch{display:flex;align-items:center;gap:8px;width:100%;padding:10px 0;
  font-size:14px;color:var(--ink-2);transition:color var(--t1) linear}
@media (hover:hover){ .drw .ch:hover{color:var(--ink)} }
.drw .ch .ar{margin-left:auto;font-size:12px;color:var(--mut);transition:transform var(--t2) var(--e)}
.drw .c.open .ch{color:var(--ink)}
.drw .c.open .ch .ar{transform:rotate(90deg)}
.drw .c .subs{display:none;padding:0 0 10px}
.drw .c.open .subs{display:flex;flex-wrap:wrap;gap:6px}
.drw a.all{display:block;padding:13px 0;font-size:14px;font-weight:600;color:var(--ink)}
.drw .n{font-size:12px;color:var(--mut)}

/* ============================================================
   SUGGEST
   ============================================================ */
.sugwrap{position:relative;flex:1;min-width:0;display:flex}
.sug{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
  max-height:min(62vh,440px);overflow-y:auto;padding:6px;
  background:var(--card);border-radius:var(--r-2);box-shadow:var(--sh-3)}
.sug[hidden]{display:none}
.sug a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-1);
  min-width:0;transition:background-color var(--t1) linear}
.sug a:hover,.sug a.cur{background:var(--sug-hi)}
.sug .lb2{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug .s2{margin-left:auto;font-size:12px;color:var(--mut);flex:none}
.sug .sg-brand .lb2{font-weight:700;letter-spacing:-.015em}
.sug .sg-category .lb2,.sug .sg-item .lb2{font-weight:400;color:var(--ink-2)}
.sug .rule{border-top:1px solid var(--line-2);margin-top:5px;padding-top:11px}
.sug img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}

/* ============================================================
   商品情報カード — マーカーに接続する白い札
   出すのは Brand / Product / Domain と矢印だけ
   ============================================================ */
.pcard-info{background:var(--card);border-radius:var(--r-2);box-shadow:var(--sh-3);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 13px 12px 16px;color:var(--ink)}
.pcard-info .bd{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.018em;
  line-height:1.25;overflow-wrap:anywhere}
.pcard-info .pn{display:block;font-size:13px;font-weight:400;color:var(--ink-2);
  line-height:1.35;margin-top:3px;overflow-wrap:anywhere}
.pcard-info .dm{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--mut);
  line-height:1.3;margin-top:5px;overflow-wrap:anywhere}
.pcard-info .dm svg{width:10px;height:10px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pcard-info .ar{width:19px;height:19px;flex:none;fill:none;stroke:var(--ink);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t2) var(--e)}
@media (hover:hover){ a.pcard-info:hover .ar{transform:translateX(3px)} }

/* ============================================================
   番号マーカー — 写真に打たれた注記
   ・地が写真なのでテーマに追従させない。白と黒の固定値を使う
   ・既定＝白地に黒数字 / 選択＝黒地に白数字 / 一覧から指された＝丸で囲む
   ============================================================ */
.marks{position:absolute;inset:0;z-index:6;pointer-events:none}
.mk{position:absolute;pointer-events:auto;touch-action:none;
  transform:translate(-50%,-50%) scale(.8);
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--on-photo);color:var(--on-photo-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.08);
  font-size:10.5px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  opacity:0;cursor:pointer;z-index:2;
  transition:opacity var(--t2) linear,transform var(--t2) var(--e-pop),
             background-color var(--t1) linear,color var(--t1) linear,
             box-shadow var(--t1) linear}
.mk::before{content:'';position:absolute;inset:-11px;border-radius:50%}
.mk.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:hover){ .mk.in:hover{transform:translate(-50%,-50%) scale(1.06)} }
/* 選択中。白黒を入れ替える */
.mk.on{background:var(--on-photo-ink);color:var(--on-photo);
  /* 白い輪。暗い面のカードに重なっても黒い円が沈まない */
  box-shadow:0 0 0 2px var(--on-photo), 0 2px 8px rgba(0,0,0,.35)}
.mk.in.on{transform:translate(-50%,-50%) scale(1.08)}
/* 一覧から指されている。鉛筆で丸を打ったように囲う */
.mk.lit{box-shadow:0 0 0 2px var(--on-photo), 0 0 0 3.5px var(--on-photo-ink),
                  0 1px 4px rgba(0,0,0,.3)}
.mk.in.lit{transform:translate(-50%,-50%) scale(1.06)}
.mk.unk{color:#8A8A92}
.mk.unk:not(.static){font-size:14px;font-weight:600;line-height:0}
.prow.unk .no{font-size:14px;line-height:0}
.mk.off{display:none}
.mk.static{pointer-events:none}
/* カードが開いているあいだは、選ばれた番号だけ残す */
.marks.one .mk:not(.on){opacity:0;pointer-events:none}
.mk:focus-visible{outline:2px solid var(--on-photo-ink);outline-offset:3px;
  box-shadow:0 0 0 2px var(--on-photo),0 1px 4px rgba(0,0,0,.3)}

/* 写真の上に出るカード。マーカーの横に接続する */
.ocard{position:absolute;z-index:5;width:min(268px,calc(100% - 28px));
  opacity:0;transform:translateY(3px) scale(.985);transform-origin:left center;
  pointer-events:none;
  transition:opacity var(--t2) linear,transform var(--t2) var(--e-out)}
.ocard.in{opacity:1;transform:none;pointer-events:auto}
/* マーカーが重なる側だけ余白を足す */
.ocard .pcard-info{padding-left:30px}
.ocard.pos-left .pcard-info{padding-left:16px;padding-right:30px}
.ocard.below .pcard-info{padding-left:14px;padding-right:13px}

/* ============================================================
   FEED
   ============================================================ */
/* モバイルも2列。写真が主役のまま一覧性を上げる */
.feed{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .feed{grid-template-columns:repeat(3,1fr)} }

.pcard{display:block;min-width:0}
.pshot{position:relative;display:block;background:var(--well);overflow:hidden;
  border-radius:var(--r-2);aspect-ratio:4/5;box-shadow:var(--sh-1)}
.pshot img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity var(--t3) linear,transform var(--t4) var(--e)}
.pshot img.in{opacity:1}
/* フィードのカードは見せるだけ。押すとタイル全体のリンクが働く */
.pshot .ocard{pointer-events:none;width:min(190px,calc(100% - 34px))}
.pshot .ocard .pcard-info{padding:9px 11px 10px 27px;border-radius:12px;gap:9px}
.pshot .ocard.pos-left .pcard-info{padding-left:13px;padding-right:26px}
.pshot .ocard.below .pcard-info{padding-left:12px;padding-right:11px}
.pshot .ocard .bd{font-size:13px}
.pshot .ocard .pn{font-size:11.5px;margin-top:2px}
.pshot .ocard .dm{font-size:10.5px;margin-top:3px}
.pshot .ocard .ar{width:16px;height:16px}
.pshot .mk{width:25px;height:25px;font-size:10px}
@media (hover:hover){ .pcard:hover .pshot img{transform:scale(1.015)} }

.pmeta{display:flex;align-items:center;gap:9px;padding:10px 3px 0;min-width:0}
.pmeta .av{width:22px;height:22px;flex:none}
.pmeta .u{font-size:13px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmeta .w{margin-left:auto;font-size:12px;color:var(--mut);flex:none}

/* ---- FEED BREAK ---- */
.brk{grid-column:1/-1;margin:clamp(20px,2.6vw,32px) 0 clamp(4px,1vw,10px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line)}
.brk-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.brk-h .tag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);flex:none;width:100%}
.brk-h .tag i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.brk-h .k{font-size:clamp(19px,2.4vw,24px);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;margin:0;flex:1 1 auto;min-width:0}
.brk-h .go{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;
  border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-1);
  font-size:12.5px;font-weight:500;color:var(--ink);flex:none}
@media (hover:hover){ .brk-h .go:hover{background:var(--ink);color:var(--card)} }
.brk-row{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.brk-row .pshot{aspect-ratio:3/4}
@media (max-width:760px){
  .brk-row{grid-auto-flow:column;grid-auto-columns:38vw;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scrollbar-width:none}
  .brk-row::-webkit-scrollbar{display:none}
  .brk-row>*{scroll-snap-align:start}
}
.brk-words{display:flex;flex-wrap:wrap;gap:8px}
.brk-words a{display:inline-flex;align-items:center;height:38px;padding:0 16px;
  border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-1);
  font-size:13.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  transition:background-color var(--t1) linear,color var(--t1) linear}
@media (hover:hover){ .brk-words a:hover{background:var(--ink);color:var(--card)} }

/* ============================================================
   LOOK
   ============================================================ */
.look{display:grid;gap:22px;align-items:start}
@media (min-width:900px){
  .look{grid-template-columns:minmax(0,1fr) 290px;gap:clamp(22px,3vw,34px)}
  .look .side{position:sticky;top:calc(var(--head) + 22px)}
}
.stage{position:relative;margin:0 auto;background:var(--well);overflow:hidden;
  border-radius:var(--r-3);box-shadow:var(--sh-2);
  /* 横長は高さを抑え、縦長は見せる。横幅は常にカラムに従う */
  width:100%;max-width:calc(var(--cap,70vh) * var(--ar,.8))}
.stage img{display:block;width:100%;height:auto;
  opacity:0;transition:opacity var(--t3) linear}
.stage img.in{opacity:1}

/* 写真の下の番号の並び。マーカーと同じ形・同じ反転をする */
.numbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0;justify-content:center}
.nb{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);color:var(--ink-2);box-shadow:0 0 0 1px var(--line);
  font-size:10.5px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  transition:background-color var(--t1) linear,color var(--t1) linear,
             box-shadow var(--t1) linear,transform var(--t1) var(--e)}
.nb::before{content:'';position:absolute;inset:-9px;border-radius:50%}
@media (hover:hover){ .nb:hover{color:var(--ink);box-shadow:0 0 0 1px var(--ink)} }
.nb.on{background:var(--ink);color:var(--card);box-shadow:none;transform:scale(1.06)}
.nb.lit{color:var(--ink);box-shadow:0 0 0 1px var(--bg),0 0 0 2.5px var(--ink)}

/* ---- 一覧 ---- */
.plist{list-style:none;margin:0;padding:0;background:var(--card);
  border-radius:var(--r-2);box-shadow:var(--sh-2);overflow:hidden}
.plist li+li{border-top:1px solid var(--line-2)}
.prow{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;
  gap:4px 13px;align-items:center;width:100%;padding:14px;
  transition:background-color var(--t1) linear}
.prow .no{grid-column:1;grid-row:1/span 2;align-self:center;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-2);color:var(--ink-2);
  font-size:10.5px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  transition:background-color var(--t1) linear,color var(--t1) linear}
.prow .hit{display:block;min-width:0;grid-column:2;grid-row:1}
.prow .bd{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.018em;
  line-height:1.25;overflow-wrap:anywhere}
.prow .pn{display:block;font-size:13px;color:var(--ink-2);line-height:1.35;margin-top:2px;
  overflow-wrap:anywhere}
.prow .dm{display:inline-flex;align-items:center;gap:4px;grid-column:2;grid-row:2;
  justify-self:start;font-size:12px;color:var(--mut);overflow-wrap:anywhere;
  transition:color var(--t1) linear}
.prow .dm svg{width:10px;height:10px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .prow .dm:hover{color:var(--ink)} }
.prow .ar{grid-column:3;grid-row:1/span 2;align-self:center;
  width:17px;height:17px;flex:none;fill:none;stroke:var(--mut);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .prow:hover{background:var(--cred-hi)} }
.prow.sel{background:var(--cred-sel)}
.prow.sel .no{background:var(--ink);color:var(--card)}
.prow.unk .bd{color:var(--mut)}
#credits .prow{cursor:pointer}

/* ============================================================
   ACTIONS
   ============================================================ */
.acts{display:flex;align-items:center;gap:2px;flex:none}
.act{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px;
  border-radius:var(--r-pill);color:var(--ink-2);font-size:13px;font-weight:500;
  transition:color var(--t1) linear,background-color var(--t1) linear}
.act svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .act:hover{color:var(--ink);background:var(--bg-2)} }
.act.lit{color:var(--red)}
.act.lit svg{fill:currentColor;stroke:currentColor}
#save.lit{color:var(--ink)}

/* ============================================================
   PANEL / ROWS / FIELD
   ============================================================ */
.glass,.panel{background:var(--card);border:0;border-radius:var(--r-2);
  box-shadow:var(--sh-2);padding:16px}
.rows{list-style:none;margin:0;padding:0;background:var(--card);
  border-radius:var(--r-2);box-shadow:var(--sh-2);overflow:hidden}
.rows li+li{border-top:1px solid var(--line-2)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  width:100%;padding:14px 15px;background:transparent;border:0;border-radius:0;
  transition:background-color var(--t1) linear}
@media (hover:hover){ .row:hover{background:var(--cred-hi)} }
.row.thumb{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
.row>span:first-child{min-width:0}
.row .bn{font-size:14.5px;font-weight:700;letter-spacing:-.018em;line-height:1.25;
  overflow-wrap:anywhere}
.row .sub{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis}
.row .end{font-size:12px;color:var(--mut);white-space:nowrap}
.row img.t{width:42px;height:52px;object-fit:cover;border-radius:8px;background:var(--well)}
.row .new{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.av{border-radius:50%;object-fit:cover;flex:none;background:var(--well)}
.field{margin:0 0 18px}
.field>label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field .in{display:block;width:100%;font-size:16px;padding:12px 14px;
  border-radius:var(--r-1);background:var(--card);border:1px solid var(--line);
  transition:border-color var(--t1) linear}
.field .in:focus{outline:0;border-color:var(--ink)}
.field .in::placeholder{color:var(--mut)}
.field .note{display:block;margin-top:7px;font-size:12px;color:var(--mut)}
.field .note.bad{color:var(--warn)}

/* ============================================================
   SHEET
   ============================================================ */
.ov{position:fixed;inset:0;z-index:90;background:var(--veil);display:none}
.ov.open{display:block;animation:fade var(--t2) linear}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sbox{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  /* 実際に見えている高さ(--vvh)を超えない。キーボードが出ても footer が隠れない */
  max-height:88vh;max-height:min(88dvh, var(--vvh, 88dvh));
  background:var(--card);border-radius:var(--r-3) var(--r-3) 0 0;
  box-shadow:0 -10px 40px -14px rgba(16,16,20,.4);
  animation:up var(--t3) var(--e-out)}
@keyframes up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:720px){
  .sbox{left:50%;right:auto;top:50%;bottom:auto;width:540px;max-height:84vh;max-height:84dvh;
    border-radius:var(--r-3);transform:translate(-50%,-50%);box-shadow:var(--sh-3);
    animation:upc var(--t3) var(--e-out)}
  @keyframes upc{from{transform:translate(-50%,-47%) scale(.99);opacity:0}
                 to{transform:translate(-50%,-50%) scale(1);opacity:1}}
}
.sh-h{flex:none;padding:17px var(--pad) 13px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--line-2)}
.sh-h .d3{flex:1;min-width:0;font-size:17px;font-weight:700;letter-spacing:-.025em}
.sh-b{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px var(--pad);
  -webkit-overflow-scrolling:touch;overflow-wrap:anywhere;
  /* 中身の端まで来てもページ側にスクロールが伝わらない */
  overscroll-behavior:contain}
.sh-f{flex:none;padding:12px var(--pad) calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-2);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ============================================================
   MISC
   ============================================================ */
.cmt{padding:13px 0;border-bottom:1px solid var(--line-2);display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:11px}
.cmt>div{min-width:0}
.cmt:last-child{border-bottom:0}
.cmt .u{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.cmt .w{font-size:12px;color:var(--mut);margin-left:8px}
.cmt p{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--ink-2);
  overflow-wrap:anywhere;word-break:break-word}
.composer{display:flex;gap:8px;align-items:center}
.composer input{flex:1;min-width:0;font-size:16px;padding:11px 15px;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid transparent}
.composer input:focus{outline:0;border-color:var(--ink);background:var(--card)}
.empty{padding:64px 0;text-align:center}
.empty .d3{font-size:17px;font-weight:700;letter-spacing:-.025em}
.empty p{color:var(--ink-2);margin:10px 0 20px;font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99;
  padding:12px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--card);
  box-shadow:var(--sh-3);font-size:13px;font-weight:500;animation:up var(--t2) var(--e-out)}
.foot{border-top:1px solid var(--line);margin-top:72px;padding:22px var(--pad) 42px;
  max-width:var(--shell);margin-inline:auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.foot .mono{color:var(--mut)}
.foot .chips{margin-left:auto}
.skel{aspect-ratio:4/5;border-radius:var(--r-2);background:var(--well);
  animation:shim 1.6s ease-in-out infinite}
@keyframes shim{0%,100%{opacity:1}50%{opacity:.5}}
.prog{position:fixed;top:0;left:0;height:2px;z-index:100;width:0;background:var(--ink);
  transition:width 240ms var(--e),opacity 240ms linear}
.prog.done{opacity:0}

.rise{opacity:0}
.rise.seen{opacity:1;transition:opacity var(--t3) linear}
body.leaving main{opacity:0;transition:opacity 150ms linear}

/* ============================================================
   旧グリッド（検索・ブランド・プロフィール）
   ============================================================ */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){ .grid{grid-template-columns:repeat(3,1fr)} }
.tile{position:relative;display:block;background:var(--well);overflow:hidden;
  border-radius:var(--r-2);aspect-ratio:4/5;box-shadow:var(--sh-1)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity var(--t3) linear,transform var(--t4) var(--e)}
.tile img.in{opacity:1}
@media (hover:hover){ .tile:hover img{transform:scale(1.015)} }
.tcap{position:absolute;right:9px;top:9px;display:inline-flex;align-items:center;
  height:22px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--on-photo);color:var(--on-photo-ink);box-shadow:var(--sh-1);
  font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.tcap .u{display:none}
.railrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);
  gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
.railrow::-webkit-scrollbar{display:none}
.railrow>*{scroll-snap-align:start}
@media (min-width:860px){ .railrow{grid-auto-columns:minmax(180px,1fr);
  margin-inline:0;padding-inline:0} }

/* ============================================================
   PROFILE
   ============================================================ */
.pf{display:flex;gap:clamp(16px,3vw,26px);align-items:flex-start}
.pf-av{width:clamp(66px,9vw,86px);height:clamp(66px,9vw,86px);border-radius:50%;
  object-fit:cover;flex:none;background:var(--well)}
.pf-main{min-width:0;flex:1}
.pf-name{font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(21px,3.4vw,32px);margin:0;overflow-wrap:anywhere}
.pf-handle{font-size:13px;color:var(--mut);margin:6px 0 0}
.pf-bio{margin:13px 0 0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:38em;
  overflow-wrap:anywhere}
.pf-nums{display:flex;gap:22px;flex-wrap:wrap;margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.pf-nums b{font-weight:700;color:var(--ink)}
.pf-act{margin-top:16px}
@media (max-width:560px){ .pf{gap:14px} .pf-nums{gap:16px;font-size:13px} }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:760px){
  .chip{height:42px;padding:0 16px}
  /* iOS は 16px 未満の input にフォーカスするとページ全体を拡大し、
     そのズームが画面遷移後も残る。ここが「戻ると拡大している」の原因 */
  .srch input{font-size:16px}
  .chip.sm{height:38px;padding:0 13px}
  .chip.lg{height:48px}
  .act{height:42px;padding:0 12px}
  .row{padding:15px}
  .prow{padding:15px 14px}
  .prow .hit{min-height:42px}
  .prow .dm{min-height:42px;padding:10px 0 2px}
  .sug a{padding:12px}
  .drw .ch{padding:12px 0}
  .mk{width:30px;height:30px;font-size:11.5px}
  .mk::before{inset:-10px}
  .nb{width:48px;height:42px}
  .field .in,.composer input{min-height:44px}
}

/* 背の低い端末（iPhone SE / Safari のツールバーが出ている状態）*/
@media (max-height:700px){
  .sh-h{padding:13px var(--pad) 10px}
  .sh-b{padding:13px var(--pad)}
  .sh-f{padding:10px var(--pad) calc(12px + env(safe-area-inset-bottom,0px))}
  .field{margin:0 0 14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  .rise{opacity:1}
  .mk{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .prog{display:none}
}