/* -------------------- Font -------------------- */
@font-face {
  font-family: 'PretendardEL';
  src: url('./fonts/Pretendard-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}


/* -------------------- Reset & Base -------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }   /* ✅ 페이지 스크롤 금지(전 구간) */
body {
  margin: 0;
  background: #fff;
  color: #222;
  font-family: 'PretendardEL', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

/* -------------------- Layout (mobile-first) -------------------- */
.page { min-height: 100dvh; }
.app-card {
  width: 100vw;
  height: 100dvh;                   /* ✅ 카드 자체를 화면 높이에 맞춤 */
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 12px 20px;
  margin: 0;

  /* 모바일용 높이 계산 변수 */
  --toolbar-h: 44px;
  --pad-y: 12px;
  --tabs-h: 42px;                   /* 탭 높이(패딩 포함) */
  --stage-size: clamp(240px, 42vh, 340px);  /* 모바일 미리보기 크기 */
  --panel-h: calc(
    100dvh - var(--toolbar-h) - (var(--pad-y) * 2) - var(--stage-size) - var(--tabs-h) - var(--safe-bottom)
  );
}
.toolbar {
  height: 44px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid #e9e9e9;
  margin: 0 -8px 14px;
}
.btn-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.btn-icon .icon-home {
  width: 18px; height: 18px; display: block;
  pointer-events: none; /* 클릭 막힘 방지 */
}

.btn-link { background: none; border: none; color: #232323; font-size: 14px; letter-spacing: 0; cursor: pointer; padding: 6px 8px; }
.btn-link:hover { text-decoration: underline; }
.btn-icon { width: 28px; height: 28px; 
     display: grid; place-items: center; cursor: pointer; }
.icon-square { width: 14px; height: 14px; }

/* 홈 버튼은 테두리/박스 없이 아이콘만 보이게 */
#homeBtn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;          /* 원하면 유지해도 됨 */
  padding: 6px;              /* 클릭 범위는 유지 */
  margin-right: 12px;
}

/* hover 시에도 박스가 생기지 않게 */
#homeBtn:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* 접근성: 키보드 포커스일 때만 외곽선 표시 */
#homeBtn:focus { outline: none; }
#homeBtn:focus-visible {
  outline: 2px solid #8aa7ff;
  outline-offset: 2px;
}

/* 아이콘 자체는 그대로 */
#homeBtn .icon-home {
  width: 18px; height: 18px;
  display: block;
  pointer-events: none;
}

.app { display: grid; gap: 14px; }

/* -------------------- Stage (미리보기) -------------------- */
.stage-inner {
  width: var(--stage-size);
  height: var(--stage-size);
  aspect-ratio: auto;
  margin-inline: auto;                 /* 모바일 중앙 정렬 */
  background: #fff;
  position: relative;
  overflow: hidden;
  border: 0 !important;
}
.layers { z-index: 1; position: absolute; inset: 0; }
.layer, .layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.overlay-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 프레임이 캔버스에 정확히 맞게 */
  pointer-events: none;  /* 클릭 차단 X */
  z-index: 10;           /* 항상 최상단 */
}

/* -------------------- Tabs & Panel -------------------- */
.tabs {
  display: flex; gap: 12px; justify-content: center;
  padding: 8px 0 10px;                /* 모바일 탭 높이 */
  font-size: 14px; user-select: none;
}
.tab { background: none; border: none; padding: 6px 2px; color: #444; letter-spacing: 0; cursor: pointer; }
.tab.is-active { color: #111; font-weight: 600; }
.tab:focus-visible { outline: 2px solid #8aa7ff; outline-offset: 2px; }

.panel { padding: 0; }
.panel-inner {
  height: var(--panel-h);             /* ✅ 모바일에서 패널만 스크롤 */                   /* ✅ */

  background: #fff;
  padding: 10px 10px 16px; /* ⬅️ bottom 패딩 +6px 정도 */
}

/* -------------------- 썸네일 그리드 & 카드 -------------------- */
/* ✅ 모바일에서도 1줄 4개 */
.grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.thumb {
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;                 /* 아이템 원본 비율 유지하며 축소 */
}
.thumb:hover { border-color: #9aa7ff; }
.thumb.is-selected,
.thumb.is-selected:hover {             /* hover 때도 유지 */
  border: 2px solid #222;              /* 색/굵기 취향대로 변경 */
  box-shadow: none;                    /* 겹선(내부 그림자) 제거 */
}

/* -------------------- Desktop/Tablet (>=900px) -------------------- */
/* -------------------- Desktop/Tablet (>=900px) -------------------- */
/* -------------------- Desktop/Tablet (>=900px) -------------------- */
/* -------------------- Desktop/Tablet (>=900px) -------------------- */
@media (min-width: 900px) {
  html, body { height: 100%; overflow: hidden; }

  /* 바깥 여백(gutter) */
  .app-card {
    width: 100vw;
    height: 100vh;
    --toolbar-h: 44px;
    --gutter: 24px;                    /* ← 사방 여백 크기 */
    padding: var(--gutter);
  }

  .toolbar {
    height: var(--toolbar-h);
    flex-shrink: 0;
    padding: 6px 0 12px;               /* 좌우는 card padding으로 처리 */
    border-bottom: 1px solid #e9e9e9;
    margin: 0;
  }

  /* 툴바 제외 영역: 좌 미리보기 + 우 아이템(남는 가로 전부) */
  .app {
    /* 세로/가로 가용 크기 계산 */
    --avail-h: calc(100vh - var(--toolbar-h) - (var(--gutter) * 2));
    --min-side: 360px;  /* 우측 패널이 최소 이 정도는 있어야 한다는 가정 */
    --avail-w: calc(100vw - var(--min-side) - (var(--gutter) * 3));

    /* 정사각 크기 = 세로 또는 가로 제약 중 작은 값 */
    --stage-size: min(var(--avail-h), var(--avail-w));

    height: var(--avail-h);
    display: grid;
    grid-template-columns: var(--stage-size) 1fr;  /* ✅ 오른쪽을 1fr로 가로 전부 사용 */
    gap: var(--gutter);                             /* 좌우 사이 여백 */
    align-items: start;
  }

  /* 좌측 미리보기: 정사각 + 카드 여백 덕분에 사방 여백 확보 */
  .stage { display:flex; align-items:center; justify-content:center; }
  .stage-inner {
    width: var(--stage-size);
    height: var(--stage-size);
    margin: 0;
    border: 2px solid #cfcfcf;
    border-radius: 6px;
    background: #fff;
    position: relative;
    overflow: hidden;
  }

  /* 우측 패널: 내부에도 상·하·좌·우 여백 */
  .side {
    height: var(--stage-size);
    display: grid;
    grid-template-rows: auto 1fr;      /* 탭 + 목록 */
    overflow: hidden;                  /* 페이지 스크롤 X */
    border-left: 1px solid #eee;
    padding: calc(var(--gutter) / 2);  /* ✅ 내부 여백(사방) */
    --tabs-pad-x: clamp(28px, 4vw, 80px);  /* 탭 바의 좌우 여백 */
    --tabs-gap:   clamp(18px, 3vw, 44px);  /* 탭들 사이 간격   */
  }

  .tabs {
    justify-content: space-between;
    padding: 8px 12px 10px;            /* 탭 영역 내부 여백 */
    gap: clamp(12px, 2vw, 28px);
    border-bottom: 1px solid #e9e9e9;
    padding-inline: var(--tabs-pad-x);  /* 좌우 여백 넉넉히 */
    gap: var(--tabs-gap);               /* 탭 사이 간격 증가 */
  }

  .panel { padding: 0; }
  .panel-inner {
    height: 100%;
    width: 100%;
    overflow-y: auto;                  /* ✅ 아이템 목록만 스크롤 */
    padding: 12px;                     /* 목록 영역 내부 여백 */
    max-width: none;                   /* ✅ 우측 가로 여백 남지 않게 */
    margin: 0;
  }

  /* 썸네일 4열로 가로 꽉 채움 */
  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

/* 안내 오버레이 */
.guide-overlay{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  opacity: 1; transition: opacity .2s ease;
}
.guide-overlay.hidden{ opacity: 0; pointer-events: none; }

.guide-dialog{
  width: min(560px, calc(100vw - 40px));
  background: #fff; color:#222;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  padding: 20px 22px;
  text-align: center; line-height: 1.6;
}
.guide-dialog h2{ margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.guide-dialog .muted{ margin: 10px 0 0; color:#666; font-size: 13px; }