/* ═══════════════════════════════════════════════════════
   놀이팝 공통 디자인 시스템 (pop.css)
   각 페이지의 <style> 뒤에 불러와서 스타일을 덮어씁니다.
   원칙: 팝콘 팔레트 유지 + Pretendard 본문 + 그림자 카드
   ═══════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  --pop-shadow-sm: 0 1px 3px rgba(30, 58, 95, .07), 0 3px 12px rgba(30, 58, 95, .05);
  --pop-shadow-md: 0 2px 6px rgba(30, 58, 95, .08), 0 8px 24px rgba(30, 58, 95, .07);
}

/* ── 폰트: 본문은 Pretendard, Jua는 로고(h1)에만 남김 ── */
/* ── 배경: 크림색 + 은은한 팝콘 알갱이 패턴 (사이트 공통 질감) ── */
body {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  background-color: #FFFAF0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cellipse cx='22' cy='22' rx='11' ry='8' fill='none' stroke='%23F4E8CC' stroke-width='1.5'/%3E%3Cellipse cx='68' cy='66' rx='11' ry='8' fill='none' stroke='%23F4E8CC' stroke-width='1.5'/%3E%3C/svg%3E");
}
h2, h3, .btn, .seg-btn, .tab, .chip, .mini,
.item-title, .class-item, .sheet h2, .sheet h3,
.stat b, .code-big, .lv-badge, .save-sel, .c-btn, .c-sheet h2,
label, input, select, textarea, table, .card-title, .pw-input, .code-input {
  font-family: 'Pretendard', -apple-system, sans-serif !important;
}
h2 { font-weight: 700; }
.item-title, .card-title { font-weight: 600; }

/* ── 카드·패널: 테두리 대신 그림자 + 넉넉한 라운드 ── */
.panel, .sheet, .c-sheet {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--pop-shadow-sm);
  padding: 26px;
}
.card {
  border: none !important;
  box-shadow: var(--pop-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--pop-shadow-md); }

/* ── 버튼: 떠오르고(hover), 눌리는(active) 터치감 ── */
.btn, .seg-btn, .tab, .chip, .class-item, .c-btn {
  transition: all .2s ease;
  font-weight: 600;
}
.btn:hover:not(:disabled), .c-btn:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--pop-shadow-sm); }
.btn:active:not(:disabled), .c-btn:active { transform: scale(.95); box-shadow: none; filter: none; }
.chip:hover:not(.on) { border-color: #FFC93C; background: rgba(255, 201, 60, .08); }
.btn-primary { box-shadow: 0 2px 0 rgba(30, 58, 95, .12); }

/* ── 입력창 ── */
input[type=text], input[type=url], input[type=password], input[type=email], input[type=number], select, textarea {
  border: 1.5px solid #E4EBF3 !important;
  border-radius: 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  background: #fff !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #FFC93C !important;
  box-shadow: 0 0 0 3px rgba(255, 201, 60, .2) !important;
}
textarea { font-size: 13px !important; line-height: 1.7 !important; }

/* ── 표 ── */
th { font-weight: 700; opacity: .55; }
tr { transition: background .15s ease; }
tbody tr:hover, table tr:hover td { background: rgba(234, 244, 254, .5); }

/* ── 빈 화면: 허전하지 않게 ── */
.empty, .state {
  text-align: center;
  padding: 34px 20px !important;
  font-family: 'Pretendard', sans-serif !important;
  font-size: 14.5px !important;
  color: #8AA0B8;
  opacity: 1 !important;
}
.empty::before, .state::before { content: '🍿'; display: block; font-size: 34px; margin-bottom: 10px; }

/* ── 스켈레톤 로딩 (멈춘 것처럼 안 보이게) ── */
@keyframes pop-shimmer { 0% { opacity: .5; } 50% { opacity: 1; } 100% { opacity: .5; } }
.skel {
  border-radius: 20px;
  background: #E9F0F7;
  animation: pop-shimmer 1.2s ease-in-out infinite;
  border: none !important;
  box-shadow: none !important;
}
.skel-card { height: 240px; }
.skel-row { height: 84px; border-radius: 14px; margin: 10px 0; }

/* ── 칩 정돈: 작고 촘촘하게 ── */
.chip { font-size: 12.5px !important; padding: 5px 11px !important; }
.chip-row { gap: 6px !important; }
.f-row { margin: 6px 0 !important; }

/* ── 분류 그룹 박스: 파스텔 색으로 그룹 구분 (팝콘 팔레트) ── */
.grp {
  background: #F5F9FD; border-radius: 12px;
  padding: 10px 12px 11px; margin: 8px 0;
}
.grp > label { display: block; font-size: 13px; margin: 0 0 7px !important; font-weight: 700; opacity: 1 !important; color: #46617F; }
.req { color: #D85A30; font-size: 11.5px; font-weight: 700; margin-left: 3px; }
.opt { color: #8AA0B8; font-size: 11.5px; font-weight: 400; margin-left: 3px; }

/* 그룹별 색: 연령=하늘 / 주제=연노랑 / 유형=연민트 / 기기=연보라 / 역량=연코랄 / 업무=연회색 */
.grp-age   { background: #EAF4FE; }  .grp-age   > label { color: #1E5A96; }
.grp-theme { background: #FFF4D6; }  .grp-theme > label { color: #8A6100; }
.grp-type  { background: #E4F6EF; }  .grp-type  > label { color: #0F6E56; }
.grp-dev   { background: #F0ECFB; }  .grp-dev   > label { color: #53489B; }
.grp-comp  { background: #FDEEE9; }  .grp-comp  > label { color: #B04A2E; }
.grp-work  { background: #FFF4D6; }  .grp-work  > label { color: #8A6100; }
.grp-ai    { background: #E8EEFB; }  .grp-ai    > label { color: #3B57A9; }
/* 색 박스 안의 칩은 흰 바탕이라 또렷하게 보임 */
.grp .chip { background: #fff; border-color: rgba(30,58,95,.14); }
.grp .chip.on { background: var(--navy, #1E3A5F); border-color: var(--navy, #1E3A5F); color: #fff; }

/* ── 칩 격자 정렬: 같은 폭으로 끝선 맞춤 ── */
.chip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px;
}
.chip-grid .chip {
  width: 100%; text-align: center; padding: 5px 4px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 접이식 섹션 (분류·필터 정리용) ── */
details.pop-fold { margin: 12px 0; }
details.pop-fold > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 14px; font-weight: 700; color: #1E3A5F;
  padding: 11px 16px; border-radius: 12px; background: #EAF4FE;
  transition: background .15s ease;
}
details.pop-fold > summary:hover { background: #E6EEF6; }
details.pop-fold > summary::before { content: '▸ '; }
details.pop-fold[open] > summary::before { content: '▾ '; }
details.pop-fold > summary::-webkit-details-marker { display: none; }
details.pop-fold[open] > summary { margin-bottom: 6px; }

/* ── 모달 등장 애니메이션 ── */
@keyframes pop-in { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal.open .sheet, #consentModal > div { animation: pop-in .18s ease; }

/* ── 큰 세그먼트 탭 (guide 페이지 스타일 — 공통) ── */
.big-tabs {
  display: flex; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(30, 58, 95, .08); margin: 4px 0 14px;
}
.big-tab {
  flex: 1; font-family: 'Pretendard', sans-serif !important; font-weight: 700;
  font-size: 15px; padding: 14px 10px; border: none; cursor: pointer;
  background: #fff; color: #1E3A5F; opacity: .55; transition: all .2s ease;
}
.big-tab.on { background: #1E3A5F; color: #fff; opacity: 1; }

/* ── 알약 라벨 정보 행 (공통) ── */
.info-row { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0; }
.info-tag {
  flex-shrink: 0; font-weight: 700; font-size: 13px;
  background: #FFC93C; border-radius: 999px; padding: 6px 16px; min-width: 88px; text-align: center;
}
.info-body { font-size: 14px; line-height: 1.7; padding-top: 5px; word-break: keep-all; }

/* ── 로그인/가입 탭도 세그먼트 느낌으로 ── */
.tabs { border-radius: 14px; }
.tabs .tab { padding: 13px; font-size: 15.5px; border-radius: 12px; }

/* ── 유아 태블릿 화면 전용: 장난기 유지 (Jua 큰 제목·카드 제목만 남김) ── */
body.kids h1, body.kids .card-title, body.kids .thumb-ph, body.kids .state { font-family: 'Jua', sans-serif !important; }
body.kids { background: #EAF4FE; }