/* ─────────────────────────────────────────────────────────────────────
   STIKU — Lumen Photo 디자인 시스템 위에 올린 제품 스킨

   타이포·간격·반경·모션 토큰은 시스템 것을 그대로 쓴다.
   덮어쓴 것은 둘이다.

   ① **본문 폰트** — Plus Jakarta Sans 에 한글이 없어서 Pretendard 로
      교체했다. 우리가 확정한 OFL 폰트다.
   ② **색** — 시스템의 보라 강조를 무채색으로 덮었다. 이 제품은 콘텐츠
      자체가 색이라 크롬이 채도를 쓰면 주목이 갈라진다. 근거와 되돌리는
      법은 아래 `:root` 의 「무채색 스킨」 주석에 있다.

   **라이트 스킨 하나만 쓴다.** 시스템은 두 스킨을 동등하게 제공하지만
   이 제품은 밝은 쪽으로 정했고, 다크 규칙은 죽은 코드라 지웠다.
   토큰은 `data-theme="light"` 로 라이트 값이 잡힌다(index.html).

   시스템 규칙 중 이 파일이 지키는 것:
   · 강조 그라디언트는 화면 영역당 정확히 하나에만 쓴다
   · 모든 탭 대상은 44px
   · 블러는 콘텐츠 위에 겹치는 크롬에만
   · 이모지·유니코드 문자는 아이콘으로 쓰지 않는다 (특수문자는 콘텐츠다)
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* 시스템의 --text-muted(alpha .42)는 밝은 배경에서 4.5:1 을 못 넘긴다.
     읽어야 하는 글자에는 이 값을 쓰고, 장식에만 muted 를 남긴다. */
  /* 시스템의 라이트 토큰은 밝은 배경에서 AA(4.5:1)를 못 넘긴다 —
     실측 muted .42 → 2.57:1, secondary .58 → 4.05:1.
     읽어야 하는 글자는 전부 아래 두 값을 쓴다. */
  --text-dim: rgb(var(--ink-rgb) / .70);   /* ≈ 6.0:1 on --light-canvas */
  --text-sub: rgb(var(--ink-rgb) / .78);   /* ≈ 6.4:1 */

  --font-ui: "Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif;
  --blur-glass: blur(14px);

  /* ── 톤의 두 축 ───────────────────────────────────────────────────
     화면 색은 **강조색 하나와 잉크색 하나**로 전부 파생된다.
     테두리·유리·체커보드는 전부 잉크의 투명도 단계일 뿐이고, 회색조차
     이 잉크에 물들어 있다 — 그래서 아래 두 줄만 바꾸면 톤이 통째로 바뀐다.
     (예전엔 rgba(42,24,66,…) 가 24곳에 흩어져 있어 보라를 못 빼냈다.) */
  --ink-rgb: 41 37 36;
  --accent-rgb: 28 25 23;

  /* ── 무채색 스킨 (디자인 시스템의 보라를 덮어쓴다) ────────────────
     시스템은 보라 강조에 보라가 섞인 회색을 쓴다. 이 제품에서는 그게
     틀린 선택이다 — **콘텐츠 자체가 색**이기 때문이다. 말풍선 팔레트 9종,
     스티커, 사용자 사진이 전부 채도를 갖고 있어서, UI 까지 채도를 쓰면
     주목이 갈라지고 위계가 무너진다. 그래서 크롬은 무채색으로 물러나고
     화면에서 채도를 갖는 건 사용자가 만든 것뿐이다.

     시스템 토큰을 고치지 않고 여기서만 덮는다 — 디자인 시스템은 다른
     제품도 쓰는 공용물이다. 바꾸는 건 `--light-*` 원시값과 강조 3종뿐이고,
     시맨틱 별칭(`--surface-*`·`--text-*`)은 시스템 것을 그대로 탄다. */
  --light-canvas: #FCFBF8;
  --light-bezel:  #F5F3EE;
  --light-tile:   #F2F0EA;
  --light-panel:  rgba(255, 255, 255, .92);
  --light-bar:    #FFFFFF;
  --light-ink:     #1C1917;
  --light-ink-alt: #262220;
  --light-ink-sub:  rgb(var(--ink-rgb) / .58);
  --light-ink-mute: rgb(var(--ink-rgb) / .42);
  --light-hairline: rgb(var(--ink-rgb) / .07);
  --light-stroke:   rgb(var(--ink-rgb) / .12);
  --light-glass:    rgb(var(--ink-rgb) / .05);

  --accent-solid: #1C1917;
  --accent-gradient: linear-gradient(100deg, #211D1A, #3B3531);
  --accent-glow: rgb(0 0 0 / .55);

  /* ── 강조의 두 단계 ───────────────────────────────────────────────
     `--accent-gradient` 는 화면당 하나(주 동작)만 쓴다. 켜짐/선택은
     아래 옅은 단계로 표현한다. 둘을 섞으면 우선순위가 사라진다. */
  --accent-tint: rgb(var(--accent-rgb) / .13);
  --accent-edge: rgb(var(--accent-rgb) / .30);

  /* ── 간격 체계 ────────────────────────────────────────────────────
     경쟁사 실측(390px): 좌우 여백 16px · 그리드 3열 gap 12px · 셀 111px.
     우리는 22px 을 쓰고 있었고 그만큼 셀이 작았다. 16px 으로 맞춘다. */
  --gutter: 16px;         /* 화면 좌우 여백 */
  --stack-1: 8px;         /* 붙은 요소 */
  --stack-2: 12px;        /* 같은 묶음 */
  --stack-3: 18px;        /* 다른 묶음 */
  --stack-4: 26px;        /* 구획 */

  /* ── 한글 트래킹 ──────────────────────────────────────────────────
     Pretendard 는 라틴 기준으로 짜여 있어 한글이 성기게 보인다.
     경쟁사도 본문 전반에 -0.02em 을 건다. 여기서 한 번 걸고,
     디자인 시스템이 값을 지정한 자리만 그 값이 이긴다. */
  --track-ko: -.02em;

  /* ── 타이포 스케일 ────────────────────────────────────────────────
     디자인 시스템은 라틴 기준(Plus Jakarta Sans)이라 한글에서 한 단계씩
     작게 보인다. 경쟁사 실측(칩 13px/500)에 맞춰 UI 텍스트만 올린다.
     제목 계열은 시스템 값을 그대로 쓴다. */
  --ui-chip:    500 13px/1 var(--font-ui);
  --ui-label:   600 14px/1 var(--font-ui);      /* 버튼 */
  --ui-body:    500 15px/1.6 var(--font-ui);
  --ui-meta:    500 12.5px/1 var(--font-ui);    /* 보조 수치 */
  --ui-micro:   500 11px/1 var(--font-ui);      /* 아이콘 라벨 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── 포커스 ───────────────────────────────────────────────────────────
   키보드로만 쓰는 사람에게는 이게 유일한 위치 표시다. 없으면 어디에 있는지
   알 수 없다. 마우스 클릭에는 뜨지 않도록 :focus-visible 만 쓴다. */
:focus-visible {
  outline: 3px solid var(--accent-solid);
  outline-offset: 2px;
  border-radius: 6px;
}
.tabbar button:focus-visible,
.seg button:focus-visible { outline-offset: -3px; }

/* 화면에는 안 보이지만 스크린리더는 읽는다 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 모션을 줄여달라는 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  letter-spacing: var(--track-ko);
}

#shell {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  background: var(--surface-canvas);
  display: flex; flex-direction: column;
}
#shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 55% at 50% 0%, rgb(var(--ink-rgb) / .04), transparent 68%);
}
#shell > * { position: relative; z-index: 1; }

/* ── 헤더 ─────────────────────────────────────────────────────────── */
.head {
  flex: none; padding: var(--stack-3) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.head h1 {
  margin: 0; font: var(--type-h1); letter-spacing: var(--type-h1-tracking);
}
.head .meta { font: var(--ui-meta); color: var(--text-dim); }
.head-actions { display: flex; gap: 2px; }
.icon-btn { position: relative; }

/* ── 버튼 공통 ────────────────────────────────────────────────────── */
.icon-btn {
  /* 탭 영역은 44 를 지키되 보이는 원은 36 이다 — 헤더에서 덩어리로 보이지 않게. */
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; background: none; border-radius: 50%;
  color: var(--text-primary);
  transition: background var(--dur-state) var(--ease-standard),
              transform var(--dur-tap) var(--ease-standard);
}
.icon-btn::before {
  content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%;
  background: var(--light-glass); border: 1px solid var(--border-stroke);
  transition: background var(--dur-state) var(--ease-standard);
}
.icon-btn > * { position: relative; }
.icon-btn:hover::before { background: rgb(var(--ink-rgb) / .09); }
.icon-btn:active { transform: scale(.96); }

.btn {
  height: 52px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  font: var(--ui-label); letter-spacing: var(--track-ko);
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px;
  place-content: center; padding: 0 22px;
  transition: filter var(--dur-state) var(--ease-standard),
              transform var(--dur-tap) var(--ease-standard);
}
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .38; pointer-events: none; }
.btn-primary {
  flex: 1; background: var(--accent-gradient); color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-ghost {
  width: 52px; padding: 0; background: var(--light-glass);
  border: 1px solid var(--border-stroke); color: var(--text-primary);
}

/* ── 스크롤 영역 ──────────────────────────────────────────────────── */
.scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.row-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.row-scroll::-webkit-scrollbar { display: none; }

/* ── 섹션 헤더 ────────────────────────────────────────────────────── */
.section {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--gutter); margin: var(--stack-4) 0 var(--stack-2);
}
.section h2 { margin: 0; font: var(--type-h3); letter-spacing: var(--type-h3-tracking); }
/* `.aside` 는 헤더에도 섹션에도 쓰이고 둘 다 실제 탭 대상이다.
   글자 높이(11.5px)만으로는 못 누르므로 어디에 있든 44px 을 보장한다. */
.aside {
  font: var(--ui-meta); color: var(--text-dim);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 10px; margin: 0 -10px; border: 0; background: none; cursor: pointer;
  white-space: nowrap;
}
.aside:active { transform: scale(.96); }
.aside[disabled] { opacity: .35; pointer-events: none; }
.section .aside { margin: -12px -10px; }
/* `.aside` 는 탭 영역을 넓히려고 좌우로 -10px 씩 당겨 놨다. 두 개를 나란히
   두면 그만큼 서로 파고들어 글자가 붙어 보인다 — 그 몫을 되돌려 준다. */
.section .aside + .aside { margin-left: 10px; }
.hint {
  padding: 0 var(--gutter); font: var(--type-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
}

/* ── 캔버스 ───────────────────────────────────────────────────────── */
.canvas-wrap {
  /* 캔버스가 남는 세로 공간을 가져간다 — 에디터의 본체이므로 */
  flex: 1 1 auto; margin: var(--stack-3) var(--gutter) 0; border-radius: var(--radius-card);
  background: var(--surface-tile); border: 1px solid var(--border-hairline);
  position: relative; overflow: hidden;
  display: grid; place-items: center; min-height: 220px; padding: 18px;
}
.canvas-wrap::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    linear-gradient(45deg, rgb(var(--ink-rgb) / .055) 25%, transparent 25% 75%, rgb(var(--ink-rgb) / .055) 75%),
    linear-gradient(45deg, rgb(var(--ink-rgb) / .055) 25%, transparent 25% 75%, rgb(var(--ink-rgb) / .055) 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
#stage { position: relative; max-width: 100%; max-height: 100%; }
#stage canvas { display: block; }

/* 움짤 미리보기 — 시스템의 모션 규칙(짧고 절제)에 맞춘다 */
#stage[data-motion="pop"]   { animation: mo-pop 1.1s var(--ease-standard) infinite; }
#stage[data-motion="shake"] { animation: mo-shake .7s ease-in-out infinite; }
#stage[data-motion="float"] { animation: mo-float 2.2s ease-in-out infinite; }
#stage[data-motion="blink"] { animation: mo-blink 1.4s steps(1) infinite; }
@keyframes mo-pop   { 0%,70%,100%{transform:scale(1)} 80%{transform:scale(1.07)} 90%{transform:scale(.97)} }
@keyframes mo-shake { 0%,100%{transform:rotate(-2.2deg)} 50%{transform:rotate(2.2deg)} }
@keyframes mo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes mo-blink { 0%,60%{opacity:1} 61%,80%{opacity:.25} 81%{opacity:1} }

/* 사진 올리기 자리 */
button.canvas-wrap.drop {
  cursor: pointer; border-style: dashed; border-color: var(--border-stroke);
  font: inherit; color: inherit; text-align: center; width: auto;
}
.canvas-wrap.drop:hover { background: var(--light-glass); }
.drop-inner {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  color: var(--text-dim); position: relative;
}
.drop-inner b { font: var(--type-h3); letter-spacing: -.02em; color: var(--text-primary); }
.drop-inner small { font: var(--type-label-sm); color: var(--text-dim); }
.canvas-wrap.photo::before { display: none; }
.canvas-wrap.photo { background: var(--light-tile); }
#deco-stage canvas { border-radius: var(--radius-thumb); }

/* 내 스티커 만들기 — 스꾸의 업로드 버튼 자리 */
.fab {
  position: absolute; right: var(--gutter); bottom: 96px; z-index: 20;
  height: 46px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px;
  font: var(--type-label); letter-spacing: var(--track-ko); cursor: pointer;
  background: var(--accent-gradient); color: #fff; box-shadow: var(--shadow-cta);
  transition: transform var(--dur-tap) var(--ease-standard);
}
.fab:active { transform: scale(.96); }

/* ── 입력 ─────────────────────────────────────────────────────────── */
.field {
  flex: none; margin: var(--stack-2) var(--gutter) 0; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid rgb(var(--ink-rgb) / .09);
  box-shadow: 0 10px 24px -18px rgba(60,30,100,.8);
}
.field input, .field textarea {
  flex: 1; min-width: 0; border: 0; background: transparent; resize: none;
  color: var(--text-primary); font: var(--ui-body); letter-spacing: var(--track-ko);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field .count {
  font: var(--ui-meta); color: var(--text-dim);
  font-variant-numeric: tabular-nums; flex: none;
}

/* ── 세그먼트 ─────────────────────────────────────────────────────── */
.seg {
  flex: none; margin: var(--stack-2) var(--gutter) 0; padding: 5px; display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  border-radius: var(--radius-pill);
  background: var(--light-glass); border: 1px solid rgb(var(--ink-rgb) / .1);
}
.seg button {
  height: 44px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  font: var(--ui-label); letter-spacing: var(--track-ko); background: transparent;
  color: var(--text-dim); display: grid; place-items: center;
  transition: background var(--dur-state) var(--ease-standard);
}
/* 켜진 칸은 단색으로 채운다. 그라디언트와 글로우까지 얹으면 주 동작
   버튼과 무게가 같아져서, 어느 쪽을 눌러야 하는지가 흐려진다. */
.seg button[aria-selected="true"],
.seg button[aria-pressed="true"] {
  background: var(--accent-solid); color: #fff;
}

/* ── 도구 열 ──────────────────────────────────────────────────────── */
/* 도구는 캔버스의 조연이다. 44×62 짜리 상자 7개는 화면을 넘겼고(430px vs 390px)
   무엇보다 무거웠다. 상자를 36 으로 줄이고 탭 영역은 패딩으로 44 를 지킨다. */
.tools {
  flex: none; gap: 4px; padding: var(--stack-2) calc(var(--gutter) - 4px) 0;
  justify-content: space-between;
}
.tool {
  flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 5px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer; color: var(--text-dim);
  transition: color var(--dur-state) var(--ease-standard),
              transform var(--dur-tap) var(--ease-standard);
}
.tool:active { transform: scale(.94); }
.tool .box {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--light-glass); border: 1px solid rgb(var(--ink-rgb) / .09);
  transition: background var(--dur-state) var(--ease-standard);
}
/* 무채색 스킨에서는 강조색이 곧 잉크색이라 **옅은 톤으로는 켜짐이 안 보인다**
   (꺼진 칩 배경이 이미 잉크 5%, 켜진 게 13% 면 구분이 안 된다).
   그래서 여기만 채움으로 간다. `복사` 와 같은 색이지만 넓이가 36×36 대
   화면 폭이라 무게가 겹치지 않는다 — 그라디언트는 여전히 `복사` 하나뿐이다. */
.tool[aria-pressed="true"] { color: var(--text-primary); font-weight: 600; }
.tool[aria-pressed="true"] .box {
  background: var(--accent-solid); border-color: transparent;
  color: #fff; box-shadow: none;
}
.tool small { font: var(--ui-micro); letter-spacing: var(--track-ko); white-space: nowrap; }

/* ── 도구 패널 ────────────────────────────────────────────────────── */
/* 패널은 절대 `복사` 를 화면 밖으로 밀지 않는다. 도구를 누른 직후
   조절기 네 개 중 두 개가 스크롤 아래에 있으면 손이 한 번 더 간다.
   넘치는 만큼은 패널이 스스로 스크롤한다. */
.panel {
  flex: none; margin: var(--stack-2) var(--gutter) 0; padding: 14px 16px; border-radius: var(--radius-tile-sm);
  background: var(--surface-panel); border: 1px solid var(--border-hairline);
  backdrop-filter: blur(22px);
  max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  animation: panel-in var(--dur-sheet) var(--ease-standard);
}
.panel::-webkit-scrollbar { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

/* 패널 안의 세그먼트는 켜짐 표시일 뿐 주 동작이 아니다 —
   흰 알약 + 강조색 글자로 낮춘다. */
.panel .seg { margin-left: 0; margin-right: 0; }
.panel .seg button[aria-pressed="true"] {
  background: var(--surface-canvas); color: var(--accent-solid);
  box-shadow: 0 1px 3px rgb(var(--ink-rgb) / .12);
}
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row label { font: var(--type-label-sm); color: var(--text-sub); width: 46px; flex: none; }
.range-row output {
  font: var(--type-caption); color: var(--text-dim); width: 34px; flex: none;
  text-align: right; font-variant-numeric: tabular-nums;
}
input[type=range] {
  /* 트랙은 4px 로 보이지만 손가락이 닿는 곳은 44px 이어야 한다.
     투명 테두리로 히트 영역만 넓힌다 — 시각적 두께는 그대로다. */
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 44px; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: rgb(var(--ink-rgb) / .14);
}
input[type=range]::-moz-range-track {
  height: 4px; border-radius: 99px; background: rgb(var(--ink-rgb) / .14);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; cursor: pointer; margin-top: -9px;
  box-shadow: 0 2px 8px rgba(60,30,100,.35), 0 0 0 1px rgb(var(--ink-rgb) / .12);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(60,30,100,.35), 0 0 0 1px rgb(var(--ink-rgb) / .12);
}

.swatch-row { display: flex; gap: 9px; flex-wrap: wrap; }
.dot {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  transition: transform var(--dur-tap) var(--ease-standard);
}
.dot:active { transform: scale(.92); }
.dot[aria-selected="true"],
.dot[aria-pressed="true"] { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.dot.auto {
  background: var(--light-glass); color: var(--text-sub);
  font: 700 13px var(--font-ui); display: grid; place-items: center;
}

/* 내 사진을 바탕으로 — 바탕 스트립 맨 앞 */
.swatch.photo-bg {
  flex-direction: column; gap: 3px; color: var(--text-dim);
  border-style: dashed;
}
.swatch.photo-bg small { font: var(--type-micro); }
.swatch.photo-bg[aria-selected="true"],
.swatch.photo-bg[aria-pressed="true"] { color: var(--accent-solid); border-style: solid; }

.font-row { display: flex; gap: 9px; }
/* 폰트가 34종이라 한 줄 스크롤로는 못 찾는다. 접어서 보여주고 세로로 스크롤한다. */
.panel .font-row {
  flex-wrap: wrap; overflow: visible;
  max-height: 168px; overflow-y: auto; scrollbar-width: none;
}
.panel .font-row::-webkit-scrollbar { display: none; }
.font-chip { height: 40px; padding: 0 14px; font-size: 14px; }
.font-chip {
  flex: none; height: 44px; padding: 0 16px; border-radius: var(--radius-thumb);
  cursor: pointer; font-size: 15px; letter-spacing: var(--track-ko);
  background: var(--light-glass); border: 1px solid rgb(var(--ink-rgb) / .1);
  color: var(--text-primary);
  transition: background var(--dur-state) var(--ease-standard);
}
.font-chip[aria-selected="true"],
.font-chip[aria-pressed="true"] {
  background: var(--accent-gradient); border-color: transparent; color: #fff;
  box-shadow: 0 10px 22px -14px var(--accent-glow);
}

/* ── 바탕 스트립 ──────────────────────────────────────────────────── */
.strip { flex: none; gap: var(--gap-sticker); padding: 0 var(--gutter) 2px; }

/* ── 완제품 벽 ─────────────────────────────────────────────────────────
   만들기 화면의 **주인공**이다. 남는 세로를 전부 가져가고 혼자 스크롤한다.
   그래서 위쪽 도구 패널이 열려도 벽이 줄어들 뿐, 아무것도 화면 밖으로
   밀려나지 않는다 — 예전에 `복사` 가 밀리던 문제가 구조적으로 사라진다. */
.wall {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: var(--stack-2) var(--gutter) var(--stack-2);
  align-content: start;
}
.wall::-webkit-scrollbar { display: none; }
/* 아래를 흐리게 — 딱 잘리면 "여기가 끝"으로 읽히고, 흐려지면 "더 있음"으로 읽힌다 */
.wall {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

/* **고르기와 다듬기는 다른 일이다.** 둘을 한 화면에 같이 두면 390×844 에서
   세로가 모자라 벽이 24px 로 짜부라졌다(글자 패널 기준 실측). 도구를 열면
   벽을 접는다 — 다듬는 중에는 고를 일이 없고, 닫으면 그대로 돌아온다. */
.side:has(.panel) .wall { display: none; }
.wall .swatch { width: auto; }

/* 칸 배경은 **흰색**이어야 한다. 우리 팔레트는 전부 파스텔이라 회색 위에
   올리면 채도가 죽어서 완제품이 미완성처럼 보인다 — 실제로 그렇게 보였다. */
.swatch {
  width: 84px; height: 62px; flex: none; border-radius: var(--radius-thumb);
  border: 1px solid rgb(var(--ink-rgb) / .09); background: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0; overflow: hidden;
  transition: background var(--dur-state) var(--ease-standard),
              transform var(--dur-tap) var(--ease-standard);
}
.swatch:active { transform: scale(.96); }
.swatch[aria-selected="true"],
.swatch[aria-pressed="true"] {
  outline: 2px solid var(--accent-solid); outline-offset: -2px; border-color: transparent;
}
.swatch svg { pointer-events: none; }

/* ── 액션 ─────────────────────────────────────────────────────────── */
/* 주 동작은 항상 손에 닿아야 한다. 도구 패널을 열면 컨트롤 열이 길어지는데,
   복사 버튼이 그만큼 아래로 밀려 스크롤해야 닿았다. 열 바닥에 고정한다. */
.actions {
  flex: none; display: flex; gap: 10px;
  padding: var(--stack-2) var(--gutter) var(--stack-2);
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(to bottom, transparent, var(--surface-canvas) 22%);
}

/* ── 칩 ───────────────────────────────────────────────────────────── */
.chips { flex: none; gap: var(--stack-1); padding: 0 var(--gutter); }
.chip {
  flex: none; padding: 10px 14px; border-radius: var(--radius-pill); cursor: pointer;
  white-space: nowrap; font: 500 13px/1 var(--font-ui); letter-spacing: var(--track-ko);
  min-height: 44px;
  background: var(--light-glass); color: var(--text-sub);
  border: 1px solid rgb(var(--ink-rgb) / .1);
  transition: background var(--dur-state) var(--ease-standard);
}
.chip[aria-selected="true"],
.chip[aria-pressed="true"] {
  background: var(--accent-solid); color: #fff; border-color: transparent;
}

/* ── 그리드 ───────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 var(--gutter) var(--stack-4); }
.grid.two { grid-template-columns: repeat(2, 1fr); gap: var(--stack-2); }
.cell {
  aspect-ratio: 1; border-radius: var(--radius-cell); display: grid; place-items: center;
  background: var(--surface-tile); border: 1px solid var(--border-hairline);
  cursor: pointer; position: relative; overflow: hidden; padding: 10px;
  transition: transform var(--dur-tap) var(--ease-standard);
}
/* 보관한 스티커는 캔버스가 아니라 이미지다. 격자 위에 얹히므로 배경을
   깔지 않고 비율만 지킨다. */
.cell img {
  position: relative; max-width: 100%; max-height: 100%;
  object-fit: contain; pointer-events: none;
}
/* 지우기 대기 — 한 번 더 눌러야 지워진다. 되돌릴 수 없으니 색으로 경고한다. */
.cell.del {
  background: #B3261E; border-color: transparent; color: #fff;
  gap: 4px; align-content: center;
}
.cell.del::before { display: none; }
.cell.del small { font: var(--ui-micro); letter-spacing: var(--track-ko); }

.cell::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(45deg, rgb(var(--ink-rgb) / .055) 25%, transparent 25% 75%, rgb(var(--ink-rgb) / .055) 75%),
    linear-gradient(45deg, rgb(var(--ink-rgb) / .055) 25%, transparent 25% 75%, rgb(var(--ink-rgb) / .055) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.cell > * { position: relative; }
.cell:active { transform: scale(.96); }

/* dark_bg — 흰 소재만 격자를 뒤집는다 */
.cell[data-dark="1"] { background: #26262A; border-color: rgba(255,255,255,.1); }
.cell[data-dark="1"]::before {
  opacity: .5;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25% 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25% 75%, rgba(255,255,255,.06) 75%);
}

.deco-cell {
  border-radius: var(--radius-thumb); min-height: 64px; padding: 8px 10px;
  background: var(--light-glass); border: 1px solid rgb(var(--ink-rgb) / .1);
  display: grid; place-items: center; cursor: pointer; color: var(--text-primary);
  font-size: 16px; letter-spacing: .02em; text-align: center; word-break: break-all;
  transition: background var(--dur-state) var(--ease-standard),
              transform var(--dur-tap) var(--ease-standard);
}
.deco-cell:active { transform: scale(.96); }

.empty {
  padding: 60px 30px; text-align: center; color: var(--text-dim);
  font: var(--type-body); letter-spacing: var(--track-ko);
}

/* ── 탭바 ─────────────────────────────────────────────────────────── */
.tabbar {
  flex: none; margin: var(--stack-2) var(--gutter) 0; padding: 7px; border-radius: var(--radius-nav);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: var(--light-bar); border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-nav);
}
.tabbar button {
  height: 52px; border-radius: var(--radius-nav-item); border: 0; padding: 0;
  display: grid; place-items: center; gap: 3px; cursor: pointer;
  background: transparent; color: var(--text-dim);
  transition: background var(--dur-state) var(--ease-standard);
}
/* 탭바도 단색이다. 무채색에서 검은 글로우는 그림자가 아니라 얼룩으로 보인다. */
.tabbar button[aria-selected="true"],
.tabbar button[aria-pressed="true"] {
  background: var(--accent-solid); color: #fff;
}
.tabbar small { font: var(--ui-micro); letter-spacing: var(--track-ko); }
.home-ind {
  flex: none; width: 134px; height: 5px; border-radius: 99px;
  background: rgb(var(--ink-rgb) / .24); margin: 10px auto 9px;
}

/* ── 토스트 ───────────────────────────────────────────────────────── */
#toast {
  position: absolute; left: 50%; bottom: 108px; transform: translate(-50%, 10px);
  padding: 12px 20px; border-radius: var(--radius-pill);
  background: rgb(var(--ink-rgb) / .94); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: var(--blur-glass); color: #fff;
  font: var(--type-label); letter-spacing: var(--track-ko); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity var(--dur-state) var(--ease-standard),
              transform var(--dur-state) var(--ease-standard);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── 시트 ─────────────────────────────────────────────────────────── */
#sheet-scrim {
  position: absolute; inset: 0; background: rgba(6,3,12,.6); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-sheet) var(--ease-standard);
}
#sheet-scrim.on { opacity: 1; pointer-events: auto; }
#sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 51;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--surface-canvas); border-top: 1px solid var(--border-stroke);
  padding: 10px 22px 26px; transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-standard);
  max-height: 76%; display: flex; flex-direction: column;
}
#sheet.on { transform: translateY(0); }
.sheet-grip {
  width: 42px; height: 4px; border-radius: 99px; background: var(--border-stroke);
  margin: 4px auto 14px; flex: none;
}
#sheet h2 { margin: 0 0 14px; font: var(--type-h3); letter-spacing: var(--type-h3-tracking); }

/* ── 래퍼 ─────────────────────────────────────────────────────────────
   .main / .stage-col / .side 는 모바일에서 레이아웃에 관여하지 않는다.
   display:contents 라 자식이 그대로 부모의 플렉스 항목이 된다.       */
/* 모바일에서 래퍼는 레이아웃에 관여하지 않는다 — 단, `.side` 만은 예외다.
   전부 `flex:none` 이라 화면이 모자라면 아래(복사 버튼·탭바)가 잘려 나가고
   `#shell` 이 `overflow:hidden` 이라 스크롤도 안 된다. 컨트롤 열만 스크롤시킨다. */
.main, .stage-col { display: contents; }
.side {
  display: flex; flex-direction: column; flex: 1 1 auto;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }
/* 캔버스는 결과를 **확인하는** 자리지 화면의 주인공이 아니다. 예전엔 남는
   세로를 전부 가져가서(flex:1) 화면의 34% 가 빈 격자였다. 이제 정해진 몫만
   갖고, 남는 세로는 고르는 벽이 가져간다. */
.canvas-wrap { flex: 0 1 196px; min-height: 132px; }
.main:has(.panel) .canvas-wrap { flex: 0 1 150px; min-height: 120px; }
/* 벽이 있으면 스크롤은 벽이 맡는다 — 스크롤 영역이 둘이면 어느 쪽이 움직일지
   예측할 수 없다. 벽이 없는 누끼 모드에서만 `.side` 가 스크롤한다. */
.side:has(.wall) { overflow: hidden; }
.side { flex: 1 1 auto; }

/* 모드 칸은 만들기의 최상위 전환이다. 가장 긴 패널(글자)에서는 그래도
   스크롤이 조금 생기는데, 그때 이게 위로 잘려 나가면 안 된다.
   배경에 캔버스 색을 한 겹 깔아 불투명하게 만든 뒤 맨 위에 고정한다 —
   반투명한 채로 고정하면 밑으로 지나가는 내용이 비쳐 보인다. */
.side > .seg[data-seg="mode"] {
  position: sticky; top: 0; z-index: 6;
  margin-top: 0; scroll-margin-top: 0;
  background: linear-gradient(var(--light-glass), var(--light-glass)),
              var(--surface-canvas);
  box-shadow: 0 -14px 0 var(--surface-canvas);
}
.tabbar .brand { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   데스크톱 — 폰을 띄워 보여주는 게 아니라 화면을 쓴다.

     ┌──────┬──────────────────┬────────────┐
     │ 사이드 │   캔버스          │  컨트롤     │
     └──────┴──────────────────┴────────────┘

   반드시 파일 끝에 둔다. 앞에 두면 명시도가 같은 기본 규칙이 나중에 와서
   이긴다 — 실제로 그렇게 깨졌던 자리다.
   ───────────────────────────────────────────────────────────────────── */
/* 태블릿 세로 — 데스크톱으로 가기엔 좁고, 모바일 레이아웃을 그대로 늘리면
   캔버스가 900px 가까이 벌어져 보기 나쁘다. 폭만 묶는다. */
@media (min-width: 600px) and (max-width: 899px) {
  body { background: var(--board-light); display: grid; place-items: center; padding: 24px; }
  #shell {
    width: 100%; max-width: 480px; height: min(920px, calc(100vh - 48px));
    border-radius: var(--radius-phone); box-shadow: var(--shadow-phone-light);
  }
}

@media (min-width: 900px) {
  :root { --gutter: 30px; }
  body { background: var(--surface-canvas); }

  #shell {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    max-width: 1560px; margin: 0 auto;
  }
  .home-ind { display: none; }
  /* 탐색 화면은 모바일과 같은 세로 흐름이다. 그리드로 만들면 명시 행을 가진
     .scroll 이 검색·칩 위에 겹쳐 앉는다 — 실제로 그렇게 사라졌던 자리다. */
  .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

  /* 사이드바 */
  .tabbar {
    grid-column: 1; grid-row: 1;
    margin: 0; padding: 18px 12px;
    display: flex; flex-direction: column; gap: 6px;
    border-radius: 0; border: 0;
    border-right: 1px solid var(--border-hairline);
    background: transparent; backdrop-filter: none; box-shadow: none;
  }
  .tabbar .brand {
    display: block; text-align: center; margin: 6px 0 22px;
    font: italic 800 21px/1 var(--font-display); letter-spacing: -.025em;
    color: var(--text-primary);
  }
  .tabbar button { height: 58px; border-radius: var(--radius-thumb); gap: 4px; }
  .fab { right: var(--gutter); bottom: var(--gutter); }

  /* 헤더는 본문 폭 전체 */
  .head { padding: 22px var(--gutter) 0; }
  .head h1 { font: 700 26px/1.2 var(--font-ui); letter-spacing: -.03em; }

  /* 만들기만 2단 그리드 */
  .main[data-view="make"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 388px;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 26px;
  }
  .main[data-view="make"] .head { grid-column: 1 / -1; }
  .stage-col {
    display: block; grid-column: 1; grid-row: 2;
    padding: 0 0 26px var(--gutter); min-height: 0;
  }
  .canvas-wrap { margin: 18px 0 0; height: calc(100% - 18px); min-height: 0; }
  .side {
    display: flex; flex-direction: column; grid-column: 2; grid-row: 2;
    min-height: 0; overflow-y: auto; scrollbar-width: none;
    padding: 0 var(--gutter) 26px 0;
  }
  .side::-webkit-scrollbar { display: none; }
  .side > .field, .side > .seg, .side > .panel { margin-left: 0; margin-right: 0; }
  .side > .tools, .side > .strip, .side > .actions,
  .side > .section, .side > .hint { padding-left: 0; padding-right: 0; }
  .side > .seg:first-child { margin-top: 18px; }
  /* 좁은 패널에서는 가로 스크롤이 불편하다. 접어서 보여준다. */
  .side > .strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; overflow: visible;
  }
  .side > .strip .swatch { width: 100%; }
  .side > .tools { flex-wrap: wrap; overflow: visible; }
  .side > .actions { margin-top: auto; padding-top: 20px; }

  /* 탐색 화면 — 열을 늘린다 */
  /* 사꾸는 사진이 주인공이라 폭을 다 쓴다 */
  .main[data-view="photo"] .canvas-wrap { margin: 18px var(--gutter) 0; }
  .main[data-view="photo"] .strip,
  .main[data-view="photo"] .actions,
  .main[data-view="photo"] .hint { padding-left: var(--gutter); padding-right: var(--gutter); }

  .main:not([data-view="make"]) .field,
  .main:not([data-view="make"]) .seg { margin-left: var(--gutter); margin-right: var(--gutter); max-width: 620px; }
  .main:not([data-view="make"]) .chips,
  .main:not([data-view="make"]) .hint { padding-left: var(--gutter); padding-right: var(--gutter); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); padding: 0 var(--gutter) var(--gutter); }
  .grid.two { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  #toast { bottom: 34px; }
}

@media (min-width: 1400px) {
  #shell { grid-template-columns: 132px minmax(0, 1fr); }
  .main[data-view="make"] { grid-template-columns: minmax(0, 1fr) 420px; }
}