/* =====================================================================
   MIND LINKER — Components & Effect Recipes
   ===================================================================== */

/* ---------- EFFECT 1 · GLASSMORPHISM ---------- */
.ml-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2), inset 0 1px 0 oklch(100% 0 160 / .5);
}
.ml-glass--frost {
  background: linear-gradient(135deg, oklch(100% 0 160 / .6), oklch(100% 0 160 / .28));
}

/* ---------- EFFECT 2 · NEUMORPHISM ---------- */
.ml-neu {
  background: var(--neu-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--neu-out);
  border: 1px solid color-mix(in srgb, var(--neu-light) 40%, transparent);
}
.ml-neu--pressed { box-shadow: var(--neu-in); }
.ml-neu-chip {
  background: var(--neu-bg);
  border-radius: var(--r-pill);
  box-shadow: var(--neu-out);
  padding: 12px 22px; white-space: nowrap;
  font: var(--fw-strong) var(--fs-sm)/1 var(--font-body);
  color: var(--ink-2);
  border: none; cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.ml-neu-chip:active,
.ml-neu-chip[aria-pressed="true"] { box-shadow: var(--neu-in); color: var(--green-500); }

/* ---------- EFFECT 3 · METALLIC ---------- */
.ml-metal {
  background: var(--grad-metal);
  background-size: 200% 200%;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2), inset 0 1px 1px oklch(100% 0 160 / .7), inset 0 -2px 4px oklch(29.2% 0.052 174.7 / .22);
  color: oklch(29.6% 0.052 172.7);
  text-shadow: 0 1px 0 oklch(100% 0 160 / .5);
  animation: ml-sheen 7s ease-in-out infinite;
}
.ml-metal--cyan { background-image: var(--grad-metal-cyan); color: oklch(26.9% 0.049 232.2); }
@keyframes ml-sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- EFFECT 4 · 3D ---------- */
.ml-3d-orb {
  border-radius: 50%;
  background:
    radial-gradient(36% 32% at 32% 26%, oklch(100% 0 160) 0%, oklch(100% 0 160 / 0) 42%),
    var(--grad-radial);
  box-shadow:
    inset -10px -16px 30px oklch(29.2% 0.052 174.7 / .45),
    inset 8px 10px 22px oklch(100% 0 160 / .45),
    0 12px 22px oklch(41.9% 0.076 171.9 / .30),
    0 26px 50px oklch(46.8% 0.089 169.4 / .42),
    0 40px 80px oklch(55.3% 0.144 248.6 / .22);
}
.ml-3d-btn {
  position: relative; border: none; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-md);
  padding: 16px 30px;
  font: var(--fw-display) var(--fs-base)/1 var(--font-display);
  letter-spacing: -.01em;
  color: oklch(29.8% 0.055 171.9);
  background: var(--grad-signature);
  box-shadow:
    0 8px 0 oklch(46.8% 0.089 169.4),
    0 12px 18px oklch(41.9% 0.076 171.9 / .34),
    0 18px 30px oklch(55.3% 0.144 248.6 / .26),
    inset 0 2px 1px oklch(100% 0 160 / .6);
  transform: translateY(0);
  transition: transform .11s ease, box-shadow .11s ease;
}
.ml-3d-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 oklch(46.8% 0.089 169.4), 0 5px 10px oklch(41.9% 0.076 171.9 / .38), 0 8px 16px oklch(55.3% 0.144 248.6 / .22), inset 0 2px 1px oklch(100% 0 160 / .5);
}

/* ---------- EFFECT 5 · BLEND ---------- */
.ml-blendfield { position: relative; overflow: hidden; isolation: isolate; }
.ml-blob {
  position: absolute; border-radius: 50%;
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: .9;
  animation: ml-drift 16s ease-in-out infinite;
}
[data-theme="light"] .ml-blob, :root:not([data-theme="dark"]) .ml-blob { mix-blend-mode: multiply; opacity: .72; }
.ml-blob--a { background: var(--sig-a); }
.ml-blob--b { background: var(--sig-c); animation-delay: -5s; }
.ml-blob--c { background: var(--green-400); animation-delay: -9s; }
@keyframes ml-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(24px,-18px) scale(1.12); }
  66% { transform: translate(-18px,16px) scale(.92); }
}

/* ====================================================================
   CORE COMPONENTS
   ==================================================================== */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: var(--fw-strong) var(--fs-sm)/1 var(--font-body);
  padding: 14px 24px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--grad-signature); background-size: 160% 160%;
  color: oklch(29.8% 0.055 171.9); box-shadow: var(--sh-glow);
}
.btn--primary:hover { background-position: 100% 50%; box-shadow: var(--sh-glow), 0 0 0 4px oklch(64.7% 0.134 162.2 / .16); }
/* Compact record button — contained green→teal gradient that never reaches the
   blue signature stop, no oversized background or position-shift hover, so no
   cyan/blue ever bleeds onto the button edges. */
.btn--rec {
  background: linear-gradient(120deg, var(--sig-a) 0%, var(--sig-b) 58%, var(--teal-500) 100%);
  background-size: 100% 100%;
  color: oklch(29.8% 0.055 171.9);
  box-shadow: 0 3px 10px oklch(64.7% 0.134 162.2 / .30);
}
.btn--rec:hover { filter: brightness(1.05); box-shadow: 0 5px 16px oklch(64.7% 0.134 162.2 / .40); }
.btn--ghost {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink); border-color: var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--green-300); color: var(--green-600); }
.btn--lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 4px 12px oklch(90.3% 0.208 122.9 / .35), 0 10px 28px oklch(90.3% 0.208 122.9 / .42); }

/* Chips / Badges */
.chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 15px; border-radius: var(--r-pill);
  font: var(--fw-strong) var(--fs-cap)/1 var(--font-body);
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip--solid { background: var(--green-100); color: var(--green-700); border-color: transparent; }
.chip--grad { background: var(--grad-signature); color: oklch(29.8% 0.055 171.9); border: none; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-mono {
  font: var(--fw-mono) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--teal-600); padding: 6px 11px; border-radius: var(--r-xs);
  background: var(--teal-50); border: 1px solid color-mix(in srgb, var(--teal-300) 40%, transparent);
}

/* Card */
.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* Input */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font: var(--fw-mono) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.input {
  font: var(--fw-label) var(--fs-base)/1.3 var(--font-body);
  box-sizing: border-box; max-width: 100%;
  padding: 15px 18px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line);
  transition: border var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
  outline: none; border-color: var(--teal-400); background: var(--surface);
  box-shadow: 0 0 0 4px oklch(72.2% 0.119 187.2 / .16);
}

/* Tabs (segmented, glass) */
.seg {
  display: inline-flex; gap: 4px; padding: 5px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-stroke);
}
.seg__btn {
  border: none; cursor: pointer; background: transparent; white-space: nowrap;
  padding: 10px 20px; border-radius: var(--r-pill);
  font: var(--fw-strong) var(--fs-sm)/1 var(--font-body); color: var(--ink-2);
  transition: color var(--dur-base) var(--ease);
}
.seg__btn[aria-selected="true"] {
  background: var(--grad-signature); color: oklch(29.8% 0.055 171.9);
  box-shadow: 0 2px 6px oklch(56.3% 0.116 162.8 / .26), 0 6px 16px oklch(64.7% 0.134 162.2 / .32);
}

/* Mood selector */
.mood-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mood {
  --m: var(--green-400);
  width: 76px; height: 92px; border: none; cursor: pointer;
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1.5px solid var(--line);
  font: var(--fw-strong) var(--fs-cap)/1 var(--font-body);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), border var(--dur-base) var(--ease);
}
.mood__face {
  width: 38px; height: 38px; border-radius: 50%;
  background:
    radial-gradient(34% 30% at 32% 26%, oklch(100% 0 160 / .85) 0%, oklch(100% 0 160 / 0) 45%),
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--m) 70%, white), var(--m));
  box-shadow: inset -4px -6px 10px oklch(20% 0.04 200 / .28), 0 4px 10px color-mix(in oklch, var(--m) 38%, transparent), 0 8px 18px color-mix(in oklch, var(--m) 30%, transparent);
}
.mood[aria-pressed="true"] {
  transform: translateY(-4px) scale(1.03);
  border-color: transparent; color: var(--ink);
  box-shadow: 0 6px 16px color-mix(in oklch, var(--m) 34%, transparent), 0 16px 34px color-mix(in oklch, var(--m) 38%, transparent), 0 0 0 2px color-mix(in oklch, var(--m) 60%, transparent);
}

/* Progress / streak ring */
.ring { --p: 68; --c: var(--green-500); width: 116px; height: 116px; position: relative; }
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--line) 70%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), oklch(0% 0 0) calc(100% - 12px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 13px), oklch(0% 0 0) calc(100% - 12px));
}
.ring__val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

.bar { height: 12px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.bar__fill { height: 100%; border-radius: inherit; background: var(--grad-signature); box-shadow: 0 0 8px oklch(64.7% 0.134 162.2 / .45), 0 0 16px oklch(61.8% 0.122 232.1 / .35); }

/* ====================================================================
   STATES — focus · disabled · danger · error  (v1.1)
   화면별로 흩어져 있던 레시피를 코어로 승격. 규칙:
   disabled = 표면을 뉴트럴로 되돌리고 그림자 제거 (opacity로 흐리지 않음)
   ==================================================================== */

/* Focus — 키보드 포커스 링 (base.css 전역 규칙과 동일 레시피를 코어 컨트롤에 보장) */
:where(.btn, .chip, .seg__btn, .mood, .ml-neu-chip, .ml-3d-btn, .input, .theme-toggle):focus-visible {
  outline: 2px solid var(--teal-400); outline-offset: 2px;
}

/* Disabled */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-2); color: var(--ink-3);
  border-color: var(--line); box-shadow: none;
  cursor: not-allowed; transform: none;
}
.input:disabled { background: var(--bg-tint); color: var(--ink-3); border-color: var(--line-soft); cursor: not-allowed; }

/* Danger — 파괴적 동작 전용 코랄. 한 화면에 하나, 항상 탈출구(ghost 취소)와 함께 */
.btn--danger { background: var(--coral); color: oklch(99% 0.01 30); box-shadow: 0 3px 10px color-mix(in srgb, var(--coral) 30%, transparent); }
.btn--danger:hover:not(:disabled) { background: var(--coral-600); }
.btn--danger-ghost { background: transparent; color: var(--coral); border-color: var(--coral-line); }
.btn--danger-ghost:hover:not(:disabled) { background: var(--coral-soft); }

/* Field error — 다정한 경고: 색은 테두리·메시지에만, 배경은 흔들지 않음 */
.input--error { border-color: var(--coral); }
.input--error:focus { border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent); }
.field__msg { display: flex; align-items: center; gap: 7px; font: var(--fw-label) 12.5px/1.4 var(--font-body); color: var(--coral-ink); }
.field__msg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; }