@charset "UTF-8";
/* 공부방람회 시즌 2 — 실페이지 공통 토대(common). #sf2 스코프 전용.
   프리·메인·파이널 실페이지가 공유하는 디자인 시스템:
   토큰(--p-*·--size-*·색)·리셋·타이포·버튼·폼·모달·섹션 스캐폴드·카운트다운·쇼츠·유의사항 등.
   페이지 전용 규칙은 각 페이지 전용 CSS(preview.css 등)에서 뒤에 로드해 덮는다. */
@font-face { font-family: "Pretendard GB"; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url(/img/front/studyfesta/assets/fonts/Pretendard-Regular.woff2) format('woff2'); }
@font-face { font-family: "Pretendard GB"; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url(/img/front/studyfesta/assets/fonts/Pretendard-Medium.woff2) format('woff2'); }
@font-face { font-family: "Pretendard GB"; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url(/img/front/studyfesta/assets/fonts/Pretendard-SemiBold.woff2) format('woff2'); }
@font-face { font-family: "Pretendard GB"; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url(/img/front/studyfesta/assets/fonts/Pretendard-Bold.woff2) format('woff2'); }
#sf2 {
  --key: #5380e7;
  --grey-0: #ffffff; --grey-50: #f9f9f8; --grey-100: #f2f1f0; --grey-200: #e4e2e0; --grey-300: #c8c5c2;
  --grey-400: #aca9a7; --grey-500: #919089; --grey-600: #726f6d; --grey-700: #575453; --grey-800: #3a3837;
  --grey-900: #232120; --grey-1000: #000000;
  --primary-300: #c8c5c2; --primary-600: #726f6d; --primary-800: #3a3837; --primary-900: #232120;
  --orange-red-500: #fd1e1e;
  --yellow-900: #a77300;
  --grey-opacity-20: #23212003; --grey-opacity-80: #23212014; --grey-opacity-500: #23212080; --grey-opacity-700: #232120b2;
  --base-opacity-500: #ffffff80;
  --foreground-regular: var(--grey-900);
  --foreground-secondary: var(--grey-700);
  --foreground-subtle: var(--grey-500);
  --foreground-muted: var(--grey-400);
  --foreground-emphasized: var(--orange-red-500);
  --foreground-inverted-regular: var(--grey-0);
  --foreground-inverted-muted: var(--grey-400);
  --background-regular: var(--grey-0);
  --background-subtle: var(--grey-100);
  --background-muted: var(--grey-200);
  --background-inverted: var(--grey-900);
  --background-error: var(--orange-red-500);
  --border-regular: var(--grey-700);
  --border-subtle: var(--grey-400);
  --border-muted: var(--grey-200);
  --border-emphasized: var(--grey-1000);
  --input-bg-regular: var(--grey-0);
  --thumb-bg: #f0f0f0;
  --scene-bg: #f9f5ea;
  --p-0-5: 2px; --p-1: 4px; --p-1-5: 6px; --p-2: 8px; --p-2-5: 10px; --p-3: 12px; --p-3-5: 14px; --p-4: 16px;
  --p-5: 20px; --p-6: 24px; --p-8: 32px; --p-9: 36px; --p-10: 40px; --p-12: 48px; --p-14: 56px; --p-16: 64px; --p-20: 80px;
  --radius-xs: 2px; --radius-base: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  /* studyfesta 전용 static Pretendard(="Pretendard GB") — 전역 Variable 'Pretendard' 에 가려지지 않도록 family 명 분리 */
  --font-sans: "Pretendard GB", "Pretendard", -apple-system, sans-serif;
  --font-en: "Plus Jakarta Sans", "Pretendard GB", "Pretendard", sans-serif;
  --size-xs: 12px; --size-sm: 14px; --size-base: 16px; --size-lg: 18px; --size-xl: 22px; --size-2xl: 24px;
  --size-3xl: 26px; --size-4xl: 32px; --size-5xl: 40px; --size-6xl: 52px; --size-7xl: 64px;
  --leading-normal: 1.55; --leading-tight: 1.25; --tracking: -0.006em;
  --side: 32px;
  --sec-top: 80px;
  --sec-pad: 96px;
  --head-gap: 64px;
  --sec-bottom: 120px;
  --content: 1200px;
  --content-wide: 1600px;
}
@media (max-width: 1279px) {
  #sf2 { --side: 24px; --sec-pad: 80px; --head-gap: 48px; --size-3xl: 24px; --size-4xl: 28px; --size-5xl: 34px; --size-6xl: 48px; --size-7xl: 56px; }
}
@media (max-width: 767px) {
  #sf2 { --side: 16px; --sec-top: 56px; --sec-pad: 56px; --head-gap: 32px; --sec-bottom: 100px;
    --size-base: 15px; --size-lg: 17px; --size-xl: 20px; --size-2xl: 22px; --size-3xl: 22px; --size-4xl: 25px; --size-5xl: 32px; --size-6xl: 36px; --size-7xl: 40px; }
}
/* #sf2 리셋 배리어 — 사이트 전역 author CSS(gnb.css·newReset·newiloomStyle 등 16종)가
   #sf2(이벤트 본문) 안으로 새는 것을 차단한다. all:revert 로 전역 author 값을 UA 기본으로 되돌려 무력화하고,
   아래 common.css + preview.css 규칙(특이도 ≥ #sf2 .class 1,1,0)으로만 다시 꾸민다.
   · custom property(--* 토큰)는 all 이 건드리지 않아 유지됨
   · GNB/푸터는 #sf2 바깥(형제)이라 영향 없음 → 프로젝트 CSS 그대로
   · 전역 !important 규칙은 배리어를 뚫으므로 발견 시 common.css 에서 개별 대응 */
/* SVG 하위는 revert 제외(인라인 SVG 깨짐 방지). :where() 로 감싸 특이도를 0 으로 유지해야
   배리어가 (1,0,0) 에 머물러 아래 리셋(#sf2 *, #sf2 button 등)·디자인 규칙이 배리어를 덮는다.
   (:not 을 그냥 쓰면 특이도가 올라가 버튼이 UA 테두리=박스로 되돌아가고 여백·자간이 틀어진다) */
#sf2, #sf2 *:where(:not(svg, svg *)), #sf2 *:where(:not(svg, svg *))::before, #sf2 *:where(:not(svg, svg *))::after { all: revert; }
#sf2 * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-sans);}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
#sf2 { font-family: var(--font-sans); font-size: var(--size-base); line-height: var(--leading-normal); color: var(--foreground-regular); background: var(--background-regular); -webkit-font-smoothing: antialiased; word-break: keep-all; }
#sf2 button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
#sf2 button:disabled { cursor: default; }
#sf2 input, #sf2 textarea { font: inherit; color: inherit; }
#sf2 img, #sf2 svg { display: block; }
#sf2 ul, #sf2 ol { list-style: none; }
#sf2 .en { font-family: var(--font-en); }
#sf2 .wrap { width: min(100% - var(--side) * 2, var(--content)); margin: 0 auto; }
#sf2 .pcard .now { flex-wrap: wrap; }
#sf2 img, #sf2 iframe { max-width: 100%; }
#sf2 .sec { padding: var(--sec-pad) 0 var(--sec-bottom); }
#sf2 .sec.subtle { background: var(--background-subtle); }
#sf2 .actions { display: flex; flex-wrap: wrap; gap: var(--p-2); margin-top: var(--p-10); }
#sf2 .actions .sub { flex-basis: 100%; font-size: var(--size-sm); color: var(--foreground-subtle); }
#sf2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--p-2); white-space: nowrap; border-radius: var(--radius-full); font-weight: 500; transition: background .15s, color .15s;
  height: 48px; padding: 12px 36px; font-size: var(--size-base); background: var(--grey-opacity-20); border: 1px solid var(--border-regular); color: var(--foreground-regular); }
#sf2 .btn:hover:not(:disabled) { background: var(--primary-800); border-color: var(--primary-800); color: var(--foreground-inverted-regular); }
#sf2 .btn svg { width: 20px; height: 20px; }
#sf2 .btn.block { width: 100%; }
/* 모바일 하단 고정 바(mbar) — 히어로가 화면 밖이면 노출(preview.js mbar()), PC(≥768)는 숨김 */
#sf2 .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: var(--p-3) var(--side) calc(var(--p-3) + env(safe-area-inset-bottom)); background: var(--background-regular); border-top: 1px solid var(--border-muted); transform: translateY(110%); transition: transform .2s; }
#sf2 .mbar.show { transform: none; }
@media (min-width: 768px) { #sf2 .mbar, #sf2 .mbar.show { display: none !important; } }
#sf2 .mbar-more { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; margin-top: var(--p-1); padding: var(--p-1-5) 0 0; font-size: var(--size-sm); font-weight: 600; color: var(--foreground-secondary); text-decoration: underline; text-underline-offset: 3px; }
#sf2 .mbar-more svg { width: 14px; height: 14px; }
#sf2 .btn.cta { background: var(--primary-900); border-color: var(--primary-900); color: var(--foreground-inverted-regular); }
#sf2 .btn.cta:hover:not(:disabled) { background: var(--primary-900); }
#sf2 .btn.cta:disabled, #sf2 .btn.done { background: var(--primary-300); border-color: var(--primary-300); color: var(--foreground-secondary); }
#sf2 .chip { height: 34px; padding: 6px 16px; border-radius: var(--radius-base); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: var(--size-sm); }
#sf2 .chip.on { box-shadow: inset 0 0 0 1px var(--border-emphasized); font-weight: 500; }
#sf2 .chips { display: flex; flex-wrap: wrap; gap: var(--p-2); }
#sf2 .card { background: var(--background-regular); border-radius: var(--radius-lg); padding: var(--p-8); }
@media (max-width: 767px) {
  #sf2 .card { padding: var(--p-6) var(--p-5); }
}
#sf2 details.caution { margin-top: var(--p-6); }
#sf2 details.caution summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; padding: var(--p-2); margin-left: calc(var(--p-2) * -1); font-size: var(--size-sm); color: var(--foreground-secondary); }
#sf2 details.caution summary::-webkit-details-marker { display: none; }
#sf2 details.caution summary svg { width: 16px; height: 16px; transition: transform .15s; }
#sf2 details.caution[open] summary svg { transform: rotate(180deg); }
#sf2 details.caution .body { margin-top: var(--p-1); font-size: var(--size-xs); color: var(--foreground-subtle); line-height: 1.8; }
#sf2 .pcard { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; text-align: left; }
#sf2 .pcard .thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f0f0f0; }
/* aspect-ratio 미지원(구형 iOS<15·안드로이드 웹뷰) 폴백 — 썸네일 높이가 0으로 붕괴해 이미지가 사라지는 것 방지(1:1 유지) */
@supports not (aspect-ratio: 1 / 1) { #sf2 .pcard .thumb::before { content: ''; display: block; padding-top: 100%; } }
#sf2 .pcard .info { padding-top: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* 제품명 — 2줄 말줄임(…). overflow-wrap:anywhere 로 긴 영문·기호 토큰((…)_kvadrat 등)도 줄 끝에서 끊어, keep-all 때문에 안 끊겨 기기별로 가로 넘침/줄수가 달라지던 문제 방지(항상 2줄 초과면 …) */
#sf2 .pcard .name { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--foreground-regular); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#sf2 .pcard .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; padding-top: 3px; font-size: 14px; line-height: 1.5; }
#sf2 .pcard .was { color: var(--foreground-subtle); text-decoration: line-through; }
#sf2 .pcard .now { color: var(--foreground-regular); font-weight: 600; }
#sf2 .pcard .pending { color: var(--foreground-subtle); }
#sf2 .quotes { display: flex; align-items: center; gap: var(--p-6); margin-top: var(--p-12); }
#sf2 .quotes .lab { flex: none; font-size: var(--size-sm); font-weight: 600; }
#sf2 .quotes .marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
#sf2 .quotes .track { display: flex; gap: var(--p-2); width: max-content; animation: marquee 40s linear infinite; }
#sf2 .quotes:hover .track { animation-play-state: paused; }
#sf2 .quotes .qt { flex: none; padding: var(--p-2) var(--p-4); border-radius: var(--radius-full); background: var(--background-regular); font-size: var(--size-sm); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  #sf2 .quotes { flex-direction: column; align-items: flex-start; gap: var(--p-3); margin-top: var(--p-8); }
  #sf2 .quotes .marquee { width: 100%; }
}
#sf2 .prealarm { display: flex; align-items: center; justify-content: space-between; gap: var(--p-8); margin-top: var(--p-12); padding: var(--p-8) var(--p-10); background: var(--background-subtle); }
#sf2 .prealarm h3 { font-size: var(--size-xl); font-weight: 600; }
#sf2 .prealarm .lead { margin-top: var(--p-2); font-size: var(--size-sm); color: var(--foreground-secondary); max-width: 640px; }
#sf2 .prealarm ul { margin-top: var(--p-5); display: flex; flex-direction: column; gap: var(--p-2); }
#sf2 .prealarm li { display: flex; gap: var(--p-2); font-size: var(--size-sm); }
#sf2 .prealarm li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
#sf2 .prealarm .actions { margin-top: 0; flex: none; }
@media (max-width: 1279px) {
  #sf2 .prealarm { flex-direction: column; align-items: stretch; }
}
@media (max-width: 767px) {
  #sf2 .prealarm { padding: var(--p-6) var(--p-5); gap: var(--p-5); }
}
@keyframes live { 50% { opacity: .25; } }
#sf2 .anchor { position: sticky; top: 45px; z-index: 30; background: var(--background-regular); border-bottom: 1px solid var(--border-muted); }
#sf2 .anchor { transition: opacity .2s, transform .2s; }
#sf2 .anchor.is-peek { opacity: 0; transform: translateY(-8px); pointer-events: none; }
#sf2 .anchor .wrap { display: flex; height: 56px; overflow-x: auto; scrollbar-width: none; }
#sf2 .anchor .wrap::-webkit-scrollbar { display: none; }
#sf2 .anchor button { flex: 1 0 auto; padding: 8px 12px; text-align: center; font-size: var(--size-base); color: var(--foreground-secondary); }
#sf2 .anchor button.on { color: var(--foreground-regular); font-weight: 700; }
/* 활성 앵커 아래 검정 밑줄 — 글자 폭만큼(시안). border 대신 ::after 바로 그린다 */
#sf2 .anchor .wrap > button { position: relative; }
#sf2 .anchor .wrap > button::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: var(--ink, #1F2430); transform: translateX(-50%); transition: width .2s; }
#sf2 .anchor .wrap > button.on::after { width: calc(100% - 24px); }
@media (max-width: 767px) {
  #sf2 .anchor .wrap { width: 100%; padding: 0 var(--side); }
  #sf2 .anchor button { flex: none; font-size: var(--size-sm); }
  #sf2 .anchor .wrap > button.on::after { width: calc(100% - 8px); }
}
#sf2 [data-sec] { scroll-margin-top: 101px; }
@media (min-width: 1280px) {
  #sf2 .anchor { top: 50px; }
  #sf2 [data-sec] { scroll-margin-top: 106px; }
}
@keyframes nb-swap { from { opacity: 0; transform: translateX(16px); } }
@keyframes hw-zoom { from { transform: scale(1.06); } }
@keyframes hw-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes hw-flip { from { opacity: .2; transform: translateY(-30%); } }
@media (prefers-reduced-motion: reduce) {
  #sf2 .quotes .track { animation: none; }
}
#sf2 .dim { position: fixed; inset: 0; z-index: 100; background: var(--grey-opacity-500); display: flex; align-items: center; justify-content: center; padding: var(--p-6); animation: fade .15s; }
/* #sf2 안에서는 전역 [hidden]{display:none}(normalize)이 div{display:block}·.dim{display:flex} 등에 밀려
   안 먹는 경우가 있다. .dim·.btn 뿐 아니라 사연접수 모달의 단계(data-step)·조건부 입력(기타·아파트)·단계 버튼까지
   모두 확실히 숨기도록 hidden 속성을 가진 모든 요소를 일반 규칙으로 보호한다. */
#sf2 [hidden] { display: none !important; }
/* 스크롤 등장(reveal) — preview.js reveal() 이 .rv 부여 후 화면 진입 시 .rv-in */
#sf2 .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms); }
#sf2 .rv.rv-in { opacity: 1; transform: none; }
/* JSP 모달은 기본 숨김 — display:flex 보다 우선하도록 명시 */
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(16px); opacity: 0; } }
#sf2 .modal { display: block; height: auto; position: relative; width: 512px; max-width: 100%; max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--input-bg-regular); border-radius: var(--radius-sm); padding: var(--p-6); animation: up .2s; }
/* display·height 명시: 공통 gnb.css 의 전역 .modal{display:none;height:100%} 덮기 */
#sf2 .modal.dialog { width: 600px; border-radius: var(--radius-lg); }
#sf2 .modal .x { position: absolute; top: var(--p-6); right: var(--p-6); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
#sf2 .modal .x svg { width: 16px; height: 16px; }
#sf2 .modal h3 { font-size: var(--size-xl); font-weight: 600; line-height: var(--leading-normal); padding-right: var(--p-8); }
#sf2 .modal .desc { margin-top: var(--p-2); font-size: var(--size-sm); color: var(--foreground-subtle); }
#sf2 .modal .story-desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--foreground-subtle, #6b6f7a); }
#sf2 .modal .foot { display: flex; gap: var(--p-2); margin-top: var(--p-10); }
#sf2 .modal .foot .btn { flex: 1; }
#sf2 .modal .done-ic { width: 32px; height: 32px; margin-bottom: var(--p-3); border-radius: 50%; background: var(--primary-900); display: flex; align-items: center; justify-content: center; }
#sf2 .modal .done-ic svg { width: 16px; height: 16px; stroke: var(--foreground-inverted-regular); }
#sf2 .field { margin-top: var(--p-6); }
#sf2 .field .lab { display: flex; justify-content: space-between; margin-bottom: var(--p-2); font-size: var(--size-sm); font-weight: 500; }
#sf2 .field .lab small { font-weight: 400; color: var(--foreground-subtle); }
#sf2 .field .inp { width: 100%; height: 48px; padding: 0 var(--p-4); border: 1px solid var(--border-muted); border-radius: var(--radius-sm); font-size: var(--size-sm); outline: none; background: var(--background-regular); }
#sf2 .field .inp:focus { border-color: var(--border-regular); }
#sf2 .field .inp::placeholder, #sf2 .ta textarea::placeholder { color: var(--foreground-subtle); }
#sf2 .field .mt-2 { margin-top: var(--p-2); }
#sf2 .field .ro { height: 48px; display: flex; align-items: center; padding: 0 var(--p-4); border-radius: var(--radius-sm); background: var(--background-subtle); font-family: var(--font-en); font-size: var(--size-sm); color: var(--foreground-secondary); }
#sf2 .field .help { margin-top: var(--p-1-5); font-size: var(--size-xs); color: var(--foreground-subtle); }
#sf2 .switches { display: flex; flex-direction: column; gap: var(--p-2); margin-top: var(--p-5); }
#sf2 .switches .switch-card { margin-top: 0; }
#sf2 .switch-card { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--p-5); padding: 16px; border-radius: var(--radius-base); box-shadow: inset 0 0 0 1px var(--border-subtle); cursor: pointer; }
#sf2 .switch-card:has(input:checked) { background: var(--grey-50); box-shadow: inset 0 0 0 1px var(--border-emphasized); }
#sf2 .switch-card .content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#sf2 .switch-card .lab { font-size: var(--size-sm); line-height: 1.3; color: var(--foreground-regular); }
#sf2 .switch-card .desc { font-size: var(--size-sm); line-height: var(--leading-normal); color: var(--foreground-muted); }
#sf2 .switch-card .track { flex: none; width: 36px; height: 20px; padding: 2px; border-radius: var(--radius-full); background: var(--primary-300); transition: background .15s; }
#sf2 .switch-card .thumb { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--background-regular); transition: transform .15s; }
#sf2 .switch-card input:checked + .track { background: var(--primary-900); }
#sf2 .switch-card input:checked + .track .thumb { transform: translateX(16px); }
/* 전체 동의하기 — 동의 목록 위 강조 토글 카드(시안 938·939차). switch-card 토글 + 옅은 바탕·굵은 글자 */
#sf2 .modal .cf-all-card { margin-top: 16px; border: 1px solid var(--border-muted, #e6e4e1) !important; background: #F8F7F5 !important; }
#sf2 .modal .cf-all-card .lab b { font-size: 15px; font-weight: 700; }
#sf2 .modal .cf-all-card + .switches { margin-top: 12px; }
/* 접수 전 꼭 확인해 주세요 — 안내 박스(시안 최종) */
#sf2 .modal .q:has(+ .cf-must) { margin-bottom: 0 !important; }
#sf2 .modal .q + .cf-must { margin-top: 14px !important; }
#sf2 .cf-must { margin: 16px 0 32px; padding: 18px 20px; border-radius: 12px; background: #F1EFEC; }
#sf2 .cf-must + .cf-all-card { margin-top: 0 !important; }
#sf2 .cf-must .t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #1F2430; }
#sf2 .cf-must .t i { display: none; }
#sf2 .cf-must ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
#sf2 .cf-must li { position: relative; padding-left: 13px; font-size: 14px; line-height: 1.6; color: #3A3F4B; word-break: keep-all; }
#sf2 .cf-must li::before { content: ""; position: absolute; top: .72em; left: 1px; width: 4px; height: 4px; border-radius: 50%; background: #8A8F99; }
#sf2 .cf-must li b { font-weight: 700; color: #1F2430; }
@media (max-width: 767px) { #sf2 .cf-must { padding: 16px; } #sf2 .cf-must li { font-size: 13.5px; } }
#sf2 .switch-card input:focus-visible + .track { outline: 2px solid var(--grey-500); outline-offset: 2px; }
#sf2 .sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#sf2 .greybox { margin-top: var(--p-5); background: var(--background-subtle); border-radius: var(--radius-md); padding: var(--p-4) var(--p-5); font-size: var(--size-sm); color: var(--foreground-secondary); }
#sf2 .prog { margin-top: var(--p-1); display: flex; justify-content: flex-end; font-family: var(--font-en); font-size: var(--size-xs); color: var(--foreground-subtle); }
#sf2 .bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--p-1); margin-top: var(--p-2); }
#sf2 .bars i { height: 2px; background: var(--background-muted); }
#sf2 .bars i.on { background: var(--primary-900); }
#sf2 .q { margin-top: var(--p-8); font-size: var(--size-lg); font-weight: 600; }
#sf2 .q + p { margin-top: var(--p-1); font-size: var(--size-sm); color: var(--foreground-subtle); }
#sf2 .upload { margin-top: var(--p-5); width: 100%; height: 128px; border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-1); background: var(--grey-50); text-align: center; }
#sf2 .upload b { font-size: var(--size-sm); font-weight: 500; }
#sf2 .upload span { font-size: var(--size-xs); color: var(--foreground-subtle); }
@media (max-width: 767px) { #sf2 .upload { height: 50px; } }
#sf2 .err { margin-top: var(--p-2); font-size: var(--size-xs); font-weight: 500; color: var(--foreground-regular); }
#sf2 .thumbs { display: flex; flex-wrap: wrap; gap: var(--p-2); margin-top: var(--p-4); }
#sf2 .thumbs > div, #sf2 .thumbs > button { position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; flex: none; }
#sf2 .thumbs img { width: 100%; height: 100%; object-fit: cover; }
#sf2 .thumbs .rm { position: absolute; top: 4px; right: 4px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--grey-opacity-700); display: flex; align-items: center; justify-content: center; }
#sf2 .thumbs .rm svg { width: 10px; height: 10px; stroke: #fff; }
#sf2 .thumbs .add { border: 1px dashed var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--foreground-subtle); }
#sf2 .thumbs .add svg { width: 20px; height: 20px; }
#sf2 .ta { position: relative; margin-top: var(--p-5); }
#sf2 .ta textarea { width: 100%; height: 160px; resize: none; border: 1px solid var(--border-muted); border-radius: var(--radius-sm); padding: var(--p-3) var(--p-4) var(--p-8); font-size: var(--size-sm); outline: none; }
#sf2 .ta textarea:focus { border-color: var(--border-regular); }
#sf2 .ta .cnt { position: absolute; right: var(--p-4); bottom: var(--p-3); font-family: var(--font-en); font-size: var(--size-xs); color: var(--foreground-subtle); }
@media (max-width: 767px) {
  #sf2 .dim { align-items: flex-end; padding: 0; }
  #sf2 .modal, #sf2 .modal.dialog { width: 100%; max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--p-6) var(--side) calc(var(--p-6) + env(safe-area-inset-bottom)); }
  /* height 는 svh(안정 뷰포트) — dvh 는 키보드 열고닫을 때 리사이즈돼 모달이 튄다 */
  #sf2 .modal.full { height: 100svh; max-height: none; border-radius: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  /* 버튼 바 — 스크롤과 무관하게 모달 하단 고정(sticky). 내용 짧으면 margin-top:auto 로 바닥에 붙음 */
  #sf2 .modal.full .foot { position: sticky; bottom: 0; z-index: 10; margin: auto calc(var(--side) * -1) 0; padding: var(--p-4) var(--side) calc(var(--p-4) + env(safe-area-inset-bottom)); background: var(--input-bg-regular); border-top: 1px solid var(--border-muted); }
  /* 고정 버튼 바에 마지막 내용이 가려지지 않게 단계 내용 아래 여백 */
  #sf2 .modal.full [data-step] { margin-bottom: 48px; }
}
#sf2 .toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 200; max-width: calc(100% - 32px); background: var(--grey-opacity-700); color: #fff; padding: var(--p-3) var(--p-5); border-radius: var(--radius-full); font-size: var(--size-sm); animation: up .2s; }
@media (min-width: 768px) {
  #sf2 .modal { padding: var(--p-8); }
  #sf2 .modal.dialog { padding: var(--p-10) var(--p-10) var(--p-8); }
  #sf2 .modal .x { top: var(--p-8); right: var(--p-8); }
  #sf2 .modal .desc { margin-top: var(--p-3); }
  #sf2 .modal .field { margin-top: var(--p-8); }
  #sf2 .modal .foot { margin-top: var(--p-12); gap: var(--p-3); }
  #sf2 .modal .switches { margin-top: var(--p-8); }
}
@keyframes st-in-next { from { opacity: 0; transform: translateX(32px); } }
@keyframes st-in-prev { from { opacity: 0; transform: translateX(-32px); } }
#sf2 details.caution ul.body { display: flex; flex-direction: column; gap: 2px; padding: 0; list-style: none; }
#sf2 details.caution ul.body li { list-style: none; }
@keyframes rf-bump { 30% { transform: translateY(-3px); } }
#sf2 .pimg { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #f0f0f0; }
#sf2 .contest-sec { position: relative; overflow: hidden; background: var(--grey-900); color: var(--foreground-inverted-regular); }
#sf2 .contest-sec::before { content: ''; position: absolute; left: 50%; top: -20%; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .09), transparent); pointer-events: none; }
#sf2 .contest-sec .btn.cta { background: #fff; border-color: #fff; color: var(--grey-900); }
#sf2 .contest-sec .btn.cta:hover:not(:disabled) { background: var(--grey-200); border-color: var(--grey-200); color: var(--grey-900); }
#sf2 .contest-sec .btn.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#sf2 .contest-sec .btn:disabled { background: var(--grey-700); border-color: var(--grey-700); color: var(--grey-300); }
#sf2 .ct-shorts { width: 100%; max-width: 1040px; margin-top: var(--p-16); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--p-4); }
#sf2 .ct-short { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--grey-800); color: #fff; text-align: left; cursor: pointer; }
#sf2 .ct-short video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sf2 .ct-short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .55)); pointer-events: none; }
#sf2 .ct-short.is-empty { box-shadow: inset 0 0 0 1px var(--grey-700); }
#sf2 .ct-sh-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: transform .25s, background .25s, opacity .25s; }
#sf2 .ct-short:not(.is-empty) .ct-sh-play { opacity: 0; }
#sf2 .ct-sh-play svg { width: 20px; height: 20px; margin-left: 2px; }
#sf2 .ct-sh-cap { position: absolute; left: var(--p-4); right: var(--p-4); bottom: var(--p-4); z-index: 2; display: flex; flex-direction: column; gap: 2px; font-size: var(--size-sm); line-height: 1.4; }
#sf2 .ct-sh-cap b { font-weight: 600; }
#sf2 .ct-sh-cap span { font-size: var(--size-xs); color: rgba(255, 255, 255, .7); }
#sf2 .ct-short.is-empty .ct-sh-cap { color: var(--grey-500); }
@media (hover: hover) {
  #sf2 .ct-short:hover .ct-sh-play { opacity: 1; transform: scale(1.08); background: rgba(255, 255, 255, .3); }
}
#sf2 .contest-sec details.caution { margin-top: 0; }
#sf2 .contest-sec details.caution summary { color: var(--grey-400); }
#sf2 .contest-sec details.caution .body { color: var(--grey-500); }
@media (max-width: 767px) {
  /* 가로 캐러셀 — overflow-x:auto 가 overflow-y 를 auto 로 바꿔 세로 스와이프를 가로채던 문제 방지: 세로는 페이지로 흘려보낸다(overflow-y:hidden + touch-action:pan-x) */
  #sf2 .ct-shorts { margin-top: var(--p-10); display: flex; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scroll-snap-type: x proximity; overscroll-behavior-x: contain; width: auto; align-self: stretch; margin-left: calc(var(--side) * -1); margin-right: calc(var(--side) * -1); padding: 0 var(--side); scroll-padding-inline: var(--side); gap: var(--p-3); scrollbar-width: none; }
  #sf2 .ct-shorts::-webkit-scrollbar { display: none; }
  #sf2 .ct-short { flex: 0 0 56%; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  #sf2 .prealarm .actions, #sf2 .prealarm .actions .btn { width: 100%; }
  #sf2 .prealarm .btn.cta { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-inline: var(--p-4); }
}
#sf2 .hero-half { --hh-bg: #5380e7; display: grid; grid-template-columns: 1fr 1fr; height: clamp(600px, calc(100svh - 50px), 880px); background: var(--hh-bg); color: #fff; }
#sf2 .hh-copy { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
#sf2 .hh-in { width: min(100%, 600px); padding: var(--p-12) var(--p-16) var(--p-12) var(--side); display: flex; flex-direction: column; align-items: flex-start; }
#sf2 .hh-in h1 { margin-top: var(--p-3); font-size: var(--size-7xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
#sf2 .hh-links { margin-top: var(--p-10); width: 100%; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.3); }
#sf2 .hh-links button { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: var(--p-3); padding: var(--p-4) 0; border-bottom: 1px solid rgba(255,255,255,.3); text-align: left; color: #fff; transition: padding .2s; }
#sf2 .hh-links .no { font-size: var(--size-xs); font-weight: 700; opacity: .6; }
#sf2 .hh-links .t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--p-3); }
#sf2 .hh-links b { font-size: var(--size-base); font-weight: 600; }
#sf2 .hh-links .arr svg { width: 18px; height: 18px; transition: transform .2s; }
@media (hover: hover) {
  #sf2 .hh-links button:hover { padding-left: var(--p-2); }
  #sf2 .hh-links button:hover .arr svg { transform: translateX(3px); }
}
#sf2 .hh-art { position: relative; min-width: 0; overflow: hidden; }
#sf2 .hh-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1279px) {
  #sf2 .hero-half { height: clamp(560px, 70vw, 760px); }
  #sf2 .hh-in { padding: var(--p-10) var(--p-8) var(--p-10) var(--side); }
  #sf2 .hh-in h1 { font-size: var(--size-6xl); }
}
@media (max-width: 767px) {
  #sf2 .hero-half { display: flex; flex-direction: column-reverse; height: auto; }
  #sf2 .hh-art { width: 100%; aspect-ratio: 4 / 5; max-height: 62svh; }
  #sf2 .hh-in { width: 100%; padding: var(--p-6) var(--side) var(--p-8); }
  #sf2 .hh-in h1 { font-size: var(--size-5xl); }
  #sf2 .hh-links { margin-top: var(--p-6); }
}
#sf2 .hh-copy { justify-content: flex-start; padding-left: max(var(--side), calc(100% - var(--content) / 2)); }
#sf2 .hh-in { width: 100%; max-width: 520px; padding: var(--p-12) var(--p-12) var(--p-12) 0; }
#sf2 .hh-in h1 { margin-top: 0; }
#sf2 .hh-links button { grid-template-columns: minmax(0, 1fr) 20px; }
@media (max-width: 767px) {
  #sf2 .hh-copy { padding-left: 0; }
  #sf2 .hh-in { max-width: none; padding: var(--p-6) var(--side) var(--p-8); }
}
#sf2 .pcard.deal .price { font-size: 15px; }
#sf2 .pcard.deal .now { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
#sf2 .pcard.deal .pc { order: -1; margin-right: var(--p-1-5); font-size: 17px; font-weight: 700; }
#sf2 .pcard.deal .now { font-size: 16px; }
#sf2 .pcard.deal .price { font-size: 15px; }
#sf2 .pcard.deal .now { display: inline-flex; align-items: baseline; flex-wrap: wrap; font-size: 16px; }
#sf2 .pcard.deal .pc { order: -1; margin-right: var(--p-1-5); font-size: 17px; font-weight: 700; }
#sf2 .ct2-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--p-16); align-items: center; }
#sf2 .ct2-copy { display: flex; flex-direction: column; align-items: flex-start; }
#sf2 .ct2 h2 { margin-top: var(--p-6); font-size: var(--size-6xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
#sf2 .ct2 .lead { margin-top: var(--p-5); font-size: var(--size-lg); color: var(--grey-300); }
#sf2 .ct2 .lead b { color: #fff; font-weight: 700; }
#sf2 .ct2-act { margin-top: var(--p-10); display: flex; flex-direction: column; align-items: flex-start; gap: var(--p-3); }
#sf2 .ct2-player { display: grid; grid-template-columns: 320px 112px; gap: var(--p-4); align-items: stretch; }
#sf2 .ct2-main { width: 320px; }
#sf2 .ct2-list { display: flex; flex-direction: column; justify-content: space-between; gap: var(--p-3); }
#sf2 .ct-pl { width: 112px; display: flex; flex-direction: column; gap: var(--p-1-5); text-align: left; color: #fff; }
#sf2 .ct-pl .th { position: relative; display: block; aspect-ratio: 9 / 16; width: 100%; max-height: 160px; border-radius: var(--radius-base); overflow: hidden; background: var(--grey-800); box-shadow: inset 0 0 0 1px var(--grey-700); }
#sf2 .ct-pl .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .2s; }
#sf2 .ct-pl .ct-sh-play { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
#sf2 .ct-pl .ct-sh-play svg { width: 14px; height: 14px; }
#sf2 .ct-pl .t { font-size: 12px; color: var(--grey-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  #sf2 .ct-pl:hover .th img { opacity: 1; }
  #sf2 .ct-pl:hover .t { color: #fff; }
}
#sf2 .ct2-caution { margin-top: var(--p-12); }
#sf2 .ct2 details.caution { margin-top: 0; }
@media (max-width: 1279px) {
  #sf2 .ct2-grid { grid-template-columns: 1fr; gap: var(--p-10); }
  #sf2 .ct2 h2 { font-size: var(--size-5xl); }
  #sf2 .ct2-player { grid-template-columns: minmax(0, 320px) 112px; }
}
@media (max-width: 767px) {
  #sf2 .ct2 h2 { margin-top: var(--p-4); font-size: var(--size-4xl); }
  #sf2 .ct2 .lead { font-size: var(--size-sm); }
  #sf2 .ct2-act { margin-top: var(--p-6); align-self: stretch; align-items: stretch; }
  #sf2 .ct2-act .btn { width: 100%; min-width: 0; }
  #sf2 .ct2-player { grid-template-columns: minmax(0, 1fr) 84px; gap: var(--p-3); }
  #sf2 .ct2-main { width: 100%; }
  #sf2 .ct-pl { width: 84px; }
  #sf2 .ct-pl .th { max-height: none; }
  #sf2 .ct2-caution { margin-top: var(--p-8); }
}
#sf2 .ep-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
#sf2 .ep-kicker { display: inline-flex; padding: var(--p-1-5) var(--p-4); border-radius: var(--radius-full); background: var(--grey-900); color: #fff; font-size: var(--size-sm); font-weight: 600; }
#sf2 .ep-head h2 { font-size: var(--size-6xl); font-weight: 700; letter-spacing: -0.02em; }
#sf2 .ep-head .lead { margin-top: var(--p-4); font-size: var(--size-base); color: var(--foreground-secondary); }
@keyframes lbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#sf2 .early-p details.caution { margin-top: var(--p-8); }
@media (max-width: 1279px) {
  #sf2 .ep-head h2 { font-size: var(--size-5xl); }
}
@media (max-width: 767px) {
  #sf2 .ep-head h2 { font-size: var(--size-4xl); }
  #sf2 .ep-head .lead { font-size: var(--size-sm); }
}
#sf2 .ct2 { position: relative; overflow: hidden; }
#sf2 .ct2::before { content: ''; position: absolute; right: -10%; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(255,255,255,.1), transparent); pointer-events: none; }
#sf2 .ct2 .wrap { position: relative; }
#sf2 .ct2 h2 { font-size: var(--size-7xl); line-height: 1.15; }
#sf2 .ct2 .lead { font-size: var(--size-xl); color: var(--grey-200); }
#sf2 .ct2 .lead b { font-size: 1.25em; }
#sf2 .ct2-act .btn { height: 56px; font-size: var(--size-lg); }
#sf2 .ct2-player { grid-template-columns: 360px 120px; }
#sf2 .ct2-main { width: 360px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
#sf2 .ct-pl { width: 120px; }
@media (max-width: 1279px) {
  #sf2 .ct2 h2 { font-size: var(--size-6xl); }
}
@media (max-width: 767px) {
  #sf2 .ct2 h2 { font-size: var(--size-4xl); }
  #sf2 .ct2 .lead { font-size: var(--size-base); }
  #sf2 .ct2-act .btn { height: 52px; min-width: 0; font-size: var(--size-base); }
  #sf2 .ct2-player { grid-template-columns: minmax(0, 1fr) 84px; }
  #sf2 .ct2-main { width: 100%; }
  #sf2 .ct-pl { width: 84px; }
}
#sf2 .ct2-act { margin-top: var(--p-10); }
#sf2 .ep-kicker { gap: var(--p-2); align-items: center; padding: var(--p-1-5) var(--p-4) var(--p-1-5) var(--p-1-5); }
#sf2 .ep-kicker b { padding: 2px var(--p-2); border-radius: var(--radius-full); background: #fff; color: var(--grey-900); font-size: var(--size-xs); font-weight: 700; }
#sf2 .ep-head h2 { font-size: var(--size-6xl); }
#sf2 .ct2-main { width: 380px; }
#sf2 .ct2-player { grid-template-columns: 380px 120px; }
@media (max-width: 767px) {
  #sf2 .ct2-main { width: 100%; }
  #sf2 .ct2-player { grid-template-columns: minmax(0, 1fr) 84px; }
}
#sf2 .ct2-act { margin-top: var(--p-10); }
#sf2 .ct-shorts.one-at-a-time .ct-short video { transition: filter .3s; }
#sf2 .ct-shorts.one-at-a-time .ct-short.is-paused video { filter: brightness(.7); }
#sf2 .ct-shorts.one-at-a-time .ct-short.is-paused .ct-sh-play { opacity: 1; }
#sf2 .tz-head { margin-bottom: var(--p-12); }
#sf2 .tz-head .ep-kicker { padding: var(--p-1-5) var(--p-4); }
@media (max-width: 767px) {
  #sf2 .tz-head { margin-bottom: var(--p-8); }
}
#sf2 .hh-in h1 { font-size: var(--size-7xl); font-weight: 700; }
#sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: var(--size-5xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
#sf2 .tz-head h2 { font-size: var(--size-4xl); font-weight: 600; }
#sf2 .tz-head .ep-kicker { background: transparent; color: var(--foreground-secondary); box-shadow: inset 0 0 0 1px var(--border-regular); padding: var(--p-1) var(--p-3); font-size: var(--size-xs); }
#sf2 .tz-head .lead { margin-top: var(--p-3); font-size: var(--size-sm); }
@media (max-width: 767px) {
  #sf2 .hh-in h1 { font-size: var(--size-6xl); }
  #sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: var(--size-4xl); line-height: 1.3; }
  #sf2 .tz-head h2 { font-size: var(--size-3xl); }
  #sf2 .ep-head .lead, #sf2 .ct2 .lead { font-size: var(--size-sm); }
}
#sf2 .hh-in h1 { font-size: calc(var(--size-7xl) * 1.06); }
#sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: calc(var(--size-5xl) * 1.1); }
#sf2 .tz-head h2 { font-size: calc(var(--size-4xl) * 1.08); }
@media (max-width: 767px) {
  #sf2 .hh-in h1 { font-size: calc(var(--size-6xl) * 1.06); }
  #sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: calc(var(--size-4xl) * 1.1); }
  #sf2 .tz-head h2 { font-size: calc(var(--size-3xl) * 1.08); }
}
#sf2 .ep-head.center { align-items: center; text-align: center; }
#sf2 { --kv-blue: #94aef8; --kv-pink: #fddeee; --kv-lilac: #c9a6e6; --kv-lime: #d4e36a; --kv-deep: #4a66cc; }
#sf2 .sec.subtle.early-p { background: #eef2fe; }
#sf2 .contest-sec { background: var(--kv-deep); }
#sf2 .contest-sec .lead, #sf2 .contest-sec details.caution summary { color: rgba(255,255,255,.85); }
#sf2 .contest-sec details.caution .body { color: #fff; }
/* 유의사항 본문 화이트 고정 */
#sf2 .contest-sec .ct-pl .t { color: rgba(255,255,255,.8); }
#sf2 .contest-sec .ct-short.is-empty, #sf2 .contest-sec .ct-pl .th { background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
#sf2 .contest-sec::before, #sf2 .ct2::before { display: none; }
/* preview2 콘테스트 제목 폰트 Jua 고정 */
#sf2 .hand { font-family: 'Jua', var(--font-sans); font-weight: 400; font-size: 1.12em; line-height: 1.05; color: var(--kv-lime); display: inline-block; transform: rotate(-2deg); letter-spacing: -0.01em; }
#sf2 .ct-flow { margin-top: var(--p-10); display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.25); max-width: 520px; }
#sf2 .ct-flow li { display: grid; grid-template-columns: 36px 120px minmax(0, 1fr); align-items: baseline; gap: var(--p-2); padding: var(--p-4) 0; border-bottom: 1px solid rgba(255,255,255,.25); }
#sf2 .ct-flow .no { font-size: var(--size-sm); font-weight: 700; color: rgba(255,255,255,.6); }
#sf2 .ct-flow b { font-size: var(--size-lg); font-weight: 700; color: #fff; }
#sf2 .ct-flow p { font-size: var(--size-sm); color: rgba(255,255,255,.8); }
#sf2 .ct-flow li.key b { color: var(--kv-lime); }
#sf2 .ct-short { cursor: default; }
@media (max-width: 767px) {
  #sf2 .ct-flow { margin-top: var(--p-8); }
  #sf2 .ct-flow li { grid-template-columns: 28px minmax(0, 1fr); row-gap: 2px; }
  #sf2 .ct-flow p { grid-column: 2; }
  #sf2 .ct-flow b { font-size: var(--size-base); }
}
#sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: var(--size-6xl); font-weight: 700; line-height: 1.2; }
#sf2 .tz-head h2 { font-size: var(--size-5xl); font-weight: 700; }
#sf2 .ep-kicker { padding: 4px 10px !important; font-size: var(--size-xs) !important; }
#sf2 .ep-kicker b { padding: 1px 6px; font-size: 11px; }
@media (max-width: 767px) {
  #sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: 30px; }
  #sf2 .tz-head h2 { font-size: 26px; }
}
#sf2 .hero-half.art-left .hh-art { order: -1; }
#sf2 .hero-half.art-left .hh-copy { justify-content: flex-start; padding-left: 0; padding-right: max(var(--side), calc(100% - var(--content) / 2)); }
#sf2 .hero-half.art-left .hh-in { max-width: 560px; padding: var(--p-12) 0 var(--p-12) var(--p-16); }
#sf2 .hero-half.art-left .hh-links { margin-top: var(--p-10); }
#sf2 .hero-half.art-left .hh-links button { padding: var(--p-5) 0; }
#sf2 .hero-half.art-left .hh-links .t { flex-direction: column; align-items: flex-start; gap: 2px; }
#sf2 .hero-half.art-left .hh-links b { font-size: var(--size-xl); font-weight: 700; }
#sf2 .hero-half.art-left .hh-links .arr svg { width: 22px; height: 22px; }
@media (max-width: 1279px) {
  #sf2 .hero-half.art-left .hh-in { padding: var(--p-10) 0 var(--p-10) var(--p-8); }
  #sf2 .hero-half.art-left .hh-links b { font-size: var(--size-lg); }
}
@media (max-width: 767px) {
  #sf2 .hero-half.art-left { flex-direction: column; }
  #sf2 .hero-half.art-left .hh-copy { padding: 0; }
  #sf2 .hero-half.art-left .hh-in { max-width: none; padding: var(--p-6) var(--side) var(--p-8); }
  #sf2 .hero-half.art-left .hh-links button { padding: var(--p-4) 0; }
  #sf2 .hero-half.art-left .hh-links b { font-size: var(--size-base); }
}
#sf2 { --acc: var(--kv-deep); --acc-tint: #eef2fe; --acc-hand: var(--kv-lime); }
#sf2 .contest-sec { background: var(--acc); }
#sf2 .sec.subtle.early-p { background: var(--acc-tint); }
#sf2 .hand, #sf2 .ct-flow li.key b { color: var(--acc-hand); }
:root[data-accent="lime"] #sf2 .contest-sec .btn.cta:hover:not(:disabled) { background: var(--grey-800); border-color: var(--grey-800); color: #fff; }
#sf2 .ct2-player { align-items: start; }
#sf2 .ct2-list { justify-content: flex-start; gap: var(--p-3); }
#sf2 .ct-pl { width: 120px; }
#sf2 .ct-pl .th { max-height: none; aspect-ratio: 9 / 16; }
#sf2 .ct-pl .th::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); }
#sf2 .ct-pl .t { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; font-size: 11px; line-height: 1.3; color: #fff !important; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) {
  #sf2 .ct-pl { width: 84px; }
}
#sf2 { --acc-strong: var(--acc); }
#sf2 .hh-links button { position: relative; isolation: isolate; transition: color .25s; }
#sf2 .hh-links button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grey-900); transform: scaleY(0); transform-origin: bottom; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
#sf2 .hh-links .arr { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(25,20,18,.06); transition: background .25s, transform .3s; }
#sf2 .hh-links .arr { background: rgba(255,255,255,.18); }
@media (hover: hover) {
  #sf2 .hh-links button:hover { color: #fff; }
  #sf2 .hh-links button:hover::before { transform: scaleY(1); }
  #sf2 .hh-links button:hover .arr { background: #fff; color: var(--grey-900); transform: translateX(4px); }
  #sf2 .hh-links button:hover .arr svg { transform: none; }
  #sf2 .hero-half.art-left .hh-links button:hover { padding-left: var(--p-4); }
}
#sf2 .hh-links button { transition: color .25s, padding .3s; }
#sf2 .ct2 h2 { font-size: var(--size-7xl); line-height: 1.15; }
@media (max-width: 767px) {
  #sf2 .ct2 h2 { font-size: 34px; }
}
#sf2 .ct2-mrow { display: none; }
@media (max-width: 767px) {
  #sf2 .pcard.deal .price { font-size: 12px; }
  #sf2 .pcard.deal .now { font-size: 14px; }
  #sf2 .pcard.deal .pc { font-size: 14px; }
  #sf2 .pcard .info { padding-top: var(--p-3); }
  #sf2 .pcard .name { font-size: 12px; }
  #sf2 .ct-flow { width: 100%; max-width: none; margin-top: var(--p-6); }
  #sf2 .ct-flow li { padding: var(--p-3) 0; }
  #sf2 .ct2-player { display: none; }
  #sf2 .ct2-mrow { display: flex; margin-top: var(--p-8); }
  #sf2 .ct2-act { margin-top: var(--p-8); }
  #sf2 .ct2-caution { margin-top: var(--p-6); }
  #sf2 .ct2 .lead { margin-top: var(--p-3); }
  #sf2 .ep-head .lead { margin-top: var(--p-2); }
}
#sf2 .hh-links button::before { content: none; }
#sf2 .hh-links button { transition: background .25s, padding .3s; }
#sf2 .hh-links .arr svg { transition: none; }
@media (hover: hover) {
  #sf2 .hh-links button:hover { color: #fff; background: rgba(255,255,255,.08); }
  #sf2 .hh-links button:hover .arr { background: #fff; color: var(--grey-900); transform: translateX(4px); }
}
@media (max-width: 767px) {
  #sf2 .ct2 h2 { font-size: 40px; line-height: 1.2; }
}
@media (max-width: 767px) {
  #sf2 .hero-half.art-left .hh-in { padding: var(--p-8) var(--side) var(--p-10); }
  #sf2 .hero-half.art-left .hh-links button { padding: var(--p-5) 0; }
}
@media (hover: hover) {
  #sf2 .hh-links button:hover { background: transparent; }
  #sf2 .hh-links button:hover .arr { background: rgba(255,255,255,.18); color: inherit; }
}
@media (max-width: 767px) {
  #sf2 .hh-in h1 { font-size: 42px; }
  #sf2 .ep-head h2, #sf2 .ct2 h2 { font-size: 32px; }
  #sf2 .tz-head h2 { font-size: 28px; }
  #sf2 .ct2 h2 { font-size: 44px; }
}
#sf2 .ct2-player { align-items: stretch; }
#sf2 .ct2-list { justify-content: space-between; }
#sf2 .ct2-list li { flex: 1 1 0; min-height: 0; display: flex; }
#sf2 .ct2-list .ct-pl { height: 100%; }
#sf2 .ct2-list .ct-pl .th { height: 100%; aspect-ratio: auto; max-height: none; }
#sf2 .ct-worries { margin-top: var(--p-16); padding-top: var(--p-8); border-top: 1px solid rgba(25,20,18,.12); }
#sf2 .ct-worries .lab { color: inherit; }
#sf2 .ct-worries .qt { background: rgba(255,255,255,.7); color: var(--grey-900); }
:root:not([data-accent="lime"]) #sf2 .ct-worries { border-top-color: rgba(255,255,255,.2); }
#sf2 .ct-worries + .ct2-caution { margin-top: var(--p-8); }
@media (max-width: 767px) {
  #sf2 .ct-worries { margin-top: var(--p-10); padding-top: var(--p-6); }
  #sf2 .ct-worries .marquee { margin-right: calc(var(--side) * -1); }
}
#sf2 .cd-split { display: inline-flex; align-items: baseline; gap: var(--p-3); }
#sf2 .cd-split .d { padding-right: var(--p-3); border-right: 1px solid currentColor; border-right-color: rgba(255,255,255,.4); }
#sf2 .contest-sec h2 { font-size: var(--size-5xl) !important; line-height: 1.2; }
#sf2 .contest-sec h2 .hand { display: block; margin-bottom: .22em; font-size: 1.4em; }
/* Jua 콘테스트 제목 크기 */
#sf2 .contest-sec h2 br { display: none; }
@media (max-width: 767px) {
  #sf2 .contest-sec h2 { font-size: 30px !important; }
  #sf2 .contest-sec h2 .hand { font-size: 1.3em; }
}
/* Jua 모바일 제목 크기 */
#sf2 .ct-worries { border-top: 0; padding-top: 0; }
#sf2 .ct-worries .marquee { padding: var(--p-2) 0 var(--p-4); }
#sf2 .ct-worries .track { gap: var(--p-3); }
#sf2 .ct-worries .qt { position: relative; padding: var(--p-3) var(--p-5); border-radius: 20px 20px 20px 6px; background: #fff; color: var(--grey-900); font-size: var(--size-base); font-weight: 500; box-shadow: 0 6px 16px rgba(25,20,18,.08); }
#sf2 .ct-worries .qt::after { content: ''; position: absolute; left: 10px; bottom: -7px; width: 14px; height: 10px; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); }
@media (max-width: 767px) {
  #sf2 .ct-worries .qt { font-size: var(--size-sm); padding: var(--p-2-5, 10px) var(--p-4); }
}
/* 히어로 사전알림 버튼 — PC·모바일 단일 버튼(hh-mcta). 바로가기(hh-links) 아래 전체폭 흰 버튼. */
#sf2 .hh-mcta { display: block; align-self: stretch; margin-top: var(--p-8); }
#sf2 .hh-mcta .btn { width: 100%; background: #fff; border-color: #fff; color: var(--grey-900); }
@media (max-width: 767px) {
  #sf2 .hero-half.art-left .hh-in { align-items: center; text-align: center; }
  #sf2 .hero-half.art-left .hh-in h1 { order: 0; }
  #sf2 .hero-half.art-left .hh-links { order: 3; align-self: stretch; text-align: left; margin-top: var(--p-6); }
  #sf2 .hh-mcta { order: 4; display: block; align-self: stretch; margin-top: var(--p-6); }
  #sf2 .hh-mcta .actions { margin: 0; }
  #sf2 .hh-mcta .btn { width: 100%; white-space: normal; height: auto; min-height: 52px; background: #fff; border-color: #fff; color: var(--grey-900); }
}
#sf2 .contest-sec h2 { font-size: calc(var(--size-7xl) * .94) !important; }
@media (max-width: 1279px) {
  #sf2 .contest-sec h2 { font-size: var(--size-6xl) !important; }
}
@media (max-width: 767px) {
  #sf2 .contest-sec h2 { font-size: min(40px, 10.2vw) !important; }
}
#sf2 .ct-worries .marquee { padding: 0; }
#sf2 .ct-worries .track + .track { margin-top: var(--p-3); animation-direction: reverse; animation-duration: 46s; }
#sf2 .ct-worries .qt { padding: var(--p-3) var(--p-5); border-radius: 22px 22px 22px 4px; background: #fff; color: var(--grey-900); font-size: var(--size-base); font-weight: 500; box-shadow: none; }
#sf2 .ct-worries .qt::after { content: none; }
#sf2 .ct-worries .track + .track .qt { border-radius: 22px 22px 4px 22px; background: var(--grey-900); color: #fff; }
@media (max-width: 767px) {
  #sf2 .ct-worries .qt { font-size: var(--size-sm); padding: 10px var(--p-4); }
}
#sf2 .ct-worries .track { animation-duration: 60s; }
#sf2 .ct-worries .track + .track { animation-duration: 70s; }
#sf2 .ct-worries .track { animation-duration: 50s; }
#sf2 .hh-links .arr { margin-right: 6px; }
@media (min-width: 1280px) {
  #sf2 .hero-half.art-left .hh-in h1 { order: 0; }
  #sf2 .hero-half.art-left .hh-links { order: 3; align-self: stretch; margin-top: var(--p-8); }
  #sf2 .hh-mcta { order: 4; display: block; align-self: stretch; margin-top: var(--p-8); }
  #sf2 .hh-mcta .actions { margin: 0; }
  #sf2 .hh-mcta .btn { width: 100%; background: #fff; border-color: #fff; color: var(--grey-900); }
}
#sf2 .hh-mcta .btn:hover:not(:disabled) { background: var(--grey-100); border-color: var(--grey-100); color: var(--grey-900); }
#sf2 .hh-mcta .btn svg { transition: transform .25s; }
@media (hover: hover) {
  #sf2 .hh-mcta .btn:hover svg { transform: translateX(2px); }
}
@media (hover: hover) {
  #sf2 .hh-links button:hover .arr { transform: translateX(6px); }
}
#sf2 .hh-links button, #sf2 .hero-half.art-left .hh-links button { grid-template-columns: minmax(0, 1fr) 34px; }
#sf2 .hh-links .arr { justify-self: end; }
#sf2 .ct-worries .qt { background: rgba(255,255,255,.14); color: #fff; border-radius: 16px 16px 16px 4px; padding: var(--p-3) var(--p-4); font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
#sf2 .ct-worries .qt::before { content: '“'; margin-right: 4px; font-family: Georgia, serif; font-size: 1.3em; line-height: 0; vertical-align: -0.28em; opacity: .7; }
@media (min-width: 1280px) {
  #sf2 .hero-half.art-left { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  #sf2 .hero-half.art-left .hh-in { max-width: 520px; padding-left: var(--p-12); }
}
#sf2 .contest-sec h2.ct-tb .sub { display: block; font-size: .82em; font-weight: 700; }
#sf2 .contest-sec h2.ct-tb .hand { margin-top: .12em; margin-bottom: 0; }
#sf2 #teaser .prealarm { background: var(--acc); color: #fff; border: 0; box-shadow: none; }
#sf2 #teaser .prealarm .lead { color: rgba(255,255,255,.82); }
#sf2 #teaser .prealarm .btn.cta { background: #fff; border-color: #fff; color: var(--grey-900); }
#sf2 #teaser .prealarm .btn.cta:hover:not(:disabled) { background: var(--grey-100); border-color: var(--grey-100); color: var(--grey-900); }
#sf2 .pcard .pc { color: #c80a1e; }
#sf2 .ct-worries .marquee { padding: var(--p-2) 0 var(--p-5); }
#sf2 .ct-worries .track { align-items: flex-start; gap: var(--p-4); }
#sf2 .ct-worries .qt { --bub: color-mix(in srgb, #fff 18%, var(--acc)); position: relative; background: var(--bub); box-shadow: none; border-radius: 18px; padding: var(--p-3) var(--p-5); }
#sf2 .ct-worries .qt:nth-child(even) { margin-top: var(--p-4); }
#sf2 .ct-worries .qt::after { content: ''; position: absolute; left: 18px; bottom: -9px; width: 16px; height: 12px; background: var(--bub); clip-path: polygon(0 0, 100% 0, 15% 100%); }
#sf2 .ct-worries .qt:nth-child(even)::after { left: auto; right: 18px; clip-path: polygon(0 0, 100% 0, 85% 100%); }
#sf2 .kv-h1b .sub { display: block; color: var(--kv-lime, #d4e36a); }
@media (max-width: 374px) {
  #sf2 .hh-in h1.kv-h1b { font-size: 34px; }
}
#sf2 .ct-worries .qt:nth-child(even) { margin-top: 0; }
#sf2 .ct-worries .qt:nth-child(even)::after { left: 18px; right: auto; clip-path: polygon(0 0, 100% 0, 15% 100%); }
#sf2 .ct-worries .qt::before { content: none; }
#sf2 .ct-worries .track { gap: var(--p-5); animation-duration: 80s; }
#sf2 .ct-worries .marquee { padding: var(--p-5) 0 var(--p-4); }
#sf2 .ct-worries .track { gap: var(--p-5); align-items: center; animation-duration: 90s; }
/* 고민 메모 마퀴 — 모바일에선 조금 더 빠르게 (데스크톱 90s/70s → 50s/40s) */
@media (max-width: 767px) {
  #sf2 .ct-worries .track { animation-duration: 50s; }
  #sf2 .ct-worries .track + .track { animation-duration: 40s; }
}
#sf2 .ct-worries .qt { position: relative; padding: var(--p-4) var(--p-5) var(--p-3); border-radius: 2px; background: #fffdf3; color: var(--grey-900); font-family: 'Poor Story', var(--font-sans); font-weight: 400; font-size: 20px; line-height: 1.2; box-shadow: 0 6px 14px rgba(0,0,0,.14); transform: rotate(-2deg); }
/* 마퀴 폰트 Poor Story */
#sf2 .ct-worries .qt:nth-child(3n+2) { transform: rotate(1.5deg); background: #fff6d6; }
#sf2 .ct-worries .qt:nth-child(3n) { transform: rotate(-0.8deg); background: #f3f6ff; }
#sf2 .ct-worries .qt::after { content: none; }
#sf2 .ct-worries .qt::before { content: ''; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); transform: rotate(-3deg); opacity: 1; font-size: 0; }
@media (max-width: 767px) {
  #sf2 .ct-worries .qt { font-size: 17px; padding: var(--p-3) var(--p-4) var(--p-2); }
}
#sf2 #early .ep-head .ep-kicker { background: transparent; color: var(--foreground-secondary); box-shadow: inset 0 0 0 1px var(--border-regular); }
#sf2 .hh-in h1.kv-h1b { font-size: 56px; line-height: 1.12; }
#sf2 .kv-h1b .sub { margin-top: var(--p-1); font-size: .6em; font-weight: 700; letter-spacing: -0.01em; }
#sf2 .hh-in:has(.kv-h1b) .cd-split { font-size: 26px; }
@media (min-width: 1280px) {
  #sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links { margin-top: var(--p-6); }
  #sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links b { font-size: var(--size-lg); }
  #sf2 .hh-in:has(.kv-h1b) .hh-mcta { margin-top: var(--p-6); }
}
@media (max-width: 767px) {
  #sf2 .hh-in h1.kv-h1b { font-size: 38px; }
  #sf2 .hh-in:has(.kv-h1b) .cd-split { font-size: 22px; }
}
@media (max-width: 374px) {
  #sf2 .hh-in h1.kv-h1b { font-size: 32px; }
}
@media (max-width: 767px) {
  #sf2 .hh-in h1.kv-h1b { font-size: 42px; }
  #sf2 .kv-h1b .sub { font-size: .66em; }
  #sf2 .hh-in:has(.kv-h1b) .cd-split { font-size: 28px; }
}
@media (max-width: 374px) {
  #sf2 .hh-in h1.kv-h1b { font-size: 35px; }
}
#sf2 .hero-half.art-left .hh-links button { transition: padding .3s cubic-bezier(.2,.7,.2,1); }
#sf2 .hero-half.art-left .hh-links .arr { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  #sf2 .hero-half.art-left .hh-in .hh-links button:hover, #sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links button:hover { padding-left: var(--p-3); }
  #sf2 .hero-half.art-left .hh-in .hh-links button:hover .arr { transform: translateX(6px); }
}
@media (min-width: 768px) {
  #sf2 .hh-in h1.kv-h1b { font-size: clamp(52px, 4.7vw, 72px); line-height: 1.08; letter-spacing: -0.035em; white-space: nowrap; }
  #sf2 .kv-h1b .sub { margin-top: var(--p-2); font-size: .5em; letter-spacing: -0.01em; }
  #sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links { margin-top: var(--p-8) !important; }
}
@media (min-width: 1280px) {
  #sf2 .hero-half.art-left .hh-in { max-width: 560px; }
}
#sf2 .kv-h1b .sub { display: table; margin-top: var(--p-3); padding: .12em .4em .1em; border-radius: 8px; background: var(--kv-lime, #d4e36a); color: var(--grey-900); font-size: .46em; line-height: 1.25; letter-spacing: -0.01em; }
@media (max-width: 767px) {
  #sf2 .kv-h1b .sub { margin-left: auto; margin-right: auto; font-size: .52em; }
}
#sf2 .hero-half.art-left .hh-in .hh-links b { font-size: var(--size-lg); }
#sf2 #early details.caution { display: flex; flex-direction: column; align-items: center; text-align: center; }
#sf2 #early details.caution summary { justify-content: center; margin-inline: auto; }
#sf2 #early details.caution .body { max-width: 760px; margin-inline: auto; text-align: left; }
#sf2 #early details.caution summary { margin-left: 0 !important; margin-right: 0 !important; }
#sf2 .kv-h1b .sub { display: block; margin: var(--p-2) 0 0; padding: 0; border-radius: 0; background: none; color: #fff; font-size: .5em; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
@media (max-width: 767px) {
  #sf2 .kv-h1b .sub { margin: var(--p-1) auto 0; font-size: .6em; }
}
#sf2 .hh-in .kv-h1b .sub { color: #eef7a8; font-weight: 600; }
#sf2 .contest-sec h2.ct-tb .hand { margin-top: .32em; }
#sf2 .kv-pre { display: block; margin-bottom: var(--p-2); font-size: var(--size-xl); font-weight: 700; letter-spacing: -0.01em; color: #eef7a8; }
@media (max-width: 767px) {
  #sf2 .kv-pre { font-size: var(--size-lg); margin-bottom: var(--p-1); }
}
#sf2 .kv-pre { font-size: var(--size-base); font-weight: 600; }
@media (max-width: 767px) {
  #sf2 .kv-pre { font-size: var(--size-sm); }
}
#sf2 .contest-sec h2.ct-tb .hand { margin-top: .2em; }
#sf2 .cf-apt { margin-top: var(--p-3); }
#sf2 .cf-apt .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--p-2); }
@media (max-width: 767px) {
  /* .field .row2(2열) 가 뒤에서 덮어 2열로 남던 문제 — specificity 올려 모바일은 단지명·평형 각각 전체폭 1열 */
  #sf2 .field .cf-apt .row2 { grid-template-columns: 1fr; }
}
/* 사연접수 모달: 주거형태 안내문 · 방사이즈 2칸 · 촬영 예시 3컷 · 동의 '보기' · 약관 본문 */
#sf2 .cf-apt .hint { margin-top: var(--p-2); font-size: var(--size-xs); color: var(--foreground-secondary); }
#sf2 .cf-apt .hint b { color: var(--grey-900, #1f2430); font-weight: 600; }
#sf2 .field .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--p-2); }
#sf2 .cf-shots { margin-top: var(--p-5); padding: var(--p-4); border-radius: var(--radius-md, 12px); background: var(--grey-50, #f7f7f6); }
#sf2 .cf-shots > .lab { display: block; font-size: var(--size-sm); font-weight: 600; }
#sf2 .cf-shots ul { margin-top: var(--p-3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--p-2); }
#sf2 .cf-shots li { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#sf2 .cf-shots li .ph { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--p-1-5); }
#sf2 .cf-shots li .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sf2 .cf-shots li .no { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--grey-900, #1f2430); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#sf2 .cf-shots li b { font-size: var(--size-xs); font-weight: 600; }
#sf2 .cf-shots li small { font-size: 11px; color: var(--foreground-subtle); line-height: 1.4; }
#sf2 .switch-card .view { margin-left: var(--p-1); font-size: var(--size-xs); color: var(--foreground-subtle); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
#sf2 .greybox.terms-body { max-height: 52vh; overflow-y: auto; line-height: 1.7; }
#sf2 .greybox.terms-body p + p { margin-top: 12px; }
#sf2 .greybox.terms-body b { color: var(--foreground-regular); font-weight: 600; }
@media (max-width: 767px) {
  /* 사진 예시 — 모바일은 1열 스택 + 왼쪽 이미지(140px)/오른쪽 텍스트 2줄 (festa-prototype 시안) */
  #sf2 .cf-shots { padding: 20px 16px; }
  #sf2 .cf-shots > .lab { font-size: 15px; }
  #sf2 .cf-shots ul { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  #sf2 .cf-shots li { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-content: center; }
  #sf2 .cf-shots li .ph { grid-row: 1 / 3; margin-bottom: 0; }
  #sf2 .cf-shots li b { align-self: end; font-size: 15px; }
  #sf2 .cf-shots li small { align-self: start; font-size: 13px; line-height: 1.5; }
  #sf2 .cf-shots li .no { width: 22px; height: 22px; font-size: 12px; }
}
@media (max-width: 767px) {
  #sf2 .contest-sec > .wrap { display: flex; flex-direction: column; }
  #sf2 .contest-sec > .wrap > .ct2-grid { order: 1; }
  #sf2 .contest-sec > .wrap > .ct-worries { order: 2; margin-top: var(--p-10); margin-bottom: var(--p-2); }
  #sf2 .contest-sec > .wrap > .ct2-mrow { order: 3; margin-top: var(--p-8); }
  #sf2 .contest-sec > .wrap > .ct2-caution { order: 4; }
}
#sf2 .kv-pre { margin-bottom: var(--p-3); }
#sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links { margin-top: var(--p-10) !important; }
#sf2 .hh-in:has(.kv-h1b) .hh-mcta { margin-top: var(--p-8) !important; }
@media (max-width: 767px) {
  #sf2 .kv-pre { margin-bottom: var(--p-2); }
  #sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links { margin-top: var(--p-8) !important; }
  #sf2 .hh-in:has(.kv-h1b) .hh-mcta { margin-top: var(--p-8) !important; }
}
#sf2 .hh-in .hh-mcta, #sf2 .hh-in:has(.kv-h1b) .hh-mcta { margin-top: var(--p-12) !important; }
@media (max-width: 767px) {
  #sf2 .hh-in .hh-mcta, #sf2 .hh-in:has(.kv-h1b) .hh-mcta { margin-top: var(--p-10) !important; }
}
@media (max-width: 767px) {
  #sf2 .hero-half.art-left .hh-in { padding-top: var(--p-10) !important; padding-bottom: var(--p-12) !important; }
  #sf2 .kv-pre { margin-bottom: var(--p-3); }
  #sf2 .hero-half.art-left .hh-in:has(.kv-h1b) .hh-links { margin-top: var(--p-10) !important; }
}
@media (max-width: 767px) {
  #sf2 .contest-sec.ct2 > .wrap > .ct2-grid, #sf2 .contest-sec.ct2 .ct2-copy { display: contents; }
  #sf2 .contest-sec.ct2 > .wrap > *, #sf2 .contest-sec.ct2 .ct2-copy > * { order: 1; }
  #sf2 .contest-sec.ct2 > .wrap > .ct-worries { order: 2 !important; margin-top: var(--p-10) !important; margin-bottom: 0 !important; }
  #sf2 .contest-sec.ct2 .ct2-copy > .ct2-act { order: 3 !important; margin-top: var(--p-8) !important; }
  #sf2 .contest-sec.ct2 > .wrap > .ct2-mrow { order: 4 !important; margin-top: var(--p-12) !important; }
  #sf2 .contest-sec.ct2 > .wrap > .ct2-caution { order: 5 !important; }
}
@media (max-width: 767px) {
  #sf2 .contest-sec.ct2 > .wrap > .ct-worries { margin-top: var(--p-7, 28px) !important; }
  #sf2 .contest-sec.ct2 .ct2-copy > .ct2-act { margin-top: var(--p-5) !important; }
  #sf2 .contest-sec.ct2 > .wrap > .ct2-mrow { margin-top: var(--p-9, 36px) !important; }
}
@media (max-width: 767px) {
  #sf2 .contest-sec.ct2 h2 { margin-top: var(--p-5) !important; }
  #sf2 .contest-sec.ct2 .lead { margin-top: var(--p-4) !important; }
  #sf2 .contest-sec .ct-flow { margin-top: var(--p-8) !important; }
  #sf2 .contest-sec.ct2 > .wrap > .ct-worries { margin-top: var(--p-10) !important; }
  #sf2 .contest-sec.ct2 .ct2-copy > .ct2-act { margin-top: var(--p-8) !important; }
  #sf2 .contest-sec.ct2 > .wrap > .ct2-mrow { margin-top: var(--p-12) !important; }
}
#sf2 .ep-kicker { background: transparent !important; color: var(--foreground-secondary) !important; box-shadow: inset 0 0 0 1px var(--border-regular) !important; }
@media (min-width: 768px) {
  #sf2 .hh-in h1.kv-h1b { font-size: clamp(56px, 5.1vw, 78px); }
}
@media (min-width: 375px) and (max-width: 767px) {
  #sf2 .hh-in h1.kv-h1b { font-size: 44px; }
}
@media (min-width: 768px) {
  #sf2 .contest-sec.ct2 .lead { margin-top: var(--p-6) !important; }
  #sf2 .contest-sec.ct2 .ct-flow { margin-top: var(--p-12) !important; }
  #sf2 .contest-sec.ct2 .ct2-act { margin-top: var(--p-12) !important; }
}
@keyframes bpxIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes dzFloat { 50% { transform: translateY(-10px) rotate(8deg); } }
@keyframes pbdIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#sf2 .hero-half { --hh-bg: #6a7fc4; }
#sf2 .kv-lg { margin-top: var(--p-6); padding-bottom: var(--p-2); font-size: var(--size-xs); font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.3); }
#sf2 .kv-lg:first-child { margin-top: 0; }
#sf2 .hh-links:has(.kv-lg) { border-top: 0; }
#sf2 .kv-lg { margin-top: var(--p-8); font-size: var(--size-sm); font-weight: 700; color: #eef7a8; }
#sf2 .hero-half .kv-lg:first-child { margin-top: 0; }
#sf2 .hero-half .kv-lg { font-size: 15px; }
#sf2 .ep-kicker { display: none !important; }
#sf2 .eb5s { margin-top: var(--p-12); display: flex; flex-direction: column; gap: var(--p-16); }
#sf2 .eb5 + .eb5 { padding-top: var(--p-16); border-top: 1px solid var(--border-regular); }
#sf2 .eb5-img { position: relative; aspect-ratio: 21 / 9; border-radius: 20px; overflow: hidden; background: var(--background-subtle); }
#sf2 .eb5-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sf2 .eb5-body { margin-top: var(--p-8); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--p-10); align-items: start; }
#sf2 .eb5-intro h3 { font-size: var(--size-4xl); font-weight: 700; letter-spacing: -0.02em; }
#sf2 .eb5-intro .desc { margin-top: var(--p-3); font-size: var(--size-base); line-height: 1.6; color: var(--foreground-secondary); }
#sf2 .eb5-items { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--p-3) * 3) / 3.4); gap: var(--p-3); overflow-x: auto; scrollbar-width: none; overflow-y: hidden; }
#sf2 .eb5-items::-webkit-scrollbar { display: none; }
#sf2 .eb5-items .pcard .name { -webkit-line-clamp: 3; min-height: calc(1.5em * 3); }
@media (max-width: 1023px) {
  #sf2 .eb5-body { grid-template-columns: 1fr; gap: var(--p-6); }
  #sf2 .eb5-items { grid-auto-columns: 200px; }
}
@media (max-width: 767px) {
  #sf2 .eb5s { margin-top: var(--p-8); gap: var(--p-10); }
  #sf2 .eb5 + .eb5 { padding-top: var(--p-10); }
  #sf2 .eb5-img { aspect-ratio: 4 / 3; border-radius: 14px; margin: 0 calc(var(--side) * -1); border-radius: 0; }
  #sf2 .eb5-body { margin-top: var(--p-5); }
  #sf2 .eb5-intro h3 { font-size: var(--size-2xl); }
  #sf2 .eb5-items { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
}
#sf2 .eb5 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--p-10); align-items: center; }
#sf2 .eb5:nth-child(2) .eb5-img { order: 2; }
#sf2 .eb5-img { aspect-ratio: 4 / 3; overflow: visible; }
#sf2 .eb5-img img { border-radius: 20px; }
#sf2 .eb5-body { margin-top: 0; display: flex; flex-direction: column; gap: var(--p-6); }
#sf2 .eb5-items { grid-auto-columns: calc((100% - var(--p-3) * 2) / 2.6); }
@media (max-width: 1023px) {
  #sf2 .eb5 { grid-template-columns: 1fr; gap: var(--p-6); }
  #sf2 .eb5:nth-child(2) .eb5-img { order: 0; }
  #sf2 .eb5-items { grid-auto-columns: 200px; }
}
@media (max-width: 767px) {
  #sf2 .eb5-img { margin: 0; aspect-ratio: 3 / 2; }
  #sf2 .eb5-img img { border-radius: 14px; }
  #sf2 .eb5-items { grid-auto-columns: auto; }
}
@media (min-width: 1024px) {
  #sf2 .eb5:nth-child(2) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
#sf2 .tz-cards { margin-top: var(--head-gap, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--p-4); }
#sf2 .tz-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--background-subtle); }
#sf2 .sec.subtle .tz-card { background: #fff; }
#sf2 .tz-card .img { position: relative; aspect-ratio: 4 / 3; background: #f0f0f0; overflow: hidden; }
#sf2 .tz-card .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sf2 .tz-card .tx { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: var(--p-5) var(--p-5) var(--p-6); }
#sf2 .tz-card .ty { font-size: var(--size-xs); font-weight: 700; color: var(--acc-strong); }
#sf2 .tz-card h4 { margin-top: var(--p-1); font-size: var(--size-xl); font-weight: 700; letter-spacing: -0.02em; }
#sf2 .tz-card p { margin-top: var(--p-2); font-size: var(--size-sm); line-height: 1.5; color: var(--foreground-secondary); }
@media (max-width: 1023px) {
  #sf2 .tz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #sf2 .tz-cards { margin-top: 48px !important; gap: var(--p-3); }
  #sf2 .tz-card .tx { padding: var(--p-4); }
  #sf2 .tz-card h4 { font-size: var(--size-base); }
  #sf2 .tz-card p { font-size: var(--size-xs); }
}
#sf2 .hero-half .kv-lg { display: flex; align-items: center; gap: var(--p-2); color: #fff; font-size: 14px; font-weight: 700; }
#sf2 .hero-half .kv-lg::before { content: ''; width: 14px; height: 2px; background: rgba(255,255,255,.7); }
#sf2 .eb5, #sf2 .eb5:nth-child(2) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
#sf2 .eb5:nth-child(2) .eb5-img { order: 0; }
#sf2 .eb5-img { aspect-ratio: auto; min-height: 360px; height: 100%; }
#sf2 .eb5-img img { position: absolute; inset: 0; height: 100%; }
#sf2 .eb5-body { justify-content: space-between; }
#sf2 .eb5-items { grid-auto-columns: calc((100% - var(--p-3) * 2) / 3); }
@media (max-width: 1023px) {
  #sf2 .eb5-img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  #sf2 .eb5-items { grid-auto-columns: 200px; }
}
@media (max-width: 767px) {
  #sf2 .eb5-items { grid-auto-columns: auto; }
}
#sf2 .eb5-items { width: 100%; align-self: stretch; justify-content: start; }
@media (max-width: 1023px) {
  #sf2 .eb5, #sf2 .eb5:nth-child(2) { grid-template-columns: 1fr; }
  #sf2 .eb5-img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
}
#sf2 .eb5 { gap: var(--p-8); }
#sf2 .eb5-items { grid-auto-columns: calc((100% - var(--p-3) * 2) / 2.5); padding-right: var(--p-6); }
#sf2 .eb5-img { min-height: 320px; }
#sf2 .tz-card .img { aspect-ratio: 2 / 1; }
#sf2 .tz-card .ty { color: var(--foreground-secondary); font-weight: 600; }
#sf2 .tz-card h4 { font-size: var(--size-xl); line-height: 1.35; }
@media (max-width: 767px) {
  #sf2 .tz-card .img { aspect-ratio: 16 / 9; }
  #sf2 .tz-card h4 { font-size: var(--size-base); }
}
#sf2 .eb5 > *, #sf2 .eb5-body > * { min-width: 0; }
@media (max-width: 767px) {
  #sf2 .eb5-items { padding-right: 0; grid-auto-columns: auto; }
}
@media (max-width: 1023px) {
  #sf2 .eb5-img { min-height: 0; }
}
#sf2 .tz-card .img { aspect-ratio: 5 / 2; }
@media (max-width: 767px) {
  #sf2 .tz-card .img { aspect-ratio: 2 / 1; }
}
#sf2 .eb5s { gap: var(--p-12); }
#sf2 .eb5 + .eb5 { padding-top: 0; border-top: 0; }
#sf2 .eb5-intro h3 { font-size: var(--size-3xl); }
#sf2 .eb5-intro .desc { margin-top: var(--p-2); font-size: var(--size-sm); }
#sf2 .eb5-body { gap: var(--p-5); justify-content: flex-start; }
#sf2 .eb5-img { min-height: 280px; }
#sf2 .eb5-items .pcard .name { -webkit-line-clamp: 2; min-height: calc(1.5em * 2); }
@media (max-width: 1023px) {
  #sf2 .eb5-img { min-height: 0; }
}
@media (max-width: 767px) {
  #sf2 .eb5s { gap: var(--p-10); }
  #sf2 .eb5-intro h3 { font-size: var(--size-xl); }
}
#sf2 .eb5-items { grid-auto-columns: calc((100% - var(--p-3) * 3) / 3.3); }
@media (max-width: 1023px) {
  #sf2 .eb5-items { grid-auto-columns: 170px; }
}
@media (max-width: 767px) {
  #sf2 .eb5-items { grid-auto-columns: auto; }
}
#sf2 .tz-cd2 { margin-top: 10px; font-size: var(--size-base); color: var(--foreground-secondary); }
#sf2 .tz-cd2 b { margin-left: 4px; color: var(--acc-strong); font-weight: 700; }
#sf2 .tz-card h4 { font-size: var(--size-2xl); }
@media (max-width: 767px) {
  #sf2 .tz-card h4 { font-size: var(--size-lg); }
}
#sf2 .tz-card .img.art { aspect-ratio: 5 / 3; display: grid; place-items: center; background: var(--acc-tint); }
#sf2 .sec.subtle .tz-card .img.art { background: var(--acc-tint); }
#sf2 .tz-card .img.art svg { width: 44%; max-width: 128px; height: auto; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  #sf2 .tz-card:hover .img.art svg { transform: translateY(-4px) rotate(-3deg); }
}
@media (max-width: 767px) {
  #sf2 .tz-card .img.art { aspect-ratio: 4 / 3; }
  #sf2 .tz-card .img.art svg { width: 44%; max-width: 120px; }
}
#sf2 .eb5-items .pcard { padding: var(--p-2) var(--p-2) var(--p-4); border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.02); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
@media (hover: hover) {
  #sf2 .eb5-items .pcard:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(30,50,140,.1); }
}
#sf2 .eb5-items .pcard .thumb { border-radius: 10px; overflow: hidden; }
#sf2 .eb5-items .pcard .info { padding: var(--p-3) var(--p-2) 0; }
#sf2 .eb5-items .pcard .name { margin-top: var(--p-2); }
#sf2 .eb5-items .pcard .now { font-size: var(--size-lg); font-weight: 800; }
#sf2 .eb5-items .pcard .pc { font-size: var(--size-lg); font-weight: 800; }
#sf2 .hero-half .kv-lg { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.62); letter-spacing: .01em; }
#sf2 .hero-half .kv-lg::before { background: rgba(255,255,255,.45); }
#sf2 .hero-half.art-left .hh-links b { font-size: 21px; font-weight: 700; color: #fff; }
#sf2 .hero-half.art-left .hh-links button { padding: var(--p-4) 0; }
#sf2 .eb5s { margin-top: var(--p-16); gap: var(--p-20, 80px); }
#sf2 .eb5 { gap: var(--p-10); align-items: start; }
#sf2 .eb5-img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
#sf2 .eb5-body { gap: var(--p-6); padding-top: var(--p-2); }
#sf2 .eb5-items .pcard { padding: 0; background: none; border-radius: 0; box-shadow: none; }
@media (hover: hover) {
  #sf2 .eb5-items .pcard:hover { transform: none; box-shadow: none; }
}
#sf2 .eb5-items .pcard .info { padding: var(--p-3) 0 0; }
#sf2 .eb5-items .pcard .name { margin-top: 0; }
#sf2 .eb5-items .pcard .now, #sf2 .eb5-items .pcard .pc { font-size: var(--size-base); }
#sf2 .eb5-items { gap: var(--p-4); grid-auto-columns: calc((100% - var(--p-4) * 3) / 3.3); }
@media (max-width: 1023px) {
  #sf2 .eb5 { gap: var(--p-6); }
  #sf2 .eb5-items { grid-auto-columns: 170px; }
}
@media (max-width: 767px) {
  #sf2 .eb5s { margin-top: var(--p-10); gap: var(--p-12); }
  #sf2 .eb5-img { aspect-ratio: 3 / 2; }
  #sf2 .eb5-items { grid-auto-columns: auto; gap: var(--p-3); }
}
#sf2 .eb5-img { width: 100%; max-width: 100%; justify-self: stretch; }
#sf2 .hero-half { --hh-bg: #5a6eb6; }
#sf2 .hero-half .kv-lg { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); }
#sf2 .hero-half .kv-lg::before { background: #eef7a8; }
#sf2 .hero-half .kv-pre { font-size: 17px; font-weight: 700; }
#sf2 .hero-half.art-left .hh-links button { border-bottom-color: rgba(255,255,255,.4); }
#sf2 .hero-half.art-left .hh-links .arr { opacity: 1; }
@media (min-width: 1024px) {
  #sf2 .eb5 { align-items: stretch; }
  #sf2 .eb5-img { aspect-ratio: auto; height: auto; min-height: 0; align-self: stretch; }
  #sf2 .eb5-body { padding-top: 0; }
}
#sf2 .hero-half.art-left .hh-links { margin-top: var(--p-12); }
#sf2 .hero-half .kv-lg { margin-top: var(--p-10); padding-bottom: var(--p-3); }
#sf2 .hero-half .kv-lg:first-child { margin-top: 0; }
#sf2 .hero-half.art-left .hh-links button { padding: var(--p-5) 0; }
@media (max-width: 767px) {
  #sf2 .hero-half.art-left .hh-links { margin-top: var(--p-8); }
  #sf2 .hero-half .kv-lg { margin-top: var(--p-8); }
}
@media (min-width: 768px) {
  #sf2 .hero-half .hh-in .hh-links { margin-top: var(--p-12) !important; }
  #sf2 .hero-half .hh-in .kv-lg:not(:first-child) { margin-top: var(--p-14, 56px) !important; }
}
#sf2 .tz-card .img.art.mix { position: relative; }
#sf2 .tz-card .img.art.mix .cut { position: absolute; left: 50%; bottom: 6%; width: 62%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 10px 12px rgba(30,50,140,.14)); }
@media (hover: hover) {
  #sf2 .tz-card:hover .img.art.mix .cut { transform: translateX(-50%) translateY(-4px); }
}
#sf2 .tz-card .img.art.mix .cut { width: 92%; bottom: -14%; }
#sf2 .tz-card .img.art.ipad .dev { position: absolute; left: 50%; top: 14%; height: 108%; width: auto; transform: translateX(-50%) rotate(-6deg); border-radius: 10px; filter: drop-shadow(0 12px 16px rgba(30,50,140,.18)); }
@media (hover: hover) {
  #sf2 .tz-card:hover .img.art.ipad .dev { transform: translateX(-50%) rotate(-3deg) translateY(-4px); }
}
#sf2 #early.sec { padding-top: 140px; }
@media (max-width: 1279px) {
  #sf2 #early.sec { padding-top: 112px; }
}
@media (max-width: 767px) {
  #sf2 #early.sec { padding-top: 80px; }
}
#sf2 .tz-card .img.art.ipad { display: grid; place-items: center; }
#sf2 .tz-card .img.art.ipad .dev { position: static; height: 64%; width: auto; max-width: 60%; object-fit: contain; transform: none; border-radius: 0; filter: drop-shadow(0 8px 10px rgba(30,50,140,.14)); }
@media (hover: hover) {
  #sf2 .tz-card:hover .img.art.ipad .dev { transform: translateY(-4px) rotate(-3deg); }
}
#sf2 .tz-card .img.art.ipad .dev { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
#sf2 .tz-card .img.art.mix:not(.ipad) { display: grid; place-items: center; }
#sf2 .tz-card .img.art.mix .cut { position: static; width: auto; height: 60%; max-width: 64%; object-fit: contain; transform: none; filter: drop-shadow(0 8px 10px rgba(30,50,140,.14)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  #sf2 .tz-card:hover .img.art.mix .cut { transform: translateY(-4px) rotate(-3deg); }
}
#sf2 .tz-card .img.art.ipad .dev { height: 60%; }
#sf2 #early .eb5s + details, #sf2 #early .eb5s ~ .caution, #sf2 #early details.caution { margin-top: 36px; }
@media (max-width: 767px) {
  #sf2 #early .eb5s + details, #sf2 #early details.caution { margin-top:28px; }
}
@media (max-width: 767px) {
  #sf2 .contest-sec.ct2 > .wrap > .ct2-mrow { order: 3 !important; margin-top: var(--p-10) !important; }
  #sf2 .contest-sec.ct2 .ct2-copy > .ct2-act { order: 4 !important; margin-top: var(--p-8) !important; }
}
#sf2 .eb5s { margin-top: 96px; gap: 112px; }
@media (max-width: 1023px) {
  #sf2 .eb5s { margin-top: 72px; gap: 88px; }
}
@media (max-width: 767px) {
  #sf2 .eb5s { margin-top: 48px; gap: 64px; }
}
#sf2 .tz-card .img.art.mix .cut, #sf2 .tz-card .img.art.ipad .dev { width: auto !important; height: 66% !important; max-width: 70%; position: static; }
#sf2 .tz-card .img.art.mix .cut, #sf2 .tz-card .img.art.ipad .dev { position: absolute !important; inset: 0; margin: auto; left: 0 !important; top: 0 !important; bottom: 0 !important; transform: none; }
@media (hover: hover) {
  #sf2 .tz-card:hover .img.art.mix .cut, #sf2 .tz-card:hover .img.art.ipad .dev { transform: translateY(-4px); }
}
#sf2 .eb-head { position: relative; isolation: isolate; }
#sf2 .eb-head h2 { line-height: 1.25; }
#sf2 .eb-tag { display: inline-block; margin-left: .1em; padding: .04em .32em .1em; border-radius: .2em; background: var(--acc); color: #fff; transform: rotate(-2deg); box-shadow: .08em .1em 0 var(--kv-lime, #d4e36a); }
@media (max-width: 767px) {
  #sf2 .eb-tag { margin-top: .15em; }
}
#sf2 .eb-head .eb-lead { margin-top: var(--p-8); }
@media (max-width: 767px) {
  #sf2 .eb-head .eb-lead { margin-top: var(--p-5); }
}
#sf2 .eb-head .eb-lead { margin-top: var(--p-5); font-size: var(--size-base); color: var(--foreground-secondary); }
@media (max-width: 767px) {
  #sf2 .eb-head .eb-lead { font-size: var(--size-sm); margin-top: var(--p-4); }
}
#sf2 .eb-head .eb-lead b { color: var(--acc-strong); font-weight: 700; }
#sf2 .tz-card .img.art.mix .cut, #sf2 .tz-card .img.art.ipad .dev { height: 58% !important; }
#sf2 .tz-cd2 b.cd-split { display: inline-flex; align-items: baseline; gap: var(--p-2); margin-left: var(--p-2); }
#sf2 .tz-cd2 .cd-split .d { padding: 2px 8px; border: 0 !important; border-radius: 6px; background: var(--acc); color: #fff; font-size: .9em; }
#sf2 .tz-cd2 .cd-split .t { color: var(--acc-strong); font-variant-numeric: tabular-nums; }
#sf2 .eb-head { transform: translateY(-5px); }
#sf2 .tz-cd2 .cd-split .d::after { font-style: normal; margin: 0 var(--p-3); color: var(--foreground-subtle); font-weight: 400; }
#sf2 .tz-cd2 .cd-split .d::after { content: '|'; }
#sf2 .tz-cd2 b.cd-split { margin-left: 0; gap: 0; }
#sf2 .tz-cd2 .cd-split .d { padding: 0; background: none; border-radius: 0; color: var(--acc-strong); font-size: inherit; }
#sf2 .tz-cd2 b.cd-split { margin-left: var(--p-2); }
#sf2 .tz-cd2 .cd-split .d::after { margin: 0 6px; }
#sf2 .tz-card .img.art.mix .cut { width: 70% !important; height: 64% !important; max-width: none; object-fit: contain; object-position: center; }
#sf2 .tz-card .img.art.mix .cut, #sf2 .tz-card .img.art.ipad .dev { filter: drop-shadow(0 3px 4px rgba(30,50,140,.06)); }
@media (max-width: 767px) {
  #sf2 .tz-card .img.art.mix .cut { width: 54% !important;height: 48% !important; }
}