@import url('fonts.css');

/* ─────────────────────────────────────────────
   공통 디자인. 색·카드·버튼은 전부 여기서만 고친다.
   ───────────────────────────────────────────── */
:root{
  --bg:#FBF8F9; --ink:#38484C; --surface:#FFFFFF; --surface-dim:#F2FAFA;
  --line:#38484C; --mint:#A9E3E6; --mint-deep:#4EC9D7; --lavender:#CFE4F2;
  --coral:#F7D4E4; --yellow:#FBECC0; --pink:#FAE4EE; --text-dim:#7B8C90; --bad:#E2726B;
  --stroke:2px; --pop-shadow:4px 4px 0 var(--line);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:'Paperlogy',-apple-system,'Apple SD Gothic Neo',sans-serif;
  display:flex;justify-content:center;padding:16px 16px 60px;
  background-image:url('img/grid-tile.svg');background-repeat:repeat;background-size:32px 32px;
}
.page{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px}
@media (min-width:900px){ .page{max-width:720px} }

/* ── 헤더 ── */
/* 레퍼런스 톤: 민트 블록 + 아래쪽 물결 자락 */
header.hero{
  position:relative;padding:10px 24px 34px;overflow:visible;z-index:1;
  /* 배경 격자를 뒤집은 흰 격자를 민트 위에 연하게 깐다 */
  /* 배경 격자를 뒤집은 흰 격자를 민트 위에 연하게 깐다 */
  background:url('img/grid-tile-light.svg') repeat var(--mint);background-size:32px 32px;
  border-radius:20px 20px 0 0;
  /* 아래 물결 자락이 25px 삐져나오므로, 다음 카드와 겹치지 않게 그만큼 자리를 비워둔다 */
  margin-bottom:22px;
}
header.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-25px;height:26px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26' preserveAspectRatio='none'><path d='M0 0 H120 V10 Q105 26 90 10 Q75 26 60 10 Q45 26 30 10 Q15 26 0 10 Z' fill='%23A9E3E6'/></svg>") repeat-x bottom center;background-size:120px 26px;
  pointer-events:none;
}
.stamp{
  display:inline-block;background:var(--surface);color:var(--ink);
  border:var(--stroke) solid var(--line);border-radius:999px;
  font-family:'Cafe24PROUP',sans-serif;font-size:12.5px;letter-spacing:.03em;
  padding:6px 15px;transform:rotate(-4deg);box-shadow:2px 2px 0 var(--line);
  margin-top:40px;margin-bottom:4px;position:relative;z-index:1;
}
.mascot-wrap{position:absolute;right:22px;bottom:0;width:205px;z-index:2}
.mascot{display:block;width:100%}
.speech-bubble{
  /* 캐릭터 머리 위. 꼬리는 아래쪽에서 머리를 가리킨다 */
  position:absolute;left:34%;right:auto;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:7px 12px;font-family:'UhBeeHYUNJUNG','Paperlogy',sans-serif;
  font-size:12px;line-height:1.35;color:var(--ink);text-align:center;
  box-shadow:2px 2px 0 var(--line);z-index:3;white-space:nowrap;width:max-content;
}
.speech-bubble::after{content:"";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--line)}
.speech-bubble::before{content:"";position:absolute;bottom:-6.5px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-top:7px solid var(--surface);z-index:1}
.artist{
  position:relative;margin-top:10px;margin-right:272px;
  font-family:'Galmuri11',monospace;font-weight:400;font-size:72px;line-height:1.1;letter-spacing:.01em;
  background:linear-gradient(90deg,var(--mint-deep),#6FD4DC 38%,#F2AFCF 76%,var(--mint-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px var(--line);paint-order:stroke fill;
}
/* 만든이 + 기준 시점: 김씨네 에바키 페이지와 같은 서식 */
.made-by,.data-note{font-size:10px;font-weight:600;color:var(--ink);opacity:.8;letter-spacing:-.01em;line-height:1.4}
.made-by{margin-top:14px}
.data-note{margin-top:1px;margin-right:150px;white-space:nowrap}
.made-by a{color:inherit;font-weight:inherit;text-decoration:none}
.made-by:hover{opacity:1}

/* ── 카드 ── */
section.card{
  background-color:var(--surface);
  background-image:radial-gradient(circle,rgba(92,68,51,.10) 1.5px,transparent 1.5px);
  background-size:22px 22px;border:var(--stroke) solid var(--line);
  border-radius:22px;padding:20px 20px 18px;box-shadow:var(--pop-shadow);
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-family:'Cafe24PROUP',sans-serif;font-weight:400;font-size:16.5px;display:flex;align-items:center;gap:7px}
.card-title .emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ── 알약 (ON AIR · 접기 · 펼치기 · 댓글) ── */
.pill,.live-pill,.video-pick button{
  display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink);
  font-family:inherit;background:var(--mint);border:1.5px solid var(--line);
  border-radius:999px;padding:5px 12px;
}
.pill.off,.live-pill.off{color:var(--text-dim);background:var(--surface-dim);border-color:#ddd4c2}
button.pill,button.live-pill,.video-pick button{cursor:pointer}
button.pill:hover,button.live-pill:hover,.video-pick button:hover{background:#fff;box-shadow:2px 2px 0 var(--line);transform:translate(-1px,-1px)}
button.pill:active,button.live-pill:active,.video-pick button:active{background:#fff;box-shadow:1px 1px 0 var(--line);transform:translate(1px,1px)}
.group-title{
  display:inline-block;background:var(--lavender);border:1.5px solid var(--line);
  border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800;margin-bottom:10px;
}

/* ── 영상 줄 ── */
.video-list{display:flex;flex-direction:column;gap:10px}
.video-row{display:flex;gap:10px;align-items:center;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;padding:8px;text-decoration:none;color:var(--ink)}
.video-row:hover{box-shadow:2px 2px 0 var(--line);transform:translate(-1px,-1px)}
.video-link{display:flex;gap:10px;flex:1;min-width:0;align-items:center;text-decoration:none;color:inherit}
.video-thumb{width:92px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:var(--lavender);border:1.5px solid var(--line)}
/* 릴스(세로 영상)는 유튜브 쇼츠 기본 썸네일처럼 가로 칸 안에 통째로 넣고 양옆을 검게 */
.video-thumb.reel{object-fit:contain;background:#000}
.video-meta{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.video-title{font-size:12.5px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.video-sub{font-size:11px;color:var(--text-dim);font-weight:300}
/* 조회·좋아요·댓글 — 모니터 페이지와 같은 모양(라벨은 가늘게, 숫자는 굵게) */
.video-stats{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;margin-top:2px;font-size:10.5px;font-weight:300;color:var(--text-dim)}
.video-stats .st{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.video-stats .st b{font-weight:800;color:var(--ink)}
.stat-updated{margin-top:10px;font-size:11px;font-weight:300;color:var(--text-dim);text-align:center}

footer{text-align:center;font-size:11px;color:var(--text-dim);line-height:1.8;padding-top:4px;font-weight:300}
footer a{color:var(--ink)}

/* ── 모바일 ── */
@media (max-width:720px){ body{padding:24px 14px 52px} .page{gap:16px} }
@media (max-width:560px){
  body{padding:6px 10px 44px} .page{gap:14px}
  header.hero{padding:8px 14px 22px;min-height:222px;margin-bottom:20px}
  .mascot-wrap{width:148px;right:6px;bottom:10px;top:auto}
  .speech-bubble{left:34%;right:auto;bottom:calc(100% + 4px);font-size:10.5px;padding:6px 9px;border-radius:12px}
  .stamp{margin-top:18px;font-size:11px;padding:5px 12px}
  .artist{margin-top:2px;margin-right:150px;font-size:clamp(36px,10.5vw,52px);-webkit-text-stroke-width:2px}
  .made-by,.data-note{font-size:8.5px;letter-spacing:-.02em}
  .made-by{margin-top:8px;margin-right:140px}
  .data-note{margin-right:140px;white-space:normal;line-height:1.35}
  section.card{padding:15px 13px 13px;border-radius:18px}
  .card-head{flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .card-title{font-size:14.5px;gap:6px;line-height:1.3;min-width:0}
  .pill,.live-pill,.video-pick button{font-size:10.5px;padding:6px 12px}
  .group-title{font-size:11px;padding:4px 10px}
  .video-row{gap:8px;padding:7px;border-radius:12px}
  .video-thumb{width:78px;height:46px;border-radius:8px}
  .video-title{font-size:12px}
  .video-sub{font-size:10.5px}
  .video-stats{font-size:10px;gap:2px 5px;letter-spacing:-.02em}
  .video-row:hover,.video-pick button:hover,button.pill:hover{transform:none}
}
@media (max-width:380px){
  header.hero{min-height:204px}
  .mascot-wrap{width:132px;right:4px;bottom:8px;top:auto}
  .artist{margin-right:140px;font-size:34px;-webkit-text-stroke-width:1.5px}
  .made-by,.data-note{font-size:8px}
  .made-by{margin-right:128px}
  .data-note{margin-right:128px;white-space:normal}
  .video-thumb{width:70px;height:42px}
}