/* 글꼴 이름은 "Pretendard" — Figma 파일의 글꼴 이름과 같게(캡처 때 그대로 들어감) */
@font-face { font-family: "Pretendard"; src: url("assets/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-display: block; }
@font-face { font-family: "Cafe24 Dongdong"; src: url("assets/Cafe24Dongdong.woff") format("woff"); font-weight: 400; font-display: block; }
:root {
  --font-sans: Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: "Cafe24 Dongdong", var(--font-sans);
  --bg-gateway: #d6e6f4; --bg-outside: #312e43; --bg-dim: rgba(29,29,29,.75);
  --blue-500: #2694f3; --blue-800: #174faf; --blue-hl: #67b4f7; --gray-500: #8e8e93;
  --card-kids: #fefbe5; --pill-kids: #fed829; --card-border: #92c7ec; --desc: #33322e;
  --m-vw: 100vw;
  min-width: 320px; font-size: clamp(13.13px, calc(var(--m-vw) * 16 / 390), 16px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: #000; word-break: keep-all; background: var(--bg-outside); }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.frame { min-height: 100vh; min-height: 100dvh; }
.app { position: relative; max-width: 640px; min-width: 320px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg-gateway); overflow: hidden; }
/* 하단 배경: 영역 높이는 450(390 기준) 그대로, 390 보다 넓으면 폭에 꽉 차게 확대하고 위쪽(하늘)을 잘라 냄 — 좌우 잘림 없음 */
.bg { position: absolute; left: 0; right: 0; bottom: 0; height: 28.125rem; background: url("assets/bg.png") center bottom / cover no-repeat; }
.col { position: relative; z-index: 1; width: 100%; max-width: 22rem; margin: 0 auto; padding: 5.25rem 1.25rem 0; display: flex; flex-direction: column; align-items: center; }
.title { width: 18.4375rem; max-width: 100%; line-height: 0; }
.title img { width: 100%; height: auto; }
.lead { margin-top: 1.5rem; white-space: nowrap; font-size: 1.25rem; font-weight: 500; line-height: 1.2; color: var(--gray-500); }
.lead strong { color: var(--blue-800); font-weight: 700; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 19.1875rem; height: 9.6875rem; margin-top: 1.15rem; padding: 0 1.4375rem 0.5rem; border: 1px solid var(--card-border); border-radius: 0.625rem; background: #fff; overflow: hidden; }
.card + .card { margin-top: 0.9375rem; }
.kids { background: var(--card-kids); }
/* 제목 줄: 이름·구분선·설명의 가로 위치는 원본 측정값(사용자 지정 2026-10-16 — 이름 왼쪽 0.7rem, 구분선 좌 1rem·우 0.8rem), 위 여백은 원본보다 6 넓힘(사용자 검토) */
.head { align-self: stretch; display: flex; align-items: center; padding: 0.875rem 0 0 0.7rem; white-space: nowrap; }
.name { flex: none; font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--blue-800); }
.bar { flex: none; width: 1px; height: 1.25rem; margin: 0 0.8rem 0 1rem; background: var(--blue-800); }
.desc { flex: none; font-size: 0.8rem; letter-spacing: -0.03em; font-weight: 400; color: var(--desc); white-space: nowrap; }
/* 원본 디자인과 템플릿 대조로 맞춘 위치·크기(카드 바깥 테두리 위 기준 — absolute 는 테두리 안쪽 기준이라 1px 뺌): 어린이 위 34.7·폭 127.6, 청소년 위 38·폭 134 */
.illust { position: absolute; top: 2.4813rem; left: 50%; transform: translateX(-50%); width: 7.975rem; height: auto; }
.teen .illust { width: 8.375rem; top: 2.6875rem; }
.head { position: relative; z-index: 1; }
.pill { position: absolute; left: 1.4375rem; right: 1.4375rem; bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 1.75rem; border-radius: 1rem; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.kids .pill { background: var(--pill-kids); color: var(--blue-800); }
.teen .pill { background: var(--blue-500); color: #fff; }
.chev { position: relative; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; }
.chev::after { content: ""; position: absolute; left: 0.3rem; top: 0.375rem; width: 0.4375rem; height: 0.4375rem; border-top: 2px solid var(--blue-800); border-right: 2px solid var(--blue-800); transform: rotate(45deg); }
.card:active .pill { filter: brightness(0.85); }
.slogan { margin-top: 2.25rem; text-align: center; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.1em; line-height: 1.2; color: var(--blue-800); }  /* Figma 텍스트 스타일 text/cafe24-20-24-ls-2 와 같게 */
.slogan strong { font-weight: 400; color: var(--blue-500); }
.footer { position: relative; z-index: 1; margin-top: auto; display: flex; justify-content: center; padding: 1.5rem 1.5625rem 1.75rem; }
.footer img { width: 9.625rem; height: auto; }
/* 준비중 팝업 */
.dim { position: fixed; inset: 0; z-index: 100; background: var(--bg-dim); }
.dialog { position: fixed; z-index: 110; top: 50%; left: max(50%, 160px); transform: translate(-50%, -50%); width: min(20.3125rem, calc(max(100%, 320px) - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 0.625rem; background: #fff; text-align: center; }
.dhead { position: relative; line-height: 0; background: #93caf9; }
.dhead img { width: 100%; height: auto; }
.close { position: absolute; top: 0.6875rem; right: 0.625rem; width: 1.25rem; height: 1.25rem; padding: 0; border: 2px solid #a3a3a3; border-radius: 50%; background: none; }
.close::before, .close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.6875rem; height: 2px; background: #a3a3a3; transform: translate(-50%, -50%) rotate(45deg); }
.close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.dtitle { margin-top: 1.5rem; font-size: 2.5rem; font-weight: 800; line-height: 1.2; color: var(--blue-500); }
.dbody { margin-top: 0.625rem; font-size: 1.1875rem; font-weight: 400; line-height: 1.875rem; color: #000; }
.dbody b { font-weight: 700; color: var(--blue-hl); font-size: 1.25rem; }
.dbody strong { font-weight: 800; color: var(--blue-500); font-size: 1.25rem; }
.dactions { padding: 1.875rem 1.25rem 1.25rem; }
/* 학생 기본 버튼(UCM-08 primary block) 값 그대로 */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 55px; padding: 0 1.25rem; border: 1px solid var(--blue-500); border-radius: 10px; background: var(--blue-500); color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; }
/* 팝업이 열려 있는 동안 뒤 화면 스크롤 막음 */
body.modal-open { overflow: hidden; }
.btn:focus-visible { outline: 2px solid var(--blue-800); outline-offset: 2px; }
.close:focus-visible { outline: 2px solid var(--blue-800); outline-offset: 2px; }