/* 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; } }

.hero { position: relative; }
.machine-date { position: absolute; top: 0; right: 0; margin: 0; font-size: 13px; font-weight: 700; color: var(--gold); padding: 5px 0; line-height: inherit; }
/* 로그인: 양쪽 높이 맞춤 */
.auth-grid { align-items: stretch; }
.auth-box { align-content: start; }
.auth-faq { margin-top: 8px; }
.auth-faq summary { font-size: 16px; }
@media (max-width: 480px) { .hero-plate { font-size: 11.5px; padding: 3px 7px; white-space: nowrap; } .machine-date { font-size: 11.5px; white-space: nowrap; top: 1px; } }
/* PC: 선별 기계 바깥 점선 테두리 윗선을 큰 제목 윗선에 맞춤 (기준일은 그 위 문패 높이) */
@media (min-width: 981px) { .hero { align-items: start; } .hero .machine { margin-top: 53px; } }
/* 12칸: 최신 → 오래됨 순서 표시 (발행 월, 보유 게이지, 양 끝 꼬리표, 방향 안내) */
.slots { row-gap: 20px; }
.slot { position: relative; }
.slot-tag { position: absolute; top: -11px; left: 8px; font-size: 11px; font-weight: 700; padding: 2px 7px; white-space: nowrap; z-index: 1; }
.slot-tag.new { background: var(--gold); color: var(--k); }
.slot-tag.sell { background: var(--red); color: var(--w); }
.slot-mon { font-family: var(--f-disp); font-size: 22px; line-height: 1.1; color: var(--w); margin-top: 4px; }
.slot-gauge { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 2px 0 2px; }
.slot-gauge i { height: 6px; background: #2E2E2E; }
.slot-gauge i.on { background: var(--gold); }
.slots-dir { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; color: #BDBDBD; }
.slots-dir b { color: var(--gold); white-space: nowrap; }
.slots-dir span { text-align: center; }
@media (max-width: 560px) { .slots-dir { font-size: 12px; } .slot-mon { font-size: 19px; } }
.bye-note { background: var(--gold); color: var(--k); font-weight: 700; padding: 12px 16px; margin: 0 0 18px; border: 3px solid var(--k); box-shadow: 0 0 0 3px var(--gold); }
.btn-del:disabled { opacity: .5; cursor: wait; }
.slot-big { white-space: nowrap; font-size: clamp(30px, 3.1vw, 42px); }

/* 모의투자 */
.sim-start{grid-template-columns:minmax(0,1fr);background:var(--cab);border:6px solid;border-image:var(--metal) 1;padding:24px;display:grid;gap:14px;justify-items:start}
.sim-start h2{color:var(--w);font-size:34px}
.act{background:#111;color:var(--gold);border:0;font:700 18px var(--f-body);padding:12px 18px;cursor:pointer}
/* 금액 조절판: 좌 −500만/−1억, 가운데 금액(너비 고정), 우 +500만/+1억 */
.stepper{display:inline-grid;grid-template-columns:auto auto auto;border:3px solid var(--gold);background:#000;max-width:100%}
.st-col{display:grid;grid-template-rows:1fr 1fr}
.st-col button{width:104px;background:#111;color:var(--gold);border:0;font:700 17px var(--f-body);cursor:pointer;padding:0 8px;white-space:nowrap}
.st-col button+button{border-top:2px solid var(--gold-d)}
.st-col button:hover:not(:disabled){background:var(--gold);color:var(--k)}
.st-col button:disabled{color:#555;cursor:not-allowed;background:#0A0A0A}
.stepper output{display:flex;align-items:center;justify-content:center;width:var(--st-w,380px);min-height:96px;font-family:var(--f-dot);font-size:46px;color:var(--gold);background:#000;border-left:3px solid var(--gold);border-right:3px solid var(--gold);text-shadow:0 0 10px rgba(245,197,24,.6);white-space:nowrap}
.stepper.sm output{--st-w:300px;min-height:72px;font-size:34px}
.stepper.sm .st-col button{width:86px;font-size:15px}
.sim-help{color:#D6D6D6;font-size:15px;max-width:52em}
.sim-sum{background:var(--cab);border:6px solid;border-image:var(--metal) 1;padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:16px 40px;align-items:center}
.sum-l{color:#CFCFCF;font-size:14px}.sum-v{font-family:var(--f-dot);font-size:76px;line-height:1;color:var(--w)}.sum-v small{font-size:30px}
.sum-r{font-size:26px;font-weight:700}.sum-r.up{color:var(--red)}.sum-r.dn{color:var(--blue)}.sum-r small{font-size:16px}
.sum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin:0}.sum-grid dt{color:#BDBDBD;font-size:13px}.sum-grid dd{margin:0;color:var(--w);font-size:20px;font-weight:700}
.sum-grid dd.up{color:var(--red)}.sum-grid dd.dn{color:var(--blue)}
.sum-act{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.act{border:2px solid var(--gold)}.act-note{color:#BDBDBD;font-size:13px}
.sim .slot-big{font-size:clamp(28px,2.9vw,38px);white-space:nowrap}.sim .slot-big small{font-size:.5em}
.act-l{color:var(--w);font-weight:700}.sim .slot[data-k]{cursor:pointer}.sim .slot[data-k]:hover{border-color:var(--gold-l)}
.hold-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:10px}.hold-top h3{margin:0}.hold-top a{color:#B00018;font-weight:700;white-space:nowrap}.hold-scroll{overflow-x:auto}
.sim .slot.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),inset 0 0 18px rgba(0,0,0,.9)}
.slot-k b{color:var(--w)}.slot-k b.up{color:var(--red)}.slot-k b.dn{color:var(--blue)}
.hold{margin-top:16px;background:var(--w);color:var(--k);padding:16px 18px}.hold h3{font-size:18px;margin-bottom:10px}.hold h3 .up{color:var(--red-ink)}.hold h3 .dn{color:var(--blue-ink)}
.hold table{width:100%;border-collapse:collapse;font-size:15px}.hold th,.hold td{padding:7px 8px;border-bottom:1px solid #ddd;text-align:right}.hold th:first-child,.hold td:first-child{text-align:left}
.hold th{font-size:13px;color:#555}.hold-note{font-size:13px;color:#555;margin-top:8px}
.sim-reset{margin-top:18px;text-align:right}
@media(max-width:760px){.st-col button,.stepper.sm .st-col button{width:64px;font-size:13px;padding:0 2px}.stepper output,.stepper.sm output{width:auto;min-width:0;flex:1;font-size:20px;min-height:80px;padding:0 4px}.stepper{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;width:100%}.hold table{min-width:560px;white-space:nowrap}.hold th,.hold td{padding:6px}.sim-sum{grid-template-columns:minmax(0,1fr);padding:18px 14px}.sum-act{gap:8px}.sum-v{font-size:56px}}
.gold-t{color:var(--gold)}
.sim .btn-gold{cursor:pointer;font-family:var(--f-disp)}
.sim-login{font-size:15px;color:#D6D6D6}.sim-login a{color:var(--gold);font-weight:700}
.sum-v small{font-family:var(--f-body);font-size:.36em;font-weight:700;margin:0 8px 0 3px}.sum-v small:last-child{margin-right:0}
.sim-board{margin-top:18px}
.sim #sim-msg{margin:12px 0}
.sim-start .sim-help#sim-login-note{font-size:13px;color:#BDBDBD}
[hidden] { display: none !important; }
/* 메인 12칸: 칸 전체가 그 달 발행 기록 링크 */
.slot-hit { position: absolute; inset: 0; z-index: 2; }
.slot-hit:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 2px; }
.slot-more { font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 6px; }
.slot-linked { transition: border-color .12s, transform .12s; }
.slot-linked:hover { border-color: var(--gold); transform: translateY(-2px); }
.slot-linked:hover .slot-more { text-decoration: underline; }
/* 내 정보 */
.my-acct, .my-empty { margin: 0 0 18px; }
.ma-vs { margin-top: 6px; font-size: 14px; color: #CFCFCF; }
.ma-vs b { color: var(--w); }
.my-go { align-items: center; }
.my-go .btn-gold { font-size: 24px; padding: 14px 28px 16px; }
.my-box { margin-top: 0; }
.btn-out { display: inline-block; background: var(--k); color: var(--w); border: 3px solid var(--k); font: 700 15px var(--f-body); padding: 10px 22px; cursor: pointer; text-decoration: none; box-shadow: 0 4px 0 #555; }
.btn-out:hover { background: #222; }
.btn-out:active { transform: translateY(3px); box-shadow: 0 1px 0 #555; }
.stepper output small { font-family: var(--f-body); font-size: .42em; font-weight: 700; margin: 0 4px 0 2px; color: var(--gold); text-shadow: none; }
/* 모의투자 칸 목록: 어느 칸을 눌러도 열 위치가 같게 */
.hold table { table-layout: fixed; }
.hold th:nth-child(1), .hold td:nth-child(1) { width: 30%; white-space: normal; word-break: keep-all; }
.hold th:nth-child(2), .hold td:nth-child(2) { width: 12%; }
.hold th:nth-child(3), .hold td:nth-child(3), .hold th:nth-child(4), .hold td:nth-child(4), .hold th:nth-child(5), .hold td:nth-child(5) { width: 15%; }
.hold th:nth-child(6), .hold td:nth-child(6) { width: 13%; }
.hold-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.hold-top a { padding-top: 2px; }
.hold { min-height: 0; }
.st-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; max-width: 100%; }
.act-big { font-size: 20px; padding: 0 28px; min-height: 60px; }
.sum-msg { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .st-row .act-big { width: 100%; min-height: 52px; } }
@media (max-width: 760px) { .hold-top { grid-template-columns: minmax(0, 1fr); } .hold-top h3 { font-size: 16px; } }

/* ===== 은은한 실버 판 (10/17 진님: 흰 바탕 상자 → 고급스러운 실버, 회색 티 내지 않기) =====
   검정 기계 + 황금 테두리 + 은빛 판. 위는 거의 흰빛, 아래로 아주 살짝 은빛, 윗변에 미세한 광택선. */
:root {
  --sv: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 46%, rgba(255,255,255,0) 62%), linear-gradient(180deg, #EDF0F3 0%, #DDE2E7 45%, #CFD5DC 100%);
  --sv-flat: #DDE2E7;      /* 실버 판 대표색 */
  --sv-line: #B7BEC8;      /* 실버 위 줄 선 */
  --sv-hi: #C6CDD6;        /* 실버 위 한 단계 진한 음영 (머리줄·보조 칸) */
  --sv-gold: #F2E2A6;      /* 실버 위 옅은 황금 강조 */
}
.panel, .steps li, .pick, .tcard, .truth-why, .who-yes, .hold {
  background: var(--sv);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(120, 132, 148, .30);
}
.steps li { box-shadow: 6px 6px 0 var(--k), inset 0 1px 0 rgba(255, 255, 255, .95); }
/* 실버 위 회색 음영 다시 맞춤 */
.ytable th, .ytable td, .ptable th, .ptable td, .hold th, .hold td { border-bottom-color: var(--sv-line); }
.my-del { border-top-color: var(--sv-line) !important; }
.tag-flat { background: var(--sv-hi); color: #3E4652; }
.ytable .col-g { background: var(--sv-gold); }
.faq details[open] summary { background: var(--sv-gold); }
.ax line { stroke: #BCC3CC; }
.c-ev rect { fill: rgba(245, 197, 24, .16); }
.spark-base { stroke: #AEB6C0; }
.pc-grid { stroke: #BDC4CD; }
.pc-zero { stroke: #8C949F; }
/* 입력 칸은 실버 판 안에서 살짝 더 밝게 (입력하는 곳이 눈에 띄게) */
.auth-box input[type=email], .auth-box input:not([type]), .au-code { background: #FBFCFD; }
/* 투자 오해 막기·수익률 이해 (10/17) */
.hero-note { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--gold); border-left: 4px solid var(--gold); padding-left: 10px; }
.how-sub { margin: 34px 0 6px; font-family: var(--f-disp); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); }
.how-subnote { font-size: 14px; margin: 0 0 12px; max-width: 52em; }
.tag-live { display: inline-block; vertical-align: middle; background: var(--red); color: var(--w); font: 700 11px var(--f-body); padding: 2px 7px; margin-left: 4px; letter-spacing: 0; }
.faq-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.faq-body p { padding: 0 !important; }
.faq-tbl { font-size: 14px; }
.faq-tbl th, .faq-tbl td { white-space: normal; text-align: left; vertical-align: top; }
.faq-tbl thead th { text-align: left; }
.steps-you a { color: var(--red-ink); font-weight: 700; }
/* 소개 / 이달의 포트폴리오 분리 (10/17) */
.hero-teaser { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; text-decoration: none; background: var(--cab-2); border: 2px solid var(--gold); padding: 8px 14px; color: var(--w); }
.hero-teaser .ht-l { background: var(--red); color: var(--w); font-weight: 700; font-size: 13px; padding: 2px 8px; }
.hero-teaser .ht-n { font-weight: 700; }
.hero-teaser .ht-go { color: var(--gold); font-weight: 700; }
.hero-teaser:hover { background: #262626; }
.hero-teaser:hover .ht-go { text-decoration: underline; }
@media (max-width: 760px) {
  .mast nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mast nav::-webkit-scrollbar { display: none; }
  .mast nav a { white-space: nowrap; padding: 7px 10px; font-size: 14px; flex: 0 0 auto; }
}
/* 이번 달 미리 보기: PC는 기계 상자 아래 오른쪽 끝, 왼쪽 "종목만 공개" 줄과 같은 높이 */
.hero-copy > .hero-note:last-child { margin-bottom: 0; }
@media (min-width: 981px) {
  .hero > .hero-teaser { position: absolute; right: 0; bottom: 0; margin: 0; }
}
@media (max-width: 980px) {
  .hero > .hero-teaser { justify-self: start; margin-top: 0; }
}

/* ===== 투자 유의 12종 (페이지별 바탕만 다름, 크기·여백·문구 동일) ===== */
.foot-warn { position: relative; overflow: hidden; border: 0 !important; padding: 26px 28px 24px !important; margin-bottom: 16px; min-height: 172px; box-sizing: border-box;
  --fw-t: #000; --fw-p: #2A2F36; --fw-b: #000; --fw-ico-bg: var(--hz); --fw-ico-c: #000; background: var(--sv); }
.foot-warn > * { position: relative; z-index: 1; }
.foot-warn .fw-title { display: flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 10px; }
.foot-warn .fw-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: 20px; background: var(--fw-ico-bg); color: var(--fw-ico-c); box-shadow: 0 0 0 2px #000; }
.foot-warn strong { display: block; margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: 30px; line-height: 36px; color: var(--fw-t); }
.foot-warn p { font-size: 15px; line-height: 1.7; margin: 0 0 4px; color: var(--fw-p); }
.foot-warn b { color: var(--fw-b); }
.foot-warn::before, .foot-warn::after { content: none; position: absolute; left: 0; right: 0; height: 10px; z-index: 0; background: repeating-linear-gradient(-45deg, #000 0 10px, var(--hz) 10px 20px); }
.fw-pf::before, .fw-intro::before, .fw-my::before { content: ''; top: 0; }
.fw-pf::after, .fw-intro::after, .fw-my::after { content: ''; bottom: 0; }
/* ① 이달의 포트폴리오: 실버 판 */
.fw-pf { background: var(--sv); }
/* ② 소개: 노랑 경고판 */
.fw-intro { background: var(--hz); --fw-p: #1A1A1A; --fw-ico-bg: #000; --fw-ico-c: var(--hz); }
/* ③ 내 정보: 어두운 황금빛 */
.fw-my { background: linear-gradient(180deg, #2A2108, #1A1405); box-shadow: inset 0 0 0 2px var(--gold-d); --fw-t: var(--gold); --fw-p: #D8CDA8; --fw-b: #FFF3C4; }
/* ④ 로그인: 전광판 */
.fw-login { background: #050505 radial-gradient(circle, #1d1d1d 1px, transparent 1.4px) 0 0 / 6px 6px; box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(245, 197, 24, .4), inset 0 0 22px rgba(245, 197, 24, .15); --fw-t: var(--gold); --fw-p: #E9D9A6; --fw-b: #FFF0B0; }
.fw-login strong { font-family: var(--f-dot); letter-spacing: 2px; text-shadow: 0 0 10px rgba(245, 197, 24, .8); }
/* ⑤ 모의 계산: 황금 금속판 */
.fw-sim { background: var(--metal); box-shadow: inset 0 0 0 3px #000; --fw-p: #1E1600; --fw-ico-bg: #000; --fw-ico-c: var(--gold); }
.fw-sim strong { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
/* ⑥ 규칙: 설계 도면 */
.fw-rules { background-color: #0B2346; background-image: linear-gradient(rgba(160, 200, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 200, 255, .12) 1px, transparent 1px); background-size: 20px 20px; box-shadow: inset 0 0 0 2px #7FA6D6; --fw-t: #fff; --fw-p: #C9D8EC; --fw-b: #fff; }
/* ⑦ 전체 기록: 강철판 */
.fw-rec { background: linear-gradient(180deg, #4A4F57, #2E3238 60%, #24272C); box-shadow: inset 0 0 0 2px #6C737D, inset 0 1px 0 rgba(255, 255, 255, .25); --fw-t: #fff; --fw-p: #CDD3DA; --fw-b: #fff; }
.fw-rec::before { content: ''; top: 10px; left: auto; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d5dae0, #555); box-shadow: 0 130px 0 0 #6b7078; }
.fw-rec::after { content: ''; top: 10px; left: 12px; right: auto; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d5dae0, #555); }
/* ⑧ 이용약관: 왼쪽 경고 띠 */
.fw-terms { background: #111; box-shadow: inset 0 0 0 2px #333; --fw-t: var(--hz); --fw-p: #CFCFCF; --fw-b: #fff; }
.fw-terms::before { content: ''; top: 0; bottom: 0; left: 0; right: auto; width: 12px; height: auto; }
/* ⑨ 개인정보처리방침: 구리판 */
.fw-priv { background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 220, 190, .25) 46%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #C77B4A, #9C5530 55%, #7A3E22); box-shadow: inset 0 0 0 2px #5A2C16; --fw-t: #fff; --fw-p: #FFE9DA; --fw-b: #fff; }
/* ⑩ 월간 기록: 카본판 */
.fw-mon { background-color: #161616; background-image: linear-gradient(27deg, #151515 5px, transparent 5px), linear-gradient(207deg, #151515 5px, transparent 5px), linear-gradient(27deg, #222 5px, transparent 5px), linear-gradient(207deg, #222 5px, transparent 5px), linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0; background-size: 20px 20px; box-shadow: inset 0 0 0 2px #444; --fw-t: #fff; --fw-p: #D2D2D2; --fw-b: #fff; }
/* ⑪ 관리: 레이더 화면 */
.fw-admin { background: radial-gradient(circle at 88% 50%, rgba(60, 255, 140, .20), transparent 38%), repeating-radial-gradient(circle at 88% 50%, rgba(60, 255, 140, .14) 0 1px, transparent 1px 26px), #04140A; box-shadow: inset 0 0 0 2px #1E7A45, 0 0 14px rgba(60, 255, 140, .25); --fw-t: #3CFF8C; --fw-p: #9DF5B9; --fw-b: #D8FFE6; --fw-ico-bg: #3CFF8C; }
.fw-admin strong { text-shadow: 0 0 10px rgba(60, 255, 140, .7); }
/* ⑫ 404: 출입 금지 테이프 (X자) */
.fw-nf { background: #0C0C0C; box-shadow: inset 0 0 0 2px #333; --fw-t: var(--hz); --fw-p: #D6D6D6; --fw-b: #fff; }
.fw-nf::before, .fw-nf::after { content: ''; left: 55%; right: auto; top: 50%; width: 70%; height: 26px; opacity: .22; transform-origin: center; }
.fw-nf::before { transform: translate(-10%, -50%) rotate(14deg); }
.fw-nf::after { transform: translate(-10%, -50%) rotate(-14deg); }
@media (max-width: 760px) { .foot-warn { padding: 22px 18px 20px !important; min-height: 0; } .foot-warn strong { font-size: 26px; } }
/* 404 */
.nf-code { font-family: var(--f-dot); font-size: 96px; line-height: 1; color: var(--red); text-shadow: 0 0 16px rgba(255, 31, 61, .7); margin: 0; }
.nf-links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0; }
.nf-links .btn-out { border-color: var(--gold); color: var(--gold); box-shadow: 0 4px 0 var(--gold-d); }
/* 종목 한 줄 소개 · 발행 해설 · 만든 이유 */
.pick-desc { font-size: 13px; line-height: 1.55; color: #3A404A; margin: 2px 0 4px; }
.inote { margin: 18px 0; background: var(--cab); border-left: 6px solid var(--gold); padding: 20px 24px; }
.inote h2 { font-size: clamp(22px, 3vw, 28px); color: var(--gold); margin-bottom: 10px; }
.inote p { color: #DADADA; font-size: 16px; line-height: 1.75; margin: 0 0 10px; max-width: 60em; }
.inote .inote-foot { font-size: 13px; color: #9A9A9A; margin: 4px 0 0; }
.about h2 { margin-top: 22px; }
.about ul { padding-left: 1.2em; display: grid; gap: 8px; }
.pick { grid-template-rows: auto auto 1fr auto; align-content: stretch; } .pick .pick-desc { align-self: start; }
/* ⑬ GONOM을 만든 이유: 검정 대리석 + 금선 */
.fw-about { background: radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .07), transparent 45%), linear-gradient(125deg, transparent 38%, rgba(245, 197, 24, .18) 39%, transparent 40.5%, transparent 62%, rgba(255, 255, 255, .06) 63%, transparent 64.5%), linear-gradient(160deg, #1C1C1F, #0D0D0F 55%, #19191C); box-shadow: inset 0 0 0 2px var(--gold-d), inset 0 0 0 5px #0D0D0F, inset 0 0 0 6px rgba(245, 197, 24, .5); --fw-t: #F3E3A6; --fw-p: #CFCBC0; --fw-b: #FFF6D6; }
.hero-links { display: grid; gap: 6px; justify-items: start; }
/* 히어로: 버튼 오른쪽에 링크 두 줄(왼쪽 맞춤) */
.hero-act { flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero-act .btn-gold { flex: 0 0 auto; font-size: 25px; padding: 16px 26px 18px; }
.hero-links { gap: 8px; }
.hero-links .rule-link { white-space: nowrap; font-size: 14.5px; }
/* 히어로 링크 두 줄: 질문은 흰 글씨, 누르는 부분만 색 (1줄 황금, 2줄 청록 네온) */
.hero-links .rule-link { text-decoration: none; color: var(--w); }
.hero-links .rl-q { color: #D6D6D6; font-weight: 500; }
.hero-links .rule-link b { text-decoration: underline; text-underline-offset: 3px; }
.hero-links .rl-1 b { color: var(--gold); }
.hero-links .rl-2 b { color: #36E0C8; text-shadow: 0 0 8px rgba(54, 224, 200, .45); }
.hero-links .rule-link:hover b { text-decoration-thickness: 2px; }
.hero-links .rule-link { font-size: 14px; letter-spacing: -0.2px; }
.hero-act { gap: 12px 16px; }

/* 공지 (2026-10-21) */
.notice-bar{display:flex;align-items:center;gap:12px;height:44px;margin:0 0 12px;padding:0 16px;background:#16120a;border:1px solid #c9a227;border-radius:6px;color:#f3e7c0;font-size:15px;overflow:hidden;white-space:nowrap}
.notice-bar .nb-tag{flex:none;padding:2px 8px;background:#c9a227;color:#111;font-weight:700;border-radius:3px;font-size:13px}
.notice-bar .nb-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.notice-bar a{flex:none;color:#ffd84d;font-weight:700;text-decoration:underline}
@media (max-width:640px){.notice-bar{height:40px;font-size:13px;gap:8px;padding:0 10px}.notice-bar .nb-tag{font-size:12px}}
.notice-list{list-style:none;margin:16px 0;padding:0}
.notice-list li{margin:0 0 10px}
.notice-list a{display:grid;grid-template-columns:44px 110px 84px 1fr;gap:4px 16px;align-items:start;padding:16px;border:1px solid #B7BEC8;border-radius:6px;background:linear-gradient(#EDF0F3,#CFD5DC);color:#111;text-decoration:none}
.notice-list .nl-date{grid-row:span 2;font-weight:700}
.notice-list .nl-no{grid-row:span 2;font-weight:700;color:#666}
.notice-list .nl-kind{grid-row:span 2;justify-self:start;width:84px;text-align:center;font-size:12px;font-weight:700;padding:2px 0;border:1px solid #111}
.nl-count{margin:16px 0 6px;font-size:14px}
.notice-list .nl-title{font-weight:700}
.notice-list .nl-sum{color:#333;font-size:14px}
@media (max-width:640px){.notice-list a{grid-template-columns:36px 1fr}.notice-list .nl-no{grid-row:span 4}.notice-list .nl-date,.notice-list .nl-kind{grid-row:auto}}
.doc-kicker{margin:0 0 6px;font-size:14px}
.fix-tbl th[scope],.fix-tbl tbody th{white-space:nowrap}
@media (max-width:640px){.fix-tbl{font-size:13px}.fix-tbl td,.fix-tbl th{padding:6px 5px}}
.cl-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px}
.cl-tbl th,.cl-tbl td{padding:10px 12px;border-bottom:1px solid #B7BEC8;text-align:left;vertical-align:top}
.cl-tbl thead th{border-bottom:2px solid #111}
.cl-tbl th:nth-child(1),.cl-tbl td:nth-child(1){width:120px;white-space:nowrap}
.cl-tbl th:nth-child(2),.cl-tbl td:nth-child(2){width:38%}
@media (max-width:640px){.cl-tbl{font-size:13px}.cl-tbl th:nth-child(1),.cl-tbl td:nth-child(1){width:84px}.cl-tbl th,.cl-tbl td{padding:8px 6px}}
.notice-bar{margin:12px 0}
.cl-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px}
.cl-tbl th,.cl-tbl td{padding:10px 12px;border-bottom:1px solid #B7BEC8;text-align:left;vertical-align:top}
.cl-tbl thead th{border-bottom:2px solid #111}
.cl-tbl th:nth-child(1),.cl-tbl td:nth-child(1){width:120px;white-space:nowrap}
.cl-tbl th:nth-child(2),.cl-tbl td:nth-child(2){width:38%}
@media (max-width:640px){.cl-tbl{font-size:13px}.cl-tbl th:nth-child(1),.cl-tbl td:nth-child(1){width:84px}.cl-tbl th,.cl-tbl td{padding:8px 6px}}

/* 기준일 강조 */
mark.asof { background: var(--gold-l); color: #000; font-weight: 700; padding: 0 4px; border-radius: 4px; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.asof-line { margin: 6px 0 12px; font-size: 14px; color: var(--ink-2); }
/* 발행 근거 */
.bfun { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0; padding: 0; }
.bfun li { border: 1px solid #CCC; border-radius: 8px; padding: 8px 6px; text-align: center; }
.bfun li b { display: block; font-size: 18px; }
.bfun li span { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.bfun li.last { border: 2px solid var(--gold-d); background: var(--gold-l); color: #000; }
.btable td small { color: var(--ink-2); }
@media (max-width: 720px) { .bfun { grid-template-columns: repeat(3, 1fr); } }

.inote .inote-k { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .08em; margin: 0 0 4px; }
.inote .inote-after { border-top: 1px dashed #555; padding-top: 12px; margin-top: 14px; }
.inote .inote-after b { display: inline-block; color: #000; background: var(--gold); font-size: 13px; padding: 1px 8px; border-radius: 4px; margin-right: 8px; }

/* 오늘 새로 시작하신다면 (이달의 포트폴리오) – 칸 너비 고정 */
.fresh-lede { margin: 0 0 14px; }
.fr-ok { color: var(--red-ink); font-weight: 700; }
.fresh-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--k); }
.fresh-row { display: grid; grid-template-columns: 64px 84px 1fr; align-items: center; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid #D6D6D6; }
.fresh-row.now { background: #FFF6CC; }
.fr-mon { font-family: var(--f-num); font-weight: 700; font-size: 16px; padding-left: 6px; }
.fr-tag { justify-self: start; width: 76px; text-align: center; font-size: 12px; font-weight: 700; padding: 2px 0; border: 1px solid var(--k); }
.fr-tag.new { background: var(--k); color: var(--gold); }
.fr-tag i { color: var(--red-ink); font-style: normal; }
.fr-tag.zero { color: #8A8A8A; border-color: #BDBDBD; }
.fr-tag.zero i { color: #BDBDBD; }
.fr-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fr-chips li { display: flex; gap: 4px; align-items: center; min-width: 0; font-size: 14px; padding: 3px 6px; border: 1px solid #CFCFCF; }
.fr-chips li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-chips li.ok { border-color: var(--red-ink); font-weight: 700; }
.fr-chips li.ok i { color: var(--red-ink); font-style: normal; }
.fr-chips li.no { color: #8A8A8A; }
.fr-chips li.no i { font-style: normal; }
.fr-chips li.fr-none { grid-column: 1 / -1; color: #8A8A8A; border-style: dashed; }
.fresh-how { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.fresh-how li { display: grid; grid-template-columns: 140px 1fr; gap: 0 8px; }
.fresh-how li > span { min-width: 0; }
.fresh-how b.lab { color: var(--k); }
@media (max-width: 620px) {
  .fresh-row { grid-template-columns: 52px 1fr; gap: 6px 8px; }
  .fr-chips { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fr-chips li { font-size: 13px; }
  .fresh-how li { grid-template-columns: 1fr; }
}

.fr-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.fr-chips li.fr-pend { color: var(--k); border-color: var(--k); background: #FFFDF0; white-space: normal; }
.fresh-go { margin: 14px 0 0; font-weight: 700; }


/* 바뀌는 내용 표시: 기준일 · 다음 갱신 (모든 화면 같은 모양) */
.upd { display: inline-block; margin: 6px 0 10px; padding: 2px 8px; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--k); background: var(--gold-l); border-left: 4px solid var(--gold-d); }
.panel .upd, .board .upd { margin-top: 0; }
.upd-dark { background: transparent; color: var(--gold-l); border-left-color: var(--gold); padding-left: 8px; }

/* 규칙: 쓰는 자료 표 – 칸 너비 고정, 휴대폰은 항목별 세로 배치 */
.src-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; color: var(--k); }
.src-table th, .src-table td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid #D6D6D6; line-height: 1.5; }
.src-table thead th { border-bottom: 3px solid var(--k); font-size: 13px; }
.src-table thead th:nth-child(1) { width: 12%; } .src-table thead th:nth-child(2) { width: 18%; } .src-table thead th:nth-child(3) { width: 16%; }
.src-table thead th:nth-child(4) { width: 22%; } .src-table thead th:nth-child(5) { width: 20%; } .src-table thead th:nth-child(6) { width: 12%; }
.src-table tbody th { font-weight: 700; }
.src-table td:last-child { font-weight: 700; }
@media (max-width: 620px) {
  .src-table, .src-table tbody, .src-table tr { display: block; width: 100%; }
  .src-table thead { display: none; }
  .src-table tr { border-bottom: 3px solid var(--k); padding: 8px 0; }
  .src-table tbody th { display: block; border: 0; padding: 4px 0; font-size: 16px; }
  .src-table td { display: grid; grid-template-columns: 84px 1fr; gap: 8px; border: 0; padding: 3px 0; }
  .src-table td::before { content: attr(data-l); font-weight: 700; color: var(--ink-2); font-size: 12px; }
}
.src-table td .nx { display: block; margin-top: 4px; font-weight: 500; font-size: 12px; color: var(--ink-2); }

/* 공지 글: 모든 공지 같은 모양 (흰 판 + 제목·문단, 표) */
.notice-body h2 { font-size: 22px; margin: 18px 0 2px; }
.notice-body h2:first-child { margin-top: 0; }
.notice-body .fix-tbl { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--k); }
.notice-body .fix-tbl th, .notice-body .fix-tbl td { padding: 10px 8px; border-bottom: 1px solid #D6D6D6; text-align: right; }
.notice-body .fix-tbl th:first-child { text-align: left; }
.notice-body .fix-tbl thead th { border-bottom: 3px solid var(--k); text-align: right; }
.notice-body .fix-tbl thead th:first-child { text-align: left; }
.notice-body .doc-note { font-size: 13px; color: var(--ink-2); }
.nb-back { margin-top: 16px; font-weight: 700; }

.board-head p.upd { color: var(--k); max-width: none; justify-self: start; }
/* 강했던/약했던 때 카드: 기준일·다음 갱신을 카드 오른쪽 위에 작게 (스크롤 늘리지 않음) */
.tcard { position: relative; container-type: inline-size; grid-template-rows: auto auto 1fr; }
.tc-dl { margin: 0; display: grid; gap: 0; align-content: start; }
.tc-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #D6D6D6; font-size: 15px; }
.tc-dl > div:last-child { border-bottom: 0; }
.tc-dl dt { color: var(--ink-2); white-space: nowrap; }
.tc-dl dd { margin: 0; text-align: right; font-weight: 700; }
.tc-upd { position: absolute; top: 20px; right: 20px; margin: 0; text-align: right; font-size: 12px; line-height: 1.4; font-weight: 700; color: var(--ink-2); }
@container (max-width: 480px) { .tc-upd { position: static; text-align: left; order: 9; } }

/* 쿠팡 행사 배너 – 칸 크기 고정 (그림은 정사각) */
.ev .ev-row { display: grid; gap: 0 10px; grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; } /* 한 줄 고정: 칸 수보다 많으면 넘는 칸은 숨김 */
.ev-strip .ev-row { grid-template-columns: repeat(auto-fill, minmax(max(120px, calc((100% - 50px) / 6)), 1fr)); }
.ev-grid .ev-row { grid-template-columns: repeat(auto-fill, minmax(max(120px, calc((100% - 30px) / 4)), 1fr)); }
.ev-tile { display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--w); scroll-snap-align: start; min-width: 0; }
.ev-tile img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #222; border: 1px solid #333; }
.ev-tile .ev-t { font-size: 12px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-tile .ev-d { font-size: 11px; color: #9A9A9A; }
.ev-grid .ev-tile .ev-t { font-size: 14px; }
@media (max-width: 620px) { .ev-strip .ev-tile .ev-t { font-size: 14px; } .ev-strip .ev-tile .ev-d { font-size: 12px; } } /* 휴대폰: 띠도 중간 배너와 같은 크기 */
.ev-tile:hover img { outline: 3px solid var(--gold); outline-offset: -3px; }