* { box-sizing: border-box; margin: 0; }
/* 광고 배너 자리(맨 아래, 50~60px + 휴대폰 하단 안전 여백) */
:root { --ad: calc(56px + env(safe-area-inset-bottom, 0px)); --ah: calc(100dvh - var(--ad));
  --ch: min(max(100vw / 11, 5.5dvh), 11dvh); --cw: max(var(--ah) / 11, 4.5vw); --btn: #2c2d31; --on: #2f7bff; }
html, body { height: 100%; overflow: hidden; background: #1b1b1d; color: #ddd;
  font-family: system-ui, "Malgun Gothic", sans-serif; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body { display: grid; height: 100vh; height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--ad); }
#app { display: grid; min-width: 0; min-height: 0; }
#ad-banner { background: #d9d9dd; padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ===== 세로 모드(기본): 위=레이어창 10x3, 가운데=캔버스, 아래=메뉴바 11x3 ===== */
#app { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--ch) * 3) minmax(0, 1fr) calc(var(--ch) * 3);
  grid-template-areas: "l" "c" "m"; }
.grid { display: grid; gap: 1px; background: #101012; overflow: hidden; min-width: 0; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
#menu { grid-template-columns: repeat(11, minmax(0, 1fr)); }
#layers { grid-template-columns: repeat(10, minmax(0, 1fr)); }

/* ===== 가로 모드: 왼쪽=메뉴바 3x11, 가운데=캔버스, 오른쪽=레이어창 3x10 ===== */
@media (min-aspect-ratio: 1/1) {
  #app { grid-template-columns: calc(var(--cw) * 3) minmax(0, 1fr) calc(var(--cw) * 3); grid-template-rows: minmax(0, 1fr); grid-template-areas: "m c l"; }
  #menu, #layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #menu { grid-template-rows: repeat(11, minmax(0, 1fr)); }
  #layers { grid-template-rows: repeat(10, minmax(0, 1fr)); }
}

#menu { grid-area: m; } #cv { grid-area: c; } #layers { grid-area: l; }

/* 메뉴 버튼 */
.b { background: var(--btn); color: #e6e6ea; border: 0; padding: 0; display: grid; place-items: center;
  position: relative; min-width: 0; min-height: 0; cursor: pointer; }
.b svg { width: 78%; height: 78%; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.b svg text { fill: currentColor; stroke: none; font: 700 6.5px sans-serif; }
.b.on { background: var(--on); color: #fff; }
.b:active { filter: brightness(1.5); }
.b.sw::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 7%; height: 15%;
  background: var(--c); border: 1px solid #888; pointer-events: none; }
.b.sw.none::after { background: repeating-linear-gradient(45deg, #e44 0 2px, #fff 2px 4px); }
.b input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }

/* 묶음 칸: 점 표시 / 반칸 2개 */
.dots { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; pointer-events: none; }
.dots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #9aa0ad; }
.dots i.cur { background: #fff; border-color: #fff; }
.sp { display: flex; gap: 1px; background: #101012; min-width: 0; min-height: 0; }
.sp .b { flex: 1; }
@media (max-aspect-ratio: 1/1) { .sp { flex-direction: column; } }

/* 레이어 칸 */
.lc { background: #26272b; position: relative; display: grid; min-width: 0; min-height: 0;
  overflow: hidden; container-type: size; cursor: pointer; }
.lc.on { background: #1f3566; outline: 2px solid var(--on); outline-offset: -2px; }
.th { grid-area: th; background: #f2f2f2; width: 100%; aspect-ratio: 1; max-height: 100%; align-self: center; justify-self: center; pointer-events: none; }
.lc.hid .th { opacity: .35; }
.no { grid-area: no; font-weight: 600; font-size: 18cqh; color: #cfd3dc; display: grid; place-items: center; line-height: 1; }
.eye, .lk { display: grid; place-items: center; min-width: 0; min-height: 0; color: #cfd3dc; }
.eye { grid-area: ey; } .lk { grid-area: lk; }
.eye svg, .lk svg { width: 80%; height: 80%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lc.hid .eye { opacity: .4; } .lc:not(.hid) .eye .sl { display: none; }
.lk { opacity: .35; } .lc.lkd .lk { opacity: 1; color: #ffb454; }
.lk .cl { display: none; } .lc.lkd .lk .cl { display: inline; } .lc.lkd .lk .op { display: none; }
/* 세로: 2열 x 3행 안에 배치 */
.lc { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 22% 36%; grid-template-areas: "th th" "no no" "ey lk"; }
@media (min-aspect-ratio: 1/1) {
  .lc { grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1fr 40%; grid-template-areas: "th th th" "no ey lk"; }
  .th { width: auto; height: 100%; max-width: 100%; }
  .no { font-size: 26cqh; }
}

/* 캔버스 */
#cv { position: relative; overflow: hidden; background: #3a3b40; }
#stage { width: 100%; height: 100%; display: block; touch-action: none; }
#toast { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.78); color: #fff;
  padding: 6px 12px; border-radius: 14px; font-size: 13px; pointer-events: none; opacity: 0; transition: opacity .2s;
  max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toast.show { opacity: 1; }