/* edutalk.css — 26겨울 CMS 사고력 에듀토크 시청 예약. 구성은 MG 에듀토크 예약 페이지, 색·로고·글꼴은 CMS 신규 BI(261023 Basic System)
   기준: 70_MT_MKT_Planning/30_CMS브랜드_로고. 글꼴 CreverseDo = 하는체, CreverseKnow = 아는체(BI 지정 서체) */
@font-face {
  font-family: 'CreverseDo';
  src: url('https://codingdivstorage.blob.core.windows.net/web/fonts/DoR.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'CreverseKnow';
  src: url('https://codingdivstorage.blob.core.windows.net/web/fonts/KnowR.woff2') format('woff2');
  font-display: swap;
}
:root {
  /* CMS 신규 BI 1.9 Color System: 사고력 Division Color + Secondary, Primary Charcoal, Neutral */
  --orange: #F68B33;       /* CMS Thinking Orange */
  --orange-dark: #F37032;  /* Secondary Dark — 흰 글자 버튼·강조 */
  --orange-light: #FCC190; /* Secondary Light */
  --orange-pale: #FEE4CD;  /* Secondary Pale */
  --charcoal: #414042;     /* CMS Charcoal (Primary) */
  --gray1: #58595B; --gray2: #808285; --gray3: #A7A9AC; --light-gray: #D1D2D4;
  --red: var(--orange-dark); --red-soft: var(--orange-pale);
  --cream: #FFF4EA; --dark: var(--charcoal);
  --card: #F4F4F5; --ink: var(--charcoal); --sub: var(--gray1); --line: #E6E7E8; --err: #D6283F;
  --font-head: 'CreverseDo', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body: 'CreverseKnow', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #E9E9EA; color: var(--ink); -webkit-font-smoothing: antialiased;
       font-family: var(--font-body); word-break: keep-all; }
[hidden] { display: none !important; }
.page { max-width: 490px; margin: 0 auto; background: #fff; min-height: 100vh; overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom); }
section { padding: 40px 24px 48px; }
.title { font-family: var(--font-head); margin: 0; font-size: 26px; font-weight: 400; text-align: center; letter-spacing: -.03em; }

/* 상단 한 줄 안내 + 타이틀 이미지, 이미지 아래는 운영 화면의 차콜 배경 유지 */
.head { background: var(--charcoal); color: #fff; text-align: center; padding: 0 24px 32px; }
/* 로고: 배포 PNG에 최소공간(1/2A)이 포함돼 있어 자르지 않는다. 가로형 최소 높이 5mm 이상 */
.logo { display: block; width: 168px; height: auto; margin: 0 auto 14px; }
.live { font-family: var(--font-head); display: inline-flex; align-items: center; gap: 6px; background: var(--red); font-size: 13px;
        letter-spacing: .12em; padding: 5px 12px; border-radius: 4px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hero-strip { display: flex; align-items: center; justify-content: center; gap: 8px;
              margin: 0 -24px; padding: 16px 8px; white-space: nowrap; }
.hero-strip .live { flex: none; font-size: 11px; padding: 5px 8px; }
.event-heading { display: flex; align-items: center; gap: 8px; text-align: left; }
.event-title { font-family: var(--font-head); font-size: clamp(16px, 4.8vw, 20px); font-weight: 700; line-height: 1.2; color: #fff; }
.collab { font-size: clamp(12px, calc(3vw + 2px), 14px); font-weight: 700; line-height: 1.4; color: var(--light-gray); }
.collab span { margin: 0 3px; }
.head .hero-title { margin: 0 -24px; font-size: 0; line-height: 0; }
.hero-title img { display: block; width: 100%; height: auto; }
.head .info { margin: 26px 0 0; background: rgba(255,255,255,.08); text-align: left; }
.head .row { border-bottom-color: rgba(255,255,255,.14); }
.head .row dt { color: var(--gray3); }
.perks-box { margin-top: 20px; padding: 18px 16px; border: 2px solid var(--orange); border-radius: 14px;
             background: var(--cream); color: var(--charcoal); text-align: left; }
.perks-title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--orange-light);
               font-family: var(--font-head); font-size: 20px; font-weight: 400; text-align: center; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.6; }
.perks li { position: relative; padding-left: 24px; }
.perks li::before { content: "🎁"; position: absolute; left: 0; top: 0; }
.perks b { color: var(--charcoal); }

/* 신청서 */
.notice { display: flex; align-items: center; gap: 12px; background: var(--cream); border-radius: 14px; padding: 12px 16px; text-align: left; font-size: 15px; line-height: 1.6; font-weight: 600; margin: 18px 0 24px; }
.notice b { color: var(--orange-dark); }
.notice img { flex: none; width: 76px; height: auto; }
.info { background: var(--card); border-radius: 14px; padding: 6px 18px; margin: 0 0 28px; }
.row { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.row:last-child { border-bottom: 0; }
.row dt { width: 44px; flex: none; color: var(--sub); font-weight: 600; }
.row dd { margin: 0; font-weight: 700; }
.closed { padding: 24px 16px; text-align: center; font-size: 16px; line-height: 1.7; font-weight: 700; background: var(--cream); border-radius: 14px; }
.closed img { display: block; width: 51px; height: auto; margin: 0 auto 10px; }
.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.field > label i { color: var(--red); font-style: normal; margin-left: 2px; }
input[type=text], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 14px; border: 1px solid var(--light-gray); border-radius: 10px;
  background: #fff; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%);
         background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.other { display: none; margin-top: 8px; }
.hint { font-weight: 500; color: var(--sub); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: block; padding: 10px 14px; border: 1px solid var(--light-gray); border-radius: 999px; font-size: 15px; font-weight: 600; background: #fff; }
.chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--red-soft); }
.agree { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; margin: 24px 0 8px; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; font-size: 14px; line-height: 1.5; cursor: pointer; }
.chk + .chk { border-top: 1px solid var(--line); }
.chk input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--red); }
.privacy-details { color: var(--sub); font-size: 12.5px; line-height: 1.6; padding-bottom: 14px; }
.privacy-details ul { margin: 0; padding-left: 18px; }
.privacy-details p { margin: 12px 0 0; }
.err { color: var(--err); font-size: 14px; font-weight: 600; min-height: 20px; margin: 8px 0; text-align: center; }
.btn { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--red); color: #fff; font-family: var(--font-head);
       font-size: 18px; font-weight: 400; padding: 17px; cursor: pointer; text-align: center; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; }
.obtn { display: block; width: 100%; margin-top: 8px; border: 1.5px solid var(--red); background: #fff; color: var(--orange-dark);
        border-radius: 12px; font-family: var(--font-head); font-size: 16px; font-weight: 400; padding: 14px; cursor: pointer; text-align: center; text-decoration: none; }
.btn.kakao { background: #FEE500; color: #191919; }

/* 완료 */
.done { text-align: center; padding: 64px 24px 40px; }
.done .ok-char { display: block; width: 84px; height: auto; margin: 0 auto 16px; }
.done h3 { font-family: var(--font-head); font-weight: 400; margin: 0; font-size: 22px; }
.done p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--sub); }
.done .info { margin-top: 28px; text-align: left; }
.sub-h { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.links, .save, .share { margin-top: 32px; }
.share { border-top: 1px solid var(--line); padding-top: 32px; }
.share-char { display: block; width: 72px; height: auto; margin: 0 auto 10px; }
.share p { margin: 0 0 14px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
         background: rgba(65,64,66,.94); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center;
         padding: 12px 18px; border-radius: 12px; width: max-content; max-width: calc(100% - 32px); transition: .25s; z-index: 20; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.imgview { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 10; padding: 24px 16px; overflow: auto; }
.imgview.on { display: block; }
.imgview > div { max-width: 360px; margin: 0 auto; text-align: center; color: #fff; }
.imgview p { margin: 0 0 12px; font-size: 15px; }
.imgview img { width: 100%; border-radius: 12px; -webkit-touch-callout: default; }
.imgview .obtn { margin-top: 14px; background: transparent; color: #fff; border-color: #fff; }
footer { text-align: center; font-size: 12px; color: var(--gray2); padding: 28px 24px 12px; }
footer img { display: block; width: 140px; height: auto; margin: 0 auto 2px; }

@media (max-width: 360px) {
  section, .head { padding-left: 16px; padding-right: 16px; }
  .head .hero-title { margin-left: -16px; margin-right: -16px; }
  .hero-strip { margin-left: -16px; margin-right: -16px; }
}

/* 라이브 종료 후 화면 (2026-11-10): 마감 안내 + 라이브 영상 */
.head-closed { padding-bottom: 0; }
.closed-sec { padding-top: 32px; }
.video-h { margin-top: 32px; text-align: center; }
.video { position: relative; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.closed-sec .obtn, .closed-sec .btn { margin-top: 12px; text-align: center; text-decoration: none; }
.benefit-contact { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.benefit-contact h2 { margin: 0 0 8px; font-size: 18px; }
.benefit-contact p { margin: 0; font-size: 15px; line-height: 1.6; }