/* 작가 버튼 셋 (되돌리기 · 저장 · 전체 지우기) 와 도입 화면 */

:root {
  --btn: 84px;
  --mbtn: 68px;
  --hud-top: calc(var(--st) + 18px);
}

/* ========== 공통 유리 ========== */
.dock::before,
.trash::before,
.mbtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 70%),
    rgba(34, 34, 44, 0.62);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: box-shadow 0.3s ease;
}

/* ========== 되돌리기 · 저장 묶음 ========== */
.dock {
  position: fixed;
  z-index: 3;
  top: var(--hud-top);
  right: calc(var(--sr) + 18px + var(--btn) + 18px);
  height: var(--btn);
  padding: 0;
  border-radius: calc(var(--btn) / 2);
  display: flex;
  align-items: center;
  isolation: isolate;
  touch-action: none;
}

body.side-left .dock {
  right: auto;
  left: calc(var(--sl) + 18px + var(--btn) + 18px);
}

/* 버튼 사이 가는 금 */
.dbtn + .dbtn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.dbtn {
  --c: #fff;
  position: relative;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: calc(var(--btn) / 2);
  background: transparent;
  color: var(--c);
  cursor: pointer;
  touch-action: none;
  outline: none;
  display: grid;
  place-items: center;
  transition: opacity 0.5s ease, transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.dbtn.undo { --c: var(--sky); }
.dbtn.redo { --c: var(--mint); }
.dbtn.share { --c: var(--lavender); }
.dbtn.save { --c: var(--lemon); }
.dbtn[hidden] { display: none; }

.dbtn.share.sending .icon {
  animation: sendOff 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
}

@keyframes sendOff {
  0% { transform: translate(-50%, -50%); }
  40% { transform: translate(10%, -110%) scale(0.8); opacity: 0; }
  41% { transform: translate(-110%, 10%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%, -50%); opacity: 1; }
}

/* 색 후광: 평소엔 은은하게, 누르면 밝게 */
.dbtn .halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  opacity: 0.18;
  filter: blur(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.dbtn .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  overflow: visible;
  fill: none;
  stroke: var(--c);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .dbtn .icon { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45)); }
}

.dbtn.save .sun {
  fill: var(--c);
  stroke: none;
}

.dbtn.save .spark {
  fill: #fff;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkleStar 2.6s ease-in-out infinite;
}

@keyframes twinkleStar {
  0%, 100% { transform: scale(0.75); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}

.dbtn.is-pressed {
  transform: scale(0.9);
}

.dbtn.is-pressed .halo {
  opacity: 0.6;
  transform: scale(1.3);
}

.dbtn.is-empty {
  opacity: 0.4;
}

.dbtn.is-empty .halo {
  opacity: 0;
}

.dbtn.pop {
  animation: pop 0.55s cubic-bezier(0.3, 1.7, 0.5, 1);
}

.dbtn.hint {
  animation: nudge 0.65s ease;
}

/* 누르고 있는 동안 연속 실행: 후광이 맥박처럼 */
.dbtn.repeating .halo {
  opacity: 0.6;
  animation: haloPulse 0.5s ease-in-out infinite;
}

@keyframes haloPulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.45); }
}

/* 저장 직후: 그림이 노랗게 차오름 */
.dbtn.save .pic {
  transition: fill 0.4s ease;
}

.dbtn.save.saved .pic {
  fill: rgba(255, 244, 163, 0.28);
}

.dbtn.save.saved .halo {
  opacity: 0.7;
  transform: scale(1.5);
}

.dbtn:focus-visible .halo {
  opacity: 0.6;
}

/* ========== 메뉴 버튼 (왼쪽 위) ========== */
.mbtn {
  position: fixed;
  z-index: 3;
  top: var(--hud-top);
  left: calc(var(--sl) + 18px);
  width: var(--mbtn);
  height: var(--mbtn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(245, 244, 250, 0.9);
  cursor: pointer;
  touch-action: none;
  outline: none;
  isolation: isolate;
  transition: opacity 0.4s ease, transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.mbtn[hidden] { display: none; }

body.side-left .mbtn {
  left: auto;
  right: calc(var(--sr) + 18px);
}

.mbtn .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
}

.mbtn.is-pressed { transform: scale(0.9); }
.mbtn:focus-visible::before { box-shadow: 0 0 0 3px rgba(201, 184, 255, 0.85); }

/* ========== 전체 지우기 ========== */
.trash {
  --p: 0;
  --c: var(--coral);
  position: fixed;
  z-index: 3;
  top: var(--hud-top);
  right: calc(var(--sr) + 18px);
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c);
  cursor: pointer;
  touch-action: none;
  outline: none;
  isolation: isolate;
  transition: opacity 0.6s ease, transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1);
}

body.side-left .trash {
  right: auto;
  left: calc(var(--sl) + 18px);
}

/* 무지개 후광 — 꾹 누를수록 밝아진다 */
.trash .aura {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rainbow));
  filter: blur(14px);
  opacity: calc(0.1 + var(--p) * 0.85);
  z-index: -1;
  animation: spin 7s linear infinite;
}

.trash .ring {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.trash .ring circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.trash .ring .track {
  stroke: rgba(255, 255, 255, 0.07);
}

.trash .ring .fill {
  stroke: url(#ringGrad);
  stroke-dasharray: 289.03;
  stroke-dashoffset: calc(289.03px * (1 - var(--p)));
  opacity: calc(var(--p) * 4);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}

.trash .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.trash .icon path {
  fill: none;
  stroke: var(--c);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 179, 167, 0.55));
  transition: stroke 0.2s;
}

/* 뚜껑: 꾹 누르는 만큼 열린다 */
.trash .lid {
  transform-box: view-box;
  transform-origin: 39px 14px;
  transform: translateY(calc(var(--p) * -2px)) rotate(calc(var(--p) * 30deg));
}

.trash.is-holding {
  transform: scale(0.93);
}

.trash.is-holding .icon path {
  stroke: #fff;
}

.trash.is-empty {
  opacity: 0.4;
}

.trash.pop {
  animation: pop 0.55s cubic-bezier(0.3, 1.7, 0.5, 1);
}

.trash.hint {
  animation: nudge 0.65s ease;
}

.trash.hint .lid {
  animation: lidpeek 0.65s ease;
}

.trash:focus-visible::before {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 3px rgba(201, 184, 255, 0.85);
}

@keyframes pop {
  0% { transform: scale(0.92); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes nudge {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.09); }
  60% { transform: scale(0.97); }
}

@keyframes lidpeek {
  0%, 100% { transform: none; }
  35% { transform: translateY(-2px) rotate(22deg); }
  70% { transform: rotate(6deg); }
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

/* 좁은 화면: 버튼을 조금 줄인다 */
@media (max-width: 640px) {
  :root { --btn: 60px; --mbtn: 54px; }
  .dock { right: calc(var(--sr) + 12px + var(--btn) + 12px); }
  body.side-left .dock { left: calc(var(--sl) + 12px + var(--btn) + 12px); }
  .trash { right: calc(var(--sr) + 12px); }
  body.side-left .trash { left: calc(var(--sl) + 12px); }
  .mbtn { left: calc(var(--sl) + 12px); }
  body.side-left .mbtn { right: calc(var(--sr) + 12px); }
  .dbtn .icon,
  .trash .icon { width: 36px; height: 36px; }
  .dbtn .halo { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .mbtn .icon { width: 28px; height: 28px; }
}

/* ========== 도입 화면 ========== */
.intro {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: #1b1b21;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  transition: opacity 0.6s ease;
}

.intro[hidden] { display: none; }
.intro.out { opacity: 0; }

/* 무대 조명: 가운데가 서서히 밝아진다 */
.intro-spot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 48%, rgba(201, 184, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 35% at 38% 55%, rgba(168, 240, 209, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 64% 42%, rgba(255, 179, 167, 0.12), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, #26262f, #16161b 100%);
  opacity: 0;
  transform: scale(1.15);
}

.intro.show .intro-spot {
  animation: spotIn 1.6s ease-out both;
}

@keyframes spotIn {
  to { opacity: 1; transform: none; }
}

.intro-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.intro-text {
  position: relative;
  text-align: center;
  padding: 0 24px;
}

/* 제목: 글자마다 떠오르고, 전체에 빛이 한 번 쓸고 지나간다.
   글자마다 같은 그라데이션을 제목 전체 폭 기준으로 이어 붙여(--ox, --tw) 한 줄로 흐르게 한다. */
.intro-title {
  position: relative;
  margin: 0;
  font-size: clamp(46px, 10.5vw, 136px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
  white-space: nowrap;
}

.intro-title span {
  --ox: 0px;
  --tw: 600px;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) scale(0.8) rotate(-6deg);
  color: transparent;
  background-image: linear-gradient(
    100deg,
    var(--lemon) 0%,
    var(--mint) 11%,
    var(--sky) 22%,
    var(--lavender) 33%,
    #fff 44%,
    #fff 50%,
    var(--lavender) 56%,
    var(--pink) 68%,
    var(--coral) 80%,
    var(--lemon) 100%
  );
  background-size: calc(var(--tw) * 3) 100%;
  background-position: calc(-1 * var(--ox) - var(--tw) * 2) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.3)) drop-shadow(0 6px 22px rgba(201, 184, 255, 0.35));
}

.intro.show .intro-title span {
  animation:
    letterIn 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.25) both,
    shine 2.1s ease-in-out both;
  animation-delay: calc(var(--i) * 0.1s + 0.7s), 1s;
}

@keyframes letterIn {
  0% { opacity: 0; transform: translateY(0.35em) scale(0.8) rotate(-6deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes shine {
  from { background-position: calc(-1 * var(--ox) - var(--tw) * 2) 0; }
  to { background-position: calc(-1 * var(--ox)) 0; }
}

.intro-en,
.intro-sub {
  margin: 0;
  opacity: 0;
  color: rgba(245, 244, 250, 0.72);
}

.intro-en {
  margin-top: 1.5em;
  font-size: clamp(13px, 2.1vw, 22px);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
}

.intro-sub {
  margin-top: 0.9em;
  font-size: clamp(14px, 2.1vw, 22px);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(245, 244, 250, 0.82);
}

.intro.show .intro-en {
  animation: fadeUp 0.9s ease 1.75s both;
}

.intro.show .intro-sub {
  animation: fadeUp 0.9s ease 2.05s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); letter-spacing: 0.6em; }
  to { opacity: 1; transform: none; }
}

.intro.breathe .intro-text {
  animation: breatheText 0.7s ease both;
}

@keyframes breatheText {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.intro.out .intro-text {
  transition: transform 0.65s ease, opacity 0.5s ease;
  transform: scale(1.1);
  opacity: 0;
}

/* 이어 그릴 때: 짧은 버전 */
.intro.quick.show .intro-title span {
  animation-delay: calc(var(--i) * 0.06s + 0.15s), 0.4s;
  animation-duration: 0.85s, 1.4s;
}
.intro.quick.show .intro-en { animation-delay: 0.7s; }
.intro.quick.show .intro-sub { animation-delay: 0.9s; }
.intro.quick.show .intro-spot { animation-duration: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .trash .aura,
  .dbtn.save .spark,
  .dbtn.repeating .halo { animation: none; }
  .intro.show .intro-title span { animation-duration: 0.5s; animation-delay: 0.3s; transform: none; }
  .intro.show .intro-en, .intro.show .intro-sub { animation-delay: 0.6s; }
}