@charset "utf-8";
/* ============================================================
   키비주얼 모티프 레이어 — <html data-kv="on | off">
   ------------------------------------------------------------
   키비주얼을 '히어로에 한 장 넣는' 데서 그치지 않고,
   그 안의 조형 언어를 페이지 전체가 이어받게 하는 레이어입니다.

   전달받은 키비주얼에서 가져온 네 가지 요소
     ① 면 분할   — 연한 블루 사각 면이 어긋나게 겹치는 바탕
     ② 빛줄기    — 양 끝이 흐려지는 가는 사선
     ③ 영문 조판 — 굵은 대문자 디스플레이 타이포
     ④ 각진 면   — 둥근 모서리가 없는 직사각 구성 + 짧은 가로 룰

   꺼서 비교하려면 주소 끝에 ?kv=off
   확정되면 content.json 의 event.kvMotif 에 "on" / "off" 를 넣습니다.
   ============================================================ */

/* ───────── 키비주얼에서 뽑은 색 ───────── */
:root[data-kv="on"]{
  --kv-navy:    #0c3658;   /* 한글 제목 네이비 */
  --kv-blue:    #425d98;   /* 영문 타이포 블루 */
  --kv-pale:    #e9f1f8;   /* 면 분할 기본 톤 */
  --kv-pale-2:  #f2f7fb;   /* 한 단계 옅은 면 */
  --kv-pale-3:  #dde8f3;   /* 한 단계 짙은 면 */

  /* ④ 각진 면 — 키비주얼에 둥근 모서리가 하나도 없다 */
  --r:     0px;
  --r-lg:  0px;
}

/* 다른 색상 시안(sage·navy·ivory)에서도 깨지지 않도록
   모티프 색을 그 테마의 강조색으로 바꿔 끼운다 */
:root[data-kv="on"]:not([data-theme="kv"]){
  --kv-navy:    var(--tx);
  --kv-blue:    var(--brand);
  --kv-pale:    var(--fill-2);
  --kv-pale-2:  var(--fill);
  --kv-pale-3:  var(--fill-2);
}

/* 모티프를 끈 상태에서는 장식 요소가 아예 없는 것처럼 */
:root:not([data-kv="on"]) .sec__en{ display:none; }


/* ============================================================
   ① 면 분할 — 섹션 바탕에 어긋나게 겹치는 연블루 사각 면
   ============================================================ */
:root[data-kv="on"] .sec{ overflow:hidden; }

/* 바탕 면은 가장 뒤, 본문은 가장 앞 */
:root[data-kv="on"] .sec::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
}
:root[data-kv="on"] .sec > .wrap{ position:relative; z-index:1; }

/* 섹션마다 면의 크기·위치를 달리해 스크롤하며 리듬이 생기게 한다 */
:root[data-kv="on"] .sec--about::before{
  background-image:
    linear-gradient(var(--kv-pale),   var(--kv-pale)),
    linear-gradient(var(--kv-pale-2), var(--kv-pale-2));
  background-size:     26% 58%, 42% 26%;
  background-position: 100% 0%, -6% 100%;
}
:root[data-kv="on"] .sec--info::before{
  background-image:
    linear-gradient(var(--kv-pale-2), var(--kv-pale-2)),
    linear-gradient(var(--kv-pale),   var(--kv-pale));
  background-size:     38% 44%, 18% 34%;
  background-position: -4% 0%, 96% 100%;
}
:root[data-kv="on"] .sec--program::before{
  background-image:
    linear-gradient(var(--kv-pale),   var(--kv-pale)),
    linear-gradient(var(--kv-pale-2), var(--kv-pale-2));
  background-size:     22% 40%, 30% 30%;
  background-position: 102% 22%, -8% 86%;
}
:root[data-kv="on"] .sec--apply::before{
  background-image:
    linear-gradient(var(--kv-pale-2), var(--kv-pale-2));
  background-size:     30% 34%;
  background-position: 100% 0%;
}
:root[data-kv="on"] .sec--faq::before{
  background-image:
    linear-gradient(var(--kv-pale-2), var(--kv-pale-2)),
    linear-gradient(var(--kv-pale),   var(--kv-pale));
  background-size:     34% 30%, 16% 46%;
  background-position: -6% 4%, 100% 70%;
}
:root[data-kv="on"] .sec--survey::before{
  background-image:linear-gradient(var(--kv-pale-2), var(--kv-pale-2));
  background-size:28% 40%; background-position:100% 10%;
}
:root[data-kv="on"] .sec--contact::before{
  background-image:
    linear-gradient(var(--kv-pale), var(--kv-pale));
  background-size:     24% 46%;
  background-position: 100% 100%;
}


/* ============================================================
   ② 빛줄기 — 양 끝이 흐려지며 사라지는 가는 사선
   키비주얼의 사선이 글자를 가로지르던 방식 그대로,
   섹션을 하나씩 비스듬히 지나가게 둔다.
   ============================================================ */
:root[data-kv="on"] .sec::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-12%; height:124%; width:2px;
  background:linear-gradient(180deg,
    transparent 0%, var(--kv-blue) 26%, var(--kv-blue) 72%, transparent 100%);
  opacity:.28;
}
:root[data-kv="on"] .sec--about::after  { left:76%; transform:rotate(13deg); }
:root[data-kv="on"] .sec--info::after   { left:18%; transform:rotate(-11deg); opacity:.2; }
:root[data-kv="on"] .sec--program::after{ left:88%; transform:rotate(9deg); }
:root[data-kv="on"] .sec--apply::after  { left:8%;  transform:rotate(-14deg); opacity:.16; }
:root[data-kv="on"] .sec--faq::after    { left:84%; transform:rotate(12deg); opacity:.2; }
:root[data-kv="on"] .sec--survey::after { left:12%; transform:rotate(-10deg); opacity:.18; }
:root[data-kv="on"] .sec--contact::after{ left:80%; transform:rotate(-13deg); }


/* ============================================================
   ③ 영문 디스플레이 조판
   키비주얼의 좌(한글) · 우(영문) 구성을 섹션 머리에서 되풀이한다.
   화면 밖으로 잘리는 것까지 키비주얼과 같은 처리.
   ============================================================ */
/* 기준점은 섹션 — 어느 섹션이든 오른쪽 끝에서 똑같이 잘려 나가게 한다 */
:root[data-kv="on"] .sec__en{
  position:absolute; right:-10px; top:58px; z-index:0; pointer-events:none;
  font-family:var(--ff-en); font-weight:800;
  font-size:clamp(46px, 15vw, 128px); line-height:.86; letter-spacing:-.045em;
  color:var(--kv-blue); opacity:.11; white-space:nowrap;
  -webkit-user-select:none; user-select:none;
}
/* 본문은 언제나 영문 조판 위로 */
:root[data-kv="on"] .sec__no,
:root[data-kv="on"] .sec__title,
:root[data-kv="on"] .sec__desc{ position:relative; z-index:1; }

/* 섹션 번호 — 키비주얼의 영문과 같은 결로.
   구분선은 아래 짧은 룰 하나로 모으고 여기서는 걷어낸다 */
:root[data-kv="on"] .sec__no{
  color:var(--kv-blue); letter-spacing:.16em;
  border-bottom:0; padding-bottom:0; margin-bottom:10px;
}

/* ④ 짧은 가로 룰 — 키비주얼에서 ‘밋업데이’ 아래 놓이던 선 */
:root[data-kv="on"] .sec__title{ margin-bottom:0; }
:root[data-kv="on"] .sec__title::after{
  content:''; display:block; width:52px; height:0;
  margin:16px 0 0; border-top:3px solid var(--kv-navy);
}
/* 룰 다음에 오는 것이 설명문이든 카드든 같은 간격을 갖게 */
:root[data-kv="on"] .sec__title + *{ margin-top:26px; }


/* ============================================================
   면으로 읽히는 카드 — 선으로 두르지 않고 연블루 면으로 구분
   ============================================================ */
:root[data-kv="on"][data-theme="kv"] .infocard,
:root[data-kv="on"][data-theme="kv"] .tl__body,
:root[data-kv="on"][data-theme="kv"] .contactbox,
:root[data-kv="on"][data-theme="kv"] .hero__status{
  background:var(--kv-pale-2);
  border-color:transparent;
  box-shadow:none;
}
/* 신청·문의 섹션은 바탕이 이미 옅으므로 카드를 흰 면으로 되돌려 대비를 준다 */
:root[data-kv="on"][data-theme="kv"] .sec--contact .contactbox,
:root[data-kv="on"][data-theme="kv"] .formcard,
:root[data-kv="on"][data-theme="kv"] .surveybox{
  background:#fff; border-color:transparent;
  box-shadow:0 1px 2px rgba(12,54,88,.10), 0 10px 28px rgba(12,54,88,.07);
}

/* 행사 정보 카드 — 제목 위에 키비주얼의 짧은 룰을 얹는다 */
:root[data-kv="on"] .infocard{ position:relative; padding-top:26px; }
:root[data-kv="on"] .infocard::before{
  content:''; position:absolute; left:20px; top:0; width:34px; height:3px;
  background:var(--kv-navy);
}
:root[data-kv="on"] .infocard h3{ color:var(--kv-blue); letter-spacing:.04em; }


/* ============================================================
   목록 · 타임라인 — 원을 사각으로 바꿔 키비주얼의 직각 구성을 잇는다
   ============================================================ */
:root[data-kv="on"] .points li::before{ color:var(--kv-blue); letter-spacing:.08em; }

:root[data-kv="on"] .tl__time::before{
  border-radius:0;                       /* 점 → 사각 */
  width:10px; height:10px; top:8px;
  background:var(--kv-blue); border-color:var(--kv-blue);
}
:root[data-kv="on"] .tl::before{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--kv-blue) 45%, transparent), transparent);
}
:root[data-kv="on"] .tl__tag{ border-radius:0; letter-spacing:.04em; }


/* ============================================================
   헤더 · 푸터 — 위아래를 키비주얼의 네이비 선으로 닫아준다
   ============================================================ */
:root[data-kv="on"][data-theme="kv"] .hd{
  border-bottom:1px solid color-mix(in srgb, var(--kv-navy) 14%, transparent);
}
:root[data-kv="on"] .ft{ position:relative; overflow:hidden; }
:root[data-kv="on"] .ft::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--kv-pale-2), var(--kv-pale-2));
  background-repeat:no-repeat;
  background-size:30% 56%; background-position:100% 0%;
}
:root[data-kv="on"] .ft > .wrap{ position:relative; z-index:1; }


/* ============================================================
   히어로 — 키비주얼이 놓이는 자리에 같은 면을 깔아
   이미지가 바탕에서 떠 보이지 않게 한다
   ============================================================ */
:root[data-kv="on"][data-theme="kv"] .hero{ position:relative; overflow:hidden; }
:root[data-kv="on"][data-theme="kv"] .hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--kv-pale-2), var(--kv-pale-2)),
    linear-gradient(var(--kv-pale),   var(--kv-pale));
  background-size:     30% 52%, 16% 30%;
  background-position: 100% 0%, -4% 100%;
}
/* 포스터형에서는 키비주얼 이미지가 이미 그 구성을 담고 있어 바탕을 비운다 */
:root[data-kv="on"][data-hero="poster"] .hero::before{ display:none; }

/* 키비주얼 이미지는 테두리·둥근 모서리 없이 면 그대로 */
:root[data-kv="on"] .kv img{ border:0; border-radius:0; }

/* 에디토리얼형 제목 — 키비주얼의 자간·굵기에 맞춘다 */
:root[data-kv="on"] .kvsplit__round{ color:var(--kv-blue); }
:root[data-kv="on"] .kvsplit__rule{ border-top-color:var(--kv-navy); }


/* ============================================================
   화면 크기별 조정
   ============================================================ */
@media (max-width:640px){
  /* 좁은 화면에서는 사선이 본문을 가로질러 산만해지므로 더 연하게 */
  :root[data-kv="on"] .sec::after{ opacity:.14; }
  :root[data-kv="on"] .sec__en{ top:60px; opacity:.09; }
}

@media (min-width:1024px){
  :root[data-kv="on"] .sec{ padding:88px 0; }
  :root[data-kv="on"] .sec__en{ top:72px; right:-16px; }
}

/* 움직임·대비 민감 사용자 배려 */
@media (prefers-contrast:more){
  :root[data-kv="on"] .sec::before,
  :root[data-kv="on"] .sec::after,
  :root[data-kv="on"] .sec__en,
  :root[data-kv="on"] .ft::before{ display:none; }
}

/* 인쇄 시에는 장식을 모두 걷어낸다 */
@media print{
  :root[data-kv="on"] .sec::before,
  :root[data-kv="on"] .sec::after,
  :root[data-kv="on"] .sec__en,
  :root[data-kv="on"] .ft::before,
  :root[data-kv="on"] .hero::before{ display:none !important; }
}