/* 공용 UI 시스템 — 이벤트(cass/halloween) 공통.
   tenten 디자인 시스템(DefaultButtonWidget·ToastOverlay·SheetDialogWidget) 포팅.
   이벤트별 팔레트/섹션 스타일은 각 이벤트 CSS에서 정의한다. */

@font-face {
  font-family: 'Freesentation';
  font-weight: 500;
  src: url('../fonts/common/Freesentation-5Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Freesentation';
  font-weight: 600;
  src: url('../fonts/common/Freesentation-6SemiBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Freesentation';
  font-weight: 700;
  src: url('../fonts/common/Freesentation-7Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'SeoulAlrim';
  font-weight: 900;
  src: url('../fonts/common/SeoulAlrim-Heavy.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'SeoulAlrim';
  font-weight: 800;
  src: url('../fonts/common/SeoulAlrim-ExtraBold.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'SeoulAlrim';
  font-weight: 700;
  src: url('../fonts/common/SeoulAlrim-Bold.otf') format('opentype');
  font-display: swap;
}
/* 숫자/영문 전용 (랭킹 순위·점수) */
@font-face {
  font-family: 'Pally';
  font-weight: 700;
  src: url('../fonts/common/Pally-Bold.otf') format('opentype');
  font-display: swap;
}

:root {
  /* 버튼(primary) — 디자인 시스템 basicBlue 토큰 */
  --btn-border: #1B00C7;
  --btn-shadow: #2200FD;
  --btn-bg: #3662FF;
  --btn-light: #87BDFF;
  --btn-text: #F4FBFF;
  /* 버튼(tertiary/헤더) — grey 토큰 */
  --tbtn-border: #767F8F;
  --tbtn-shadow: #C3C8D2;
  --tbtn-bg: #FCFCFC;
  /* 페이지 배경 · 콘텐츠 컬럼 폭 — 이벤트 CSS에서 덮어쓴다 */
  --page-bg: #fff;
  --col-max: 490px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  font-family: 'Freesentation', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.col {
  max-width: var(--col-max);
  margin: 0 auto;
}

/* ───────── 빌드 태그 ───────── */
.build-tag {
  position: fixed;
  top: 2px;
  right: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  z-index: 20;
}

/* ───────── 고정 헤더 ───────── */
.header {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 10;
}
.header .col {
  display: flex;
  justify-content: space-between;
  padding: 4px 20px 0;
}
.header .right { display: flex; gap: 12px; }

/* ───────── 3D 버튼 (DefaultButtonWidget 포팅) ─────────
   Flutter 구조: 아우터 보더(#1B00C7, 바깥쪽) → 그림자색 박스(#2200FD)
   → face가 바닥 4px만 남기고 채움(그림자는 아래에만 보임)
   → face 위·왼쪽 1px 이너 보더(#87BDFF). 누르면 face가 4px 내려감. */
/* 구조(Flutter DefaultButtonWidget 동일):
   .btn  = 투명 컨테이너 (점유 크기 고정 — 레이아웃 마진 규칙과 충돌 없음)
   .bd   = 아우터 보더 + 그림자색 박스. 눌리면 상단이 4px 내려오고
           바닥 그림자 4px가 접힌다 (바닥 엣지·전체 높이 고정)
   .face = 실제 버튼 면 */
.btn {
  /* flex 컨테이너: a 태그에서 .bd의 margin-top이 부모 밖으로
     상쇄(collapse)되어 바닥이 딸려 올라오는 문제를 차단한다 */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
.btn .bd {
  padding: 0 0 4px;
  margin-top: 0;
  background: var(--btn-shadow);
  border: 2px solid var(--btn-border);
  border-radius: 26px;
  overflow: hidden; /* face 모서리가 보더 밖으로 잘려 보이는 문제 방지 */
  /* Flutter AnimatedContainer(100ms)와 동일한 눌림 애니메이션 */
  transition: margin-top 0.1s ease-out, padding-bottom 0.1s ease-out;
}
.btn:active .bd {
  margin-top: 4px;
  padding-bottom: 0;
}
.btn .face {
  border-radius: 23px;
  background-color: var(--btn-bg);
  background-image: linear-gradient(to bottom,
    rgba(135, 189, 255, 0.3) 0%, rgba(135, 189, 255, 0.3) 50%,
    transparent 50%, transparent 100%);
  box-shadow: inset 1px 1px 0 var(--btn-light);
  color: #F4FBFF;
  /* Flutter 원본: 서울알림체 16px Heavy(900) */
  font-family: 'SeoulAlrim', 'Freesentation', sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.0;
  text-align: center;
  padding: 15px 16px 14px;
}
/* a 기본 링크 색(파랑/보라)이 비치지 않도록 명시 */
a.btn:link, a.btn:visited { color: #F4FBFF; }

/* 헤더 아이콘 버튼 (tertiary) — Flutter: 44px 컨텐츠 + radius 20, 아이콘 16px #434D5F */
.btn.icon { width: auto; }
.btn.icon .bd {
  background: var(--tbtn-shadow);
  border-color: var(--tbtn-border);
  border-radius: 20px;
}
.btn.icon .face {
  border-radius: 17px;
  color: #434D5F;
  background-color: var(--tbtn-bg);
  background-image: none;
  box-shadow: none;
  /* 전체 외형이 정사각(48×48)이 되도록: face 44×40 + 보더 4 + 바닥 그림자 4 */
  width: 44px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.btn .ic {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* 틴트는 .face의 color를 따른다 (primary=#F4FBFF, tertiary/icon=#434D5F) */
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
/* 라벨 + 선행 아이콘 묶음 */
.btn .tw {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ic-exit { --m: url('../images/common/exit.svg'); }
.ic-share { --m: url('../images/common/share.svg'); }
.ic-profile { --m: url('../images/common/profile.svg'); }
.ic-play { --m: url('../images/common/play.svg'); }
.ic-check { --m: url('../images/common/check.svg'); }

/* ───────── 버튼 변형 ───────── */
button.btn { font: inherit; text-align: center; }
.btn.grow { flex: 1; }
.btn.tertiary { width: auto; }
.btn.tertiary .bd {
  background: var(--tbtn-shadow);
  border-color: var(--tbtn-border);
}
.btn.tertiary .face {
  background-color: var(--tbtn-bg);
  background-image: none;
  box-shadow: none;
  color: #434D5F;
  padding: 15px 20px 14px;
}

/* small (button_default_small) — 36px 높이 */
.btn.sm { width: auto; }
.btn.sm .bd { border-radius: 18px; padding-bottom: 2px; }
.btn.sm:active .bd { margin-top: 2px; padding-bottom: 0; }
.btn.sm .face {
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 9px 16px 8px;
}
.btn.sm.tertiary .bd { border-color: var(--tbtn-shadow); }

/* 비활성 — 회색 토큰. `:disabled`는 클릭까지 막고,
   `.off`는 겉보기만 비활성이라 클릭은 살아 있다(안내 다이얼로그용). */
.btn:disabled { cursor: default; pointer-events: none; }
.btn:disabled .bd, .btn.off .bd { background: #C3C8D2; border-color: #AEB5C1; }
.btn:disabled .face, .btn.off .face {
  background-color: #E2E4E8;
  background-image: none;
  box-shadow: none;
  color: #9AA2B1;
}
/* .off 는 눌림 애니메이션도 끈다 (비활성처럼 보여야 하므로) */
.btn.off:active .bd { margin-top: 0; padding-bottom: 4px; }

/* ───────── 다이얼로그 (SheetDialogWidget 포팅) ───────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 20px;
}
.dlg {
  width: 100%;
  max-width: 440px;
  background: #F4FBFF;              /* basicBlue10 */
  border: 2px solid #3662FF;        /* basicBlue40 */
  border-radius: 20px;
  padding: 20px;
}
.dlg-title {
  font-family: 'SeoulAlrim';
  font-weight: 900;
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  white-space: pre-line;
  -webkit-text-stroke: 4px #3662FF;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #3662FF;
  margin-bottom: 20px;
}
.dlg-img {
  display: block;
  width: 100%;
  max-width: 291px;
  margin: 0 auto 12px;
}
.dlg-body {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #22334B;                   /* grey70 (textSecondary) */
  text-align: center;
  white-space: pre-line;
  margin-bottom: 28px;
}
.dlg-actions { display: flex; gap: 16px; }

/* 다이얼로그 안 입력 필드 (디자인시스템 input_field) */
.dlg-field { margin-bottom: 28px; }
.dlg-field input {
  width: 100%;
  height: 56px;
  padding: 16px 20px 16px 24px;
  font: 500 16px/24px 'Freesentation', sans-serif;
  color: #09111D;
  background: #FCFCFC;
  border: 2px solid #F7F7F8;
  border-radius: 16px;
  outline: none;
}
.dlg-field input::placeholder { color: #767F8F; }
.dlg-field input:focus { border-color: #3662FF; }
.dlg-field input.error { border-color: #FF4326; }
.dlg-field .cap {
  padding: 10px 20px 0 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #767F8F;
}
.dlg-field .cap.error { color: #FF4326; }

/* ───────── 발송 정보 바텀시트 (PersonalInfoForm 포팅) ───────── */
.sheet-overlay { align-items: flex-end; padding: 0; }
.sheet {
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
  max-height: 90vh;
  background: #FCFCFC;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sheet-titlebar {
  background: #3662FF;
  color: #fff;
  font-family: 'SeoulAlrim';
  font-weight: 900;
  font-size: 18px;
  text-align: center;
  padding: 14px;
  flex-shrink: 0;
}
.sheet-scroll { overflow-y: auto; padding: 24px 20px; }
.guide h4 {
  margin: 0 0 8px;
  font-family: 'SeoulAlrim';
  font-weight: 900;
  font-size: 16px;
  color: #09111D;
}
.guide p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #3662FF;
  white-space: pre-line;
}
.field { margin-top: 24px; }
.field-label {
  font-family: 'SeoulAlrim';
  font-weight: 900;
  font-size: 15px;
  color: #3662FF;
}
.field-desc {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #3662FF;
}
.field input {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  font: 500 16px 'Freesentation', sans-serif;
  color: #09111D;
  background: #fff;
  border: 1px solid #C3C8D2;
  border-radius: 12px;
  outline: none;
}
.field input:focus { border-color: #3662FF; }
.field input.error { border-color: #FF4326; }
.caption-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #FF4326;
}
.agreement { margin-top: 24px; }
.agreement label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #09111D;
  cursor: pointer;
}
.agreement input { width: 18px; height: 18px; accent-color: #3662FF; }
.agreement.error label { color: #FF4326; }
.notice { margin-top: 24px; }
.notice p {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: #767F8F;
}
.sheet-actions {
  display: flex;
  gap: 12px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #E2E4E8;
  flex-shrink: 0;
}

/* ───────── 토스트 (Flutter ToastOverlay 포팅) ─────────
   200ms easeOutBack으로 아래에서 bottom 100px까지 슬라이드, 2초 후 역재생 */
.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(100px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 200;
}
.toast .tbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #FCFCFC;              /* backgroundPrimary */
  border: 2px solid #C3C8D2;        /* borderSecondary */
  border-radius: 20px;
  font-family: 'SeoulAlrim';
  font-weight: 700;
  font-size: 14px;
  color: #22334B;                   /* textSecondary */
  white-space: nowrap;
  /* easeOutBack (Flutter Curves.easeOutBack 근사) */
  animation: toast-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.toast.hide .tbox {
  /* 역재생: easeOutBack의 reverse ≈ easeInBack */
  animation: toast-out 0.2s cubic-bezier(0.36, 0, 0.66, -0.56) both;
}
.toast .ic-notice {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: #FF5D5D;              /* accentNotice */
  -webkit-mask: url('../images/common/notice.svg') center / contain no-repeat;
  mask: url('../images/common/notice.svg') center / contain no-repeat;
}
@keyframes toast-in {
  from { transform: translateY(150px); }
  to { transform: translateY(0); }
}
@keyframes toast-out {
  from { transform: translateY(0); }
  to { transform: translateY(150px); }
}

/* ───────── 하이브리드 PoC 오버레이 ───────── */
#flutter-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #fff;
  visibility: hidden; /* display:none이면 Flutter 엔진이 0 크기로 초기화됨 */
}
#flutter-overlay.open { visibility: visible; }
#flutter-overlay-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: #09111D;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
#flutter-overlay-close {
  font: 600 13px 'Freesentation', sans-serif;
  color: #fff;
  background: #3662FF;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
#flutter-host { flex: 1; position: relative; }
#flutter-host flt-glass-pane, #flutter-host flutter-view { width: 100%; height: 100%; }

/* 하이브리드 테스트 버튼 (응모하기 위) */
.btn.hybrid .bd { background: #7A00E6; border-color: #4B0090; }
/* 워밍업 중: 눌린 상태로 고정 + 비활성 */
.btn.hybrid.warming { pointer-events: none; }
.btn.hybrid.warming .bd {
  margin-top: 4px;
  padding-bottom: 0;
}
.btn.hybrid.warming .face { opacity: 0.75; }
.btn.hybrid .face {
  background-color: #9D2BFF;
  background-image: linear-gradient(to bottom,
    rgba(221, 160, 255, 0.35) 0%, rgba(221, 160, 255, 0.35) 50%,
    transparent 50%, transparent 100%);
  box-shadow: inset 1px 1px 0 #DDA0FF;
}