/* =====================================================================
   SUB/btn_total — 버튼 모음
   .bt_wrap 클래스 : bt_st_{스타일} bt_fx_{효과} bt_w_{폭} bt_al_{정렬} bt_mo_{모바일}
   .bt_wrap 변수   : --bt-gap --bt-r --bt-py --bt-px --bt-fs --bt-fw --bt-ic --bt-bg --bt-c --bt-hbg --bt-hc (설정창 → wid_css 주석)
   ===================================================================== */
.btn_total{width:100%; float:left; position:relative;}
.btn_total.bt_inner_off > .contents-container{width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important;}

/* ---------- 기본 변수 (설정 안 한 값) ---------- */
.btn_total .bt_wrap{
  --bt-bg:var(--primary, #2563eb);
  --bt-c:#fff;
  --bt-hbg:color-mix(in srgb, var(--bt-bg) 80%, #000);
  --bt-hc:var(--bt-c);
  --bt-flow:color-mix(in srgb, var(--bt-bg) 45%, #ec4899);
  width:100%; float:left; box-sizing:border-box;
  display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--bt-gap, 12px);
}
.btn_total .bt_al_center{justify-content:center;}
.btn_total .bt_al_left{justify-content:flex-start;}
.btn_total .bt_al_right{justify-content:flex-end;}

/* ---------- 버튼 폭 : auto 글씨만큼 / equal 같은 폭(가장 긴 버튼 기준) / full 줄 가득 ---------- */
.btn_total .bt_w_equal{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; width:max-content; max-width:100%; float:none;}
.btn_total .bt_w_equal.bt_al_center{margin-left:auto; margin-right:auto;}
.btn_total .bt_w_equal.bt_al_right{margin-left:auto;}
.btn_total .bt_w_full{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr);}

/* ---------- 버튼 한 개 ---------- */
.btn_total .bt_item{
  /* 스타일별로 바뀌는 값 : 평소 배경·글자 / 호버 배경·글자 / 채우기 효과 색 */
  --_nb:var(--bt-bg); --_nc:var(--bt-c); --_hb:var(--bt-hbg); --_hc:var(--bt-hc); --_fb:var(--bt-hbg);
  position:relative; isolation:isolate; overflow:visible; box-sizing:border-box;   /* 효과는 .bt_fxl 안에서 잘림 · 사이 구분선(.bt_sep)이 버튼 밖에 보이도록 visible */
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:var(--bt-py, 14px) var(--bt-px, 28px);
  font-size:var(--bt-fs, 16px); font-weight:var(--bt-fw, 600); line-height:1.35; text-align:center; letter-spacing:-.01em;
  color:var(--_nc); background:var(--_nb); border:0; border-radius:var(--bt-r, 8px);
  text-decoration:none !important; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.btn_total .bt_item:hover, .btn_total .bt_item.on{background:var(--_hb); color:var(--_hc);}
.btn_total .bt_item:focus-visible{outline:2px solid var(--bt-bg); outline-offset:3px;}
.btn_total .bt_tx, .btn_total .bt_ic{position:relative; z-index:2;}
.btn_total .bt_ic{font-size:var(--bt-ic, 1.15em); line-height:1; flex-shrink:0; transition:transform .3s;}
/* 아이콘 위치 : 오른쪽 = 글씨 뒤로 (HTML 순서 그대로, flex order 로만) */
.btn_total .bt_icp_right .bt_ic{order:2;}
/* 아이콘 오프셋 (@bt_icx · @bt_icy) — 효과의 transform 과 안 겹치게 translate 속성으로 */
.btn_total .bt_ic{translate:var(--bt-icx, 0px) var(--bt-icy, 0px);}
.btn_total .bt_fxl{position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; overflow:hidden;}
.btn_total .bt_empty{opacity:.55; outline:1px dashed currentColor; outline-offset:-4px;}

/* ---------- 버튼 사이 구분 (bt_sep_{line|dash|dot} + 앞에 구분이 붙는 버튼 = .bt_sep_on) ---------- */
/* 구분이 붙는 사이만 간격 + 구분 여백(--bt-sepg) 만큼 벌어지고, 구분은 벌어진 간격의 한가운데 */
.btn_total .bt_wrap:not(.bt_sep_none) .bt_sep_on{margin-left:var(--bt-sepg, 20px);}
.btn_total .bt_sep{display:none; position:absolute; top:50%; left:calc((var(--bt-gap, 12px) + var(--bt-sepg, 20px)) / -2); transform:translate(-50%, -50%); pointer-events:none; z-index:4;}
/* 실선·점선 = 버튼 높이 그대로 */
.btn_total .bt_sep_line .bt_sep_on .bt_sep{display:block; width:1px; height:100%; background:var(--bt-sepc, #cbd5e1);}
.btn_total .bt_sep_dash .bt_sep_on .bt_sep{display:block; width:0; height:100%; border-left:1px dashed var(--bt-sepc, #b6c0cc);}
.btn_total .bt_sep_dot .bt_sep_on .bt_sep{display:block; width:6px; height:6px; border-radius:50%; background:var(--bt-sepc, color-mix(in srgb, var(--bt-bg) 30%, #fff));}

/* ---------- 스타일 ---------- */
/* 알약 */
.btn_total .bt_st_pill .bt_item{border-radius:999px;}
/* 네모 = 라운드값(--bt-r) 그대로 */
/* 테두리 */
.btn_total .bt_st_outline .bt_item{--_nb:transparent; --_nc:var(--bt-bg); --_hb:var(--bt-bg); --_hc:var(--bt-c); --_fb:var(--bt-bg); box-shadow:inset 0 0 0 1.5px var(--bt-bg);}
/* 연한색 */
.btn_total .bt_st_soft .bt_item{--_nb:color-mix(in srgb, var(--bt-bg) 12%, #fff); --_nc:var(--bt-bg); --_hb:var(--bt-bg); --_hc:var(--bt-c); --_fb:var(--bt-bg);}
/* 하단 바 (탭처럼) — 호버·현재 페이지면 가운데서 양옆으로 바가 그어짐 */
.btn_total .bt_st_under{border-bottom:1px solid #e5e7eb;}
.btn_total .bt_st_under .bt_item,
.btn_total .bt_st_updown .bt_item{--_nb:transparent; --_nc:var(--bt-uc, #333); --_hb:transparent; --_hc:var(--bt-uhc, var(--bt-bg)); --_fb:color-mix(in srgb, var(--bt-bg) 10%, transparent); border-radius:0; overflow:visible;}
.btn_total .bt_st_under .bt_item::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--bt-bg); transform:scaleX(0); transition:transform .35s cubic-bezier(.2,.7,.2,1); z-index:3;}
.btn_total .bt_st_under .bt_item:hover::after, .btn_total .bt_st_under .bt_item.on::after{transform:scaleX(1);}
/* 상하단 바 — 호버하면 글씨 가까이 있던 두 줄이 위아래로 벌어짐 */
.btn_total .bt_st_updown .bt_item::before,
.btn_total .bt_st_updown .bt_item::after{content:""; position:absolute; left:10%; right:10%; height:2px; background:var(--bt-bg); opacity:0; transition:top .35s cubic-bezier(.2,.7,.2,1), bottom .35s cubic-bezier(.2,.7,.2,1), opacity .25s, left .35s, right .35s; z-index:3;}
.btn_total .bt_st_updown .bt_item::before{top:38%;}
.btn_total .bt_st_updown .bt_item::after{bottom:38%;}
.btn_total .bt_st_updown .bt_item:hover::before, .btn_total .bt_st_updown .bt_item.on::before{top:0; opacity:1; left:0; right:0;}
.btn_total .bt_st_updown .bt_item:hover::after, .btn_total .bt_st_updown .bt_item.on::after{bottom:0; opacity:1; left:0; right:0;}

/* ---------- 효과 ---------- */
/* 물결 : 누른 자리에서 원이 퍼짐 (JS 가 .bt_rp 를 붙임) */
.btn_total .bt_rp{position:absolute; border-radius:50%; background:currentColor; opacity:.32; transform:scale(0); animation:btRipple .65s ease-out forwards; pointer-events:none; z-index:1;}
@keyframes btRipple{to{transform:scale(1); opacity:0;}}
/* 흐르는 색 : 호버하면 그라데이션이 옆으로 흐름 */
.btn_total .bt_fx_flow .bt_item:hover, .btn_total .bt_fx_flow .bt_item.on{background:var(--_nb);}
.btn_total .bt_fx_flow .bt_fxl{background:linear-gradient(90deg, var(--_fb), var(--bt-flow), var(--_fb), var(--bt-flow), var(--_fb)); background-size:300% 100%; opacity:0; transition:opacity .35s;}
.btn_total .bt_fx_flow .bt_item:hover .bt_fxl, .btn_total .bt_fx_flow .bt_item.on .bt_fxl{opacity:1; animation:btFlow 2.6s linear infinite;}
.btn_total .bt_st_under.bt_fx_flow .bt_fxl, .btn_total .bt_st_updown.bt_fx_flow .bt_fxl{background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--bt-bg) 14%, transparent), transparent); background-size:200% 100%;}
@keyframes btFlow{from{background-position:0% 0;} to{background-position:-150% 0;}}
/* 빛 지나감 : 호버하면 비스듬한 빛이 훑고 지나감 */
.btn_total .bt_fx_shine .bt_fxl::after{content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:38%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-160%) skewX(-18deg);}
.btn_total .bt_fx_shine .bt_item:hover .bt_fxl::after{transform:translateX(380%) skewX(-18deg); transition:transform .75s ease;}
/* 채우기 : 호버하면 왼쪽부터 색이 차오름 */
.btn_total .bt_fx_fill .bt_item:hover, .btn_total .bt_fx_fill .bt_item.on{background:var(--_nb);}
.btn_total .bt_fx_fill .bt_fxl{background:var(--_fb); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.btn_total .bt_fx_fill .bt_item:hover .bt_fxl, .btn_total .bt_fx_fill .bt_item.on .bt_fxl{transform:scaleX(1);}
/* 떠오르기 */
.btn_total .bt_fx_lift .bt_item:hover{transform:translateY(-3px); box-shadow:0 12px 22px -10px color-mix(in srgb, var(--bt-bg) 70%, transparent);}
.btn_total .bt_fx_lift .bt_item:active{transform:translateY(-1px);}
/* 빛 번짐 */
.btn_total .bt_fx_glow .bt_item:hover, .btn_total .bt_fx_glow .bt_item.on{box-shadow:0 0 0 4px color-mix(in srgb, var(--bt-bg) 22%, transparent), 0 8px 26px color-mix(in srgb, var(--bt-bg) 45%, transparent);}
/* 아이콘 밀기 */
.btn_total .bt_fx_nudge .bt_item:hover .bt_ic{transform:translateX(-3px) scale(1.18);}
.btn_total .bt_fx_nudge .bt_item:hover .bt_tx{transform:translateX(2px);}
.btn_total .bt_fx_nudge .bt_tx{transition:transform .3s;}
.btn_total .bt_icp_right.bt_fx_nudge .bt_item:hover .bt_ic{transform:translateX(3px) scale(1.18);}   /* 오른쪽 아이콘은 오른쪽으로 밀기 */
.btn_total .bt_icp_right.bt_fx_nudge .bt_item:hover .bt_tx{transform:translateX(-2px);}
/* 누를 때 살짝 눌림 (물결·없음 제외 공통) */
.btn_total .bt_item:active{transform:scale(.98);}
@media (prefers-reduced-motion: reduce){
  .btn_total .bt_item, .btn_total .bt_fxl, .btn_total .bt_ic, .btn_total .bt_tx{transition:none !important; animation:none !important;}
}

/* ---------- 태블릿 · 모바일 ---------- */
@media screen and (max-width:991px){
  .btn_total .bt_w_full{grid-auto-flow:row; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));}
}
@media screen and (max-width:767px){
  .btn_total .bt_item{font-size:calc(var(--bt-fs, 16px) * .92); padding:calc(var(--bt-py, 14px) * .8) calc(var(--bt-px, 28px) * .7);}
}
@media screen and (max-width:640px){
  .btn_total .bt_mo_wrap.bt_w_equal, .btn_total .bt_mo_wrap.bt_w_full{display:flex; flex-wrap:wrap; width:100%;}
  .btn_total .bt_mo_wrap.bt_w_equal .bt_item, .btn_total .bt_mo_wrap.bt_w_full .bt_item{flex:1 1 auto;}
  .btn_total .bt_mo_c1, .btn_total .bt_mo_c2{display:grid; grid-auto-flow:row; width:100%; grid-template-columns:minmax(0, 1fr);}
  .btn_total .bt_mo_c2{grid-template-columns:repeat(2, minmax(0, 1fr));}
  /* 모바일 사이 구분 : 1열 = 버튼 위 간격 가운데에 가로로 · 2열/줄바꿈 = 줄 위치가 일정하지 않아 숨김 */
  .btn_total .bt_wrap:not(.bt_mo_c1) .bt_sep_on .bt_sep{display:none !important;}
  .btn_total .bt_wrap:not(.bt_sep_none) .bt_sep_on{margin-left:0;}
  .btn_total .bt_mo_c1:not(.bt_sep_none) .bt_sep_on{margin-top:var(--bt-sepg, 20px);}
  .btn_total .bt_mo_c1 .bt_sep_on .bt_sep{top:calc((var(--bt-gap, 12px) + var(--bt-sepg, 20px)) / -2); left:50%;}
  .btn_total .bt_mo_c1.bt_sep_line .bt_sep_on .bt_sep{width:100%; height:1px;}   /* 1열 = 버튼 폭 그대로 가로선 */
  .btn_total .bt_mo_c1.bt_sep_dash .bt_sep_on .bt_sep{width:100%; height:0; border-left:0; border-top:1px dashed var(--bt-sepc, #b6c0cc);}
}

/* ---------- 관리자 : 버튼 설정 버튼 ---------- */
.btn_total .bt_set_btn{
  display:table; margin:0 0 10px auto; position:relative; z-index:40;
  padding:7px 14px; border:0; border-radius:6px; cursor:pointer;
  background:#7c3aed; color:#fff; font-size:13px; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.btn_total.admin_div .grid_layout_badge{z-index:30;}
.btn_total .empty_li{width:100%; padding:24px; text-align:center; color:#888; border:1px dashed #ccc; border-radius:10px;}

/* =====================================================================
   설정창 [버튼 설정] (btn_total.js)
   ===================================================================== */
.btset{position:fixed; inset:0; z-index:2147483600; font-family:inherit;}
.btset_bg{position:absolute; inset:0; background:transparent;}
.btset_box{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(860px, calc(100vw - 30px)); max-height:calc(100vh - 40px); display:flex; flex-direction:column; background:#fff; color:#222; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid #e5e7eb;}
.btset_head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:linear-gradient(135deg, #7c3aed, #6366f1); color:#fff; cursor:move; user-select:none; touch-action:none; border-radius:14px 14px 0 0;}
.btset_head b{font-size:15px;}
.btset_head button{border:0; background:rgba(255,255,255,.2); color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px;}
.btset_tabs{display:flex; gap:4px; padding:10px 18px 0; border-bottom:1px solid #e5e7eb; background:#fafafa;}
.btset_tabs button{padding:9px 14px; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; background:none; color:#6b7280; font-size:13px; font-weight:600; cursor:pointer; margin-bottom:-1px;}
.btset_tabs button.on{background:#fff; border-color:#e5e7eb; color:#7c3aed;}
.btset_body{padding:18px; overflow:auto; flex:1;}
.btset_lb{font-size:13px; font-weight:700; color:#374151; margin:6px 0 10px;}
.btset_lb small{font-weight:400; color:#9ca3af; margin-left:6px;}
.btset_grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; margin-bottom:18px;}
.btset_card{border:2px solid #e5e7eb; border-radius:10px; padding:12px 8px 8px; background:#fafafa; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; transition:border-color .2s, background .2s;}
.btset_card:hover{border-color:#a78bfa;}
.btset_card.on{border-color:#7c3aed; background:#f5f3ff;}
.btset_card > span{font-size:12px; color:#374151; font-weight:600;}
.btset_card > small{font-size:11px; color:#9ca3af; margin-top:-6px;}
/* 카드 안 미리보기 버튼 = 실제 스킨 CSS 그대로 (.btn_total 범위) */
.btset_card .btn_total{float:none; width:auto;}
.btset_card .btn_total .bt_wrap{float:none; width:auto; justify-content:center; --bt-py:8px; --bt-px:16px; --bt-fs:12px; --bt-r:6px;}
.btset_row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:14px; font-size:13px;}
.btset_row label{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.btset_row input[type=range]{width:150px;}
.btset_row b.v{min-width:42px; color:#7c3aed; font-weight:700;}
.btset_row input[type=color]{width:34px; height:28px; padding:0; border:1px solid #d1d5db; border-radius:6px; background:#fff; cursor:pointer;}
.btset_seg{display:inline-flex; border:1px solid #d1d5db; border-radius:8px; overflow:hidden;}
.btset_seg button{padding:6px 12px; border:0; border-right:1px solid #e5e7eb; background:#fff; font-size:12px; cursor:pointer; color:#374151;}
.btset_seg button:last-child{border-right:0;}
.btset_seg button.on{background:#7c3aed; color:#fff;}
.btset_col{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #e5e7eb; border-radius:8px; background:#fafafa;}
.btset_col .btset_def{font-size:11px; color:#6b7280; border:0; background:none; cursor:pointer; text-decoration:underline;}
.btset_inner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:16px; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:10px; font-size:13px;}
.btset_inner label{display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer;}
.btset_inner span{color:#6b7280; font-size:12px;}
.btset_sec{border-top:1px solid #f1f1f1; padding-top:12px; margin-top:4px;}
.btset_foot{display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #eee;}
.btset_foot button{padding:9px 18px; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-size:13px;}
.btset_foot .btset_save{background:#7c3aed; border-color:#7c3aed; color:#fff; font-weight:700;}
.btset_msg{font-size:12px; color:#6b7280; margin-right:auto; align-self:center;}
/* 버튼 목록 */
.bi_bar{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.bi_bar button{padding:7px 14px; border:1px solid #7c3aed; background:#fff; color:#7c3aed; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer;}
.bi_bar button:hover{background:#f5f3ff;}
.bi_bar .bi_cnt{margin-left:auto; font-size:12px; color:#6b7280;}
.bi_bar .bi_hint{font-size:12px; color:#9ca3af;}
.bi_row{display:grid; grid-template-columns:22px 26px 150px minmax(0, 1fr) auto; gap:8px; align-items:start; padding:10px; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:8px; background:#fff;}
.bi_row.bi_drag{opacity:.4;}
.bi_row.bi_over{border-color:#7c3aed; box-shadow:0 0 0 2px #ddd6fe;}
.bi_handle{cursor:grab; color:#9ca3af; padding-top:8px; text-align:center; user-select:none;}
.bi_no{padding-top:8px; color:#7c3aed; text-align:center;}
.bi_icwrap{position:relative;}
.bi_icbtn{width:100%; height:36px; display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid #d1d5db; border-radius:6px; background:#fafafa; cursor:pointer; font-size:12px; color:#374151; overflow:hidden; white-space:nowrap;}
.bi_icbtn i{font-size:18px; color:#7c3aed;}
.bi_icpop{position:absolute; left:0; top:40px; z-index:5; width:280px; padding:10px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18);}
.bi_icpop .bi_icgrid{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-bottom:8px;}
.bi_icpop .bi_icgrid button{height:32px; border:1px solid #eee; border-radius:6px; background:#fff; cursor:pointer; font-size:18px; color:#374151;}
.bi_icpop .bi_icgrid button:hover{border-color:#7c3aed; color:#7c3aed;}
.bi_icpop input{width:100%; padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:12px; box-sizing:border-box;}
.bi_icpop p{margin:6px 0 0; font-size:11px; color:#9ca3af; line-height:1.4;}
.bi_fields{display:flex; flex-direction:column; gap:6px; min-width:0;}
.bi_l2{display:flex; gap:6px; align-items:center;}
.bi_in{width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; box-sizing:border-box; min-width:0;}
.bi_in:focus{outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px #ede9fe;}
.bi_ck{display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:12px; color:#374151;}
.bi_btns{display:flex; gap:4px;}
.bi_btns button{width:30px; height:30px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; font-size:13px;}
.bi_btns button:disabled{opacity:.35; cursor:default;}
.bi_btns .bi_del{width:auto; padding:0 10px; color:#dc2626;}
.bi_empty{padding:30px; text-align:center; color:#9ca3af; border:1px dashed #e5e7eb; border-radius:10px;}
@media screen and (max-width:640px){
  .bi_row{grid-template-columns:22px minmax(0, 1fr);}
  .bi_no{display:none;}
  .bi_icwrap, .bi_fields, .bi_btns{grid-column:2;}
}