/* 크리스마스 100 (src/xmas.php, 2026-10-20). l1.css 위에 얹는다 — 색·서체는 g.css 토큰. 크리스마스 색은 이 쪽에서만 쓰는 두 가지(빨강·초록)를 토큰으로 둔다 */
:root{--x-red:#a8322d;--x-red-soft:#f6e6e3;--x-green:#2f5d50;--x-gold:#b0862f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--x-red:#e08a83;--x-red-soft:#3a2523;--x-gold:#d8b25e}}
:root[data-theme="dark"]{--x-red:#e08a83;--x-red-soft:#3a2523;--x-gold:#d8b25e}
:lang(ko) .x{word-break:keep-all;overflow-wrap:break-word}

/* 머리 — 사진 없이 바탕색 위 글자. 빨강 띠 하나 */
.x-hero{padding:40px 0 24px;border-bottom:3px solid var(--x-red);margin:0 0 4px}
.x-hero .l1-eyebrow{color:var(--x-red)}
.x-hero h1{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
.x-deck{font-size:clamp(16px,2vw,19px);max-width:56ch;margin:0 0 14px;color:var(--ink-soft)}
.x-dates{font-family:var(--font-ui);font-size:13px;color:var(--ink-soft);margin:0 0 18px}
.x-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px;font-family:var(--font-ui)}
.x-strip li{font-size:12px;color:var(--ink-soft)} .x-strip b{display:block;font-size:28px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--font)}

/* 칩 — 위에 붙어 따라온다. 스크립트가 켜질 때만 보인다(hidden) */
.x-bar{background:var(--bg,#fff);padding:12px 0 10px;border-bottom:1px solid var(--rule);font-family:var(--font-ui)}
.x-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px}
.x-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;min-width:9em}
.x-chip{font:inherit;font-size:13px;border:1px solid var(--rule);background:var(--surface,transparent);color:var(--ink);border-radius:999px;padding:5px 11px;cursor:pointer;line-height:1.3}
.x-chip span{color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-left:2px}
.x-chip[aria-pressed="true"]{background:var(--x-red);border-color:var(--x-red);color:#fff} .x-chip[aria-pressed="true"] span{color:#fbe9e7}
.x-chip:focus-visible{outline:2px solid var(--x-red);outline-offset:2px}
.x-now{margin:6px 0 0;font-size:14px;color:var(--ink-soft)} .x-now b{color:var(--ink)}

/* 목록 — 한 줄에 그림 + 글 */
.x-list{list-style:none;margin:0;padding:0}
.x-it{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--rule)}
.x-it[hidden]{display:none}
.x-pic{aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--accent-soft)}
.x-pic img{width:100%;height:100%;object-fit:cover;display:block}
.x-spot{display:flex;align-items:flex-end;padding:14px;color:#fff;font-family:var(--font-ui);font-weight:700;font-size:15px;letter-spacing:.02em;
  background:radial-gradient(circle at 75% 25%,rgba(255,255,255,.35) 0 2px,transparent 3px),radial-gradient(circle at 30% 60%,rgba(255,255,255,.3) 0 1.5px,transparent 2.5px),
             radial-gradient(circle at 60% 80%,rgba(255,255,255,.25) 0 1.5px,transparent 2.5px),var(--x-red)}
.x-spot.k-tree{background-color:var(--x-green);background-image:radial-gradient(circle at 75% 25%,rgba(255,255,255,.35) 0 2px,transparent 3px),radial-gradient(circle at 30% 60%,rgba(255,255,255,.3) 0 1.5px,transparent 2.5px)}
.x-spot.k-illumination{background-color:#2b2a4a;background-image:radial-gradient(circle at 70% 30%,rgba(255,215,120,.6) 0 3px,transparent 4px),radial-gradient(circle at 35% 55%,rgba(255,215,120,.45) 0 2px,transparent 3px),radial-gradient(circle at 55% 78%,rgba(255,215,120,.4) 0 2px,transparent 3px)}
.x-spot.k-popup,.x-spot.k-show,.x-spot.k-other{background-color:var(--x-gold)}
.x-body{min-width:0}
.x-kick{font-family:var(--font-ui);font-size:12px;color:var(--ink-soft);margin:0 0 4px;letter-spacing:.02em}
.x-kick b{color:var(--x-red);font-size:15px;margin-right:4px;font-variant-numeric:tabular-nums}
.x-it h3{font-size:24px;line-height:1.2;margin:0 0 6px}
.x-it h3 .sub{display:block;font-family:var(--font-ui);font-weight:400;font-size:14px;color:var(--ink-soft);margin-top:2px}
.x-meta{font-family:var(--font-ui);font-size:13px;color:var(--ink-soft);margin:0 0 8px}
.x-lines{margin:0 0 10px;padding-left:18px} .x-lines li{margin:2px 0}
.x-tip{font-size:14px;background:var(--x-red-soft);border-radius:6px;padding:8px 12px;margin:0 0 10px;max-width:70ch}
.x-tip b{font-family:var(--font-ui);font-size:12px;color:var(--x-red);margin-right:4px}
.x-caveat{background:var(--accent-soft)} .x-caveat b{color:var(--accent)}
.x-src{font-family:var(--font-ui);font-size:13px;margin-top:6px} .x-src summary{cursor:pointer;color:var(--ink-soft)}
.x-src ul{margin:6px 0 0;padding-left:18px} .x-src .dim{color:var(--ink-soft)}
.x-empty{padding:28px 0;color:var(--ink-soft)} .x-reset{font:inherit;color:var(--x-red);background:none;border:0;text-decoration:underline;cursor:pointer}

@media (max-width:640px){
  .x-lab{min-width:100%}
  .x-it{grid-template-columns:84px 1fr;gap:12px}
  .x-spot{font-size:11px;padding:8px}
  .x-it h3{font-size:19px}
  .x-bar{position:static}
}

/* 사진 머리(2026-10-21) — l1.css .l1-hero 를 그대로 쓰고 숫자 띠만 이 쪽 것. 사진 출처 한 줄 */
.x-hero-photo{margin:0 0 4px}
.x-hero-photo .x-deck{color:#eef2ee;max-width:48ch}
.x-hero-photo .x-dates{color:#dfe9e3}
.x-hero-photo .x-strip li{color:#cfd8d1} .x-hero-photo .x-strip b{color:#fff}
.x-hero-photo .l1-hero-cap a{color:inherit}
.x-credit{font-family:var(--font-ui);font-size:11px;color:var(--ink-soft);margin:-4px 0 8px} .x-credit a{color:inherit}
/* 밝은 야경 사진 위 글자가 묻혀서 그늘을 더 짙게 */
.x-hero-photo::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.82) 100%)}
.x-hero-photo h1,.x-hero-photo .x-deck{text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* 다른 줄에서 고른 것과 겹치는 곳이 없는 칩 — 지우지 않고 흐리게(2026-10-21) */
.x-chip.x-zero,.x-chip:disabled{opacity:.4;cursor:default}

/* 카드 격자(2026-10-21) — 지역 쪽 같은 카드. 이유는 가게 쪽(layer-0)에서. PC 3칸 · 태블릿 2칸 · 폰 2칸 작은 카드 */
.x-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px 0}
.x-it{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
.x-it .x-pic{display:block;aspect-ratio:4/3;border-radius:0}
.x-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.x-it h3{font-size:19px;margin:0 0 6px}
.x-it h3 a{color:inherit;text-decoration:none} .x-it h3 a:hover{text-decoration:underline}
.x-it .l1-tags.small{margin:0 0 6px}
.x-themes{font-family:var(--font-ui);font-size:12.5px;color:var(--x-red);margin:0 0 4px}
.x-it .x-meta{margin:0 0 10px}
.x-it .x-tip{font-size:12.5px;padding:6px 9px}
.x-go{margin-top:auto;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.x-go:hover{text-decoration:underline} .x-go.soon{color:var(--ink-soft);font-weight:400}
@media (max-width:900px){.x-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:640px){
  .x-list{gap:10px}
  .x-it{display:flex;grid-template-columns:none}
  .x-body{padding:9px 10px 11px}
  .x-it h3{font-size:15.5px} .x-it h3 .sub{font-size:12px}
  .x-kick{font-size:11px} .x-kick b{font-size:13px}
  .x-themes,.x-it .x-meta,.x-go{font-size:11.5px}
  .x-it .l1-tags.small .tag{font-size:10.5px;padding:1px 6px}
  .x-it .x-tip{font-size:11px;padding:5px 7px}
}
/* 더 보기(2026-10-21) — 20곳씩 */
.x-morewrap{text-align:center;margin:4px 0 28px}
.x-more{font:600 14px/1 var(--font-ui);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:12px 22px;cursor:pointer}
.x-more:hover{border-color:var(--ink)}
.x-more[hidden]{display:none}
.x-order{color:var(--ink-soft);font-size:13px}
/* 필터로 올라가는 단추(2026-10-21) — 칩이 화면 위로 지나가면 오른쪽 아래에 */
.x-up{position:fixed;right:20px;bottom:24px;z-index:20;font:600 14px/1 var(--font-ui);color:#fff;background:var(--x-red);border:0;border-radius:999px;
  padding:12px 18px;box-shadow:0 4px 14px rgba(0,0,0,.22);cursor:pointer}
.x-up:hover{filter:brightness(1.08)} .x-up[hidden]{display:none}
@media (max-width:640px){.x-up{right:14px;bottom:16px;padding:11px 15px;font-size:13px}}