@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  --brand:#12A5C8;
  --brand-2:#1B5FD0;
  --brand-deep:#0E3E86;
  --grad:linear-gradient(135deg,#25C3E0 0%,#1B6FD8 55%,#1348A8 100%);
  --ink:#16233A;
  --ink-2:#41506B;
  --ink-3:#7A8699;
  --line:#E3E9F2;
  --bg:#F1F5FA;
  --card:#FFFFFF;
  --ok:#12B76A;
  --warn:#F79009;
  --danger:#E5484D;
  --r:14px;
  --shadow:0 2px 14px rgba(20,45,90,.06);
  --shadow-lg:0 10px 34px rgba(20,45,90,.12);
  --max:1200px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.62; letter-spacing:-.02em;
  word-break:keep-all;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- 상단 알림바 ---------------- */
.topbar{background:var(--ink);color:#D7E3F5;font-size:13px;text-align:center;padding:9px 18px;letter-spacing:-.01em;
  position:sticky;top:0;z-index:300}
.topbar b{color:#7FE3F5;font-weight:700}

/* ---------------- 헤더 ---------------- */
.hd{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:200}
.hd-in{display:flex;align-items:center;gap:26px;height:70px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{width:40px;height:40px;border-radius:50%}
.logo .nm{font-size:20px;font-weight:800;letter-spacing:-.045em}
.logo .nm span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gnb{display:flex;gap:4px;margin-left:6px}
.gnb a{padding:9px 15px;border-radius:9px;font-size:15px;font-weight:600;color:var(--ink-2);transition:.15s}
.gnb a:hover,.gnb a.on{background:#EAF4FD;color:var(--brand-2)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:9px}
.btn-line{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.btn-line:hover{border-color:var(--brand);color:var(--brand-2)}
.btn-fill{background:var(--grad);color:#fff;border:0;border-radius:9px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(27,111,216,.28)}
.burger{display:none;border:0;background:none;padding:6px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* 모바일 메뉴 */
.mnav{position:fixed;inset:0;background:rgba(12,24,44,.45);z-index:500;display:none}
.mnav.open{display:block}
.mnav-p{position:absolute;top:0;right:0;width:82%;max-width:320px;height:100%;background:#fff;padding:22px 20px;overflow-y:auto;animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mnav-p a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:600}
.mnav-x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;margin-bottom:8px}

/* ---------------- 히어로 ---------------- */
.hero{position:relative;background:var(--grad);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 240px at 82% 12%,rgba(255,255,255,.22),transparent 70%),
  radial-gradient(420px 200px at 12% 92%,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.hero-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hero-s{min-width:100%;padding:52px 0 58px}
.hero-in{display:flex;align-items:center;gap:32px}
.hero-tx{flex:1;color:#fff;position:relative;z-index:2}
.hero-badge{display:inline-block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:14px;backdrop-filter:blur(4px)}
.hero-tt{font-size:46px;font-weight:800;letter-spacing:-.055em;line-height:1.16;margin:0 0 10px}
.hero-sb{font-size:16.5px;opacity:.94;margin:0 0 24px;font-weight:500}
.hero-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand-deep);
  padding:14px 26px;border-radius:11px;font-weight:800;font-size:16px;box-shadow:0 8px 22px rgba(6,32,74,.24)}
.hero-btn:hover{transform:translateY(-1px)}
.hero-img{width:340px;flex-shrink:0;position:relative;z-index:2}
.hero-img img{width:100%;border-radius:18px}
.hero-img .ph{aspect-ratio:4/3;border-radius:18px;background:rgba(255,255,255,.12);
  border:1px dashed rgba(255,255,255,.4);display:grid;place-items:center;color:rgba(255,255,255,.75);font-size:13px}
.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5}
.hero-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.hero-dots i.on{width:24px;border-radius:5px;background:#fff}

/* ---------------- 퀵 카드 ---------------- */
.quick{margin-top:-30px;position:relative;z-index:10}
.quick-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qc{background:#fff;border-radius:var(--r);padding:22px 22px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:14px;transition:.18s;border:1px solid transparent}
.qc:hover{transform:translateY(-3px);border-color:#CFE6FA}
.qc .ic{width:46px;height:46px;border-radius:12px;background:#EAF5FE;display:grid;place-items:center;flex-shrink:0}
.qc .ic svg{width:23px;height:23px;stroke:var(--brand-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qc b{display:block;font-size:16px;font-weight:700;letter-spacing:-.03em}
.qc small{color:var(--ink-3);font-size:13px}

/* 보조 링크 */
.sublinks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.sublinks a{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px;text-align:center;
  font-size:14px;font-weight:600;color:var(--ink-2)}
.sublinks a:hover{border-color:var(--brand);color:var(--brand-2)}

/* ---------------- 섹션 ---------------- */
section{padding:52px 0}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:12px}
.sec-hd h2{font-size:26px;font-weight:800;letter-spacing:-.05em;margin:0 0 4px}
.sec-hd p{margin:0;color:var(--ink-3);font-size:14.5px}
.more{font-size:14px;font-weight:600;color:var(--brand-2);white-space:nowrap}
.more::after{content:" ›"}

/* ---------------- 테이블(교환현황) ---------------- */
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{background:#F7FAFD;color:var(--ink-3);font-weight:600;font-size:13px;padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 14px;border-bottom:1px solid #F1F5F9;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#FBFDFF}
.cardcell{display:flex;align-items:center;gap:9px;font-weight:600}
.cardcell .amt{color:var(--brand-2);font-weight:800}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.b-ok{background:#E7F7EF;color:#0B8A50}
.b-wait{background:#FFF4E5;color:#B25E00}
.b-no{background:#FDECEC;color:#C1272D}
.ico{width:24px;height:24px;border-radius:6px;background:var(--grad);color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:800;flex-shrink:0}
.time{color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}

/* ---------------- 보드 2단 ---------------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.board{background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px}
.board h3{margin:0 0 2px;font-size:19px;font-weight:800;letter-spacing:-.04em}
.board .desc{color:var(--ink-3);font-size:13.5px;margin:0 0 14px}
.board li{list-style:none}
.board ul{margin:0;padding:0}
.board ul li a{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid #F1F5F9;font-size:14.5px}
.board ul li:first-child a{border-top:0}
.board ul li a:hover{color:var(--brand-2)}
.board .q{width:20px;height:20px;border-radius:5px;background:#EAF5FE;color:var(--brand-2);font-size:12px;
  font-weight:800;display:grid;place-items:center;flex-shrink:0}
.board .dt{margin-left:auto;color:var(--ink-3);font-size:12.5px;flex-shrink:0}
.pin{background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;flex-shrink:0}

/* ---------------- 상품권 카드 ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:.18s;position:relative}
.gc:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.gc-t{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gc-t .ico{width:34px;height:34px;border-radius:9px;font-size:13px}
.gc-t b{font-size:15.5px;font-weight:700;letter-spacing:-.035em;line-height:1.35}
.rate{margin-left:auto;font-size:20px;font-weight:800;color:var(--brand-2);font-variant-numeric:tabular-nums;flex-shrink:0}
.rate small{font-size:13px}
.rate.q{font-size:14px;color:var(--warn)}
.gc ul{margin:0;padding:0;list-style:none}
.gc ul li{position:relative;padding-left:14px;font-size:13.5px;color:var(--ink-2);margin-bottom:5px;line-height:1.55}
.gc ul li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:#BFD8F0}
.gc .fmt{margin-top:12px;background:#F6F9FD;border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.gc .ask{display:inline-block;margin-top:12px;background:#FFF7E8;color:#B25E00;border-radius:9px;padding:9px 14px;font-size:13px;font-weight:700}

/* ---------------- 폼 ---------------- */
.form-wrap{max-width:760px;margin:0 auto}
.fbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px;margin-bottom:16px}
.fbox h3{margin:0 0 3px;font-size:18px;font-weight:800;letter-spacing:-.04em}
.fbox .hint{color:var(--ink-3);font-size:13.5px;margin:0 0 16px}
.field{margin-bottom:13px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.inp,select.inp,textarea.inp{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;transition:.15s}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,165,200,.13);outline:none}
textarea.inp{min-height:130px;resize:vertical;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;
  padding:13px 22px;font-weight:700;cursor:pointer;transition:.15s;font-size:15px}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(27,111,216,.26)}
.btn-p:hover{filter:brightness(1.05)}
.btn-g{background:#F1F5F9;color:var(--ink-2)}
.btn-full{width:100%;padding:16px;font-size:16.5px}
.notice-box{background:#F6FAFF;border:1px solid #DCEAFA;border-radius:11px;padding:14px 16px;font-size:13.5px;color:var(--ink-2)}
.notice-box b{color:var(--brand-2)}
.pinlist{border:1px solid var(--line);border-radius:11px;max-height:230px;overflow-y:auto;background:#FCFDFF}
.pinlist .empty{padding:36px;text-align:center;color:var(--ink-3);font-size:13.5px}
.pinlist .it{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid #F1F5F9;font-size:13.5px}
.pinlist .it:last-child{border-bottom:0}
.pinlist .it code{font-family:ui-monospace,Menlo,monospace;flex:1;word-break:break-all}
.pinlist .it button{border:0;background:#FDECEC;color:#C1272D;border-radius:7px;padding:4px 9px;font-size:12px;cursor:pointer;font-weight:700}
.chip{background:#EAF5FE;color:var(--brand-2);border-radius:7px;padding:3px 8px;font-size:12px;font-weight:700;white-space:nowrap}
.msg{border-radius:11px;padding:13px 16px;margin-bottom:16px;font-size:14px;font-weight:600}
.msg.ok{background:#E7F7EF;color:#0B7A47}
.msg.err{background:#FDECEC;color:#B4262B}

/* 은행 선택 그리드 */
.banks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:290px;overflow-y:auto;padding:3px}
.banks button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 6px;font-size:13px;
  font-weight:600;cursor:pointer;transition:.14s}
.banks button:hover{border-color:var(--brand);color:var(--brand-2)}
.banks button.on{border-color:var(--brand-2);background:#EAF4FD;color:var(--brand-2)}

/* ---------------- 이용안내 4단 ---------------- */
.info4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.info4 .i{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.info4 .i b{display:block;font-size:15.5px;font-weight:800;margin-bottom:6px;letter-spacing:-.035em}
.info4 .i p{margin:0 0 12px;font-size:13.5px;color:var(--ink-3);line-height:1.55}
.info4 .i .v{font-size:17px;font-weight:800;color:var(--brand-2);letter-spacing:-.03em}

/* 주의사항 */
.cautions{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-top:14px}
.cautions h3{margin:0 0 12px;font-size:17px;font-weight:800}
.cautions ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:14px}
.cautions li{margin-bottom:7px}

/* ---------------- 푸터 ---------------- */
.ft{background:#131E31;color:#8FA0BA;padding:44px 0 34px;font-size:13.5px;margin-top:20px}
.ft-in{display:flex;gap:40px;flex-wrap:wrap}
.ft-logo img{width:60px;border-radius:50%;margin-bottom:12px}
.ft-logo .nm{color:#fff;font-size:17px;font-weight:800}
.ft dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;flex:1;min-width:280px}
.ft dt{color:#5F7192;font-size:13px}
.ft dd{margin:0;color:#C4D2E6}
.ft-b{border-top:1px solid #22314B;margin-top:26px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ft-b a{color:#A8B9D2;font-weight:600}

/* ---------------- 팝업 ---------------- */
.pop{position:fixed;z-index:900;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 18px 50px rgba(6,20,44,.3)}
.pop img{width:100%;display:block}
.pop .ph{padding:60px 30px;text-align:center;color:var(--ink-3);background:#F5F8FC;font-size:14px}
.pop-b{display:flex;background:#1C2942}
.pop-b button{flex:1;border:0;background:none;color:#C3D2E8;padding:11px;font-size:13px;cursor:pointer;font-weight:600}
.pop-b button+button{border-left:1px solid #2C3B57}
.pop-b button:hover{color:#fff}

/* ---------------- 플로팅 ---------------- */
.float{position:fixed;right:18px;bottom:18px;z-index:400;display:flex;flex-direction:column;gap:9px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 18px rgba(10,30,60,.24);color:#fff}
.float .kk{background:#FAE100;color:#3C1E1E}
.float .tp{background:var(--ink)}
.float svg{width:24px;height:24px}

/* ---------------- 상세/게시판 ---------------- */
.page-hd{background:var(--grad);color:#fff;padding:38px 0}
.page-hd h1{margin:0 0 4px;font-size:29px;font-weight:800;letter-spacing:-.05em}
.page-hd p{margin:0;opacity:.9;font-size:15px}
.list-row{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid #F1F5F9}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:#FBFDFF}
.list-row .tt{font-weight:600;flex:1}
.article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.article h1{font-size:23px;margin:0 0 8px;letter-spacing:-.045em}
.article .meta{color:var(--ink-3);font-size:13.5px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.article .body p{margin:0 0 10px;color:var(--ink-2)}
.acc{border-bottom:1px solid #F1F5F9}
.acc:last-child{border-bottom:0}
.acc-q{width:100%;text-align:left;border:0;background:none;padding:17px 20px;font-size:15px;font-weight:600;
  cursor:pointer;display:flex;gap:11px;align-items:center}
.acc-q .q{width:21px;height:21px;border-radius:6px;background:#EAF5FE;color:var(--brand-2);font-size:12px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.acc-q .ar{margin-left:auto;color:var(--ink-3);transition:.2s}
.acc.open .acc-q .ar{transform:rotate(180deg)}
.acc-a{display:none;padding:0 20px 20px 52px;color:var(--ink-2);font-size:14.5px}
.acc.open .acc-a{display:block}
.acc-a p{margin:0 0 8px}

/* ---------------- 반응형 ---------------- */
@media (max-width:900px){
  .gnb,.hd-r .btn-line{display:none}
  .burger{display:block}
  .hero-in{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-img{width:100%}
  .hero-tt{font-size:33px}
  .hero-s{padding:38px 0 52px}
  .quick-g{grid-template-columns:1fr}
  .sublinks{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .info4{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .banks{grid-template-columns:repeat(3,1fr)}
  section{padding:38px 0}
  .sec-hd h2{font-size:22px}
  .tbl .hide-m{display:none}
  .ft-in{flex-direction:column;gap:22px}
}
@media (max-width:520px){
  .info4{grid-template-columns:1fr}
  .banks{grid-template-columns:repeat(2,1fr)}
  .fbox{padding:20px}
  .tbl th,.tbl td{padding:11px 10px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ================= 상품권 현금교환 신청 시스템 ================= */
.order-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:stretch}
.order-l{min-width:0}
.order-r{min-width:0;align-self:stretch}
.obox{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;margin-bottom:16px}
.obox-sticky{position:sticky;top:58px;margin-bottom:0}
.obox-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.obox-ic{width:40px;height:40px;border-radius:11px;background:#EAF5FE;display:grid;place-items:center;flex-shrink:0}
.obox-ic svg{width:21px;height:21px;stroke:var(--brand-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.obox-hd b{display:block;font-size:16px;font-weight:800;letter-spacing:-.04em;line-height:1.3}
.obox-hd b em{font-style:normal;color:var(--brand-2)}
.obox-hd small{color:var(--ink-3);font-size:13px}
.obox-fold{margin-left:auto;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-3);flex-shrink:0}
.obox-fold svg{width:15px;height:15px;transition:.2s}
.obox-fold.closed svg{transform:rotate(180deg)}
.obox-tip{font-size:13.5px;color:var(--ink-2);margin:0 0 10px}
.obox-tip b{color:var(--brand-2)}
.obox-div{border-top:1px dashed var(--line);margin:18px 0}
#smsText{min-height:120px}
.obox-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.obtn{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;
  border-radius:10px;padding:12px 8px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s}
.obtn:hover{border-color:var(--brand);color:var(--brand-2);background:#F7FCFF}
.obtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.obtn.main{background:var(--grad);color:#fff;border-color:transparent}

/* 상품권 타일 */
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:8px}
.pick{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:13px 14px;cursor:pointer;position:relative;transition:.16s;min-height:64px}
.pick:hover{border-color:var(--brand);box-shadow:0 3px 12px rgba(20,45,90,.08)}
.pick-logo{width:34px;height:34px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;background:#F3F7FC}
.pick-logo img{width:100%;height:100%;object-fit:contain}
.pick-logo i{font-style:normal;font-size:13px;font-weight:800;color:#fff;width:100%;height:100%;
  display:grid;place-items:center;background:var(--grad)}
.pick-nm{font-size:13.5px;font-weight:700;letter-spacing:-.035em;line-height:1.32;color:var(--ink)}
.pick-rate{display:none;position:absolute;top:-9px;right:9px;background:var(--grad);color:#fff;font-size:11.5px;font-weight:800;
  padding:3px 9px;border-radius:999px;box-shadow:0 3px 8px rgba(27,111,216,.3);white-space:nowrap}
.pick[data-dim="1"] .pick-nm{color:var(--ink-3)}
.pick.on{background:var(--grad);border-color:transparent;box-shadow:0 6px 18px rgba(27,111,216,.28)}
.pick.on .pick-nm{color:#fff}
.pick.on .pick-logo{background:#fff}
.pick.on .pick-rate{display:block;background:#fff;color:var(--brand-2);box-shadow:0 3px 8px rgba(6,32,74,.18)}

/* 선택 상세 */
.pick-detail{grid-column:1/-1;background:#F6F9FD;border:1px solid #E1EBF7;border-radius:12px;padding:18px 20px;margin:2px 0}
.pick-detail ul{margin:0;padding:0;list-style:none}
.pick-detail li{display:flex;gap:9px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:8px;line-height:1.5}
.pick-detail li:last-child{margin-bottom:0}
.pick-detail li svg{width:16px;height:16px;stroke:var(--brand-2);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:3px}
.pick-detail li.hl{color:var(--brand-2)}
.pick-detail li.hl svg{stroke:var(--brand-2)}
.pick-detail .gift{margin-top:10px;background:#fff;border:1px solid #DCEAFA;border-radius:9px;padding:12px 14px;
  font-size:15px;font-weight:800;color:var(--brand-2);text-align:center;letter-spacing:-.03em}
.pick-detail .ask-btn{display:block;margin-top:13px;background:var(--grad);color:#fff;border-radius:10px;
  padding:13px;text-align:center;font-weight:700;font-size:14.5px}

/* 세그먼트 입력 */
.segs{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.segs input{flex:1;min-width:74px;border:1px solid var(--line);border-radius:10px;padding:12px 10px;background:#F8FAFD;
  text-align:center;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;transition:.15s}
.segs input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(18,165,200,.13);outline:none}
.segs .seg-add{flex-shrink:0;background:var(--grad);color:#fff;border:0;border-radius:10px;padding:12px 18px;
  font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.pin-msg{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--brand-2);min-height:18px}
.pin-cnt{margin-left:auto;font-size:13px;color:var(--ink-3);white-space:nowrap}
.pin-cnt b{color:var(--brand-2);font-size:15px}
.pinlist{border:1px solid var(--line);border-radius:11px;background:#F8FAFD;min-height:150px;max-height:280px;overflow-y:auto}
.pinlist .empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
.pinlist .empty i{display:block;width:38px;height:38px;border-radius:50%;border:2px solid #D5DFEC;color:#A9B7C9;
  font-style:normal;font-size:20px;font-weight:800;line-height:34px;margin:0 auto 10px}

/* 오른쪽 계좌 */
.order-r .inp{margin-bottom:9px}
.bank-sel{display:flex;align-items:center;text-align:left;cursor:pointer;background:#fff}
.bank-sel svg{width:17px;height:17px;margin-left:auto;color:var(--ink-3);flex-shrink:0}
.bank-sel.picked span{font-weight:700;color:var(--ink)}
.bank-sel span{color:var(--ink-3)}
.save-acct{display:flex;gap:7px;align-items:center;justify-content:flex-end;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.guide-t{margin:0 0 10px;font-size:16px;font-weight:800;text-align:center;letter-spacing:-.04em}
.guide{margin:0 0 16px;padding:0;list-style:none}
.guide li{font-size:13.5px;color:var(--ink-2);margin-bottom:6px;padding-left:10px;position:relative;line-height:1.5}
.guide li::before{content:"-";position:absolute;left:0}
.guide b{color:var(--brand-2)}
.agree{display:flex;gap:7px;align-items:center;font-size:13.5px;color:var(--ink-2);margin-top:11px;justify-content:center}
.agree a{color:var(--ink-3);margin-left:auto;font-size:13px}

/* 은행 모달 */
.bmodal{position:fixed;inset:0;background:rgba(12,24,44,.5);z-index:600;display:grid;place-items:center;padding:18px}
.bmodal-p{background:#fff;border-radius:16px;padding:20px;width:min(520px,100%);max-height:82vh;display:flex;flex-direction:column}
.bmodal-hd{display:flex;align-items:center;margin-bottom:12px}
.bmodal-hd b{font-size:17px;font-weight:800}
.bmodal-hd button{margin-left:auto;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-3)}
.bmodal .banks{margin-top:10px;max-height:none;overflow-y:auto}

@media (max-width:980px){
  .order-grid{grid-template-columns:1fr}
  .obox-sticky{position:static;margin-bottom:16px}
  .pick-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pick-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pick{padding:11px 10px;gap:8px;min-height:60px;flex-direction:column;align-items:flex-start;justify-content:center}
  .pick-logo{width:28px;height:28px;border-radius:7px}
  .pick-nm{font-size:12.5px;letter-spacing:-.05em;line-height:1.3}
  .pick-rate{top:-7px;right:6px;font-size:10.5px;padding:2px 7px}
  .pick-detail{padding:15px 16px}
  .pick-detail li{font-size:13px;gap:7px}
  .obox{padding:18px}
  .obox-btns{grid-template-columns:1fr}
  .segs input{min-width:60px}
}

/* ================= 히어로 강화 ================= */
.hero-s{position:relative}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:right center;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-s.no-bg .hero-veil{display:none}
.hero-tt{font-size:56px;line-height:1.1;text-shadow:0 2px 18px rgba(4,20,48,.28)}
.hero-sb{font-size:18px;font-weight:600;line-height:1.55;text-shadow:0 1px 10px rgba(4,20,48,.25)}
.hero-in{min-height:290px}

/* ================= 실시간 현황 / 공지 / FAQ ================= */
.feed{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px}
.fcard + .fcard{margin-top:16px}
.fhd{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fic{width:44px;height:44px;border-radius:13px;background:#EAF5FE;display:grid;place-items:center;flex-shrink:0}
.fic svg{width:22px;height:22px;stroke:var(--brand-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fhd b{display:block;font-size:17px;font-weight:800;letter-spacing:-.045em;line-height:1.3}
.fhd small{color:var(--ink-3);font-size:13.5px}
.fmore{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--ink-3);flex-shrink:0;transition:.15s}
.fmore:hover{background:var(--grad);border-color:transparent;color:#fff}
.fmore svg{width:15px;height:15px}

.ftbl{width:100%;border-collapse:collapse;font-size:14px}
.ftbl th{color:var(--ink-3);font-weight:600;font-size:12.5px;padding:0 10px 11px;text-align:left;border-bottom:1px solid var(--line)}
.ftbl td{padding:12px 10px;border-bottom:1px solid #F4F7FB}
.ftbl tr:last-child td{border-bottom:0}
.ftbl tbody tr:hover{background:#FAFCFF}
.f-date{color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.f-item{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.03em}
.f-item .ico{width:26px;height:26px;border-radius:7px;font-size:11px}
.f-item img{width:26px;height:26px;object-fit:contain;border-radius:6px;flex-shrink:0}
.f-item b{color:var(--brand-2);font-weight:800}
.f-item .amt{white-space:nowrap}
.f-user{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13.5px}
.f-av{width:24px;height:24px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.f-took{color:var(--warn);font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}

.qlist{margin:0;padding:0;list-style:none}
.qlist li a{display:flex;gap:9px;align-items:flex-start;padding:11px 0;font-size:14.5px;font-weight:600;letter-spacing:-.03em}
.qlist li + li a{border-top:1px solid #F4F7FB}
.qlist li a:hover{color:var(--brand-2)}
.qlist .qm{color:var(--brand-2);font-weight:900;flex-shrink:0}
.qlist .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qlist .dt{margin-left:auto;color:var(--ink-3);font-size:12.5px;flex-shrink:0;font-weight:500}
.fempty{padding:26px 0;color:var(--ink-3);font-size:14px;text-align:center}

/* ================= 브랜드 소개 ================= */
.intro{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intro-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.intro-img{border-radius:20px;overflow:hidden;background:var(--grad);aspect-ratio:4/3;box-shadow:0 18px 44px rgba(20,45,90,.16)}
.intro-img img{width:100%;height:100%;object-fit:cover}
.intro-img .ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,.8);font-size:14px;text-align:center;padding:20px}
.intro-badge{display:inline-block;background:#EAF5FE;color:var(--brand-2);font-size:12.5px;font-weight:800;
  letter-spacing:.06em;padding:8px 15px;border-radius:9px;margin-bottom:20px}
.intro h2{font-size:34px;font-weight:800;letter-spacing:-.055em;line-height:1.35;margin:0 0 20px;white-space:pre-line}
.intro h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p.d{color:var(--ink-3);font-size:15px;line-height:1.8;margin:0 0 24px;white-space:pre-line}
.intro ul{margin:0;padding:0;list-style:none}
.intro ul li{display:flex;gap:11px;align-items:center;font-size:15px;font-weight:700;letter-spacing:-.035em;margin-bottom:13px}
.intro ul li svg{width:17px;height:17px;stroke:var(--brand-2);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

@media (max-width:980px){
  /* 모바일은 글자가 화면 전체를 덮으므로 배경을 고르게 어둡게 */
  .hero-veil{background:linear-gradient(180deg,rgba(9,42,96,.90) 0%,rgba(9,42,96,.78) 60%,rgba(9,42,96,.86) 100%)!important}
  .hero-bg{background-position:center}
  .feed{grid-template-columns:1fr}
  .intro-in{grid-template-columns:1fr;gap:30px}
  .intro h2{font-size:26px}
  .hero-tt{font-size:36px}
  .hero-sb{font-size:15.5px}
  .hero-in{min-height:0}
  .ftbl .hide-m{display:none}
}
@media (max-width:560px){
  .intro h2{font-size:21px;line-height:1.45}
  .intro p.d{white-space:normal;font-size:14.5px;line-height:1.75}
  .intro ul li{font-size:14px}
  .intro-in{gap:24px}
  .hero-tt{font-size:30px}
  .fcard{padding:18px 16px}
  .ftbl th,.ftbl td{padding:10px 5px;font-size:13px}
  .ftbl th:first-child,.ftbl td:first-child{padding-left:0}
  .f-item{gap:7px;font-size:13px;letter-spacing:-.045em}
  .f-item .ico,.f-item img{width:22px;height:22px}
  .f-user{gap:5px;font-size:12.5px}
  .f-av{width:21px;height:21px;font-size:10px}
  .badge{padding:3px 7px;font-size:11.5px}
}

/* 은행 뱃지 */
.f-av{width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:800;
  display:grid;place-items:center;flex-shrink:0;object-fit:contain;background:#F1F5F9;letter-spacing:-.05em}
img.f-av{background:#fff;border:1px solid var(--line)}
.tbl .f-user{display:flex;align-items:center;gap:7px}


/* 실시간 교환현황 — 새 건 등장 */
@keyframes feedIn{
  0%{opacity:0;transform:translateY(-10px);background:#EAF7FD}
  60%{opacity:1;transform:none;background:#EAF7FD}
  100%{background:transparent}
}
.ftbl tbody tr.new{animation:feedIn 1.5s ease}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#12B76A;margin-left:7px;
  vertical-align:middle;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(18,183,106,.45)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(18,183,106,0)}}