/* 사이트 공통: 색·글꼴·작은 장치·첫 화면(디자이너 안C "굵은 포스터" v2, 흰 바탕) */
@font-face{font-family:"GwaenhiPen";src:url("/assets/fonts/note-hand.woff") format("woff");font-weight:400;font-display:swap}
:root{
  --site-bg:#FFFFFF;
  --site-fg:#111111;
  --site-soft:#6B6B6B;
  --site-faint:#ADADAD;
  --site-rule:#E4E4E4;
  /* 01 방 한 색: 코발트 */
  --play:#2A3BB0;
  --on-play:#FAFAF8;
  --on-play-soft:rgba(250,250,248,.74);
  --on-play-faint:rgba(250,250,248,.46);
  --play-rule:rgba(250,250,248,.28);
  /* 강조는 이 노랑 하나: 작은 네모, 형광펜, 테이프 */
  --mark:#F5D04A;
  --ink:#111111;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  /* 번호·주소·작은 이름표: 영문·숫자는 고정폭, 한글은 본문 글꼴 */
  --mono:"IBM Plex Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;
  /* AI가 하는 말만 한글까지 고정폭 */
  --ai:"IBM Plex Mono","Nanum Gothic Coding",ui-monospace,monospace;
  --hand:"GwaenhiPen","Nanum Pen Script",cursive;
  --gut:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--site-bg);color:var(--site-fg);
  font-family:var(--sans);font-weight:450;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;font-synthesis:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,p,ol{margin:0}
ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[hidden]{display:none !important}

.mono{font-family:var(--mono);font-size:12.5px;line-height:1.5;letter-spacing:.01em;word-spacing:-.3em;font-weight:400}
.sq{display:inline-block;width:9px;height:9px;background:var(--mark);margin-right:8px;vertical-align:1px;flex:none}
.hl{
  background:var(--mark);color:var(--ink);padding:0 .1em;margin:0 -.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.03em .1em .05em .09em;
}

/* ───────── 첫 화면 ───────── */
.home-wrap{padding:30px var(--gut) 36px;max-width:1340px;margin:0 auto}
.mast{padding-bottom:24px;border-bottom:1.5px solid var(--site-fg)}
.logo{font-size:clamp(64px,19vw,78px);font-weight:610;letter-spacing:-.06em;line-height:.95;margin-left:-.04em}
.logo .dot{display:inline-block;width:.16em;height:.16em;background:var(--site-fg);margin-left:.08em}

.plays{display:grid;gap:26px;margin-top:22px}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:360px;padding:20px;background:var(--play);color:var(--on-play);border-radius:3px;overflow:hidden;
}
.tile-top{display:flex;justify-content:space-between;align-items:baseline;color:var(--on-play-soft)}
.tile-no{font-family:var(--mono);font-size:13px;color:var(--on-play)}
.tile-title{font-size:clamp(42px,12vw,48px);font-weight:620;letter-spacing:-.055em;line-height:1.08}
.tile-foot{display:flex;justify-content:flex-end}
.tile-go{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;background:var(--on-play);color:var(--play);border-radius:4px;font-weight:600;font-size:16px}
.tile-go .arr{display:inline-block;transition:transform .2s var(--ease)}
.tile:hover .tile-go .arr{transform:translateX(4px)}

/* 다음 거: 미끼 질문(원래 제목은 작게) */
.baits li{padding:20px 0 22px;border-top:1px solid var(--site-rule)}
.baits li:last-child{border-bottom:1px solid var(--site-rule)}
.bait-meta{display:flex;justify-content:space-between;color:var(--site-faint);margin-bottom:8px}
.bait-q{font-size:27px;font-weight:620;letter-spacing:-.05em;line-height:1.24;color:var(--site-fg);text-wrap:balance}
.bait-t{margin-top:8px;font-size:15px;color:var(--site-soft);letter-spacing:-.02em}

.foot-v{margin-top:36px;padding-top:18px;border-top:1.5px solid var(--site-fg);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.ig-line{font-size:18px;font-weight:600;letter-spacing:-.035em}
.ig-link{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;background:var(--ink);color:#FFFFFF;border-radius:4px;font-family:var(--mono);font-size:14.5px;word-spacing:-.3em}
.ig-link:hover{background:var(--play)}

.lost{margin-top:28px}
.lost h2{font-size:clamp(34px,10vw,48px);font-weight:620;letter-spacing:-.05em;line-height:1.15}
.lost a{display:inline-flex;margin-top:20px;min-height:44px;align-items:center;font-weight:600;text-decoration:underline;text-underline-offset:5px}

/* 알림 */
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:30;max-width:calc(100% - 2 * var(--gut));
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:4px;font-size:15px;font-weight:500;text-align:center;
  opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s var(--ease);pointer-events:none;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (min-width:960px){
  :root{--gut:56px}
  .mono{font-size:13.5px}
  .home-wrap{padding-top:40px;padding-bottom:40px}
  .mast{padding-bottom:26px}
  .logo{font-size:132px}
  .plays{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;margin-top:32px}
  .tile{min-height:520px;padding:30px 32px;transition:transform .2s var(--ease)}
  .tile:hover{transform:translateY(-2px)}
  .tile-title{font-size:clamp(64px,5.6vw,80px);max-width:11em}
  .tile-no{font-size:14px}
  .later{height:100%}
  .baits{display:flex;flex-direction:column;height:100%}
  .baits li{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 0}
  .bait-q{font-size:31px}
  .bait-t{font-size:16px}
  .foot-v{margin-top:28px;padding-top:20px}
  .ig-line{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s !important;animation-delay:0s !important;transition-duration:0s !important}
}