/* ─────────────────────────────────────────────
   고객용 공개 페이지 — 홍보 사이트
   딥그린 + 크림 톤. 골프장의 잔디·차분함을 의도했다.
   모바일에서 대부분 보므로 모바일 우선.
   ───────────────────────────────────────────── */
:root{
  --ink:#0f1b16;
  --deep:#0b3d2e;        /* 헤더 딥그린 */
  --deep2:#125c44;
  --grn:#0f766e;
  --gold:#c8a45c;        /* 포인트 */
  --cream:#faf8f3;
  --card:#ffffff;
  --sub:#5f6b66;
  --dim:#9aa5a0;
  --line:#e8e5dd;
  --join:#0369a1;
  --joinbg:#e8f4fb;
  --trans:#7c3aed;
  --transbg:#f4ecff;
  --barh:124px;          /* 하단 문의 바 높이 (버튼 2줄) */
  --hot:#dc2626;
  --kko:#FAE100;
  --kkot:#3C1E1E;
  --sh:0 1px 3px rgba(15,27,22,.05),0 6px 18px rgba(15,27,22,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',
    'Noto Sans KR',sans-serif;
  font-size:15px;line-height:1.6;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  /* 하단 고정 바 높이만큼 비워 둔다. 바가 2줄이 되어 92px 로는 푸터가 가렸다.
     ★ --barh 를 유일한 기준으로 둔다 (2026-09-01) */
  padding-bottom:calc(var(--barh) + 18px);
}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ── 헤더 ── */
/* 초기 상태: 배경을 숨기고 배너 로드를 기다린다.
   배너가 있으면 .has-banner 가 붙고, 없으면 .no-banner 가 붙어 기본 배경을 되살린다.
   이렇게 해야 로딩 시 기존 SVG 가 0.5초 깜빡이는 현상이 사라진다. (2026-09-05) */
.hd{position:relative;overflow:hidden;color:#fff;padding:26px 0 30px;
  background:#0b3d2e}    /* 로딩 중엔 무채색 배경만 */
.hd.no-banner{background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 100%)}
.hd-bg{position:absolute;inset:0;opacity:0;pointer-events:none;
  background-image:radial-gradient(circle at 88% 8%,#fff 0,transparent 42%),
    radial-gradient(circle at 12% 92%,var(--gold) 0,transparent 38%)}
/* 배너가 없는 회사만 기존 장식을 보여준다 */
.hd.no-banner .hd-bg{opacity:.14}
.hd-in{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.tagline{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.brand h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.2}
.brand p{margin:5px 0 0;font-size:13px;opacity:.82;font-weight:400}
.hd-stat{flex:0 0 auto;text-align:center;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:9px 15px;
  backdrop-filter:blur(6px)}
.hd-stat b{display:block;font-size:23px;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.hd-stat span{display:block;font-size:10.5px;opacity:.8;margin-top:2px;white-space:nowrap}

/* ── 날짜 바 ── */
.datebar{display:flex;gap:8px;overflow-x:auto;padding:16px 0 6px;margin:0 -16px;
  padding-left:16px;padding-right:16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.datebar::-webkit-scrollbar{display:none}
.datebar button{flex:0 0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:9px 15px;font-size:13.5px;font-weight:800;color:var(--sub);
  cursor:pointer;line-height:1.25;text-align:center;transition:all .14s;box-shadow:var(--sh)}
.datebar button span{display:block;font-size:10.5px;font-weight:600;opacity:.7;margin-top:2px}
.datebar button.on{background:var(--deep);border-color:var(--deep);color:#fff;
  box-shadow:0 4px 14px rgba(11,61,46,.24)}
.datebar button.sat{color:#1d4ed8}
.datebar button.sun{color:#dc2626}
.datebar button.on.sat,.datebar button.on.sun{color:#fff}

/* ── 툴바 ── */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 0 12px;flex-wrap:wrap}
.chips{display:flex;gap:7px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:7px 17px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;
  transition:all .14s}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cnt{font-size:12.5px;color:var(--dim);font-weight:600}

/* ── 날짜 그룹 ── */
.dgrp{margin-bottom:26px;scroll-margin-top:14px}
.dhead{display:flex;align-items:center;gap:8px;margin:0 0 11px;padding:0 3px}
.dhead b{font-size:17px;font-weight:800;letter-spacing:-.4px}
.dhead .dow{font-size:13.5px;font-weight:700;color:var(--sub)}
.dhead .dow.sat{color:#1d4ed8}
.dhead .dow.sun{color:#dc2626}
.dhead .dd{font-size:10.5px;font-weight:800;background:var(--deep);color:#fff;
  padding:3px 9px;border-radius:9px;letter-spacing:.2px}
.dhead .n{margin-left:auto;font-size:11.5px;color:var(--dim);font-weight:600}

/* ── 타임 카드 ── */
.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:15px 16px;margin-bottom:10px;
  display:flex;gap:14px;align-items:center;box-shadow:var(--sh);
  transition:box-shadow .16s,transform .16s;overflow:hidden}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--join)}
.card.t-trans::before{background:var(--trans)}
.card:hover{box-shadow:0 3px 6px rgba(15,27,22,.06),0 12px 28px rgba(15,27,22,.09);
  transform:translateY(-1px)}
.card.hot{border-color:#f3c4c4}
.card.hot::before{background:var(--hot)}

.tm{flex:0 0 auto;text-align:center;min-width:62px}
.tm b{display:block;font-size:20px;font-weight:800;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.tm .badge{display:inline-block;margin-top:5px;font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:8px;white-space:nowrap;letter-spacing:.2px}
.badge.join{background:var(--joinbg);color:var(--join)}
.badge.trans{background:var(--transbg);color:var(--trans)}

.info{flex:1 1 auto;min-width:0}
.info .club{font-size:15.5px;font-weight:800;letter-spacing:-.35px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info .sub{font-size:12px;color:var(--sub);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info .note{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;
  background:#fdf6e7;color:#96702a;padding:3px 9px;border-radius:8px;
  border:1px solid #f0e3c4}

.right{flex:0 0 auto;text-align:right}
.fee{font-size:17px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;line-height:1.2}
.fee small{font-size:11px;font-weight:600;color:var(--dim);margin-left:1px}
.rem{margin-top:5px;font-size:11.5px;font-weight:800;white-space:nowrap}
.rem.few{color:var(--hot)}
.rem.ok{color:var(--grn)}
.pay{display:block;margin-top:3px;font-size:10.5px;color:var(--dim);font-weight:600}

/* 카드별 문의 버튼 */
.cbtns{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.cbtn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  background:#fff;border-radius:9px;padding:5px 10px;font-size:11.5px;font-weight:700;
  color:var(--sub);cursor:pointer;white-space:nowrap;transition:all .13s}
.cbtn:hover{border-color:var(--dim);color:var(--ink)}
.cbtn svg{width:12px;height:12px;fill:currentColor}
.cbtn.k{background:var(--kko);border-color:#e6cf00;color:var(--kkot)}

/* ── 안내 ── */
.guide{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;margin:8px 0 26px;box-shadow:var(--sh)}
.guide h3{margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:-.2px}
.guide ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--sub);line-height:1.95}
.guide li{padding-left:2px}
.guide b{color:var(--ink)}

/* ── 빈 화면 / 로딩 ── */
.empty{background:var(--card);border:1px dashed var(--line);border-radius:16px;
  padding:50px 22px;text-align:center;color:var(--dim);font-size:13.5px;line-height:1.8}
.empty b{display:block;color:var(--sub);font-size:15.5px;margin-bottom:8px;font-weight:800}
.skel{background:var(--card);border:1px solid var(--line);border-radius:16px;height:86px;
  margin-bottom:10px;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.5}}

/* ── 푸터 ── */
.ft{border-top:1px solid var(--line);padding:20px 0 26px;margin-top:10px;
  font-size:12px;color:var(--sub);text-align:center}
.ft p{margin:2px 0}
.ft-name{font-weight:800;color:var(--ink);font-size:13px}
.ft .dim{color:var(--dim);font-size:11px}

/* ── 하단 고정 문의 바 ── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:9px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(250,248,243,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -3px 18px rgba(15,27,22,.09)}
.bbtn{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:13px;padding:15px 10px;font-size:15px;font-weight:800;
  cursor:pointer;letter-spacing:-.2px;transition:filter .13s,transform .1s}
.bbtn:active{transform:scale(.985)}
.bbtn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.bbtn.kko{background:var(--kko);color:var(--kkot);
  box-shadow:0 3px 12px rgba(250,225,0,.34)}
.bbtn.kko:hover{filter:brightness(.97)}
.bbtn.sms{background:var(--deep);color:#fff;box-shadow:0 3px 12px rgba(11,61,46,.26)}
.bbtn.sms:hover{filter:brightness(1.08)}
/* ── 채널추가 · 골프투어 (2026-09-01) ──
   버튼이 2개 → 4개가 되어 한 줄에 넣으면 글자가 잘린다.
   문의(카톡·문자)를 위 줄에, 부가 링크(채널추가·홈페이지)를 아래 줄에 둔다.
   문의가 주 동작이므로 위에 크게 두고, 아래 줄은 조금 작게. */
.bar{flex-wrap:wrap}
.bar .bbtn.kko,.bar .bbtn.sms{flex:1 1 42%}
.bar .bbtn.add,.bar .bbtn.home{flex:1 1 42%;padding:11px 8px;font-size:13.5px;
  text-decoration:none}
.bar .bbtn.add svg,.bar .bbtn.home svg{width:16px;height:16px}
.bbtn.add{background:#FEF3C7;color:#78350F;border:1px solid #FCD34D;
  box-shadow:0 2px 8px rgba(252,211,77,.28)}
.bbtn.add:hover{filter:brightness(.98)}
.bbtn.home{background:#fff;color:var(--deep);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(15,27,22,.07)}
.bbtn.home:hover{background:#FAFAF7}
/* 아주 좁은 화면(360px 이하)에서는 아래 줄 글자를 더 줄인다 */
@media (max-width:360px){
  .bar .bbtn.add,.bar .bbtn.home{font-size:12.5px;padding:10px 6px;gap:5px}
  .bar .bbtn.kko,.bar .bbtn.sms{font-size:14px;padding:13px 8px}
  :root{--barh:112px}
}

/* ── 문자 문의 시트 ── */
.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;
  justify-content:center}
.sheet.hidden{display:none}
.sheet-dim{position:absolute;inset:0;background:rgba(15,27,22,.5);
  animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-box{position:relative;width:100%;max-width:460px;background:#fff;
  border-radius:20px 20px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(0,0,0,.26);animation:up .22s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheet-hd b{font-size:17px;font-weight:800}
.sheet-hd button{background:none;border:none;font-size:26px;line-height:1;color:var(--dim);
  cursor:pointer;padding:0 4px}
.sheet-desc{margin:0 0 14px;font-size:13px;color:var(--sub);line-height:1.65}
.telbox{display:flex;align-items:center;gap:10px;background:var(--cream);
  border:1px solid var(--line);border-radius:13px;padding:14px 15px}
.telbox span{flex:1 1 auto;font-size:21px;font-weight:800;letter-spacing:.4px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.telbox button{flex:0 0 auto;background:var(--deep);color:#fff;border:none;
  border-radius:10px;padding:11px 19px;font-size:14px;font-weight:800;cursor:pointer;
  transition:filter .13s}
.telbox button:hover{filter:brightness(1.1)}
.telbox button.done{background:var(--grn)}
.sheet-hint{margin:11px 0 0;font-size:12px;color:var(--dim);line-height:1.7;min-height:20px}
.sheet-call{display:block;margin-top:14px;text-align:center;border:1px solid var(--line);
  border-radius:12px;padding:13px;font-size:14px;font-weight:700;color:var(--sub)}
.sheet-call:hover{background:var(--cream)}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;
  padding:12px 20px;border-radius:24px;box-shadow:0 6px 22px rgba(0,0,0,.28);
  animation:tin .2s ease;white-space:nowrap;max-width:90vw}
.toast.hidden{display:none}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── 좁은 화면 ── */
@media (max-width:430px){
  .brand h1{font-size:22px}
  .brand p{font-size:12px}
  .hd-stat{padding:8px 12px}
  .hd-stat b{font-size:20px}
  .card{padding:13px;gap:11px}
  .tm{min-width:54px}
  .tm b{font-size:18px}
  .info .club{font-size:14.5px}
  .fee{font-size:15.5px}
  .bbtn{font-size:14px;padding:14px 8px}
  .telbox span{font-size:19px}
}
@media (max-width:360px){
  .hd-stat{display:none}
  /* ★ 좁은 화면에서도 카드 버튼은 반드시 보여야 한다.
     타임마다 문의처(등록 회사 채널·담당 번호)가 다르므로
     하단 고정 바(회사 대표번호)로는 대체할 수 없다.
     → 숨기지 않고 크기만 줄인다. */
  .cbtns{gap:5px;margin-top:7px}
  .cbtn{padding:5px 8px;font-size:11px;gap:3px}
  .cbtn svg{width:11px;height:11px}
}
/* 아주 좁은 기기(320px 등)에서도 두 버튼이 한 줄에 들어가게 */
@media (max-width:320px){
  .cbtn{padding:5px 7px;font-size:10.5px}
}

/* ── 헤더 골프 일러스트 ──
   사진을 쓰면 용량·저작권 문제가 생기고 화면 폭마다 잘리는 위치가 달라진다.
   SVG 로 그려 어떤 해상도에서도 선명하고, 색은 테마를 따른다. */
.hd-art{position:absolute;right:0;bottom:0;height:100%;width:min(62%,430px);opacity:0;
  /* 배너 없을 때만 보인다 */
  pointer-events:none;opacity:.9}
.hd-art .a-hill2{fill:rgba(255,255,255,.055)}
.hd-art .a-hill1{fill:rgba(255,255,255,.085)}
.hd-art .a-flag rect{fill:rgba(255,255,255,.5)}
.hd-art .a-flag path{fill:var(--gold);opacity:.92}
.hd-art .a-cup{fill:rgba(0,0,0,.22)}
.hd-art .a-ball circle{fill:#fff;opacity:.96}
.hd-art .a-dim circle{fill:rgba(11,61,46,.28)}
.hd-art .a-club path{fill:none;stroke:rgba(255,255,255,.42);stroke-width:2.4;
  stroke-linecap:round}
.hd-art .a-club path:last-child{fill:rgba(255,255,255,.42);stroke:none}
/* 깃발이 살짝 나부끼게 */
.hd-art .a-flag path{transform-origin:302px 62px;animation:wave 3.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.86)}}
/* 텍스트가 일러스트에 묻히지 않도록 */
.hd-in{position:relative;z-index:2}
@media (max-width:430px){
  .hd-art{width:70%;opacity:.72}
}

/* ── 새로고침 / 확인 시각 ── */
.tr{display:flex;align-items:center;gap:8px;margin-left:auto}
.upd{font-size:11px;color:var(--dim);font-weight:600;white-space:nowrap}
.rfr{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--line);background:var(--card);
  border-radius:10px;cursor:pointer;color:var(--sub);padding:0;
  box-shadow:var(--sh);transition:all .14s;flex:0 0 auto}
.rfr:hover{color:var(--ink);border-color:var(--dim)}
.rfr:active{transform:scale(.94)}
.rfr svg{width:15px;height:15px;fill:currentColor}
/* 갱신 중에는 아이콘이 회전한다 */
.rfr.spin svg{animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── 회사 로고 ──
   로고 파일은 원본 그대로 쓴다(색을 바꾸면 브랜드색이 죽거나 형태가 사라진다).
   어두운 로고가 딥그린에 묻히지 않게 로고 뒤에만 아주 옅은 흰 번짐을 둔다.
   판(box)이 아니라 로고 실루엣을 따라가는 번짐이라
   헤더의 그린·깃대 일러스트를 가리지 않는다. */
.logo{display:block;max-height:58px;max-width:min(64vw,260px);width:auto;
  object-fit:contain;margin-bottom:10px;
  filter:drop-shadow(0 0 2px rgba(255,255,255,1))
         drop-shadow(0 0 4px rgba(255,255,255,.95))
         drop-shadow(0 0 10px rgba(255,255,255,.7))
         drop-shadow(0 1px 2px rgba(0,0,0,.28))}
/* 로고마다 비율·색이 달라 개별 조정한다. JS 가 data-co 를 붙인다.
   에이온투어: 가로형(약 4.9:1) — 높이를 낮춰야 헤더를 밀지 않는다.
              노란 원 때문에 번짐이 강하면 뿌옇게 보여 약하게 준다. */
.logo[data-co="aiontour"]{
  max-height:42px;max-width:min(76vw,290px);
  /* 글자를 이미 밝게 만들어 두었으므로 흰 번짐은 불필요하다.
     대신 옅은 어두운 그림자로 밝은 배경(그린 상단) 위에서도 윤곽을 살린다. */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.32))}
@media (max-width:430px){
  .logo[data-co="aiontour"]{max-height:36px;max-width:74vw}
}
/* 원본 해상도가 낮은 로고는 확대하면 흐려진다 → 실제 크기 이상으로 키우지 않는다.
   JS 가 이미지 자연 크기를 재서 이 클래스를 붙인다. */
.logo.small{max-height:38px}
.logo.hidden{display:none}
@media (max-width:430px){
  .logo{max-height:50px;max-width:60vw;margin-bottom:9px}
  .logo.small{max-height:33px}
}

/* ── 문의 내용 박스 (문자 시트) ── */
.askbox{background:var(--cream);border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;margin-bottom:11px}
.askbox.hidden{display:none}
.askbox-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px}
.askbox-hd span{font-size:12px;font-weight:800;color:var(--sub)}
.askbox-hd button{background:var(--grn);color:#fff;border:none;border-radius:8px;
  padding:7px 13px;font-size:12.5px;font-weight:800;cursor:pointer;
  transition:filter .13s;flex:0 0 auto}
.askbox-hd button:hover{filter:brightness(1.1)}
.askbox-hd button.done{background:var(--deep)}
#sheet-ask-text{margin:0;font-family:inherit;font-size:12.5px;line-height:1.72;
  color:var(--ink);white-space:pre-wrap;word-break:break-word;
  max-height:190px;overflow-y:auto}

/* 문자 앱 바로 열기 */
.sheet-sms{display:block;margin-top:12px;text-align:center;
  background:var(--deep);color:#fff;border-radius:12px;padding:13px;
  font-size:14.5px;font-weight:800}
.sheet-sms.hidden{display:none}
.sheet-sms:hover{filter:brightness(1.1)}
/* 문자 앱 버튼이 있으면 전화 버튼은 보조로 */
.sheet-sms:not(.hidden) ~ .sheet-call{margin-top:9px}

/* ── 카톡 채팅창 열기 버튼 (카톡 시트) ── */
.sheet-kko{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;background:var(--kko);color:var(--kkot);
  border-radius:12px;padding:14px;font-size:15px;font-weight:800}
.sheet-kko svg{width:19px;height:19px;fill:currentColor}
.sheet-kko:hover{filter:brightness(.96)}

/* ── 금액 구성 (현장 그린피 + 선입) ──
   총액만 보여주면 "현장에서 또 내야 하나?" 문의가 늘어난다.
   무엇을 어디에 내는지 배지로 분리해 보여준다. (2026-08-31) */
.feebd{display:flex;flex-direction:column;gap:3px;align-items:flex-end;margin-top:3px}
.feebd span{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:6px;
  white-space:nowrap;letter-spacing:-.2px}
.fb-on{background:#EAF4EC;color:var(--deep);border:1px solid #CFE4D4}
.fb-bk{background:#FFF6DF;color:#8A6314;border:1px solid #F0DEB0}
@media (max-width:430px){
  .feebd span{font-size:10px;padding:1px 6px}
}

/* ─────────── 고객용 하단 footer (2026-09-05 시현님 요청) ─────────── */
.site-footer{background:#f4f5f7;border-top:2px solid #e5e7eb;
  padding:20px 20px 140px; /* 하단 고정 바(124px) + 여유 */
  color:#6b7280;font-size:12px;line-height:1.65}
.site-footer.hidden{display:none}

/* 이용약관 / 개인정보처리방침 — 중앙 정렬 */
.ft-links{display:flex;align-items:center;justify-content:center;
  gap:8px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid #e5e7eb;font-size:13px;font-weight:600}
.ft-links a{color:#374151;text-decoration:none;padding:4px 2px}
.ft-links a:hover{text-decoration:underline;color:#111}
.ft-links .ft-priv{color:#111827;font-weight:800}
.ft-sep{color:#d1d5db;font-weight:300}

/* 회사 정보 — 항목별 한 줄씩 */
.ft-biz{margin-bottom:14px;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.ft-biz .ft-item{color:#6b7280;font-size:11.5px;line-height:1.6}
.ft-biz .ft-item b{color:#374151;font-weight:700;margin-right:4px}

/* Copyright */
.ft-copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 12px;
  padding-top:10px;border-top:1px solid #e5e7eb;color:#9ca3af;font-size:11px}
.ft-pow a{color:#9ca3af;text-decoration:none}
.ft-pow a:hover{text-decoration:underline;color:#6b7280}

/* ─────────── 롤링 배너 — 에이온투어 헤더 (2026-09-05 시현님 요청) ─────────── */
/* 배너가 활성화되면 기존 그라데이션 배경을 배너 이미지가 대체한다 */
.hd.has-banner{padding:0;background:none}
.hd.has-banner .hd-bg,.hd.has-banner .hd-art{display:none}
.hd.has-banner .hd-in{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  padding:16px 20px;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%)}

/* ── 슬라이드 컨테이너 ── */
/* 배너 비율을 디바이스별 이미지에 맞춘다 — 잘림 없이 전체가 보인다.
   PC 1440×480(3:1) / 태블릿 1024×576(16:9) / 모바일 780×332(약 2.35:1) */
.hd-banner{position:relative;width:100%;overflow:hidden;
  aspect-ratio:3/1;             /* PC 기본 */
  background:#0b3d2e}
.hd-banner.hidden{display:none}
.hd-slides{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hd-slide{flex:0 0 100%;height:100%;object-fit:contain;object-position:center;
  display:block;width:100%;user-select:none;pointer-events:none}

/* ── 인디케이터 ── */
.hd-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:5}
.hd-dot{width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.45);border:none;cursor:pointer;padding:0;
  transition:background .2s,transform .2s}
.hd-dot.on{background:#fff;transform:scale(1.25)}

/* ── 이전/다음 버튼 ── */
.hd-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  background:rgba(0,0,0,.28);border:none;color:#fff;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s;opacity:.7}
.hd-nav:hover{background:rgba(0,0,0,.5);opacity:1}
.hd-prev{left:10px}
.hd-next{right:10px}

/* ── 헤더 텍스트: 배너 위에 띄울 때 ── */
.hd.has-banner .tagline{color:#fde047}
.hd.has-banner .brand h1{text-shadow:0 1px 4px rgba(0,0,0,.5)}
.hd.has-banner .hd-stat{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.25)}

/* ── 반응형 ── */
@media (max-width:900px){
  /* 태블릿: 16:9 비율 */
  .hd-banner{aspect-ratio:16/9}
}
@media (max-width:600px){
  /* 모바일: 2.35:1 비율 */
  .hd-banner{aspect-ratio:780/332}
  .hd.has-banner .hd-in{padding:12px 14px}
  .hd-nav{width:28px;height:28px;font-size:17px}
}

.hd.no-banner .hd-art{opacity:1}