@charset "UTF-8";
/* ============================================================================
   공주 레퍼런스 — 디자인 시스템
   ----------------------------------------------------------------------------
   흰 바탕 하나로 간다. 사진이 주인공이고, 귀여움은 사진을 건드리지 않는 곳에만 둔다.
   원칙
     1) 바탕은 흰색. 사진 둘레에 색을 쓰지 않는다.
     2) 귀여움은 캐릭터와 작은 움직임으로. 글씨와 버튼은 차분하게.
     3) 한 손으로 쓴다. 누르는 것은 48px 이상, 주요 이동은 화면 아래.
     4) 분홍은 채우기용(흰 글씨 4.6:1)과 글씨용을 나눠 쓴다.
   ========================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root {
  --bg:          #FFFFFF;
  --sunken:      #F7F7F9;
  --surface:     #FFFFFF;
  --surface-2:   #F7F7F9;
  --line:        #ECECF0;
  --line-2:      #DCDCE2;

  --ink:         #17171A;
  --ink-2:       #65656C;
  --ink-3:       #76767D;
  --faint:       #ADADB4;

  --brand:       #D6336C;
  --brand-dark:  #BC2A5E;
  --brand-ink:   #D6336C;
  --soft:        #FFF1F5;
  --soft-line:   #FFD9E3;
  --on-brand:    #FFFFFF;

  --danger:      #C6283C;
  --danger-soft: #FFF1F2;
  --ok:          #10794F;

  --char-ink:    #4A4038;
  --char-fill:   #FFFFFF;
  --char-blush:  #FFC3CD;
  --char-spark:  #FF8FA3;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --sh-1: 0 1px 2px rgba(23,23,26,.05);
  --sh-2: 0 2px 8px rgba(23,23,26,.06), 0 12px 28px rgba(23,23,26,.05);
  --sh-3: 0 8px 20px rgba(23,23,26,.10), 0 24px 56px rgba(23,23,26,.09);

  --t11:11px; --t12:12px; --t13:13px; --t14:14px; --t15:15px;
  --t17:17px; --t20:20px; --t24:24px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --fast:.14s; --mid:.24s;

  --tap:48px; --bar:60px;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
              "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:var(--t15); line-height:1.6; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere }
img { max-width:100% }
[hidden] { display:none!important }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:6px }
::selection { background:var(--soft); color:var(--brand-ink) }
h1,h2,h3 { margin:0; letter-spacing:-.02em; line-height:1.32; text-wrap:balance }
p { margin:0 }
ul,ol { margin:0; padding:0; list-style:none }
a { color:var(--brand-ink) }
button { font:inherit }

.wrap { width:100%; max-width:1160px; margin:0 auto; padding-inline:clamp(16px,4.2vw,28px) }
main { display:block; padding-block:var(--s5)
       calc(var(--bar) + var(--s9) + env(safe-area-inset-bottom,0px)) }

/* ── 캐릭터와 움직임 ─────────────────────────────────────────────────── */
.char { display:block; color:var(--char-ink); overflow:visible }
.char--hero { width:168px; height:168px; margin:0 auto }
.char--md   { width:104px; height:104px; margin:0 auto }
.char--sm   { width:34px;  height:34px; flex:none }
.char--xs   { width:26px;  height:26px; flex:none }

@keyframes c-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes c-blink { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)} }
@keyframes c-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.015)} }
@keyframes c-sway  { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes c-twinkle{ 0%,100%{opacity:.25;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }
@keyframes c-zfloat { 0%{opacity:0;transform:translate(0,4px) scale(.8)} 30%{opacity:.75}
                      100%{opacity:0;transform:translate(7px,-16px) scale(1.1)} }
@keyframes c-pop    { 0%{transform:scale(.72)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion: no-preference) {
  .char .c-all   { animation:c-float 3.6s var(--ease) infinite; transform-origin:100px 150px }
  .char .c-body  { animation:c-breathe 4.2s var(--ease) infinite; transform-origin:100px 110px }
  .char .c-eye   { animation:c-blink 5.4s steps(1,end) infinite; transform-origin:center }
  .char .c-spark { animation:c-twinkle 2.2s var(--ease) infinite; transform-origin:center }
  .char .c-spark:nth-of-type(2){ animation-delay:.5s }
  .char .c-spark:nth-of-type(3){ animation-delay:1.1s }
  .char .c-z     { animation:c-zfloat 3s var(--ease) infinite;
                   animation-delay:calc(var(--i,0) * .6s) }
  .char--hero .c-all { animation-duration:4s }
  .appbar-logo:active .char .c-all { animation:c-sway .5s var(--ease) 1 }
  .char--pop { animation:c-pop .4s var(--spring) 1 }
}

/* ── 상단 바 ─────────────────────────────────────────────────────────── */
.appbar { position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color var(--fast) var(--ease) }
.appbar.is-stuck { border-bottom-color:var(--line) }
.appbar .wrap { display:flex; align-items:center; gap:var(--s2); min-height:56px }
.appbar-title { font-size:var(--t17); font-weight:700; letter-spacing:-.02em; margin-right:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.appbar-logo { display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none;
  color:var(--ink); margin-right:auto; min-height:var(--tap) }
.appbar-logo b { font-size:var(--t17); font-weight:800; letter-spacing:-.03em }
.iconbtn { display:inline-grid; place-items:center; width:var(--tap); height:var(--tap);
  border:0; background:none; color:var(--ink-2); cursor:pointer; border-radius:var(--r-full);
  text-decoration:none; flex:none; transition:transform var(--fast) var(--spring) }
.iconbtn:hover { color:var(--ink); background:var(--surface-2) }
.iconbtn:active { transform:scale(.9) }
.iconbtn svg { width:24px; height:24px }
.iconbtn--on { color:var(--brand-ink) }

/* ── 하단 탭 ─────────────────────────────────────────────────────────── */
.tabbar { position:fixed; inset:auto 0 0 0; z-index:30; display:grid;
  grid-auto-flow:column; grid-auto-columns:1fr;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px) }
.tabbar a { display:grid; justify-items:center; align-content:center; gap:3px;
  min-height:var(--bar); text-decoration:none; color:var(--ink-3);
  font-size:var(--t11); font-weight:600; letter-spacing:-.01em;
  transition:color var(--fast) var(--ease) }
.tabbar a svg { width:24px; height:24px; transition:transform var(--mid) var(--spring) }
.tabbar a[aria-current="page"] { color:var(--brand-ink) }
.tabbar a[aria-current="page"] svg { transform:translateY(-1px) scale(1.08) }
.tabbar a:active svg { transform:scale(.88) }

/* ── 버튼 ────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s5); font-size:var(--t15); font-weight:700;
  letter-spacing:-.02em; border:1px solid var(--line-2); border-radius:var(--r-full);
  background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none;
  white-space:nowrap;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
             transform var(--fast) var(--spring) }
.btn:hover { background:var(--surface-2) }
.btn:active { transform:scale(.96) }
.btn--primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand) }
.btn--primary:hover { background:var(--brand-dark); border-color:var(--brand-dark) }
.btn--ghost { background:none; border-color:transparent; color:var(--ink-2); padding-inline:var(--s3) }
.btn--ghost:hover { background:var(--surface-2); color:var(--ink) }
.btn--danger { color:var(--danger) }
.btn--danger:hover { background:var(--danger-soft) }
.btn--block { width:100% }
.btn--lg { min-height:56px; font-size:var(--t17); border-radius:var(--r-lg) }
.btn--sm { min-height:38px; padding:0 var(--s3); font-size:var(--t13); font-weight:600 }
.btn[disabled] { opacity:.45; pointer-events:none }

/* ── 입력 ────────────────────────────────────────────────────────────── */
.input { width:100%; min-height:52px; padding:0 var(--s4); font:inherit; font-size:var(--t17);
  letter-spacing:-.01em; color:var(--ink); background:var(--surface-2);
  border:1.5px solid transparent; border-radius:var(--r);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease) }
.input::placeholder { color:var(--faint) }
.input:focus { outline:none; background:var(--surface); border-color:var(--brand) }
textarea.input { min-height:84px; padding:var(--s3) var(--s4); font-size:var(--t15);
  line-height:1.6; resize:vertical }
select.input { font-size:var(--t15); -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat }
.field { display:block }
.field > span { display:block; font-size:var(--t13); font-weight:600; color:var(--ink-2);
  margin-bottom:var(--s2) }

/* ── 섹션 제목 ───────────────────────────────────────────────────────── */
.section { display:flex; align-items:baseline; gap:var(--s2); margin:0 0 var(--s4) }
.section h2 { font-size:var(--t20); font-weight:800 }
.section .count { font-size:var(--t13); color:var(--ink-3); font-variant-numeric:tabular-nums }
.section .act { margin-left:auto }

/* ── 분류 카드 ───────────────────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s4) }
.card { display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--mid) var(--ease), transform var(--mid) var(--spring) }
.card:hover { box-shadow:var(--sh-2); transform:translateY(-3px) }
.card:active { transform:scale(.99) }
.card-cover { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:2px; background:var(--line-2); aspect-ratio:16/10 }
.card-cover img { width:100%; height:100%; min-height:0; object-fit:cover; display:block;
  background:var(--surface-2) }
.card-body { padding:var(--s4) var(--s5) var(--s5); display:grid; gap:var(--s1) }
.card-body b { font-size:var(--t17); font-weight:700; letter-spacing:-.02em }
.card-body .sub { font-size:var(--t13); color:var(--ink-2) }
.card-body .meta { font-size:var(--t12); color:var(--ink-3); font-variant-numeric:tabular-nums;
  margin-top:var(--s1) }

/* ── 칩 ──────────────────────────────────────────────────────────────── */
.chips { display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none;
  padding-block:var(--s1) var(--s3); scroll-snap-type:x proximity }
.chips::-webkit-scrollbar { display:none }
.chips--wrap { flex-wrap:wrap; overflow:visible }
.chip { flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 var(--s4); font-size:var(--t14); font-weight:600;
  letter-spacing:-.02em; color:var(--ink-2); background:var(--surface-2);
  border:1px solid transparent; border-radius:var(--r-full); text-decoration:none;
  white-space:nowrap; cursor:pointer;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease),
             transform var(--fast) var(--spring) }
.chip:hover { color:var(--ink) }
.chip:active { transform:scale(.94) }
.chip.is-on { color:var(--on-brand); background:var(--brand); border-color:var(--brand) }
.chip .n { font-size:var(--t11); opacity:.6; font-variant-numeric:tabular-nums }

/* ── 사진 격자 ───────────────────────────────────────────────────────── */
.photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s3) }
.photo { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  scroll-margin-top:124px; transition:border-color var(--fast) var(--ease) }
.photo:hover { border-color:var(--line-2) }
.photo-shot { display:block; width:100%; padding:0; border:0; cursor:zoom-in;
  background:var(--sunken); aspect-ratio:4/5; overflow:hidden; position:relative }
.photo-shot img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--mid) var(--ease) }
.photo:hover .photo-shot img { transform:scale(1.035) }
.photo-shot::after { content:""; position:absolute; inset:0; background:#000; opacity:0;
  transition:opacity var(--fast) var(--ease) }
.photo-shot:active::after { opacity:.07 }
.photo-body { padding:var(--s2) var(--s3) var(--s3); display:grid; gap:2px }
.photo-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--s2) }
.photo-no { font-size:var(--t11); font-weight:800; color:var(--brand-ink);
  font-variant-numeric:tabular-nums }
.photo-head b { font-size:var(--t13); font-weight:700; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.photo-era { font-size:var(--t11); color:var(--ink-3) }
.photo-sub { font-size:var(--t11); color:var(--brand-ink); text-decoration:none; font-weight:600 }
.photo-edit { position:absolute; top:var(--s2); right:var(--s2); width:34px; height:34px;
  border:0; border-radius:var(--r-full); background:rgba(255,255,255,.92); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; opacity:0; box-shadow:var(--sh-1);
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--spring) }
.photo:hover .photo-edit, .photo-edit:focus-visible { opacity:1 }
.photo-edit:active { transform:scale(.88) }
.photo-edit svg { width:17px; height:17px }
@media (hover:none) { .photo-edit { opacity:1 } }

/* ── 빈 상태 ─────────────────────────────────────────────────────────── */
.empty { display:grid; justify-items:center; gap:var(--s3); text-align:center;
  padding:var(--s9) var(--s5) }
.empty h3 { font-size:var(--t17); font-weight:700 }
.empty p { font-size:var(--t14); color:var(--ink-2); max-width:32ch }

/* ── 안내 ────────────────────────────────────────────────────────────── */
.note { font-size:var(--t13); color:var(--ink-2); background:var(--surface-2);
  border-radius:var(--r); padding:var(--s3) var(--s4) }
.note--bad { color:var(--danger); background:var(--danger-soft); font-weight:600 }
.lede { font-size:var(--t14); color:var(--ink-2); line-height:1.65; max-width:64ch }
.hint { font-size:var(--t13); color:var(--ink-3); text-align:center }
.caution { font-size:var(--t12); color:var(--ink-3); background:var(--surface-2);
  border-radius:var(--r); padding:var(--s2) var(--s3) }

/* ── 로그인 ──────────────────────────────────────────────────────────── */
.enter { min-height:100svh; display:grid; place-items:center;
  padding:var(--s6) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom,0px)) }
.enter-inner { width:min(380px,100%); display:grid; gap:var(--s6) }
.enter-head { display:grid; justify-items:center; gap:var(--s3); text-align:center }
.enter-head h1 { font-size:var(--t24); font-weight:800 }
.enter-head p { font-size:var(--t14); color:var(--ink-2) }
.enter form { display:grid; gap:var(--s3) }

/* ── 찾기 패널 ───────────────────────────────────────────────────────── */
.finder { position:sticky; top:calc(56px + env(safe-area-inset-top,0px)); z-index:15;
  background:rgba(255,255,255,.93); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding-block:var(--s3); margin-bottom:var(--s4); border-bottom:1px solid var(--line) }
.finder-row { display:flex; gap:var(--s2) }
.finder-row .input { flex:1; min-width:0 }
.facet { display:grid; gap:2px; padding-block:var(--s2) }
.facet-label { font-size:var(--t11); font-weight:700; color:var(--faint); letter-spacing:.04em }
.picked { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-top:var(--s2) }
.picked .chip { min-height:34px; padding:0 var(--s3); font-size:var(--t13) }
.clear { font-size:var(--t13); font-weight:600; color:var(--ink-3); background:none;
  border:0; cursor:pointer; padding:var(--s2) }
.clear:hover { color:var(--danger) }

/* ── 크게 보기 ───────────────────────────────────────────────────────── */
dialog.lb { border:0; padding:0; background:transparent; width:100vw; height:100dvh;
  max-width:100vw; max-height:100dvh; overflow:hidden }
dialog.lb::backdrop { background:rgba(12,12,14,.95) }
dialog.lb[open] { animation:lb-in .18s var(--ease) }
@keyframes lb-in { from{opacity:0} to{opacity:1} }
.lb-stage { height:100%; display:grid; grid-template-rows:1fr auto }
.lb-canvas { grid-row:1; display:grid; place-items:center; min-height:0; padding:var(--s4) }
.lb-canvas img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px }
.lb-foot { grid-row:2; display:grid; gap:var(--s2);
  padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.55); backdrop-filter:blur(12px); color:#fff;
  max-height:46dvh; overflow-y:auto }
.lb-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s2) }
.lb-title b { font-size:var(--t15); font-weight:700 }
.lb-era { font-size:var(--t13); color:rgba(255,255,255,.66) }
.lb-tags { display:flex; flex-wrap:wrap; gap:5px }
.lb-tags span { font-size:var(--t11); color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.15); border-radius:var(--r-full); padding:2px 9px }
.lb-notes { display:grid; gap:var(--s1); font-size:var(--t13); line-height:1.6;
  color:rgba(255,255,255,.88) }
.lb-notes li { padding-left:var(--s3); position:relative }
.lb-notes li::before { content:""; position:absolute; left:2px; top:.62em; width:4px; height:4px;
  border-radius:50%; background:var(--char-blush) }
.lb-src { display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
  font-size:var(--t11); color:rgba(255,255,255,.6);
  border-top:1px solid rgba(255,255,255,.14); padding-top:var(--s2) }
.lb-src a { color:#fff; text-decoration:none; font-weight:600; white-space:nowrap }
.lb-count { font-variant-numeric:tabular-nums }
.lb-nav { position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0;
  border-radius:var(--r-full); background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(8px) }
.lb-nav svg { width:26px; height:26px }
.lb-nav[disabled] { opacity:.22; cursor:default }
.lb-prev { left:var(--s2) } .lb-next { right:var(--s2) }
.lb-close { position:fixed; top:calc(var(--s3) + env(safe-area-inset-top,0px)); right:var(--s3);
  width:44px; height:44px; border:0; border-radius:var(--r-full);
  background:rgba(255,255,255,.16); color:#fff; font-size:22px; line-height:1; cursor:pointer;
  backdrop-filter:blur(8px) }

/* ── 바텀 시트 ───────────────────────────────────────────────────────── */
dialog.sheet { border:0; padding:0; background:transparent; width:100vw; max-width:560px;
  max-height:92dvh; margin:auto auto 0 }
dialog.sheet::backdrop { background:rgba(12,12,14,.42); backdrop-filter:blur(3px) }
dialog.sheet[open] { animation:sheet-in .26s var(--spring) }
@keyframes sheet-in { from{transform:translateY(28px); opacity:0} to{transform:none; opacity:1} }
.sheet-in { background:var(--bg); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom,0px));
  display:grid; gap:var(--s4); max-height:92dvh; overflow-y:auto }
.sheet-grab { width:40px; height:4px; border-radius:var(--r-full); background:var(--line-2);
  justify-self:center; margin-bottom:var(--s2) }
.sheet-head { display:flex; align-items:center; gap:var(--s2) }
.sheet-head h3 { font-size:var(--t17); font-weight:800 }
.sheet-head .x { margin-left:auto }
.sheet-acts { display:flex; gap:var(--s2) }
.sheet-acts .btn { flex:1 }

/* ── 토스트 ──────────────────────────────────────────────────────────── */
.toast { position:fixed; left:50%; z-index:60;
  bottom:calc(var(--bar) + var(--s4) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); display:flex; align-items:center; gap:var(--s2);
  background:var(--ink); color:#fff; font-size:var(--t14); font-weight:600;
  padding:var(--s3) var(--s5); border-radius:var(--r-full); box-shadow:var(--sh-3);
  animation:toast-in .3s var(--spring) }
.toast .char { width:26px; height:26px; color:#fff }
@keyframes toast-in { from{transform:translate(-50%,14px); opacity:0}
                      to{transform:translate(-50%,0); opacity:1} }

/* ── 올리기 ──────────────────────────────────────────────────────────── */
.drop { border:2px dashed var(--line-2); border-radius:var(--r-lg); padding:var(--s7) var(--s5);
  text-align:center; display:grid; justify-items:center; gap:var(--s2); cursor:pointer;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease) }
.drop:hover, .drop.is-over { border-color:var(--brand); background:var(--soft) }
.drop b { font-size:var(--t15) }
.drop span { font-size:var(--t13); color:var(--ink-3) }

/* ── 정리 화면 ───────────────────────────────────────────────────────── */
.rows { display:grid; gap:var(--s2) }
.row { display:flex; align-items:center; gap:var(--s3); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:var(--s3) var(--s4) }
.row b { font-size:var(--t15); font-weight:700 }
.row .n { font-size:var(--t12); color:var(--ink-3); font-variant-numeric:tabular-nums }
.row .sp { margin-left:auto; display:flex; gap:var(--s1) }
.row--sub { margin-left:var(--s6) }

@media (max-width:560px) {
  .cards { grid-template-columns:1fr }
  .photos { grid-template-columns:1fr 1fr; gap:var(--s2) }
  .photo-head b { font-size:var(--t12) }
}
@media (min-width:900px) {
  .tabbar { display:none }
  main { padding-bottom:var(--s10) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}