:root {
  --serif: "Nanum Myeongjo", "Noto Serif KR", "AppleMyungjo", serif;
  --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-caption: 14px;
  --font-label: 14px;
  --font-body: 17px;
  --font-body-lg: 17px;
  --font-subtitle: 24px;
  --font-title: 32px;
  --font-hero: clamp(36px, 7vw, 44px);
  --font-type: 44px;
  --font-banner: clamp(28px, 8vw, 48px);
  --font-countdown: clamp(80px, 26vw, 160px);
  --font-eyebrow: 13px;
  --font-title-3: 20px;
  --font-title-2: 24px;
  --font-title-1: 32px;
  --font-display: 44px;
  --font-display-mobile: 36px;
  --font-tagline: 19px;
  --leading-eyebrow: 1.4;
  --leading-caption: 1.5;
  --leading-body: 1.75;
  --leading-strong: 1.6;
  --leading-title-3: 1.35;
  --leading-title-2: 1.3;
  --leading-title-1: 1.2;
  --leading-display: 1.1;
  --tracking-eyebrow: 0.06em;
  --tracking-type: -0.02em;
  --space-0: 0;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --rounded-xs: 5px;
  --rounded-sm: 8px;
  --rounded-md: 11px;
  --rounded-lg: 18px;
  --rounded-xl: 24px;
  --rounded-pill: 9999px;
  --rounded-circle: 50%;
  --touch-min: 44px;
  --touch-gap: 8px;
  --shadow-object: 0 12px 32px rgba(13, 11, 36, 0.24);
  --filter-object: drop-shadow(0 8px 16px rgba(13, 11, 36, 0.18));
  --glass-blur: blur(20px) saturate(140%);
  --duration-press: 120ms;
  --duration-state: 180ms;
  --duration-reveal: 320ms;
  --duration-banner: 1700ms;
  --duration-bubble: 2200ms;
  --duration-count: 800ms;
  --duration-reduced: 120ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --stone-black-hi: #5c616b;
  --stone-black-mid: #1b1e24;
  --stone-black-lo: #050608;
  --stone-black-line: #3a3f48;
  --stone-white-hi: #fffdf8;
  --stone-white-mid: #ecebe6;
  --stone-white-lo: #b9b6ad;
  --paper: #fffdf8;
  --ink: #17142b;
  --paper-muted: #5f5a73;
  --role: var(--role-estj);
  --role-estj: #3b2f7a;
  --role-estp: #5a3f86;
  --role-esfj: #b65577;
  --role-esfp: #b0406f;
  --role-entj: #7a4a8c;
  --role-entp: #6a45a0;
  --role-enfj: #2f6f8a;
  --role-enfp: #c46a8e;
  --role-istj: #8a6a3a;
  --role-istp: #2f8f8a;
  --role-isfj: #b8322d;
  --role-isfp: #9b88c4;
  --role-intj: #2a2a4a;
  --role-intp: #2c3a78;
  --role-infj: #2f8f6f;
  --role-infp: #4a5a8a;
}
body[data-theme="night"] {
  --bg: #141233;
  --bg-deep: #0d0b24;
  --surface: #1d1a4a;
  --surface-hi: #2a2565;
  --panel: #0d0b24;
  --glass: rgba(29, 26, 74, 0.72);
  --line: #4a4290;
  --gold: #e2c07a;
  --gold-hi: #f3dca0;
  --gold-lo: #a9843f;
  --text: #f6f1e6;
  --heading: #f6f1e6;
  --muted: #b9b3d6;
  --teal: #3fb8b0;
  --violet: #6b5bd6;
  --rose: #d0607f;
  --seal: #c23b35;
  --action: #e2c07a;
  --on-action: #141233;
  --link: #f3dca0;
  --focus: #e2c07a;
  --selected: #2a2565;
  --selection-ink: #f6f1e6;
  --ceremony-line: #e2c07a;
  --rose-ink: #eda1ba;
  --teal-ink: #73d2cc;
  --wash: rgba(208, 96, 127, 0.14);
  --pattern: rgba(246, 241, 230, 0.04);
  --scrim: rgba(13, 11, 36, 0.76);
}
body[data-theme="day"] {
  --bg: #fbf8f1;
  --bg-deep: #f2ece2;
  --surface: #fffdf8;
  --surface-hi: #f2ece2;
  --panel: #f2ece2;
  --glass: rgba(255, 253, 248, 0.78);
  --line: #e3dccf;
  --gold: #b8914a;
  --gold-hi: #e2c07a;
  --gold-lo: #a9843f;
  --text: #3b3654;
  --heading: #17142b;
  --muted: #68637e;
  --teal: #2f8f8a;
  --violet: #6a4c8c;
  --rose: #c75a7c;
  --seal: #b8322d;
  --action: #6a4c8c;
  --on-action: #fffdf8;
  --link: #6a4c8c;
  --focus: #6a4c8c;
  --selected: #f2ece2;
  --selection-ink: #17142b;
  --ceremony-line: #b8914a;
  --rose-ink: #9f3b5a;
  --teal-ink: #236f6b;
  --wash: rgba(199, 90, 124, 0.10);
  --pattern: rgba(23, 20, 43, 0.04);
  --scrim: rgba(23, 20, 43, 0.60);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: var(--space-0); min-width: 0; min-height: 100%; }
body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--pattern) 1px, transparent 1px), linear-gradient(90deg, var(--pattern) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--font-body);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
}
button, select, input { font: inherit; color: inherit; }
button, select, input[type=text], input[type=range], input[type=checkbox], a {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}
button {
  padding: var(--space-12) var(--space-24);
  border: 1px solid transparent;
  border-radius: var(--rounded-pill);
  background: var(--surface-hi);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-press) var(--ease), filter var(--duration-state) var(--ease);
}
button:hover:not(:disabled), a:hover { filter: brightness(1.05); }
button:active:not(:disabled), a:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary, .gp-primary { background: var(--action); color: var(--on-action); font-weight: 700; }
button.on { background: var(--selected); color: var(--selection-ink); font-weight: 800; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
a { color: var(--link); display: inline-flex; align-items: center; text-underline-offset: 3px; transition: transform var(--duration-press) var(--ease), filter var(--duration-state) var(--ease); }
label[for] { display: inline-flex; align-items: center; min-height: var(--touch-min); }
select, input[type=text] {
  padding: var(--space-8) var(--space-12);
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--rounded-sm);
}
input[type=range] { accent-color: var(--action); width: 100%; margin: var(--space-0); }
input[type=checkbox] {
  appearance: none;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: var(--space-0);
  border: 1px solid var(--muted);
  border-radius: var(--rounded-sm);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-content: center;
}
input[type=checkbox]:checked { background: var(--action); border-color: transparent; color: var(--on-action); }
input[type=checkbox]:checked::after { content: "✓"; font-size: var(--font-subtitle); font-weight: 800; }
.screen {
  max-width: 560px;
  width: 100%;
  margin: var(--space-0) auto;
  padding: var(--space-24) var(--space-16) var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  animation: screenIn var(--duration-reveal) var(--ease);
}
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
h1, h2, h3, p { overflow-wrap: break-word; word-break: keep-all; text-wrap: pretty; }
h2 { margin: var(--space-0); font: 700 var(--font-subtitle)/1.3 var(--sans); color: var(--heading); letter-spacing: -0.5px; }
.note { margin: var(--space-0); color: var(--muted); font-size: var(--font-label); line-height: 1.6; }
.row { display: flex; flex-wrap: wrap; gap: var(--touch-gap); align-items: center; min-width: 0; }
.row > .label { color: var(--muted); font-size: var(--font-label); font-weight: 600; min-width: 4.5em; }
.seg-group { flex: 1; display: flex; flex-wrap: wrap; gap: var(--touch-gap); padding: var(--space-4); background: var(--panel); border-radius: var(--rounded-pill); min-width: 0; }
.seg-group button { flex: 1 1 0; padding: var(--space-8) var(--space-12); font-size: var(--font-label); background: transparent; font-weight: 500; word-break: keep-all; }
.seg-group button.on { background: var(--surface-hi); color: var(--selection-ink); font-weight: 800; }
body[data-theme="day"] .seg-group button.on { background: var(--surface); }
@supports selector(:has(*)) {
  .seg-group { position: relative; isolation: isolate; --segments: 2; --segment: 0; }
  .seg-group:has(> button:first-child:last-child) { --segments: 1; }
  .seg-group:has(> button:nth-child(3):last-child) { --segments: 3; }
  .seg-group:has(> button:nth-child(4):last-child) { --segments: 4; }
  .seg-group:has(> button:nth-child(5):last-child) { --segments: 5; }
  .seg-group:has(> button:nth-child(2).on) { --segment: 1; }
  .seg-group:has(> button:nth-child(3).on) { --segment: 2; }
  .seg-group:has(> button:nth-child(4).on) { --segment: 3; }
  .seg-group:has(> button:nth-child(5).on) { --segment: 4; }
  .seg-group::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px - (var(--segments) - 1) * 8px) / var(--segments));
    background: var(--selected);
    border-radius: var(--rounded-pill);
    transform: translateX(calc(var(--segment) * (100% + 8px)));
    transition: transform var(--duration-reveal) var(--ease);
    z-index: -1;
  }
  body[data-theme="day"] .seg-group::before { background: var(--surface); }
  .seg-group button.on, body[data-theme="day"] .seg-group button.on { background: transparent; }
}
.check-row { min-height: var(--touch-min); padding: var(--space-8) var(--space-12); background: var(--panel); border-radius: var(--rounded-sm); cursor: pointer; font-size: var(--font-label); }
.check-row > span { flex: 1; min-width: 0; }
.panel-card { padding: var(--space-24); background: var(--surface); border-radius: var(--rounded-lg); display: flex; flex-direction: column; gap: var(--space-16); }
.list { display: flex; flex-direction: column; gap: var(--space-8); }
.item { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-16); background: var(--panel); border-radius: var(--rounded-sm); }
.item.locked { opacity: 0.5; }
.item .grow { flex: 1; min-width: 0; }
.item b { color: var(--heading); }
.item small { display: block; margin-top: var(--space-4); color: var(--muted); font-size: var(--font-caption); line-height: 1.5; }
.me { color: var(--link); font-weight: 700; }
.bar, .gp-progress { height: 8px; overflow: hidden; background: var(--panel); border-radius: var(--rounded-pill); }
.bar > i, .gp-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--violet), var(--rose)); border-radius: var(--rounded-pill); }
.sk-meta { display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.loadout-banner { padding: var(--space-12); background: var(--panel); border-radius: var(--rounded-sm); }
.online-panel { padding: var(--space-16); background: var(--panel); border-radius: var(--rounded-lg); }
.online-actions, .setup-footer { display: flex; gap: var(--touch-gap); flex-wrap: wrap; }
.online-actions button, .setup-footer button { flex: 1; }
.setup-footer #btn-start { flex: 2; }
#join-code { width: 120px; text-align: center; text-transform: uppercase; letter-spacing: 3px; }
.code { display: inline-block; padding: var(--space-8) var(--space-16); background: var(--selected); border-radius: var(--rounded-sm); color: var(--heading); font-size: var(--font-title); font-weight: 800; letter-spacing: 6px; }
#menu { text-align: center; }
.salon-header { display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: center; column-gap: var(--space-16); row-gap: var(--space-4); padding: var(--space-16); text-align: left; background: var(--surface); border-radius: var(--rounded-lg); }
.salon-header .emblem { grid-row: 1 / 4; }
.salon-header .emblem svg { width: 80px; height: 64px; }
.emblem { filter: var(--filter-object); }
.salon-kicker, .rank-label { font-size: var(--font-caption); font-weight: 600; color: var(--muted); }
#menu h1 { margin: var(--space-0); font: 800 var(--font-title)/1.2 var(--serif); letter-spacing: -1px; color: var(--heading); }
#menu .sub { margin: var(--space-0); font-size: var(--font-label); color: var(--muted); }
.rank-plaque { display: flex; align-items: center; justify-content: center; gap: var(--space-12); padding: var(--space-12); border-radius: var(--rounded-lg); background: var(--surface); }
#menu-rank { margin: var(--space-0); }
.menu-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-12); text-align: left; }
.menu-actions h2 { grid-column: 1 / -1; margin: var(--space-8) var(--space-4) var(--space-0); font-size: var(--font-body-lg); color: var(--heading); }
#menu .mode-btn { display: grid; grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; column-gap: var(--space-16); row-gap: var(--space-4); padding: var(--space-16) var(--space-24); text-align: left; }
#menu .menu-actions #go-ai, .menu-profile .mode-btn { grid-column: 1 / -1; }
#menu .menu-actions .mode-btn:not(#go-ai):not([data-go="skills"]) { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: var(--space-8); padding: var(--space-16); border-radius: var(--rounded-lg); align-content: start; }
#menu .menu-actions .mode-btn:not(#go-ai):not([data-go="skills"]) .btn-icon { grid-row: auto; }
.btn-icon { width: 28px; height: 28px; grid-row: 1 / 3; }
.btn-text { font-size: var(--font-body-lg); font-weight: 700; }
.btn-sub { font-size: var(--font-caption); font-weight: 500; word-break: keep-all; }
#menu-note { text-align: left; }
#game { max-width: none; padding: var(--space-8); align-items: center; gap: var(--space-8); }
.game-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); align-self: stretch; }
#game-back { align-self: flex-start; border-radius: var(--rounded-sm); font-size: var(--font-label); z-index: 4; }
#hud { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: var(--space-8); width: 100%; max-width: 760px; padding: var(--space-12); background: var(--surface); border-radius: var(--rounded-lg); font-weight: 700; }
#hud .side { display: flex; gap: var(--space-8); align-items: center; min-width: 0; padding: var(--space-8); border-radius: var(--rounded-sm); }
#hud .side:last-child { justify-content: flex-end; }
#hud .side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud .turn { background: var(--selected); color: var(--selection-ink); }
#hud .dot { width: 14px; height: 14px; border-radius: var(--rounded-circle); flex: none; }
.dot-black { background: var(--stone-black-mid); border: 1px solid var(--stone-black-hi); }
.dot-white { background: var(--stone-white-mid); }
#hud-mid { max-width: min(220px,42vw); font-size: var(--font-caption); color: var(--muted); text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
#stage { position: relative; min-width: 0; max-width: 100%; overflow: hidden; border-radius: var(--rounded-lg); background: var(--bg-deep); box-shadow: var(--shadow-object); }
#stage canvas { max-width: 100%; }
canvas { display: block; touch-action: none; }
#stage:has(.render3d-canvas) > #board { position: absolute; inset: 0; opacity: 0; z-index: 1; }
#banner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; font: 800 var(--font-banner)/1.2 var(--serif); text-align: center; white-space: pre-line; color: var(--heading); opacity: 0; }
#banner.show { animation: bannerPop var(--duration-banner) var(--ease); }
@keyframes bannerPop { 0%,100% { opacity: 0; transform: scale(0.9); } 15%,75% { opacity: 1; transform: scale(1); } }
.bubble { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; padding: var(--space-8) var(--space-16); background: var(--surface); color: var(--text); border-radius: var(--rounded-pill); pointer-events: none; animation: bubbleFade var(--duration-bubble) var(--ease) forwards; }
@keyframes bubbleFade { 0%,80% { opacity: 1; } 100% { opacity: 0; } }
#caption { min-height: 1.5em; margin: var(--space-0); padding: var(--space-4) var(--space-12); max-width: 760px; text-align: center; color: var(--muted); font-size: var(--font-label); }
#skillbar, #emotes { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--touch-gap); max-width: 760px; }
#skillbar button, #emotes button { padding: var(--space-8) var(--space-12); font-size: var(--font-label); }
#skillbar button { border-radius: var(--rounded-sm); }
#result { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-16); background: var(--scrim); overflow-y: auto; z-index: 5; }
#result .card { position: relative; display: flex; flex-direction: column; gap: var(--space-16); width: min(420px,100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--space-32) var(--space-24); border-radius: var(--rounded-xl); background: var(--surface); text-align: center; animation: cardReveal var(--duration-reveal) var(--ease); }
@keyframes cardReveal { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
#result h2 { font: 800 var(--font-title)/1.3 var(--serif); }
.result-ornament { color: var(--muted); font-size: var(--font-caption); letter-spacing: 2px; }
#result-lines { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); background: var(--panel); border-radius: var(--rounded-sm); }
.result-actions { display: flex; gap: var(--touch-gap); }
.result-actions button { flex: 1; padding: var(--space-12); }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: var(--space-12) var(--space-24); background: var(--surface); color: var(--text); border-radius: var(--rounded-pill); text-align: center; z-index: 6; animation: toastIn var(--duration-state) var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%,8px); } to { opacity: 1; transform: translate(-50%,0); } }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  #hud, #toast, #result .card, .gp-test-head { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.gp-screen { gap: var(--space-24); }
#landing { position: relative; max-width: 1040px; }
.gp-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.gp-stones { display: flex; gap: var(--space-8); }
.gp-stone { display: block; width: 30px; height: 30px; border-radius: var(--rounded-circle); box-shadow: var(--shadow-object); }
.gp-stone.b { background: radial-gradient(circle at 35% 30%, var(--stone-black-hi), var(--stone-black-mid) 55%, var(--stone-black-lo)); }
.gp-stone.w { background: radial-gradient(circle at 35% 30%, var(--stone-white-hi), var(--stone-white-mid) 60%, var(--stone-white-lo)); }
.gp-kicker { margin: var(--space-0); font-size: var(--font-caption); font-weight: 700; color: var(--link); letter-spacing: 2px; }
.gp-title { margin: var(--space-0); font: 800 var(--font-hero)/1.2 var(--serif); letter-spacing: -1px; word-break: keep-all; color: var(--heading); }
.gp-sub { margin: var(--space-0); max-width: 60ch; font-size: var(--font-body); color: var(--muted); line-height: 1.6; word-break: keep-all; }
.gp-h2, .gp-h3 { font: 700 var(--font-subtitle)/1.3 var(--sans); margin: var(--space-0); color: var(--heading); }
.gp-note, .gp-date { font-size: var(--font-caption); color: var(--muted); }
.gp-warn { color: var(--rose-ink); }
.gp-msg:empty { display: none; }
.gp-link { align-self: center; padding: var(--space-8) var(--space-12); font-size: var(--font-label); color: var(--link); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.gp-cta { font-size: var(--font-body-lg); padding: var(--space-16) var(--space-24); }
.gp-badge { display: inline-block; padding: var(--space-4) var(--space-8); background: var(--panel); border-radius: var(--rounded-sm); color: var(--muted); font-size: var(--font-caption); font-weight: 600; }
.gp-eyebrow { margin: var(--space-0); font: 600 var(--font-eyebrow)/var(--leading-eyebrow) var(--sans); letter-spacing: var(--tracking-eyebrow); }
.gp-caption { margin: var(--space-0); color: var(--muted); font-size: var(--font-label); line-height: var(--leading-caption); }
.gp-section-head { display: flex; flex-direction: column; gap: var(--space-8); }
.gp-saved-type, .gp-preview { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8); }
.gp-saved-type b, .gp-preview b { font-size: var(--font-type); color: var(--link); font-weight: 800; letter-spacing: var(--tracking-type); }
.gp-saved-type h2, .gp-preview span { margin: var(--space-0); font: 700 var(--font-title-2)/var(--leading-title-2) var(--sans); }
.gp-tagline { margin: var(--space-0); color: var(--muted); font-size: var(--font-body); line-height: var(--leading-body); }
.gp-entry { display: flex; flex-direction: column; gap: var(--space-12); }
.gp-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28%; align-items: center; min-height: 220px; gap: var(--space-8); padding: var(--space-24) var(--space-32); overflow: hidden; border-radius: var(--rounded-lg); background: var(--surface); color: var(--text); text-align: left; text-decoration: none; }
.gp-feature-copy { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); min-width: 0; }
.gp-feature-title { font: 700 var(--font-title-2)/var(--leading-title-2) var(--sans); color: var(--heading); letter-spacing: var(--tracking-type); word-break: keep-all; }
.gp-feature-person { position: absolute; width: 34%; height: 100%; right: 0; bottom: -12px; object-fit: contain; object-position: center bottom; filter: var(--filter-object); pointer-events: none; }
.gp-feature-quick .gp-feature-person { width: 38%; }
.gp-saved .gp-feature-copy { gap: var(--space-4); }
.gp-feature .gp-eyebrow { color: var(--link); }
.gp-feature-job { margin: var(--space-0); font-size: var(--font-label); color: var(--muted); line-height: var(--leading-caption); }
.gp-feature-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.gp-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--touch-min); padding: var(--space-8) var(--space-16); border-radius: var(--rounded-pill); font-size: var(--font-label); font-weight: 700; line-height: var(--leading-caption); text-decoration: none; }
.gp-feature-cta, .gp-primary { background: var(--action); color: var(--on-action); }
.gp-feature-cta { margin-top: var(--space-8); }
.gp-entry-secondary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-12); }
.gp-entry-aux { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: var(--space-16); padding: var(--space-24); border-radius: var(--rounded-lg); background: var(--surface); color: var(--text); text-align: left; text-decoration: none; }
.gp-entry-icon { width: 32px; height: 32px; flex: none; color: var(--link); }
.gp-aux-copy { display: flex; flex-direction: column; gap: var(--space-8); }
.gp-entry-t { color: var(--heading); font: 700 var(--font-title-3)/var(--leading-title-3) var(--sans); }
.gp-entry-s { color: var(--muted); font-size: var(--font-label); font-weight: 400; line-height: var(--leading-caption); word-break: keep-all; }
.gp-chevron { font-size: var(--font-title-2); color: var(--muted); line-height: 1; }
.gp-types { display: flex; flex-direction: column; gap: var(--space-24); }
.gp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-12); }
.gp-type { --role-ink: var(--heading); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; overflow: hidden; padding: var(--space-0); border-radius: var(--rounded-lg); background: var(--panel); color: var(--text); text-decoration: none; }
.gp-type-art { display: block; position: relative; aspect-ratio: 1; }
.gp-type-art img { display: block; width: 100%; height: 100%; object-fit: contain; mask-image: linear-gradient(to bottom, black 86%, transparent); transition: transform var(--duration-state) var(--ease); }
.gp-type-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8) var(--space-16) var(--space-24); }
.gp-type-code { color: var(--role-ink); font: 800 var(--font-eyebrow)/var(--leading-eyebrow) var(--sans); letter-spacing: var(--tracking-type); }
.gp-type-name { font: 600 var(--font-body)/var(--leading-strong) var(--sans); word-break: keep-all; }
.gp-type-job { color: var(--muted); font: 400 var(--font-label)/var(--leading-caption) var(--sans); }
.gp-type-mine { margin-top: var(--space-4); color: var(--role-ink); font-size: var(--font-eyebrow); font-weight: 700; }
.gp-type.mine .gp-type-name { font-weight: 800; }
.gp-type:hover img { transform: scale(1.02); }
.gp-classic { padding-top: var(--space-8); }
.gp-classic-btn { width: 100%; display: grid; grid-template-columns: 80px minmax(0,1fr) auto; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-24); border-radius: var(--rounded-lg); background: var(--surface); text-align: left; }
.gp-classic-btn img { display: block; width: 80px; height: 80px; object-fit: contain; filter: var(--filter-object); }
.gp-classic-copy { display: flex; flex-direction: column; gap: var(--space-8); }
.gp-classic-t { color: var(--heading); font: 700 var(--font-title-3)/var(--leading-title-3) var(--sans); }
.gp-classic-s { color: var(--muted); font: 400 var(--font-label)/var(--leading-caption) var(--sans); }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .gp-feature, .gp-page-nav { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.gp-to-landing, .gp-back { align-self: flex-start; font-size: var(--font-label); border-radius: var(--rounded-sm); padding: var(--space-8) var(--space-12); }
.gp-test-head { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; background: var(--surface); border-radius: var(--rounded-lg); padding: var(--space-8); }
.gp-test-kind { color: var(--link); font-size: var(--font-label); font-weight: 600; }
.gp-count { margin-left: auto; font-size: var(--font-body-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-q { margin: var(--space-8) var(--space-0); min-height: 3em; font-size: var(--font-subtitle); font-weight: 700; line-height: 1.5; word-break: keep-all; text-wrap: balance; }
.gp-likert { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--touch-gap); }
.gp-lk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); min-width: var(--touch-min); padding: var(--space-16) var(--space-4); border-radius: var(--rounded-sm); background: var(--surface); }
.gp-lk b { font-size: var(--font-subtitle); }
.gp-lk span { font-size: var(--font-caption); line-height: 1.4; word-break: keep-all; text-align: center; }
.gp-lk.on { background: var(--selected); }
.gp-in-axis { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); background: var(--surface); border-radius: var(--rounded-lg); }
.gp-range { width: 100%; }
.gp-in-out { font-size: var(--font-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-footer button { flex: 1; }
.gp-footer .primary { flex: 2; }
.gp-card { position: relative; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--surface); border-radius: var(--rounded-lg); }
.gp-card-top { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.gp-card-stones { margin-left: auto; color: var(--muted); }
.gp-type-big { font-size: var(--font-type); font-weight: 800; line-height: var(--leading-display); letter-spacing: var(--tracking-type); color: var(--link); }
.gp-name { margin: var(--space-0); color: var(--heading); font: 800 var(--font-title)/1.3 var(--serif); }
.gp-gauges { display: flex; flex-direction: column; gap: var(--space-16); }
.gp-gauge { display: grid; grid-template-columns: 4.2em minmax(0,1fr) 4.2em; gap: var(--space-8); align-items: center; }
.gp-g-l, .gp-g-r { font-size: var(--font-caption); font-weight: 600; color: var(--muted); white-space: nowrap; }
.gp-g-l { text-align: right; }
.gp-g-l.on, .gp-g-r.on { color: var(--heading); font-weight: 800; }
.gp-g-bar { position: relative; height: 12px; border-radius: var(--rounded-pill); background: var(--panel); }
.gp-g-bar > i { position: absolute; top: 0; bottom: 0; background: var(--rose); border-radius: var(--rounded-pill); }
.gp-g-bar > i.to-r { left: 50%; }
.gp-g-bar > i.to-l { right: 50%; }
.gp-gauge.both .gp-g-bar > i { background: var(--muted); }
.gp-g-mid { position: absolute; left: calc(50% - 1px); top: -3px; bottom: -3px; width: 2px; background: var(--muted); }
.gp-g-meta { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-8); font-size: var(--font-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-both { padding: var(--space-0) var(--space-8); color: var(--heading); background: var(--selected); border-radius: var(--rounded-xs); font-weight: 700; }
.gp-gauges.mini .gp-g-bar { height: 8px; }
.gp-analyzed, .gp-matchup { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); background: var(--panel); border-radius: var(--rounded-sm); }
.gp-analyzed-t { margin: var(--space-0); font-size: var(--font-body); font-weight: 700; }
.gp-pc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-16); }
.gp-pc h3, .gp-effects h3, .gp-matchup h3 { margin: var(--space-0) var(--space-0) var(--space-8); font-size: var(--font-body); font-weight: 700; }
.gp-pros h3, .gp-match-item.good b { color: var(--teal-ink); }
.gp-cons h3, .gp-match-item.rival b { color: var(--rose-ink); }
.gp-pc ul, .gp-effects ul { margin: var(--space-0); padding-left: var(--space-24); font-size: var(--font-label); line-height: 1.6; }
.gp-effects ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: var(--space-8) var(--space-16); padding: var(--space-0); list-style: none; }
.gp-fx { display: flex; justify-content: space-between; gap: var(--space-8); }
.gp-fx b { font-variant-numeric: tabular-nums; }
.gp-fx.up b::after { content: " ↑"; color: var(--teal-ink); }
.gp-fx.down b::after { content: " ↓"; color: var(--rose-ink); }
.gp-quote { margin: var(--space-0); padding: var(--space-16); color: var(--link); background: var(--panel); border-radius: var(--rounded-sm); font-family: var(--serif); font-size: var(--font-body); word-break: keep-all; text-wrap: balance; }
.gp-desc { margin: var(--space-0); max-width: 64ch; font-size: var(--font-body); line-height: var(--leading-body); word-break: keep-all; }
.gp-matchup-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-8); }
.gp-match-item { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12); background: var(--surface); border-radius: var(--rounded-sm); }
.gp-match-label, .gp-match-why { color: var(--muted); font-size: var(--font-caption); }
.gp-match-why { margin: var(--space-4) var(--space-0) var(--space-0); line-height: 1.5; }
.gp-mastery { text-align: right; }
.gp-share { display: flex; gap: var(--touch-gap); }
.gp-share button { flex: 1; }
.gp-start .gp-cta { width: 100%; }
.gp-start select { flex: 1; min-width: var(--touch-min); }
.gp-stamp { display: inline-block; align-self: center; padding: var(--space-8) var(--space-16); border: 4px double var(--seal); color: var(--seal); font: 800 var(--font-title)/1.3 var(--serif); transform: rotate(-7deg); animation: stampIn var(--duration-reveal) var(--ease); }
.gp-stamp.out::before { content: "낙방"; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-7deg) scale(1.3); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
.gp-countdown { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: var(--scrim); pointer-events: none; }
.gp-cd-n { color: var(--heading); font-size: var(--font-countdown); font-weight: 800; animation: countIn var(--duration-count) var(--ease); }
@keyframes countIn { 0% { opacity: 0; transform: scale(1.2); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0.2; transform: scale(0.97); } }
.joseon-hero-media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--rounded-xl); background: radial-gradient(ellipse at 50% 70%,var(--surface-hi),var(--bg-deep)); }
.joseon-hero-media .hero-video { position: absolute; inset: 0; }
.joseon-hero-media picture { display: block; width: 100%; height: 100%; }
.joseon-hero-media img, .joseon-hero-media .hero-video { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; }
#landing:has(.joseon-hero-media) .gp-stones { display: none; }
#landing:has(.joseon-hero-media) .gp-kicker { position: absolute; top: 32px; left: 32px; right: 32px; color: var(--text); }
:is(#landing:has(.joseon-hero-media), .hub-hero) .gp-hero-lockup { position: absolute; top: 18px; left: 16px; right: 16px; z-index: 1; text-align: center; }
.gp-hero-lockup::before { content: ""; position: absolute; inset: -18px -12px -28px; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklab, var(--bg-deep) 62%, transparent), transparent); }
.gp-hero-eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin: var(--space-0) var(--space-0) var(--space-8); color: var(--gold-hi); font: 700 11px/1.3 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; text-shadow: 0 1px 6px var(--bg-deep); }
.gp-hero-eyebrow::before, .gp-hero-eyebrow::after { content: ""; flex: 0 0 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi)); }
.gp-hero-eyebrow::after { background: linear-gradient(90deg, var(--gold-hi), transparent); }
:is(#landing:has(.joseon-hero-media), .hub-hero) .gp-title { margin: var(--space-0); padding: var(--space-0); font-size: clamp(26px, 7.4vw, 32px); line-height: 1.14; color: var(--text); text-shadow: 0 2px 12px var(--bg-deep), 0 0 2px var(--bg-deep); }
.gp-title > span { display: block; }
.gp-title .gp-title-accent { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 6px var(--bg-deep)); }
.gp-card, #result .card { border: 4px double var(--ceremony-line); }
.gp-card::before, #result .card::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 12px;
  background: var(--ceremony-line);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Cpath d='M2 22V12c0-6 8-6 8-1s-6 4-6 0m6 4c6 2 11-5 7-9S6 4 10 10m7-4c4-6 16-5 17 4M10 2H2v8' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.joseon-guide { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16); background: var(--surface); border-radius: var(--rounded-lg); }
.joseon-guide img { width: 64px; height: 64px; flex: none; border-radius: var(--rounded-circle); background: var(--panel); object-fit: contain; filter: var(--filter-object); }
.joseon-guide p { margin: var(--space-0); font-size: var(--font-body); text-wrap: balance; }
@supports (corner-shape: squircle) { .panel-card, .gp-card, .gp-saved, #result .card { corner-shape: squircle; } }
@media (min-width: 641px) {
  .joseon-hero-media { aspect-ratio: 16 / 9; }
  :is(#landing:has(.joseon-hero-media), .hub-hero) .gp-hero-lockup { top: clamp(64px, 9.5vw, 124px); left: 53%; right: auto; width: 32%; transform: translateX(-50%); }
  :is(#landing:has(.joseon-hero-media), .hub-hero) .gp-title { font-size: clamp(20px, 2.35vw, 30px); }
  .gp-hero-eyebrow { font-size: clamp(9px, 0.95vw, 12px); letter-spacing: 0.22em; }
  .gp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-16); }
}
@media (max-width: 560px) {
  .screen { padding: var(--space-16) var(--space-16) var(--space-32); }
  .panel-card, .gp-card { padding: var(--space-16); }
  .row > .label { flex-basis: 100%; }
  .seg-group { flex-basis: 100%; border-radius: var(--rounded-lg); }
  .seg-group button { padding: var(--space-8) var(--space-4); }
  #hud { padding: var(--space-8); font-size: var(--font-label); }
  #hud .side { padding: var(--space-4); gap: var(--space-4); }

  .gp-gauge { grid-template-columns: 3.6em minmax(0,1fr) 3.6em; }
  .gp-pc, .gp-matchup-grid { grid-template-columns: minmax(0,1fr); }
  .gp-share { flex-wrap: wrap; }
  .gp-share button { flex-basis: 100%; }
  #landing:has(.joseon-hero-media) .gp-kicker { top: 20px; }
}

.gp-card-portrait { align-self: center; width: min(100%, 360px); aspect-ratio: 1; border-radius: var(--rounded-lg); background: var(--panel); overflow: hidden; }
.gp-card-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--filter-object); }
.gp-analyzed-portrait { width: 96px; height: 96px; object-fit: contain; border-radius: var(--rounded-lg); background: var(--panel); }
#hud-0 .hud-portrait, #hud-1 .hud-portrait { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: var(--rounded-circle); border: 2px solid var(--line); background: var(--surface); }
#hud .hud-portrait[data-mood="joy"] { border-color: var(--gold); }
#hud .hud-portrait[data-mood="oops"] { border-color: var(--rose); }
#hud .hud-portrait[data-mood="focus"] { border-color: var(--teal); }
#hud .hud-portrait[data-mood="sad"] { border-color: var(--muted); }
.gp-skip { position: absolute; top: 8px; left: 16px; z-index: 8; padding: var(--space-8) var(--space-16); background: var(--action); color: var(--on-action); border-radius: var(--rounded-sm); transform: translateY(-160%); }
.gp-skip:focus { transform: none; }
.gp-page-nav { position: sticky; top: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) max(var(--space-16), calc((100% - 1008px) / 2)); background: var(--surface); }
.gp-page-nav > a:first-child { font-size: var(--font-label); font-weight: 600; text-decoration: none; }
.gp-intro { width: min(100%,1040px); margin-inline: auto; padding: var(--space-24) var(--space-16) var(--space-64); display: flex; flex-direction: column; gap: var(--space-48); }
.gp-intro-hero { --role-ink: var(--ink); position: relative; display: grid; grid-template-columns: minmax(280px,420px) minmax(0,1fr); align-items: center; gap: var(--space-32); padding: var(--space-32); border-radius: var(--rounded-xl); background: var(--panel); isolation: isolate; overflow: hidden; color: var(--ink); }
.gp-intro-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.05; }
.gp-intro-art { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: var(--filter-object); }
.gp-intro-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); min-width: 0; }
.gp-intro-code { margin: var(--space-0); color: var(--role-ink); font: 800 var(--font-display)/var(--leading-display) var(--sans); letter-spacing: var(--tracking-type); }
.gp-intro h1 { margin: var(--space-0); color: var(--ink); font: 800 var(--font-title-1)/var(--leading-title-1) var(--serif); letter-spacing: var(--tracking-type); }
.gp-intro-tagline { margin: var(--space-0); color: var(--text); font-size: var(--font-tagline); line-height: var(--leading-body); }
.gp-intro .gp-section-head h2, .gp-intro section > h2 { color: var(--heading); font: 700 var(--font-title-2)/var(--leading-title-2) var(--sans); margin: var(--space-0) var(--space-0) var(--space-24); }
.gp-prose { width: min(100%,64ch); max-width: 64ch; margin-inline: auto; font: 400 var(--font-body)/var(--leading-body) var(--sans); }
.gp-prose p { margin: var(--space-0) var(--space-0) 0.9em; }
.gp-prose p:last-child { margin-bottom: var(--space-0); }
.gp-ceremony { position: relative; padding: var(--space-32); border: 4px double var(--ceremony-line); border-radius: var(--rounded-lg); background: var(--surface); }
.gp-intro-quote { margin: var(--space-0); font: 700 var(--font-title-3)/var(--leading-title-3) var(--serif); text-wrap: pretty; }
.gp-traits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-24); }
.gp-trait { padding: var(--space-24); border-radius: var(--rounded-lg); background: var(--surface); }
.gp-trait h2 { font: 700 var(--font-title-3)/var(--leading-title-3) var(--sans); margin: var(--space-0) var(--space-0) var(--space-16); }
.gp-trait ul { margin: var(--space-0); padding-left: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); font-size: var(--font-body); line-height: var(--leading-body); }
.gp-trait.good h2 { color: var(--teal-ink); }
.gp-trait.good li::marker { content: "○  "; color: var(--teal-ink); }
.gp-trait.rival h2 { color: var(--rose-ink); }
.gp-trait.rival li::marker { content: "◇  "; color: var(--rose-ink); }
.gp-related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-16); margin-bottom: var(--space-24); }
.gp-related { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16); color: var(--text); background: var(--surface); border-radius: var(--rounded-lg); text-decoration: none; }
.gp-related img { width: 96px; height: 96px; flex: none; object-fit: contain; }
.gp-related span { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.gp-related small { font-size: var(--font-label); color: var(--muted); }
.gp-related b { font-size: var(--font-body); }
.gp-test-cta { display: flex; align-items: center; gap: var(--space-24); padding: var(--space-24) var(--space-32); background: var(--surface); border-radius: var(--rounded-lg); }
.gp-test-cta img { width: 128px; height: 128px; flex: none; object-fit: contain; }
.gp-test-cta h2 { margin: var(--space-0) var(--space-0) var(--space-16); font: 700 var(--font-title-2)/var(--leading-title-2) var(--sans); }
.gp-intro-footer { display: flex; justify-content: center; padding: var(--space-16); }
.gp-intro-footer a { font-size: var(--font-label); }
@media (min-width: 1000px) { .gp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .gp-intro-hero { grid-template-columns: minmax(0,1fr); gap: var(--space-8); padding: var(--space-24); }
  .gp-intro-art { width: min(100%,360px); margin-inline: auto; }
  .gp-intro-code { font-size: var(--font-display-mobile); }
  .gp-intro { gap: var(--space-32); }
  .gp-traits, .gp-related-grid { grid-template-columns: minmax(0,1fr); }
  .gp-intro .gp-section-head h2, .gp-intro section > h2 { margin-bottom: var(--space-16); }
}
@media (max-width: 560px) {
  .gp-feature { min-height: 180px; padding: var(--space-16); grid-template-columns: minmax(0,1fr) 27%; }
  .gp-feature-title { font-size: var(--font-title-2); }
  .gp-feature-title > span { display: block; }
  .gp-feature-copy .gp-entry-s { max-width: none; }
  .gp-feature-person { width: 36%; right: -8px; object-fit: cover; }
  .gp-feature-quick .gp-feature-person { width: 40%; right: -12px; }
  .gp-feature-actions { flex-direction: row; align-items: center; gap: var(--space-8); }
  .gp-feature-actions .gp-link { align-self: center; padding-inline: var(--space-0); }
  .gp-saved-type { flex-direction: row; gap: var(--space-8); }
  .gp-saved-type b { font-size: var(--font-title-1); }
  .gp-saved-type h2 { font-size: var(--font-body); }
  .gp-entry-aux { grid-template-columns: minmax(0,1fr) auto; padding: var(--space-16); gap: var(--space-12); }
  .gp-entry-icon { grid-column: 1 / -1; }
  .gp-aux-copy { gap: var(--space-4); }
  .gp-entry-t { font-size: var(--font-body); }
  .gp-classic-btn { grid-template-columns: 64px minmax(0,1fr) auto; gap: var(--space-12); padding: var(--space-16); }
  .gp-classic-btn img { width: 64px; height: 64px; }
  #hud-0 .hud-portrait, #hud-1 .hud-portrait { width: 32px; height: 32px; }
  .gp-test-cta { gap: var(--space-12); padding: var(--space-16); }
  .gp-test-cta img { width: 80px; height: 80px; }
  .gp-test-cta h2 { font-size: var(--font-title-3); }
  .gp-page-nav .gp-pill { padding-inline: var(--space-12); }
}

[data-type="ESTJ"] { --role: var(--role-estj); }
[data-type="ESTP"] { --role: var(--role-estp); }
[data-type="ESFJ"] { --role: var(--role-esfj); }
[data-type="ESFP"] { --role: var(--role-esfp); }
[data-type="ENTJ"] { --role: var(--role-entj); }
[data-type="ENTP"] { --role: var(--role-entp); }
[data-type="ENFJ"] { --role: var(--role-enfj); }
[data-type="ENFP"] { --role: var(--role-enfp); }
[data-type="ISTJ"] { --role: var(--role-istj); }
[data-type="ISTP"] { --role: var(--role-istp); }
[data-type="ISFJ"] { --role: var(--role-isfj); }
[data-type="ISFP"] { --role: var(--role-isfp); }
[data-type="INTJ"] { --role: var(--role-intj); }
[data-type="INTP"] { --role: var(--role-intp); }
[data-type="INFJ"] { --role: var(--role-infj); }
[data-type="INFP"] { --role: var(--role-infp); }
@supports (color: color-mix(in oklab, black, white)) {
  .gp-type, .gp-intro-hero, .gp-card-portrait { background: color-mix(in oklab, var(--role) 14%, var(--paper)); }
  .gp-type, .gp-intro-hero { --role-ink: color-mix(in oklab, var(--role) 70%, var(--ink)); }
  .gp-type { color: var(--ink); }
  .gp-type-job { color: var(--paper-muted); }
}
@media (prefers-reduced-motion: reduce) {
  .joseon-hero-media .hero-video { display: none; }
  .gp-type:hover img { transform: none; }
  .screen, #result .card, #toast { animation-name: gentleFade; animation-duration: var(--duration-reduced); }
  button:active:not(:disabled), a:active { transform: none; }
  .gp-stamp, .gp-cd-n { animation-name: gentleFade; transform: none; }
  #banner.show { animation-name: bannerFade; }
  button, a { transition: none; }
  .seg-group::before { transition: none; }
}
@keyframes gentleFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bannerFade { 0%,100% { opacity: 0; } 15%,75% { opacity: 1; } }

/* 기풍 배경음악 켜기/끄기: 음악이 정해진 화면에서만 보인다(bgm.js가 hidden을 관리) */
.bgm-toggle { min-height: 44px; padding: 0 var(--space-16); border: 1px solid var(--line); border-radius: var(--rounded-pill); background: var(--surface); color: var(--text); font-size: var(--font-label); font-weight: 600; white-space: nowrap; }
.bgm-toggle[aria-pressed="false"] { color: var(--muted); }
.gp-test-head .bgm-toggle, .gp-page-nav .bgm-toggle { margin-left: auto; }

/* 히어로 분위기: 원본 그림 위에 느린 확대·등불 깜박임·금빛 궤적·꽃잎만 얹는다(영상 없이).
   위치는 그림 기준 % — 기본은 hero-tall(3:4), 641px부터 hero-wide(16:9). 그림과 효과는 .hero-stage 안에서 함께 확대된다. */
.hero-stage { position: absolute; inset: 0; transform-origin: 50% 65%; animation: hero-drift 30s ease-in-out infinite alternate; }
.hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.hero-fx .glow { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: var(--rounded-circle); background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 75%, transparent), transparent); mix-blend-mode: screen; opacity: .4; animation: hero-lantern var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
.hero-fx .g1 { --x: 2.5%; --y: 45.6%; --s: 14%; --t: 4.3s; }
.hero-fx .g2 { --x: 4%; --y: 33%; --s: 10%; --t: 3.7s; --d: -1.2s; }
.hero-fx .g3 { --x: 97%; --y: 45%; --s: 14%; --t: 4.9s; --d: -2.1s; }
.hero-fx .g4 { --x: 96%; --y: 33%; --s: 10%; --t: 3.4s; --d: -.6s; }
.hero-fx .g5 { --x: 40%; --y: 49%; --s: 6%; --t: 5.2s; --d: -3s; }
.hero-fx .g6 { --x: 45%; --y: 58%; --s: 5%; --t: 4.1s; --d: -1.7s; }
.hero-fx .g7 { --x: 55%; --y: 58%; --s: 5%; --t: 4.6s; --d: -2.6s; }
.hero-fx .ring { position: absolute; left: var(--rx, 50%); top: var(--ry, 86%); width: var(--rw, 66.7%); aspect-ratio: 1; transform: translate(-50%, -50%) scaleY(var(--rk, .275)); mix-blend-mode: screen; opacity: .9; }
.hero-fx .ring::before { content: ''; position: absolute; inset: 0; border-radius: var(--rounded-circle); background: conic-gradient(transparent 0 60%, color-mix(in oklab, var(--gold) 70%, white) 78%, color-mix(in oklab, var(--teal) 70%, transparent) 87%, transparent 95%); -webkit-mask: radial-gradient(closest-side, transparent 86%, black 91%, black 96%, transparent 100%); mask: radial-gradient(closest-side, transparent 86%, black 91%, black 96%, transparent 100%); animation: hero-ring 7s linear infinite; }
.hero-fx .petal { position: absolute; top: -6%; left: var(--px); width: clamp(10px, 1.5vw, 20px); aspect-ratio: 1.5; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, color-mix(in oklab, var(--rose) 30%, white), color-mix(in oklab, var(--rose) 70%, white)); opacity: .92; animation: hero-petal var(--pt) linear var(--pd) infinite; }
.hero-fx .petal:nth-of-type(3n) { opacity: .6; width: clamp(7px, 1vw, 13px); }
.hero-fx .petal:nth-of-type(1) { --px: 8%; --pt: 13s; --pd: -2s; --sway: 6cqw; }
.hero-fx .petal:nth-of-type(2) { --px: 18%; --pt: 16s; --pd: -9s; --sway: -4cqw; }
.hero-fx .petal:nth-of-type(3) { --px: 27%; --pt: 12s; --pd: -5s; --sway: 5cqw; }
.hero-fx .petal:nth-of-type(4) { --px: 36%; --pt: 15s; --pd: -12s; --sway: -6cqw; }
.hero-fx .petal:nth-of-type(5) { --px: 47%; --pt: 14s; --pd: -1s; --sway: 4cqw; }
.hero-fx .petal:nth-of-type(6) { --px: 55%; --pt: 17s; --pd: -7s; --sway: -5cqw; }
.hero-fx .petal:nth-of-type(7) { --px: 63%; --pt: 13s; --pd: -10s; --sway: 6cqw; }
.hero-fx .petal:nth-of-type(8) { --px: 72%; --pt: 15s; --pd: -3s; --sway: -4cqw; }
.hero-fx .petal:nth-of-type(9) { --px: 81%; --pt: 12s; --pd: -8s; --sway: 5cqw; }
.hero-fx .petal:nth-of-type(10) { --px: 90%; --pt: 16s; --pd: -13s; --sway: -6cqw; }
.hero-fx .petal:nth-of-type(11) { --px: 4%; --pt: 18s; --pd: -6s; --sway: 7cqw; }
.hero-fx .petal:nth-of-type(12) { --px: 95%; --pt: 14s; --pd: -11s; --sway: -7cqw; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes hero-lantern { 0%, 100% { opacity: .32; } 18% { opacity: .68; } 32% { opacity: .48; } 55% { opacity: .78; } 72% { opacity: .4; } }
@keyframes hero-ring { to { transform: rotate(1turn); } }
@keyframes hero-petal {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(var(--sway), 56cqh, 0) rotate(200deg); }
  100% { transform: translate3d(calc(var(--sway) * -.4), 114cqh, 0) rotate(400deg); }
}
@media (min-width: 641px) {
  .hero-fx .g1 { --x: 3%; --y: 42%; --s: 9%; }
  .hero-fx .g2 { --x: 9.8%; --y: 11.5%; --s: 6%; }
  .hero-fx .g3 { --x: 96.8%; --y: 41%; --s: 9%; }
  .hero-fx .g4 { --x: 89.8%; --y: 12%; --s: 6%; }
  .hero-fx .g5 { --x: 38%; --y: 58%; --s: 3.5%; }
  .hero-fx .g6 { --x: 58.5%; --y: 60%; --s: 3.5%; }
  .hero-fx .g7 { --x: 72%; --y: 40%; --s: 4%; }
  .hero-fx .ring { --rx: 50%; --ry: 81%; --rw: 48%; --rk: .23; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { animation: none; }
  .hero-fx { display: none; }
}

/* 사이트 기본 페이지와 게임 안내 공통 틀 */
.site-page { word-break: keep-all; }
.site-nav { flex-wrap: wrap; gap: var(--space-12) var(--space-16); }
.site-nav > a { text-decoration: none; }
.site-brand { display: inline-flex; align-items: center; margin-right: auto; flex-shrink: 0; }
.site-brand img { display: block; width: auto; height: 44px; }
.site-main { width: min(100%,1040px); margin-inline: auto; padding: var(--space-48) var(--space-24) var(--space-64); }
.site-main h1 { margin: var(--space-0) var(--space-0) var(--space-24); color: var(--heading); font: 800 var(--font-title-1)/var(--leading-title-1) var(--serif); }
.site-main h2 { margin: var(--space-32) var(--space-0) var(--space-16); color: var(--heading); font: 700 var(--font-title-2)/var(--leading-title-2) var(--sans); }
.site-main h3 { margin: var(--space-24) var(--space-0) var(--space-12); font: 700 var(--font-title-3)/var(--leading-title-3) var(--sans); }
.site-main ul, .site-main ol { padding-left: var(--space-24); margin-block: var(--space-16); }
.site-main li + li { margin-top: var(--space-12); }
.site-main a { text-underline-offset: 0.2em; }
.site-link-list a { display: inline-flex; align-items: center; padding-block: var(--space-8); min-height: var(--touch-min); }
.site-main code { overflow-wrap: anywhere; }
.site-main table { width: 100%; border-collapse: collapse; font-size: var(--font-body); }
.site-main th, .site-main td { padding: var(--space-12); border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.site-main th { color: var(--heading); background: var(--panel); }
.site-lead { color: var(--heading); font: 600 var(--font-body)/var(--leading-strong) var(--sans); }
.site-caption { color: var(--muted); font: 400 var(--font-caption)/var(--leading-caption) var(--sans); }
.site-footer { width: 100%; padding: var(--space-32) var(--space-16); border-top: 1px solid var(--line); color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-16); }
.site-footer a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: var(--space-8); font-size: var(--font-label); text-decoration: none; }
.site-footer p { margin: var(--space-16) var(--space-0) var(--space-0); text-align: center; font-size: var(--font-caption); }
.site-onboarding { padding: var(--space-24); border-radius: var(--rounded-lg); background: var(--surface); word-break: keep-all; }
.site-onboarding h2 { margin: var(--space-0) var(--space-0) var(--space-24); font: 700 var(--font-title-2)/var(--leading-title-2) var(--sans); }
.site-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-24); padding-left: var(--space-24); margin: var(--space-0) var(--space-0) var(--space-16); }
.site-steps li { padding-left: var(--space-4); }
.site-steps b, .site-steps span { display: block; }
.site-steps b { margin-bottom: var(--space-8); color: var(--heading); font-weight: 600; }
.site-steps span { font-size: var(--font-caption); line-height: var(--leading-caption); color: var(--muted); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-24); margin-block: var(--space-32); }
.contact-field { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-field label { color: var(--heading); font-weight: 600; }
.contact-field input, .contact-field textarea { width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--space-12) var(--space-16); border: 1px solid var(--muted); border-radius: var(--rounded-md); background: var(--surface); color: var(--text); font: inherit; }
.contact-field textarea { resize: vertical; }
.contact-field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.contact-consent { display: flex; align-items: flex-start; gap: var(--space-12); }
.contact-consent input { flex: none; align-self: flex-start; margin: var(--space-0); accent-color: var(--action); }
.contact-consent span { min-width: 0; }
.contact-honeypot { display: none; }
.contact-status { min-height: 1.75em; margin: var(--space-0); }
.contact-status[data-kind="error"] { color: var(--rose-ink); }
.contact-status[data-kind="success"] { color: var(--teal-ink); }
@media (max-width: 560px) {
  .site-main { padding: var(--space-32) var(--space-16) var(--space-48); }
  .site-nav .site-brand { flex-basis: calc(100% - 100px); }
  .site-nav > .gp-pill { margin-left: auto; }
  .site-steps { grid-template-columns: minmax(0,1fr); gap: var(--space-16); }
}

/* 사이트 페이지 톤 통일: 랜딩처럼 밤 궁궐 띠 위에 한지 카드를 얹는다(소개·문의·정책·안내·404·기풍 소개).
   색은 낮 테마 토큰만 쓴다 — 밤색 = heading(먹빛 남색)과 violet을 섞은 값. */
body.site-page {
  background-image: linear-gradient(180deg, var(--heading) 0, color-mix(in oklab, var(--heading) 80%, var(--violet)) 340px, transparent 340px),
    linear-gradient(var(--pattern) 1px, transparent 1px), linear-gradient(90deg, var(--pattern) 1px, transparent 1px);
  background-size: 100% 340px, 32px 32px, 32px 32px;
  background-repeat: no-repeat, repeat, repeat;
}
body.site-page .site-nav { background: color-mix(in oklab, var(--heading) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in oklab, var(--gold-hi) 22%, transparent); }
.site-brand img { width: auto; height: 44px; }
body.site-page .site-brand { color: var(--surface); font-weight: 700; }
.site-nav > a:not(.site-brand):not(.gp-pill) { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: var(--space-0) var(--space-12); border-radius: var(--rounded-pill); color: color-mix(in oklab, var(--surface) 86%, transparent); font: 600 15px/1 var(--sans); letter-spacing: 0.01em; }
.site-nav > a:not(.site-brand):not(.gp-pill):hover { color: var(--gold-hi); background: color-mix(in oklab, var(--surface) 10%, transparent); }
.site-nav > a[lang] { min-height: 32px; padding: var(--space-0) var(--space-12); border: 1px solid color-mix(in oklab, var(--surface) 32%, transparent); font-size: 13px; }
body.site-page .site-nav .gp-pill.gp-primary { background: var(--gold-hi); color: var(--heading); font-weight: 700; }
body.site-page .site-nav .bgm-toggle { border-color: color-mix(in oklab, var(--surface) 32%, transparent); background: transparent; color: var(--surface); }
.site-main article.gp-prose { box-sizing: border-box; width: min(100%, calc(64ch + 112px)); max-width: none; padding: clamp(28px, 5vw, 56px); border: 4px double var(--ceremony-line); border-radius: var(--rounded-xl); background: var(--surface); box-shadow: var(--shadow-object); }
.site-main article.gp-prose > * { max-width: 64ch; margin-inline: auto; }
.site-main .gp-eyebrow { color: var(--gold-lo); text-transform: uppercase; }
.site-main h1 { font-size: clamp(30px, 4.6vw, 40px); letter-spacing: -0.01em; }
.site-main h1::after { content: ''; display: block; width: 72px; margin-top: var(--space-16); border-top: 4px double var(--ceremony-line); }
.site-main h2 { padding-top: var(--space-24); border-top: 1px solid var(--line); font: 700 var(--font-title-3)/var(--leading-title-3) var(--serif); }
.site-main h1 + h2, .site-main .site-lead + h2, .site-main .site-caption + h2 { border-top: 0; padding-top: var(--space-0); }
.site-main h2::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: var(--space-0) var(--space-12) 0.18em var(--space-0); background: var(--gold); transform: rotate(45deg); vertical-align: middle; }
.site-main .site-lead { color: var(--violet); font-size: var(--font-tagline); }
.site-main li::marker { color: var(--gold); }
.site-main a:not(.gp-pill):not(.gp-type):not(.gp-related) { color: var(--violet); text-decoration-color: color-mix(in oklab, var(--gold) 60%, transparent); text-decoration-thickness: 2px; }
.site-main a:not(.gp-pill):not(.gp-type):not(.gp-related):hover { color: var(--rose-ink); }
.site-main code { padding: 0.1em 0.35em; border-radius: var(--rounded-xs); background: var(--panel); font-size: 0.92em; }
.site-art { display: block; width: 160px; height: 160px; margin: var(--space-0) auto var(--space-16); border-radius: var(--rounded-circle); background: var(--panel); object-fit: cover; }
.site-link-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-12); padding-left: var(--space-0); list-style: none; }
.site-link-list li + li { margin-top: var(--space-0); }
.site-link-list a { justify-content: center; width: 100%; border-radius: var(--rounded-lg); background: var(--panel); text-decoration: none; font-weight: 600; }
body.site-page .site-footer { margin-top: var(--space-48); border-top: 0; background: var(--heading); color: color-mix(in oklab, var(--surface) 70%, transparent); }
body.site-page .site-footer a { color: color-mix(in oklab, var(--surface) 88%, transparent); }
body.site-page .site-footer a:hover { color: var(--gold-hi); }
.site-nav .site-brand { order: 0; }
.site-nav > a:not(.site-brand):not(.gp-pill):not([lang]) { order: 1; }
.site-nav > a[lang] { order: 2; }
.site-nav .bgm-toggle { order: 3; }
.site-nav .gp-pill { order: 4; }
#app-nav > a:not(.gp-pill) { color: var(--text); }
#app-nav > a[lang] { border-color: var(--line); }
html[lang^="en"] .seg-group button { word-break: normal; overflow-wrap: normal; }
@media (max-width: 560px) {
  html[lang^="en"] #opt-level, html[lang^="en"] #opt-pers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: var(--rounded-lg); }
  html[lang^="en"] #opt-level::before, html[lang^="en"] #opt-pers::before { display: none; }
  html[lang^="en"] #opt-level button.on, html[lang^="en"] #opt-pers button.on { background: var(--surface); }
  html[lang^="en"] #hud { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[lang^="en"] #hud-0 { grid-column: 1; grid-row: 1; }
  html[lang^="en"] #hud-1 { grid-column: 2; grid-row: 1; }
  html[lang^="en"] #hud-mid { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}

/* 허브(/, /en/): 게임 고르기 + 내 기풍 + 16기풍. 히어로 제목 구성은 랜딩과 같은 규칙을 쓴다. */
.hub-main { display: grid; gap: var(--space-32); width: min(100%, 1040px); margin-inline: auto; padding: var(--space-16) var(--space-16) var(--space-48); box-sizing: border-box; }
.hub-hero { position: relative; }
.hub-sub { margin: calc(var(--space-16) * -1) auto var(--space-0); max-width: 60ch; text-align: center; color: var(--muted); }
.hub-game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-16); }
.hub-game { display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in oklab, var(--gold-hi) 26%, transparent); border-radius: var(--rounded-lg); background: var(--surface); color: var(--text); text-decoration: none; }
a.hub-game { transition: transform var(--duration-press) var(--ease), border-color var(--duration-press) var(--ease); }
a.hub-game:hover { transform: translateY(-2px); border-color: var(--gold-hi); }
a.hub-game:active { transform: scale(0.98); }
.hub-game-art { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; object-position: center; background: var(--bg-deep); }
.hub-game-body { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16) var(--space-24) var(--space-24); }
.hub-game-tag { color: var(--gold-hi); font: 700 12px/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }
.hub-game-name { font: 800 var(--font-title-2)/var(--leading-title-2) var(--serif); color: var(--text); }
.hub-game-desc { color: var(--muted); font-size: var(--font-label); line-height: var(--leading-caption); }
.hub-game-cta { align-self: flex-start; margin-top: var(--space-8); }
.hub-entry-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); margin: var(--space-0); }
#main .hub-hero .gp-title .gp-title-accent { margin-top: var(--space-8); font-size: 0.76em; line-height: 1.45; }
.hub-sub a { color: var(--gold-hi); text-underline-offset: 0.2em; }
.hub-sub-lead, .hub-sub-q { display: block; }
.hub-sub-lead { text-wrap: balance; }
.hub-sub-q { margin-top: var(--space-8); white-space: nowrap; }
@media (min-width: 641px) {
  #main .hub-hero .gp-hero-lockup { top: 8%; }
  #main .hub-hero .gp-title { font-size: clamp(20px, 2.2vw, 28px); }
}
@media (max-width: 640px) {
  .hub-hero { display: flex; flex-direction: column; gap: var(--space-16); }
  #main .hub-hero .gp-hero-lockup { position: relative; top: auto; left: auto; right: auto; order: -1; }
  #main .hub-hero .gp-hero-lockup::before { display: none; }
}
.hub-games .gp-section-head, .hub-main .gp-types .gp-section-head { margin-bottom: var(--space-16); }

/* 오목 (/omok): 알까기 HUD·판·결과 틀을 그대로 쓰고 준비 화면과 판 조작만 더한다 */
.omok-hero { display: grid; gap: var(--space-12); }
.omok-hero-art { width: 100%; height: auto; border-radius: var(--rounded-lg); box-shadow: var(--shadow-object); }
.omok-hero-copy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-0) var(--space-4); }
.omok-hero h1 { margin: var(--space-0); font: 800 var(--font-title)/1.2 var(--serif); letter-spacing: -1px; color: var(--heading); }
.omok-hero .sub, .omok-me-copy p { margin: var(--space-0); font-size: var(--font-label); color: var(--muted); }
.omok-me { flex-direction: row; align-items: center; }
.omok-me-art { width: 96px; height: 96px; flex: none; object-fit: cover; border-radius: var(--rounded-lg); background: var(--panel); }
.omok-me-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.omok-me-name { font-size: var(--font-body-lg); color: var(--heading); }
#omok-setup .panel-card h2 { margin: var(--space-0); font-size: var(--font-body-lg); color: var(--heading); }
#omok-setup select { flex: 1; min-width: var(--touch-min); }
.omok-links { text-align: center; }
.omok-page #stage { touch-action: manipulation; }
.omok-page #stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.omok-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: var(--space-8); width: min(100%, 520px); }
.omok-actions button { white-space: nowrap; }
/* 오목 결과: 끝난 수 → 이번 판 기풍 카드 → 전적, 버튼은 [다시 하기] 한 줄 + [공유하기·메뉴로] 반반 */
.omok-page #result-lines { gap: var(--space-12); }
.omok-page #result-lines p { margin: var(--space-0); }
.omok-result-sum { color: var(--muted); font-size: var(--font-label); }
.omok-style { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12); border-radius: var(--rounded-sm); background: var(--surface); color: inherit; text-align: left; text-decoration: none; }
.omok-style-art { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: var(--rounded-circle); border: 2px solid var(--gold); background: var(--panel); }
.omok-style-copy { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.omok-style-label { font-size: var(--font-caption); color: var(--muted); word-break: keep-all; }
.omok-style b { color: var(--heading); font-size: var(--font-body-lg); }
.omok-style-more { font-size: var(--font-caption); color: var(--gold-hi); }
.omok-page .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.omok-page .result-actions button { white-space: nowrap; }
.omok-page #result-again { grid-column: 1 / -1; }
.omok-page #hud-mid.omok-hurry { color: var(--rose); font-weight: 800; }
/* 온라인 버튼이 숨겨지면(서버 없는 배포) 둘이 하기를 한 줄 전체로 */
#menu .menu-actions:has(#go-online[hidden]) [data-kind="local"] { grid-column: 1 / -1; }