:root {
  --purple: #6c5ce7;
  --purple-dark: #5541d7;
  --purple-pale: #f0edff;
  --pink: #fd79a8;
  --yellow: #fdcb6e;
  --mint: #55efc4;
  --blue: #74b9ff;
  --red: #e74c3c;
  --ink: #2d3436;
  --muted: #747b8a;
  --line: #e8e8f2;
  --surface: #ffffff;
  --background: #f7f7fc;
  --shadow: 0 18px 50px rgba(79, 66, 150, .13);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
input, select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--ink); padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108, 92, 231, .12); }
label { display: grid; gap: 7px; font-size: .86rem; font-weight: 700; color: #525866; }
.hidden { display: none !important; }

.button {
  border: 0; border-radius: 13px; padding: 12px 18px; font-weight: 800; color: var(--ink);
  background: #f0f1f5; transition: transform .15s, box-shadow .15s, background .15s;
}
.button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(45, 52, 54, .12); }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--purple), #8e7dff); box-shadow: 0 8px 20px rgba(108, 92, 231, .25); }
.button.secondary { color: var(--purple-dark); background: var(--purple-pale); }
.button.ghost { background: transparent; border: 1.5px solid var(--line); }
.button.danger { color: #fff; background: var(--red); }
.button.danger-outline { color: var(--red); background: #fff; border: 1.5px solid #ffc9c4; margin-top: 8px; }
.button.compact { padding: 8px 12px; border-radius: 9px; font-size: .82rem; }
.button.full { width: 100%; }
.text-button { border: 0; color: var(--muted); background: none; text-decoration: underline; text-underline-offset: 4px; margin: 15px auto 0; display: block; }
.icon-button { border: 0; background: #f3f3f8; width: 38px; height: 38px; border-radius: 11px; font-size: 1.2rem; display: grid; place-items: center; }
.eyebrow { margin: 0 0 6px; color: var(--purple); font-weight: 900; font-size: .77rem; letter-spacing: .11em; text-transform: uppercase; }

/* 첫 화면 */
.landing-page { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 18% 15%, #ece7ff 0, transparent 25%), radial-gradient(circle at 84% 80%, #ffe9f2 0, transparent 25%), #fafaff; }
.landing-shell { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 28px; padding: 40px 20px; position: relative; z-index: 1; }
.hero-card { width: min(520px, calc(100vw - 32px)); border: 1px solid rgba(255,255,255,.9); border-radius: 32px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); padding: 38px 46px 34px; backdrop-filter: blur(12px); }
.logo-mark { width: 76px; height: 76px; display: grid; place-items: center; margin: -7px auto 14px; border-radius: 24px; background: linear-gradient(145deg, #f3efff, #ffe9f1); transform: rotate(-5deg); box-shadow: 0 10px 24px rgba(108, 92, 231, .2); }
.logo-mark img { width: 66px; height: 66px; object-fit: cover; border-radius: 18px; transform: rotate(5deg); }
.hero-card > .eyebrow, .hero-card h1, .hero-copy { text-align: center; }
.hero-card h1 { font-size: clamp(2.35rem, 8vw, 3.65rem); line-height: .95; letter-spacing: -.07em; margin: 0; }
.hero-card h1 span { color: var(--purple); }
.hero-copy { color: var(--muted); margin: 18px 0 28px; }
.field-label { margin-bottom: 8px; }
.nickname-row { position: relative; }
.nickname-row input { font-size: 1rem; padding-right: 60px; }
.nickname-row span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #a2a5ae; font-size: .76rem; }
.field-help { margin: 7px 2px 17px; color: #9a9eaa; font-size: .74rem; }
.main-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(700px, calc(100vw - 32px)); }
.feature-strip div { text-align: center; padding: 15px; border-radius: 18px; background: rgba(255,255,255,.7); }
.feature-strip span { display: block; font-size: 1.35rem; }.feature-strip strong { display: block; font-size: .8rem; margin: 5px; }.feature-strip small { color: var(--muted); font-size: .68rem; }
.background-shapes span { position: fixed; border-radius: 38% 62% 54% 46%; opacity: .8; animation: float 8s ease-in-out infinite; }
.background-shapes span:nth-child(1) { width: 130px; height: 130px; top: 8%; left: 8%; background: #ffe28b; transform: rotate(20deg); }
.background-shapes span:nth-child(2) { width: 90px; height: 90px; right: 12%; top: 18%; background: #a5f3df; animation-delay: -2s; }
.background-shapes span:nth-child(3) { width: 160px; height: 100px; right: 5%; bottom: 10%; background: #d4cbff; animation-delay: -5s; }
@keyframes float { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -18px; rotate: 8deg; } }

/* 모달 */
.modal { width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 36px); border: 0; border-radius: 24px; padding: 26px; box-shadow: 0 24px 90px rgba(38, 32, 78, .35); overflow: auto; }
.modal::backdrop { background: rgba(31, 27, 52, .52); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.wide-modal { width: min(820px, calc(100vw - 28px)); }.small-modal { width: min(410px, calc(100vw - 28px)); }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.modal-heading h2 { margin: 0; font-size: 1.45rem; }.modal form { display: grid; gap: 16px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toggle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.toggle-list label { display: flex; align-items: center; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; font-size: .73rem; }
.toggle-list input, .check-inline input { width: auto; accent-color: var(--purple); }
.room-filters { display: grid; grid-template-columns: 1fr 150px auto auto; align-items: center; gap: 9px; margin-bottom: 16px; }
.check-inline { display: flex; align-items: center; white-space: nowrap; }
.room-list { display: grid; gap: 10px; max-height: 55vh; overflow: auto; }
.room-card { display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 15px; }
.room-card h3 { margin: 6px 0 4px; font-size: 1rem; }.room-card p { margin: 0; color: var(--muted); font-size: .77rem; }.room-card-side { display: flex; align-items: center; gap: 12px; }.room-card-side strong { font-size: .8rem; }
.status-pill { display: inline-block; border-radius: 100px; padding: 3px 7px; font-size: .65rem; font-weight: 800; color: #007958; background: #d7fff2; }.status-pill.playing { color: #a85e00; background: #fff0c7; }
.empty-state { display: grid; text-align: center; place-items: center; gap: 7px; padding: 50px 10px; color: var(--muted); }.empty-state span { font-size: 2.5rem; }.empty-state b { color: var(--ink); }
.code-input { text-transform: uppercase; text-align: center; letter-spacing: .3em; font-size: 1.5rem; font-weight: 900; }
.how-to-list { list-style: none; padding: 0; counter-reset: steps; display: grid; gap: 14px; }.how-to-list li { display: grid; grid-template-columns: 38px 1fr; gap: 3px 10px; }.how-to-list li::before { counter-increment: steps; content: counter(steps); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--purple); font-weight: 900; }.how-to-list span { color: var(--muted); font-size: .85rem; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; translate: -50% 20px; background: #27243a; color: #fff; border-radius: 12px; padding: 12px 18px; box-shadow: 0 10px 35px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: .2s; max-width: min(90vw, 500px); text-align: center; }.toast.show { opacity: 1; translate: -50% 0; }
.connection-status { text-align: center; color: #b0b2ba; font-size: .7rem; margin: 16px 0 -15px; }.connection-status.connected { color: #00a77c; }

/* 게임 방 */
.room-page { height: 100vh; overflow: hidden; display: grid; grid-template-rows: 62px 70px minmax(0, 1fr); background: #f1f1f8; }
.room-header { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr); align-items: center; padding: 0 18px; gap: 15px; background: #fff; border-bottom: 1px solid var(--line); }
.mini-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-size: 1.15rem; }.mini-logo img { width: 36px; height: 36px; object-fit: cover; border-radius: 10px; }.room-title-area { text-align: center; }.room-title-area h1 { font-size: .95rem; margin: 0 0 3px; }.code-badge { border: 0; background: none; color: var(--muted); font-size: .68rem; }.code-badge b { color: var(--purple); letter-spacing: .12em; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }.socket-dot { color: #bdc0c9; font-size: .7rem; }.socket-dot.connected { color: #00a77c; }
.game-status-bar { display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; text-align: center; background: linear-gradient(100deg, #5946d9, #7b68ee); color: #fff; padding: 8px 22px; box-shadow: 0 5px 16px rgba(80, 60, 180, .2); }
.game-status-bar small { display: block; color: rgba(255,255,255,.72); font-size: .68rem; }.game-status-bar strong { display: block; margin-top: 2px; }.hint-panel strong { font-size: 1.05rem; }.timer-wrap strong { font-size: 1.65rem; font-variant-numeric: tabular-nums; }.timer-wrap strong.urgent { color: #ffe66d; animation: pulse .55s infinite alternate; }
@keyframes pulse { to { transform: scale(1.22); } }
.game-layout { min-height: 0; display: grid; grid-template-columns: 245px minmax(350px, 1fr) 295px; gap: 12px; padding: 12px; }
.panel { min-height: 0; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 5px 18px rgba(40,38,70,.05); overflow: hidden; }
.panel-heading { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }.panel-heading h2 { margin: 0; font-size: .88rem; }.panel-heading h2 span { color: var(--purple); }
.players-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }.player-list { overflow-y: auto; padding: 8px; }.player-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto auto; align-items: center; gap: 8px; border-radius: 12px; padding: 9px 7px; }.player-item.me { background: var(--purple-pale); }.player-item.offline { opacity: .48; }.player-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f1f2f6; }.player-info { min-width: 0; }.player-info strong, .player-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.player-info strong { font-size: .8rem; }.player-info small { color: var(--muted); font-size: .6rem; margin-top: 2px; }.player-score { color: var(--purple); font-size: .72rem; white-space: nowrap; }.player-menu { border: 0; background: none; color: var(--muted); padding: 4px; }.lobby-actions { display: grid; gap: 7px; padding: 10px; border-top: 1px solid var(--line); }.ready { color: #007958 !important; background: #d7fff2 !important; }
.player-action-menu { position: fixed; z-index: 50; width: 180px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 14px 38px rgba(38, 32, 78, .22); animation: menu-in .14s ease-out; }
.player-action-menu strong { display: block; padding: 7px 9px 9px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-action-menu button { width: 100%; margin-top: 4px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; font-size: .76rem; font-weight: 700; }
.player-action-menu button:hover { background: var(--purple-pale); color: var(--purple-dark); }
.player-action-menu button.danger-item { color: var(--red); }
.player-action-menu button.danger-item:hover { background: #fff0ee; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.canvas-section { min-height: 0; min-width: 0; position: relative; display: grid; place-items: center; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
#drawingCanvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 8 / 5; background: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(40,38,70,.09); }
#drawingCanvas.drawable { cursor: crosshair; box-shadow: 0 0 0 3px rgba(108,92,231,.3), 0 5px 20px rgba(40,38,70,.09); }
.canvas-overlay { position: absolute; z-index: 2; inset: 0 0 78px; display: grid; place-content: center; text-align: center; pointer-events: none; border-radius: 16px; background: rgba(255,255,255,.94); }.canvas-overlay span { font-size: 3.3rem; }.canvas-overlay h2 { margin: 10px 0 5px; font-size: 1.1rem; }.canvas-overlay p { color: var(--muted); margin: 0; font-size: .8rem; }
.drawing-tools { width: 100%; min-height: 66px; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 15px; background: #fff; border: 1px solid var(--line); pointer-events: none; }.drawing-tools.drawer-active { display: flex; pointer-events: auto; }.tool-group, .color-tools, .quick-colors { display: flex; align-items: center; gap: 5px; }.tool-button { border: 0; border-radius: 9px; background: transparent; padding: 6px 7px; font-size: 1rem; }.tool-button span { display: block; color: var(--muted); font-size: .52rem; }.tool-button.active { background: var(--purple-pale); box-shadow: inset 0 0 0 1.5px var(--purple); }.color-tools { padding-left: 8px; border-left: 1px solid var(--line); }.color-tools input { width: 35px; height: 35px; padding: 3px; border-radius: 50%; }.quick-colors button { width: 20px; height: 20px; border: 2px solid #fff; outline: 1px solid #ddd; border-radius: 50%; background: var(--color); }.width-control { display: flex; grid-auto-flow: column; align-items: center; gap: 6px; font-size: .65rem; }.width-control input { width: 70px; padding: 0; box-shadow: none; }.width-control output { min-width: 18px; color: var(--purple); }.spectator-notice { position: absolute; bottom: 78px; left: 50%; translate: -50% 0; margin: 0; padding: 7px 13px; border-radius: 100px; color: #615b78; background: rgba(255,255,255,.9); font-size: .7rem; white-space: nowrap; }
.chat-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; }.online-badge { color: #00a77c; font-size: .6rem; font-weight: 900; }.chat-messages { overflow-y: auto; padding: 12px; }.chat-row { margin-bottom: 10px; font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }.chat-row b { color: var(--purple); margin-right: 6px; }.chat-row.system { text-align: center; }.chat-row.system span { display: inline-block; padding: 5px 9px; border-radius: 8px; background: #f4f4f8; color: var(--muted); font-size: .66rem; }.chat-form { display: grid; grid-template-columns: 1fr 42px; gap: 7px; padding: 10px 10px 5px; border-top: 1px solid var(--line); }.chat-form input { font-size: .78rem; padding: 9px 10px; }.send-button { border: 0; border-radius: 10px; color: #fff; background: var(--purple); }.chat-help { color: #9b9da6; font-size: .58rem; padding: 1px 12px 9px; }
.mobile-tabs { display: none; }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; } legend { padding: 0 6px; font-weight: 900; font-size: .83rem; }.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.segmented label input { display: none; }.segmented label span { display: block; text-align: center; padding: 8px 4px; border-radius: 9px; background: #f2f2f6; font-size: .68rem; }.segmented label input:checked + span { color: #fff; background: var(--purple); }
.result-modal { text-align: center; }.result-modal h2 { margin: 0 0 20px; }.podium { display: flex; justify-content: center; align-items: end; gap: 7px; margin: 10px 0 18px; }.podium-card { width: 30%; display: grid; gap: 5px; padding: 14px 5px; border-radius: 14px 14px 5px 5px; background: #f3f3f8; }.podium-card span { font-size: 1.7rem; }.podium-card b { overflow: hidden; text-overflow: ellipsis; }.podium-card strong { color: var(--purple); font-size: .8rem; }.podium-card.place-1 { min-height: 130px; background: #fff4cf; order: 2; }.podium-card.place-2 { order: 1; }.podium-card.place-3 { order: 3; background: #ffe8df; }.answerer-list { max-height: 150px; overflow: auto; margin: 15px 0; padding: 10px; border-radius: 12px; background: #f7f7fa; color: var(--muted); font-size: .8rem; }.answerer-list p { display: flex; justify-content: space-between; margin: 5px; }.answerer-list b { color: var(--purple); }
.full-ranking { margin-top: -8px; }.special-awards { color: #706b7d; font-size: .72rem; line-height: 1.6; }.result-actions { display: grid; gap: 7px; }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: 210px minmax(330px,1fr) 250px; gap: 8px; padding: 8px; }
  .quick-colors { display: none; }.mini-logo b { display: none; }
}

/* 태블릿은 참가자를 그림판 위에 두고, 그림판과 채팅을 나란히 유지한다. */
@media (min-width: 761px) and (max-width: 1024px), (min-width: 761px) and (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .room-page { height: 100dvh; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(210px, 32%) minmax(0, 1fr); gap: 8px; padding: 8px; }
  .players-panel { grid-column: 1; grid-row: 1; min-height: 210px; z-index: 1; }
  .player-list { display: grid; min-height: 80px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-content: start; gap: 2px; }
  .lobby-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canvas-section { grid-column: 1; grid-row: 2; }
  .chat-panel { grid-column: 2; grid-row: 1 / span 2; }
  .drawing-tools { flex-wrap: wrap; }
  .quick-colors { display: none; }
  .mobile-tabs { display: none; }
}

@media (max-width: 760px) {
  .hero-card { padding: 30px 22px; }.feature-strip small { display: none; }.background-shapes span { transform: scale(.6); }
  .room-filters { grid-template-columns: 1fr 1fr; }.room-card-side { flex-direction: column; gap: 5px; }.toggle-list { grid-template-columns: 1fr; }
  .room-page { height: 100dvh; grid-template-rows: 54px 58px minmax(0,1fr) 60px; }
  .room-header { grid-template-columns: auto 1fr auto; padding: 0 8px; gap: 6px; }.mini-logo { font-size: 1rem; }.room-title-area h1 { font-size: .76rem; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.header-actions .socket-dot, .header-actions .danger { display: none; }.header-actions { gap: 3px; }
  .game-status-bar { grid-template-columns: 65px 1fr 65px; padding: 5px 8px; }.game-status-bar small { font-size: .56rem; }.hint-panel strong { font-size: .73rem; }.timer-wrap strong { font-size: 1.25rem; }
  .game-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); padding: 7px; }
  .canvas-section { grid-column: 1; grid-row: 1; height: 100%; align-content: center; grid-template-rows: auto; }.canvas-overlay { inset: 0; }.canvas-overlay p { padding: 0 20px; }.canvas-section #drawingCanvas { max-height: calc(100dvh - 190px); }
  .mobile-tab-panel { display: none; }.mobile-tab-panel.active { display: grid; position: fixed; z-index: 8; left: 7px; right: 7px; bottom: 67px; top: 119px; box-shadow: 0 10px 40px rgba(40,38,70,.22); }
  .drawing-tools.mobile-tab-panel { display: none; }
  .drawing-tools.mobile-tab-panel.active { display: none; }
  .drawing-tools.mobile-tab-panel.active.drawer-active { display: flex; top: auto; flex-wrap: wrap; justify-content: center; padding: 12px; opacity: 1; pointer-events: auto; }
  .players-panel.mobile-tab-panel.active, .chat-panel.mobile-tab-panel.active { background: rgba(255,255,255,.98); }
  .mobile-tabs { display: grid; grid-template-columns: repeat(3,1fr); background: #fff; border-top: 1px solid var(--line); z-index: 10; }.mobile-tabs button { border: 0; background: #fff; color: var(--muted); font-size: 1.15rem; }.mobile-tabs button span { display: block; font-size: .58rem; margin-top: 2px; }.mobile-tabs button.active { color: var(--purple); background: var(--purple-pale); }
  .spectator-notice { bottom: 8px; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
  .form-grid { grid-template-columns: 1fr; }.segmented { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .landing-shell { padding: 20px 12px; }.hero-card { border-radius: 24px; }.main-actions { grid-template-columns: 1fr; }.feature-strip { gap: 5px; }.feature-strip div { padding: 10px 4px; }.modal { padding: 20px 16px; }.room-filters { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }