:root {
  --bg: #fafafa;
  --fg: #1b1b1f;
  --muted: #6b6b76;
  --line: #d9d9e0;
  --slot: #ffffff;
  --accent: #3b5bdb;
  --accent-fg: #ffffff;
  --radius: 10px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #16161a;
  --fg: #ececf1;
  --muted: #9a9aa6;
  --line: #34343c;
  --slot: #1f1f25;
  --accent: #7390ff;
  --accent-fg: #0d0d12;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
img { display: block; }

.screen {
  min-height: calc(100dvh - var(--hdr, 0px));
  padding: max(24px, env(safe-area-inset-top)) 16px 32px;
}
.screen.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.narrow { max-width: 640px; margin: 0 auto; }
.screen-vcenter { display: flex; align-items: center; justify-content: center; }
.screen-vcenter > .narrow { width: 100%; }

.big-title {
  margin: 0;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
}

/* 버튼 / 입력 */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--slot);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .slot:focus-visible, .drop:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 14px; color: var(--muted); }
.label b { color: var(--fg); }
input[type="text"], .link-box {
  font: inherit;
  font-size: 16px; /* iOS 확대 방지 */
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slot);
  color: var(--fg);
  width: 100%;
}
.msg { min-height: 1.5em; color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* 제작 화면 */
.step-head { margin: 28px 0 8px; }
.uploader { display: flex; gap: 16px; align-items: flex-start; }
.imgbox { flex: 0 0 auto; width: 200px; display: flex; flex-direction: column; gap: 8px; }
.drop, .crop {
  width: 200px;
  height: 200px;
  border-radius: var(--radius);
  background: var(--slot);
}
.drop {
  border: 2px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.imgbox.over .drop, .imgbox.over .crop { outline: 3px solid var(--accent); }
.crop {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border: 1px solid var(--line);
}
.crop.dragging { cursor: grabbing; }
.crop img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}
.crop-tools { display: flex; align-items: center; gap: 8px; }
.crop-tools input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.linkbtn {
  appearance: none; border: 0; background: none; padding: 4px 0;
  font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; white-space: nowrap;
}
.crop-hint { margin: 0; font-size: 12px; color: var(--muted); }
.uploader-side { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.thumbs {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}
.thumbs li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.thumb {
  appearance: none;
  position: relative;
  width: 100%;
  padding: 0;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--slot);
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  cursor: pointer;
}
.thumbs li.current .thumb { border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: 0 0 0 2px var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 항상 보이는 수정 표시 (터치 환경에서도 보이도록 호버 없이) */
.thumb-edit {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.thumb-name {
  font-size: 11px;
  line-height: 1.3;
  min-height: 1.3em;
  text-align: center;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finish-row { display: flex; justify-content: center; margin-top: 24px; }
.btn.big { padding: 14px 48px; font-size: 16px; }

/* 완료 화면 */
.grid {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 항상 5개씩 2줄 */
  gap: clamp(6px, 2vw, 12px);
}
.grid li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.grid img { width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 8px; }
.grid li { min-width: 0; }
.grid span { font-size: clamp(11px, 2.4vw, 14px); overflow-wrap: anywhere; }
.actions { display: flex; justify-content: center; }
.link-box { margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }
#done-msg { text-align: center; }

/* 정렬 화면: 항상 왼쪽 빈칸(세로 N줄) + 오른쪽 카드 */
#play {
  padding: 12px 12px;
  display: flex;
  align-items: center;      /* 개수가 적어 내용이 화면보다 짧을 때도 세로 가운데 정렬 */
  justify-content: center;
}
.play {
  --n: 10; /* 세트에 포함된 이미지 개수(2~10). JS가 시작할 때 실제 값으로 설정함 */
  /* N줄이 화면 높이에 들어가도록 줄 높이를 계산 */
  --gap: 6px;
  /* 목록 한 줄을 구성하는 폭: 번호 + 간격 + 이미지 + 간격 + 이름(화면 폭별 고정, --name-chars 참고) */
  --num-fs: clamp(12px, 1.6vw, 16px);
  --num-w: calc(var(--num-fs) * 1.25);
  --li-gap: clamp(4px, 1vw, 10px);
  --name-fs: clamp(11px, 1.4vw, 13px);
  --name-chars: 6;  /* 한 줄 최대 글자 수: 좁은 화면 기준. 넓은 화면에서 아래 미디어쿼리로 확대 */
  --name-w: calc(var(--name-fs) * (var(--name-chars) + 0.5));
  /* 이미지 크기 = 높이 기준 크기와, '목록이 전체 폭의 절반을 넘지 않는' 크기 중 작은 쪽 */
  --row-h: clamp(30px, calc((100dvh - var(--hdr, 0px) - 24px - (var(--n) - 1) * var(--gap)) / var(--n)), 76px);
  --list-fixed: calc(var(--num-w) + 2 * var(--li-gap) + var(--name-w));
  /* 전체 폭: 기본은 정사각형 영역. 단, 목록이 절반을 넘게 되면 화면 폭이 허락하는 만큼 넓힘 */
  --pw: min(calc(100vw - 24px), max(min(900px, calc(100dvh - var(--hdr, 0px) - 24px)), calc(2 * (var(--row-h) + var(--list-fixed)))));
  --row-w: calc(var(--pw) / 2 - var(--list-fixed));
  --row: max(24px, min(var(--row-h), var(--row-w)));
  /* 가로로 긴 화면에서도 정사각형 영역 안에만 표시 */
  --sq: min(900px, calc(100dvh - var(--hdr, 0px) - 24px), calc(100vw - 24px));
  /* 오른쪽 패널의 높이: 개수(n)와 무관하게 항상 10칸 분량으로 넉넉하게 확보 -> 타이틀/카드 사이 여백 유지, 내용이 넘치지 않음 */
  --panel-h: calc(var(--row) * 10 + var(--gap) * 9);
  max-width: var(--pw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(10px, 3vw, 32px);
  align-items: center;
}
.slots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap); }
.slots li { display: flex; align-items: center; gap: var(--li-gap); }
.num {
  flex: 0 0 auto;
  width: var(--num-w);
  text-align: right;
  font-weight: 700;
  font-size: var(--num-fs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.slot {
  flex: 0 0 auto;
  width: var(--row);
  height: var(--row);
  padding: 0;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--slot);
  overflow: hidden;
  cursor: pointer;
}
.slot:not(:disabled):hover { border-color: var(--accent); border-style: solid; }
.slot:disabled { cursor: default; }
.slot.filled { border: 0; }
.slot img { width: 100%; height: 100%; }
.slot.drag-over { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent) 12%, var(--slot)); }
.slot-name {
  flex: 0 0 auto;
  width: var(--name-w);   /* 화면 폭 구간별로 고정: 아래 미디어쿼리 참고 */
  white-space: nowrap;
  line-height: 1.25;
  font-size: var(--name-fs);
  color: var(--muted);
}

.panel {
  position: sticky;
  top: 12px;
  height: var(--panel-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
/* 타이틀: 화면 위쪽과 카드 사이 공간의 가운데. 카드 아래에도 같은 크기의 빈 공간 */
.play-title {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 4px;
  font-size: clamp(14px, calc(var(--sq) * 0.027), 24px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.card, .result {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.card { flex: 0 0 auto; }
.panel::after { content: ""; flex: 1 1 0; }
.panel.finished::after { display: none; }
.card img {
  width: min(70%, 224px, 38dvh);
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: grab;
}
.card.dragging img { opacity: 0.4; cursor: grabbing; }
.card-name {
  margin-top: clamp(10px, 2.5dvh, 22px);
  font-size: clamp(16px, calc(var(--sq) * 0.036), 32px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hint { margin: 8px 0 0; font-size: clamp(11px, calc(var(--sq) * 0.015), 13px); color: var(--muted); word-break: keep-all; }
.count { margin: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.result { --title-size: clamp(16px, calc(var(--sq) * 0.036), 32px); padding: 0 8px; }
.result-title { margin: 0; font-size: var(--title-size); line-height: 1.3; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.result-sub { margin: 4px 0 0; font-size: clamp(14px, calc(var(--sq) * 0.02), 18px); color: var(--muted); }
/* "당신의 결과"와 버튼 사이: 타이틀 한 줄 높이만큼 */
.result-spacer { flex: 0 0 auto; height: calc(var(--title-size) * 1.3); }
.result .btn { padding: 12px clamp(14px, calc(var(--sq) * 0.03), 28px); font-size: clamp(13px, calc(var(--sq) * 0.019), 17px); white-space: nowrap; }

/* 좁은 화면: 제작 화면만 세로 배치 */
@media (max-width: 520px) {
  .uploader { flex-direction: column; align-items: center; }
  .uploader-side { width: 100%; }
  .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.slot-name .ln { display: block; }

/* 상단 링크: 같은 줄에 가운데 정렬, ' · '로 구분 */
.top-links {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  padding-top: 10px;
}
.top-links-sep { color: #666; font-size: 0.85em; margin: 0 5px; }
#link-make {
  text-decoration: none;
  font-size: 0.85em;   /* 첫 링크와 동일 */
  color: #666;         /* 첫 링크(#888)보다 조금 더 어둡게 */
}
body:not([data-view="intro"]):not([data-view="play"]) #link-make,
body:not([data-view="intro"]):not([data-view="play"]) .top-links-sep { display: none; }
.result #btn-newset { margin-top: 4px; }

/* 가로로 넉넉한 화면에서는 한 줄에 더 많은 글자를 담을 수 있도록 이름 칸을 넓힘(구간별, 연속 확대 아님) */
@media (min-width: 600px) {
  .play { --name-chars: 12; }
}
/* 정사각형 영역이 최대치(900px)로 고정되는 폭 이후로는 항상 한 줄로 표시 (최대 이름 길이 20자) */
@media (min-width: 924px) {
  .play { --name-chars: 20; }
}

/* 라이트/다크 전환 버튼 */
.theme-toggle {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 100;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--slot);
  color: var(--fg);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }

/* 안내 메시지가 레이아웃 폭/높이를 바꾸지 않도록 고정 */
.result .msg {
  width: 0;              /* 글자 길이가 전체 폭 계산에 반영되지 않게 함 */
  min-width: 100%;       /* 실제로는 패널 폭만큼 사용하고, 넘치면 줄 바꿈 */
  min-height: 3em;       /* 2줄 분량을 미리 확보해서 위아래로도 흔들리지 않게 함 */
  white-space: pre-line; /* 문구 안의 \n 줄 바꿈을 그대로 표시 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}