@charset "UTF-8";
/* ==========================================================================
   2026 미래대화 — 메인 페이지 시안 (임시)
   2026 키비주얼에서 뽑은 색만 씁니다. 2025의 퍼플/다크 계열은 쓰지 않습니다.
   클래스는 전부 k- 접두어로 격리합니다.
   리셋은 :where() 로 감싸 특이도 0 — 아래 컴포넌트 규칙이 항상 이깁니다.
   ========================================================================== */

.k{
	/* 키비주얼에서 추출한 값 */
	--k-ink:#11243b;
	--k-ink-2:#3c5570;
	--k-mute:#6a7f96;
	--k-faint:#93a5b8;
	--k-cobalt:#206b97;
	--k-navy:#003668;
	--k-red:#c8463e;
	--k-plum:#76588a;
	--k-blue:#2f6493;
	--k-sky:#9bc7fb;
	--k-peach:#e9bdb1;
	--k-ice:#c2dced;

	--k-paper:#ffffff;
	--k-paper-2:#f3f5f8;
	--k-sunken:#e9eef4;
	--k-hair:#dfe6ee;
	--k-line:#c8d4e1;

	--k-wrap:1240px;
	--k-sec:clamp(60px,7vw,108px);
	--k-gap:clamp(30px,3.4vw,48px);
	--k-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
	--k-grad:linear-gradient(100deg,#d04c40 0%,#b15260 24%,#76588a 52%,#4a5f91 76%,#2f6493 100%);
}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) .k{
		--k-paper:#0d1724; --k-paper-2:#121f30; --k-sunken:#16243a; --k-hair:#22344b; --k-line:#2d4360;
		--k-ink:#eef4fb; --k-ink-2:#bdccdd; --k-mute:#90a3b8; --k-faint:#78899d;
		--k-cobalt:#6fb4e0; --k-blue:#8ab4e0; --k-red:#e4766a;
	}
}
:root[data-theme="dark"] .k{
	--k-paper:#0d1724; --k-paper-2:#121f30; --k-sunken:#16243a; --k-hair:#22344b; --k-line:#2d4360;
	--k-ink:#eef4fb; --k-ink-2:#bdccdd; --k-mute:#90a3b8; --k-faint:#78899d;
	--k-cobalt:#6fb4e0; --k-blue:#8ab4e0; --k-red:#e4766a;
}

.k{ background:var(--k-paper); color:var(--k-ink); }
.k *,.k *::before,.k *::after{ box-sizing:border-box; }
.k :where(p,h1,h2,h3,h4,figure,figcaption,ul,ol,li,dl,dt,dd){ margin:0; padding:0; }
.k :where(li){ list-style:none; }
.k :where(img){ display:block; max-width:100%; height:auto; }
.k :where(a){ color:inherit; text-decoration:none; }
.k-wrap{ max-width:var(--k-wrap); margin:0 auto; padding:0 clamp(20px,4vw,52px); }
.k-num{ font-variant-numeric:tabular-nums; }
.k-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── 버튼 ── */
.k-btn{
	display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
	border:1px solid transparent; border-radius:2px; cursor:pointer;
	font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em;
	transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.k-btn svg{ width:16px; height:16px; flex:none; }
.k-btn--fill{ background:var(--k-cobalt); color:#fff; }
.k-btn--fill:hover{ background:var(--k-navy); transform:translateY(-1px); }
.k-btn--line{ background:transparent; color:var(--k-ink); border-color:var(--k-line); }
.k-btn--line:hover{ border-color:var(--k-cobalt); color:var(--k-cobalt); }

/* ══ 히어로 ══ */
.k-hero{
	position:relative; overflow:hidden;
	/* 1920 기준 916px. 헤더가 투명하게 겹쳐 올라오므로 그 자리도 이 높이 안에 포함된다. */
	min-height:clamp(560px,47.708vw,916px);
	display:grid; align-items:center;
	padding-top:var(--header-h,72px);
	background:
		radial-gradient(60% 52% at 4% 2%, rgba(233,189,177,.5) 0%, rgba(233,189,177,0) 68%),
		radial-gradient(64% 58% at 98% 96%, rgba(194,220,237,.62) 0%, rgba(194,220,237,0) 70%),
		var(--k-paper-2);
}
:root[data-theme="dark"] .k-hero,
:root:not([data-theme="light"]) .k-hero{ background-blend-mode:normal; }
/* ── 선 웨이브 : 진짜 벡터 + 지나가는 빛 ───────────────────────────────────
   선은 키비주얼 .ai 에서 꺼낸 벡터 그대로다(채움 패스 71개). 손으로 흉내낸
   베지어가 아니라 포스터와 같은 곡선이고, 벡터라 어느 배율에서도 선명하다.

   움직임의 구조 — 리페인트가 없다
   · .k-waves__base : 같은 SVG 를 배경으로 깐다. 정지. 레이어 승격 없음.
   · .k-waves__lit  : 같은 SVG 를 '마스크'로 쓴다. 고정이라 다시 칠할 일이 없다.
   · .k-waves__beam : 그 안에서 빛 띠가 transform 으로 지나간다 → GPU 합성.
   마스크가 고정이고 움직이는 건 div 하나뿐이라, dash·mask-position 처럼
   매 프레임 래스터를 다시 뜨는 비용이 아예 없다.
   base 와 lit 이 같은 파일·같은 size/position 을 쓰므로 선이 정확히 겹친다.
   ───────────────────────────────────────────────────────────────────────── */
/* 포스터는 제목이 깨끗한 바탕 위에 있다. 선은 오른쪽에만 남기고
   제목·버튼이 놓이는 왼쪽 절반에서는 서서히 지운다. */
.k-waves{
	position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
	-webkit-mask-image:linear-gradient(95deg, transparent 0 30%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.8) 62%, #000 76%);
	mask-image:linear-gradient(95deg, transparent 0 30%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.8) 62%, #000 76%);
}
.k-waves__base,
.k-waves__lit{ position:absolute; inset:0; }

.k-waves__base{
	/* cover — 비율을 지키고 넘치는 쪽을 자른다.
	   100% 100% 로 늘리면 히어로 비율이 2.096 에서 벗어나는 순간 곡선이
	   가로로 눌려 '직선 다발'처럼 보인다(좁은 화면에서 5배 이상 압축). */
	background:var(--k-waves-src) var(--k-waves-pos,center right) / cover no-repeat;
	opacity:var(--k-waves-dim,.5);
}
.k-waves__lit{
	/* base 와 반드시 같은 size·position — 어긋나면 빛이 선을 벗어난다. */
	-webkit-mask:var(--k-waves-src) var(--k-waves-pos,center right) / cover no-repeat;
	mask:var(--k-waves-src) var(--k-waves-pos,center right) / cover no-repeat;
	overflow:hidden;
}
/* 빛 띠. 컨테이너보다 넓게 깔고 한 폭만큼 흘려보낸다 — 끝과 처음이 같아 이음매가 없다. */
.k-waves__beam{
	position:absolute; top:-20%; left:0; width:220%; height:140%;
	background:linear-gradient(104deg,
		transparent 0 26%,
		rgba(90,169,240,.42) 36%,
		rgba(32,107,151,.72) 45%,
		rgba(90,169,240,.42) 54%,
		transparent 64% 100%);
	will-change:transform;
	animation:k-beam 19s linear infinite;
}
@keyframes k-beam{
	from{ transform:translate3d(-54.5%,0,0); }   /* 220% 중 한 주기(120%) 이동 */
	to  { transform:translate3d(0,0,0); }
}

/* 어두운 마무리 띠 — 빛은 안 쓰고 선만. 색은 기존 규칙(.k-end .k-waves path)을
   대신해 여기서 처리한다(이제 path 가 아니라 배경 이미지라서). */
.k-end .k-waves__base{ opacity:.34; }

/* 좁은 화면에서는 선이 더 가팔라 보이므로 빛을 조금 느리고 옅게. */
@media (max-width:860px){
	/* 세로로 길어져 크롭이 심해진다 — 선이 밀집한 오른쪽 아래를 보여준다. */
	/* 모바일은 아트워크가 아래로 내려가 끝점을 못 가린다 — 끝점(가로 79~81%)이
	   잘려나가도록 왼쪽 구간을 보여준다. */
	.k-waves{ --k-waves-pos:22% 40%; }
	.k-waves__beam{ animation-duration:26s; opacity:.72; }
}

/* 모션 최소화 — 빛만 걷는다. 선은 그대로 남아 정지 시안과 같아진다. */
@media (prefers-reduced-motion:reduce){
	.k-waves__lit{ display:none; }
}
.k-hero__in{
	position:relative; z-index:1; display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(24px,4vw,56px);
	align-items:center; padding:clamp(40px,4.6vw,66px) 0 clamp(44px,5vw,72px);
}
/* 셋 다 span 이라 block 을 주지 않으면 한 문단으로 흘러버립니다. */
.k-lock__year,.k-lock__line,.k-lock__name{ display:block; width:fit-content; }
.k-lock__year{
	font-size:clamp(34px,4.4vw,58px); font-weight:300; letter-spacing:.01em; line-height:1;
	background:var(--k-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.k-lock__line{
	margin-top:6px; font-size:clamp(23px,2.9vw,38px); font-weight:700; letter-spacing:-.04em; line-height:1.2;
	background:var(--k-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.k-lock__name{
	margin-top:2px; font-size:clamp(44px,7.4vw,98px); font-weight:800; letter-spacing:-.055em; line-height:1.04;
	background:var(--k-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.k-lock__en{
	margin-top:clamp(18px,2vw,28px); font-size:clamp(16px,1.6vw,21px); font-weight:600;
	line-height:1.5; letter-spacing:-.005em; color:var(--k-cobalt); max-width:28ch;
}
.k-lock__meta{
	margin-top:clamp(20px,2.2vw,30px); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
	font-size:clamp(16px,1.5vw,19px); font-weight:700; letter-spacing:-.02em; color:var(--k-ink);
}
.k-lock__meta .k-dot{ width:4px; height:4px; border-radius:50%; background:var(--k-red); align-self:center; }
.k-lock__meta span.k-venue{ font-weight:500; color:var(--k-ink-2); }
.k-lock__acts{ margin-top:clamp(24px,2.6vw,34px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.k-dday{
	display:inline-flex; align-items:baseline; gap:7px; padding:9px 15px;
	border:1px solid var(--k-line); border-radius:2px; font-family:var(--k-mono);
	font-size:12.5px; letter-spacing:.04em; color:var(--k-ink-2);
}
.k-dday b{ font-size:15px; font-weight:600; color:var(--k-red); }
/* 아트워크는 .ai 안의 원본 PNG 자체가 아래·왼쪽이 평평하게 잘려 있다
   (아래 6000px 중 22%, 왼쪽 6848px 중 8% 가 가장자리에 닿아 있음).
   그래서 잘린 아래 단면을 히어로 프레임 밖으로 밀어내 .k-hero{overflow:hidden}
   이 잘라내게 한다. 그만큼 허전해지지 않도록 아래를 기준으로 확대한다.
   ※ 근본 해결은 제작자에게 잘리지 않은 원본을 받는 것. 두 값만 0/1 로 되돌리면 원상복구. */
.k-hero__art{
	position:relative;
	transform-origin:50% 100%;
	transform:scale(var(--k-art-zoom,1.06)) translateY(var(--k-art-drop,18%));
}
.k-hero__art img{ width:100%; filter:drop-shadow(0 26px 44px rgba(16,40,70,.16)); }

/* 세로 캡션 — 포스터의 세로 문구를 옮겨 왔습니다 */
.k-vert{
	position:absolute; left:clamp(8px,1.4vw,22px); top:50%; z-index:1;
	transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
	font-family:var(--k-mono); font-size:11px; letter-spacing:.3em;
	color:var(--k-faint); text-transform:uppercase; pointer-events:none;
}
@media (max-width:1100px){ .k-vert{ display:none; } }

/* ══ 섹션 공통 ══ */
.k-sec{ padding:var(--k-sec) 0; }
.k-sec--hair{ border-top:1px solid var(--k-hair); }
.k-sec--sunken{ background:var(--k-paper-2); }
.k-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px 24px; margin-bottom:var(--k-gap); }
.k-head__no{ font-family:var(--k-mono); font-size:11.5px; letter-spacing:.16em; color:var(--k-cobalt); }
.k-head h2{ margin-top:11px; font-size:clamp(24px,2.9vw,36px); font-weight:800; letter-spacing:-.04em; line-height:1.28; }
.k-head p{ margin-top:11px; max-width:56ch; font-size:15.5px; line-height:1.9; color:var(--k-mute); }
.k-more{
	display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700;
	color:var(--k-cobalt); border-bottom:1px solid currentColor; padding-bottom:2px; flex:none;
}
.k-more:hover{ color:var(--k-navy); }

/* ══ 핵심 정보 ══ */
.k-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--k-hair); border:1px solid var(--k-hair); }
.k-facts > div{ background:var(--k-paper); padding:24px 26px; }
.k-facts dt{ font-family:var(--k-mono); font-size:11px; letter-spacing:.14em; color:var(--k-cobalt); }
.k-facts dd{ margin-top:10px; font-size:18px; font-weight:700; letter-spacing:-.025em; }
.k-facts dd small{ display:block; margin-top:5px; font-size:13.5px; font-weight:400; color:var(--k-mute); letter-spacing:0; }

/* ══ 캠페인 배너 ══ */
.k-camp{
	display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center;
	padding:clamp(30px,3.4vw,46px); border:1px solid var(--k-line); border-radius:2px;
	background:linear-gradient(104deg, rgba(233,189,177,.26) 0%, rgba(255,255,255,0) 46%, rgba(194,220,237,.4) 100%), var(--k-paper);
}
.k-camp__tag{ font-family:var(--k-mono); font-size:11px; letter-spacing:.14em; color:var(--k-red); }
.k-camp h3{ margin-top:12px; font-size:clamp(21px,2.3vw,28px); font-weight:800; letter-spacing:-.04em; line-height:1.4; }
.k-camp p{ margin-top:12px; max-width:52ch; font-size:15px; line-height:1.9; color:var(--k-mute); }

/* ══ 준비 중 ══ */
.k-soon{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--k-hair); border:1px solid var(--k-hair); }
.k-soon > div{ background:var(--k-paper); padding:clamp(28px,3vw,40px); }
.k-soon h3{ font-size:19px; font-weight:800; letter-spacing:-.035em; }
.k-soon p{ margin-top:10px; font-size:14.5px; line-height:1.85; color:var(--k-mute); }
.k-soon .k-badge{
	display:inline-block; margin-bottom:14px; padding:5px 11px; border-radius:2px;
	background:var(--k-sunken); color:var(--k-cobalt);
	font-family:var(--k-mono); font-size:10.5px; letter-spacing:.12em;
}

/* ══ 역대행사 ══ */
.k-past li + li{ border-top:1px solid var(--k-hair); }
.k-past a{
	display:grid; grid-template-columns:110px minmax(0,1fr) 26px; gap:22px; align-items:center;
	padding:20px 6px; transition:background .18s;
}
.k-past a:hover{ background:var(--k-paper-2); }
.k-past .k-y{ font-size:26px; font-weight:800; letter-spacing:-.04em; color:var(--k-blue); }
.k-past .k-t{ font-size:16px; line-height:1.6; color:var(--k-ink-2); }
.k-past .k-ar{ color:var(--k-cobalt); font-size:17px; text-align:right; }
.k-past li.is-now .k-y{ color:var(--k-red); }
.k-past li.is-now .k-t{ font-weight:700; color:var(--k-ink); }

/* ══ 공지 ══ */
.k-news li + li{ border-top:1px solid var(--k-hair); }
.k-news a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:18px 6px; transition:background .18s; }
.k-news a:hover{ background:var(--k-paper-2); }
.k-news .k-ti{ font-size:16px; font-weight:600; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-news .k-dt{ font-family:var(--k-mono); font-size:12.5px; color:var(--k-faint); }

/* ══ 마무리 ══ */
.k-end{ position:relative; overflow:hidden; background:var(--k-navy); color:#eaf2fa; }
.k-end__in{ position:relative; z-index:1; padding:var(--k-sec) 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.k-end h2{ font-size:clamp(24px,3vw,38px); font-weight:800; letter-spacing:-.045em; line-height:1.34; color:#fff; }
.k-end p{ margin-top:13px; font-size:14.5px; line-height:1.9; color:#a9c6e2; }
.k-end .k-btn--fill{ background:#fff; color:var(--k-navy); }
.k-end .k-btn--fill:hover{ background:var(--k-ice); }
.k-end .k-btn--line{ color:#fff; border-color:rgba(255,255,255,.34); }
.k-end .k-btn--line:hover{ border-color:#fff; color:#fff; }

/* ══ 반응형 ══ */
@media (max-width:940px){
	.k-hero__in{ grid-template-columns:1fr; gap:30px; }
	.k-hero__art{ max-width:520px; margin:0 auto; --k-art-zoom:1.04; --k-art-drop:9%; }
	.k-facts,.k-soon{ grid-template-columns:1fr; }
	.k-camp{ grid-template-columns:1fr; }
	.k-past a{ grid-template-columns:76px minmax(0,1fr) 22px; gap:16px; }
	.k-past .k-y{ font-size:21px; }
}
@media (max-width:560px){
	.k-news .k-ti{ white-space:normal; }
	.k-news a{ grid-template-columns:1fr; gap:7px; }
}
@media (prefers-reduced-motion:reduce){ .k *{ animation:none !important; transition:none !important; } }

/* ==========================================================================
   사이트 헤더 — 이 페이지에서만 2026 톤으로.
   body.k-page 로 범위를 묶어 다른 페이지(라이브)에는 영향이 없습니다.
   흰 워드마크는 밝은 배경에서 안 보이므로 글자만 네이비로 바꾼 로고로 교체합니다.
   ========================================================================== */
/* 최상단에서는 완전히 투명 — 히어로 위에 그대로 얹힌다. */
body.k-page .site-header,
body.k-page .site-header[data-mode]{
	background:transparent;
	box-shadow:none;
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}
/* 스크롤해서 본문 위로 올라오면 글자가 묻히므로 흰 바탕을 깐다. */
body.k-page .site-header.is-stuck,
body.k-page .site-header[data-mode].is-stuck{
	background:rgba(255,255,255,.92);
	box-shadow:0 1px 0 #dfe6ee;
	-webkit-backdrop-filter:saturate(170%) blur(12px);
	backdrop-filter:saturate(170%) blur(12px);
}
body.k-page .site-header .brand{
	background:url("../../../../uploads/kv2026/logo-navy.png") left center / auto 40px no-repeat;
}
body.k-page .site-header .brand img{ visibility:hidden; }
body.k-page .site-header .nav > ul > li > a,
body.k-page .site-header .nav > ul > li.is-current > a{ color:#11243b; }
body.k-page .site-header .nav > ul > li > a::after{ background:#206b97; }
body.k-page .site-header .nav > ul > li > a:hover{ background:rgba(32,107,151,.07); color:#206b97; }
body.k-page .site-header .theme-toggle{ color:#11243b; border-color:#c8d4e1; }
body.k-page .site-header .theme-toggle:hover{ background:#e9eef4; }
body.k-page .site-header .lang-switch{ background:#eef2f7; border-color:#c8d4e1; }
body.k-page .site-header .lang-switch a{ color:#3c5570; }
body.k-page .site-header .lang-switch a[aria-current="true"]{ background:#206b97; color:#fff; }
body.k-page .site-header .nav-toggle span{ background:#11243b; }

:root[data-theme="dark"] body.k-page .site-header{ background:transparent; box-shadow:none; }
:root[data-theme="dark"] body.k-page .site-header.is-stuck{
	background:rgba(13,23,36,.92); box-shadow:0 1px 0 #22344b;
}
:root[data-theme="dark"] body.k-page .site-header .brand{ background-image:none; }
:root[data-theme="dark"] body.k-page .site-header .brand img{ visibility:visible; }
:root[data-theme="dark"] body.k-page .site-header .nav > ul > li > a,
:root[data-theme="dark"] body.k-page .site-header .nav > ul > li.is-current > a{ color:#eef4fb; }
:root[data-theme="dark"] body.k-page .site-header .nav-toggle span{ background:#eef4fb; }
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) body.k-page .site-header{ background:transparent; box-shadow:none; }
	:root:not([data-theme="light"]) body.k-page .site-header.is-stuck{
		background:rgba(13,23,36,.92); box-shadow:0 1px 0 #22344b;
	}
	:root:not([data-theme="light"]) body.k-page .site-header .brand{ background-image:none; }
	:root:not([data-theme="light"]) body.k-page .site-header .brand img{ visibility:visible; }
	:root:not([data-theme="light"]) body.k-page .site-header .nav > ul > li > a,
	:root:not([data-theme="light"]) body.k-page .site-header .nav > ul > li.is-current > a{ color:#eef4fb; }
	:root:not([data-theme="light"]) body.k-page .site-header .nav-toggle span{ background:#eef4fb; }
}