/* 묶음 쪽(layer-1) 모양. g.css 위에 얹는다 — 색·서체 토큰은 g.css 것을 쓴다(어두운 화면도 따라간다).
   성수의 재료: 역 출구의 초록(--accent)·벽돌색 번호. 잡지처럼 — 사진 히어로, 큰 번호, 사이사이 거리 사진. JS 0. */
.l1-hero{position:relative;min-height:62vh;display:grid;align-items:end;color:#fff;overflow:hidden;margin:0 0 8px;border-radius:6px}
.l1-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.l1-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 100%)}
.l1-hero-in{position:relative;z-index:1;padding:40px 24px 28px;width:100%}
.l1-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#dfe9e3;margin:0 0 8px;font-family:var(--font-ui)}
.l1-hero h1{font-size:clamp(30px,5vw,56px);line-height:1.08;margin:0 0 12px;text-wrap:balance;letter-spacing:-.01em;color:#fff}
.l1-deck{font-size:clamp(16px,2vw,19px);max-width:48ch;margin:0 0 18px;color:#eef2ee}
.l1-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.35);font-family:var(--font-ui)}
.l1-strip li{padding:12px 20px 0 0;margin-right:16px;font-size:12px;color:#cfd8d1}
.l1-strip b{display:block;font-size:28px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;margin-bottom:3px;font-family:var(--font)}
.l1-hero-cap{font-size:12px;color:#c9d1cb;margin:10px 0 0}
.l1-how{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:36px 0 24px;border-bottom:1px solid var(--rule)}
.l1-how h2{font-size:24px;margin:0;color:var(--accent)} .l1-how p{margin:0;max-width:70ch;color:var(--ink-soft)}
.l1-sec{font-size:clamp(24px,3.4vw,36px);margin:44px 0 6px;letter-spacing:-.01em}
.l1-sub{color:var(--ink-soft);margin:0 0 18px;max-width:70ch}
.l1-entry{display:grid;grid-template-columns:64px 220px 1fr;gap:0 24px;padding:30px 0;border-top:1px solid var(--rule)}
.l1-num{font-size:56px;line-height:.9;color:#9a4a35;font-variant-numeric:tabular-nums;font-weight:300}
:root[data-theme="dark"] .l1-num{color:#d9856b}
.l1-art{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--accent-soft)}
.l1-art img{width:100%;height:100%;object-fit:cover;display:block}
.l1-art.blank{background:repeating-linear-gradient(135deg,var(--accent-soft) 0 6px,var(--rule) 6px 12px)}
.l1-made{position:absolute;right:8px;bottom:8px;font-size:11px;background:rgba(0,0,0,.7);color:#fff;padding:2px 7px;border-radius:3px;font-family:var(--font-ui)}
.l1-body{min-width:0}
.l1-entry h3{font-size:28px;margin:0 0 4px;line-height:1.15}
.l1-entry h3 .sub{display:block;font-family:var(--font-ui);font-weight:400;font-size:14px;color:var(--ink-soft);margin-top:2px}
.l1-tier{font-family:var(--font-ui);font-size:12px;color:var(--ink-soft);font-weight:400;margin-left:8px;white-space:nowrap}
.l1-went{margin:0;font-size:17px} .l1-went b{color:var(--accent)} .l1-denom{color:var(--ink-soft);font-size:13px;font-family:var(--font-ui)}
.l1-ev{margin:4px 0 10px;color:var(--ink-soft);font-size:14px;font-family:var(--font-ui)} .l1-ev i{font-style:normal;color:#9a4a35}
.l1-k3{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-ui)}
.l1-k3 li{font-size:13px;border:1px solid var(--rule);border-radius:999px;padding:4px 12px;color:var(--ink-soft)}
.l1-k3 li.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:500}
.l1-entry h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;font-family:var(--font-ui)}
.l1-whys{margin:0 0 8px;padding-left:1.2em} .l1-whys li{margin:2px 0}
.l1-more{font-size:13px;color:var(--ink-soft);margin:0 0 10px;font-family:var(--font-ui)}
.l1-ordered,.l1-near{margin:4px 0;font-size:15px} .l1-ordered b,.l1-near b{font-weight:500;color:var(--ink-soft);margin-right:6px;font-family:var(--font-ui)}
.l1-cta{display:inline-block;margin:14px 0 6px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent)}
.l1-cta small{font-weight:400;color:var(--ink-soft)} .l1-cta.soon{color:var(--ink-soft);border-bottom-color:var(--rule);font-weight:400}
.l1-entry details{font-size:14px;margin-top:8px;font-family:var(--font-ui)} .l1-entry summary{cursor:pointer;color:var(--ink-soft)}
.l1-srcs{padding-left:1.2em;margin:6px 0} .l1-srcs li{margin:3px 0;overflow-wrap:anywhere} .l1-srcs a{color:var(--ink)}
.l1-breather{margin:36px 0} .l1-breather img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:6px;display:block}
.l1-breather figcaption{font-size:13px;color:var(--ink-soft);padding:8px 0 0;font-family:var(--font-ui)} .l1-breather .credit{color:var(--ink-faint);margin-left:8px}
.l1-index{list-style:none;padding:0;margin:0 0 20px;border-top:1px solid var(--rule)}
.l1-index li{display:grid;grid-template-columns:200px 1fr auto auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
.l1-index .n{font-weight:700;font-size:18px} .l1-index .sub{font-family:var(--font-ui);font-weight:400;color:var(--ink-soft)}
.l1-index .t{color:var(--accent);font-size:13px;display:block;font-family:var(--font-ui)}
.l1-index .w{color:var(--ink-soft);font-size:14px;display:block} .l1-index .nr{font-size:13px;color:var(--ink-soft);white-space:nowrap;font-family:var(--font-ui)}
.l1-index .s{font-size:12px;color:var(--ink-faint);font-family:var(--font-ui)}
.l1-method{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:36px 0;border-top:2px solid var(--ink);margin-top:36px}
.l1-method h2{font-size:22px;margin:0} .l1-method p{margin:0;color:var(--ink-soft);max-width:70ch;font-size:15px}
.l1-back{margin:24px 0 40px;font-family:var(--font-ui)}
.l1-hub{margin:24px 0} .l1-hub-list{list-style:none;padding:0;margin:0} .l1-hub-list li{padding:8px 0;border-bottom:1px solid var(--rule)}
@media (max-width:760px){
  .l1-hero{min-height:70vh} .l1-how,.l1-method{grid-template-columns:1fr;gap:10px}
  .l1-hero-in{padding:28px 18px 20px}
  /* 좁은 화면: 숫자 다섯을 세 칸 격자로 — flex 로 두면 2+1+1+1 로 들쭉날쭉 쌓인다 */
  .l1-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px} .l1-strip li{padding:10px 0 0;margin:0;font-size:11px} .l1-strip b{font-size:22px}
  .l1-entry{grid-template-columns:1fr;gap:12px} .l1-num{font-size:40px}
  /* 그림이 없는 집의 빗금 칸은 좁은 화면에서 한 화면을 다 먹는다 — 숨긴다. 있는 그림은 가로로 눕힌다 */
  .l1-art{aspect-ratio:3/2;max-height:220px} .l1-art.blank{display:none}
  .l1-index li{grid-template-columns:1fr;gap:4px} .l1-index .nr{white-space:normal}
}