/* =========================================================
   2026 천안아산 나우가구페어 (NOW FAIR) — 오버라이드 스타일
   version1 style.css 위에 로드되어 색/네비/버튼만 보정
   ========================================================= */
:root{
  --nf-accent:#ef6c1a;     /* 사전등록 강조 컬러 */
  --nf-accent-d:#d65d10;
}

/* ---------- 텍스트 로고 ---------- */
.brand-text{ font-size:22px; font-weight:900; letter-spacing:.01em; line-height:1; }
.brand-text span{ color:var(--nf-accent); }
.site-header .brand-text{ color:#fff; transition:color .35s var(--ease); }
.site-header.scrolled .brand-text{ color:var(--ink); }
.site-footer .brand-text.foot{ color:var(--ink); }

/* ---------- primary 버튼(사전등록 강조) ---------- */
.btn.primary{ background:var(--nf-accent); color:#fff; }
.btn.primary:hover{ background:var(--nf-accent-d); }

/* 헤더 우측 버튼(작게) */
.btn-nav{ font-size:14px; padding:11px 20px; }
@media (max-width:920px){ .btn-nav{ display:none; } }

/* ---------- 드롭다운 네비 ---------- */
.nav-menu .nav-item{ position:relative; display:flex; align-items:center; }
.nav-menu .nav-item > a{
  font-size:14px; font-weight:600; color:var(--ink-2);
  position:relative; transition:color .2s var(--ease);
}
.nav-menu .nav-item > a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px;
  background:var(--ink); transition:width .3s var(--ease);
}
.nav-menu .nav-item:hover > a{ color:var(--ink); }
.nav-menu .nav-item:hover > a::after{ width:100%; }
.nav-menu .sub{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:200px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:8px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease); z-index:60;
}
.nav-menu .nav-item:hover .sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-menu .sub::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-menu .sub a{
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  padding:10px 14px; border-radius:9px; transition:background .18s, color .18s;
}
.nav-menu .sub a::after{ display:none; }
.nav-menu .sub a:hover{ background:var(--surface-2); color:var(--ink); }

/* ---------- 히어로 개최장소 라인 ---------- */
.expo-place{ font-size:16px; color:#fff; font-weight:500; margin-top:10px; opacity:.92; }
@media (max-width:920px){ .expo-place{ font-size:13px; } }

/* ---------- 모바일: 드롭다운 펼침 ---------- */
@media (max-width:920px){
  .nav-menu .nav-item{ flex-direction:column; align-items:flex-start; gap:2px; }
  .nav-menu .sub{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:none; background:transparent;
    padding:2px 0 6px 12px; min-width:0;
  }
  .nav-menu .sub::before{ display:none; }
  .nav-menu .sub a{ padding:6px 0; }
}

/* =========================================================
   프리미엄 등장 애니메이션 (라이브러리 없이 강화)
   - 살짝 튕기는 스프링 이징 + 블러 인 → "쫀득·고급" 느낌
   - 토글(.in)은 기존 main.js의 IntersectionObserver가 처리
   ========================================================= */
:root{ --nf-ease:cubic-bezier(.21,1.15,.34,1); }   /* 살짝 오버슈트 */

[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .8s var(--nf-ease),
    transform 1s var(--nf-ease);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
[data-reveal="left"]{ transform:translateX(-44px); }
[data-reveal="right"]{ transform:translateX(44px); }
[data-reveal="scale"]{ transform:scale(.93); }
[data-reveal="fade"]{ transform:none; }
[data-reveal].in{ opacity:1; transform:none; }

/* 히어로 타이틀 박스: 등장 시 더 또렷한 스프링 */
.hero-top h2[data-reveal]{ transform:translateY(40px) scale(.97); }
.hero-top h2[data-reveal].in{ transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
}

/* =========================================================
   공용 안내 팝업 (register.php 중복 접수 등)
   ========================================================= */
.nf-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(16,18,21,.55); padding:20px; }
.nf-modal .box{ background:#fff; border-radius:18px; max-width:380px; width:100%; padding:30px 26px; text-align:center; box-shadow:var(--shadow-lg); }
.nf-modal .ic{ width:52px; height:52px; border-radius:50%; background:#fdf3da; color:#c98a00; display:grid; place-items:center; margin:0 auto 16px; font-size:26px; }
.nf-modal h3{ font-size:18px; margin:0 0 8px; }
.nf-modal p{ font-size:14px; color:var(--muted); margin:0 0 22px; line-height:1.6; }
.nf-modal .btn-sm{ width:100%; justify-content:center; }

/* =========================================================
   서브페이지 (박람회 소개 / 관람안내 등) — 메인 톤 계승
   ========================================================= */
/* 상단 히어로 밴드 (투명 헤더 아래로 끌어올림 = 홈 hero와 동일 원리) */
.page-hero{
  position:relative; margin-top:-76px; overflow:hidden; color:#fff;
  background:
    linear-gradient(120deg, rgba(21,23,27,.90) 0%, rgba(30,34,41,.80) 58%, rgba(16,18,22,.92) 100%),
    url("../images/cta-bg.png") center/cover no-repeat #16181c;
  padding:clamp(122px,17vh,182px) 0 clamp(46px,6vw,68px);
}
.page-hero::after{ content:""; position:absolute; right:-8%; top:-40%; width:56%; height:180%;
  background:radial-gradient(circle at center, rgba(239,108,26,.16), transparent 60%); pointer-events:none; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .crumb{ font-size:12.5px; color:#9aa1a9; font-weight:600; margin-bottom:14px; }
.page-hero .crumb a{ color:#9aa1a9; }
.page-hero .crumb a:hover{ color:#fff; }
.page-hero .eyebrow{ text-align:left; margin:0 0 12px; color:var(--nf-accent); font-size:14px; }
.page-hero h1{ font-size:clamp(30px,5vw,54px); font-weight:800; letter-spacing:-.03em; line-height:1.08; color:#fff; }
.page-hero .lead{ margin-top:16px; max-width:660px; color:#c7ccd2; font-size:clamp(15px,1.8vw,17px); line-height:1.7; }

/* 콘텐츠 섹션 공통 */
.nf-section{ padding:clamp(56px,8vw,98px) 0; }
.nf-section.alt{ background:var(--surface); }
.sec-head{ margin-bottom:clamp(24px,4vw,42px); }
.sec-head .eyebrow{ text-align:left; margin:0 0 10px; color:var(--muted); font-size:13px; }
.sec-head h2{ font-size:clamp(24px,3.4vw,38px); font-weight:800; letter-spacing:-.025em; line-height:1.18; }
.sec-head p{ margin-top:12px; color:var(--ink-2); font-size:15px; max-width:660px; line-height:1.7; }

/* 2단 레이아웃 */
.two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,48px); align-items:start; }
.two-col .txt p{ color:var(--ink-2); font-size:15.5px; line-height:1.8; margin:0 0 12px; }
.two-col .txt .slogan{ font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-bottom:18px; line-height:1.35; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }

/* 정보 테이블 */
.nf-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.nf-table th, .nf-table td{ text-align:left; padding:15px 20px; border-bottom:1px solid var(--line); font-size:15px; vertical-align:top; line-height:1.6; }
.nf-table tr:last-child th, .nf-table tr:last-child td{ border-bottom:none; }
.nf-table th{ width:154px; background:var(--surface-2); color:var(--ink-2); font-weight:700; white-space:nowrap; }
.nf-table td b{ font-weight:800; }
@media (max-width:600px){ .nf-table th{ width:104px; font-size:13px; } .nf-table td{ font-size:14px; } }

/* 스텝 (입장 절차) */
.nf-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.nf-step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow-sm); }
.nf-step .n{ width:34px; height:34px; border-radius:10px; background:var(--ink); color:#fff; font-weight:800; display:grid; place-items:center; font-size:15px; }
.nf-step h4{ margin:14px 0 6px; font-size:16px; font-weight:800; }
.nf-step p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:0; }

/* 요금/카드 그리드 */
.nf-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.nf-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.nf-card .tag{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.nf-card .big{ font-size:clamp(22px,3vw,28px); font-weight:800; margin-top:8px; letter-spacing:-.02em; }
.nf-card p{ font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.6; }
.nf-note{ margin-top:16px; font-size:13.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 18px; line-height:1.7; }

/* 준비중 placeholder */
.nf-ph{ border:1.5px dashed var(--line-2); border-radius:var(--radius); background:var(--surface-2);
  display:grid; place-items:center; text-align:center; color:var(--muted); padding:52px 24px; min-height:220px; }
.nf-ph .t{ font-weight:800; color:var(--ink-2); font-size:15px; }
.nf-ph .s{ font-size:13px; margin-top:6px; }
.poster-ph{ min-height:340px; }

/* 지도 길찾기 버튼 (네이버 / 카카오 / 티맵) */
.map-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.map-btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:12px;
  font-size:14px; font-weight:800; text-decoration:none; border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.map-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.map-btn .ic{ width:21px; height:21px; border-radius:6px; display:grid; place-items:center;
  font-size:12px; font-weight:900; flex:0 0 auto; }
.map-btn.naver{ background:#03c75a; color:#fff; }
.map-btn.naver .ic{ background:#fff; color:#03c75a; }
.map-btn.kakao{ background:#fee500; color:#1c1c1c; }
.map-btn.kakao .ic{ background:#3c1e1e; color:#fee500; }
.map-btn.tmap{ background:#1b64da; color:#fff; }
.map-btn.tmap .ic{ background:#fff; color:#1b64da; }

/* 참가 절차 스텝 아이콘 */
.nf-step-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nf-step .ic{ width:44px; height:44px; border-radius:12px; background:rgba(239,108,26,.12); color:var(--nf-accent); display:grid; place-items:center; }
.nf-step .ic svg{ width:23px; height:23px; }
.nf-step .n{ width:26px; height:26px; border-radius:8px; font-size:13px; }

/* 스텝 아이콘 — 종처럼 순차로 살짝 흔들림 (쫀득) */
.nf-step .ic{ transform-origin:50% 12%; animation:nf-bell 3.6s var(--ease) infinite; }
.nf-steps .nf-step:nth-child(1) .ic{ animation-delay:0s; }
.nf-steps .nf-step:nth-child(2) .ic{ animation-delay:.16s; }
.nf-steps .nf-step:nth-child(3) .ic{ animation-delay:.32s; }
.nf-steps .nf-step:nth-child(4) .ic{ animation-delay:.48s; }
.nf-steps .nf-step:nth-child(5) .ic{ animation-delay:.64s; }
@keyframes nf-bell{
  0%   { transform:rotate(0); }
  4%   { transform:rotate(-14deg); }
  9%   { transform:rotate(11deg); }
  13%  { transform:rotate(-8deg); }
  17%  { transform:rotate(5deg); }
  21%  { transform:rotate(-2deg); }
  25%  { transform:rotate(0); }
  100% { transform:rotate(0); }
}
@media (prefers-reduced-motion: reduce){ .nf-step .ic{ animation:none; } }

/* 부스 종류 레이아웃 (카드 + 우측 안내) */
.booth-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:24px; align-items:stretch; }
.grp + .grp{ margin-top:22px; }
.grp h3{ font-size:16px; font-weight:800; margin:0 0 12px; }
.grp h3 span{ font-weight:600; font-size:13.5px; color:var(--muted); }
.booth-layout .nf-cards{ grid-template-columns:repeat(2,1fr); }
.booth-guide{
  position:relative; overflow:hidden; border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  background: url("../images/booth-guide-bg.png") center/cover no-repeat fixed;
  background-color:#16181c;   /* 이미지 없을 때 폴백 */
}
.booth-guide h4{ font-size:15px; font-weight:800; margin:0 0 16px; color:#fff; }
.booth-guide ul{ list-style:none; margin:0; padding:0; }
.booth-guide li{ font-size:13.5px; color:rgba(255,255,255,.86); line-height:1.6; padding:9px 0 9px 18px; position:relative; border-top:1px solid rgba(255,255,255,.14); }
.booth-guide li:first-child{ border-top:none; }
.booth-guide li::before{ content:""; position:absolute; left:0; top:16px; width:6px; height:6px; border-radius:50%; background:var(--nf-accent); }
.booth-guide li b{ color:#fff; }
@media(max-width:820px){ .booth-layout{ grid-template-columns:1fr; } .booth-guide{ background-attachment:scroll; min-height:260px; } }

/* 옵션 단가 (좁은 표 + 이미지) */
.opt-layout{ display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:24px; align-items:stretch; }
.opt-img{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:300px; }
.opt-img-note{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:22px 14px 11px;
  font-size:11px; color:rgba(255,255,255,.92); text-align:right; letter-spacing:.01em;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events:none; }
.price-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; align-self:start; }
.price-table thead th{ background:var(--ink); color:#fff; font-size:13px; font-weight:700; padding:12px 16px; text-align:center; letter-spacing:.02em; }
.price-table td{ padding:12px 16px; border-top:1px solid var(--line); font-size:14px; }
.price-table tbody tr:hover{ background:var(--bg-soft); }
.price-table td:first-child{ font-weight:700; color:var(--ink-2); }
.price-table td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
@media(max-width:760px){ .opt-layout{ grid-template-columns:1fr; } .opt-img{ min-height:220px; } }

/* 납입방법 카드 + 계좌 복사 */
.pay-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; max-width:520px; }
.pay-row{ display:flex; justify-content:space-between; gap:16px; padding:16px 22px; border-bottom:1px solid var(--line); font-size:15px; }
.pay-row .k{ color:var(--muted); font-weight:700; }
.pay-row .v{ font-weight:700; }
.pay-acc{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.pay-acc .k{ display:block; font-size:12px; color:var(--muted); font-weight:700; margin-bottom:4px; }
.pay-acc .acc{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.copy-btn{ flex:0 0 auto; border:1px solid var(--ink); background:var(--ink); color:#fff; font-weight:700; font-size:13px; padding:10px 16px; border-radius:10px; cursor:pointer; transition:transform .2s var(--ease), background .2s; }
.copy-btn:hover{ transform:translateY(-1px); }
.copy-btn.done{ background:#19a36a; border-color:#19a36a; }
.pay-note{ padding:14px 22px; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.pay-note b{ font-weight:800; }
.pay-card{ max-width:none; }

/* 납입 2단 (카드 + 유의사항) */
.pay-layout{ display:grid; grid-template-columns:minmax(0,500px) 1fr; gap:28px; align-items:start; }
.pay-side{ padding-top:2px; }
.pay-side h4{ font-size:15px; font-weight:800; margin:0 0 14px; }
.pay-side ul.tick{ list-style:none; margin:0; padding:0; }
.pay-side ul.tick li{ font-size:14px; color:var(--ink-2); line-height:1.6; padding:10px 0 10px 24px; position:relative; border-top:1px solid var(--line); }
.pay-side ul.tick li:first-child{ border-top:none; }
.pay-side ul.tick li::before{ content:"✓"; position:absolute; left:0; top:9px; color:var(--nf-accent); font-weight:900; font-size:13px; }
.pay-side ul.tick li b{ color:var(--ink); }
@media(max-width:820px){ .pay-layout{ grid-template-columns:1fr; } }

/* =========================================================
   부스 참가 신청 폼 (booth-apply.php)
   ========================================================= */
.form-legend{ font-size:15px; font-weight:800; margin:30px 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.form-legend:first-child{ margin-top:0; }
.form-legend small{ font-weight:600; font-size:12.5px; color:var(--muted); margin-left:8px; }

/* 전시품목 동적 카테고리 */
.cat-list{ display:flex; flex-direction:column; gap:10px; }
.cat-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:10px; padding:9px 15px; font-size:14px; font-weight:700; cursor:pointer; background:var(--surface); user-select:none; transition:all .18s var(--ease); }
.cat-toggle:hover{ border-color:var(--ink); }
.cat-toggle input{ position:absolute; opacity:0; }
.cat-toggle:has(input:checked){ border-color:var(--ink); background:var(--ink); color:#fff; }
.cat-sub{ display:none; margin-top:10px; padding:15px 16px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.cat-sub.open{ display:block; }

/* 참가규정 스크롤 박스 */
.rules-box{ max-height:300px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--surface); font-size:12.5px; color:var(--ink-2); line-height:1.75; }
.rules-box h5{ font-size:13px; font-weight:800; color:var(--ink); margin:15px 0 5px; }
.rules-box h5:first-child{ margin-top:0; }
.rules-box p{ margin:0 0 7px; }

/* 파일 업로드 */
.file-input{ display:block; width:100%; font-size:13px; padding:12px 14px; border:1px dashed var(--line-2); border-radius:11px; background:var(--surface); cursor:pointer; color:var(--ink-2); }
.file-hint{ font-size:12px; color:var(--muted); margin-top:6px; }