/* 생성되는 파일: tools/gamebuild.mjs 가 portal/src/css/*.css 로 만든다. 이 파일은 고치지 않는다. .css 파일을 고치고 다시 빌드한다. */
/* ---- 00-theme.css ---- */
/* 테마 세 가지 (docs/style.md, "테마"): MEDIUM 이 기본(:root 에 둔다), DAY 는 밝은 파스텔, NIGHT 는 깊은 색이다.
   <html data-theme> 은 <head> 의 스크립트가 localStorage 'fiafia.theme' 을 보고 정한다. 파스텔로 칠한 면 위의 글자는 늘 자두색(--on-accent)이다. */
:root {
  --on-accent: #4b2e5c;
  --bg1: #5a4886; --bg2: #66529a; --bg3: #4e3d78; --bgc: #5a4886;
  --panel: #68549a; --line: #8a76b4;
  --text: #fff6f0; --muted: #f1e8fa; --dim: #ece2f8;
  --accent: #ff8fb1; --accent-soft: #825280; --accent-ink: #fff2f7;
  --shadow: #1d124a55; --no-bg: #4a3a73e6; --index-bg: #54427ee6;
  --thumb-hi: #ffffff22; --thumb-base: #5a4886;
  /* 테마별 그림 칸의 채도 / 밝기 (색조는 카드 자신의 --h 다). 2026-10-25 (주인: "포털 카드 그림 더 여성적이고 이쁘게 하자.", 고른 답: 그림과 타일 바탕 모두, 핑크·라벤더 위주):
     예전 32 %/40 % -> 30 %/28 % 는 노랑·주황 색조를 갈색·올리브로 탁하게 했다. 이제는 더 맑은 파스텔이고, 오른쪽 아래 끝을 --tile-rose 쪽으로 --tile-mix 만큼 물들인다 */
  --ts1: 56%; --tl1: 64%; --ts2: 50%; --tl2: 54%; --tile-rose: #ff9cc6; --tile-mix: 38%; --tile-spark: #fff6fbd9;
  --track: #7c68a8; --track-ring: #a894cf;
  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Varela Round", system-ui, sans-serif;
  color-scheme: dark;
}
[data-genre="shooter"] { --accent: #9ccbff; --accent-soft: #4a6396; --accent-ink: #f4f9ff; }
[data-genre="action"]  { --accent: #ff9e8a; --accent-soft: #85516b; --accent-ink: #fff2ec; }
[data-genre="arcade"]  { --accent: #ffd66b; --accent-soft: #7a6640; --accent-ink: #fff8de; }
[data-genre="puzzle"]  { --accent: #c9b3ff; --accent-soft: #6c55a4; --accent-ink: #f8f3ff; }
[data-genre="sports"]  { --accent: #8fe3bd; --accent-soft: #3f7a63; --accent-ink: #effff7; }
[data-genre="strategy"] { --accent: #f2a0d0; --accent-soft: #8a4a73; --accent-ink: #fff0f8; }
[data-genre="new"]      { --accent: #ff8fb1; --accent-soft: #8a3f64; --accent-ink: #fff0f6; }

:root[data-theme="day"] {
  --bg1: #ffeef4; --bg2: #fff6f0; --bg3: #f6efff; --bgc: #fff6f0;
  --panel: #ffffff; --line: #f1d6e3;
  --text: #4b2e5c; --muted: #6a3f7f; --dim: #7d6590;
  --accent-soft: #ffe3ec; --accent-ink: #a8355f;
  --shadow: #e3a8c433; --no-bg: #ffffffd9; --index-bg: #ffeff5e6;
  --thumb-hi: #ffffff; --thumb-base: #fff6f0;
  --ts1: 88%; --tl1: 91%; --ts2: 82%; --tl2: 86%; --tile-rose: #ffc4dd; --tile-mix: 40%; --tile-spark: #ffffff;
  --track: #f1d6e3; --track-ring: #e7bfd2;
  color-scheme: light;
}
:root[data-theme="day"] [data-genre="shooter"] { --accent-soft: #e6f2ff; --accent-ink: #2f67a6; }
:root[data-theme="day"] [data-genre="action"]  { --accent-soft: #ffe9e3; --accent-ink: #b04a36; }
:root[data-theme="day"] [data-genre="arcade"]  { --accent-soft: #fff4d6; --accent-ink: #7f5a00; }
:root[data-theme="day"] [data-genre="puzzle"]  { --accent-soft: #f1eaff; --accent-ink: #6a42b8; }
:root[data-theme="day"] [data-genre="sports"]  { --accent-soft: #e0f7ec; --accent-ink: #2b7a58; }
:root[data-theme="day"] [data-genre="strategy"] { --accent-soft: #ffe6f3; --accent-ink: #a8408a; }
:root[data-theme="day"] [data-genre="new"]      { --accent-soft: #ffe3ec; --accent-ink: #b0305c; }

:root[data-theme="night"] {
  --bg1: #1b1430; --bg2: #241a3e; --bg3: #2c2149; --bgc: #241a3e;
  --panel: #2f2450; --line: #51407a;
  --text: #ece3f6; --muted: #dccfee; --dim: #b9a9d6;
  --accent-soft: #482d4e; --accent-ink: #ffc2d6;
  --shadow: #00000055; --no-bg: #241a3ee6; --index-bg: #1d1535e6;
  --thumb-hi: #ffffff12; --thumb-base: #241a3e;
  --ts1: 34%; --tl1: 32%; --ts2: 30%; --tl2: 22%; --tile-rose: #6e3a66; --tile-mix: 40%; --tile-spark: #ffe3f199;
  --track: #51407a; --track-ring: #6b5a96;
}
:root[data-theme="night"] [data-genre="shooter"] { --accent-soft: #29395c; --accent-ink: #b9dcff; }
:root[data-theme="night"] [data-genre="action"]  { --accent-soft: #482f40; --accent-ink: #ffc4b5; }
:root[data-theme="night"] [data-genre="arcade"]  { --accent-soft: #473f30; --accent-ink: #ffe59a; }
:root[data-theme="night"] [data-genre="puzzle"]  { --accent-soft: #3b3062; --accent-ink: #dccfff; }
:root[data-theme="night"] [data-genre="sports"]  { --accent-soft: #29483e; --accent-ink: #bff0da; }
:root[data-theme="night"] [data-genre="strategy"] { --accent-soft: #4a2d47; --accent-ink: #ffc6e6; }
:root[data-theme="night"] [data-genre="new"]      { --accent-soft: #4d2a3d; --accent-ink: #ffc2d6; }
/* ---- 10-base.css ---- */
* { box-sizing: border-box; }
html { scroll-padding-top: 112px; }  /* 휴대폰에서 붙어 있는 위쪽 막대(약 96) + 틈. 그래서 점프와 키보드 포커스가 그 아래에서 멈춘다 */
@media (min-width: 900px) { html { scroll-padding-top: 150px; } }  /* 넉넉한 데스크탑 막대(약 125) */
html, body { margin: 0; min-height: 100%; }
body { background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 38%, var(--bg3) 100%); background-color: var(--bgc); color: var(--text); font: 15px/1.5 var(--font); }

.wrap { --pad: clamp(12px, 3vw, 56px); margin: 0 auto; padding: 0 var(--pad) 28px; }  /* 폭 상한 없음: 줄과 카드가 화면 폭 전체를 채운다 */

/* 위쪽 막대는 두 가지로 설계한다. 900 px 미만(휴대폰 = MOBILE)에서는 자리를 아낀다: 아이콘으로 된 얇은 막대로, 1줄에 로고와 둥근 단추 네 개(search, view, info, theme),
   2줄에 장르 칩이 있고, 검색 단추를 누르면 검색 칸이 1줄 위에 열린다 (약 97 px). 900 px 부터(DESKTOP)는 자리가 있어서 넉넉하게 쓴다: 1줄에 큰 로고, 넓은 검색 칸,
   글자가 붙은 조작 단추(BY GENRE | ALL, INFO, DAY | MEDIUM | NIGHT), 2줄에 넓은 글자 링크로 된 장르가 있고 화면에 보이는 장르에 밑줄이 그어진다 (약 125 px). 막대는 화면 맨 위에 붙어 있다. */
.top { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 calc(-1 * var(--pad)) 6px; padding: 6px var(--pad) 0;
  background: var(--index-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--line); }
header { display: contents; }
h1 { order: 1; margin: 0; flex: none; font-size: 21px; line-height: 40px; font-weight: 800; letter-spacing: 3px; color: #d6568c;
  background: linear-gradient(90deg, #ff8fb1, #c9b3ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ctrl { order: 4; flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.index { order: 5; flex: 1 0 100%; }
.search { order: 3; display: none; }
.d-only { display: none !important; }
.top.searching h1, .top.searching .ctrl { display: none; }
.top.searching .search { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* 로고 글자 왼쪽의 파비콘 (주인 2026-10-25: "파비콘 포털 타이틀 좌측에 보여줘."): 글자의 그라데이션은 글자에만 칠해지고 그림은 그대로 보인다. 장식이므로 alt 는 비운다 */
.top h1 { display: flex; align-items: center; gap: 8px; }
.top h1 .brand { flex: none; display: block; width: 28px; height: 28px; }
@media (max-width: 359px) { h1 { font-size: 19px; letter-spacing: 2px; } .top h1 { gap: 6px; } .top h1 .brand { width: 24px; height: 24px; } .ctrl { gap: 5px; } }

@media (min-width: 900px) {
  .m-only { display: none !important; }
  .d-only { display: flex !important; }
  .top { gap: 0 28px; padding: 16px var(--pad) 0; margin-bottom: 14px; }
  h1 { font-size: 32px; line-height: 48px; letter-spacing: 7px; }
  .top h1 { gap: 12px; }
  .top h1 .brand { width: 40px; height: 40px; }
  .search { order: 3; display: block; position: relative; flex: 1 1 320px; max-width: 480px; }
  .ctrl { gap: 16px; }
  .index { padding: 6px 0 0; }
}
@media (min-width: 900px) and (max-width: 1199px) { .top { gap: 0 18px; } .search { flex-basis: 200px; } .ctrl { gap: 10px; } }  /* 좁은 데스크탑 창: 같은 막대를 조금 더 촘촘하게 (여전히 두 줄) */
/* ---- 20-cards.css ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 22px; background: var(--panel);
  color: inherit; text-decoration: none; overflow: hidden; box-shadow: 0 6px 18px var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
.card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px var(--shadow); }
.card:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; transform: translateY(-3px); }
.thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 150px;
  background: radial-gradient(circle at 30% 25%, var(--thumb-hi) 0, transparent 55%), linear-gradient(145deg, hsl(var(--h, 258) var(--ts1) var(--tl1)), hsl(var(--h, 258) var(--ts2) var(--tl2))); }
/* 그림 칸 (2026-10-25): 왼쪽 위는 게임의 색조 그대로 (게임을 색으로 알아본다), 오른쪽 아래는 짝 색조(+35)를 핑크·라벤더(--tile-rose)로 물들인 맑은 파스텔.
   그 위에 작은 반짝이 점 다섯 개와 부드러운 빛 두 개. color-mix 를 모르는 브라우저는 위의 한 줄(예전 그라디언트)을 쓴다 */
@supports (background: color-mix(in oklab, red, blue)) {
  .thumb { background:
    radial-gradient(circle at 14% 72%, var(--tile-spark) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 84% 30%, var(--tile-spark) 0 2px, transparent 2.8px),
    radial-gradient(circle at 76% 84%, var(--tile-spark) 0 1.3px, transparent 2px),
    radial-gradient(circle at 24% 22%, var(--tile-spark) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 90% 62%, var(--tile-spark) 0 1px, transparent 1.6px),
    radial-gradient(circle at 30% 25%, var(--thumb-hi) 0, transparent 55%),
    radial-gradient(circle at 78% 88%, color-mix(in oklab, var(--tile-rose) 55%, transparent) 0, transparent 46%),
    linear-gradient(145deg, hsl(var(--h, 258) var(--ts1) var(--tl1)), color-mix(in oklab, hsl(calc(var(--h, 258) + 35) var(--ts2) var(--tl2)), var(--tile-rose) var(--tile-mix))); }
}
/* 카드 그림 칸이 좁으면(휴대폰 줄의 작은 카드) 번호 표의 "No." 를 빼고 네 자리 번호만 보인다. 그래야 오른쪽 위의 HI 표와 겹치지 않는다 (번호가 네 자리가 된 2026-10-24 부터) */
.thumb { container-type: inline-size; }
@container (max-width: 150px) { .np { display: none; } }
.thumb .icon { width: 96px; height: 96px; filter: drop-shadow(0 4px 6px #1d124a33); }
.no { position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--no-bg); border: 1.5px solid var(--accent);
  color: var(--accent-ink); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.scores { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* HI 와 BEST 를 함께 (오른쪽 위, 위아래) */
.hi { padding: 2px 10px; border-radius: 999px; background: var(--no-bg); border: 1.5px solid var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 800; letter-spacing: 1px; }  /* HI: 이 기기의 나의 기록 (카드 번호는 왼쪽 위) */
.best { padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 800; letter-spacing: 1px; }  /* BEST: 모든 사람의 최고 기록, HI 바로 아래 (배포본에서만) */
.best[hidden] { display: none; }
.no { z-index: 2; } /* 그림이 커도 번호, HI, BEST 는 그 위에 보인다 */
.body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; flex: 1; }
.title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: 2px; color: var(--text); }
.desc { margin: 0; color: var(--text); flex: 1; word-break: keep-all; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 1px 10px; border-radius: 999px; background: var(--accent-soft); font-size: 11px; font-weight: 700; color: var(--accent-ink); }
.nodesc .desc { display: none; }  /* INFO 토글 꺼짐 */
/* ---- 25-rows.css ---- */
/* Netflix 방식의 줄 (BY GENRE 화면): 장르마다 한 줄, 카드는 옆으로 스크롤되는 띠 하나에 놓인다. ALL 화면은 평평한 .grid 를 그대로 쓴다.
   터치 화면에서는 띠를 끝에서 끝까지 쓸어 넘긴다. 마우스를 쓰면 화살표가 띠 양쪽의 자기 칸에 선다 (카드 위에는 절대 놓지 않는다: 빗나간 클릭이 게임을 열면 안 된다). */
.rail { position: relative; margin: 0 calc(-1 * var(--pad)); }
.track { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 14px var(--pad) 22px; scroll-padding: 0 var(--pad);
  --n: 2.3; --cw: calc((100% - (var(--n) - 1) * 14px) / var(--n)); }  /* 화면에 카드 --n 장, 마지막 카드는 일부만 보인다 (줄이 스크롤된다는 것을 보여 준다) */
@media (min-width: 600px) { .track { --n: 3.3; } }
@media (min-width: 900px) { .track { --n: 4.3; } }
@media (min-width: 1200px) { .track { --n: 5.3; } }
@media (min-width: 1600px) { .track { --n: 6.3; } }
@media (min-width: 2000px) { .track { --n: 7.3; } }
.track::-webkit-scrollbar { display: none; }
.track > .card { flex: 1 0 var(--cw); scroll-snap-align: start; }  /* 카드가 적은 줄에는 빈 자리가 있다: 그 카드들이 커져서 줄을 채운다 */
.track > .card:hover, .track > .card:focus-visible { transform: scale(1.05); z-index: 2; }
.track .thumb { height: clamp(118px, 9vw, 190px); }
.track .thumb .icon { width: clamp(80px, 6vw, 130px); height: clamp(80px, 6vw, 130px); }
.track .no { top: 8px; padding: 1px 7px; font-size: 10.5px; letter-spacing: .5px; }
.track .scores { top: 8px; right: 8px; gap: 3px; }
.track .hi, .track .best { padding: 1px 7px; font-size: 10.5px; letter-spacing: .5px; }
.track .no { left: 8px; }

@media (max-width: 380px) { .track .no, .track .hi, .track .best { padding: 1px 5px; font-size: 10px; letter-spacing: 0; } }
/* 아주 좁은 카드(320 px 휴대폰의 줄, 그림 칸 약 100 px): 번호 표와 HI 표를 더 작게 해서 겹치지 않게 한다 ("No." 는 20-cards.css 의 컨테이너 쿼리가 이미 뺀다) */
@container (max-width: 115px) { .track .no { top: 6px; padding: 1px 4px; font-size: 9px; letter-spacing: 0; } .track .no { left: 5px; } .track .scores { top: 6px; right: 5px; gap: 2px; } .track .hi, .track .best { padding: 1px 4px; font-size: 9px; letter-spacing: 0; } }
.track .body { padding: 11px 13px 14px; gap: 6px; }
.track .title { font-size: 15px; letter-spacing: 1px; }
.track .desc { font-size: 13px; }
.track .tag { padding: 0 8px; font-size: 10.5px; }
.rail-btn { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rail { display: flex; align-items: stretch; }
  .rail-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--pad); margin: 14px 0 22px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: var(--dim); transition: background .15s, color .15s; }
  .rail-btn:hover, .rail-btn:focus-visible { background: var(--accent-soft); color: var(--accent-ink); }
  .rail-btn svg { width: 24px; height: 24px; }
  .rail[data-start="1"] .rail-btn.prev, .rail[data-end="1"] .rail-btn.next { visibility: hidden; }  /* 칸은 남아 있다. 그래서 띠가 튀지 않는다 */
  .track { flex: 1 1 0; min-width: 0; padding: 14px 8px 22px; scroll-padding: 0 8px; }
  .track { scroll-snap-type: none; user-select: none; -webkit-user-select: none; }  /* 마우스로 줄을 마음대로 끈다 (46-input-rail-drag.ts): 끈 뒤에 튀어 버릴 스냅은 쓰지 않는다 */
  .track > .card { -webkit-user-drag: none; }
  .track.dragging { cursor: grabbing; }
  .track.dragging > .card { pointer-events: none; }  /* 끄는 동안에는 hover 로 커지지 않고 pointer 커서도 없다 */
}
@media (prefers-reduced-motion: reduce) { .rail-btn { transition: none; } .track > .card:hover, .track > .card:focus-visible { transform: none; } }
/* ---- 30-tools.css ---- */
/* 위쪽 막대의 조작 단추. 모바일: 둥근 아이콘 단추(search, view, info, theme). 데스크탑: 나뉜 단추 BY GENRE | ALL, 글자가 붙은 INFO 알약 단추, 나뉜 단추 DAY | MEDIUM | NIGHT. */
.ctrl button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--panel); color: var(--dim); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ctrl button svg { width: 20px; height: 20px; flex: none; }
.ctrl button:hover { border-color: #ff8fb1; color: var(--text); }
.ctrl button:focus-visible, #searchclose:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.ctrl .lbl { display: none; }
#info[aria-pressed="true"] { background: #ff8fb1; border-color: #ff8fb1; color: var(--on-accent); }
#viewbtn .v-rows, #viewbtn[data-view="all"] .v-grid { display: none; }  /* 누르면 바뀌어 갈 화면을 보여 준다: 장르 화면에서는 격자 아이콘, 전체 화면에서는 줄 아이콘 */
#viewbtn[data-view="all"] .v-rows { display: block; }
#themebtn span { display: none; }
:root[data-theme="day"] #themebtn .t-day, :root[data-theme="medium"] #themebtn .t-medium, :root[data-theme="night"] #themebtn .t-night { display: inline-flex; }  /* 지금 쓰는 테마의 아이콘 */
@media (max-width: 359px) { .ctrl button { width: 36px; height: 36px; } .ctrl button svg { width: 18px; height: 18px; } }

@media (min-width: 900px) {
  .ctrl button { height: 44px; width: auto; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
  .views button { min-width: 100px; border-radius: 0; }
  .views button:first-child { border-radius: 999px 0 0 999px; }
  .views button:last-child { border-radius: 0 999px 999px 0; margin-left: -1.5px; min-width: 70px; }
  .views button.on, .themes button[aria-pressed="true"] { background: #ff8fb1; border-color: #ff8fb1; color: var(--on-accent); position: relative; }
  .themes button { gap: 8px; padding: 0 16px 0 14px; border-radius: 0; }
  .themes button .lbl { display: inline; }
  .themes button + button { margin-left: -1.5px; }
  .themes button:first-child { border-radius: 999px 0 0 999px; }
  .themes button:last-child { border-radius: 0 999px 999px 0; }
  .themes button svg { width: 18px; height: 18px; }
  #info { width: auto; padding: 0 20px 0 16px; gap: 10px; border-radius: 999px; }
  #info .lbl { display: inline; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .themes button { padding: 0 14px; } .themes button .lbl { display: none; }  /* 좁은 데스크탑 창에서는 아이콘만 */
  .views button { min-width: 84px; } .views button:last-child { min-width: 56px; }
  #info { padding: 0 16px 0 12px; }
}
/* ---- 35-search.css ---- */
/* 번호나 이름으로 검색(#q)과 결과 줄. 모바일: 검색 단추가 위쪽 막대 위에 열 때까지 숨어 있다. 데스크탑: 늘 보이고 돋보기가 붙는다. */
.search input { width: 100%; height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text);
  font: inherit; font-weight: 700; letter-spacing: 1px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--dim); font-weight: 600; letter-spacing: 1px; }
.search input:focus { outline: 3px solid var(--accent-ink); outline-offset: 2px; border-color: #ff8fb1; }
.search .s-ico { display: none; }
#searchclose { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--dim); cursor: pointer; }
#searchclose svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .search .s-ico { display: block; position: absolute; top: 50%; color: var(--dim); pointer-events: none; }
  .search input { height: 46px; padding-left: 46px; font-size: 15px; }
  .search .s-ico { left: 16px; width: 20px; height: 20px; margin-top: -10px; }
}
.found { margin: 4px 0 16px; color: var(--dim); font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
/* ALL 화면의 순서 단추: 번호 / 이름 (나뉜 알약 단추, 누르는 높이 44 px) */
.sortbar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.sortbar button { min-width: 72px; height: 44px; padding: 0 16px; border: 1.5px solid var(--line); background: var(--panel); color: var(--dim);
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 2px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sortbar button:first-child { border-radius: 999px 0 0 999px; }
.sortbar button:last-child { border-radius: 0 999px 999px 0; margin-left: -1.5px; }
.sortbar button:hover { border-color: #ff8fb1; color: var(--text); }
.sortbar button.on { background: #ff8fb1; border-color: #ff8fb1; color: var(--on-accent); position: relative; }
.sortbar button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
/* ---- 40-genres.css ---- */
/* 장르 색인. 모바일: 위쪽 막대 2줄의 칩(알약 모양), 화면에 보이는 구역의 칩이 채워진다. 데스크탑: 2줄의 넓은 보통 글자 링크, 화면에 보이는 것에 밑줄이 그어진다. */
.index { display: flex; gap: 8px; margin: 0; padding: 6px 0 8px; overflow-x: auto; scrollbar-width: none; }
.index::-webkit-scrollbar { display: none; }
.index:empty { display: none; }
.index a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; text-decoration: none; text-transform: uppercase; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.index a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.index a:active { background: var(--accent); color: var(--on-accent); }
.index a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 1px; }
@media (max-width: 340px) { .index { gap: 6px; } .index a { padding: 0 8px; font-size: 11px; letter-spacing: 0; } }
@media (min-width: 900px) {
  .index { gap: 10px; padding: 4px 0 0; align-items: center; }
  .index a { flex: 0 0 auto; min-height: 52px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--dim); font-size: 13px; letter-spacing: 2.5px; }
  .index a:hover { color: var(--text); }
  .index a[aria-current="true"] { background: transparent; color: var(--text); border-bottom-color: var(--accent); }
  .index a:active { background: transparent; color: var(--text); }
}

.genre { margin-bottom: 10px; }
.genre:last-child { margin-bottom: 0; }
.gh:focus { outline: none; }
.gh { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 17px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--text); }
.gh::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.gh::after { content: ''; flex: 1; border-top: 2px dotted var(--accent); }
/* 칩을 누르면 뛰어간 장르 제목이 반응한다: 점이 부풀고, 글자가 벌어지며 밝아지고, 점선이 굵어진다 (약 0.9 초). 움직임 줄이기 설정: 색만 잠깐 머문다. */
.gh.pulse { animation: ghTitle .9s ease-out; }
.gh.pulse::before { animation: ghDot .9s ease-out; }
.gh.pulse::after { animation: ghLine .9s ease-out; }
@keyframes ghTitle { 0% { letter-spacing: 4px; color: var(--accent-ink); } 30% { letter-spacing: 7px; color: var(--accent-ink); } 100% { letter-spacing: 4px; color: var(--text); } }
@keyframes ghDot { 0% { transform: scale(1); box-shadow: 0 0 0 4px var(--accent-soft); } 30% { transform: scale(1.5); box-shadow: 0 0 0 10px var(--accent-soft); } 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--accent-soft); } }
@keyframes ghLine { 0% { border-top-width: 5px; border-top-color: var(--accent-ink); } 100% { border-top-width: 2px; border-top-color: var(--accent); } }
@keyframes ghHold { 0%, 85% { color: var(--accent-ink); } 100% { color: var(--text); } }
@media (prefers-reduced-motion: reduce) { .gh.pulse { animation: ghHold 1.2s linear; } .gh.pulse::before, .gh.pulse::after { animation: none; } }
.gn { padding: 0 9px; border-radius: 999px; background: var(--accent-soft); font-size: 11px; letter-spacing: 0; color: var(--accent-ink); }

footer { margin-top: 36px; text-align: center; color: var(--dim); font-size: 12px; font-weight: 600; line-height: 2; }
footer a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; } /* 사이트 안내 (about.html, privacy.html): 누르기 쉽게 위아래를 넓힌다 */
@media (prefers-reduced-motion: reduce) { .card, #info::before { transition: none; } .card:hover, .card:focus-visible { transform: none; } }
/* 배너 자리 (portal/src/30-render.ts 의 AD_SLOT): 비어 있으면 자리를 차지하지 않는다. 채워지면 카드와 넉넉히 떨어뜨린다 (실수 클릭을 막는다) */
.adslot:empty { display: none; }
.adslot { margin: 30px 0 34px; }
.grid + .adslot { margin-top: 30px; }
.grid ~ .grid { margin-top: 18px; } /* ALL 화면은 카드 12장마다 나뉜다: 배너가 없을 때도 줄 사이 간격은 그대로 */