@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
@font-face{
font-family:'PyeongChangPeace-Bold';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
font-weight:700;
font-style:normal;
}
/* ═══════════════════════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
--header-h:62px;
--nexon:'NEXON Lv1 Gothic OTF','Noto Sans KR',AppleSDGothicNeo-Regular,sans-serif;
}
html{scroll-behavior:smooth;}
body{
  font-family:var(--nexon);
  background:var(--bg0);
  color:var(--txt0);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .4s, color .4s;
  background-attachment:fixed;
}
ul{list-style:none;}a{text-decoration:none;color:inherit;}
#bo_v_con a,#bo_vc .cmt_contents a{color:blue;text-decoration:underline}
img{max-width:100%;height:auto;display:block;}

/* ── SCANLINE — dark only ────────────────────────────────── */
body.dark::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.022) 2px,rgba(0,0,0,0.022) 4px);
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--accent-dim2);border-radius:3px;}

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
#site-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--bg-hdr);
  border-bottom:1px solid var(--brd1);
  box-shadow:0 4px 18px rgba(0,0,0,0.18);
  z-index:1001;
  transition:transform .35s ease, background .35s;
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
}
/* accent glow stripe at bottom of header */
#site-header::after{
  content:'';
  position:absolute;bottom:-1px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow2),var(--accent),var(--accent-glow2),transparent);
  opacity:.55;pointer-events:none;z-index:1;
}
#site-header.hide{transform:translateY(calc(-1 * var(--header-h)));}

.header-inner{
  max-width:1600px;margin:0 auto;height:100%;
  display:flex;align-items:center;padding:0 20px;gap:16px;
}

/* Logo */
.site-logo{
  font-family:'Syne', sans-serif;
  font-weight:800;
  font-size:1.45em;
  color:var(--accent);
  letter-spacing:-.02em;
  white-space:nowrap;flex-shrink:0;
  text-shadow:0 0 22px var(--accent-glow2);
  transition:color .3s, text-shadow .3s;
}
.site-logo:hover{opacity:.85;}

/* ── DESKTOP NAV ─────────────────────────────────────────── */
.desktop-nav{flex:1;display:flex;align-items:center;justify-content:center;}
@media(max-width:960px){.desktop-nav{display:none;}}

.gnb{display:flex;align-items:center;}
.gnb-item{position:relative;}

.gnb-link{
  display:block;
  padding:0 16px;height:var(--header-h);line-height:var(--header-h);
  font-size:14px;font-weight:600;
  color:var(--txt1);white-space:nowrap;
  transition:color .15s;position:relative;
}
.gnb-link::after{
  content:'';position:absolute;left:16px;right:16px;bottom:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.gnb-item:hover .gnb-link,
.gnb-item:focus-within .gnb-link{color:var(--txt0);}
.gnb-item:hover .gnb-link::after,
.gnb-item:focus-within .gnb-link::after{transform:scaleX(1);}

/* MEGA DROPDOWN */
@keyframes dropSlide{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
.drop-wrap{
  display:none;
  position:fixed;top:var(--header-h);left:0;right:0;
  background:var(--bg-drop);
  border-top:1px solid var(--brd1);
  padding:22px 0 26px;z-index:998;
  overflow:visible;
}
/* ① 헤더 그림자 */
.drop-wrap::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:16px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.08) 0%,transparent 100%);
  pointer-events:none;z-index:2;
}
/* ② 헤더 하단 구분선과 완전히 동일한 스타일 */
.drop-wrap::after{
  content:'';
  position:absolute;bottom:-1px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow2),var(--accent),var(--accent-glow2),transparent);
  opacity:.55;pointer-events:none;z-index:3;
}
.gnb-item:hover .drop-wrap,
.gnb-item:focus-within .drop-wrap{
  display:block;
  animation:dropSlide .22s cubic-bezier(.22,1,.36,1) both;
}

.drop-inner{max-width:1200px;margin:0 auto;display:flex;gap:0;padding:0 20px;justify-content:center;}
.drop-col{flex:1;padding:0 20px;border-right:1px solid var(--brd0);text-align:left;}
.drop-col:last-child{border-right:none;}

.drop-cat{
  font-size:14px;font-weight:700;color:var(--accent);
  letter-spacing:1.4px;text-transform:uppercase;
  margin-bottom:8px;padding-bottom:7px;
  border-bottom:1px solid var(--brd0);
}
.drop-cat+.drop-cat{margin-top:14px;padding-top:14px;border-top:1px solid var(--brd0);}
.drop-item{
  display:block;font-size:13px;color:var(--txt1);
  padding:5px 0;
  transition:color .12s, padding-left .12s;
}
.drop-item:hover{color:var(--txt0);padding-left:6px;}

/* RIGHT CONTROLS */
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

@media(max-width:960px){
  .header-inner{justify-content:space-between;}
  .site-logo{flex:1;}
}

.theme-btn{
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--brd2);
  background:var(--bg3);color:var(--txt0);
  font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  backdrop-filter:blur(8px);
}
.theme-btn:hover{border-color:var(--accent);color:var(--txt0);background:var(--accent-dim2);}

.ham-btn{
  display:none;width:34px;height:34px;border-radius:8px;
  border:1px solid var(--brd2);background:var(--bg3);color:var(--txt0);
  font-size:18px;cursor:pointer;align-items:center;justify-content:center;
  transition:all .15s;
  backdrop-filter:blur(8px);
}
@media(max-width:960px){.ham-btn{display:flex;}}
.ham-btn:hover{border-color:var(--accent);color:var(--txt0);background:var(--accent-dim2);}

/* ═══════════════════════════════════════════════════════════════
   HEADER → MAIN TRANSITION ZONE  (gradient bridge)
═══════════════════════════════════════════════════════════════ */
#main-wrap{
  max-width:1600px;margin:0 auto;
  padding:24px 14px 24px;
  position:relative;
}
/* soft gradient bridge — blends header colour into body */
#main-wrap::before{
  content:'';
  position:absolute;
  top:var(--header-h);left:0;right:0;
  height:60px;
  background:linear-gradient(to bottom, var(--bg-hdr), transparent);
  pointer-events:none;z-index:900;
  opacity:.7;
}

/* Section label bar */
.section-bar{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--brd0);
}
.section-bar-line{flex:1;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent);}
.section-bar-title{
	font-family:var(--nexon);
  font-size:16px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--txt2);
  display:flex;align-items:center;gap:5px;
}
.section-bar-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow2);
  animation:dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}

/* ═══════════════════════════════════════════════════════════════
   VIDEO GRID
═══════════════════════════════════════════════════════════════ */
.video-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media(max-width:1200px){.video-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px) {.video-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px) {.video-grid{grid-template-columns:1fr;}}
@media(max-width:360px) {.video-grid{grid-template-columns:1fr;gap:10px;}}

/* ── VIDEO CARD ──────────────────────────────────────────── */
.video-card{
  border-radius:7px;overflow:hidden;
  background:var(--bg1);
  border:5px solid var(--brd0);
  box-shadow:0 2px 10px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
  position:relative;cursor:pointer;
}
.video-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,0.18), 0 0 0 1px var(--accent-dim);
  border-color:var(--accent-dim);
}
/* top accent flash on hover */
.video-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .22s;z-index:5;
}
.video-card:hover::before{opacity:1;}

/* THUMBNAIL */
.thumb-wrap{
  position:relative;width:100%;overflow:hidden;background:#000;
  cursor:pointer;
  border-radius:4px 4px 0 0;
}
.thumb-wrap[data-ratio="16:9"]{aspect-ratio:16/9;}
.thumb-wrap[data-ratio="9:16"]{aspect-ratio:9/16;}

.thumb-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease, opacity .3s;
}
.video-card:hover .thumb-wrap img{transform:scale(1.045);}

/* preview iframe */
.preview-frame{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:2;
}
.preview-frame iframe{width:100%;height:100%;border:none;pointer-events:none;}
.thumb-wrap.previewing .preview-frame{opacity:1;}
.thumb-wrap.previewing img{opacity:0;}

/* PLAY ICON */
.play-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:50px;height:50px;border-radius:50%;
  background:var(--play-bg);
  border:2px solid rgba(255,255,255,.80);
  display:flex;align-items:center;justify-content:center;
  z-index:3;
  transition:transform .22s ease, background .22s, border-color .22s, opacity .25s;
  backdrop-filter:blur(5px);
}
.play-icon svg{width:25px;height:25px;fill:#fff;margin-left:3px;}
.video-card:hover .play-icon{
  transform:translate(-50%,-50%) scale(1.14);
  background:var(--accent-dim);
  border-color:var(--accent);
  box-shadow:0 0 18px var(--accent-glow2);
}
.thumb-wrap.previewing .play-icon{opacity:0;}

/* BADGES */
.shorts-badge{
  position:absolute;top:8px;left:8px;
  background:#ff0033;color:#fff;
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;
  letter-spacing:.5px;z-index:4;
}
.duration-badge{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.78);color:#fff;
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;
  z-index:4;font-family:monospace;
}

/* CARD TITLE */
.video-title{
  padding:6px 10px 7px;
  font-size:13px;line-height:1.45;
  color:var(--txt1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(0deg, var(--bg2) 0%, var(--bg1) 100%);
  border-top:1px solid var(--brd0);
  border-radius:0 0 4px 4px;
  transition:color .15s, background .15s;
}
.video-card:hover .video-title{
  color:var(--txt0);
  background:linear-gradient(0deg, var(--bg1) 0%, var(--bg2) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX  — vw AND vh constrained
═══════════════════════════════════════════════════════════════ */
.lightbox-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.7);
  align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lightbox-overlay.active{display:flex;animation:lbIn .22s ease;}
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}

.lightbox-box{
  position:relative;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px var(--accent-dim), 0 28px 90px rgba(0,0,0,.85);
  animation:lbSlide .25s ease;background:#000;
}
@keyframes lbSlide{
  from{transform:scale(.9) translateY(16px);opacity:.4;}
  to{transform:scale(1) translateY(0);opacity:1;}
}

/* ─── 16:9 — never exceeds 90vw NOR 88vh ─── */
.lightbox-box.ratio-16-9{
  width: min(90vw, 1100px, calc(88vh * 16 / 9));
  aspect-ratio:16/9;
  max-height:88vh;
}
/* ─── 9:16 Shorts — height-capped at 88vh ─── */
.lightbox-box.ratio-9-16{
  height:min(88vh, 800px);
  width:calc(min(88vh, 800px) * 9 / 16);
  max-width:min(50vw, 440px);
  aspect-ratio:9/16;
}

/* very small screens */
@media(max-width:640px){
  .lightbox-box.ratio-16-9{width:min(96vw, calc(80vh * 16 / 9));}
  .lightbox-box.ratio-9-16{
    height:min(80vh,560px);
    width:calc(min(80vh,560px) * 9 / 16);
    max-width:88vw;
  }
}
/* landscape / short viewport */
@media(max-height:520px){
  .lightbox-box.ratio-16-9{
    width:calc(82vh * 16 / 9);max-height:82vh;
  }
  .lightbox-box.ratio-9-16{
    height:82vh;width:calc(82vh * 9 / 16);max-width:48vw;
  }
}

.lightbox-box iframe{width:100%;height:100%;border:none;display:block;}

/* spinner */
.lb-spinner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;z-index:1;transition:opacity .3s;
}
.lb-spinner.done{opacity:0;pointer-events:none;}
.lb-spin-ring{
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* close btn */
.lb-close{
  position:fixed;top:14px;right:14px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s;z-index:9001;
}
.lb-close:hover{background:rgba(255,255,255,.26);transform:scale(1.07);}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════════════════════════ */
.mobile-drawer{
  position:fixed;top:0;right:-100%;width:min(360px,100%);height:100%;
  background:var(--bg-hdr);border-left:1px solid var(--brd1);
  z-index:2000;overflow-y:auto;
  transition:right .3s cubic-bezier(.22,1,.36,1);padding:0 0 40px;
}
.mobile-drawer.open{right:0;}

.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--brd0);
  position:sticky;top:0;background:var(--bg-hdr);z-index:1;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.drawer-logo{
  font-family:'Syne', sans-serif;
  font-weight:800;
  font-size:1.2em;color:var(--accent);
  text-shadow:0 0 14px var(--accent-glow2);
}
.drawer-close{
  width:32px;height:32px;border-radius:7px;
  border:1px solid var(--brd1);background:transparent;
  color:var(--txt1);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.drawer-close:hover{border-color:var(--accent-dim2);color:var(--txt0);}

.mob-menu-item{border-bottom:1px solid var(--brd0);}
.mob-menu-btn{
  width:100%;display:flex;align-items:center;justify-content:flex-start;
  padding:14px 20px;background:transparent;border:none;
  color:var(--txt0);font-size:14px;font-weight:600;
  cursor:pointer;text-align:left;gap:8px;transition:background .1s;
}
.mob-menu-btn:hover{background:var(--accent-dim);}
.mob-menu-btn .mob-emoji{font-size:16px;}
.mob-menu-btn .mob-arrow{margin-left:auto;font-size:10px;color:var(--txt2);transition:transform .2s;margin-left:auto;}
.mob-menu-item.open .mob-arrow{transform:rotate(180deg);}
.mob-sub-list{display:none;padding:4px 0 12px 44px;}
.mob-menu-item.open .mob-sub-list{display:block;}
.mob-sub-group{margin-bottom:10px;}
.mob-sub-cat{
  font-size:13px;font-weight:700;color:var(--accent);
  letter-spacing:1px;text-transform:uppercase;padding:8px 0 5px;
}
.mob-sub-cat::before{
  content:"🚦";
  color:var(--txt1);
  margin-right:5px;
  font-size:12px;
}
.mob-sub-link{
  display:block;font-size:13px;color:var(--txt1);
  padding:5px 0;transition:color .12s;
}
.mob-sub-link::before{
  content:"⚙︎";
  color:var(--txt1);
  margin-left:5px;
  margin-right:5px;
  font-size:12px;
}
.mob-sub-link:hover{color:var(--txt0);}

.drawer-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.62);z-index:1999;backdrop-filter:blur(2px);
}
.drawer-backdrop.open{display:block;}

/* ═══════════════════════════════════════════════════════════════
   AUTOPLAY TOAST
═══════════════════════════════════════════════════════════════ */
.autoplay-toast{
  position:fixed;bottom:76px;left:50%;
  transform:translateX(-50%) translateY(18px);
  background:var(--bg2);border:1px solid var(--brd1);
  color:var(--txt0);font-size:12px;
  padding:8px 18px;border-radius:20px;
  opacity:0;transition:all .3s;pointer-events:none;z-index:500;white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.autoplay-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer{
	position:relative;
  background:var(--bg0);
  border-top:1px solid var(--brd0);
  box-shadow: 0 -7px 15px -5px var(--brd0);
  color:var(--txt2);text-align:center;
  padding:36px 20px;font-size:12px;margin-top:0px;
}
.site-footer a{color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════
   HERO INTRO
═══════════════════════════════════════════════════════════════ */
#hero{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

/* 파티클 캔버스 */
#hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

/* 배경 그라디언트 오버레이 */
#hero::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 30% 40%, var(--accent-glow) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, var(--accent-dim) 0%, transparent 55%);
  animation:heroBgPulse 6s ease-in-out infinite alternate;
}
@keyframes heroBgPulse{
  from{opacity:.6;}
  to{opacity:1;}
}

/* 텍스트 컨테이너 */
.hero-content{
  position:relative;z-index:2;
  text-align:center;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;gap:22px;
}

/* 작은 태그라인 */
.hero-eyebrow{
	font-family:var(--nexon);
  font-size:14px;font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent-dim2);
  padding:5px 18px;
  border-radius:20px;
  background:var(--accent-dim);
  opacity:0;
  transform:translateY(16px);
  animation:heroFadeUp .9s cubic-bezier(.22,1,.36,1) .3s forwards;
}

/* 메인 헤드라인 */
.hero-title{
  font-family:'PyeongChangPeace-Bold',sans-serif;
  font-size:clamp(2.2rem,6vw,5rem);
  line-height:1.15;
  color:var(--txt0);
  letter-spacing:-.03em;
  opacity:0;transform:translateY(22px);
  animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) .55s forwards;
}
.hero-title .hl{
  color:var(--accent);
  text-shadow:0 0 40px var(--accent-glow2);
  display:inline-block;
  animation:hlPulse 2.8s ease-in-out infinite;
}
@keyframes hlPulse{
  0%,100%{text-shadow:0 0 30px var(--accent-glow2);}
  50%{text-shadow:0 0 60px var(--accent-glow2), 0 0 100px var(--accent-glow);}
}

/* 서브 카피 */
.hero-sub{
  font-size:clamp(.85rem,1.55vw,1.05rem);/*최소값, 선호값, 최대값*/
  color:var(--txt1);
  line-height:1.7;
  max-width:560px;
  opacity:0;transform:translateY(18px);
  animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) .78s forwards;
}

/* CTA 버튼 */
.hero-cta{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  opacity:0;transform:translateY(14px);
  animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) 1s forwards;
}
.hero-btn{
  padding:12px 28px;border-radius:40px;
  font-family:var(--nexon);
  font-size:14px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;border:none;
  transition:transform .18s, box-shadow .18s;
}
.hero-btn.primary{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 28px var(--accent-glow2);
}
.hero-btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px var(--accent-glow2);}
.hero-btn.secondary{
  background:transparent;color:var(--txt0);
  border:1.5px solid var(--brd2);
}
.hero-btn.secondary:hover{background:var(--accent-dim);transform:translateY(-2px);}

/* 스크롤 힌트 */
.hero-scroll{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
  opacity:0;
  animation:heroScrollIn .8s cubic-bezier(.22,1,.36,1) 1.3s forwards;
}
@keyframes heroScrollIn{
  from{opacity:0;transform:translateX(-50%) translateY(14px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}
.scroll-arrow{
  width:22px;height:34px;border:2px solid var(--brd2);border-radius:12px;
  position:relative;
}
.scroll-arrow::after{
  content:'';position:absolute;left:50%;top:5px;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);transform:translateX(-50%);
  animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{top:5px;opacity:1;}
  80%{top:18px;opacity:0;}
  100%{top:5px;opacity:0;}
}

/* 공통 fade-up 키프레임 */
@keyframes heroFadeUp{
  to{opacity:1;transform:translateY(0);}
}

/* ── 카드 스크롤 등장 — 아래서 위로 스르륵 페이드인 ── */
.video-card{
  opacity:0;transform:translateY(48px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),
             transform .65s cubic-bezier(.22,1,.36,1),
             box-shadow .22s ease,
             border-color .22s;
}
.video-card.visible{opacity:1;transform:translateY(0);}

/* ═══════════════════════════════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════════════════════════════ */
#page-loader{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;
  transition:opacity .45s ease, visibility .45s;
}
#page-loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.loader-logo{
  font-family:'Syne', sans-serif;
  font-weight:800;
  font-size:1.8em;color:var(--accent);
  letter-spacing:-.02em;
  text-shadow:0 0 28px var(--accent-glow2);
  animation:loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.loader-bar-wrap{
  width:160px;height:2px;
  background:var(--brd1);border-radius:2px;overflow:hidden;
}
.loader-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--accent-dim2),var(--accent));
  border-radius:2px;
  animation:loaderFill .85s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes loaderFill{from{width:0;}to{width:100%;}}

/* ═══════════════════════════════════════════════════════════════
   SMOOTH SCROLL
═══════════════════════════════════════════════════════════════ */
html{scroll-behavior:smooth;}

/* ═══════════════════════════════════════════════════════════════
   SECTION COMMONS — reveal on scroll
═══════════════════════════════════════════════════════════════ */
.corp-section{padding:100px 20px;position:relative;overflow:hidden;}
.corp-inner{max-width:1200px;margin:0 auto;}
.sec-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.sec-eyebrow::before{content:'';flex:0 0 28px;height:1px;background:var(--accent);}
.sec-title{
  font-family:'PyeongChangPeace-Bold',sans-serif;
  font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1.2;
  color:var(--txt0);
}
.sec-lead{
  font-size:0.9rem;line-height:1.8;color:var(--txt1);
  max-width:620px;
}
.sec-title, .sec-lead {
 margin-bottom: 50px;
}
@media(max-width: 1100px) {
.sec-title, .sec-lead {
 margin-bottom: 10px;
}
}
@media(max-width: 870px) {
.sec-title, .sec-lead {
 margin-bottom: 2px;
}
.sec-lead{
  font-size:0.75rem;
}
}
/* scroll-reveal base */
.reveal{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);}
.reveal.delay-1{transition-delay:.12s;}
.reveal.delay-2{transition-delay:.24s;}
.reveal.delay-3{transition-delay:.36s;}
.reveal.delay-4{transition-delay:.48s;}
.reveal.delay-5{transition-delay:.60s;}
.reveal.in-view{opacity:1;transform:none;}

.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);}
.reveal-left.in-view{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);}
.reveal-right.in-view{opacity:1;transform:none;}

/* ── ABOUT US ──────────────────────────────────────────────── */
#sec-about{background:var(--bg0);}
#sec-about::before{
  content:'';position:absolute;right:-10%;top:-20%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
  pointer-events:none;
}
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  row-gap: 2vw;
  column-gap: 2vw;
	align-items:center;
	}
@media(max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 4vw;
  }
.sec-title, .sec-lead {
 margin-bottom: 20px;
}
}
.about-img-wrap{
  position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:16:9;
  border:1px solid var(--brd1);
}
.about-img-bg{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:80px;
}
.about-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-dim) 0%,transparent 60%);
}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:0px;}
.about-tag{
  padding:5px 14px;border-radius:20px;font-size:12px;
  background:var(--accent-dim);border:1px solid var(--accent-dim2);
  color:var(--accent);font-weight:600;
}

/* ── BUSINESS AREA ─────────────────────────────────────────── */
#sec-business{background:var(--bg1);}
.biz-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}
@media(max-width:1000px){.biz-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.biz-cards{grid-template-columns:1fr;}}
.biz-card{
  padding:36px 28px;border-radius:14px;
  background:var(--bg2);border:1px solid var(--brd0);
  position:relative;overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  cursor:default;
}
.biz-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent-dim2);
  box-shadow:0 16px 40px rgba(0,0,0,0.18), 0 0 0 1px var(--accent-dim);
}
.biz-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .25s;
}
.biz-card:hover::before{opacity:1;}
.biz-icon{font-size:40px;margin-bottom:20px;display:block;}
.biz-name{font-size:1rem;font-weight:700;color:var(--txt0);margin-bottom:10px;}
.biz-desc{font-size:13px;color:var(--txt2);line-height:1.7;}
.biz-card-num{
  position:absolute;bottom:16px;right:20px;
  font-size:40px;font-weight:900;color:var(--brd0);
  font-family:'PyeongChangPeace-Bold',sans-serif;
  line-height:1;pointer-events:none;
}

/* ── NUMBERS / 실적 ─────────────────────────────────────────── */
#sec-numbers{
  background:var(--accent);
  overflow:hidden;position:relative;
}
#sec-numbers::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 40px);
}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
@media(max-width:760px){.num-grid{grid-template-columns:repeat(2,1fr);}}
.num-item{
  padding:48px 20px;text-align:center;
  border-right:1px solid rgba(255,255,255,.15);
}
.num-item:last-child{border-right:none;}
.num-val{
  font-family:'PyeongChangPeace-Bold',sans-serif;
  font-size:clamp(2.2rem,4vw,3.2rem);
  color:#fff;line-height:1;margin-bottom:10px;
}
.num-unit{font-size:1.2rem;margin-left:2px;}
.num-label{font-size:13px;color:rgba(255,255,255,.75);letter-spacing:.5px;}

/* ── PROCESS ─────────────────────────────────────────────────── */
#sec-process{background:var(--bg0);}
.process-steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-top:52px;position:relative;
}
@media(max-width:900px){.process-steps{grid-template-columns:repeat(3,1fr);row-gap:40px;}}
@media(max-width:540px){.process-steps{grid-template-columns:1fr;}}
.process-steps::before{
  content:'';position:absolute;top:32px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--brd2),transparent);
}
@media(max-width:900px){.process-steps::before{display:none;}}
.step-item{text-align:center;padding:0 12px;position:relative;}
.step-circle{
  width:64px;height:64px;border-radius:50%;
  background:var(--bg2);border:2px solid var(--accent-dim2);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin:0 auto 18px;
  transition:background .25s,border-color .25s,box-shadow .25s;
  position:relative;z-index:1;
}
.step-item:hover .step-circle{
  background:var(--accent-dim);border-color:var(--accent);
  box-shadow:0 0 20px var(--accent-glow2);
}
.step-num{
  position:absolute;top:-6px;right:-6px;
  width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.step-name{font-size:14px;font-weight:700;color:var(--txt0);margin-bottom:6px;}
.step-desc{font-size:13px;color:var(--txt2);line-height:1.6;}

/* ── NOTICE / FAQ ───────────────────────────────────────────── */
#sec-board{background:var(--bg1);}
.board-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media(max-width:760px){.board-cols{grid-template-columns:1fr;}}
.board-panel{}
.board-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:2px solid var(--accent);
}
.board-panel-title{font-size:1rem;font-weight:700;color:var(--txt0);}
.board-more{
  font-size:11px;color:var(--accent);border:1px solid var(--accent-dim2);
  padding:3px 12px;border-radius:12px;
  transition:background .15s;text-decoration:none;
}
.board-more:hover{background:var(--accent-dim);}
.notice-list{list-style:none;}
.notice-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--brd0);
  font-size:13px;
}
.notice-item:last-child{border-bottom:none;}
.notice-title{color:var(--txt1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;transition:color .12s;cursor:pointer;}
.notice-title:hover{color:var(--accent);}
.notice-date{color:var(--txt2);font-size:11px;flex-shrink:0;margin-left:12px;}
.faq-list{list-style:none;}
.faq-item{border-bottom:1px solid var(--brd0);}
.faq-q{
  padding:13px 0;font-size:13px;color:var(--txt1);cursor:pointer;
  display:flex;align-items:flex-start;gap:10px;
  transition:color .12s;
}
.faq-q:hover{color:var(--accent);}
.faq-q::before{content:'Q';font-weight:700;color:var(--accent);flex-shrink:0;}
.faq-a{
  display:none;padding:0 0 14px 22px;
  font-size:13px;color:var(--txt2);line-height:1.7;
}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q{color:var(--txt0);}

/* ── CONTACT CTA ────────────────────────────────────────────── */
#sec-contact{
  background:var(--bg0);
  text-align:center;
}
.contact-box{
  max-width:740px;margin:0 auto;
  padding:72px 48px;border-radius:24px;
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg1) 100%);
  border:1px solid var(--brd1);
  position:relative;overflow:hidden;
}
.contact-box::before{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(ellipse at 50% 0%,var(--accent-dim) 0%,transparent 65%);
}
.contact-box .sec-title{margin-bottom:14px;}
.contact-box .sec-lead{max-width:100%;margin:0 auto 38px;}
.contact-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.contact-btn{
  padding:14px 36px;border-radius:40px;font-size:14px;font-weight:700;
  letter-spacing:.3px;cursor:pointer;border:none;
  transition:transform .18s, box-shadow .18s;
}
.contact-btn.primary{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 28px var(--accent-glow2);
}
.contact-btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px var(--accent-glow2);}
.contact-btn.outline{
  background:transparent;color:var(--txt0);
  border:1.5px solid var(--brd2);
}
.contact-btn.outline:hover{background:var(--accent-dim);border-color:var(--accent);transform:translateY(-2px);}
/* 맨 위로 버튼 기본 스타일 */
#scrollTopBtn{
  position:fixed;
  right:22px;
  bottom:28px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:1.5rem;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:all .3s ease;
  z-index:999;
}
/* 스크롤 시 나타남 */
#scrollTopBtn.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* 화면 세로 중앙 영역일 때 반전 */
#scrollTopBtn.invert{
  background:#fff;
  color:var(--accent);
}

/* ================= CFD / 서브페이지 ================= */

.sub-page{
  max-width:1200px;
  margin:0 auto;
  padding:120px 20px 80px;
}

.sub-container{
  background:var(--bg1);
  border:1px solid var(--brd0);
  border-radius:16px;
  padding:40px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
}

.sub-title{
  font-size:36px;
  font-weight:800;
  margin-bottom:16px;
  color:var(--txt0);
  letter-spacing:-0.5px;
}

.sub-desc{
  font-size:17px;
  line-height:1.8;
  color:var(--txt1);
  margin-bottom:30px;
}

.cfd-box{
  margin-top:24px;
  padding:24px;
  background:var(--bg2);
  border:1px solid var(--brd0);
  border-radius:12px;
  transition: all 0.3s ease;
}

.cfd-box:hover{
  transform: translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.cfd-box h2{
  font-size:22px;
  margin-bottom:12px;
  color:var(--accent);
}

.cfd-box p,
.cfd-box li{
  font-size:15px;
  line-height:1.8;
  color:var(--txt1);
}

.cfd-box ul{
  padding-left:20px;
  list-style:disc;
}

/* ================= 반응형 ================= */

@media(max-width:768px){

  .sub-container{
    padding:24px;
  }

  .sub-title{
    font-size:26px;
  }

  .sub-desc{
    font-size:15px;
  }

}

/* =========================================================
   HEADER LOGIN / REGISTER UI
   맨 아래 추가
========================================================= */

/* PC 상단 로그인/회원가입 */
.desktop-auth{
  display:flex;
  align-items:center;
}

@media (max-width: 960px){
  .desktop-auth{
    display:none;
  }
}

.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.auth-guest-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:34px;
  padding:0 14px;
  border-radius:11px;
  font-size:12px;
  font-weight:700;
  letter-spacing:-0.02em;
  text-decoration:none;
  border:1px solid var(--brd2);
  background:var(--bg3);
  color:var(--txt0);
  transition:all .18s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 rgba(0,0,0,0);
}

.auth-btn:hover{
  transform:translateY(-1px);
}

.auth-btn.login{
  background:linear-gradient(180deg, var(--bg3), var(--bg2));
  border-color:rgba(121,216,255,0.28);
}

.auth-btn.login:hover{
  border-color:var(--accent);
  box-shadow:0 0 16px rgba(0,180,255,0.16);
}

.auth-btn.register{
  background:linear-gradient(135deg, rgba(26,142,255,0.20), rgba(83,168,255,0.10));
  border-color:rgba(83,168,255,0.38);
  color:#dff6ff;
}

.auth-btn.register:hover{
  border-color:var(--accent);
  box-shadow:0 0 18px rgba(0,162,255,0.22);
}

/* PC 로그인 후 상태 */
.auth-user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 8px 0 10px;
  border-radius:12px;
  border:1px solid rgba(83,168,255,0.24);
  background:
    radial-gradient(circle at top left, rgba(64,160,255,0.14), transparent 55%),
    linear-gradient(180deg, rgba(10,18,42,0.96), rgba(8,13,34,0.98));
  box-shadow:
    0 0 16px rgba(0,128,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  box-sizing:border-box;
  min-width:auto;
  max-width:none;
}

.auth-user-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:0;
}

.auth-nick{
  font-size:12px;
  font-weight:800;
  color:#f4fbff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:72px;
  line-height:1;
}

.auth-point{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(121,216,255,0.20);
  background:rgba(121,216,255,0.08);
  color:#79d8ff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  flex-shrink:0;
}

.auth-user-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.auth-mini-btn{
  height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  color:var(--txt0);
  border:1px solid var(--brd2);
  background:rgba(255,255,255,0.03);
  transition:all .16s ease;
  flex:none;
}

.auth-mini-btn:hover{
  border-color:var(--accent);
  background:rgba(83,168,255,0.10);
}

.auth-mini-btn.logout:hover{
  border-color:rgba(255,98,98,0.45);
  background:rgba(255,98,98,0.10);
  color:#ffdede;
}
.desktop-auth{
  display:flex;
  align-items:center;
  height:34px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* 모바일 고객지원 아래 로그인 박스 */
.fh-mobile-auth-wrap{
  padding:14px 0 4px;
  margin:12px 12px 0;
  border-top:1px solid rgba(255,255,255,0.06);
}

@media (min-width: 961px){
  .fh-mobile-auth-wrap{
    display:none;
  }
}

.fh-mobile-auth-box{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(83,168,255,0.26);
  background:
    radial-gradient(circle at top left, rgba(64,160,255,0.22), transparent 48%),
    linear-gradient(180deg, rgba(8,18,44,0.96), rgba(7,12,34,0.98));
  box-shadow:
    0 0 20px rgba(0,128,255,0.14),
    0 0 32px rgba(78,95,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.fh-mobile-auth-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
  color:#79d8ff;
  margin-bottom:10px;
}

.fh-mobile-auth-desc{
  font-size:12px;
  line-height:1.6;
  color:var(--txt1);
  margin-bottom:12px;
}

.fh-mobile-auth-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.fh-mobile-auth-actions.logged-in{
  grid-template-columns:1fr 1fr;
}

.fh-mobile-auth-btn{
  min-height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:-0.02em;
  text-decoration:none;
  border:1px solid var(--brd2);
  color:var(--txt0);
  transition:all .18s ease;
}

.fh-mobile-auth-btn.primary{
  background:linear-gradient(135deg, rgba(23,143,255,0.95), rgba(63,189,255,0.82));
  border-color:rgba(120,220,255,0.42);
  color:#fff;
  box-shadow:0 8px 22px rgba(0,140,255,0.22);
}

.fh-mobile-auth-btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,140,255,0.28);
}

.fh-mobile-auth-btn.secondary{
  background:rgba(255,255,255,0.04);
  border-color:rgba(121,216,255,0.20);
}

.fh-mobile-auth-btn.secondary:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  background:rgba(83,168,255,0.10);
}

.fh-mobile-auth-btn.danger{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,112,112,0.24);
  color:#ffe8e8;
}

.fh-mobile-auth-btn.danger:hover{
  transform:translateY(-1px);
  background:rgba(255,98,98,0.10);
  border-color:rgba(255,98,98,0.40);
}

.fh-mobile-user-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.fh-mobile-user-top{
  padding:12px 12px 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
}

.fh-mobile-user-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:#79d8ff;
  background:rgba(121,216,255,0.10);
  border:1px solid rgba(121,216,255,0.18);
  margin-bottom:8px;
}

.fh-mobile-user-name{
  font-size:16px;
  font-weight:800;
  color:#f5fbff;
  margin-bottom:4px;
  word-break:break-all;
}

.fh-mobile-user-point{
  font-size:12px;
  font-weight:700;
  color:#a9dcff;
}



/* =========================================
   MOBILE: 상단 헤더에서는 로그인 영역 숨김
   로그인 정보는 드로어 안에서만 표시
========================================= */
@media (max-width: 960px){
  .desktop-auth,
  .header-auth,
  .header-auth.desktop-auth{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .header-right{
    margin-left:auto;
    gap:8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LATEST DISCUSSION BOARD
═══════════════════════════════════════════════════════════════ */
#sec-latest-board{
  background:var(--bg1);
  padding-top:100px;
  padding-bottom:100px;
  overflow:hidden;
}

.latest-board-wrap{
  position:relative;
}

.latest-board-track{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

/* 카드 */
.latest-board-card{
  min-width:0;
  background:
    linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
  border:1px solid var(--brd0);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.02) inset;
}

.latest-board-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.8;
}

.latest-board-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent-dim2);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.16),
    0 0 0 1px var(--accent-dim);
}

/* 헤더 */
.latest-board-head{
  padding:18px 18px 14px;
  border-bottom:1px solid var(--brd0);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.latest-board-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  margin-bottom:10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--accent);
  background:var(--accent-dim);
  border:1px solid var(--accent-dim2);
}

.latest-board-title{
  font-size:18px;
  font-weight:800;
  line-height:1.3;
  color:var(--txt0);
  margin-bottom:10px;
  letter-spacing:-0.02em;
}

.latest-board-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  color:var(--txt0);
  border:1px solid var(--brd2);
  background:var(--bg3);
  transition:all .18s ease;
}

.latest-board-more:hover{
  border-color:var(--accent);
  background:var(--accent-dim);
  color:var(--txt0);
}

/* 리스트 */
.latest-post-list{
  padding:8px 16px 12px;
}

.latest-post-item{
  border-bottom:1px solid var(--brd0);
}

.latest-post-item:last-child{
  border-bottom:none;
}

.latest-post-link{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 4px;
  transition:background .15s ease;
  border-radius:10px;
}

.latest-post-link:hover{
  background:rgba(255,255,255,0.02);
}

.latest-post-subject{
  display:block;
  font-size:14px;
  line-height:1.55;
  font-weight:600;
  color:var(--txt0);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .15s ease;
}

.latest-post-link:hover .latest-post-subject{
  color:var(--accent);
}

.latest-post-meta{
  display:block;
  font-size:12px;
  line-height:1;
  color:var(--txt2);
}

/* PC 4열 유지 */
@media (max-width: 1200px){
  .latest-board-title{
    font-size:17px;
  }

  .latest-post-subject{
    font-size:13px;
  }
}

/* 모바일 가로 스와이프 */
@media (max-width: 960px){
  #sec-latest-board{
    padding-left:0;
    padding-right:0;
  }

  #sec-latest-board .corp-inner{
    max-width:100%;
  }

  #sec-latest-board .sec-eyebrow,
  #sec-latest-board .sec-title,
  #sec-latest-board .sec-lead{
    padding-left:20px;
    padding-right:20px;
  }

  .latest-board-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:6px 20px 10px;
  }

  .latest-board-wrap::-webkit-scrollbar{
    display:none;
  }

  .latest-board-track{
    display:flex;
    gap:14px;
    width:max-content;
  }

  .latest-board-card{
    width:min(84vw, 340px);
    flex:0 0 auto;
    scroll-snap-align:start;
  }
}

/* 더 작은 모바일 */
@media (max-width: 560px){
  .latest-board-card{
    width:86vw;
  }

  .latest-board-head{
    padding:16px 16px 13px;
  }

  .latest-post-list{
    padding:6px 14px 10px;
  }

  .latest-post-subject{
    font-size:13px;
  }

  .latest-post-meta{
    font-size:11px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AI CFD LIVE BRIEFING
═══════════════════════════════════════════════════════════════ */
#sec-ai-ticker{
  background:var(--bg0);
  padding-top:90px;
  padding-bottom:90px;
  overflow:hidden;
}

.ai-live-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.ai-ticker-main-title{
  margin-bottom:0 !important;
}

.ai-live-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--txt0);
  border:1px solid rgba(255, 80, 80, 0.28);
  background:linear-gradient(180deg, rgba(255,90,90,0.14), rgba(255,90,90,0.06));
  box-shadow:0 0 18px rgba(255, 80, 80, 0.10);
}

.ai-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff5757;
  box-shadow:0 0 0 0 rgba(255,87,87,0.55);
  animation:aiLivePulse 1.4s infinite;
}

@keyframes aiLivePulse{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,87,87,0.55);
  }
  70%{
    transform:scale(1.08);
    box-shadow:0 0 0 10px rgba(255,87,87,0);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,87,87,0);
  }
}

.ai-ticker-wrap{
  position:relative;
}

.ai-ticker-mask{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--brd1);
  background:linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
  padding:18px;
}

.ai-ticker-mask::before,
.ai-ticker-mask::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  pointer-events:none;
  z-index:2;
}

.ai-ticker-mask::before{
  left:0;
  background:linear-gradient(90deg, var(--bg1) 0%, rgba(0,0,0,0) 100%);
}

.ai-ticker-mask::after{
  right:0;
  background:linear-gradient(270deg, var(--bg1) 0%, rgba(0,0,0,0) 100%);
}

.ai-ticker-track{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  min-width:100%;
  animation:aiTickerFlow 55s linear infinite;
}

.ai-ticker-wrap:hover .ai-ticker-track{
  animation-play-state:paused;
}

@keyframes aiTickerFlow{
  from{ transform:translateX(0); }
  to{ transform:translateX(-32%); }
}

.ai-ticker-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--brd0);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.03), transparent 56%),
    linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.02);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .4s ease;
}

.ai-ticker-item:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dim2);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.14),
    0 0 0 1px var(--accent-dim);
}

.ai-ticker-item.up{
  border-color:rgba(40, 190, 110, 0.18);
}

.ai-ticker-item.down{
  border-color:rgba(220, 80, 80, 0.16);
}

.ai-ticker-item.leaving{
  opacity:0;
  transform:translateX(40px) scale(.96);
}

.ai-ticker-item.entering{
  opacity:0;
  transform:translateX(-40px) scale(.96);
}

.ai-ticker-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--accent);
  background:var(--accent-dim);
  border:1px solid var(--accent-dim2);
  flex-shrink:0;
}

.ai-ticker-symbol{
  font-size:14px;
  font-weight:800;
  color:var(--txt0);
  letter-spacing:-0.02em;
}

.ai-ticker-direction{
  font-size:13px;
  line-height:1;
}

.ai-ticker-percent{
  font-size:17px;
  font-weight:900;
  letter-spacing:-0.02em;
}

.ai-ticker-item.up .ai-ticker-percent{
  color:#22b36a;
}

.ai-ticker-item.down .ai-ticker-percent{
  color:#d45454;
}

.ai-ticker-money{
  font-size:12px;
  font-weight:700;
  color:var(--txt1);
  opacity:.9;
}

.ai-ticker-comment{
  font-size:13px;
  color:var(--txt1);
  white-space:nowrap;
}

@media (max-width: 1200px){
  .ai-ticker-track{
    animation-duration:60s;
  }
}

@media (max-width: 960px){
  #sec-ai-ticker{
    padding-top:72px;
    padding-bottom:72px;
  }

  .ai-ticker-mask{
    padding:14px;
    border-radius:18px;
  }

  .ai-ticker-track{
    gap:12px;
    animation-duration:65s;
  }

  .ai-ticker-item{
    padding:12px 14px;
    gap:8px;
    border-radius:14px;
  }

  .ai-ticker-symbol{
    font-size:13px;
  }

  .ai-ticker-percent{
    font-size:15px;
  }

  .ai-ticker-money{
    font-size:11px;
  }

  .ai-ticker-comment{
    font-size:12px;
  }

  .ai-ticker-mask::before,
  .ai-ticker-mask::after{
    width:42px;
  }
}

@media (max-width: 560px){
  .ai-live-title-row{
    gap:10px;
  }

  .ai-live-badge{
    min-height:30px;
    padding:0 12px;
    font-size:11px;
  }

  .ai-ticker-mask{
    padding:12px;
  }

  .ai-ticker-item{
    padding:10px 12px;
    gap:7px;
  }

  .ai-ticker-label{
    font-size:9px;
    padding:0 8px;
  }

  .ai-ticker-symbol{
    font-size:12px;
  }

  .ai-ticker-percent{
    font-size:14px;
  }

  .ai-ticker-money{
    font-size:10px;
  }

  .ai-ticker-comment{
    font-size:11px;
  }
}

/* ===============================
   LED GLOW CARD (FINAL CLEAN)
=============================== */

/* 카드 기본 */
.fh-broker-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border-radius:26px;
  overflow:hidden;
  z-index:1;
  transition:.35s;
  border:1px solid rgba(255,255,255,0.06);
}

/* 다크모드 대응 */
body.dark-mode .fh-broker-card,
html.dark-mode body .fh-broker-card{
  background:linear-gradient(180deg, rgba(17,27,39,.88), rgba(17,27,39,.76));
}

/* 🔥 LED 외곽 glow */
.fh-broker-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:28px;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(0,180,255,0.35),
    rgba(0,120,255,0.65),
    rgba(0,180,255,0.35),
    transparent
  );

  background-size:200% 200%;
  opacity:0.45;
  filter:blur(6px);
  z-index:-1;
  transition:.4s ease;
}

/* 🔥 내부 라인 */
.fh-broker-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.06);
  pointer-events:none;
}

/* hover 효과 */
.fh-broker-card:hover{
  transform:translateY(-8px) scale(1.015);
}

/* hover 시 LED 강화 + 흐름 */
.fh-broker-card:hover::before{
  opacity:0.9;
  filter:blur(10px);
  animation:ledFlow 3s linear infinite;
}

/* 🔥 흐르는 애니메이션 */
@keyframes ledFlow{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* 배너 */
.fh-banner img{
  width:100%;
  display:block;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

/* 카드 내부 */
.fh-card-body{
  padding:22px;
}