/* k40-dday.css — 메인 상단 신사옥 이전 D-day 띠 (parts/dday.php)
   색: 코발트 #0F4FBE · 하늘 #1A66D9 · 새벽 금빛 #F5C451 · 흰색. 글꼴: Pretendard (테마 기본) */
.k-dday{position:relative;z-index:1;margin-top:100px;overflow:hidden;color:#fff;background:#1255C6;
  background-image:linear-gradient(180deg,#1A66D9 0%,#0F4FBE 100%);
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;letter-spacing:-0.01em;line-height:1.2;
  -webkit-font-smoothing:antialiased}
.k-dday *{box-sizing:border-box}
.k-dday-glow{position:absolute;left:50%;top:50%;width:780px;height:420px;margin:-210px 0 0 -390px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,196,81,.30),rgba(245,196,81,.10) 45%,rgba(245,196,81,0) 72%);
  filter:blur(6px);animation:k-dday-breathe 9s ease-in-out infinite}
@keyframes k-dday-breathe{0%,100%{transform:scale(1) translateX(0);opacity:.85}50%{transform:scale(1.08) translateX(14px);opacity:1}}
.k-dday-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;padding:14px 0 12px}

/* 왼쪽: 엠블럼 + 제목 */
.k-dday-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 0}
.k-dday-emblem{flex:none;position:relative;display:inline-flex;align-items:baseline;justify-content:center;width:50px;height:50px;border-radius:50%;
  border:1.5px solid rgba(245,196,81,.9);box-shadow:inset 0 0 0 4px rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.08);padding-top:13px}
.k-dday-emblem b{font-size:19px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.k-dday-emblem i{font-style:normal;font-size:9px;font-weight:600;color:#F5C451;margin-left:1px;line-height:1}
.k-dday-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.k-dday-title{font-size:19px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap}
.k-dday-sub{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 가운데: 숫자 (유일하게 큰 요소) */
.k-dday-center{flex:none;display:flex;align-items:center;justify-content:center;position:relative;padding:0 24px}
.k-dday-count{display:inline-flex;align-items:baseline;line-height:1;filter:drop-shadow(0 2px 12px rgba(255,255,255,.22))}   /* 빛은 글자 모양을 따라가는 drop-shadow 로 (글자 그림자는 숫자 칸(overflow:hidden)에 잘려 네모로 보임) */
.k-dday-d{font-size:34px;font-weight:600;letter-spacing:-0.02em;opacity:.92}
.k-dday-dash{font-size:34px;font-weight:300;margin:0 2px 0 3px;opacity:.75;transform:translateY(-2px)}
.k-dday-num{display:inline-flex;font-size:62px;font-weight:700;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.k-dday-col{display:inline-block;height:1em;overflow:hidden;line-height:1}
.k-dday-strip{display:block;will-change:transform;transition:transform 1.25s cubic-bezier(.22,.9,.26,1)}
.k-dday-strip i{display:block;height:1em;line-height:1;font-style:normal;text-align:center;min-width:.62em}
.k-dday-count-word .k-dday-word{font-size:50px;font-weight:700;letter-spacing:.02em}
.k-dday-count-word .k-dday-open{color:#F5C451}
.k-dday-srtext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k-dday.is-rolling .k-dday-num{filter:none}

/* 오른쪽: 날짜 + 링크 */
.k-dday-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:1 1 0;min-width:0;text-align:right}
.k-dday-date{font-size:20px;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-dday-date em{font-style:normal;font-size:14px;font-weight:600;color:#F5C451;margin-left:2px}
.k-dday-datesub{font-size:13px;color:rgba(255,255,255,.74);white-space:nowrap}
.k-dday-link{display:inline-flex;align-items:center;gap:2px;margin-top:3px;font-size:13px;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:border-color .2s}
.k-dday-link svg{transition:transform .2s}
.k-dday-link:hover{border-color:#fff}
.k-dday-link:hover svg{transform:translateX(2px)}
.k-dday-link:focus-visible{outline:2px solid #F5C451;outline-offset:3px;border-radius:2px}

/* 아래: 1년 자 (달 눈금 + 지나온 길) */
.k-dday-rail{position:relative;height:22px;background:rgba(5,30,80,.28)}
.k-dday-rail-in{position:relative;height:100%}
.k-dday-rail-base{position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.22);border-radius:2px}
.k-dday-rail-fill{position:absolute;left:0;top:6px;height:2px;background:linear-gradient(90deg,rgba(245,196,81,.55),#F5C451);border-radius:2px;
  transition:width 1.4s cubic-bezier(.22,.9,.26,1)}
.k-dday-rail-fill i{position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#FFE08A;
  box-shadow:0 0 0 3px rgba(245,196,81,.28),0 0 14px 2px rgba(245,196,81,.55)}
.k-dday-tick{position:absolute;top:3px;width:1px;height:8px;background:rgba(255,255,255,.45);transform:translateX(-.5px)}
.k-dday-tick.is-past{background:rgba(245,196,81,.9)}
.k-dday-tick b{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:0;white-space:nowrap}
.k-dday-tick.is-past b{color:rgba(255,255,255,.85)}
.k-dday-tick-end{height:10px;top:2px;width:2px;background:#F5C451}
.k-dday-tick-end b{transform:translateX(-100%);left:auto;right:-2px;color:#F5C451;font-weight:700}

/* 띠가 있으면 영상 카드를 띠 아래에 살짝만 띄움 (원래 margin-top 140px 은 고정 헤더 100px 몫)
   — 띠(section) 뒤에 <script> 가 있어 '+' 로는 안 잡히므로 '~' 로 */
.k-dday ~ .row1 .visual{margin-top:24px}

/* 자정 넘김 때 자연스러운 숫자 변화 */
.k-dday-num.is-changing .k-dday-strip{transition-duration:.9s}

@media (prefers-reduced-motion:reduce){
  .k-dday-glow{animation:none}
  .k-dday-strip,.k-dday-rail-fill,.k-dday-link svg{transition:none}
}

/* 폭별 */
@media (max-width:1410px){
  .k-dday-title{font-size:17px}.k-dday-sub{font-size:12.5px}.k-dday-num{font-size:52px}.k-dday-d,.k-dday-dash{font-size:30px}.k-dday-date{font-size:18px}
}
@media (max-width:1100px){
  .k-dday{margin-top:70px}
  .k-dday ~ .row1 .visual{margin-top:14px}
  .k-dday-in{min-height:88px;padding:12px 0 10px;gap:16px}
  .k-dday-sub{display:none}
  .k-dday-title{white-space:normal;font-size:16px;line-height:1.3}
  .k-dday-emblem{width:44px;height:44px;padding-top:11px}.k-dday-emblem b{font-size:17px}
  .k-dday-num{font-size:46px}.k-dday-d,.k-dday-dash{font-size:26px}
  .k-dday-date{font-size:16px}.k-dday-datesub{font-size:12px}
  .k-dday-tick b{display:none}.k-dday-tick-end b{display:block}
  .k-dday-rail{height:21px}
}
@media (max-width:640px){
  .k-dday-in{flex-direction:column;align-items:center;gap:6px;padding:16px 0 12px;text-align:center}
  .k-dday-left{flex:none;gap:10px;justify-content:center}
  .k-dday-emblem{width:34px;height:34px;padding-top:9px;border-width:1px}.k-dday-emblem b{font-size:13px}.k-dday-emblem i{font-size:7px}
  .k-dday-title{font-size:15px}
  .k-dday-center{padding:2px 0 0}
  .k-dday-num{font-size:64px}.k-dday-d,.k-dday-dash{font-size:34px}
  .k-dday-right{flex:none;align-items:center;text-align:center;gap:2px;margin-top:2px}
  .k-dday-date{font-size:15px}.k-dday-datesub{font-size:12px}
  .k-dday-link{margin-top:6px;font-size:12.5px}
  .k-dday-glow{width:420px;height:300px;margin:-150px 0 0 -210px}
}

/* ================= 처음 열 때 연출: 가운데 무대 → 띠로 날아가 꽂힘 ================= */
html.k-dday-lock{overflow:hidden}
/* 연출 중인 띠: 파란 바탕만 남기고 글·숫자는 비워 둠 (숫자가 날아와 들어올 자리) */
.k-dday.is-intro .k-dday-in,.k-dday.is-intro .k-dday-rail-in{opacity:0}
.k-dday.is-intro .k-dday-glow{opacity:0}
/* 착지: 글은 살짝 떠오르며 나타나고, 숫자는 날아온 것이 닿는 순간 보임 */
.k-dday.is-dock .k-dday-in,.k-dday.is-dock .k-dday-rail-in{opacity:1;transition:opacity .5s ease .25s}
.k-dday.is-dock .k-dday-left,.k-dday.is-dock .k-dday-right{animation:k-dday-rise .55s cubic-bezier(.2,.8,.2,1) .3s both}
.k-dday.is-dock .k-dday-glow{opacity:0;transition:opacity .8s ease .5s}
.k-dday.is-dock.is-landed .k-dday-glow{opacity:1}
.k-dday.is-dock .k-dday-center .k-dday-count{visibility:hidden}
.k-dday.is-dock.is-landed .k-dday-center .k-dday-count{visibility:visible;animation:k-dday-land .5s cubic-bezier(.2,.9,.3,1.4) both}
.k-dday.is-dock.is-landed .k-dday-center::after{content:'';position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);pointer-events:none;animation:k-dday-ring .8s ease-out .05s both}
.k-dday.is-dock.is-landed::after{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 100%);transform:translateX(-120%);animation:k-dday-sweep .9s ease-out .12s both}
@keyframes k-dday-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes k-dday-land{0%{transform:scale(1.06)}60%{transform:scale(.985)}100%{transform:none}}
@keyframes k-dday-ring{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(2.2)}}
@keyframes k-dday-sweep{from{transform:translateX(-120%)}to{transform:translateX(330%)}}

/* 무대 (JS 가 만듦) */
.k-dday-stage{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;touch-action:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s ease;
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;color:#fff;text-align:center;-webkit-font-smoothing:antialiased;cursor:pointer}
.k-dday-stage.is-on{opacity:1}
.k-dday-stage.is-leaving{pointer-events:none}
.k-dday-stage.is-leaving .k-dday-stage-bg{opacity:0;transition:opacity .5s ease .42s}   /* 바탕은 숫자가 거의 닿을 때 걷힘 (하얀 화면 위에 흰 숫자가 겹치지 않게) */
.k-dday-stage.is-leaving .k-dday-stage-in{opacity:0;transition:opacity .22s ease,transform .5s ease}
.k-dday-stage-bg{position:absolute;top:0;right:0;bottom:0;left:0;transition:opacity .45s ease;background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(31,110,230,.96),rgba(11,52,140,.97) 60%,rgba(6,30,80,.985) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.k-dday-stage-bg::after{content:'';position:absolute;left:50%;top:44%;width:900px;height:520px;margin:-260px 0 0 -450px;
  background:radial-gradient(closest-side,rgba(245,196,81,.30),rgba(245,196,81,.08) 50%,rgba(245,196,81,0) 72%);filter:blur(10px);animation:k-dday-breathe 7s ease-in-out infinite}
.k-dday-stage-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:0 24px;transform:translateY(10px) scale(.96);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.k-dday-stage.is-on .k-dday-stage-in{transform:none}
.k-dday-stage.is-leaving .k-dday-stage-in{transition:transform .5s ease;transform:translateY(-14px) scale(.98)}
.k-dday-stage-sub{margin:0 0 10px;font-size:16px;color:rgba(255,255,255,.8)}
.k-dday-stage-title{margin:0;font-size:30px;font-weight:700;letter-spacing:-0.02em}
.k-dday-stage-count{margin:14px 0 22px;position:relative}
.k-dday-stage-count .k-dday-count{filter:drop-shadow(0 4px 26px rgba(255,255,255,.3)) drop-shadow(0 0 34px rgba(245,196,81,.3))}
.k-dday-stage-count .k-dday-d{font-size:92px}
.k-dday-stage-count .k-dday-dash{font-size:92px;margin:0 6px 0 8px;transform:translateY(-6px)}
.k-dday-stage-num{font-size:176px;letter-spacing:-0.045em}
.k-dday-stage-rail{position:relative;width:80vw;max-width:640px;height:2px;background:rgba(255,255,255,.22);border-radius:2px;margin:0 0 22px}
.k-dday-stage-fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,rgba(245,196,81,.6),#F5C451);border-radius:2px;transition:width 1.3s cubic-bezier(.22,.9,.26,1)}
.k-dday-stage-dot{position:absolute;left:0;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FFE08A;box-shadow:0 0 0 4px rgba(245,196,81,.25),0 0 18px 3px rgba(245,196,81,.6);transition:left 1.3s cubic-bezier(.22,.9,.26,1)}
.k-dday-stage-date{margin:0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.k-dday-stage-date em{font-style:normal;color:#F5C451;font-size:15px;font-weight:600;margin-left:2px}
.k-dday-stage-date span{display:block;margin-top:6px;font-size:14px;font-weight:400;color:rgba(255,255,255,.72)}
.k-dday-stage-skip{position:absolute;left:0;right:0;bottom:-64px;margin:0;font-size:12px;color:rgba(255,255,255,.45);opacity:0;transition:opacity .6s}
.k-dday-stage.is-rolling .k-dday-stage-skip,.k-dday-stage.is-settled .k-dday-stage-skip{opacity:1}
.k-dday-stage.is-leaving .k-dday-stage-count .k-dday-count{visibility:hidden}
/* 날아가는 숫자 */
.k-dday-flyer{position:fixed;z-index:2147483001;margin:0;transform-origin:0 0;will-change:transform;pointer-events:none;color:#fff;
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;line-height:1;transition:transform .78s cubic-bezier(.7,0,.2,1);filter:drop-shadow(0 2px 12px rgba(8,40,110,.45))}
.k-dday-flyer .k-dday-d{font-size:.523em}.k-dday-flyer .k-dday-dash{font-size:.523em;margin:0 .034em 0 .045em;transform:translateY(-.034em)}
.k-dday-flyer .k-dday-num{font-size:1em;letter-spacing:-0.045em}
@media (max-width:860px){
  .k-dday-stage-title{font-size:22px}.k-dday-stage-sub{font-size:14px}
  .k-dday-stage-num{font-size:104px}.k-dday-stage-count .k-dday-d,.k-dday-stage-count .k-dday-dash{font-size:56px}
  .k-dday-stage-count{margin:8px 0 18px}.k-dday-stage-date{font-size:17px}.k-dday-stage-skip{bottom:-54px}
}
@media (prefers-reduced-motion:reduce){.k-dday-stage,.k-dday-flyer{display:none}}