/* GONOM v2 – 공장 오락기: 검정 기계 + 황금 테두리 + 빨강 네온 + 파랑, 전광판 숫자
   상승 빨강 / 하락 파랑 (한국 관례). 손실도 이익과 같은 크기로 보여 준다. */
:root {
  --k: #000000;
  --cab: #0E0E0E;      /* 기계 몸통 */
  --cab-2: #1A1A1A;    /* 몸통 안 칸 */
  --gold: #F5C518;
  --gold-l: #FFF0A0;
  --gold-d: #A87400;
  --red: #FF1F3D;      /* 네온 빨강 (검정 위) */
  --red-ink: #D9001B;  /* 빨강 (흰 위) */
  --blue: #3D86FF;     /* 네온 파랑 (검정 위) */
  --blue-ink: #0043E0; /* 파랑 (흰 위) */
  --w: #FFFFFF;
  --ink-2: #444444;
  --hz: #FFD400;       /* 경고 테이프 노랑 */
  --wrap: 1160px;
  --metal: linear-gradient(180deg, #FFF3B0 0%, #F5C518 38%, #A87400 52%, #F5C518 70%, #FFE680 100%);
  --f-disp: 'Black Han Sans', 'IBM Plex Sans KR', sans-serif;
  --f-body: 'IBM Plex Sans KR', system-ui, sans-serif;
  --f-num: 'Chakra Petch', 'IBM Plex Sans KR', sans-serif;
  --f-dot: 'VT323', 'Chakra Petch', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--w); font: 400 16px/1.65 var(--f-body); word-break: keep-all; overflow-wrap: anywhere;
  background-color: var(--k);
  background-image: radial-gradient(rgba(245, 197, 24, .10) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--red-ink); } .dn { color: var(--blue-ink); } .flat { color: var(--ink-2); }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--k); padding: 8px 12px; z-index: 9; }
.skip:focus { left: 8px; }
.gold { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 대가성 문구 (상단, 눈에 띄게) */
.disclose { background: var(--gold); color: var(--k); font-size: 14px; font-weight: 700; text-align: center; padding: 8px 16px; }

/* 머리: 전구 띠 + 간판 */
.mast-wrap { border-bottom: 4px solid var(--gold); background: var(--k); position: relative; }
.mast-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 10px;
  background: radial-gradient(circle, var(--gold-l) 0 3px, transparent 3.6px) 0 50% / 22px 10px repeat-x; }
@keyframes chase { 50% { background-position: 11px 50%; filter: hue-rotate(-40deg) saturate(2); } }
.mast { max-width: var(--wrap); margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { font-family: var(--f-disp); font-size: 40px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; line-height: 1;
  color: var(--gold); text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(255, 31, 61, .35); }
.logo-mark { width: 30px; height: 30px; background: repeating-linear-gradient(-45deg, var(--k) 0 6px, var(--hz) 6px 12px); border: 3px solid var(--gold); }
.mast nav { display: flex; gap: 6px; flex-wrap: wrap; }
.mast nav a { text-decoration: none; font-weight: 700; padding: 8px 14px; border: 2px solid var(--cab-2); }
.mast nav a:hover { border-color: var(--gold); color: var(--gold); }
.mast nav a[aria-current="page"] { background: var(--red); border-color: var(--red); color: var(--w); }

main { max-width: var(--wrap); margin: 0 auto; padding: 22px 16px 48px; display: grid; gap: 30px; }
main > * { min-width: 0; }

/* 황금 테두리 기계판 */
.cab { background: var(--cab); border: 6px solid; border-image: var(--metal) 1; padding: 24px; }
.panel { background: var(--w); color: var(--k); border: 6px solid; border-image: var(--metal) 1; padding: 0 24px 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; margin: 0 -24px 20px; padding: 14px 24px; background: var(--red); color: var(--w); }
.panel-head h2 { font-size: clamp(28px, 4vw, 40px); text-shadow: 3px 3px 0 var(--k); }
.issue { font-weight: 700; }

/* 히어로 */
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; }
.hero-plate { display: inline-block; border: 2px solid var(--gold); color: var(--gold); font-weight: 700; font-size: 13px; padding: 3px 10px; margin-bottom: 12px; }
.hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; }
.red-hit { display: inline-block; background: var(--red); color: var(--w); padding: 0 .12em; transform: rotate(-3deg); box-shadow: 6px 6px 0 var(--gold); text-shadow: 3px 3px 0 var(--k); margin: .08em 0; }
.lede-1 { margin-top: 14px; font: 400 clamp(20px, 2.2vw, 26px)/1.35 var(--f-disp); color: var(--gold); }
.lede { margin-top: 8px; font-size: 17px; font-weight: 500; color: #EDEDED; max-width: 30em; }
.lede b { color: var(--w); font-weight: 700; }
.free { background: var(--red); padding: 0 6px; }
.hero-act { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.rule-link { color: var(--gold); font-weight: 700; text-underline-offset: 4px; }
/* 황금 버튼: 금속 + 지나가는 빛 + 금빛 맥박 */
.btn-gold { position: relative; display: inline-block; overflow: hidden; text-decoration: none; color: var(--k); font: 400 28px var(--f-disp); padding: 18px 36px 20px; background: var(--metal); border: 3px solid var(--gold-l); box-shadow: 0 8px 0 var(--gold-d), 0 0 0 3px var(--k), 0 0 36px rgba(245, 197, 24, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); animation: goldpulse 2.2s ease-in-out infinite; transition: transform .1s, box-shadow .1s; }
.btn-gold::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); transform: skewX(-20deg); animation: glint 3s ease-in-out infinite; }
.btn-gold span { position: relative; z-index: 1; }
.btn-gold:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 0 var(--gold-d), 0 0 0 3px var(--k), 0 0 60px rgba(245, 197, 24, .95); }
.btn-gold:active { transform: translateY(8px); box-shadow: 0 0 0 var(--gold-d), 0 0 0 3px var(--k), 0 0 20px rgba(245, 197, 24, .6); }
@keyframes glint { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes goldpulse { 50% { box-shadow: 0 8px 0 var(--gold-d), 0 0 0 3px var(--k), 0 0 64px rgba(245, 197, 24, .9); } }

/* 선별 기계: 전구 테두리 */
.machine { margin: 0; position: relative; background: var(--cab); border: 6px solid; border-image: var(--metal) 1; padding: 26px 22px 18px; }
.bulbs::before, .bulbs::after { content: ''; position: absolute; inset: -16px; pointer-events: none; border: 5px dotted var(--gold-l); }
.bulbs::after { content: none; }
@keyframes blink { 50% { opacity: 1; } }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.funnel li { position: relative; display: grid; grid-template-columns: 10.5ch 1fr; align-items: center; gap: 12px; min-height: 36px; }
.funnel li::before { content: ''; position: absolute; left: calc(10.5ch + 12px); top: 4px; bottom: 4px; width: calc((100% - 10.5ch - 12px) * var(--w) / 100); background: linear-gradient(90deg, #3A2A00, #2A2A2A); border-left: 3px solid var(--gold); }
.f-n small { font-family: var(--f-disp); font-size: 14px; margin-left: 2px; text-shadow: none; }
.f-n { white-space: nowrap; font-family: var(--f-dot); font-weight: 400; font-size: 36px; line-height: 1; color: var(--gold); text-align: right; text-shadow: 0 0 10px rgba(245, 197, 24, .7); }
.f-l { position: relative; font-size: 15px; padding: 0 10px; }
.f-win { margin-top: 6px; grid-template-columns: 10.5ch 1fr; background: var(--red); padding: 8px 0; box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(255, 31, 61, .75); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 46px rgba(255, 31, 61, 1); } }
.f-win .f-n { color: var(--w); font-size: 62px; text-shadow: 0 0 14px rgba(255, 255, 255, .8); line-height: 1; }
.f-win .f-n small { font-family: var(--f-disp); font-size: 22px; margin-left: 2px; }
.f-win .f-l { font-family: var(--f-disp); font-size: 26px; text-shadow: 2px 2px 0 var(--k); }
.machine figcaption { margin-top: 14px; font-size: 13px; color: #BDBDBD; }

/* 사용법: 12칸 컨베이어 */
.howto { background: var(--gold); color: var(--k); padding: 26px 24px 24px; position: relative; border-top: 12px solid; border-bottom: 12px solid; border-image: repeating-linear-gradient(-45deg, var(--k) 0 12px, var(--hz) 12px 24px) 12; }
.howto h2 { font-size: clamp(30px, 4.6vw, 46px); margin-bottom: 18px; }
.belt { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; padding: 10px 10px 16px; background: var(--k); position: relative; overflow: hidden; }
.belt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 14px, var(--k) 14px 28px); animation: belt 1s linear infinite; }
@keyframes belt { to { background-position: 28px 0; } }
.mo { display: grid; gap: 5px; justify-items: stretch; text-align: center; }
.mo-h { font-size: 12px; font-weight: 700; color: var(--gold); }
.mo-a { display: grid; place-items: center; min-height: 58px; padding: 4px 2px; font: 400 15px/1.15 var(--f-disp); border: 2px solid var(--w); }
.mo-a small { display: block; font: 500 10px var(--f-body); margin-top: 2px; }
.a-buy { background: var(--red); color: var(--w); }
.a-cash { background: #5A5A5A; color: var(--w); border-style: dashed; }
.a-swap { background: linear-gradient(180deg, var(--blue) 0 50%, var(--red) 50% 100%); color: var(--w); text-shadow: 1px 1px 0 var(--k); }
.mo-g { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 0 2px; }
.mo-g i { display: block; height: 6px; background: #2A2A2A; }
.mo-g .g-s { background: var(--red); } .mo-g .g-c { background: #8A8A8A; }
.mo-n { font: 400 18px/1 var(--f-dot); color: #CFCFCF; }
.belt.go .mo { animation: lamp .35s ease-out both; animation-delay: calc(var(--i) * 110ms); }
@keyframes lamp { from { opacity: .15; transform: translateY(-14px); } }
.belt-key { margin-top: 12px; font-size: 14px; font-weight: 500; }
.belt-key span { display: inline-block; font-weight: 700; color: var(--w); padding: 0 6px; margin: 2px 4px 2px 10px; }
.belt-key span:first-child { margin-left: 0; }
.k-buy { background: var(--red); } .k-cash { background: #5A5A5A; } .k-swap { background: linear-gradient(90deg, var(--blue) 50%, var(--red) 50%); }
.steps { list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li { counter-increment: s; background: var(--w); border: 3px solid var(--k); padding: 14px 16px 16px 64px; position: relative; display: grid; gap: 4px; box-shadow: 6px 6px 0 var(--k); }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--w); font: 400 24px var(--f-disp); border: 3px solid var(--k); }
.steps b { font-family: var(--f-disp); font-weight: 400; font-size: 20px; line-height: 1.25; }
.steps span { font-size: 15px; color: var(--ink-2); }

/* 이번 달 포트폴리오 */
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pick { border: 3px solid var(--k); padding: 16px 14px 12px; display: grid; gap: 6px; align-content: start; position: relative; background: var(--w); }
.pick:first-child { box-shadow: inset 0 0 0 3px var(--gold); }
.pick-no { position: absolute; top: -14px; right: -10px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--metal); color: var(--k); font: 700 20px var(--f-num); border: 3px solid var(--k); }
.pick-name { font-size: 23px; padding-right: 30px; }
.pick-meta { font-size: 14px; color: var(--ink-2); }
.pick-stats { margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.pick-stats div { border-top: 2px solid var(--k); padding-top: 4px; }
.pick-stats dt { font-size: 12px; color: var(--ink-2); }
.pick-stats dd { margin: 0; font-size: 18px; }
.pick-stats small, .slot-big small, .ls-v small { font-family: var(--f-body); font-size: 0.55em; font-weight: 500; margin-left: 2px; }
.next { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-items: center; }
.next > p:first-child { background: var(--k); color: var(--gold); border: 4px solid; border-image: var(--metal) 1; padding: 10px 18px; font-weight: 700; }
.next > p:first-child b { font-family: var(--f-dot); font-weight: 400; font-size: 46px; line-height: 1; margin: 0 6px; color: var(--red); text-shadow: 0 0 10px rgba(255, 31, 61, .8); }
.next > p:first-child span { display: block; font-size: 13px; font-weight: 500; color: #DADADA; }
.why { color: var(--ink-2); font-size: 15px; }

/* 12칸 성적판 */
.board { background: var(--cab); border: 6px solid; border-image: var(--metal) 1; padding: 24px; }
.board-head { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: end; margin-bottom: 18px; }
.board-head h2 { font-size: clamp(32px, 4.8vw, 48px); color: var(--w); }
.board-head p { color: #D6D6D6; font-size: 15px; max-width: 46em; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.slot { background: linear-gradient(180deg, #050505, #1C1C1C 50%, #050505); border: 2px solid #3A3A3A; box-shadow: inset 0 0 18px rgba(0, 0, 0, .9); padding: 10px 10px 12px; display: grid; gap: 4px; align-content: start; min-height: 158px; }
.slot-date { font-size: 13px; color: #CFCFCF; display: grid; line-height: 1.35; }
.slot-date span { color: var(--gold); }
.slot-big { font-family: var(--f-dot); font-weight: 400; font-size: clamp(38px, 4.2vw, 52px); line-height: 1; margin: 4px 0; }
.slot.up .slot-big { color: var(--red); text-shadow: 0 0 12px rgba(255, 31, 61, .75); }
.slot.dn .slot-big { color: var(--blue); text-shadow: 0 0 12px rgba(61, 134, 255, .75); }
.slot.flat .slot-big { color: var(--w); }
.slot-k { font-size: 13px; color: #CFCFCF; }
.slot-k .up { color: var(--red); } .slot-k .dn { color: var(--blue); } .slot-k .flat { color: #CFCFCF; }
.slot-diff { margin-top: auto; font-size: 12px; font-weight: 700; padding: 3px 6px; justify-self: start; }
.slot-diff.win { background: var(--gold); color: var(--k); }
.slot-diff.lose { background: transparent; color: var(--w); border: 1px solid #8A8A8A; }
.slot-empty { border-style: dashed; border-color: var(--gold); }
.slot-empty .slot-big { color: var(--gold); font-family: var(--f-disp); }
.slot-note { font-size: 12px; color: #BDBDBD; }
.board-foot { margin-top: 16px; font-size: 14px; color: #D6D6D6; }
.board-foot a { color: var(--gold); font-weight: 700; }
.badge { display: inline-block; background: var(--gold); color: var(--k); font-weight: 700; font-size: 12px; padding: 1px 7px; margin-right: 6px; }

/* 장기 기록 */
.long-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--k); margin-bottom: 18px; }
.long-stats > div { padding: 12px 14px; border-left: 3px solid var(--k); }
.long-stats > div:first-child { border-left: 0; background: var(--k); color: var(--w); }
.long-stats > div:first-child .ls-v { color: var(--gold); }
.long-stats > div:first-child .ls-s, .long-stats > div:first-child .ls-l { color: #E6E6E6; }
.ls-l { font-size: 13px; color: var(--ink-2); }
.ls-v { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.ls-s { font-size: 13px; color: var(--ink-2); }
.chart { position: relative; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.lg::before { content: ''; display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 6px; }
.lg-g::before { border-top: 4px solid var(--red-ink); }
.lg-k::before { border-top: 3px dashed var(--k); }
.lg-note { font-weight: 400; color: var(--ink-2); font-size: 13px; }
.chart-plot { width: 100%; height: 320px; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ax text { font: 500 12px var(--f-num); fill: var(--ink-2); }
.ax line { stroke: #DADADA; }
.c-g { fill: none; stroke: var(--red-ink); stroke-width: 2.5; }
.c-k { fill: none; stroke: var(--k); stroke-width: 2; stroke-dasharray: 5 4; }
.c-ev rect { fill: #F1F1F1; } .c-ev text { font: 500 12px var(--f-body); fill: var(--ink-2); }
.c-x { stroke: var(--k); stroke-width: 1; }
.c-dot { stroke: var(--w); stroke-width: 2; }
.chart-tip { position: absolute; pointer-events: none; background: var(--k); color: var(--w); padding: 8px 10px; font-size: 13px; line-height: 1.5; min-width: 150px; border: 2px solid var(--gold); }
.chart-tip b { font-family: var(--f-num); }
.chart-tip .g { color: var(--red); }

/* 강했던 때 / 약했던 때 */
.truth { display: grid; gap: 16px; }
.truth > h2 { font-size: clamp(30px, 4.6vw, 46px); color: var(--w); border-bottom: 4px solid var(--gold); padding-bottom: 8px; justify-self: start; }
.truth-sub { font-weight: 500; margin-top: -8px; color: #DADADA; }
.truth-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tcard { background: var(--w); color: var(--k); border: 3px solid var(--k); padding: 20px; display: grid; gap: 12px; align-content: start; }
.tcard h3 { font-size: 28px; }
.tcard h3 span { font-family: var(--f-body); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.t-good { box-shadow: 5px 5px 0 var(--red); }
.t-bad { box-shadow: 5px 5px 0 var(--blue); }
.spark { width: 100%; height: 90px; display: block; }
.spark-base { stroke: #CFCFCF; stroke-width: 1; }
.spark-g { fill: none; stroke: var(--red-ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.spark-k { fill: none; stroke: var(--k); stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.truth-why { background: var(--w); color: var(--k); border: 3px solid var(--k); padding: 18px 20px; }
.truth-must { background: var(--cab); border: 4px solid var(--red); padding: 18px 20px; }
.truth-why h3, .truth-must h3 { font-size: 24px; margin-bottom: 8px; }
.truth-must h3 { color: var(--w); }
.truth-must ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* 모의투자 안내 */
.sim-cta { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; background: var(--cab); border: 6px solid; border-image: var(--metal) 1; padding: 26px; }
.sim-cta h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; color: var(--w); }
.sim-cta p { max-width: 40em; color: #E6E6E6; }
.btn { display: inline-block; background: linear-gradient(180deg, #FF5468, var(--red) 45%, #B00018); color: var(--w); font: 400 26px var(--f-disp); text-decoration: none; padding: 18px 32px; border: 4px solid var(--gold); box-shadow: 0 8px 0 var(--gold-d), 0 0 30px rgba(255, 31, 61, .55); text-shadow: 2px 2px 0 var(--k); transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translateY(2px); box-shadow: 0 6px 0 var(--gold-d), 0 0 40px rgba(255, 31, 61, .8); }
.btn:active { transform: translateY(8px); box-shadow: 0 0 0 var(--gold-d); }

/* 광고 칸: 사이트 틀 안, 주변 여백 확보 */
.ad { border: 2px dashed #6A6A6A; background: #111; padding: 10px 12px 12px; margin: 8px 0; color: #CFCFCF; }
.ad-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; margin-bottom: 8px; flex-wrap: wrap; }
.ad-head span:first-child { background: var(--gold); color: var(--k); padding: 0 6px; }
.ad-body { min-height: 120px; background: var(--w); }
.ad-slim { padding: 6px 10px 8px; margin: 0; }
.ad-slim .ad-head { margin-bottom: 4px; }
.ad-slim .ad-body { min-height: 0; }
.ad-empty { display: grid; place-items: center; font-size: 13px; color: var(--ink-2); }

/* 준비 중 */
.soon { display: grid; gap: 16px; justify-items: start; padding-top: 24px; }
.soon h1 { font-size: 40px; }

/* 꼬리 */
.foot { background: var(--cab); color: #D6D6D6; padding: 28px 16px 36px; font-size: 14px; border-top: 6px solid; border-image: var(--metal) 1; }
.foot > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.foot-warn { border: 2px solid var(--gold); padding: 14px 16px; margin-bottom: 16px; }
.foot-warn strong { color: var(--gold); display: block; margin-bottom: 4px; }
.foot-grid { display: grid; gap: 8px; }
.foot-grid a { color: var(--gold); margin-right: 14px; }
.foot-mark { margin-top: 18px; font-family: var(--f-disp); color: var(--gold); font-size: 22px; }

/* 반응형 */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .pick-list { grid-template-columns: repeat(2, 1fr); }
  .pick:last-child { grid-column: 1 / -1; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .long-stats { grid-template-columns: 1fr 1fr; }
  .long-stats > div:nth-child(3) { border-left: 0; }
  .long-stats > div:nth-child(n+3) { border-top: 3px solid var(--k); }
  .board-head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .belt { grid-template-columns: repeat(5, 1fr); row-gap: 12px; }
}
@media (max-width: 620px) {
  .panel { padding: 0 14px 18px; } .panel-head { margin: 0 -14px 16px; padding: 12px 14px; }
  .board, .sim-cta, .cab, .howto { padding: 18px 14px; }
  .pick-list { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .truth-cards { grid-template-columns: 1fr; }
  .next, .sim-cta { grid-template-columns: 1fr; }
  .long-stats { grid-template-columns: 1fr; }
  .long-stats > div { border-left: 0; border-top: 3px solid var(--k); }
  .long-stats > div:first-child { border-top: 0; }
  .chart-plot { height: 260px; }
  .funnel li, .f-win { grid-template-columns: 7.6ch 1fr; }
  .funnel li::before { left: calc(7.6ch + 12px); width: calc((100% - 7.6ch - 12px) * var(--w) / 100); }
  .f-n { font-size: 28px; } .f-win .f-n { font-size: 44px; } .f-win .f-l { font-size: 20px; }
  .f-l { font-size: 13px; }
  .bulbs::before { inset: -10px; } .bulbs::after { inset: -11px; }
  .btn-gold { font-size: 24px; padding: 16px 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* 이런 분께 / 안 맞습니다 */
.who { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.who h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.who li { position: relative; padding-left: 40px; display: grid; gap: 2px; }
.who li::before { content: ''; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--k); }
.who b { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.3; }
.who span { font-size: 15px; }
.who-yes { background: var(--w); color: var(--k); border: 6px solid; border-image: var(--metal) 1; padding: 22px 24px; }
.who-yes li::before { background: radial-gradient(circle at 35% 30%, #FF8A98, var(--red) 55%, #9A0014); box-shadow: 0 0 10px rgba(255, 31, 61, .6); }
.who-yes span { color: var(--ink-2); }
.who-no { background: var(--cab); border: 3px solid #4A4A4A; padding: 22px 24px; }
.who-no h2 { color: var(--w); }
.who-no li::before { background: radial-gradient(circle at 35% 30%, #777, #222 60%); border-color: #888; }
.who-no span { color: #CFCFCF; }
@media (max-width: 980px) { .who { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .who-yes, .who-no { padding: 18px 14px; } .who b { font-size: 19px; } }

/* ---------- 전체 기록 ---------- */
.rec-hero { display: grid; gap: 14px; }
.rec-hero h1 { font-size: clamp(40px, 6vw, 68px); color: var(--gold); }
.rec-note { color: #DADADA; font-size: 15px; max-width: 60em; }
.rec-stats { margin: 6px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rec-stats > div { background: var(--cab); border: 2px solid #3A3A3A; border-top: 4px solid var(--gold); padding: 12px 14px; }
.rec-stats dt { font-size: 13px; color: #BDBDBD; }
.rec-stats dd { margin: 2px 0; font-size: 18px; font-weight: 700; }
.rec-stats dd b { font-family: var(--f-dot); font-weight: 400; font-size: 46px; line-height: 1; color: var(--gold); margin-right: 4px; }
.rec-stats p { font-size: 13px; color: #BDBDBD; }
.tbl-wrap { overflow-x: auto; }
.ytable, .ptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ytable th, .ytable td, .ptable th, .ptable td { padding: 8px 10px; border-bottom: 1px solid #DDD; text-align: right; white-space: nowrap; }
.ytable thead th:first-child { text-align: left; }
.ytable thead th, .ptable thead th { border-bottom: 3px solid var(--k); font-size: 13px; color: var(--ink-2); font-weight: 700; }
.ytable th[scope="row"], .ptable th[scope="row"] { text-align: left; font-weight: 700; }
.ytable th small { font-weight: 400; color: var(--ink-2); }
.ytable td:last-child, .ytable th:last-child { text-align: left; }
.ptable th[scope="row"] small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-2); }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; }
.chip-win { background: var(--gold); color: var(--k); }
.chip-lose { border: 1px solid #8A8A8A; color: inherit; }
.tbl-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.records { display: grid; gap: 10px; }
.records > h2 { font-size: clamp(30px, 4.4vw, 44px); color: var(--w); border-bottom: 4px solid var(--gold); padding-bottom: 8px; justify-self: start; }
.rhead, .rrow a { display: grid; grid-template-columns: 10.6em minmax(0, 1fr) 7em 6em 6em 8.8em 10.5em; gap: 10px; align-items: center; }
.rhead { padding: 6px 14px; font-size: 12px; color: #9A9A9A; }
.yblock { background: var(--cab); border: 2px solid #3A3A3A; }
.yblock[open] { border-color: var(--gold); }
.yblock summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 12px 14px; }
.yblock summary::-webkit-details-marker { display: none; }
.yblock summary::before { content: '+'; font: 400 26px/1 var(--f-dot); color: var(--gold); width: 16px; }
.yblock[open] summary::before { content: '−'; }
.y-n { font: 400 28px/1 var(--f-disp); color: var(--gold); }
.y-c { font-weight: 700; }
.y-s { color: #BDBDBD; font-size: 14px; }
.rlist { list-style: none; margin: 0; padding: 0 0 6px; }
.rrow a { padding: 9px 14px; text-decoration: none; border-top: 1px solid #262626; font-size: 14px; }
.rrow a:hover { background: #1C1C1C; }
.r-date { font-family: var(--f-num); font-weight: 700; color: var(--w); }
.r-names { color: #E6E6E6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-st { color: #BDBDBD; font-size: 13px; }
.r-open .r-st { color: var(--gold); font-weight: 700; }
.r-ret .num { font-size: 18px; }
.r-k em { display: none; font-style: normal; }
.rrow .up { color: var(--red); } .rrow .dn { color: var(--blue); } .rrow .flat { color: #CFCFCF; }
.r-empty .r-names { color: #9A9A9A; } .r-empty .r-st { color: var(--gold); }
.rdivider { padding: 8px 14px; background: var(--gold); color: var(--k); font-weight: 700; }

/* 발행별 페이지 */
.inav { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.inav a { color: var(--gold); text-decoration: none; border: 2px solid #3A3A3A; padding: 6px 12px; }
.inav a:hover { border-color: var(--gold); }
.panel h1 { font-size: clamp(26px, 4vw, 38px); text-shadow: 3px 3px 0 var(--k); }
.ihead { display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--k); margin-bottom: 16px; }
.ihead > div { padding: 12px 14px; border-left: 3px solid var(--k); }
.ihead > div:first-child { border-left: 0; background: var(--k); color: var(--w); }
.ihead > div:first-child .ls-l { color: #E6E6E6; }
.ihead > div:first-child .up { color: var(--red); } .ihead > div:first-child .dn { color: var(--blue); }
.pchart { width: 100%; height: auto; display: block; margin: 6px 0 18px; }
.pc-grid { stroke: #E2E2E2; } .pc-zero { stroke: #9A9A9A; stroke-width: 1.5; }
.pc-t { font: 500 12px var(--f-num); fill: var(--ink-2); }
.pc-dot { fill: var(--red-ink); stroke: var(--w); stroke-width: 2; }
.ih2 { font-size: 24px; margin-bottom: 8px; }
.iempty { font: 400 24px/1.4 var(--f-disp); margin-bottom: 10px; }
.rec-note-k { color: var(--ink-2); }

@media (max-width: 980px) {
  .rec-stats { grid-template-columns: 1fr 1fr; }
  .rhead { display: none; }
  .rrow a { grid-template-columns: 1fr auto; grid-template-areas: "d ret" "n n" "st k" "st df"; row-gap: 2px; }
  .r-date { grid-area: d; } .r-names { grid-area: n; white-space: normal; } .r-st { grid-area: st; } .r-ret { grid-area: ret; text-align: right; } .r-k { grid-area: k; text-align: right; font-size: 13px; } .r-d { grid-area: df; text-align: right; }
  .r-k em { display: inline; color: #9A9A9A; }
  .ihead { grid-template-columns: 1fr 1fr; }
  .ihead > div:nth-child(3) { border-left: 0; }
  .ihead > div:nth-child(n+3) { border-top: 3px solid var(--k); }
}
@media (max-width: 620px) { .rec-stats { grid-template-columns: 1fr; } .rec-stats dd b { font-size: 38px; } .pc-t { font-size: 30px; } .ihead { grid-template-columns: 1fr; } .ihead > div { border-left: 0; border-top: 3px solid var(--k); } .ihead > div:first-child { border-top: 0; } }

/* 코스피 대비: 색 없이 글씨로 (수익률 색과 혼동 방지) */
.vsk { font-size: 13px; font-weight: 700; white-space: nowrap; color: inherit; }
.vsk .num { font-size: 14px; }
.slot-diff { margin-top: auto; font-size: 12px; font-weight: 500; color: #BDBDBD; padding: 0; border: 0; background: none; }
.slot-diff .vsk { display: block; color: var(--w); font-size: 13px; }
.rrow .vsk { color: #D6D6D6; }
.ytable .vsk { color: var(--ink-2); }
.ihead .vsk { font-size: 20px; }
.ihead .vsk .num { font-size: 26px; }
.rhead { padding: 8px 14px; border-top: 1px solid #262626; }
.yblock:not([open]) .rhead { display: none; }

/* 발행 기록 마우스 오버: 누를 수 있다는 표시 */
.rrow a { position: relative; transition: background .12s; padding-right: 74px; }
.rhead { padding-right: 74px; }
.rrow a::after { content: '보기 →'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--gold); background: #262626; padding: 2px 8px; opacity: 0; transition: opacity .12s; }
.rrow a:hover, .rrow a:focus-visible { background: #262626; box-shadow: inset 4px 0 0 var(--gold); }
.rrow a:hover::after, .rrow a:focus-visible::after { opacity: 1; }
/* 연도 요약: 그해 수익률 강조 */
.y-ret { font-weight: 700; display: inline-flex; align-items: baseline; gap: 8px; background: #000; border: 2px solid var(--gold); padding: 2px 10px; }
.y-ret b { font-family: var(--f-dot); font-weight: 400; font-size: 32px; line-height: 1; }
.y-ret .up { color: var(--red); text-shadow: 0 0 10px rgba(255, 31, 61, .6); } .y-ret .dn { color: var(--blue); text-shadow: 0 0 10px rgba(61, 134, 255, .6); }
.y-k { color: #BDBDBD; font-size: 13px; }
.yblock .ad-lazy { margin: 8px 14px 6px; }
.panel .ad { margin: 0 0 16px; }

/* 연도 줄: 모든 연도 같은 칸 너비 */
.yblock summary { display: grid; grid-template-columns: 18px 7.2em 12.5em 8.5em 7em 8.5em minmax(0, 1fr); align-items: center; gap: 10px; flex-wrap: nowrap; }
.y-ret { justify-content: space-between; }
.y-ret-l { font-size: 14px; }
.y-ret-none { border-color: #3A3A3A; color: #6A6A6A; justify-content: center; }
.y-k { font-size: 13px; color: #BDBDBD; }
.y-k .num { color: #E6E6E6; }
.y-c { font-weight: 700; color: var(--w); }
.y-c b { font-family: var(--f-dot); font-weight: 400; font-size: 30px; color: var(--gold); line-height: 1; margin: 0 2px; }
.y-no { color: #9A9A9A; font-size: 14px; }
.y-no b { font-family: var(--f-dot); font-weight: 400; font-size: 24px; line-height: 1; margin: 0 2px; }
.y-s { color: #BDBDBD; font-size: 13px; }
/* 연도별 성적: 그해 시장 코멘트 */
.ytable td.ynote { text-align: left; white-space: normal; color: var(--ink-2); font-size: 14px; min-width: 18em; }
.ytable td.ynote-big { color: var(--k); font-weight: 700; }
.tag-flat { display: inline-block; background: #E4E4E4; color: #555; font-size: 12px; font-weight: 700; padding: 1px 7px; margin-right: 6px; }
@media (max-width: 980px) {
  .yblock summary { grid-template-columns: 18px auto 1fr; grid-template-areas: "pm yn ret" ". k k" ". c c" ". s s"; row-gap: 4px; }
  .yblock summary::before { grid-area: pm; } .y-n { grid-area: yn; } .y-ret { grid-area: ret; justify-self: start; } .y-k { grid-area: k; }
  .y-c, .y-no { grid-area: c; } .y-no { justify-self: end; } .y-s { grid-area: s; }
}

.y-n { white-space: nowrap; }
.y-ret { align-items: center; }

/* 연도 줄 다듬기: 수익률 박스 고정 너비, 라벨과 숫자 붙임 */
.y-ret { justify-content: flex-start; gap: 8px; width: 11.8em; justify-self: start; }
.y-ret b { text-align: left; }
.y-c { color: var(--gold); }
.y-c b { color: var(--gold); }
@media (max-width: 980px) { .y-ret { width: 11.8em; } }
/* 연도별 성적: GONOM 칸 옅은 강조 */
.ytable .col-g { background: #FFF6D2; }
.ytable td.col-g .num { font-weight: 800; font-size: 16px; }
.g-badge { display: inline-block; background: var(--gold); color: var(--k); padding: 1px 8px; font-weight: 800; }
/* 맨 위로 버튼 (모든 페이지) */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; align-content: center; text-decoration: none; background: var(--metal); color: var(--k); border: 3px solid var(--k); box-shadow: 0 4px 0 var(--gold-d), 0 0 18px rgba(245, 197, 24, .5); font: 400 18px/1 var(--f-disp); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.to-top span { font: 700 11px/1 var(--f-num); margin-top: 2px; }
.to-top.on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { transform: translateY(-2px); }
@media (max-width: 620px) { .to-top { right: 12px; bottom: 12px; width: 48px; height: 48px; } }

/* 수익률 박스: 가장 긴 값(+139.9%)에 딱 맞는 너비, 숫자는 오른쪽 정렬 */
.y-ret { width: auto; gap: 6px; padding: 2px 8px; justify-content: flex-start; }
.y-ret b { display: inline-block; min-width: 3.6em; text-align: right; }
.y-ret-l { font-size: 13px; }
@media (max-width: 980px) { .y-ret { width: auto; } }

.r-n { color: #9A9A9A; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.first-note { background: var(--gold); color: var(--k); font-weight: 700; padding: 8px 12px; margin: -6px 0 16px; }
.rdivider { font-size: 14px; }
@media (max-width: 980px) { .rrow a { grid-template-areas: "d ret" "n n" "st k" "st df" "mn mn"; } .r-n { grid-area: mn; white-space: normal; } }
.pchart-empty { border: 2px dashed #CFCFCF; padding: 28px 16px; text-align: center; color: var(--ink-2); margin: 6px 0 18px; }

.r-arrow { color: var(--gold); margin: 0 2px; }
.r-hold { color: var(--gold); font-weight: 700; }
.y-ret-l small { display: block; font-size: 10px; color: #BDBDBD; font-weight: 500; }
.ytable-desc { font-size: 14px; color: var(--ink-2); margin: -6px 0 12px; }
.yblock summary { grid-template-columns: 18px 6.4em 17em 12em 7em 8.5em minmax(0, 1fr); }

.yblock summary .y-ret { width: 100%; justify-self: stretch; justify-content: space-between; }
@media (max-width: 980px) { .yblock summary .y-ret { width: 17em; max-width: 100%; } }

/* 기록 칸 이름 줄과 내용 줄을 같은 틀로 */
.rhead, .rrow a { padding: 9px 74px 9px 14px; column-gap: 10px; }
.rhead span:nth-child(4), .rhead span:nth-child(5), .r-ret, .r-k { text-align: right; }
@media (max-width: 980px) { .rrow a { padding-right: 14px; } .r-k { text-align: right; } }
/* 발행별 그래프 */
.pc-tb { font-weight: 700; fill: var(--k); }
.pc-fut { font: 700 16px var(--f-body); fill: #9A9A9A; }
.pc-now { stroke: var(--k); stroke-width: 2; stroke-dasharray: 6 4; }
.pc-nowt { font: 700 14px var(--f-body); fill: var(--k); }
.pc-ev { stroke: #B8B8B8; stroke-width: 1; stroke-dasharray: 2 4; }
.pc-evt { font: 700 12px var(--f-body); fill: #6A6A6A; }
.evlist { border-top: 2px solid var(--k); padding-top: 10px; margin: -6px 0 18px; }
.evlist h3 { font-size: 18px; margin-bottom: 6px; }
.evlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.evlist li { font-size: 14px; }
.evlist .num { font-weight: 700; }
.ev-k { color: var(--ink-2); font-size: 13px; margin-left: 6px; }
@media (max-width: 620px) { .pc-evt, .pc-nowt, .pc-fut { font-size: 26px; } }

/* 칸 너비가 em 기준이라 칸 이름 줄도 내용 줄과 같은 글자 크기를 기준으로 */
.rhead { font-size: 14px; }
.rhead span { font-size: 12px; }

/* ---------- 규칙·정책 문서 ---------- */
.doc-hero { display: grid; gap: 10px; }
.doc-hero h1 { font-size: clamp(40px, 6vw, 68px); color: var(--gold); }
.doc-lede { color: #E6E6E6; font-size: 17px; max-width: 46em; }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rsteps li { display: grid; grid-template-columns: 7.6em 1fr; gap: 16px; align-items: start; border: 3px solid var(--k); padding: 14px 16px; }
.rs-n { font-family: var(--f-dot); font-weight: 400; font-size: 40px; line-height: 1; color: var(--k); text-align: right; }
.rsteps h3 { font-size: 21px; margin-bottom: 4px; }
.rsteps p { color: var(--ink-2); font-size: 15px; }
.rs-win { background: var(--red); color: var(--w); border-color: var(--k); box-shadow: 0 0 0 3px var(--gold); }
.rs-win .rs-n { color: var(--w); } .rs-win p { color: #FFE4E8; } .rs-win h3 { text-shadow: 2px 2px 0 var(--k); }
.doc-note { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.doc-p { margin-bottom: 14px; }
.doc-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.faq { display: grid; gap: 8px; }
.faq details { border: 2px solid var(--k); }
.faq summary { cursor: pointer; padding: 12px 14px; font-family: var(--f-disp); font-size: 19px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: 'Q '; color: var(--red-ink); }
.faq details[open] summary { background: #FFF6D2; }
.faq details p { padding: 0 14px 14px; color: var(--ink-2); }
.legal { display: grid; gap: 8px; padding-top: 22px; }
.legal h2 { font-size: 22px; margin-top: 14px; }
.legal p, .legal li { font-size: 15px; line-height: 1.75; }
.legal-t td, .legal-t th { white-space: normal; text-align: left; vertical-align: top; }
.doc .panel .ad { margin-bottom: 0; }
@media (max-width: 620px) { .rsteps li { grid-template-columns: 1fr; gap: 4px; } .rs-n { text-align: left; font-size: 34px; } }

.doc .ytable td:nth-child(2) { text-align: left; color: var(--ink-2); }

/* 규칙: 단계 숫자 전광판 + 마지막 5개 강조 */
.rsteps { gap: 22px; }
.rsteps li { position: relative; grid-template-columns: 9.5em 1fr; align-items: center; }
.rsteps li:not(:last-child)::after { content: '▼'; position: absolute; left: calc(16px + 4.75em); bottom: -20px; transform: translateX(-50%); color: var(--gold-d); font-size: 14px; line-height: 1; }
.rs-n { background: var(--k); color: var(--gold); padding: 8px 10px; text-align: center; font-size: 38px; text-shadow: 0 0 10px rgba(245, 197, 24, .7); border: 2px solid #3A3A3A; }
.rs-win { padding: 22px 20px; transform: rotate(-.6deg); box-shadow: 0 0 0 4px var(--gold), 0 0 34px rgba(255, 31, 61, .55); }
.rs-win .rs-n { background: var(--k); color: var(--w); font-size: 76px; padding: 10px 12px; border: 3px solid var(--gold); text-shadow: 0 0 16px rgba(255, 255, 255, .85); transform: rotate(-3deg); }
.rs-win h3 { font-size: 30px; }
.rs-win p { font-size: 16px; }
@media (max-width: 620px) { .rsteps li { grid-template-columns: 1fr; } .rsteps li:not(:last-child)::after { left: 50%; } .rs-n { text-align: center; } .rs-win .rs-n { font-size: 58px; } }

/* ---------- 회원 화면 ---------- */
.nav-auth { margin-left: 8px; border-color: var(--gold) !important; color: var(--gold); }
.nav-admin { border-color: var(--blue) !important; color: var(--blue); }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.auth-box { padding: 24px; display: grid; gap: 12px; }
.au-h { font-size: 26px; margin-bottom: 12px; }
.auth-box form { display: grid; gap: 12px; }
.auth-box label { font-weight: 700; font-size: 14px; }
.auth-box input[type=email], .auth-box input:not([type]), .au-code { width: 100%; font: 500 18px var(--f-body); padding: 12px 14px; border: 3px solid var(--k); background: var(--w); color: var(--k); }
.au-code { font: 400 44px var(--f-dot) !important; letter-spacing: 12px; text-align: center; }
.au-check { font-weight: 500 !important; display: flex; gap: 8px; align-items: flex-start; font-size: 14px !important; }
.au-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red-ink); }
.auth-box .btn-gold { justify-self: start; cursor: pointer; }
.auth-box .btn-gold:disabled { opacity: .5; cursor: wait; }
.au-link { background: none; border: 0; padding: 0; font: 700 14px var(--f-body); color: var(--blue-ink); text-decoration: underline; cursor: pointer; justify-self: start; }
.au-msg { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.au-msg.bad { color: var(--red-ink); }
main > .au-msg { color: var(--w); }
.au-sent { color: var(--ink-2); font-size: 15px; }
.flow { margin: 0; background: var(--cab); border: 2px solid #3A3A3A; padding: 20px; }
.flow ol { list-style: none; counter-reset: f; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.flow li { counter-increment: f; background: #1C1C1C; border-top: 4px solid var(--gold); padding: 10px; display: grid; gap: 4px; position: relative; }
.flow li::before { content: counter(f); font: 400 26px var(--f-dot); color: var(--gold); }
.flow li b { font-family: var(--f-disp); font-weight: 400; font-size: 17px; }
.flow li span { font-size: 12px; color: #BDBDBD; }
.flow figcaption { display: grid; gap: 8px; font-size: 14px; color: #D6D6D6; }
.flow figcaption b { color: var(--gold); }
.my-dl { margin: 0; display: grid; gap: 8px; }
.my-dl div { display: grid; grid-template-columns: 6em 1fr; }
.my-dl dt { color: var(--ink-2); } .my-dl dd { margin: 0; font-weight: 700; }
.my-act { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 10px 0; }
.my-del { border-top: 2px solid #DDD; padding-top: 12px; }
.my-del summary { cursor: pointer; color: var(--ink-2); font-weight: 700; }
.my-del p { margin: 10px 0; font-size: 14px; }
.my-del form { display: flex; gap: 10px; flex-wrap: wrap; }
.my-del input { flex: 1 1 10em; }
.btn-del { background: var(--k); color: var(--w); border: 3px solid var(--red-ink); font: 700 15px var(--f-body); padding: 10px 16px; cursor: pointer; }
.ad-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ad-tiles div { background: var(--k); color: var(--w); padding: 14px; }
.ad-tiles p { font-size: 13px; color: #BDBDBD; }
.ad-tiles b { font: 400 48px/1 var(--f-dot); color: var(--gold); }
.ad-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 2px solid var(--k); }
.ad-bars span { flex: 1; height: var(--h); min-height: 2px; background: var(--red-ink); }
.ad-empty { color: var(--ink-2); align-self: center; margin: auto; }
@media (max-width: 860px) { .auth-grid { grid-template-columns: 1fr; } .flow ol { grid-template-columns: 1fr; } .ad-tiles { grid-template-columns: 1fr 1fr; } }

/* 로그인 절차 그림 */
.flow-h { font-size: 26px; color: var(--gold); margin-bottom: 14px; }
.flow-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.flow-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; background: #1C1C1C; border-top: 4px solid var(--gold); padding: 14px 8px 12px; }
.flow-steps li:not(:last-child)::after { content: '▶'; position: absolute; right: -18px; top: 38%; color: var(--gold); font-size: 14px; }
.flow-steps svg { width: 44px; height: 44px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-steps b { font-family: var(--f-disp); font-weight: 400; font-size: 16px; }
.flow-steps span { font-size: 12px; color: #BDBDBD; }
.fs-ok { border-top-color: var(--red) !important; }
.fs-ok svg { stroke: var(--red); }
.mail-mock { display: block; background: var(--w); color: var(--k) !important; text-align: left; padding: 5px 6px; font-size: 11px !important; line-height: 1.4; border-left: 3px solid var(--gold); }
.mail-mock em { display: block; font-style: normal; color: var(--ink-2); font-size: 10px; }
.mail-mock strong { font-family: var(--f-dot); font-weight: 400; font-size: 15px; color: var(--red-ink); }
.flow-keep { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: var(--gold); color: var(--k); padding: 14px 16px; margin-bottom: 14px; }
.flow-keep svg { width: 84px; height: 64px; fill: none; stroke: var(--k); stroke-width: 3; stroke-linejoin: round; }
.fk-big { font: 400 20px/1.3 var(--f-disp); margin-bottom: 4px; }
.flow-keep p { font-size: 14px; }
.flow-faq details { border-color: #3A3A3A; }
.flow-faq summary { font-size: 16px; color: var(--w); }
.flow-faq summary::before { color: var(--gold); }
.flow-faq details[open] summary { background: #1C1C1C; }
.flow-faq details p { color: #D6D6D6; font-size: 14px; }
.flow figcaption { margin-top: 14px; }
.au-sub { color: var(--ink-2); font-size: 14px; margin: -8px 0 6px; }
@media (max-width: 860px) { .flow-steps { grid-template-columns: 1fr 1fr; gap: 12px; } .flow-steps li::after { display: none; } }

.flow .flow-steps { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.flow .flow-steps li { padding: 10px 6px; }
@media (max-width: 860px) { .flow .flow-steps { grid-template-columns: 1fr 1fr; gap: 12px; } }

.machine-date { text-align: right; font-size: 13px; font-weight: 700; color: var(--gold); margin: -8px 0 10px; }
/* 로그인: 양쪽 높이 맞춤 */
.auth-grid { align-items: stretch; }
.auth-box { align-content: start; }
.auth-faq { margin-top: 8px; }
.auth-faq summary { font-size: 16px; }