/* 강화 시뮬 — 모바일 먼저, PC 에서는 가운데 정렬 + 표 형태 */
.gr {
  --gr-up: #16a34a; --gr-dn: #ef4444; --gr-tint: rgba(40,167,69,.10);
  max-width: 980px; margin: 0 auto; padding: 18px 16px 48px; color: var(--text-primary);
}
:root[data-theme="dark"] .gr { --gr-up: #4ade80; --gr-dn: #f87171; --gr-tint: rgba(52,206,87,.14); }
.gr *, .gr *::before, .gr *::after { box-sizing: border-box; }
.gr button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gr-hd h1 { font-size: 1.45rem; font-weight: 800; margin: 0; letter-spacing: -.3px; }
.gr-hd p { margin: 4px 0 0; color: var(--text-secondary); font-size: .9rem; }

/* 탭 */
.gr-tabs { display: flex; gap: 6px; margin: 16px 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gr-tabs::-webkit-scrollbar { display: none; }
.gr-tab { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); font-weight: 700; font-size: .92rem; color: var(--text-secondary); transition: .15s; }
.gr-tab.on { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.gr-pane { display: none; }
.gr-pane.on { display: block; }

.gr-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.gr-h2 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gr-h2 small { font-size: .78rem; font-weight: 500; color: var(--text-secondary); }
.gr-note { margin: 12px 0 0; font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.gr-foot { margin: 18px 0 0; text-align: center; font-size: .76rem; color: var(--text-muted); }
.gr-empty { text-align: center; color: var(--text-secondary); padding: 36px 12px; font-size: .92rem; border: 1px dashed var(--border-color); border-radius: 16px; }

/* 검색 */
.gr-find { position: relative; display: flex; align-items: center; height: 50px; border: 2px solid var(--primary-green); border-radius: 999px; background: var(--bg-secondary); padding: 0 16px; gap: 10px; }
.gr-find:focus-within { box-shadow: 0 0 0 4px var(--gr-tint); }
.gr-find svg { width: 20px; height: 20px; color: var(--primary-green); flex: none; }
.gr-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--text-primary); height: 100%; }
.gr-find-s { height: 44px; border-width: 1.5px; }
.gr-res { list-style: none; margin: 8px 0 0; padding: 4px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); box-shadow: var(--shadow-md); }
.gr-res[hidden] { display: none; }
.gr-res li button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: 10px; text-align: left; }
.gr-res li button:hover, .gr-res li button:focus-visible { background: var(--gr-tint); outline: 0; }
.gr-res .n { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-res em { font-style: normal; font-weight: 800; color: var(--primary-green); min-width: 30px; text-align: right; }
.gr-res-m { padding: 12px; text-align: center; color: var(--text-secondary); font-size: .88rem; }
.gr-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--bg-primary); border: 1px solid var(--border-color); flex: none; }
.gr-av.s { width: 36px; height: 36px; }
.gr-sea { height: 16px; width: auto; max-width: 40px; object-fit: contain; flex: none; }
.gr-recent { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.gr-recent::-webkit-scrollbar { display: none; }
.gr-recent:empty { display: none; }
.gr-rc { flex: none; border: 1px solid var(--border-color); background: var(--bg-primary); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; }
.gr-rc small { margin-left: 5px; color: var(--text-muted); font-weight: 500; }


/* 현재 → 목표 */
.gr-steps { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.gr-sel { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gr-sel span { font-size: .78rem; color: var(--text-secondary); font-weight: 600; }
.gr-arr { font-style: normal; font-size: 1.3rem; color: var(--text-muted); padding-bottom: 13px; }

/* 옵션 칩 */
.gr-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.gr-opts-row { margin-top: 14px; }
.gr-opt > span { display: block; font-size: .8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.gr-opt small { font-weight: 500; color: var(--text-muted); }
.gr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-chip { height: 36px; padding: 0 14px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--text-secondary); transition: .12s; display: inline-flex; align-items: center; gap: 2px; }
.gr-chip.on { border-color: var(--primary-green); background: var(--gr-tint); color: var(--primary-green); }
.gr-chip.dis { opacity: .4; pointer-events: none; }
.gr-num { padding: 0 12px; cursor: text; }
.gr-num input { width: 44px; border: 0; background: transparent; outline: 0; font: inherit; color: var(--text-primary); text-align: right; -moz-appearance: textfield; }
.gr-num input::-webkit-outer-spin-button, .gr-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gr-num:focus-within { border-color: var(--primary-green); }

/* 결과 */
.gr-hero { padding: 18px 16px; background: linear-gradient(160deg, var(--bg-card), var(--gr-tint)); }
.gr-hero-t { font-weight: 800; font-size: .95rem; color: var(--text-secondary); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gr-hero-t i { font-style: normal; color: var(--text-muted); }
.gr-hero-t small { font-weight: 500; font-size: .78rem; color: var(--text-muted); margin-left: 4px; }
.gr-hero-n { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.gr-hero-n span, .gr-diff span { font-size: .8rem; color: var(--text-secondary); font-weight: 600; }
.gr-hero-n b { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; word-break: keep-all; }
.gr-diff { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gr-diff span small { font-weight: 500; color: var(--text-muted); }
.gr-diff b { font-size: 1.35rem; font-weight: 800; }
.gr-diff.up b { color: var(--gr-up); }
.gr-diff.dn b { color: var(--gr-dn); }
.gr-diff.na { font-size: .85rem; color: var(--text-secondary); }

.gr-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.gr-k { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-k span { font-size: .78rem; color: var(--text-secondary); font-weight: 600; }
.gr-k b { font-size: 1.08rem; font-weight: 800; word-break: keep-all; }
.gr-k small { font-size: .72rem; color: var(--text-muted); }

/* 단계별 */
.gr-st { padding: 12px 0; border-top: 1px solid var(--border-color); }
.gr-st:first-child { border-top: 0; padding-top: 0; }
.gr-st-h { display: grid; grid-template-columns: 54px 1fr auto; gap: 2px 10px; align-items: baseline; }
.gr-st-h b { font-size: 1rem; font-weight: 800; grid-row: 1 / 3; align-self: center; }
.gr-st-h .p { font-weight: 800; color: var(--primary-green); }
.gr-st-h .a { grid-column: 2; font-size: .8rem; color: var(--text-secondary); }
.gr-st-h .c { grid-column: 3; grid-row: 1 / 3; align-self: center; font-weight: 800; text-align: right; }
.gr-st-m { margin-top: 8px; padding-left: 64px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gr-st-m .l { width: 100%; font-size: .78rem; color: var(--text-secondary); }
.gr-st-m .l small { color: var(--text-muted); }
.gr-mc { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--bg-primary); border: 1px solid var(--border-color); font-size: .8rem; font-weight: 700; }
.gr-mc b { color: var(--primary-green); }
.gr-mc small { font-weight: 500; color: var(--text-secondary); }
.gr-mc.none { color: var(--text-muted); }

/* 직접 강화 */
.gr-sim-top { display: flex; align-items: center; gap: 16px; }
.gr-lv { flex: none; width: 92px; height: 92px; border-radius: 22px; background: var(--bg-primary); border: 2px solid var(--border-color); display: flex; align-items: baseline; justify-content: center; padding-top: 22px; font-size: 2.6rem; font-weight: 800; line-height: 1; }
.gr-lv small { font-size: 1rem; margin-left: 2px; color: var(--text-secondary); }
.gr-lv.ok { border-color: var(--primary-green); background: var(--gr-tint); color: var(--primary-green); }
.gr-sim-i { display: flex; flex-direction: column; gap: 3px; font-size: .88rem; color: var(--text-secondary); font-weight: 600; }
.gr-sim-i .win { color: var(--primary-green); font-weight: 800; font-size: 1.05rem; }
.gr-sim-b { display: flex; gap: 8px; margin-top: 14px; }
.gr-btn { white-space: nowrap; flex: 1; height: 46px; border-radius: 12px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-weight: 800; font-size: .95rem; }
.gr-btn.pri { flex: 1.4; background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.gr-btn.ghost { flex: .8; color: var(--text-secondary); }
.gr-btn:disabled { opacity: .45; cursor: default; }
.gr-btn:active:not(:disabled) { transform: scale(.98); }
.gr-sim-s { display: flex; gap: 18px; margin-top: 12px; font-size: .88rem; color: var(--text-secondary); }
.gr-sim-s b { color: var(--text-primary); }
.gr-log { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gr-log li { display: flex; gap: 10px; font-size: .84rem; padding: 7px 10px; border-radius: 10px; background: var(--bg-primary); }
.gr-log li b { color: var(--text-muted); font-weight: 600; min-width: 44px; }
.gr-log li.ok { background: var(--gr-tint); color: var(--gr-up); font-weight: 700; }
.gr-log li.no { color: var(--text-secondary); }
.gr-log li.keep { color: var(--win-blue, #3b82f6); }

/* 대기 */
.gr-wait { text-align: center; color: var(--text-secondary); font-size: .92rem; padding: 26px 16px; }
.gr-wait b { color: var(--primary-green); }
.gr-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-color); border-top-color: var(--primary-green); border-radius: 50%; animation: grSpin .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes grSpin { to { transform: rotate(360deg); } }
.gr-bar { height: 6px; border-radius: 99px; background: var(--border-color); margin: 12px auto 0; max-width: 320px; overflow: hidden; }
.gr-bar i { display: block; height: 100%; background: var(--primary-green); border-radius: 99px; transition: width .4s; }
.gr-retry { margin-left: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 999px; padding: 4px 12px; font-weight: 700; }
.gr-prog { text-align: center; color: var(--text-secondary); font-size: .85rem; padding: 4px 0 12px; }
.gr-prog b { color: var(--primary-green); }

/* 효율 순위 */
.gr-lvs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gr-lvs::-webkit-scrollbar { display: none; }
.gr-lvb { flex: none; height: 38px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-weight: 800; font-size: .9rem; color: var(--text-secondary); }
.gr-lvb i { font-style: normal; color: var(--text-muted); margin: 0 2px; font-weight: 500; }
.gr-lvb.on { border-color: var(--primary-green); background: var(--gr-tint); color: var(--primary-green); }
.gr-rk .gr-h2 { margin-bottom: 10px; }
.gr-tb { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px 8px; align-items: center; text-align: left; border: 0; border-top: 1px solid var(--border-color); background: transparent; padding: 12px 2px; }
.gr-tb:hover { background: var(--gr-tint); }
.gr-tb-h { display: none; }
.gr-tb .rk { font-weight: 800; color: var(--text-muted); text-align: center; font-size: .9rem; }
.gr-tb .pl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gr-tb .pl b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-tb .pl em { font-style: normal; font-size: .76rem; font-weight: 800; color: var(--primary-green); background: var(--gr-tint); padding: 1px 7px; border-radius: 999px; flex: none; }
.gr-tb .rk, .gr-tb .pl, .gr-tb .d { grid-row: 1; }
.gr-tb .rk { grid-column: 1; } .gr-tb .pl { grid-column: 2; } .gr-tb .d { grid-column: 3; }
.gr-tb .vs { grid-row: 2; }
.gr-tb .d { font-weight: 800; font-size: 1.02rem; text-align: right; }
.gr-tb .d.up { color: var(--gr-up); } .gr-tb .d.dn { color: var(--gr-dn); }
.gr-tb .vs { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.gr-tb .v { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--text-primary); }
.gr-tb .v::before { content: attr(data-l); color: var(--text-muted); font-weight: 500; }
.gr-more { width: 100%; margin-top: 8px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-weight: 700; }
.gr-more small { color: var(--text-muted); margin-left: 6px; }

/* 재료값 */
.gr-mt-h { display: none; }
.gr-mt-r { display: grid; grid-template-columns: 44px 1fr 56px; grid-template-areas: "o v e" "o bar bar"; gap: 3px 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--border-color); }
.gr-mt-r:first-of-type { border-top: 0; }
.gr-mt-r b { grid-area: o; font-size: 1.1rem; font-weight: 800; }
.gr-mt-r .v { grid-area: v; font-weight: 800; }
.gr-mt-r .bar { grid-area: bar; height: 5px; border-radius: 99px; background: var(--bg-primary); overflow: hidden; }
.gr-mt-r .bar i { display: block; height: 100%; background: var(--primary-green); opacity: .65; border-radius: 99px; }
.gr-mt-r em { grid-area: e; font-style: normal; font-size: .72rem; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 999px; background: var(--bg-primary); color: var(--text-secondary); }
.gr-mt-r em.ok { background: var(--gr-tint); color: var(--gr-up); }
.gr-mt-r em.wild { background: rgba(239,68,68,.12); color: var(--gr-dn); }
.gr-mt-r.hit { background: var(--gr-tint); border-radius: 10px; }

/* 확률표 */
.gr-od { display: flex; flex-direction: column; font-size: .86rem; }
.gr-od-h, .gr-od-r { display: grid; grid-template-columns: 52px repeat(5, 1fr); gap: 4px; padding: 7px 0; text-align: right; align-items: center; }
.gr-od3 .gr-od-h, .gr-od3 .gr-od-r { grid-template-columns: 52px 1fr 1fr; }
.gr-od-h { color: var(--text-secondary); font-weight: 700; font-size: .76rem; border-bottom: 1px solid var(--border-color); }
.gr-od-r { border-top: 1px solid var(--border-color); }
.gr-od-r:nth-child(2) { border-top: 0; }
.gr-od-r b { text-align: left; font-weight: 800; }
.gr-od-r .f { font-weight: 800; color: var(--primary-green); }
.gr-od-r .na { font-style: normal; color: var(--text-muted); font-size: .78rem; }
.gr-dr { font-size: .72rem; }
.gr-dr-h, .gr-dr-r { display: grid; grid-template-columns: 50px repeat(10, minmax(0, 1fr)); gap: 2px; margin-bottom: 2px; text-align: center; }
.gr-dr-h span { color: var(--text-secondary); font-weight: 700; font-size: .7rem; }
.gr-dr-r b { text-align: left; font-weight: 800; align-self: center; }
.gr-dr-r span { border-radius: 6px; padding: 5px 0; font-weight: 700; }
.gr-dr-r .z { background: transparent; }
.gr-dr-r .h1 { background: var(--bg-primary); color: var(--text-secondary); }
.gr-dr-r .h2 { background: rgba(245,158,11,.16); color: #b45309; }
.gr-dr-r .h3 { background: rgba(239,68,68,.16); color: var(--gr-dn); }
:root[data-theme="dark"] .gr-dr-r .h2 { color: #fbbf24; }
.gr-gg { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.gr-gg div { background: var(--bg-primary); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.gr-gg span { font-size: .74rem; color: var(--text-secondary); font-weight: 700; }
.gr-gg b { font-size: .92rem; font-weight: 800; }

/* PC */
@media (min-width: 761px) {
  .gr { padding: 28px 24px 64px; }
  .gr-hd h1 { font-size: 1.8rem; }
  .gr-tab { height: 42px; padding: 0 22px; }
  .gr-card { padding: 22px; border-radius: 18px; }
  #pane-sim { display: none; }
  #pane-sim.on { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
  #pane-sim > .gr-card:first-child { position: sticky; top: 16px; margin-bottom: 0; }
  .gr-kv { grid-template-columns: repeat(4, 1fr); }
  .gr-hero-n b { font-size: 2.5rem; }
  .gr-opts-row { flex-direction: row; gap: 28px; }
  .gr-find { height: 54px; }
  .gr-st-h { grid-template-columns: 70px 90px 1fr auto; }
  .gr-st-h b { grid-row: auto; }
  .gr-st-h .a { grid-column: auto; font-size: .86rem; }
  .gr-st-h .c { grid-column: auto; grid-row: auto; }
  .gr-st-m { padding-left: 80px; }
  /* 순위 표 */
  .gr-tb, .gr-tb-h { grid-template-columns: 40px minmax(170px, 1.7fr) repeat(4, minmax(92px, 1fr)) minmax(120px, 1.1fr); gap: 8px; padding: 12px 8px; }
  .gr-tb-h { display: grid; font-size: .76rem; font-weight: 700; color: var(--text-secondary); border-top: 0; padding-top: 4px; }
  .gr-tb-h span { text-align: right; } .gr-tb-h span:nth-child(1), .gr-tb-h span:nth-child(2) { text-align: left; }
  .gr-tb .rk, .gr-tb .pl, .gr-tb .d, .gr-tb .vs { grid-row: auto; grid-column: auto; }
  .gr-tb .vs { display: contents; }
  .gr-tb .v { justify-content: flex-end; font-size: .92rem; font-weight: 600; }
  .gr-tb .v::before { content: none; }
  .gr-tb .rk { text-align: left; }
  .gr-mt-r { grid-template-columns: 70px 150px 1fr 70px; grid-template-areas: "o v bar e"; padding: 9px 8px; }
  .gr-mt-h { display: grid; grid-template-columns: 70px 150px 1fr; padding: 0 8px 8px; font-size: .76rem; font-weight: 700; color: var(--text-secondary); }
}
@media (max-width: 380px) {
  .gr-hero-n b { font-size: 1.75rem; }
  .gr-lv { width: 80px; height: 80px; font-size: 2.2rem; padding-top: 18px; }
}

/* 선수 카드 (현질 효율·스쿼드 메이커와 같은 카드 디자인) */
.gr-cards { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 16px; padding: 14px 8px 12px; border-radius: 16px; background: linear-gradient(180deg, #1b2438, #0f1626); }
.gr-cards[hidden] { display: none; }
.gr-ccol { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.gr-ccol small { color: rgba(255,255,255,.55); font-size: .72rem; margin-top: -3px; }
.gr-cards-ar { font-style: normal; color: rgba(255,255,255,.5); font-size: 1.4rem; align-self: center; margin-bottom: 30px; flex: none; }
.gr-px { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: rgba(10,14,24,.72); border: 1px solid rgba(255,215,94,.6); color: #ffd75e; font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gr-cb { container-type: inline-size; width: min(124px, 36vw); aspect-ratio: 217 / 343; position: relative; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); color: #fff; }
.gr-cb .bg { position: absolute; left: -28.34%; top: -8.16%; width: 156.68%; height: 116.6%; background: center / 100% 100% no-repeat; }
.gr-cb .face { position: absolute; left: 19%; top: 8%; width: 76%; height: 56%; object-fit: contain; object-position: 50% 100%; }
.gr-cb .ovr { position: absolute; left: 11%; top: 10.5%; font-size: 15cqw; font-weight: 900; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.gr-cb .pos { position: absolute; left: 12%; top: 24%; font-size: 10.5cqw; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.gr-cb .pay { position: absolute; left: 11%; top: 33%; width: 17cqw; height: 19cqw; background: rgba(14,18,28,.85); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; align-items: center; justify-content: center; }
.gr-cb .pay span { font-size: 8cqw; font-weight: 900; }
.gr-cb .enh { position: absolute; left: 7%; top: 55%; width: 30%; height: 9%; display: flex; align-items: center; justify-content: center; font-size: 10.5cqw; font-weight: 900; line-height: 1; border-radius: 1cqw; box-shadow: 0 1px 3px rgba(0,0,0,.45); border: .5cqw solid rgba(0,0,0,.28); }
.gr-cb .enh span { display: inline-block; transform: scaleX(.84); letter-spacing: -.02em; }
.gr-cb .enh.g0 { background: linear-gradient(180deg, #5a5f68, #3c4048); color: #cfd4db; }
.gr-cb .enh.g1 { background: linear-gradient(180deg, #dc9a72, #b3633d); color: #4e2312; }
.gr-cb .enh.g2 { background: linear-gradient(180deg, #dfe2e7, #b4b9c2); color: #454e5b; }
.gr-cb .enh.g3 { background: linear-gradient(180deg, #fae26a, #e0b216); color: #5e4a00; }
.gr-cb .enh.g4 { background: linear-gradient(135deg, #ffd4ee 0%, #fff0b8 30%, #bfe6ff 62%, #7fb8ff 82%, #ffd0ec 100%); color: #2b2650; border-color: rgba(60,90,200,.55); }
.gr-cb .nmrow { position: absolute; left: 6%; right: 6%; top: 67%; height: 10%; display: flex; align-items: center; justify-content: center; gap: 2cqw; min-width: 0; }
.gr-cb .sbd { height: 9.5cqw; width: auto; flex: none; }
.gr-cb .nm { font-size: 10.6cqw; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gr-cb .ft { position: absolute; left: 16%; right: 16%; top: 79%; height: 9%; display: flex; align-items: center; justify-content: center; gap: 4cqw; }
.gr-cb .ft img { height: 100%; width: auto; max-width: 17cqw; object-fit: contain; }

/* 직접 강화: 모드 전환, 재료 칸, 게이지 */
.gr-sim-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gr-sim-hd .gr-h2 { margin: 0; }
.gr-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-primary); border: 1px solid var(--border-color); }
.gr-seg button { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
.gr-seg button.on { background: var(--primary-green); color: #fff; }
.gr-sim-i b { color: var(--text-primary); }
.gr-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.gr-sl { aspect-ratio: 1 / 1.25; border-radius: 12px; border: 1.5px solid var(--border-color); background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; min-width: 0; }
.gr-sl small { font-size: .56rem; color: var(--text-muted); font-weight: 700; }
.gr-sl b { font-size: 1.02rem; font-weight: 800; line-height: 1.1; }
.gr-sl em { font-style: normal; font-size: .68rem; font-weight: 800; color: var(--primary-green); background: var(--gr-tint); padding: 0 5px; border-radius: 99px; }
.gr-sl span { font-size: .62rem; color: var(--text-secondary); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-sl.e { border-style: dashed; color: var(--text-muted); }
.gr-sl.e b { font-size: 1.4rem; font-weight: 500; }
.gr-sl:active { transform: scale(.97); }
.gr-gb { display: flex; height: 8px; border-radius: 99px; background: var(--bg-primary); overflow: hidden; margin-top: 12px; border: 1px solid var(--border-color); }
.gr-gb i { display: block; height: 100%; transition: width .25s; }
.gr-gb .m { background: var(--primary-green); }
.gr-gb .e { background: #f5b301; }
.gr-gt { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .78rem; color: var(--text-secondary); }
.gr-gt b { color: var(--text-primary); }

/* 재료 고르기 시트 */
.gr-sheet { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; }
.gr-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.gr-sheet-box { position: relative; width: 100%; max-width: 520px; max-height: 72vh; display: flex; flex-direction: column; background: var(--bg-card); border-radius: 20px 20px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); animation: grUp .2s ease-out; }
@keyframes grUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.gr-sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gr-sheet-h b { font-size: 1rem; font-weight: 800; }
.gr-sheet-h button { border: 0; background: var(--bg-primary); width: 32px; height: 32px; border-radius: 50%; }
.gr-sheet-l { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.gr-sheet-l button { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); text-align: left; }
.gr-sheet-l button.on { border-color: var(--primary-green); background: var(--gr-tint); }
.gr-sheet-l button b { font-size: 1.05rem; font-weight: 800; }
.gr-sheet-l button em { font-style: normal; font-weight: 800; color: var(--primary-green); }
.gr-sheet-l button span { font-weight: 700; }
.gr-sheet-l .clr { display: block; text-align: center; color: var(--gr-dn); font-weight: 700; }
@media (min-width: 761px) {
  .gr-sheet { align-items: center; }
  .gr-sheet-box { border-radius: 20px; }
  .gr-cb { width: 132px; }
  .gr-cards { padding: 18px 12px 14px; }
}
.gr-sheet button { font: inherit; color: var(--text-primary); cursor: pointer; }
.gr-cb { margin: 14px 0 16px; }

/* ── v26: 크리티컬 · 고급 옵션 · 추천 조합 · 예산 ── */
:root { --gr-crit: #8b5cf6; }
.gr-adv { margin-top: 2px; border-top: 1px dashed var(--border-color); padding-top: 10px; }
.gr-adv > summary { cursor: pointer; list-style: none; font-size: .86rem; font-weight: 800; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.gr-adv > summary::-webkit-details-marker { display: none; }
.gr-adv > summary::after { content: '▾'; margin-left: auto; transition: transform .15s; color: var(--text-muted); }
.gr-adv[open] > summary::after { transform: rotate(180deg); }
.gr-adv > summary small { font-weight: 600; color: var(--primary-green); font-size: .76rem; }
.gr-adv-b { margin-top: 12px; padding-top: 0; border-top: 0; }
.gr-mc.same { border-color: var(--gr-crit); }
.gr-mc.same b { color: var(--gr-crit); }
.gr-st-h .p i { font-style: normal; font-size: .74rem; font-weight: 800; color: var(--gr-crit); margin-left: 5px; }
.gr-sim-i .cr b { color: var(--gr-crit); }
.gr-sl.same { border-color: var(--gr-crit); background: color-mix(in srgb, var(--gr-crit) 9%, var(--bg-primary)); }
.gr-sl.same small, .gr-sl.same b { color: var(--gr-crit); }
.gr-sl.same em { color: var(--gr-crit); background: color-mix(in srgb, var(--gr-crit) 14%, transparent); }
.gr-log li.crit { background: color-mix(in srgb, var(--gr-crit) 14%, transparent); color: var(--gr-crit); font-weight: 800; }
.gr-recs { display: flex; gap: 6px; align-items: center; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gr-recs::-webkit-scrollbar { display: none; }
.gr-recs > span { flex: none; font-size: .74rem; font-weight: 700; color: var(--text-muted); }
.gr-recs button { flex: none; display: inline-flex; align-items: baseline; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-secondary); font-size: .8rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; align-self: center; }
.gr-recs button b { color: var(--text-primary); font-weight: 800; }
.gr-recs button.min { border-color: var(--primary-green); }
.gr-recs button em { font-style: normal; font-size: .66rem; font-weight: 800; color: var(--primary-green); }
.gr-sim-s { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.gr-bud { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.gr-bud input { width: 72px; height: 30px; border: 1.5px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); text-align: right; padding: 0 8px; font: inherit; font-size: .84rem; }
.gr-bud em { font-style: normal; }
.gr-sheet-g { font-size: .76rem; font-weight: 800; color: var(--text-muted); margin: 8px 2px 2px; }
.gr-sheet-g small { font-weight: 600; color: var(--gr-crit); }
.gr-sheet-l button.same { grid-template-columns: 78px 1fr auto auto; border-color: color-mix(in srgb, var(--gr-crit) 55%, var(--border-color)); }
.gr-sheet-l button.same b { color: var(--gr-crit); font-size: .95rem; }
.gr-sheet-l button.same[data-on] { background: color-mix(in srgb, var(--gr-crit) 12%, transparent); }
.gr-sheet-l button.same i { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--gr-crit); }
.gr-wait.s { padding: 12px 0 4px; }
.gr-k.bad b { color: var(--gr-dn); }
.gr-k small { min-height: 1em; }
.gr-od-h span, .gr-od-r span { min-width: 0; }
#grDist .gr-kv { grid-template-columns: 1fr 1fr; margin-bottom: 0; }

/* ── v26b: 접이식 · 컴팩트 ── */
.gr-kv3 { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
.gr-kv3 .gr-k { padding: 10px 9px; }
.gr-kv3 .gr-k b { font-size: .88rem; letter-spacing: -.3px; }
.gr-hero-n em { font-style: normal; font-size: .8rem; color: var(--text-secondary); font-weight: 600; }
.gr-fold { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 0 16px; margin-bottom: 12px; }
.gr-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; padding: 14px 0; font-size: 1rem; font-weight: 800; }
.gr-fold > summary::-webkit-details-marker { display: none; }
.gr-fold > summary small { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.gr-fold > summary::after { content: '▾'; margin-left: auto; color: var(--text-muted); transition: transform .15s; align-self: center; }
.gr-fold[open] > summary::after { transform: rotate(180deg); }
.gr-fold[open] { padding-bottom: 14px; }
.gr-fold .gr-steps-l { padding-top: 2px; }
.gr-bud2 { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-secondary); }
.gr-bud2 input { width: 120px; height: 36px; border: 1.5px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary); color: var(--text-primary); padding: 0 14px; font: inherit; font-size: .88rem; }
.gr-bud2 em { font-style: normal; font-size: .84rem; }
@media (min-width: 761px) { .gr-kv3 { grid-template-columns: repeat(3, 1fr) !important; } }

/* 단계별 지출 */
.gr-by { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.gr-by-h { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.gr-by-h i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 3px 0 8px; }
.gr-by-h i.m, .gr-by-r .bar u { background: var(--primary-green); }
.gr-by-h i.p { background: var(--gr-crit); }
.gr-by-r { display: grid; grid-template-columns: 44px 1fr auto 34px; gap: 4px 8px; align-items: center; padding: 4px 0; font-size: .82rem; }
.gr-by-r b { font-weight: 800; }
.gr-by-r .bar { height: 8px; border-radius: 99px; background: var(--bg-primary); overflow: hidden; display: block; }
.gr-by-r .bar i { display: flex; height: 100%; background: var(--gr-crit); border-radius: 99px; overflow: hidden; }
.gr-by-r .bar u { display: block; height: 100%; text-decoration: none; }
.gr-by-r .v { font-weight: 700; text-align: right; }
.gr-by-r em { font-style: normal; color: var(--text-muted); text-align: right; font-size: .76rem; }
.gr-by-r small { grid-column: 2 / 5; color: var(--text-muted); font-size: .7rem; margin-top: -2px; }

/* 비용 예측 */
.gr-dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; }
.gr-dh-t { font-size: .92rem; color: var(--text-secondary); font-weight: 600; }
.gr-dh-t b { color: var(--text-primary); font-size: 1.15rem; font-weight: 800; }
.gr-dh-t b.pp { color: var(--primary-green); }
.gr-dh .gr-bud { margin-left: 0; }
.gr-dbar { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #eab308 55%, #ef4444); margin: 6px 6px 10px; }
.gr-dbar .mk { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); }
.gr-dbar .mk.g { background: #86efac; } .gr-dbar .mk.y { background: #fde047; } .gr-dbar .mk.r { background: #fca5a5; }
.gr-dleg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; font-weight: 700; margin-bottom: 14px; color: var(--text-secondary); }
.gr-dleg span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: #fff; }
.gr-dleg .g::before { background: #86efac; } .gr-dleg .y::before { background: #fde047; } .gr-dleg .r::before { background: #fca5a5; }
.gr-fold .gr-by { margin-top: 2px; }

.gr-hero-n em.imp { color: var(--gr-dn); font-weight: 800; }
.gr-vs { margin-top: 12px; font-size: .88rem; color: var(--text-secondary); font-weight: 600; }
.gr-vs b { color: var(--text-primary); }
.gr-vs b.up { color: var(--gr-up); } .gr-vs b.dn { color: var(--gr-dn); }

/* ── v26c: 오리지널 다듬기 ── */
/* 강화 등급 배지 (현질 효율의 배지와 같은 색 규칙) */
.gr-en { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: .74rem; font-weight: 900; line-height: 1; border: 1px solid rgba(0,0,0,.3); background: linear-gradient(180deg, #5a5f68, #3c4048); color: #cfd4db; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.gr-en.en2, .gr-en.en3, .gr-en.en4 { background: linear-gradient(180deg, #dc9a72, #b3633d); color: #4e2312; }
.gr-en.en5, .gr-en.en6, .gr-en.en7 { background: linear-gradient(180deg, #dfe2e7, #b4b9c2); color: #454e5b; }
.gr-en.en8, .gr-en.en9, .gr-en.en10 { background: linear-gradient(180deg, #fae26a, #e0b216); color: #5e4a00; }
.gr-en.en11, .gr-en.en12, .gr-en.en13 { background: linear-gradient(135deg, #ffd4ee 0%, #fff0b8 30%, #bfe6ff 62%, #7fb8ff 82%, #ffd0ec 100%); color: #2b2650; border-color: rgba(60,90,200,.55); }
.gr-pair { display: inline-flex; align-items: center; gap: 3px; }
.gr-pair u { text-decoration: none; color: var(--text-muted); font-size: .8rem; }
.gr-st-h { grid-template-columns: 74px 1fr auto; }
.gr-st-h b { display: flex; align-items: center; }
.gr-st-m { padding-left: 84px; }
.gr-by-r { grid-template-columns: 74px 1fr auto 34px; }
@media (min-width: 761px) { .gr-st-m { padding-left: 84px; } }

/* 분포 히스토그램 */
.gr-hist { display: flex; align-items: flex-end; gap: 2px; height: 74px; margin: 4px 0 4px; }
.gr-hist i { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; background: var(--border-color); }
.gr-hist i.in { background: var(--primary-green); }
.gr-hist-x { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-bottom: 14px; }
.gr-dbar, .gr-dleg { display: none; }
#grDist .gr-kv { grid-template-columns: repeat(3, 1fr); }
.gr-k small { font-weight: 500; }

/* 연출 */
.gr-btn.warn { background: var(--gr-dn); border-color: var(--gr-dn); color: #fff; }
.gr-sim-o { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.gr-sim-o .gr-bud { margin-left: 0; }
.gr-skip { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; user-select: none; }
.gr-skip input { position: absolute; opacity: 0; pointer-events: none; }
.gr-skip i { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border-color); background: var(--bg-primary); position: relative; flex: none; transition: .12s; }
.gr-skip input:checked + i { background: var(--primary-green); border-color: var(--primary-green); }
.gr-skip input:checked + i::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gr-skip input:focus-visible + i { outline: 2px solid var(--primary-green); outline-offset: 2px; }
.gr-sim-s { margin-top: 10px; }
.gr-sim.running .gr-sim-s b { font-variant-numeric: tabular-nums; }
.gr-lv.up { animation: grPop .38s ease-out; }
.gr-lv.dn { animation: grShake .32s ease-out; border-color: var(--gr-dn); }
@keyframes grPop { 0% { transform: scale(1); } 40% { transform: scale(1.14); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-green) 28%, transparent); } 100% { transform: scale(1); } }
@keyframes grShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
.gr-sim.running .gr-sim-hd .gr-seg { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .gr-lv.up, .gr-lv.dn { animation: none; } }
.gr-sc { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.gr-sc-r { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); }
.gr-sc-r > span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.gr-sc-r > span b { font-size: .92rem; font-weight: 800; }
.gr-sc-r > span small { font-size: .72rem; color: var(--text-muted); }
.gr-sc-r em { font-style: normal; font-weight: 800; font-size: 1.02rem; text-align: right; }
.gr-sc-r.g em { color: var(--gr-up); }
.gr-sc-r.bad em { color: var(--gr-dn); }
.gr-sc-r .pf { grid-column: 2; text-align: right; font-size: .74rem; font-weight: 600; }
.gr-sc-r .pf.up { color: var(--gr-up); } .gr-sc-r .pf.dn { color: var(--text-muted); }

/* ── v27: BP 아이콘 · 단계 선택 · 결과 팝업 · 실패 낙하표 ── */
.gr-bp { display: inline-block; width: 1.05em; height: 1.05em; min-width: 11px; min-height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe58a, #f4b81f 60%, #c98a08); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); position: relative; flex: none; vertical-align: -.14em; margin-right: 3px; }
.gr-bp::after { content: 'B'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .62em; font-weight: 900; color: #7a4b00; line-height: 1; font-style: normal; }

.gr-lvbtn { height: 52px; width: 100%; border: 1.5px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); color: var(--text-primary); display: flex; align-items: center; gap: 8px; padding: 0 14px; font: inherit; cursor: pointer; }
.gr-lvbtn .gr-en { min-width: 28px; height: 26px; font-size: .9rem; }
.gr-lvbtn b { font-size: 1.15rem; font-weight: 800; }
.gr-lvbtn u { margin-left: auto; text-decoration: none; color: var(--text-muted); font-size: .8rem; }
.gr-lvbtn:focus-visible { outline: 0; border-color: var(--primary-green); box-shadow: 0 0 0 4px var(--gr-tint); }
.gr-lvgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; padding: 2px; }
.gr-lvc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 9px; border: 1.5px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); }
.gr-lvc .gr-en { min-width: 34px; height: 30px; font-size: 1rem; }
.gr-lvc small { font-size: .7rem; color: var(--text-secondary); font-weight: 600; }
.gr-lvc.on { border-color: var(--primary-green); background: var(--gr-tint); }
.gr-lvc:disabled { opacity: .3; cursor: default; }

.gr-res { max-height: 60vh; overflow-y: auto; }
.gr-res li button .gr-sea { height: 18px; max-width: 44px; }

.gr-modal { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gr-modal-bg { position: absolute; inset: 0; background: rgba(6,10,18,.72); animation: grFade .2s ease-out; }
.gr-modal-box { position: relative; width: 100%; max-width: 360px; max-height: 94vh; overflow-y: auto; background: var(--bg-card); border-radius: 22px; padding: 20px 18px 16px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: grUp .28s ease-out; }
@keyframes grFade { from { opacity: 0; } to { opacity: 1; } }
.gr-rm-t b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--primary-green); }
.gr-rm-t span { display: inline-block; margin-top: 6px; }
.gr-rm-card { display: flex; justify-content: center; padding: 26px 0 22px; }
.gr-rm-card .gr-cb { width: min(168px, 46vw); margin: 0; }
.gr-rm-card.pop .gr-cb { animation: grCardPop .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes grCardPop { 0% { transform: scale(.88); filter: brightness(2.2) drop-shadow(0 0 18px #fff); } 55% { transform: scale(1.1); } 100% { transform: scale(1); filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); } }
.gr-rm-sp { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.gr-rm-sp span { font-size: .8rem; color: var(--text-secondary); font-weight: 700; }
.gr-rm-sp b { font-size: 1.55rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.gr-rm-kv { display: flex; gap: 6px; }
.gr-rm-kv > div { flex: 1; min-width: 0; background: var(--bg-primary); border-radius: 12px; padding: 9px 4px; display: flex; flex-direction: column; gap: 3px; }
.gr-rm-kv span { font-size: .72rem; color: var(--text-secondary); font-weight: 600; }
.gr-rm-kv b { font-size: .88rem; font-weight: 800; }
.gr-rm-kv b.up, .gr-rm-pf.up b { color: var(--gr-up); }
.gr-rm-kv b.dn, .gr-rm-pf.dn b { color: var(--gr-dn); }
.gr-rm-pf { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: var(--bg-primary); font-size: .85rem; font-weight: 700; color: var(--text-secondary); }
.gr-rm-pf b { font-size: 1rem; font-weight: 900; }
.gr-rm-b { display: flex; gap: 8px; margin-top: 14px; }
.gr-modal button { font: inherit; color: var(--text-primary); cursor: pointer; }
.gr-modal .gr-btn.pri { color: #fff; }

.gr-dr2-r { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-color); }
.gr-dr2-r:first-child { border-top: 0; }
.gr-dr2 .cs { display: flex; flex-wrap: wrap; gap: 4px; }
.gr-dr2 .c { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 4px; border-radius: 999px; }
.gr-dr2 .c .gr-en { min-width: 20px; height: 18px; font-size: .68rem; }
.gr-dr2 .c em { font-style: normal; font-weight: 800; font-size: .76rem; font-variant-numeric: tabular-nums; }
.gr-od-h, .gr-od-r { grid-template-columns: 74px repeat(5, 1fr); }
.gr-od3 .gr-od-h, .gr-od3 .gr-od-r { grid-template-columns: 74px 1fr 1fr; }
.gr-od-r b { display: flex; }
.gr-ad { margin: 18px 0 8px; min-height: 0; overflow: hidden; }
.gr-rm-kv b { white-space: nowrap; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.gr-rm-vs { margin: 0 0 12px; padding: 12px 10px 10px; border-radius: 14px; display: flex; flex-direction: column; gap: 3px; }
.gr-rm-vs b { font-size: 1.2rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
.gr-rm-vs small { font-size: .74rem; color: var(--text-secondary); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.gr-rm-vs.up { background: rgba(22,163,74,.12); color: var(--gr-up); }
.gr-rm-vs.dn { background: rgba(239,68,68,.12); color: var(--gr-dn); }
.gr-rm-vs.up b { animation: grCardPop .7s cubic-bezier(.2,1.4,.4,1) .9s both; }
.gr-vs.up, .gr-vs.dn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; }
.gr-vs.up { background: rgba(22,163,74,.12); } .gr-vs.dn { background: rgba(239,68,68,.12); }
.gr-vs.up b { color: var(--gr-up); font-size: 1rem; font-weight: 900; } .gr-vs.dn b { color: var(--gr-dn); font-size: 1rem; font-weight: 900; }
.gr-vs small { font-size: .74rem; font-weight: 600; }
.gr-imgm { z-index: 3200; }
.gr-imgbox { max-width: 440px; padding: 12px; }
.gr-imgbox img { width: 100%; display: block; border-radius: 12px; }
.gr-imgbox .gr-rm-b { margin-top: 10px; }
.gr-imgbox .gr-note { margin: 8px 0 0; font-size: .75rem; color: var(--text-secondary); }
.gr-rm-b .gr-btn { padding: 0 6px; font-size: .88rem; }

/* ── v32: 재료값 상세 · 추이 ── */
.gr-mpick { display: flex; align-items: center; gap: 10px; padding: 10px; }
.gr-mn { width: 48px; height: 48px; border-radius: 14px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-size: 1.5rem; font-weight: 800; line-height: 1; flex: none; }
.gr-mi { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 14px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); }
.gr-mi span { font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
.gr-mi input { width: 90px; border: 0; background: transparent; color: var(--text-primary); font-size: 1.5rem; font-weight: 900; text-align: center; -moz-appearance: textfield; }
.gr-mi input::-webkit-outer-spin-button, .gr-mi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gr-mi input:focus { outline: 0; }
.gr-mi:focus-within { border-color: var(--primary-green); box-shadow: 0 0 0 4px var(--gr-tint); }
.gr-md-top { display: flex; align-items: center; gap: 8px; }
.gr-md-o { font-size: .88rem; font-weight: 800; color: var(--text-secondary); }
.gr-bd { font-style: normal; font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--bg-primary); color: var(--text-secondary); }
.gr-bd.ok { background: var(--gr-tint); color: var(--gr-up); } .gr-bd.wild { background: rgba(239,68,68,.12); color: var(--gr-dn); }
.gr-md-p { margin-top: 8px; font-size: 2rem; font-weight: 900; display: flex; align-items: center; letter-spacing: -.5px; }
.gr-md-p .gr-bp { width: .8em; height: .8em; margin-right: 8px; }
.gr-md-c { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .86rem; }
.gr-md-c small { color: var(--text-secondary); font-weight: 600; }
.gr-md-c small.d { margin-left: auto; font-size: .72rem; color: var(--text-muted); }
.gr-chg { font-weight: 800; color: var(--text-secondary); }
.gr-chg.up { color: var(--gr-up); } .gr-chg.dn { color: var(--gr-dn); }
.gr-ch svg { width: 100%; height: 150px; display: block; }
.gr-ch .ln { fill: none; stroke: var(--gr-up); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-ch .ar { fill: var(--gr-up); opacity: .12; stroke: none; }
.gr-ch .dot { fill: var(--gr-up); }
.gr-ch.dn .ln { stroke: var(--gr-dn); } .gr-ch.dn .ar, .gr-ch.dn .dot { fill: var(--gr-dn); }
.gr-ch text { fill: var(--text-muted); font-size: 10px; font-weight: 600; }
.gr-ch-na { padding: 18px 0; text-align: center; color: var(--text-secondary); font-size: .88rem; }
.gr-ch-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.gr-ch-k > div { background: var(--bg-primary); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gr-ch-k span { font-size: .72rem; color: var(--text-secondary); font-weight: 600; }
.gr-ch-k b { font-size: .74rem; font-weight: 800; white-space: nowrap; }
.gr-mg-h, .gr-mg-r { display: grid; grid-template-columns: 30px 30px minmax(14px, 1fr) 46px 132px; gap: 5px; align-items: center; }
.gr-mg-h { grid-template-columns: 1fr; display: none; }
.gr-mg-r { padding: 7px 0; border-top: 1px solid var(--border-color); font-size: .84rem; }
.gr-mg-r:nth-child(2) { border-top: 0; }
.gr-mg-r b { font-weight: 800; } .gr-mg-r em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--text-secondary); }
.gr-mg-r .g { height: 6px; border-radius: 99px; background: var(--bg-primary); overflow: hidden; }
.gr-mg-r .g i { display: block; height: 100%; background: var(--primary-green); opacity: .75; border-radius: 99px; }
.gr-mg-r .p { text-align: right; font-weight: 800; font-size: .8rem; }
.gr-mg-r .n { min-width: 0; text-align: right; font-size: .74rem; font-weight: 700; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.gr-mg-r .n .gr-bp { width: .95em; height: .95em; }
.gr-mg-r .na { color: var(--text-muted); font-style: normal; }
.gr-mg-r.me { background: var(--gr-tint); border-radius: 10px; padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.gr-mt-r { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border-color); background: transparent; display: grid; grid-template-columns: 40px 1fr 66px 54px; grid-template-areas: "o v sp e" "o c sp e"; gap: 1px 8px; align-items: center; padding: 9px 4px; color: inherit; font: inherit; cursor: pointer; }
.gr-mt-r b { grid-area: o; } .gr-mt-r .v { grid-area: v; display: inline-flex; align-items: center; } .gr-mt-r .c { grid-area: c; font-size: .74rem; min-height: 1em; }
.gr-mt-r .sp { grid-area: sp; display: flex; justify-content: center; } .gr-mt-r em { grid-area: e; }
.gr-mt-r .v .gr-bp { width: .95em; height: .95em; }
.gr-sp { display: block; } .gr-sp.up { color: var(--gr-up); } .gr-sp.dn { color: var(--gr-dn); }
.gr-mt-r.hit { background: var(--gr-tint); border-radius: 10px; }
@media (min-width: 761px) { .gr-mt-r { grid-template-columns: 70px 1fr 110px 90px 70px; grid-template-areas: "o v c sp e"; padding: 9px 8px; } .gr-mt-h { display: none; } }

/* v33: 카드 얼굴 아래쪽이 딱 잘려 보이지 않게 · 흰 이름 띠 카드는 글자를 어둡게 */
.gr-cb .face { -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); }
.gr-cb.lt .nm { color: #111; text-shadow: none; }
.gr-cb.ltop .ovr, .gr-cb.ltop .pos { color: #111; text-shadow: none; }

/* 이름 줄이 흰 띠 경계에 걸친 카드 → 흰 글자 + 어두운 테두리 */
.gr-cb.mx .nm { color: #fff; -webkit-text-stroke: 3.2cqw rgba(10,14,24,.92); paint-order: stroke fill; text-shadow: none; }

/* 결과 팝업: 버튼은 항상 보이게(아래 광고에 안 가리게), 내용만 스크롤 */
.gr-modal-box { display: flex; flex-direction: column; overflow: hidden; max-height: 94vh; max-height: 94dvh; }
.gr-rm-sc { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.gr-modal-box > .gr-rm-b { flex: none; margin-top: 10px; }
.gr-rm-card { padding: 16px 0 14px; }
.gr-rm-card .gr-cb { width: min(136px, 38vw); }
@media (max-width: 900px) {
  .gr-modal { padding: 10px 12px 118px; }
  .gr-modal-box { max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); padding: 16px 14px 12px; }
  .gr-imgbox img { max-height: calc(100dvh - 330px); width: auto; max-width: 100%; object-fit: contain; }
}
.gr-imgbox img { margin: 0 auto; }

/* 좁은 화면: 게이지 막대를 빼고 숫자가 겹치지 않게 */
@media (max-width: 460px) {
  .gr-mg-r { grid-template-columns: 28px 26px 52px minmax(0, 1fr); gap: 4px; }
  .gr-mg-r .g { display: none; }
  .gr-mg-r .n { font-size: .72rem; }
}