/* ── TypeForASMR · honey keyboard ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --u: 68px;                 /* 1 키 단위 크기 */
  --gap: 5px;
  --tilt: 44deg;
  --yaw: -5deg;
  --radius: 14px;
  --font: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* 테마 ─ k1 하이라이트 / k2 본체 / k3 그림자 / gl 광원 / bg 배경 */
body[data-theme="honey"] {
  --k1: 255,232,176; --k2: 245,168,45; --k3: 150,72,6;
  --gl: 255,158,42;  --bg1: #23100238; --bg0: #150900;
  --ink: 92,44,4;    --plate: 214,132,28;
}
body[data-theme="mint"] {
  --k1: 220,255,240; --k2: 76,222,182; --k3: 8,92,74;
  --gl: 78,236,192;  --bg1: #04211b38; --bg0: #02110d;
  --ink: 6,70,56;    --plate: 60,196,162;
}
body[data-theme="rose"] {
  --k1: 255,226,238; --k2: 255,140,178; --k3: 138,32,74;
  --gl: 255,124,168; --bg1: #24061238; --bg0: #150309;
  --ink: 110,20,58;  --plate: 226,120,158;
}
body[data-theme="ice"] {
  --k1: 226,244,255; --k2: 122,196,246; --k3: 22,74,128;
  --gl: 120,196,255; --bg1: #04162638; --bg0: #020b14;
  --ink: 18,62,104;  --plate: 118,180,226;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: rgba(255,255,255,.86);
  background: var(--bg0);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  transition: background .8s ease;
}

/* ── 배경 분위기 ─────────────────────────────────────────────── */
.ambience { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .38; transition: background .8s ease; }
.glow-a { width: 62vw; height: 62vw; left: -12vw; top: -18vw; background: rgba(var(--gl), .30); animation: float1 24s ease-in-out infinite; }
.glow-b { width: 52vw; height: 52vw; right: -14vw; top: 8vh;  background: rgba(var(--k2), .22); animation: float2 31s ease-in-out infinite; }
.glow-c { width: 78vw; height: 40vw; left: 12vw; bottom: -22vw; background: rgba(var(--gl), .22); animation: float1 38s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vw,3vh,0) scale(1.12); } }
@keyframes float2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-5vw,-4vh,0) scale(.94); } }

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 30%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.88) 100%);
}
.grain {
  position: absolute; inset: -60px;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 25% { transform: translate(-14px,9px); }
  50% { transform: translate(11px,-12px); } 75% { transform: translate(-8px,-6px); }
  100% { transform: translate(0,0); }
}

/* ── 헤더 ────────────────────────────────────────────────────── */
.topbar {
  position: relative; z-index: 3;
  padding: 26px 28px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgb(var(--gl));
  box-shadow: 0 0 14px 3px rgba(var(--gl), .8);
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.brand-name { font-weight: 600; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; }
.brand-sub { margin: 0; font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.42); letter-spacing: .02em; }

/* ── 무대 ────────────────────────────────────────────────────── */
.stage {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 16px 4px;
  perspective: 1500px;
  perspective-origin: 50% 28%;
}

.echo {
  height: 30px;
  font-size: 16px; font-weight: 300; letter-spacing: .28em;
  color: rgba(var(--k1), .82);
  white-space: nowrap; overflow: hidden;
  text-shadow: 0 0 22px rgba(var(--gl), .7);
  opacity: 0;
  transition: opacity .32s ease;
  max-width: min(92vw, 1000px);
  direction: rtl; text-align: center;
}
.echo.on { opacity: 1; }

.scene { transform-style: preserve-3d; }

.board {
  position: relative;
  width: calc(16 * var(--u) + 15 * var(--gap) + 34px);
  height: calc(5 * var(--u) + 4 * var(--gap) + 34px);
  padding: 17px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt)) rotateZ(var(--yaw));
  transition: transform .45s cubic-bezier(.22,.9,.3,1);
}

/* 아래로 번지는 꿀 웅덩이 */
.pool {
  position: absolute; inset: -14% -8% -26%;
  background: radial-gradient(58% 60% at 50% 52%, rgba(var(--k1), .40), rgba(var(--gl), .30) 42%, rgba(var(--gl), .08) 68%, transparent 82%);
  filter: blur(26px);
  transform: translateZ(-26px);
  transition: background .8s ease;
}

/* 키보드 판 */
.plate {
  position: absolute; inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(168deg, rgba(var(--k1), .26), rgba(var(--k2), .22) 46%, rgba(var(--k3), .62));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -14px 26px rgba(var(--k3), .5),
    inset 0 22px 34px rgba(var(--k1), .22),
    0 2px 0 rgba(var(--k3), .85),
    0 5px 0 rgba(var(--k3), .7),
    0 9px 0 rgba(var(--k3), .55),
    0 14px 0 rgba(var(--k3), .38),
    0 30px 44px rgba(0,0,0,.55),
    0 0 70px rgba(var(--gl), .30);
  transform: translateZ(-10px);
  transition: background .8s ease, box-shadow .8s ease;
}
.plate::after {
  content: ""; position: absolute; left: 6%; right: 34%; top: 3%; height: 24%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.34), transparent);
  filter: blur(9px);
}

.keys { position: absolute; inset: 17px; transform-style: preserve-3d; filter: saturate(1.1); }

/* ── 키 ──────────────────────────────────────────────────────── */
.key {
  position: absolute;
  height: var(--u);
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transform: translateZ(0);
  background:
    /* 위쪽 스펙큘러 — 젖은 표면의 반사 */
    radial-gradient(54% 33% at 32% 11%, rgba(255,255,255,.72), transparent 68%),
    /* 속에서 번지는 빛 — 젤리의 투과감 */
    radial-gradient(84% 66% at 50% 84%, rgba(var(--k1), .40), transparent 74%),
    linear-gradient(166deg,
      rgba(var(--k1), .70) 0%,
      rgba(var(--k2), .82) 30%,
      rgba(var(--k2), .74) 52%,
      rgba(var(--k3), .88) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.40),
    inset -1.5px 0 0 rgba(var(--k3), .40),
    inset 0 -12px 18px rgba(var(--k3), .62),
    inset 0 -2px 3px rgba(var(--k1), .42),
    inset 0 10px 16px rgba(var(--k1), .16),
    0 1px 0 rgba(var(--k3), .90),
    0 3px 0 rgba(var(--k3), .78),
    0 5px 0 rgba(var(--k3), .64),
    0 7px 0 rgba(var(--k3), .50),
    0 9px 0 rgba(var(--k3), .36),
    0 11px 0 rgba(var(--k3), .22),
    0 15px 18px rgba(0,0,0,.44),
    0 0 26px rgba(var(--gl), .20);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  will-change: transform, box-shadow, filter;
  transition:
    transform .07s cubic-bezier(.3,.9,.4,1),
    box-shadow .12s ease,
    filter .16s ease,
    background .8s ease;
}

/* 젤리 속 반짝임 */
.key::before {
  content: "";
  position: absolute; left: 12%; right: 30%; top: 8%; height: 34%;
  border-radius: 50% 50% 45% 55%;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.06));
  filter: blur(2.5px);
  pointer-events: none;
  opacity: .82;
}
/* 아래쪽 굴절 빛 */
.key::after {
  content: "";
  position: absolute; left: 16%; right: 16%; bottom: 9%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--k1), .55), transparent);
  filter: blur(4px);
  pointer-events: none;
}

.key .lg {
  position: relative; z-index: 2;
  font-size: 13px; font-weight: 500; line-height: 1;
  letter-spacing: .02em;
  color: rgba(var(--ink), .62);
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 8px rgba(255,255,255,.25);
  pointer-events: none;
  white-space: pre-line;
  transition: color .8s ease;
}
.key.sm .lg { font-size: 10px; font-weight: 400; letter-spacing: .05em; opacity: .82; }

/* 눌림 */
.key.down {
  transform: translateZ(-16px) translateY(3px) scale(.985);
  filter: brightness(1.34) saturate(1.18);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -5px 10px rgba(var(--k3), .34),
    inset 0 10px 16px rgba(var(--k1), .55),
    0 1px 0 rgba(var(--k3), .8),
    0 2px 0 rgba(var(--k3), .6),
    0 3px 0 rgba(var(--k3), .4),
    0 5px 10px rgba(0,0,0,.4),
    0 0 44px rgba(var(--gl), .75);
  transition: transform .035s ease-out, box-shadow .04s ease-out, filter .04s ease-out;
}

/* 눌릴 때 퍼지는 파문 */
.ripple {
  position: absolute; inset: -2px;
  border-radius: inherit;
  border: 1.5px solid rgba(var(--k1), .85);
  box-shadow: 0 0 26px rgba(var(--gl), .8), inset 0 0 20px rgba(var(--k1), .5);
  pointer-events: none;
  animation: ripple .62s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes ripple {
  0%   { transform: scale(.86); opacity: .95; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* 앞쪽 흘러내리는 꿀방울 */
.drips { position: absolute; left: 6%; right: 6%; bottom: -4px; height: 40px; transform: translateZ(-9px); }
.drip {
  position: absolute; top: 0;
  width: 13px; height: 15px;
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
  background: linear-gradient(180deg, rgba(var(--k2), .85), rgba(var(--k3), .7));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 14px rgba(0,0,0,.35);
  opacity: 0;
  transition: background .8s ease;
}
.drip.d1 { left: 18%; animation: drip 9s ease-in 1.2s infinite; }
.drip.d2 { left: 52%; animation: drip 11s ease-in 4.5s infinite; }
.drip.d3 { left: 79%; animation: drip 13s ease-in 7.8s infinite; }
@keyframes drip {
  0%   { opacity: 0; transform: translateY(0) scaleY(.5); }
  12%  { opacity: .9; transform: translateY(4px) scaleY(1); }
  26%  { opacity: .9; transform: translateY(10px) scaleY(1.5); }
  40%  { opacity: 0;  transform: translateY(34px) scaleY(2.1); }
  100% { opacity: 0;  transform: translateY(34px) scaleY(2.1); }
}

.hint {
  margin: 6px 0 0;
  font-size: 12px; font-weight: 300; letter-spacing: .06em;
  color: rgba(255,255,255,.30);
  transition: opacity .6s ease;
}
.hint.gone { opacity: 0; }

/* ── 컨트롤 패널 ─────────────────────────────────────────────── */
.panel {
  position: relative; z-index: 3;
  margin: 0 auto 6px;
  padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: min(94vw, 940px);
}
.row { display: flex; align-items: center; gap: 10px; }
.row-label { font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.38); text-transform: uppercase; }
.chips { display: flex; gap: 6px; }
.chip {
  font-family: inherit; font-size: 12px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  transition: all .22s ease;
}
.chip:hover { color: #fff; background: rgba(255,255,255,.1); }
.chip.is-on {
  color: #1a0d02;
  background: rgba(var(--k2), .92);
  border-color: rgba(var(--k1), .6);
  box-shadow: 0 0 18px rgba(var(--gl), .5);
}

.slider {
  -webkit-appearance: none; appearance: none;
  width: 118px; height: 3px; border-radius: 3px; cursor: pointer;
  background: rgba(255,255,255,.14);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: rgb(var(--k2)); box-shadow: 0 0 12px rgba(var(--gl), .8); cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 13px; height: 13px; border: none; border-radius: 50%;
  background: rgb(var(--k2)); box-shadow: 0 0 12px rgba(var(--gl), .8); cursor: pointer;
}
.val { font-size: 11px; color: rgba(255,255,255,.4); min-width: 30px; font-variant-numeric: tabular-nums; }

.row-toggles { gap: 16px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.55); cursor: pointer; }
.toggle input {
  appearance: none; -webkit-appearance: none;
  width: 30px; height: 17px; border-radius: 999px; cursor: pointer; position: relative;
  background: rgba(255,255,255,.13); transition: background .25s ease; margin: 0;
}
.toggle input::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.75); transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
.toggle input:checked { background: rgba(var(--k2), .85); }
.toggle input:checked::after { transform: translateX(13px); background: #fff; }

.foot {
  position: relative; z-index: 3;
  text-align: center; padding: 0 16px 18px;
  font-size: 10.5px; font-weight: 300; letter-spacing: .04em;
  color: rgba(255,255,255,.22);
}

/* ── 시작 게이트 ─────────────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(8,4,0,.72);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: opacity .6s ease, visibility .6s;
}
.gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-btn {
  position: relative; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 56px; border-radius: 26px;
  background: rgba(var(--k2), .07);
  border: 1px solid rgba(var(--k1), .22);
  color: #fff;
  transition: background .3s ease, transform .3s ease;
}
.gate-btn:hover { background: rgba(var(--k2), .14); transform: translateY(-2px); }
.gate-ring {
  position: absolute; inset: -1px; border-radius: 26px;
  border: 1px solid rgba(var(--gl), .5);
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .25; transform: scale(1); } 50% { opacity: .8; transform: scale(1.02); } }
.gate-text { font-size: 16px; font-weight: 500; letter-spacing: .1em; }
.gate-sub { font-size: 11.5px; font-weight: 300; color: rgba(255,255,255,.45); letter-spacing: .04em; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (max-width: 1320px) { :root { --u: 58px; --gap: 4px; } .key .lg { font-size: 11px; } .key.sm .lg { font-size: 9px; } }
@media (max-width: 1100px) { :root { --u: 48px; --gap: 4px; --radius: 9px; } .key .lg { font-size: 10px; } .key.sm .lg { font-size: 8px; } }
@media (max-width: 900px)  { :root { --u: 38px; --gap: 3px; --radius: 7px; } .key { padding: 0 6px 5px; } .key .lg { font-size: 8.5px; } .key.sm .lg { font-size: 7px; } }
@media (max-width: 640px)  {
  :root { --u: 25px; --gap: 2.5px; --radius: 6px; }
  .key { padding: 0 4px 3px; } .key .lg { font-size: 7px; } .key.sm .lg { font-size: 5.5px; letter-spacing: 0; }
  .topbar { padding: 18px 18px 0; }
  .panel { gap: 10px 16px; padding: 12px 14px; }
  .slider { width: 88px; }
  .echo { font-size: 13px; letter-spacing: .18em; }
}
@media (max-width: 420px) { :root { --u: 19px; --gap: 2px; --radius: 5px; } .key .lg { font-size: 5.5px; } .key.sm .lg { font-size: 4.5px; } }

@media (prefers-reduced-motion: reduce) {
  .glow, .grain, .drip, .brand-dot, .gate-ring { animation: none !important; }
  .ripple { animation-duration: .2s; }
}