@charset "UTF-8";
/* 프리 페이지(#sf2) 전용 CSS — 폰트·색상·크기·자간·줄간격·정렬 오버라이드. preview.jsp 에서만 로드 */

/* 이벤트 페이지(#sf2) 전체 텍스트 자간 normal 통일. 키비주얼 제목(h1.kv-h1b)만 -0.01em */
#sf2, #sf2 * { letter-spacing: normal !important;}
#sf2 h1.kv-h1b { letter-spacing: -0.01em !important; }

/* 카드 종이결 그레인 — var(--grain-card2) (예: #teaser .tz-card .img.art) */
#sf2 { --grain-card2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -.9 .55'/></filter><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23m)' opacity='.25'/><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* 고민 메모(.qt) 등에서 쓰는 종이결 그레인 — var(--grain-lite) */
#sf2 { --grain-lite: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -.9 .55'/></filter><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23m)' opacity='.5'/><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ═══════════ hero-half ═══════════ */
#sf2 section.hero-half .hh-copy .hh-in span.kv-pre { font-size: 17px; line-height: 26.35px; letter-spacing: -0.17px; }
#sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { font-size: 78px; line-height: 84.24px; letter-spacing: -2.73px; }
#sf2 section.hero-half .hh-in .hh-links p.kv-lg { font-size: 14px; line-height: 21.7px; letter-spacing: 0.14px; }
#sf2 section.hero-half .hh-links .t b { font-size: 18px; line-height: 27.9px; }
#sf2 section.hero-half .hh-mcta .actions button.btn.cta { font-size: 16px; line-height: 24.8px; }

/* ═══════════ nav.anchor ═══════════ */
#sf2 nav.anchor .wrap button { font-size: 16px; line-height: 24.8px; }

/* ═══════════ #early ═══════════ */
#sf2 #early .wrap .ep-head h2 { font-size: 52px; line-height: 65px; letter-spacing: -1.04px; }
#sf2 #early .wrap .ep-head span.eb-tag { font-size: 52px; line-height: 65px; letter-spacing: -1.04px; }
#sf2 #early .wrap .ep-head p.lead.eb-lead { font-size: 16px; line-height: 24.8px; }
#sf2 #early .eb5-body .eb5-intro h3 { font-size: 26px; line-height: 40.3px; letter-spacing: -0.52px; }
#sf2 #early .eb5-body .eb5-intro p.desc { font-size: 14px; line-height: 22.4px; }
#sf2 #early .pcard .info span.name { font-size: 13px; line-height: 19.5px; }
#sf2 #early .info .price span.was { font-size: 15px; line-height: 22.5px; }
#sf2 #early .info .price span.now { font-size: 16px; line-height: 24px; }
#sf2 #early .price .now span.pc { font-size: 16px; line-height: 24px; }
#sf2 #early .wrap .caution summary { font-size: 14px; line-height: 21.7px; }
#sf2 #early .wrap .caution ul.body li {position: relative;padding-left: .9em;list-style: none; font-size: var(--size-xs);color: var(--foreground-subtle);line-height: 1.8;}
#sf2 #early .wrap .caution ul.body li::before {content: '-';position: absolute;left: 0;}

/* ═══════════ #contest ═══════════ */
#sf2 #contest .ct2-copy .ct-tb span.sub { font-size: 49.3312px; line-height: 59.1974px; letter-spacing: -1.2032px; }
#sf2 #contest .ct2-copy .ct-tb span.hand { font-size: 97.4592px; line-height: 102.3322px; letter-spacing: -0.84224px; }
#sf2 #contest .ct2-grid .ct2-copy p.lead { font-size: 19px; line-height: 29.45px; margin-top: 36px !important; }
#sf2 #contest .ct2-copy .ct-flow span.no.en { font-size: 14px; line-height: 21.7px; }
#sf2 #contest .ct2-copy .ct-flow b { font-size: 18px; line-height: 27.9px; }
#sf2 #contest .ct2-copy .ct-flow p { font-size: 14px; line-height: 21.7px; }
#sf2 #contest .ct-flow .key span.no.en { font-size: 14px; line-height: 21.7px; }
#sf2 #contest .ct-flow .key b { font-size: 18px; line-height: 27.9px; }
#sf2 #contest .ct-flow .key p { font-size: 14px; line-height: 21.7px; }
#sf2 #contest .ct2-copy .ct2-act button.btn.cta { font-size: 16px; line-height: 24.8px; height: 48px; }
#sf2 #contest .ct-short .ct-sh-cap b { font-size: 14px; line-height: 19.6px; }
#sf2 #contest .ct-short .ct-sh-cap span { font-size: 12px; line-height: 16.8px; }
#sf2 #contest .ct-pl .th span.t { font-size: 11px; line-height: 14.3px; }
#sf2 #contest .marquee .track span.qt { font-size: 20px; line-height: 24px; }
#sf2 #contest .ct2-caution .caution summary { font-size: 14px; line-height: 21.7px; }
#sf2 #contest .caution .body li { font-size: 12px; line-height: 21.6px; }

/* ═══════════ #teaser ═══════════ */
#sf2 #teaser .wrap .ep-head h2 { font-size: 40px; line-height: 1.2; letter-spacing: -0.8px; }
#sf2 #teaser .wrap .ep-head p.tz-cd2 { font-size: 16px; line-height: 24.8px; }
/* 레퍼런스의 span.d/.t(D-데이·시간) = 16px — 실제 마크업은 .tz-cd2 .en(.cd-split) 한 덩어리라 거기에 적용 */
#sf2 #teaser .tz-cd2 .en { font-size: 16px; line-height: 24.8px; }
#sf2 #teaser .tz-card .tx span.ty { font-size: 12px; line-height: 18.6px; }
#sf2 #teaser .tz-card .tx h4 { font-size: 24px; line-height: 32.4px; letter-spacing: -0.48px; }
#sf2 #teaser .prealarm .txt h3 { font-size: 22px; line-height: 34.1px; }
#sf2 #teaser .prealarm .txt p.lead { font-size: 14px; line-height: 21.7px; }
#sf2 #teaser .prealarm .actions button.btn.cta { font-size: 16px; line-height: 24.8px; }
/* PC(≥1280px) #teaser 섹션 상·하 여백 */
@media (min-width: 1280px) { #sf2 section#teaser { padding-top: 136px; padding-bottom: 152px; } }

/* ─────────────── 태블릿 (768 ~ 1279px) ─────────────── */
@media (max-width: 1279px) {
  #sf2 section#teaser { padding-top: 120px; } /* ≤1279 teaser 상단 여백 */
  #sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { font-size: 56px; line-height: 60.48px; letter-spacing: -1.96px; }
  #sf2 #early .wrap .ep-head h2 { font-size: 48px; line-height: 60px; letter-spacing: -0.96px; }
  #sf2 #early .wrap .ep-head span.eb-tag { font-size: 48px; line-height: 60px; letter-spacing: -0.96px; }
  #sf2 #early .eb5-body .eb5-intro h3 { font-size: 24px; line-height: 37.2px; letter-spacing: -0.48px; }
  #sf2 #contest .ct2-copy .ct-tb span.sub { font-size: 39.36px; line-height: 47.232px; letter-spacing: -0.96px; }
  #sf2 #contest .ct2-copy .ct-tb span.hand { font-size: 77.76px; line-height: 81.648px; letter-spacing: -0.672px; }
  #sf2 #teaser .wrap .ep-head h2 { font-size: 34px; line-height: 1.2; letter-spacing: -0.68px; }
}

/* "11월 28일, 더 큰 혜택이 열려요" — PC 는 줄바꿈(br) 숨김 */
#sf2 #teaser .ep-head h2 .m-br { display: none; }

/* ─────────────── 모바일 (~ 767px) ─────────────── */
@media (max-width: 767px) {
  #sf2 section#teaser { padding-top: 80px; } /* 모바일 teaser 상단 여백 */
  #sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { font-size: 44px; line-height: 49.28px; letter-spacing: -1.32px; }
  #sf2 section.hero-half .hh-links .t b { font-size: 17px; line-height: 26.35px; }
  #sf2 nav.anchor .wrap button { font-size: 14px; line-height: 21.7px; }
  /* 모바일 앵커바 — 3칸 균등 그리드(가운데 '구해줘 뉴트!'가 화면 정가운데) + 하단 구분선 (시안 916차) */
  #sf2 nav.anchor .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-items: center; overflow-x: visible; }
  #sf2 nav.anchor .wrap > button { padding-inline: 4px; white-space: nowrap; }
  #sf2 nav.anchor { border-bottom: 1px solid rgba(31, 36, 48, .14) !important; }
  #sf2 #early .wrap .ep-head h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.64px; }
  #sf2 #early .wrap .ep-head span.eb-tag { font-size: 32px; line-height: 40px; letter-spacing: -0.64px; }
  #sf2 #early .wrap .ep-head p.lead.eb-lead { font-size: 14px; line-height: 21.7px; }
  #sf2 #early .eb5-body .eb5-intro h3 { font-size: 20px; line-height: 31px; letter-spacing: -0.4px; }
  #sf2 #early .pcard .info span.name { font-size: 12px; line-height: 18px; }
  #sf2 #early .info .price span.was { font-size: 12px; line-height: 18px; }
  #sf2 #early .info .price span.now { font-size: 15px; line-height: 22.5px; }
  #sf2 #early .price .now span.pc { font-size: 15px; line-height: 22.5px; }
  #sf2 #contest .ct2-copy .ct-tb span.sub { font-size: 32.6196px; line-height: 39.1435px; letter-spacing: -0.7956px; }
  #sf2 #contest .ct2-copy .ct-tb span.hand { font-size: 58.8744px; line-height: 61.818px; letter-spacing: -0.51714px; }
  #sf2 #contest .ct2-grid .ct2-copy p.lead { font-size: 14px; line-height: 21.7px; margin-top: 28px !important; }
  #sf2 #contest .ct2-copy .ct-flow b { font-size: 15px; line-height: 23.25px; }
  #sf2 #contest .ct-flow .key b { font-size: 15px; line-height: 23.25px; }
  #sf2 #contest .marquee .track span.qt { font-size: 15px !important; line-height: 1.2; padding: var(--p-3) var(--p-4) var(--p-2); }
  /* 모바일 구해줘뉴트 유의사항 가운데 정렬 (본문 글자는 좌측 유지) */
  #sf2 #contest .ct2-caution details.caution { display: flex; flex-direction: column; align-items: center; text-align: center; }
  #sf2 #contest .ct2-caution details.caution summary { justify-content: center; margin-left: 0; margin-right: 0; }
  #sf2 #contest .ct2-caution details.caution .body { text-align: left; }
  #sf2 #teaser .wrap .ep-head h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.56px; }
  /* 모바일에서 "11월 28일," 뒤 줄바꿈 */
  #sf2 #teaser .ep-head h2 .m-br { display: inline; }
  #sf2 #teaser .wrap .ep-head p.tz-cd2 { font-size: 15px; line-height: 23.25px; }
  #sf2 #teaser .tz-cd2 .en { font-size: 15px; line-height: 23.25px; }
  #sf2 #teaser .tz-card .tx h4 { font-size: 17px; line-height: 22.95px; letter-spacing: -0.34px; }
  #sf2 #teaser .prealarm .txt h3 { font-size: 20px; line-height: 31px; }
  #sf2 #teaser .prealarm .actions button.btn.cta { font-size: 15px; line-height: 23.25px; }
  #sf2 section.hero-half .hh-mcta .actions button.btn.cta { font-size: 15px; line-height: 23.25px; }
}

/* ═══════════ 정렬(text-align) · 줄바꿈(white-space) — 레퍼런스 명시 요소만 ═══════════ */
/* PC */
#sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { white-space: nowrap; }
#sf2 section.hero-half .hh-links .t b { text-align: left; }
#sf2 section.hero-half .hh-mcta .actions button.btn.cta { white-space: nowrap; }
#sf2 nav.anchor .wrap button { text-align: center; }
#sf2 #early .wrap .ep-head h2 { text-align: center; }
#sf2 #early .wrap .ep-head span.eb-tag { text-align: center; }
#sf2 #early .wrap .ep-head p.lead.eb-lead { text-align: center; }
#sf2 #early .pcard .info span.name { text-align: left; }
#sf2 #early .info .price span.was { text-align: left; }
#sf2 #early .info .price span.now { text-align: left; }
#sf2 #early .price .now span.pc { text-align: left; }
#sf2 #early .wrap .caution summary { text-align: center; }
#sf2 #contest .ct2-copy .ct2-act button.btn.cta { white-space: nowrap; }
#sf2 #contest .ct-short .ct-sh-cap b { text-align: left; }
#sf2 #contest .ct-short .ct-sh-cap span { text-align: left; }
#sf2 #contest .ct-pl .th span.t { text-align: left; }
#sf2 #contest .marquee .track span.qt { white-space: nowrap; }
#sf2 #teaser .wrap .ep-head h2 { text-align: center; }
#sf2 #teaser .wrap .ep-head p.tz-cd2 { text-align: center; }
#sf2 #teaser .tz-cd2 .en { text-align: center; }
#sf2 #teaser .prealarm .actions button.btn.cta { white-space: nowrap; }

/* 모바일(~767px)에서만 달라지는 정렬 */
@media (max-width: 767px) {
  #sf2 section.hero-half .hh-copy .hh-in span.kv-pre { text-align: center; }
  #sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { text-align: center; }
  #sf2 section.hero-half .hh-in .hh-links p.kv-lg { text-align: left; }
  #sf2 section.hero-half .hh-mcta .actions button.btn.cta { text-align: center; }
  #sf2 #teaser .prealarm .actions button.btn.cta { text-align: center; }
}

/* ═══════════ 색상(color) — 2-id 선택자로 공유 CSS·data-accent 규칙보다 우선 ═══════════ */
/* hero */
#sf2 section.hero-half .hh-copy .hh-in span.kv-pre { color: #eef7a8; }
#sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { color: #ffffff; }
/* 히어로 "공부방람회 페스타" — Pretendard Bold(700), 추출본 기준 */
#sf2 section.hero-half .hh-copy .hh-in h1.kv-h1b { font-family: var(--font-sans); font-weight: 700; }
#sf2 section.hero-half .hh-in .hh-links p.kv-lg { color: #ffffffe0; }
#sf2 section.hero-half .hh-links .t b { color: #ffffff; }
/* 바로가기 링크 화살표(chevron) — 파란 히어로 위라 기본 흰색. stroke="currentColor" 가 검게 잡히는 경우 대비 직접 지정 */
#sf2 section.hero-half .hh-links .arr svg { stroke: #ffffff; color: #ffffff; }
/* hover 시엔 배지가 흰색이 되므로 화살표는 어둡게(기존 디자인 유지) */
@media (hover: hover) { #sf2 section.hero-half .hh-links button:hover .arr svg { stroke: var(--grey-900); color: var(--grey-900); } }
/* #early */
#sf2 #early .wrap .ep-head h2 { color: #232120; }
#sf2 #early .wrap .ep-head span.eb-tag { color: #ffffff; }
#sf2 #early .wrap .ep-head p.lead.eb-lead { color: #575453; }
#sf2 #early .eb5-body .eb5-intro h3 { color: #232120; }
#sf2 #early .eb5-body .eb5-intro p.desc { color: #575453; }
#sf2 #early .pcard .info span.name { color: #232120; }
#sf2 #early .info .price span.was { color: #919089; }
#sf2 #early .info .price span.now { color: #232120; }
#sf2 #early .price .now span.pc { color: #c80a1e; }
#sf2 #early .wrap .caution summary { color: #575453; }
/* #contest (어두운 배경) */
#sf2 #contest .ct2-copy .ct-tb span.sub { color: #ffffff; }
#sf2 #contest .ct2-copy .ct-tb span.hand { color: #d4e36a; }
#sf2 #contest .ct2-grid .ct2-copy p.lead { color: #ffffffd9; }
#sf2 #contest .ct2-copy .ct-flow span.no.en { color: #ffffff99; }
#sf2 #contest .ct2-copy .ct-flow b { color: #ffffff; }
#sf2 #contest .ct2-copy .ct-flow p { color: #ffffffcc; }
#sf2 #contest .ct-flow .key span.no.en { color: #ffffff99; }
#sf2 #contest .ct-flow .key b { color: #d4e36a; }
#sf2 #contest .ct-flow .key p { color: #ffffffcc; }
#sf2 #contest .ct-short .ct-sh-cap b { color: #ffffff; }
#sf2 #contest .ct-short .ct-sh-cap span { color: #ffffffb2; }
#sf2 #contest .ct-pl .th span.t { color: #ffffff; }
/* 영상 썸네일 재생버튼 화살표(svg fill=currentColor) — 기본 흰색 (더 센 규칙에 밀려 !important + svg fill 직접 지정) */
#sf2 #contest .ct-sh-play { color: #ffffff !important; }
#sf2 #contest .ct-sh-play svg { fill: #ffffff !important; }
/* 사연 접수 완료(done) 버튼 체크 svg 색 = 버튼 글자색 (svg·내부 path 까지 버튼 색 상속) */
#sf2 #contest .ct2-act button.btn.cta.done svg,
#sf2 #contest .ct2-act button.btn.cta.done svg * { color: inherit !important; stroke: currentColor !important; }
#sf2 #contest .marquee .track span.qt { color: #232120; }
#sf2 #contest .ct2-caution .caution summary { color: #ffffff; }
/* 유의사항 옆 화살표(svg) — stroke="currentColor" 가 검게 잡히는 경우 대비해 흰색 직접 지정 */
#sf2 #contest .ct2-caution .caution summary svg { stroke: #ffffff; color: #ffffff; }
#sf2 #contest .caution .body{line-height: 1.8;}
#sf2 #contest .caution .body li { color: #ffffff; position: relative; padding-left: .9em;font-size: var(--size-xs);list-style: none;}
#sf2 #contest .caution .body li::before { content: '-';position: absolute;left: 0;}
/* #teaser */
#sf2 #teaser .wrap .ep-head h2 { color: #232120; }
#sf2 #teaser .wrap .ep-head p.tz-cd2 { color: #575453; }
#sf2 #teaser .tz-cd2 .en { color: #4a66cc; }
/* 카운트다운 간격 — 토큰(var(--p-*))으로 통일. 앞 간격 --p-2(8px), 날짜↔시간 바(|) 양쪽 --p-1-5(6px) */
#sf2 #teaser .tz-cd2 b.cd-split { margin-left: var(--p-2); gap: 0; }
#sf2 #teaser .tz-cd2 .cd-split .d::after { margin: 0 var(--p-1-5); }
/* 시간(00:00:00) 글자 자간 — 시안 기준으로 넓힘 */
#sf2 #teaser .tz-cd2 .cd-split .t { letter-spacing: 0.08em; }
#sf2 #teaser .tz-card .tx span.ty { color: #575453; }
#sf2 #teaser .tz-card .tx h4 { color: #232120; }
#sf2 #teaser .prealarm .txt h3 { color: #ffffff; }
#sf2 #teaser .prealarm .txt p.lead { color: #ffffffd1; }

/* ── 혜택 미리보기(teaser) — 색/폰트 ── */
/* 섹션 연회색 · 타이틀 NixgonFont 46px */
#sf2 #teaser .wrap .ep-head h2 { font-family: 'NixgonFont', var(--font-sans); font-size: 46px; color: #232120; letter-spacing: -0.02em !important; }
/* 카드: 거의 흰색 · 그림자 없음 · radius 10 / 그림칸: 웜 크림 */
#sf2 #teaser .tz-card { background: var(--grain-card2), #FFFFFE !important; box-shadow: none; border: 0; border-radius: 10px; }
#sf2 #teaser .tz-card .img.art { background: var(--grain-card2), #FCFAF6 !important;background-size: 480px 480px, auto !important; }
/* prealarm: 진파랑 → 연회색, 글자 어둡게, 버튼 다크 차콜 */
#sf2 #teaser .prealarm { background: #edf0f5; border-radius: 7px; }
#sf2 #teaser .prealarm .txt h3 { color: #1f2430; }
#sf2 #teaser .prealarm .txt p.lead { color: #5c6170; }
#sf2 #teaser .prealarm .actions button.btn.cta { background: #1f2430; border-color: #1f2430; color: #ffffff; }
#sf2 #teaser .prealarm .actions button.btn.cta svg { stroke: #ffffff; color: #ffffff; }
/* 하단 prealarm CTA 호버 = 히어로 버튼 호버와 동일(#3a4050) */
#sf2 #teaser .prealarm .actions button.btn.cta:hover:not(:disabled) { background: #3a4050; border-color: #3a4050; color: #ffffff; }
#sf2 #teaser .prealarm .actions button.btn.cta:hover svg { stroke: #ffffff; color: #ffffff; }
/* 신청 완료(done/disabled) 상태 CTA 도 동일 호버색 */
#sf2 #teaser .prealarm .actions button.btn.cta.done:hover { background: #3a4050; border-color: #3a4050; color: #ffffff; }
#sf2 #teaser .prealarm .actions button.btn.cta.done:hover svg { stroke: #ffffff; color: #ffffff; }
/* 모바일 하단 고정바 CTA 화살표(chevron) — 어두운 버튼 위, stroke="currentColor" 가 검게 잡히는 경우 대비 흰색 직접 지정 */
#sf2 #mbar button.btn.cta svg { stroke: #ffffff; color: #ffffff; }
@media (max-width: 1279px) { #sf2 #teaser .wrap .ep-head h2 { font-size: 40px; } }
@media (max-width: 767px) { #sf2 #teaser .wrap .ep-head h2 { font-size: 30px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   히어로 hh-pre-art(아이보리 패널·어두운 글자) + 얼리버드 eB-sec(장식 타이틀·신제품 2카드·상품 그리드)
   ═══════════════════════════════════════════════════════════════════════════ */

/* NixgonFont — 프로토 디스플레이 폰트(히어로·얼리버드·티저 타이틀). 로컬 woff(사내망 CDN 차단 대비) */
@font-face { font-family: 'NixgonFont'; src: url('/img/front/studyfesta/assets/fonts/NIXGONB-Vb.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ── 히어로: hh-pre-art(아이보리 판) ── */
/* 배경 = #FDFBF8 + 종이결 노이즈(grain-lite) */
#sf2 .hero-half.hh-pre-art { --hh-bg: #fdfbf8; color: #1f2430;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -.9 .55'/></filter><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23m)' opacity='.5'/><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 480px 480px; background-repeat: repeat; }
#sf2 .hero-half.hh-pre-art .hh-art { background: #fdfbf8; }
/* 아트:글 = 58:42(아트 더 크게). 기본 1fr:1fr 보다 왼쪽 이미지를 넓게 */
@media (min-width: 1280px) { #sf2 .hero-half.art-left.hh-pre-art { grid-template-columns: minmax(0, 29fr) minmax(0, 21fr); } }
@media (min-width: 768px) and (max-width: 1279px) { #sf2 .hero-half.art-left.hh-pre-art { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
/* 아트 이미지 — 책 일러스트를 왼쪽 기준으로 */
#sf2 .hero-half.hh-pre-art .hh-art img { object-position: 6% 50%; }
/* 아트 영상 — img 와 동일한 박스 채움(common 은 img 만 타겟) + 같은 기준 정렬 */
/* 영상을 사방 1px 오버드로우 — 스크롤 합성 중 서브픽셀 틈으로 video 기본 검정 배경이 비쳐 모서리에 검은 줄이 생기는 것 방지(overflow:hidden 이 여분을 자름) */
#sf2 .hh-art video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: 50% 30%; cursor: pointer; background: #fdfbf8; }
#sf2 .hero-half.hh-pre-art .hh-art video { object-position: 6% 50%; }
/* 히어로 영상 재생 버튼 — 기본은 뷰포트 진입 시 음소거 자동재생이므로 버튼은 '기본 숨김'(재생 시작 깜빡임 방지).
   데이터 절약·느린망·reduced-motion·자동재생 차단·수동 일시정지 시에만 .show-play 로 노출(트래픽 절약 폴백).
   shorts ct-sh-play 와 동일 톤. */
#sf2 .hh-art .hh-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; cursor: pointer; border-radius: 50%; background: rgba(31, 36, 48, .45); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s, background .25s; }
#sf2 .hh-art .hh-play svg { width: 26px; height: 26px; margin-left: 3px; }
#sf2 .hh-art.show-play .hh-play { opacity: 1; pointer-events: auto; }
#sf2 .hh-art.show-play .hh-play:hover { transform: scale(1.08); background: rgba(31, 36, 48, .6); }
/* 글 묶음 왼쪽 안쪽 여백 56px. 모바일은 스택이라 제외 */
@media (min-width: 768px) { #sf2 .hero-half.hh-pre-art .hh-copy .hh-in { padding-left: 56px !important; } }
/* '사전 이벤트' 라벨 — 16px·주황·살짝 위로 */
#sf2 section.hero-half.hh-pre-art .hh-copy .hh-in span.kv-pre { display: block; font-size: 16px; font-weight: 700; color: #fd7340; transform: translateY(-12px); }
/* 타이틀 '공부방람회 페스타' — NixgonFont 68px·살짝 위로 */
#sf2 section.hero-half.hh-pre-art .hh-copy .hh-in h1.kv-h1b { font-family: 'NixgonFont', var(--font-sans); font-weight: 700; font-size: 68px; line-height: 1.08; letter-spacing: -0.01em; color: #1f2430; transform: translateY(-12px); white-space: nowrap; }
/* 히어로 타이틀 레터링 이미지(공부방람회 페스타) — 글자 대신 mask, currentColor(잉크색)로 칠함.
   폭은 font-size 기준 em 이라 브레이크포인트별 크기에 맞춰 스케일. PC 한 줄(.one) / 모바일 두 줄(.two) */
#sf2 section.hero-half.hh-pre-art .hh-copy .hh-in h1.kv-h1b { line-height: 1; white-space: normal; max-width: 100%; }
#sf2 .hero-half.hh-pre-art .kv-title-img { display: block; width: 7.7em; max-width: 100%; aspect-ratio: 1884 / 247; background: currentColor; -webkit-mask: url(/img/front/studyfesta/assets/kv-title.webp) center / contain no-repeat; mask: url(/img/front/studyfesta/assets/kv-title.webp) center / contain no-repeat; }
#sf2 .hero-half.hh-pre-art .kv-title-img.two { display: none; }
/* 바로가기 묶음 */
#sf2 .hero-half.hh-pre-art .hh-links { margin-top: 40px; border-top: 0; }
#sf2 .hero-half.hh-pre-art .hh-links button { padding: 14px 0; border-bottom: 1px solid rgba(31,36,48,.3); color: #1f2430; }
#sf2 .hero-half.hh-pre-art .hh-links .arr { background: transparent; }
#sf2 section.hero-half.hh-pre-art .hh-links .t b { font-size: 18px; font-weight: 700; color: #1f2430; }
#sf2 section.hero-half.hh-pre-art .hh-links .arr svg { stroke: #1f2430; color: #1f2430; }
/* 묶음 소제목(kv-lg) — 앞 대시(::before) 제거, 앞 마진 32(첫째 0) + 아래 구분선.
   common.css 의 .kv-lg::before(대시)와 :not(:first-child){margin-top:56px !important} 를 덮어야 하므로 !important */
#sf2 section.hero-half.hh-pre-art .hh-in .hh-links p.kv-lg { display: flex; align-items: center; margin-top: 32px !important; padding-bottom: 6px; border-bottom: 1px solid rgba(31,36,48,.3); font-size: 14px; font-weight: 600; color: #4f93e6; }
#sf2 section.hero-half.hh-pre-art .hh-in .hh-links p.kv-lg:first-child { margin-top: 0 !important; }
#sf2 section.hero-half.hh-pre-art .hh-in .hh-links p.kv-lg::before { content: none; display: none; }
/* CTA — 다크 차콜 */
#sf2 .hero-half.hh-pre-art .hh-mcta .btn.cta { background: #1f2430; border-color: #1f2430; color: #ffffff; }
/* CTA 화살표(셰브론) 흰색 — svg stroke=currentColor 가 전역 규칙에 가려지지 않게 명시 */
#sf2 .hero-half.hh-pre-art .hh-mcta .btn.cta svg { stroke: #ffffff; color: #ffffff; }
/* CTA 호버 — 밝은 차콜(#3A4050) */
#sf2 .hero-half.hh-pre-art .hh-mcta .btn.cta:hover:not(:disabled) { background: #3a4050; border-color: #3a4050; color: #ffffff; }
#sf2 .hero-half.hh-pre-art .hh-mcta .btn.cta:hover svg { stroke: #ffffff; color: #ffffff; }
/* 히어로 신청 완료(done/disabled) CTA 도 동일 호버색 */
#sf2 .hero-half.hh-pre-art .hh-mcta .btn.cta.done:hover { background: #3a4050; border-color: #3a4050; color: #ffffff; }
/* 링크 호버 — 칸 다크 채움 끄고 글자·화살표 검정(ink) 유지 */
@media (hover: hover) {
  #sf2 .hero-half.hh-pre-art .hh-links button:hover { color: #1f2430; }
  #sf2 .hero-half.hh-pre-art .hh-links button:hover::before { transform: scaleY(0); }
  #sf2 section.hero-half.hh-pre-art .hh-links button:hover .t b { color: #1f2430; }
  #sf2 .hero-half.hh-pre-art .hh-links button:hover .arr { background: transparent; color: #1f2430; }
  #sf2 section.hero-half.hh-pre-art .hh-links button:hover .arr svg { stroke: #1f2430; color: #1f2430; }
}
/* 반응형 타이틀/라벨/소제목 */
@media (max-width: 1279px) {
  #sf2 section.hero-half.hh-pre-art .hh-copy .hh-in h1.kv-h1b { font-size: clamp(40px, 4.1vw, 64px); }
}
@media (max-width: 767px) {
  #sf2 section.hero-half.hh-pre-art .hh-copy .hh-in h1.kv-h1b { font-size: 47px; }
  #sf2 .hero-half.hh-pre-art .kv-title-img.one { display: none; }
  #sf2 .hero-half.hh-pre-art .kv-title-img.two { display: block; width: 4.8em; aspect-ratio: 1075 / 515; -webkit-mask-image: url(/img/front/studyfesta/assets/kv-title-mo.webp); mask-image: url(/img/front/studyfesta/assets/kv-title-mo.webp); margin-inline: auto; }
  #sf2 section.hero-half.hh-pre-art .hh-copy .hh-in span.kv-pre { font-size: 16px; transform: translateY(-8px); }
  #sf2 section.hero-half.hh-pre-art .hh-in .hh-links p.kv-lg { margin-top: 24px !important; font-size: 16px; }
  #sf2 section.hero-half.hh-pre-art .hh-in .hh-links p.kv-lg:first-child { margin-top: 0 !important; }
  #sf2 section.hero-half.hh-pre-art .hh-links .t b { font-size: 17px; }
}

/* ── 얼리버드 eB-sec: 섹션 ── */
#sf2 #early.eB-sec { background: #ffffff; padding-top: 104px; padding-bottom: 112px; }

/* 타이틀: 아치 kicker(주황 #E85A26) + 큰 "신제품 얼리버드 특가"(NixgonFont 68px) */
#sf2 #early .eB-head { text-align: center; }
#sf2 #early .eB-pre-t { margin: 0; }
#sf2 #early .eB-pre-t .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#sf2 #early .eB-pre-t .arc { display: block; width: 330px; max-width: 82%; height: auto; margin: 0 auto -2px; overflow: visible; }
#sf2 #early .eB-pre-t .arc text { font-family: 'NixgonFont', var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; fill: #e85a26; }
#sf2 #early .eB-pre-t .arc text textPath{ font-family: 'NixgonFont', var(--font-sans);}
#sf2 #early .eB-pre-t .eB-title { display: block; font-family: 'NixgonFont', var(--font-sans); font-size: 68px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: #34363C; }

/* 신제품 소개 2카드 + 상품 그리드 */
#sf2 #early .eS { margin-top: 72px; display: flex; flex-direction: column; gap: 32px; }
#sf2 #early .eS-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#sf2 #early .eS-card .eB-scene { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #e9e6e1; }
#sf2 #early .eS-card .eB-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sf2 #early .eS-card h3 { margin-top: 16px; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.48px; color: #1f2430; }
#sf2 #early .eS-card p.desc { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #4a4f5e; }
#sf2 #early .eS-all { border-top: 1px solid rgba(31,36,48,.18); padding-top: 28px; }
#sf2 #early .eS-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }

/* 상품 카드(eS-grid 전용 — cat 카테고리줄 + 상품명 2줄 + 가격 (N%) 표기) */
#sf2 #early .eS-grid .pcard .info span.cat { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; color: #6b7080; }
#sf2 #early .eS-grid .pcard .info span.name { font-size: 15px; line-height: 22.5px; color: #232120; -webkit-line-clamp: 2; min-height: 0; }
#sf2 #early .eS-grid .info .price span.was { font-size: 14px; line-height: 22.5px; color: #919089; }
#sf2 #early .eS-grid .info .price span.now { font-size: 17px; line-height: 24px; color: #232120; }
#sf2 #early .eS-grid .price .now span.pc { font-size: 17px; line-height: 24px; color: #c80a1e; }

/* 배송 안내 */
#sf2 #early .eB-ship { margin-top: 72px; text-align: center; font-size: 15px; color: #7a6e5e; }
#sf2 #early .eB-ship b { color: #232120; font-weight: 700; }
#sf2 #early .eB-ship .m-br { display: none; } /* 배송 안내 — 모바일에서만 '약 한 달' 앞 줄바꿈 */

/* ── 반응형 ── */
@media (max-width: 1279px) {
  #sf2 #early.eB-sec { padding-top: 80px; padding-bottom: 88px; }
  #sf2 #early .eB-pre-t .eB-title { font-size: 43px; }
  #sf2 #early .eS-card h3 { font-size: 22px; }
}
@media (max-width: 1023px) {
  #sf2 #early .eS-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 767px) {
  #sf2 #early.eB-sec { padding-top: 56px; padding-bottom: 64px; }
  #sf2 #early .eB-pre-t .arc { width: 226px; max-width: 80%; margin-bottom:2px; }
  #sf2 #early .eB-pre-t .arc text { font-size: 26px; }
  #sf2 #early .eB-pre-t .eB-title { font-size: 38px; letter-spacing: -0.02em; }
  #sf2 #early .eS { margin-top: 48px; gap: 32px; }
  #sf2 #early .eS-intro { grid-template-columns: 1fr; gap: 24px; }
  #sf2 #early .eS-card h3 { font-size: 20px; }
  #sf2 #early .eS-card p.desc { font-size: 14px; }
  #sf2 #early .eS-all { padding-top: 24px; }
  #sf2 #early .eS-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
  #sf2 #early .eS-grid .pcard .info span.cat { font-size: 12px; }
  #sf2 #early .eS-grid .pcard .info span.name { font-size: 14px; }
  #sf2 #early .eS-grid .info .price span.was { font-size: 13px; }
  #sf2 #early .eS-grid .info .price span.now { font-size: 15px; }
  #sf2 #early .eS-grid .price .now span.pc { font-size: 15px; }
  #sf2 #early .eB-ship { margin-top: 44px; font-size: 13px; }
  #sf2 #early .eB-ship .m-br { display: inline; }
  #sf2 .hero-half.hh-pre-art .hh-links button { padding: 12px 0; }
}

/* ── 구해줘 뉴트(contest) — 섹션 배경 밝은 파랑 · 타이틀/키 노랑 · 고민칩 테이프 메모 ── */
#sf2 #contest.contest-sec { background: #67a7ff; }
/* "공부방 고민해결, / 구해줘 뉴트!" 타이틀 — 두 줄 모두 NixgonFont 700, hand 는 노랑 */
#sf2 #contest .ct2-copy .ct-tb span.sub { font-family: 'NixgonFont', var(--font-sans); font-weight: 700; }
#sf2 #contest .ct2-copy .ct-tb span.hand { font-family: 'NixgonFont', var(--font-sans); font-weight: 700; color: #ffe678; }
/* 진행 단계 강조("5가구 선정") — 노랑 */
#sf2 #contest .ct-flow .key b { color: #ffe678; }
/* 이런 고민을 기다려요 — 테이프 붙인 메모지(회전·파스텔·그림자) */
#sf2 #contest .ct-worries { border-top: 0; padding-top: 0; }
#sf2 #contest .ct-worries .marquee { padding: 20px 0 16px; }
#sf2 #contest .ct-worries .track { gap: 16px; align-items: flex-start; }
#sf2 #contest .ct-worries .qt { position: relative; padding: 16px 20px 12px; border-radius: 2px; background: #FFF7DE; color: #232120; font-family: 'NixgonFont', var(--font-sans); font-weight: 700; font-size: 18px !important; line-height: 1.2; white-space: nowrap; box-shadow: 2px 3px 0 rgba(20, 40, 90, .16); transform: rotate(-2deg); }
#sf2 #contest .ct-worries .track span.qt { color: #232120; }
#sf2 #contest .ct-worries .qt:nth-child(3n+2) { transform: rotate(1.5deg); background: #FFE3EA ; }
#sf2 #contest .ct-worries .qt:nth-child(3n) { transform: rotate(-0.8deg); background: #E6EFFF; }
#sf2 #contest .ct-worries .qt::after { content: none; }
#sf2 #contest .ct-worries .qt::before { content: ''; position: absolute; top: -9px; left: 50%; width: 46px; margin-left: -23px; background: rgba(170, 215, 255, .75);box-shadow: inset 0 0 0 1px rgba(70, 120, 190, .45);height: 15px; transform: rotate(-3deg); }
/* 고민 메모(.qt) — 종이결 그레인 + 크림옐로 + 테두리/그림자 (nth-child 색변주 !important 통일) */
#sf2 #contest .ct-worries .qt { color: #4A4036 !important; background-image: var(--grain-lite) !important; background-size: 480px 480px !important;  border: 1px solid rgba(160,120,40,.35) !important; border-radius: 2px !important; }


/* preview 팝업(.dim[data-modal])을 GNB·챗봇·사이드메뉴 위로 */
#sf2 .dim { z-index: 1000; }

@media (max-width: 767px) {
  .asdFltingBox { bottom: 100px !important; }
  /* 모바일 preview: 팝업(.dim[data-modal]) 열리면 챗봇 박스 숨김 */
  body:has(#sf2 .dim[data-modal]:not([hidden])) .asdFltingBox { display: none !important; }
}