@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');
/* New Vibez 시안 4 — and2es.com 문법
   흰 바탕, 작은 헬베티카 글씨, 검정 꼬리표(칩), 그림은 가운데 한 줄 */
:root{
  --bg:#ffffff; --ink:#0a0a0a; --mute:#8a8a8a; --chip-off:#e9e9e9; --line:#e6e6e6;
  --display:"Outfit","Pretendard Variable",Pretendard,sans-serif;
  --font:"Helvetica Neue",Helvetica,Arial,"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c0c0c; --ink:#f2f2f0; --mute:#8d8d8a; --chip-off:#2a2a2a; --line:#262626; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--font);font-size:12px;line-height:1.3;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ink-only{display:block} .white-only{display:none}
@media (prefers-color-scheme:dark){ .ink-only{display:none} .white-only{display:block} }

/* 꼬리표 */
.chip{display:inline-block;background:var(--ink);color:var(--bg);padding:1px 4px 1px;font-size:11px;line-height:1.3;
  white-space:nowrap;transition:background .2s,color .2s}
a.chip:hover,button.chip:hover{background:var(--chip-off);color:var(--ink)}
.chip.on{background:var(--chip-off);color:var(--ink)}
.chip sup{font-size:7px;margin-left:1px;vertical-align:5px}
button.chip{border:0;font-family:inherit;cursor:pointer}

/* 위 띠 */
.bar{position:fixed;left:0;right:0;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;
  align-items:start;padding:10px}
.bar-l,.bar-c,.bar-r{display:flex;gap:3px;flex-wrap:wrap}
.bar-c{justify-content:center}
.bar-r{justify-content:flex-end}
.clock{font-variant-numeric:tabular-nums}

/* 아래 띠 */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:3px;padding:10px;
  padding-bottom:max(10px,env(safe-area-inset-bottom))}

/* 쪽 공통 본문 */
.page{padding:110px 10px 80px}
.big{font-family:var(--display);font-size:clamp(32px,4.4vw,68px);line-height:1;letter-spacing:-.035em;font-weight:700;margin:0;max-width:22em}
.big.mute,.mute{color:var(--mute)}
.cols{display:grid;grid-template-columns:178px 178px 1fr;gap:0;margin-bottom:56px}
.cols h2{font-size:12px;font-weight:400;margin:0 0 24px}
.cols ul{list-style:none;margin:0;padding:0;line-height:1.3}
.cols a:hover{color:var(--mute)}

/* 나타나기 */
@media (prefers-reduced-motion:no-preference){
  .fade{animation:fade .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media (max-width:720px){
  .bar{grid-template-columns:1fr auto;row-gap:4px}
  .bar-c{grid-column:1/-1;justify-content:flex-start;order:3}
  .clock{display:none}
  .page{padding-top:96px}
  .cols{grid-template-columns:1fr 1fr;row-gap:28px}
}