/* 배치: 종이 위에 잉크로 그린 정보판. 가로 화면은 위에 정보, 아래에 카드 3장. 세로 화면은 위에서 아래로 쌓음. */
:root{
  /* 색 */
  --paper:#F1F0EB;      /* 바탕 종이 */
  --card:#FFFFFF;       /* 카드, 판 */
  --ink:#1C1B19;        /* 잉크(선, 글씨) */
  --ink-soft:#6E6C66;   /* 보조 글씨 */
  --line:#D9D6CE;       /* 옅은 선 */
  --gold:#F2C12E;       /* 강조색: 진행 막대, 중요한 표시 */
  --up:#D7302F;         /* 상승(빨강) */
  --down:#2D5BD3;       /* 하락(파랑) */
  /* 글꼴 */
  --f-display:'Black Han Sans','Noto Sans KR',sans-serif;
  --f-hand:'Gaegu','Noto Sans KR',cursive;
  --f-ui:'Noto Sans KR',system-ui,sans-serif;
  /* 손으로 그린 듯한 테두리 */
  --r-sketch:14px 18px 12px 20px / 18px 12px 20px 14px;
  --line-w:2.5px solid var(--ink);
  --shadow:4px 4px 0 var(--ink);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--f-ui);word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .11 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.up{color:var(--up)} .down{color:var(--down)}

.screen{
  min-height:100vh;min-height:100dvh;
  padding-block:max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.panel{background:var(--card);border:var(--line-w);border-radius:var(--r-sketch);box-shadow:var(--shadow)}

/* ── 공용 버튼 ── */
.btn-main,.btn-sub{
  min-height:52px;padding:0 26px;border:var(--line-w);border-radius:999px;
  font-weight:900;font-size:17px;box-shadow:var(--shadow);
}
.btn-main{background:var(--ink);color:var(--card)}
.btn-sub{background:var(--card)}
.round{
  width:44px;height:44px;border-radius:50%;border:var(--line-w);background:var(--card);
  display:grid;place-content:center;gap:4px;box-shadow:3px 3px 0 var(--ink);padding:0
}
.round i{display:block;width:17px;height:2.5px;background:var(--ink);border-radius:2px}
/* 소리 끄기 버튼 */
.sound-btn .spk{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sound-btn .spk-body{fill:var(--ink)}
.sound-btn .spk-off{display:none}
.sound-btn.off .spk-on{display:none}
.sound-btn.off .spk-off{display:inline}
.sound-btn.off{background:var(--paper)}
.sound-btn.small{width:34px;height:34px;box-shadow:none;border-width:2px}
.sound-btn.small .spk{width:18px;height:18px}

/* ── 돈 이펙트 ── */
.fx-layer{position:fixed;inset:0;z-index:30;pointer-events:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--paper) 72%, transparent);transition:background .35s ease}
.fx-layer.fly{background:transparent}
.fx-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px}
.fx-num{font-family:var(--f-display);font-size:clamp(44px,9vw,96px);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;transform-origin:50% 50%}
.fx-sub{font-weight:900;font-size:clamp(16px,2.4vw,24px);font-variant-numeric:tabular-nums;transition:opacity .25s ease}
.fx-layer.fly .fx-sub{opacity:0}
.fx-layer.gain .fx-num{animation:fx-pop .35s cubic-bezier(.3,1.6,.5,1)}
.fx-layer.loss .fx-num{animation:fx-tremble .5s linear}
.fx-flash{position:absolute;inset:0;opacity:0;animation:fx-flash .7s ease-out forwards}
.fx-layer.gain .fx-flash{box-shadow:inset 0 0 calc(80px + 100px * var(--power, .5)) var(--gold)}
.fx-layer.loss .fx-flash{box-shadow:inset 0 0 calc(80px + 120px * var(--power, .5)) var(--down)}
.fx-coin,.fx-bill{position:absolute;left:50%;top:50%;animation:fx-burst .95s cubic-bezier(.2,.8,.4,1) forwards;opacity:0}
.fx-coin{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--gold);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 3px var(--gold), inset 0 0 0 5px var(--ink)}
.fx-bill{width:30px;height:16px;margin:-8px 0 0 -15px;border-radius:2px;background:var(--card);border:2px solid var(--down);box-shadow:inset 0 0 0 3px var(--card), inset 0 0 0 4.5px var(--down);animation-name:fx-fall;animation-duration:1.1s}
@keyframes fx-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes fx-tremble{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes fx-flash{0%{opacity:0}25%{opacity:.75}100%{opacity:0}}
@keyframes fx-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1)}}
@keyframes fx-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 60px)) rotate(var(--rot))}}
#app.fx-shake{animation:fx-shake .5s linear}
@keyframes fx-shake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(calc(var(--amp,6px) * -1),calc(var(--amp,6px) * .4))}
  25%{transform:translate(var(--amp,6px),calc(var(--amp,6px) * -.5))}
  40%{transform:translate(calc(var(--amp,6px) * -.8),0)}
  55%{transform:translate(calc(var(--amp,6px) * .6),calc(var(--amp,6px) * .3))}
  70%{transform:translate(calc(var(--amp,6px) * -.4),0)}
  85%{transform:translate(calc(var(--amp,6px) * .2),0)}
}
@media (prefers-reduced-motion:reduce){
  .fx-layer.gain .fx-num,.fx-layer.loss .fx-num,#app.fx-shake{animation:none}
  .fx-flash{animation:none}
}

/* ── 오프닝 ── */
.opening{position:relative;height:100vh;height:100dvh;overflow:hidden;background:var(--paper)}
.op-stage{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.op-stage.in{opacity:1}
#op-scene{position:absolute;left:0;right:0;bottom:6%;width:100%;height:78%}
.op-dark{position:absolute;inset:0;background:var(--ink);display:grid;place-items:center;padding:0 max(24px, env(safe-area-inset-left, 0px));transition:opacity .8s ease;z-index:3}
.op-dark.out{opacity:0;pointer-events:none}
.op-type{position:relative;z-index:1;margin:0;color:var(--paper);font-family:var(--f-hand);font-weight:700;font-size:clamp(24px,5vw,40px);line-height:1.6;text-align:center;min-height:3.2em;transition:opacity .3s ease}
.op-type.dim{opacity:.18}
/* 오프닝 ①: 다가오는 트럭, 경적, 하얀 번쩍임 */
.op-road{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;z-index:2}
.op-car{position:relative;width:min(64vw,440px);aspect-ratio:320/280;transform:scale(.08);opacity:0}
.op-road.go .op-car{animation:op-approach 1.6s cubic-bezier(.6,0,.9,.5) forwards}
@keyframes op-approach{0%{transform:scale(.08);opacity:0}12%{opacity:1}100%{transform:scale(2.6);opacity:1}}
#op-truck{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.op-lamp{position:absolute;top:55.7%;width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle, #fffbe8 0 18%, rgba(242,193,46,.75) 34%, rgba(242,193,46,0) 70%)}
.op-lamp.l{left:24.4%}
.op-lamp.r{left:75.6%}
.op-road.go .op-lamp{animation:op-lamp 1.6s ease-in forwards}
@keyframes op-lamp{0%{opacity:.2;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.9)}}
.op-horn{position:absolute;left:0;right:0;top:14%;z-index:3;margin:0;text-align:center;white-space:nowrap;
  font-family:var(--f-display);font-size:clamp(40px,9vw,96px);line-height:1;color:var(--gold);opacity:0}
.op-horn.in{animation:op-horn 1.1s ease-out forwards}
@keyframes op-horn{
  0%{opacity:0;transform:scale(.4) rotate(-6deg)}
  25%{opacity:1;transform:scale(1.15) rotate(-4deg)}
  40%{transform:translateX(-7px) scale(1.05) rotate(-3deg)}
  55%{transform:translateX(7px) scale(1.05) rotate(-3deg)}
  70%{transform:translateX(-4px) rotate(-3deg)}
  100%{opacity:1;transform:rotate(-3deg)}
}
.op-dark{--amp:10px}
.op-dark.hit .op-road,.op-dark.hit .op-type{animation:fx-shake .3s linear 4}
.op-flash{position:absolute;inset:0;z-index:4;background:var(--card);opacity:0;pointer-events:none}
.op-flash.in{animation:op-whiteout 1.1s ease-out forwards}
@keyframes op-whiteout{0%{opacity:0}12%{opacity:1}45%{opacity:1}100%{opacity:0}}
.op-cal{
  position:absolute;left:50%;top:50%;width:max-content;min-width:min(300px,70vw);max-width:calc(100vw - 32px);transform:translate(-50%,-50%);z-index:2;
  background:var(--card);border:var(--line-w);border-radius:var(--r-sketch);box-shadow:var(--shadow);
  padding:30px clamp(20px,4vw,36px) 22px;text-align:center;opacity:0;transition:opacity .6s ease, transform .7s ease;
}
.op-cal.in{opacity:1}
.op-cal.away{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-8deg)}
.op-rings{position:absolute;top:-12px;left:0;right:0;display:flex;justify-content:space-evenly}
.op-rings i{width:14px;height:26px;border:3px solid var(--ink);border-radius:8px;background:var(--paper)}
.op-year{font-family:var(--f-display);font-size:clamp(64px,16vw,120px);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;transform-origin:50% 0}
.op-year.flip{animation:op-flip .22s ease-out}
.op-month{margin-top:6px;font-family:var(--f-display);font-size:28px;color:var(--ink-soft)}
@keyframes op-flip{from{transform:rotateX(85deg);opacity:.2}to{transform:rotateX(0);opacity:1}}
.op-caption{
  position:absolute;left:0;right:0;bottom:max(96px, calc(env(safe-area-inset-bottom, 0px) + 88px));z-index:3;margin:0;
  padding:0 max(16px, env(safe-area-inset-left, 0px));text-align:center;
  font-family:var(--f-hand);font-weight:700;font-size:clamp(20px,3.2vw,30px);line-height:1.4;color:var(--ink);transition:opacity .6s ease
}
.op-caption.out{opacity:0}
.op-clip{
  position:absolute;left:max(16px, 6%);top:max(16px, 7%);max-width:min(380px,calc(100% - 32px));z-index:1;
  background:var(--card);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:10px 14px 12px;
  transform:translateY(-140%) rotate(-10deg);opacity:0;transition:transform .6s cubic-bezier(.3,1.5,.5,1), opacity .3s ease
}
.op-clip.in{transform:translateY(0) rotate(-2deg);opacity:1}
.op-clip-date{display:inline-block;background:var(--ink);color:var(--card);padding:1px 8px;border-radius:3px;font-size:12px;font-weight:700}
.op-clip-head{margin-top:6px;font-family:var(--f-display);font-size:22px;line-height:1.2}
.op-clip-sub{margin-top:2px;font-size:13px;color:var(--ink-soft)}
.op-bubble{
  position:absolute;z-index:1;white-space:nowrap;background:var(--card);border:2.2px solid var(--ink);border-radius:16px 18px 15px 17px;
  padding:3px 12px 5px;font-family:var(--f-hand);font-weight:700;font-size:clamp(16px,2.2vw,22px);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease, transform .3s ease
}
.op-bubble.in{opacity:1;transform:none}
.op-bubble.out{opacity:0}
.op-bubble::after{content:"";position:absolute;top:100%;left:calc(var(--tx, 50%) - 1px);width:2.4px;height:var(--tl, 10px);background:var(--ink);border-radius:2px}
.op-bubble.think{border-style:dashed;border-radius:999px}
.op-bubble.think::after{width:10px;left:calc(var(--tx, 50%) - 5px);background:radial-gradient(circle at 50% 4px, var(--ink) 0 3.2px, transparent 3.6px),radial-gradient(circle at 50% calc(100% - 3px), var(--ink) 0 2.2px, transparent 2.6px)}
.op-money{
  position:absolute;z-index:1;white-space:nowrap;font-family:var(--f-display);font-size:clamp(26px,4vw,40px);
  background:linear-gradient(transparent 50%, var(--gold) 50% 92%, transparent 92%);padding:0 6px;opacity:0
}
.op-money.in{animation:op-pop .5s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes op-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.op-title{
  position:absolute;left:50%;top:10%;z-index:2;margin:0;white-space:nowrap;
  font-family:var(--f-display);font-weight:400;font-size:clamp(28px,8vw,84px);line-height:1;
  background:var(--card);border:4px solid var(--ink);border-radius:10px;padding:10px 20px 14px;box-shadow:var(--shadow);
  transform:translateX(-50%) rotate(-3deg);opacity:0
}
.op-title em{font-style:normal;background:linear-gradient(transparent 55%, var(--gold) 55% 92%, transparent 92%)}
.op-title.in{animation:op-stamp .45s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes op-stamp{0%{opacity:0;transform:translateX(-50%) scale(2.4) rotate(-12deg)}100%{opacity:1;transform:translateX(-50%) scale(1) rotate(-3deg)}}
.op-start{position:absolute;left:50%;bottom:max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));transform:translateX(-50%);z-index:4}
.op-corner{position:absolute;z-index:5;top:max(14px, calc(env(safe-area-inset-top, 0px) + 10px));right:max(16px, env(safe-area-inset-right, 0px));display:flex;align-items:center;gap:8px}
.op-skip{
  padding:6px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;font-size:14px
}
@media (max-aspect-ratio:4/5), (max-width:720px){
  #op-scene{bottom:14%;height:62%}
  .op-title{top:36%;padding:8px 14px 10px}
  .op-clip{top:max(56px, 8%)}
  .op-clip-head{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .op-stage,.op-cal,.op-clip,.op-bubble,.op-dark{transition:none}
  .op-money.in,.op-title.in{animation:none;opacity:1}
}

/* ── 시작 화면 ── */
.title-screen{display:grid;place-items:center}
.title-box{max-width:620px;width:100%;display:flex;flex-direction:column;gap:18px}
.title-logo{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(52px,12vw,92px);line-height:1}
.title-logo em,.logo em{font-style:normal;background:linear-gradient(transparent 55%, var(--gold) 55% 92%, transparent 92%)}
.story p{margin:0 0 6px;font-family:var(--f-hand);font-weight:700;font-size:21px;line-height:1.4}
.title-actions{display:flex;flex-wrap:wrap;gap:12px}
.howto{margin:0;padding:14px 18px 14px 34px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-sketch);font-size:14px;line-height:1.6}
.source{margin:0;font-size:12px;color:var(--ink-soft)}

/* ── 게임 화면: 가로(기본) ── */
.game{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas:
    "top    top     top"
    "news   news    news"
    "hud    market  holding"
    "result result  result"
    "cards  cards   cards"
    "actions actions actions"
    "keys   keys    keys";
  grid-template-rows:auto;
  align-content:start;
  gap:20px 24px;
  max-width:1280px;margin:0 auto;
}
.hud{grid-area:hud;display:flex;flex-direction:column;gap:5px;min-width:0}
/* 게임 화면 배경: 흐릿한 동네 그림 (opacity를 올리면 진해짐) */
.game{isolation:isolate}
.game-bg{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:-1;pointer-events:none;opacity:.2}
/* 우리 집이 바뀌었을 때 알림 */
.bg-toast{
  position:fixed;left:50%;top:max(72px, calc(env(safe-area-inset-top, 0px) + 64px));z-index:31;transform:translateX(-50%);
  max-width:calc(100% - 32px);padding:8px 18px;border:var(--line-w);border-radius:999px;background:var(--gold);box-shadow:3px 3px 0 var(--ink);
  font-weight:900;font-size:15px;text-align:center;pointer-events:none
}
.bg-toast.in{animation:toast-in 3.2s ease forwards}
@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-14px)}8%{opacity:1;transform:translate(-50%,0)}85%{opacity:1}100%{opacity:0}}

/* 이달의 뉴스 (신문 조각) */
.news{
  grid-area:news;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0;padding:8px 16px 9px;
  background:var(--card);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-.3deg)
}
.news-tag{flex:none;align-self:center;padding:1px 8px;border:2px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--card);font-size:12px;font-weight:700}
.news-tag.auto{background:var(--card);color:var(--ink)}
.news-head{min-width:0;font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.25}
.news-sub{font-size:14px;color:var(--ink-soft)}
.news.drop{animation:news-drop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes news-drop{0%{opacity:0;transform:translateY(-24px) rotate(-4deg)}100%{opacity:1;transform:rotate(-.3deg)}}

/* 맨 위 줄: 제목, 힌트, 메뉴 */
.topbar{grid-area:top;display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.top-btns{display:flex;align-items:center;gap:10px}
/* 날짜: 달력 한 장 모양, 달이 바뀌면 넘어감 */
.top-date{
  position:relative;height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;margin-right:4px;
  border:var(--line-w);border-radius:8px 10px 9px 8px;background:var(--card);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--f-display);font-size:23px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;transform-origin:50% 0
}
.top-date b{font-weight:400}
.top-date .mo{background:linear-gradient(transparent 52%, var(--gold) 52% 94%, transparent 94%);padding:0 2px}
.top-date::before,.top-date::after{content:"";position:absolute;top:-10px;width:5px;height:12px;border:2.5px solid var(--ink);border-radius:4px;background:var(--paper)}
.top-date::before{left:16px}
.top-date::after{right:16px}
.top-date.flip{animation:op-flip .32s ease-out}
.hint-btn{
  height:44px;display:flex;align-items:center;gap:6px;padding:0 7px 0 12px;
  border:var(--line-w);border-radius:999px;background:var(--card);box-shadow:3px 3px 0 var(--ink);font-weight:900;font-size:15px
}
.hint-btn .bulb{width:22px;height:22px;fill:var(--gold);stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint-btn b{min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--ink);color:var(--card);display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.hint-btn.empty .bulb{fill:var(--card)}
.hint-btn.empty b{background:var(--ink-soft)}
.hint-btn.on{background:var(--gold)}
.hint-btn:hover{background:var(--gold)}
.logo{font-family:var(--f-display);font-size:19px;white-space:nowrap}
.label{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft)}
.worth{font-family:var(--f-display);font-size:clamp(34px,4.4vw,52px);line-height:1.05;font-variant-numeric:tabular-nums}
.delta{font-size:14px;font-weight:700;color:var(--ink-soft)}
.timeline{margin-top:6px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.track{position:relative;height:12px;border:var(--line-w);border-radius:999px;background:var(--card)}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--gold);border-radius:999px}
.track .tick{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--ink);opacity:.3;left:var(--at)}
.track .dot{position:absolute;top:50%;left:var(--p,0%);width:16px;height:16px;border:var(--line-w);background:var(--gold);border-radius:50%;transform:translate(-50%,-50%)}
.when{font-size:14px;color:var(--ink-soft)}
.when b{color:var(--ink);font-weight:900}
.chapter{display:inline-block;margin-left:4px;padding:0 8px;border:2px solid var(--ink);border-radius:999px;font-size:12px;font-weight:700;color:var(--ink);background:var(--card)}

/* 지금 들고 있는 것 */
.holding{grid-area:holding;align-self:start;padding:14px 16px;min-width:0}
.holding h2{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
.hold-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--f-display);font-size:24px;line-height:1.15}
.hold-meta{margin-top:6px;font-size:13px;color:var(--ink-soft)}
.hold-chg{font-weight:900}
.hold-warn{margin-top:8px;padding:6px 10px;border:2px dashed var(--ink);border-radius:8px;font-size:13px;font-weight:700}
.tag{display:inline-block;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:0 9px;font-family:var(--f-ui);font-weight:900;font-size:12px;line-height:1.6}

/* 이달의 시장 */
.market{grid-area:market;align-self:start;background:var(--card);border:2px solid var(--ink);padding:10px 14px 12px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-.6deg);min-width:0}
.market-head{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700;color:var(--ink-soft)}
.market-tag{background:var(--ink);color:var(--card);padding:1px 8px;border-radius:3px;letter-spacing:.06em}
.market-list{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;font-size:14px}
.market-list li{display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.market-list span:first-child{color:var(--ink-soft)}
.market-list b{font-weight:900;white-space:nowrap}

/* 결과 */
.result{grid-area:result;justify-self:center;max-width:760px;width:100%;padding:12px 18px;background:var(--card);border:var(--line-w);border-radius:var(--r-sketch);box-shadow:var(--shadow);text-align:center}
.result-head{font-size:13px;font-weight:700;color:var(--ink-soft)}
.result-main{margin:4px 0 0;font-family:var(--f-display);font-size:24px;line-height:1.25}
.result-money{margin:4px 0 0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.result-note{margin:6px 0 0;font-family:var(--f-hand);font-weight:700;font-size:19px}

/* 카드 */
.cards{grid-area:cards;display:flex;gap:18px;justify-content:center;align-items:stretch;margin-top:8px}
.card{
  position:relative;width:236px;flex:0 1 236px;min-width:0;
  background:var(--card);border:var(--line-w);border-radius:var(--r-sketch);box-shadow:var(--shadow);
  transform:rotate(var(--tilt,0deg));display:flex;flex-direction:column;overflow:hidden;
  transition:transform .15s ease, opacity .2s ease;
}
.cards.choosing .card:hover{transform:rotate(0deg) translateY(-6px)}
.ctype{height:42px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 10px;border-bottom:var(--line-w)}
.sector{background:var(--card);padding:1px 6px;border-radius:4px;font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 카드 종류는 색 대신 무늬로 구분 */
.pat-stock{background:repeating-linear-gradient(-45deg,var(--ink) 0 1.6px,transparent 1.6px 8px)}
.pat-realty{background:repeating-linear-gradient(45deg,var(--ink) 0 1.3px,transparent 1.3px 9px),repeating-linear-gradient(-45deg,var(--ink) 0 1.3px,transparent 1.3px 9px)}
.pat-dot{background:radial-gradient(var(--ink) 1.4px,transparent 1.8px) 0 0/8px 8px}
.pat-deposit{background:repeating-linear-gradient(0deg,var(--ink) 0 1.4px,transparent 1.4px 7px)}
.pat-fund{background:repeating-linear-gradient(90deg,var(--ink) 0 1.4px,transparent 1.4px 7px)}
.cbody{padding:12px 14px 4px;display:flex;flex-direction:column;gap:3px;flex:1}
.cname{margin:0 0 4px;font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.12}
.cprice{margin:0;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.cchg{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft)}
.cextra{margin:2px 0 0;font-size:12.5px;font-weight:700}
.cextra mark{background:linear-gradient(transparent 45%, var(--gold) 45% 95%, transparent 95%);color:var(--ink)}
.cnote{margin:6px 0 0;font-family:var(--f-hand);font-weight:700;font-size:17px;color:var(--ink-soft);line-height:1.2}
.cpick{margin:10px 12px 12px;padding:10px;border:var(--line-w);border-radius:999px;background:var(--ink);color:var(--card);font-weight:900;font-size:15px}
.cpick:disabled{background:var(--card);color:var(--ink-soft);border-style:dashed}
.cresult{margin:8px 12px 12px;padding:8px 10px;border:2px solid var(--ink);border-radius:10px;text-align:center}
.cresult > span{display:block;font-size:12px;font-weight:700;color:var(--ink-soft)}
.cresult b{font-family:var(--f-display);font-weight:400;font-size:24px}
.card.is-picked{outline:4px solid var(--gold);outline-offset:3px}
.card.is-picked .cresult{background:var(--gold)}
.card.is-picked .cresult > span{color:var(--ink)}
.card.is-dim{opacity:.72}
/* 힌트: 특별한 소문 */
.chint{margin:8px 0 0;padding:6px 9px 7px;background:var(--gold);border:2px solid var(--ink);border-radius:9px 11px 8px 10px;transform:rotate(-1deg)}
.chint b{display:block;font-size:11px;font-weight:900;letter-spacing:.08em}
.chint span{display:block;font-family:var(--f-hand);font-weight:700;font-size:16px;line-height:1.2}
.card.is-hinted{box-shadow:0 0 0 4px var(--gold), var(--shadow)}
.card.hint-new .chint{animation:hint-in .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hint-in{0%{opacity:0;transform:scale(.4) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-1deg)}}
.stamp{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-12deg);
  padding:4px 14px;border:4px double currentColor;border-radius:8px;background:rgba(255,255,255,.88);
  font-family:var(--f-display);font-size:30px;white-space:nowrap;pointer-events:none
}

/* 아래 버튼 */
.actions{grid-area:actions;display:flex;justify-content:center;gap:14px}
.keep,.next{
  min-height:56px;padding:8px 26px;border:var(--line-w);border-radius:var(--r-sketch);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:280px
}
.keep{background:var(--card)}
.keep b{font-family:var(--f-display);font-weight:400;font-size:20px}
.keep span{font-size:13px;font-weight:700;color:var(--ink-soft)}
.next{background:var(--ink);color:var(--card);font-family:var(--f-display);font-size:22px}
.keys{grid-area:keys;margin:0;text-align:center;font-size:12px;color:var(--ink-soft)}

/* ── 게임 화면: 세로(핸드폰) ── */
@media (max-aspect-ratio:4/5), (max-width:720px){
  .game{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"top" "news" "hud" "holding" "market" "result" "cards" "actions";
    grid-template-rows:auto;
    gap:10px;
  }
  .keys{display:none}
  .worth{font-size:38px}
  .holding{padding:8px 12px;box-shadow:3px 3px 0 var(--ink)}
  .holding h2{display:none}
  .hold-name{font-size:18px}
  .hold-meta{margin-top:2px;font-size:12px}
  .market{transform:none;padding:8px 12px 10px}
  .market-list{font-size:13px;gap:2px 12px}
  .result{padding:8px 12px}
  .result-main{font-size:19px}
  .result-money{font-size:13px}
  .result-note{font-size:16px}
  .cards{gap:8px;margin-top:2px}
  .card{width:auto;flex:1 1 0;box-shadow:3px 3px 0 var(--ink)}
  .ctype{height:30px;padding:0 6px}
  .sector{display:none}
  .tag{font-size:11px;padding:0 7px}
  .cbody{padding:8px 8px 2px;gap:1px}
  .cname{font-size:17px}
  .cprice{font-size:13px}
  .cchg,.cextra{font-size:11.5px}
  .cnote{font-size:14px;margin-top:3px}
  .cpick{margin:8px 6px;padding:7px 4px;font-size:13px;border-width:2px}
  .cresult{margin:6px;padding:6px 4px}
  .cresult b{font-size:18px}
  .stamp{font-size:20px;padding:2px 8px;border-width:3px}
  .actions{flex-direction:column}
  .keep,.next{min-width:0;width:100%}
}

/* ── 엔딩 ── */
.ending{display:grid;place-items:center}
.ending-box{max-width:640px;width:100%;display:flex;flex-direction:column;gap:10px}
.ending-when{margin:0;font-weight:700;color:var(--ink-soft)}
.ending-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,9vw,64px);line-height:1.05}
.ending-worth{margin:0;font-family:var(--f-display);font-size:30px;font-variant-numeric:tabular-nums}
.ending-text{margin:0;font-family:var(--f-hand);font-weight:700;font-size:21px;line-height:1.4}
.ending h2{margin:14px 0 0;font-family:var(--f-display);font-weight:400;font-size:20px}
.compare{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;font-size:14px}
.bar-row .bar{position:relative;height:28px;border:2px solid var(--ink);border-radius:6px;background:var(--card);overflow:hidden}
.bar-row .bar i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.4px,transparent 1.4px 7px)}
.bar-row.me .bar i{background:var(--gold)}
.bar-row .bar span{position:relative;display:block;padding:0 8px;line-height:24px;font-weight:900;font-variant-numeric:tabular-nums;background:transparent}
.bar-row .bar span b{background:var(--card);padding:0 4px;border-radius:3px}
.stats{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:14px}
.stats dt{color:var(--ink-soft)}
.stats dd{margin:0;font-weight:700}

.cgraph,.hold-graph{
  margin:8px 12px 0;padding:6px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--card);
  font-size:13px;font-weight:700
}
.cgraph + .cpick{margin-top:8px}
.hold-graph{margin:10px 0 0}

.life-line{margin-top:4px;padding:5px 10px;border:2px dashed var(--ink);border-radius:8px;font-size:13px;color:var(--ink-soft);background:var(--card)}
.life-line b{color:var(--ink);font-weight:900}
.life-line span{font-weight:900}
.result-flow{margin:2px 0 0;font-size:13px;font-weight:700;color:var(--ink-soft)}

/* ── 인생 이벤트 ── */
.event{width:min(520px,100%);padding:20px;display:flex;flex-direction:column;gap:10px}
.event-when{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft)}
.event-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.1}
.event-text{margin:0;font-family:var(--f-hand);font-weight:700;font-size:20px;line-height:1.4}
.event-choices{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.event-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 16px;border:var(--line-w);border-radius:var(--r-sketch);background:var(--card);box-shadow:3px 3px 0 var(--ink)}
.event-choice b{font-size:17px;font-weight:900}
.event-choice span{font-size:13px;font-weight:700;color:var(--ink-soft)}
.event-choice:hover:not(:disabled){background:var(--gold)}
.event-choice:disabled{opacity:.5;border-style:dashed}
.ending-text p{margin:0 0 4px}

/* ── 그래프 보기 ── */
.detail-backdrop{position:fixed;inset:0;background:rgba(28,27,25,.45);display:grid;place-items:center;padding:16px;z-index:20;overflow-y:auto}
.detail{width:min(560px,100%);padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.detail-type{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft)}
.detail-name{margin:2px 0 0;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.15}
.round.close{font-size:24px;line-height:1;font-weight:700;flex:none}
.detail-desc{margin:0;font-size:14px;color:var(--ink-soft)}
.detail-price{margin:0;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.detail-range{display:flex;gap:8px}
.detail-range button{padding:4px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-size:13px;font-weight:700}
.detail-range button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.detail-chart{width:100%;height:200px;display:block;border:2px solid var(--ink);border-radius:10px;background:var(--card)}
.detail-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.detail-stats div{border:2px solid var(--ink);border-radius:10px;padding:6px 8px;text-align:center}
.detail-stats span{display:block;font-size:12px;font-weight:700;color:var(--ink-soft)}
.detail-stats b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.detail-note{margin:0;font-size:13px}
.detail-note:empty{display:none}
.detail-warn{margin:0;font-family:var(--f-hand);font-weight:700;font-size:16px;color:var(--ink-soft)}

/* ── 힌트 창 ── */
.hint-box{width:min(440px,100%);padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.hint-bulbs{display:flex;flex-wrap:wrap;gap:8px;min-height:26px;align-items:center;font-size:14px;font-weight:700;color:var(--ink-soft)}
.bulb-dot{width:24px;height:24px;border-radius:50%;background:var(--gold);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 3px var(--gold), inset 0 0 0 5px var(--card)}
.hint-left{margin:0;font-size:15px;font-weight:900}
.hint-why{margin:-2px 0 0;font-size:13px;font-weight:700;color:var(--ink-soft)}
.hint-why:empty{display:none}
.btn-main:disabled{opacity:.45;box-shadow:none}

/* ── 광고 (연습용) ── */
.ad-backdrop{z-index:25;background:rgba(28,27,25,.75)}
.ad-box{width:min(420px,100%);padding:16px;display:flex;flex-direction:column;gap:10px}
.ad-tag{align-self:flex-start;padding:1px 8px;border:2px solid var(--ink);border-radius:4px;font-size:12px;font-weight:900}
.ad-screen{
  height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border:2px dashed var(--ink);border-radius:10px;font-family:var(--f-display);font-size:22px;
  background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(28,27,25,.05) 10px 20px)
}
.ad-screen small{font-family:var(--f-ui);font-size:13px;font-weight:700;color:var(--ink-soft)}
.ad-bar{height:10px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.ad-bar span{display:block;height:100%;width:0;background:var(--gold)}

/* ── 메뉴 ── */
.menu-backdrop{position:fixed;inset:0;background:rgba(28,27,25,.45);display:grid;place-items:center;padding:16px;z-index:10}
.menu{display:flex;flex-direction:column;gap:12px;padding:22px;min-width:min(320px,100%)}

/* ── 핸드폰: 그래프 보기 버튼과 그래프 창 (위의 일반 규칙보다 뒤에 있어야 적용됨) ── */
@media (max-aspect-ratio:4/5), (max-width:720px){
  .cgraph{margin:6px 6px 0;padding:4px 4px;font-size:11.5px}
  .cgraph + .cpick{margin-top:6px}
  .hold-graph{margin-top:6px;padding:3px 10px;font-size:12px}
  .detail-backdrop{place-items:end center;padding:0}
  .detail{width:100%;border-radius:18px 18px 0 0;padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));box-shadow:none}
  .detail-chart{height:180px}
  .event{width:100%;border-radius:18px 18px 0 0;padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));box-shadow:none}
  .event-title{font-size:26px}
  .event-text{font-size:18px}
  .life-line{font-size:12px;padding:4px 8px}
  .top-btns{gap:6px;flex:1;min-width:0}
  .news{padding:6px 10px 7px;gap:2px 8px}
  .news-head{font-size:17px}
  .news-sub{flex-basis:100%;font-size:12.5px}
  .topbar .round{width:40px;height:40px}
  .topbar .logo{display:none}
  .top-date{height:40px;padding:0 11px;margin-right:auto;font-size:20px;gap:5px}
  .hint-btn{height:40px;padding:0 5px 0 10px;font-size:14px}
  .hint-btn .bulb{width:19px;height:19px}
  .hint-btn b{min-width:24px;height:24px;font-size:13px}
  .chint{margin-top:4px;padding:4px 5px 5px}
  .chint b{font-size:10px;letter-spacing:.02em}
  .chint span{font-size:13px}
  .hint-box,.ad-box{width:100%;border-radius:18px 18px 0 0;padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));box-shadow:none}
}

@media (prefers-reduced-motion:reduce){ .card{transition:none} .top-date.flip,.news.drop{animation:none} .bg-toast.in{animation:none} }

/* 아주 좁은 핸드폰: 힌트 버튼은 전구와 숫자만 */
@media (max-width:380px){
  .hint-btn span{display:none}
  .hint-btn{padding:0 5px 0 8px}
  .top-date{font-size:18px;padding:0 9px}
}