/*
Theme Name: Champions Deck
Description: 광주 챔피언스시티 전용 독립 테마. 레퍼런스(에디토리얼 럭셔리) 1:1 — 풀스크린 덱 홈 + 에디토리얼 서브페이지. 기존 oneul 테마와 코드·디자인 모두 무관.
Version: 1.0.0
Author: Champions City
*/

/* ══ 토큰 (레퍼런스 실측값) ══ */
:root{
	--paper:#f7f5ef; --sheet:#f7f1e7; --ink:#171717; --gold:#a88a55; --goldl:#d7c5a3;
	--goldbr:#d9b77a; --forest:#243a2d; --line:rgba(21,21,21,.16); --sub:#737373;
	--ed:Georgia,"Times New Roman",serif;
	--sans:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
	--hdr:80px; --wrap:1180px;
	--e-track:cubic-bezier(.72,0,.2,1); --e-pan:cubic-bezier(.18,.58,.25,1);
	--e-soft:cubic-bezier(.18,.66,.26,1); --e-text:cubic-bezier(.18,.8,.28,1);
	--e-std:cubic-bezier(.22,.8,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.7;
	-webkit-font-smoothing:antialiased;font-size:15px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 max(5vw,20px)}

/* ══ 타이포 ══ */
.kick{font:11px var(--ed);letter-spacing:.2em;color:#9c7f4e;text-transform:uppercase;margin:0 0 18px}
h1,h2{letter-spacing:-.07em;font-weight:400;line-height:1.2;color:var(--ink)}
h1 b,h2 b,h1 span,h2 span{font-weight:850}
h2{font-size:clamp(38px,4vw,62px)}
h3{font-size:clamp(18px,1.4vw,24px);letter-spacing:-.035em;font-weight:800}
.lead{font-size:16px;line-height:1.8;color:#3d4148;max-width:640px;margin-top:24px;letter-spacing:-.015em}
.body-t{font-size:15px;line-height:1.8;color:var(--sub);max-width:600px;margin-top:16px;letter-spacing:-.01em}
.disc{font-size:12px;color:var(--sub);line-height:1.75;margin-top:22px;max-width:80ch}
.stamp{font-size:12px;color:var(--sub);margin-top:12px}

/* 직답 캡슐 = 에디토리얼 시트 축약형 */
.ans{background:var(--sheet);border:1px solid var(--goldl);box-shadow:0 22px 60px rgba(28,26,21,.09);
	padding:18px 22px;margin-top:22px;font-size:14.6px;line-height:1.8;color:#33291f;letter-spacing:-.012em}

/* ══ 버튼 — 흰 글자는 잉크·사진 위에서만 ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 32px;
	font-size:14.5px;font-weight:700;letter-spacing:-.02em;text-decoration:none;border-radius:0;
	transition:background .22s ease,color .22s ease,border-color .22s ease;cursor:pointer;font-family:inherit}
.btn-ink{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn-ink:hover{background:var(--forest);border-color:var(--forest)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

/* ══ 헤더 ══ */
.site-hd{position:fixed;inset:0 0 auto;height:var(--hdr);z-index:80;display:flex;align-items:center;
	background:rgba(247,245,239,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line)}
.site-hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--ed);font-weight:600;letter-spacing:-.035em;font-size:22px;color:#151515;text-decoration:none;white-space:nowrap}
.gnb{display:flex;gap:26px;list-style:none}
.gnb a{color:#151515;opacity:.7;font-size:13.5px;font-weight:500;letter-spacing:-.01em;text-decoration:none;transition:opacity .22s}
.gnb a:hover,.gnb a[aria-current]{opacity:1}
.hd-r{display:flex;align-items:center;gap:16px}
.hd-tel{font-family:var(--ed);font-size:17px;letter-spacing:-.02em;color:#151515;text-decoration:none}
.hd-btn{background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:-.02em;
	padding:10px 20px;text-decoration:none;white-space:nowrap}
.hd-btn:hover{background:var(--forest)}
.hd-tg{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;color:#151515;padding:0}
.hd-tg svg{width:22px;height:22px}
/* 모바일 드로어 */
.drawer{display:none}
@media (max-width:900px){
	.site-hd{height:60px}
	.brand{font-size:15px}
	.gnb,.hd-tel{display:none}
	.hd-btn{font-size:12px;padding:8px 14px}
	.hd-tg{display:grid;place-items:center}
	.drawer{display:block;position:fixed;inset:60px 0 0;z-index:79;background:var(--paper);
		padding:18px 22px;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;
		transition:opacity .28s ease,transform .28s var(--e-text),visibility .28s}
	.drawer.open{opacity:1;transform:none;visibility:visible}
	.drawer a{display:block;padding:15px 4px;font-size:16px;letter-spacing:-.02em;color:var(--ink);
		text-decoration:none;border-bottom:1px solid var(--line)}
}

/* ══ 덱 (홈) ══ */
body.deck-on{overflow:hidden}
.deck{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--paper)}
.trk{position:relative;width:100%;height:100%;transition:transform 1.06s var(--e-track);will-change:transform}
.sl{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--paper);
	display:flex;flex-direction:column;justify-content:center;padding-top:var(--hdr)}
.sl-in{width:100%;max-height:calc(100vh - var(--hdr));overflow-y:auto;overscroll-behavior:contain;
	scrollbar-width:none;padding:clamp(22px,4vh,52px) 0}
.sl-in::-webkit-scrollbar{display:none}

/* 진행 표시 */
.pgbar{position:fixed;z-index:60;left:0;top:var(--hdr);bottom:0;width:3px;background:rgba(21,21,21,.12)}
.pgbar i{display:block;width:100%;background:var(--goldbr);height:0;transition:height .8s ease}
.pgn{position:fixed;z-index:61;left:15px;bottom:20px;font:11px var(--ed);letter-spacing:.08em;color:var(--sub)}
.pgn b{color:var(--ink);font-size:14px}
.shint{position:fixed;z-index:61;right:20px;bottom:20px;font-size:10.5px;letter-spacing:.14em;
	color:var(--sub);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.shint i{display:block;width:1px;height:26px;background:var(--line);position:relative;overflow:hidden}
.shint i:after{content:"";position:absolute;inset:0;background:var(--goldbr);animation:sline 1.9s var(--e-soft) infinite}
@keyframes sline{0%{transform:translateY(-100%)}to{transform:translateY(200%)}}

/* ── 등장: 기본은 항상 보임. .anim이 붙을 때만 애니메이션이 재생된다(강건성) ── */
.rv{opacity:1}
.sl.anim .rv{animation:rvIn .82s var(--e-std) both}
.sl.anim .rv:nth-child(2){animation-delay:.08s}
.sl.anim .rv:nth-child(3){animation-delay:.16s}
.sl.anim .rv:nth-child(4){animation-delay:.24s}
.sl.anim .rv:nth-child(5){animation-delay:.32s}
@keyframes rvIn{0%{opacity:0;transform:translate3d(0,18px,0) scale(.985);filter:blur(6px)}
	to{opacity:1;transform:none;filter:blur(0)}}

/* ── 히어로 ── */
.sl-hero{padding:0}
.sl-hero .bg{position:absolute;inset:0;overflow:hidden;
	background:radial-gradient(900px 520px at 76% 16%,rgba(217,183,122,.16),transparent 62%),
		radial-gradient(700px 420px at 12% 88%,rgba(43,74,111,.35),transparent 65%),
		linear-gradient(163deg,#23395a 0%,#17283f 52%,#0e1826 100%)}
.sl-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:63% center;
	transform:scale(1.1);transition:transform 5s ease}
.sl-hero.anim .bg img,.sl-hero.on .bg img{transform:scale(1)}
.sl-hero .bg:after{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(8,12,18,.1) 0%,rgba(8,12,18,.3) 55%,rgba(8,12,18,.55) 100%)}
.sl-hero .sl-in{position:relative;z-index:2;display:flex;align-items:center;min-height:calc(100vh - var(--hdr))}
.sl-hero .wrap{max-width:none;padding-left:8.5vw;padding-right:8.5vw;margin:0}
.sl-hero .kick{font-family:var(--ed);letter-spacing:.22em;color:#e1c38c;text-transform:none;font-size:clamp(11px,.8vw,13px)}
.sl-hero h1{font-size:clamp(48px,5.6vw,86px);line-height:1.08;letter-spacing:-.075em;color:#fff}
.sl-hero .lead{color:rgba(255,255,255,.92)}
.sl-hero .ctas{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.sl-hero .btn-ink{background:#fff;color:var(--ink);border-color:#fff}
.sl-hero .btn-ink:hover{background:var(--goldbr);border-color:var(--goldbr)}
.sl-hero .btn-line{border-color:rgba(255,255,255,.65);color:#fff}
.sl-hero .btn-line:hover{background:#fff;color:var(--ink)}
/* 공식 배지 */
.onote{position:absolute;z-index:3;left:8.5vw;bottom:5.5vh;min-height:52px;padding-left:16px;
	display:inline-grid;grid-template-columns:36px auto;align-items:center;gap:12px;
	border-left:1px solid rgba(217,183,122,.9);color:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.onote-ic{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(217,183,122,.72);
	border-radius:50%;color:#e1c38c;background:rgba(8,27,42,.24);backdrop-filter:blur(8px)}
.onote small{display:block;color:rgba(255,255,255,.64);font-size:9px;font-weight:600;letter-spacing:.14em;line-height:1}
.onote strong{display:block;color:rgba(255,255,255,.94);font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1.3;white-space:nowrap;margin-top:5px}

/* ── 비대칭 3단 ── */
.ed3{display:grid;grid-template-columns:.62fr 1.15fr .9fr;gap:30px;align-items:end}

/* ── 초대형 숫자 ── */
.figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:28px}
.fig{padding:26px 0 22px;border-bottom:1px solid var(--line)}
.fig+.fig{border-left:1px solid var(--line);padding-left:28px}
.fig b{display:block;font-family:var(--ed);font-weight:500;font-size:clamp(40px,5.4vw,84px);
	line-height:.94;letter-spacing:-.07em;color:var(--ink)}
.fig span{display:block;font-size:12px;letter-spacing:.04em;color:var(--sub);margin-top:12px}

/* ── 개요 dl ── */
.ov{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px;margin-top:26px}
.ov>div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ov dt{font-size:11.5px;letter-spacing:.06em;color:var(--sub);text-transform:uppercase;padding-top:3px}
.ov dd{font-size:15px;letter-spacing:-.015em;text-align:right}

/* ── 타일 ── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:26px}
.tile{background:#fff;border:1px solid var(--line);padding:24px 22px}
.tile .no{font-family:var(--ed);font-size:14px;color:var(--gold);letter-spacing:.06em}
.tile h3{margin:12px 0 8px}
.tile p{font-size:13.8px;color:var(--sub);letter-spacing:-.01em}

/* ── 표 ── */
table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:14px;margin-top:22px}
th{font-size:11.5px;letter-spacing:.06em;color:var(--sub);font-weight:700;text-transform:uppercase;
	text-align:left;padding:13px 8px;border-bottom:1px solid var(--line)}
td{padding:14px 8px;border-bottom:1px solid var(--line);letter-spacing:-.01em;text-align:left}
td.num{font-family:var(--ed);font-size:16px;font-variant-numeric:tabular-nums;text-align:right}

/* ── FAQ ── */
.faq{margin-top:22px;border-top:1px solid var(--line)}
.faq dt{font-weight:700;font-size:15.5px;letter-spacing:-.02em;padding:16px 0 6px}
.faq dd{font-size:14.5px;color:var(--sub);padding:0 0 16px;border-bottom:1px solid var(--line);line-height:1.75}

/* ── 폼 ── */
.form{background:#fff;border:1px solid var(--line);padding:28px 26px;max-width:560px;margin-top:26px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);background:#fff;
	padding:13px 14px;font-size:15px;font-family:inherit;color:var(--ink);border-radius:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--gold);border-color:transparent}
.form .btn{width:100%}
.form-note{font-size:12px;color:var(--sub);line-height:1.65;margin-top:12px;text-align:center}
.hp{position:absolute;left:-9999px}
.msg{padding:12px 16px;font-size:14px;margin-bottom:14px;border:1px solid var(--line)}
.msg-ok{background:#eef6f0;color:#14603f;border-color:#bcd8c5}
.msg-err{background:#fdf1f0;color:#8d2820;border-color:#e8c2bd}

/* ── 서브페이지 ── */
.page-hd{background:var(--paper);border-bottom:1px solid var(--line);
	padding:calc(var(--hdr) + clamp(40px,6vw,80px)) 0 clamp(30px,4vw,52px)}
.page-hd h1{font-size:clamp(42px,4.7vw,72px);line-height:1.14;letter-spacing:-.075em}
.page-hd .crumb{font-size:12px;color:var(--sub);margin-bottom:16px}
.page-hd .crumb a{color:var(--sub);text-decoration:none}
.sec{padding:clamp(56px,7vw,100px) 0 clamp(64px,8vw,120px)}
.sec-soft{background:#fff}
main.static{padding-top:0}

/* ── 글 목록·본문 ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line);padding:24px 22px;text-decoration:none;display:block}
.card .cat{font-size:11px;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.card h3{font-size:17px;margin:10px 0 8px;line-height:1.45}
.card p{font-size:13.5px;color:var(--sub);line-height:1.65}
.card time{display:block;font-size:12px;color:var(--sub);margin-top:12px}
.article{max-width:760px}
.article .content{margin-top:30px;font-size:16px;line-height:1.85;letter-spacing:-.012em}
.article .content h2{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.04em;font-weight:800;margin:40px 0 14px}
.article .content p{margin-bottom:16px}
.article .content table{margin:20px 0}

/* ── 푸터 ── */
.site-ft{background:var(--paper);border-top:1px solid var(--line);padding:52px 0 64px;color:var(--sub)}
.site-ft .brand{font-size:18px}
.site-ft .disc{margin-top:18px}

/* ── 플로팅 CTA (데스크톱) ── */
.fcta{position:fixed;z-index:75;right:20px;bottom:24px;display:flex;flex-direction:column;gap:8px}
.fcta a{display:flex;align-items:center;gap:8px;padding:13px 18px;font-size:14px;font-weight:700;
	text-decoration:none;letter-spacing:-.02em;box-shadow:0 10px 30px rgba(28,26,21,.2)}
.fcta .c1{background:var(--ink);color:#fff}
.fcta .c2{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.fcta svg{width:15px;height:15px}

/* ── 모바일 퀵바 ── */
.qbar{display:none}
@media (max-width:900px){
	.fcta{display:none}
	.qbar{position:fixed;z-index:75;left:0;right:0;bottom:0;display:flex;border-top:1px solid var(--line)}
	.qbar a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;
		padding:15px 4px;font-size:14px;font-weight:700;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
	.qbar .q1{background:var(--ink);color:#fff}
	.qbar .q2{background:#fff;color:var(--ink)}
	.qbar svg{width:15px;height:15px;flex:0 0 15px}
	body.has-qbar{padding-bottom:52px}
}

/* ── 이벤트 팝업 ── */
.pop{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:20px;
	background:rgba(23,23,23,.45);opacity:0;transition:opacity .34s var(--e-std)}
.pop.on{display:flex}.pop.in{opacity:1}
.pop-box{background:#fff;max-width:420px;width:100%;border:1px solid var(--goldl);
	box-shadow:0 30px 80px rgba(28,26,21,.3);transform:translateY(16px) scale(.985);
	transition:transform .42s var(--e-text);overflow:hidden}
.pop.in .pop-box{transform:none}
.pop-hd{background:var(--forest);color:#fff;padding:22px 24px 20px}
.pop-hd .kick{color:#cfe0d5;margin-bottom:6px}
.pop-hd h3{color:#fff;font-size:21px;letter-spacing:-.035em}
.pop-bd{padding:22px 24px 18px}
.pop-bd ul{list-style:none;margin-bottom:18px}
.pop-bd li{font-size:14.2px;color:#33291f;padding:8px 0 8px 18px;border-bottom:1px solid var(--line);position:relative}
.pop-bd li:last-child{border:0}
.pop-bd li:before{content:"";position:absolute;left:2px;top:16px;width:6px;height:6px;background:var(--gold);border-radius:50%}
.pop-bd .btn{width:100%}
.pop-ft{display:flex;justify-content:space-between;align-items:center;padding:0 24px 18px;font-size:12.5px;color:var(--sub)}
.pop-ft label{display:flex;gap:6px;align-items:center;cursor:pointer}
.pop-ft button{background:none;border:0;color:var(--sub);font-size:12.5px;cursor:pointer;font-family:inherit;text-decoration:underline}

/* 접수 완료 모달 */
.thx{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(23,23,23,.45)}
.thx-box{background:#fff;border:1px solid var(--goldl);max-width:400px;width:100%;padding:34px 28px 26px;text-align:center;box-shadow:0 22px 60px rgba(28,26,21,.28)}
.thx-box svg{color:#1a9e6a;margin:0 auto 14px}
.thx-box h2{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.thx-box p{font-size:14.5px;line-height:1.7;color:#4a5563;margin-bottom:22px;word-break:keep-all}
.thx-box .btn{width:100%}

/* ══ 모바일 ══ */
@media (max-width:900px){
	body.deck-on{overflow:auto}
	.deck{height:auto;overflow:visible}
	.trk{transform:none!important;height:auto;transition:none}
	.sl{height:auto;min-height:0;padding:52px 0;display:block;overflow:visible}
	.sl-in{max-height:none;overflow:visible;padding:0}
	.pgbar,.pgn,.shint{display:none}
	h2{font-size:37px;letter-spacing:-.03em}
	.kick{font-size:11px}
	.ed3,.figs,.tiles,.ov,.cards{grid-template-columns:1fr}
	.fig+.fig{border-left:0;padding-left:0}
	.ed3{gap:16px;align-items:start}
	/* 히어로 (레퍼런스 모바일 값) */
	.sl-hero{position:relative;min-height:100svh;padding:0;display:block}
	.sl-hero .sl-in{position:relative;min-height:100svh;display:block;padding:0}
	.sl-hero .wrap{position:absolute;left:26px;right:26px;top:33%;padding:0}
	.sl-hero h1{font-size:clamp(40px,10.5vw,52px);font-weight:250;line-height:1.13;letter-spacing:-.03em}
	.sl-hero h1 b{font-weight:700}
	.sl-hero .kick{font-size:13px;letter-spacing:-.03em;margin-bottom:12px}
	.sl-hero .lead{margin-top:24px;font-size:14px;line-height:1.65;letter-spacing:-.025em}
	.onote{left:20px;bottom:78px;min-height:46px;padding-left:12px;grid-template-columns:32px auto;gap:9px}
	.onote-ic{width:32px;height:32px}
	.page-hd h1{font-size:clamp(34px,9vw,44px);letter-spacing:-.04em}
}
@media (prefers-reduced-motion:reduce){
	.trk{transition:none}
	.sl.anim .rv{animation:none}
	.sl-hero .bg img{transition:none;transform:none}
}