/* ============================================================
   TTSoft 디자인 스킨 v3 · 오로라 글라스 (SUIT 글꼴) (theme.css · style.css 다음에 불러옵니다)
   - 새 화면(Views/User)과 한 세트입니다. 되돌리려면 백업해 둔 ttsoft.css 와 Views/User 폴더를 다시 올리세요.
   - 색을 바꾸고 싶으면 아래에서 "★ 색상 설정" 을 찾아 그 블록의 값만 고치세요.
   ============================================================ */
/* ============================================================
   01. 기본 토큰 · 타이포 · 버튼 · 폼
   (body 에 class="tt" 가 있을 때만 적용됩니다)
   ============================================================ */
body.tt{
    
     --tt-line2:#EEF1F8;
  --tt-ink:#17171A; --tt-body:#3A4254; --tt-sub:#667085; --tt-mut:#98A2B3;
  --tt-r:8px; --tt-rl:14px;
  --tt-grad:linear-gradient(135deg,var(--tt-a1) 0%,var(--tt-a2) 100%);
  --tt-glow:0 8px 18px -6px rgba(var(--tt-a2-rgb),.5);
  --tt-card:0 1px 2px rgba(var(--tt-sh-rgb),.04),0 6px 18px -8px rgba(var(--tt-sh-rgb),.12);
  --tt-font:'SUIT Variable',SUIT,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  --tt-wrap:1200px;

  /* Cartzilla 기본 변수 덮어쓰기 */
  --cz-primary:var(--tt-a1); --cz-primary-rgb:47,107,255;
  --cz-accent:var(--tt-a2); --cz-accent-rgb:29,63,208;
  --cz-link-color:var(--tt-a2); --cz-link-hover-color:var(--tt-a3);
  --cz-body-color:#3A4254; --cz-body-color-rgb:58,66,84;
  --cz-border-color:var(--tt-line);
  --cz-border-radius:8px; --cz-border-radius-sm:6px; --cz-border-radius-lg:12px;
  --cz-font-sans-serif:var(--tt-font); --cz-body-font-family:var(--tt-font);
  --cz-nav-link-color:#17171A;
  --cz-success:#16A34A; --cz-danger:#E5484D; --cz-warning:#F59E0B; --cz-info:var(--tt-a1);
  --cz-success-rgb:22,163,74; --cz-danger-rgb:229,72,77; --cz-warning-rgb:245,158,11; --cz-info-rgb:47,107,255;

  font-family:var(--tt-font); color:var(--tt-body); background:#fff;
  letter-spacing:-.015em; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
body.tt h1,body.tt h2,body.tt h3,body.tt h4,body.tt h5,body.tt h6,
body.tt .h1,body.tt .h2,body.tt .h3,body.tt .h4,body.tt .h5,body.tt .h6{
  font-family:var(--tt-font); color:var(--tt-ink); font-weight:600; letter-spacing:-.03em; line-height:1.3;
}
body.tt .text-muted{ color:var(--tt-sub) !important; }
body.tt .text-accent{ color:var(--tt-a2) !important; }
body.tt .text-dark{ color:var(--tt-ink) !important; }
body.tt .bg-secondary{ background-color:var(--tt-tint2) !important; }
body.tt .border-bottom,body.tt .border-top,body.tt .border{ border-color:var(--tt-line) !important; }
body.tt hr{ color:var(--tt-line); }
body.tt ::selection{ background:rgba(var(--tt-a1-rgb),.2); }
body.tt .tt-wrap{ max-width:calc(var(--tt-wrap) + 32px); margin:0 auto; padding:0 16px; }
body.tt .tt-b{ font-weight:600; }

/* ---------- 버튼 ---------- */
body.tt .btn{
  --cz-btn-border-radius:8px; --cz-btn-padding-x:1.2rem; --cz-btn-padding-y:.62rem; --cz-btn-font-size:.9375rem;
  font-family:var(--tt-font); font-weight:600; letter-spacing:-.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
body.tt .btn.d-block{ display:flex !important; }
body.tt .btn-sm{ --cz-btn-padding-y:.4rem; --cz-btn-padding-x:.85rem; --cz-btn-font-size:.8125rem; }
body.tt .btn-lg{ --cz-btn-padding-y:.85rem; --cz-btn-padding-x:1.6rem; --cz-btn-font-size:1.0625rem; }
body.tt .btn i,body.tt .btn .tti{ margin:0 !important; }

body.tt .btn-primary,body.tt .btn-accent{
  --cz-btn-color:#fff; --cz-btn-hover-color:#fff; --cz-btn-active-color:#fff; --cz-btn-disabled-color:#fff;
  --cz-btn-bg:var(--tt-a1); --cz-btn-border-color:transparent;
  --cz-btn-hover-bg:var(--tt-a1); --cz-btn-hover-border-color:transparent;
  --cz-btn-active-bg:var(--tt-a2); --cz-btn-active-border-color:transparent;
  --cz-btn-disabled-bg:var(--tt-a1); --cz-btn-disabled-border-color:transparent;
  --cz-btn-focus-shadow-rgb:47,107,255;
  background-image:var(--tt-grad); box-shadow:var(--tt-glow);
}
body.tt .btn-primary:hover,body.tt .btn-accent:hover{ filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 12px 22px -8px rgba(var(--tt-a2-rgb),.6); }
body.tt .btn-primary:active,body.tt .btn-accent:active{ transform:none; filter:brightness(.96); }
body.tt .btn-primary:disabled,body.tt .btn-primary.disabled{ box-shadow:none; filter:grayscale(.3); }
body.tt .btn-shadow{ box-shadow:var(--tt-glow); }

body.tt .btn-outline-primary,body.tt .btn-outline-accent{
  --cz-btn-color:var(--tt-a2); --cz-btn-border-color:var(--tt-a1); --cz-btn-bg:#fff;
  --cz-btn-hover-color:#fff; --cz-btn-hover-bg:var(--tt-a1); --cz-btn-hover-border-color:var(--tt-a1);
  --cz-btn-active-color:#fff; --cz-btn-active-bg:var(--tt-a2); --cz-btn-active-border-color:var(--tt-a2);
  --cz-btn-disabled-color:var(--tt-a2); --cz-btn-disabled-border-color:var(--tt-a1);
  border-width:1.5px;
}
body.tt .btn-secondary{
  --cz-btn-color:#17171A; --cz-btn-bg:#F1F4FB; --cz-btn-border-color:#F1F4FB;
  --cz-btn-hover-color:#17171A; --cz-btn-hover-bg:var(--tt-line); --cz-btn-hover-border-color:var(--tt-line);
  --cz-btn-active-color:#17171A; --cz-btn-active-bg:var(--tt-line); --cz-btn-active-border-color:var(--tt-line);
}
body.tt .btn-outline-secondary,body.tt .btn-outline-dark,body.tt .btn-outline-light{
  --cz-btn-color:#344054; --cz-btn-border-color:#D0D7E6; --cz-btn-bg:#fff;
  --cz-btn-hover-color:var(--tt-a2); --cz-btn-hover-bg:var(--tt-tint2); --cz-btn-hover-border-color:var(--tt-a1);
  --cz-btn-active-color:var(--tt-a2); --cz-btn-active-bg:var(--tt-tint); --cz-btn-active-border-color:var(--tt-a1);
  border-width:1.5px;
}
body.tt .btn-dark{ --cz-btn-bg:#17171A; --cz-btn-border-color:#17171A; --cz-btn-hover-bg:#2B2F3A; --cz-btn-hover-border-color:#2B2F3A; --cz-btn-color:#fff; --cz-btn-hover-color:#fff; }
body.tt .btn-danger{ --cz-btn-color:#fff; --cz-btn-hover-color:#fff; --cz-btn-bg:#E5484D; --cz-btn-border-color:#E5484D; --cz-btn-hover-bg:#D13338; --cz-btn-hover-border-color:#D13338; }
body.tt .btn-outline-danger{ --cz-btn-color:#D13338; --cz-btn-border-color:#F3B4B6; --cz-btn-hover-bg:#E5484D; --cz-btn-hover-border-color:#E5484D; --cz-btn-hover-color:#fff; border-width:1.5px; }
body.tt .btn-success{ --cz-btn-color:#fff; --cz-btn-hover-color:#fff; --cz-btn-bg:#16A34A; --cz-btn-border-color:#16A34A; --cz-btn-hover-bg:#12873D; --cz-btn-hover-border-color:#12873D; }
body.tt .btn-link{ font-weight:600; color:var(--tt-a2); }
body.tt .btn-close:focus{ box-shadow:none; }

/* ---------- 폼 ---------- */
body.tt .form-label{ font-weight:600; font-size:.875rem; color:#2B3445; margin-bottom:.4rem; }
body.tt .form-control,body.tt .form-select{
  font-family:var(--tt-font); font-size:.9375rem; color:var(--tt-ink);
  min-height:46px; padding:.62rem .95rem; border:1.5px solid var(--tt-line3); border-radius:8px; background-color:#fff;
  transition:border-color .15s,box-shadow .15s;
}
body.tt .form-control-sm,body.tt .form-select-sm{ min-height:36px; padding:.35rem .7rem; font-size:.8125rem; }
body.tt .form-control-lg,body.tt .form-select-lg{ min-height:54px; font-size:1.0625rem; }
body.tt textarea.form-control{ min-height:120px; line-height:1.6; }
body.tt .form-control::placeholder{ color:#A4ACBD; }
body.tt .form-control:hover:not(:disabled):not([readonly]),body.tt .form-select:hover:not(:disabled){ border-color:var(--tt-line3); }
body.tt .form-control:focus,body.tt .form-select:focus{ border-color:var(--tt-a1); box-shadow:0 0 0 4px rgba(var(--tt-a1-rgb),.14); background-color:#fff; }
body.tt .form-control:disabled,body.tt .form-control[readonly]{ background-color:#F4F6FB; color:#667085; }
body.tt .form-select{ padding-right:2.4rem; background-position:right .85rem center; }
body.tt .input-group>.form-control,body.tt .input-group>.form-select{ min-height:46px; }
body.tt .input-group-text{ border:1.5px solid var(--tt-line3); background:var(--tt-tint2); color:var(--tt-sub); font-size:.875rem; font-weight:500; }
body.tt .input-group>.btn{ min-height:46px; }
body.tt .form-check-input{ width:1.15em; height:1.15em; margin-top:.2em; border:1.5px solid var(--tt-line3); }
body.tt .form-check-input:checked{ background-color:var(--tt-a1); border-color:var(--tt-a1); }
body.tt .form-check-input:focus{ box-shadow:0 0 0 4px rgba(var(--tt-a1-rgb),.14); border-color:var(--tt-a1); }
body.tt .form-check-label{ font-size:.9rem; color:var(--tt-body); }
body.tt .form-text{ color:var(--tt-mut); font-size:.8125rem; }
body.tt .invalid-feedback,body.tt .text-danger{ color:#D13338 !important; }
body.tt .is-invalid{ border-color:#E5484D !important; }
body.tt .was-validated .form-control:invalid:focus,body.tt .form-control.is-invalid:focus{ box-shadow:0 0 0 4px rgba(229,72,77,.14); }

/* ---------- 배지 / 알림 ---------- */
body.tt .badge{ font-family:var(--tt-font); font-weight:600; letter-spacing:-.01em; border-radius:6px; padding:.38em .62em; font-size:.72rem; }
body.tt .badge.bg-danger{ background:#FFE9EA !important; color:#D13338; }
body.tt .badge.bg-success{ background:#E3F6EA !important; color:#12873D; }
body.tt .badge.bg-info{ background:var(--tt-tint) !important; color:var(--tt-a2); }
body.tt .badge.bg-warning{ background:#FFF1D6 !important; color:#B26A00; }
body.tt .badge.bg-primary{ background:var(--tt-tint) !important; color:var(--tt-a2); }
body.tt .badge.bg-secondary{ background:#EEF1F8 !important; color:#475467; }
body.tt .badge.bg-dark{ background:#17171A !important; color:#fff; }
body.tt .badge.badge-shadow{ box-shadow:none; }
body.tt .alert{ border-radius:10px; border-width:1px; font-size:.9rem; }

/* ---------- 모달 · 오프캔버스 · 아코디언 ---------- */
body.tt .modal-content{ border:0; border-radius:16px; box-shadow:0 30px 60px -20px rgba(var(--tt-sh-rgb),.35); }
body.tt .modal-header{ border-bottom:1px solid var(--tt-line); padding:1.1rem 1.4rem; }
body.tt .modal-title{ font-weight:600; font-size:1.05rem; }
body.tt .modal-footer{ border-top:1px solid var(--tt-line); }
body.tt .offcanvas{ border-color:var(--tt-line); }
body.tt .accordion-item{ border:1px solid var(--tt-line) !important; border-radius:12px !important; margin-bottom:10px; overflow:hidden; box-shadow:none; }
body.tt .accordion-button{ font-weight:600; color:var(--tt-ink); background:#fff; padding:1.05rem 1.25rem; box-shadow:none; }
body.tt .accordion-button:not(.collapsed){ color:var(--tt-a2); background:var(--tt-tint2); box-shadow:none; }
body.tt .accordion-button:focus{ box-shadow:0 0 0 4px rgba(var(--tt-a1-rgb),.12); }
body.tt .accordion-body{ color:var(--tt-body); line-height:1.75; }

/* ---------- 탭 · 브레드크럼 ---------- */
body.tt .nav-tabs{ border-bottom:1px solid var(--tt-line); }
body.tt .nav-tabs .nav-link{ border:0; border-bottom:3px solid transparent; color:var(--tt-sub); font-weight:500; padding:.8rem 1.1rem; background:none; }
body.tt .nav-tabs .nav-link:hover{ color:var(--tt-a2); }
body.tt .nav-tabs .nav-link.active{ color:var(--tt-a2); font-weight:600; border-bottom-color:var(--tt-a1); background:none; }
body.tt .breadcrumb{ font-size:.8125rem; margin:0; flex-wrap:wrap; }
body.tt .breadcrumb-item a{ color:var(--tt-sub); }
body.tt .breadcrumb-item.active{ color:var(--tt-ink); font-weight:500; }
body.tt .breadcrumb-item+.breadcrumb-item::before{ color:#C4CBDA; }

/* ---------- 스크롤 / 접근성 ---------- */
body.tt a:focus-visible,body.tt button:focus-visible{ outline:3px solid rgba(var(--tt-a1-rgb),.35); outline-offset:2px; border-radius:6px; }
body.tt .ck-editor__editable{ min-height:360px; border-radius:0 0 8px 8px !important; }
body.tt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){ border-color:var(--tt-line3) !important; }
body.tt .ck.ck-toolbar{ border-color:var(--tt-line3) !important; border-radius:8px 8px 0 0 !important; background:#F7F9FE !important; }

/* ============================================================
   02. 공통 레이아웃 : 상단 공지줄 · 헤더 · 메뉴 · 푸터 · 플로팅 · 마이페이지
   ============================================================ */

/* ---------- 상단 공지줄 (공지 롤링은 기존 Top-Notice API 그대로 사용) ---------- */
body.tt .tt-util{ background:var(--tt-tint2); border-bottom:1px solid var(--tt-line); font-size:calc(13px*var(--tt-fs)); color:var(--tt-sub); }
body.tt .tt-util-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; }
body.tt .tt-notice-wrap{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; max-width:640px; }
body.tt .tt-notice-tag{ flex:none; display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:999px; background:var(--tt-grad); color:#fff; font-size:max(11px,calc(11px*var(--tt-fs))); font-weight:600; }
body.tt .tt-notice-tag .tti{ width:12px; height:12px; }
body.tt .tt-notice{ position:relative; flex:1; min-width:0; left:auto !important; transform:none !important; height:40px; overflow:hidden; }
body.tt .tt-notice .tns-outer,body.tt .tt-notice .tns-ovh,body.tt .tt-notice .tns-inner{ height:40px; }
body.tt .tt-notice .tns-carousel-inner:empty::before{ content:"비즈니스 성장을 위한 혁신적인 마케팅 프로그램"; display:block; line-height:40px; color:#475467; font-weight:500; }
body.tt .tt-notice .topbar-text{ display:block; line-height:40px; height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#344054; font-weight:500; text-decoration:none; }
body.tt .tt-notice .topbar-text:hover{ color:var(--tt-a2); }
body.tt .tt-notice .tns-controls,body.tt .tt-notice [data-controls]{ display:none !important; }
body.tt .tt-util-nav{ display:flex; align-items:center; gap:2px; flex:none; }
body.tt .tt-util-nav a{ display:inline-flex; align-items:center; gap:5px; padding:0 10px; height:40px; color:#667085; font-weight:500; }
body.tt .tt-util-nav a:hover{ color:var(--tt-a2); }
body.tt .tt-util-nav a.on{ color:var(--tt-ink); font-weight:600; }
body.tt .tt-util-nav .tti{ width:14px; height:14px; }
body.tt .tt-util-nav .tt-who{ color:var(--tt-ink); font-weight:600; padding-right:4px; }

/* ---------- 메인 헤더 ---------- */
body.tt .tt-header{ background:#fff; position:relative; z-index:1031; }
body.tt .tt-main-in{ display:flex; align-items:center; gap:28px; min-height:84px; }
body.tt .tt-logo{ flex:none; display:block; line-height:0; }
body.tt .tt-logo img{ width:150px; height:auto; display:block; }
body.tt .tt-search{ position:relative; flex:1; max-width:640px; margin:0 auto; display:flex; align-items:center; height:48px; border:2px solid var(--tt-a1); border-radius:8px; background:#fff; box-shadow:0 0 0 0 rgba(var(--tt-a1-rgb),0); transition:box-shadow .2s; padding:0 0 0 14px; }
body.tt .tt-search:focus-within{ box-shadow:0 0 0 5px rgba(var(--tt-a1-rgb),.14); }
body.tt .tt-search>.tti{ color:#98A2B3; margin-right:8px; width:18px; height:18px; }
body.tt .tt-search input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; font-size:calc(15px*var(--tt-fs)); color:var(--tt-ink); padding:0; }
body.tt .tt-search input::placeholder{ color:#A4ACBD; }
body.tt .tt-search button{ flex:none; height:100%; padding:0 22px; margin:0; border:0; border-radius:0 5px 5px 0; background:var(--tt-grad); color:#fff; font-weight:600; font-size:calc(14.5px*var(--tt-fs)); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
body.tt .tt-search button:hover{ filter:brightness(1.08); }
body.tt .tt-tools{ flex:none; display:flex; align-items:center; gap:8px; margin-left:auto; }
body.tt .tt-search+.tt-tools{ margin-left:0; }
body.tt .tt-tbtn{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 15px; border-radius:8px; font-size:calc(14px*var(--tt-fs)); font-weight:600; line-height:1; white-space:nowrap; border:1.5px solid var(--tt-line); background:#fff; color:#17171A; transition:border-color .15s,color .15s,background .15s,transform .15s; }
body.tt .tt-tbtn:hover{ border-color:var(--tt-a1); color:var(--tt-a2); background:var(--tt-tint2); }
body.tt .tt-tbtn .tti{ width:17px; height:17px; }
body.tt .tt-tbtn b{ font-weight:600; color:var(--tt-a2); }
body.tt .tt-tbtn.dark{ background:#17171A; border-color:#17171A; color:#fff; box-shadow:0 8px 16px -8px rgba(0,0,0,.5); }
body.tt .tt-tbtn.dark:hover{ background:#2B2F3A; color:#fff; border-color:#2B2F3A; }
body.tt .tt-burger{ display:none; width:42px; height:42px; padding:0; align-items:center; justify-content:center; border:1.5px solid var(--tt-line); border-radius:8px; background:#fff; color:#17171A; }
body.tt .tt-burger .tti{ width:22px; height:22px; }

/* ---------- 메뉴 바 (스크롤 시 상단 고정) ---------- */
body.tt .tt-nav{ position:sticky; top:0; z-index:1030; background:#fff; border-top:1px solid var(--tt-line); border-bottom:2px solid var(--tt-a1); }
body.tt .tt-nav .navbar{ padding:0; }
body.tt .tt-nav-in{ display:flex; align-items:stretch; width:100%; }
body.tt .tt-nav .navbar-collapse{ align-items:stretch; }
body.tt .tt-nav-list{ display:flex; align-items:stretch; gap:2px; margin:0; padding:0; list-style:none; flex-wrap:wrap; }
body.tt .tt-nav .nav-item{ position:relative; display:flex; }
body.tt .tt-nav .nav-link{ display:flex; align-items:center; height:54px; padding:0 18px; font-size:calc(15.5px*var(--tt-fs)); font-weight:600; color:var(--tt-ink); letter-spacing:-.02em; transition:color .15s; }
body.tt .tt-nav .nav-link:hover,body.tt .tt-nav .nav-item.show>.nav-link,body.tt .tt-nav .nav-link.active{ color:var(--tt-a2); }
body.tt .tt-nav .dropdown-toggle::after{ content:""; display:inline-block; border:0; width:11px; height:11px; margin-left:6px; background:currentColor; opacity:.5; -webkit-mask:var(--tti) center/contain no-repeat; mask:var(--tti) center/contain no-repeat; --tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); vertical-align:0; transition:transform .2s; }
body.tt .tt-nav .nav-item.show>.dropdown-toggle::after{ transform:rotate(180deg); }
body.tt .tt-nav .tt-allcat>.nav-link{ background:var(--tt-grad); color:#fff; padding:0 24px; margin-right:8px; gap:9px; }
body.tt .tt-nav .tt-allcat>.nav-link:hover,body.tt .tt-nav .tt-allcat.show>.nav-link{ color:#fff; filter:brightness(1.08); }
body.tt .tt-nav .tt-allcat>.nav-link .tti{ width:19px; height:19px; }
body.tt .tt-nav .tt-allcat>.nav-link::after{ opacity:.85; }
body.tt .tt-nav .tt-tg{ margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--tt-a2); font-weight:600; font-size:calc(14.5px*var(--tt-fs)); padding-left:12px; }
body.tt .tt-nav .tt-tg:hover{ color:var(--tt-a3); }
body.tt .tt-nav .dropdown-menu{ margin-top:0; padding:8px; min-width:208px; border:1px solid var(--tt-line); border-radius:12px; box-shadow:0 18px 40px -14px rgba(21,49,160,.28); top:100%; }
body.tt .tt-nav .dropdown-item{ display:flex; align-items:center; gap:10px; padding:.6rem .8rem; border-radius:8px; font-size:calc(14.5px*var(--tt-fs)); font-weight:500; color:#2B3445; white-space:normal; }
body.tt .tt-nav .dropdown-item:hover,body.tt .tt-nav .dropdown-item:focus,body.tt .tt-nav .dropdown-item:active{ background:var(--tt-tint); color:var(--tt-a2); }
body.tt .tt-nav .dropdown-item .tti{ color:var(--tt-a1); width:20px; height:20px; }
body.tt .tt-nav .dropdown-item b{ display:block; font-weight:600; color:var(--tt-ink); }
body.tt .tt-nav .dropdown-item small{ display:block; color:var(--tt-mut); font-size:max(11px,calc(12px*var(--tt-fs))); line-height:1.4; }
body.tt .tt-nav .dropdown-divider{ margin:6px 4px; border-color:var(--tt-line2); }
body.tt .tt-nav .tt-allcat .dropdown-menu{ min-width:260px; }
body.tt .tt-nav .tt-allcat .dropdown-item{ font-weight:500; }
body.tt .tt-m-search{ display:none; }

@media (min-width:992px){
  body.tt .tt-nav .nav-item.dropdown:hover>.dropdown-menu{ display:block; }
  body.tt .tt-nav .nav-item.dropdown:hover>.dropdown-toggle{ color:var(--tt-a2); }
  body.tt .tt-nav .tt-allcat.dropdown:hover>.dropdown-toggle{ color:#fff; }
  body.tt .tt-nav .nav-item.dropdown:hover>.dropdown-toggle::after{ transform:rotate(180deg); }
  body.tt .tt-nav .navbar-collapse{ display:flex !important; }
}

/* ---------- 푸터 ---------- */
body.tt .tt-footer{ background:#fff; border-top:1px solid var(--tt-line); margin-top:72px; padding:38px 0 46px; color:#667085; font-size:calc(13px*var(--tt-fs)); line-height:1.9; }
body.tt .tt-footer-in{ display:flex; justify-content:space-between; gap:32px; align-items:flex-start; flex-wrap:wrap; }
body.tt .tt-footer img{ width:132px; height:auto; display:block; margin-bottom:14px; }
body.tt .tt-footer a{ color:#475467; }
body.tt .tt-footer a:hover{ color:var(--tt-a2); }
body.tt .tt-footer-nav{ display:flex; gap:22px; flex-wrap:wrap; font-weight:500; }
body.tt .tt-copy{ color:#98A2B3; }

/* ---------- 플로팅 버튼 (텔레그램 · 맨 위로) ---------- */
body.tt .btn-telegram,body.tt .btn-scroll-top{ left:auto !important; right:24px !important; border-radius:50% !important; display:flex !important; align-items:center; justify-content:center; box-shadow:0 12px 26px -8px rgba(var(--tt-sh-rgb),.5); transition:transform .2s,opacity .3s,background .2s; }
body.tt .btn-telegram{ bottom:88px !important; width:52px !important; height:52px !important; background:var(--tt-grad) !important; color:#fff; opacity:1; }
body.tt .btn-telegram:hover{ transform:translateY(-3px); color:#fff; }
body.tt .btn-telegram .tti{ width:23px; height:23px; margin-right:2px; }
body.tt .btn-scroll-top{ bottom:24px !important; width:52px !important; height:52px !important; background:#17171A !important; color:#fff; }
body.tt .btn-scroll-top:hover{ transform:translateY(-3px); background:#2B2F3A !important; }
body.tt .btn-scroll-top .tti{ width:21px; height:21px; }
body.tt .btn-scroll-top .btn-scroll-top-tooltip{ display:none; }

/* ---------- 모바일 하단 바 / 마이페이지 오프캔버스 ---------- */
body.tt .handheld-toolbar{ border-top:1px solid var(--tt-line); box-shadow:0 -10px 30px -12px rgba(var(--tt-sh-rgb),.18); background:rgba(255,255,255,.97); }
body.tt .handheld-toolbar-item{ border-left:0 !important; padding:.55rem .5rem .45rem; }
body.tt .handheld-toolbar-icon{ color:#344054; font-size:1.25rem; }
body.tt .handheld-toolbar-icon .tti{ width:22px; height:22px; }
body.tt .handheld-toolbar-label{ color:#667085; font-size:.6875rem; font-weight:500; }
body.tt .handheld-toolbar-item:hover .handheld-toolbar-icon,body.tt .handheld-toolbar-item:hover .handheld-toolbar-label{ color:var(--tt-a2); }

body.tt .tt-oc{ width:340px; }
body.tt .tt-oc .offcanvas-header{ padding:20px 22px; background:var(--tt-grad); color:#fff; border:0; align-items:flex-start; }
body.tt .tt-oc .offcanvas-title{ color:#fff; font-size:1.0625rem; font-weight:600; line-height:1.4; margin:0; }
body.tt .tt-oc .offcanvas-title small{ display:block; font-size:max(11px,calc(12px*var(--tt-fs))); font-weight:500; opacity:.8; }
body.tt .tt-oc .btn-close{ filter:invert(1) grayscale(1) brightness(2); opacity:.9; }
body.tt .tt-oc-cash{ margin:16px 18px 6px; padding:14px 16px; border-radius:12px; background:var(--tt-tint2); border:1px solid var(--tt-line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
body.tt .tt-oc-cash span{ font-size:max(11px,calc(12px*var(--tt-fs))); color:var(--tt-sub); display:block; }
body.tt .tt-oc-cash b{ font-size:calc(20px*var(--tt-fs)); font-weight:600; color:var(--tt-ink); letter-spacing:-.03em; }
body.tt .tt-oc .offcanvas-body{ padding:8px 12px; }
body.tt .tt-oc .nav-link{ display:flex; align-items:center; gap:12px; padding:.78rem .8rem !important; border-radius:10px; font-weight:500; font-size:calc(15px*var(--tt-fs)); color:var(--tt-ink); }
body.tt .tt-oc .nav-link .tti{ width:20px; height:20px; color:var(--tt-a1); }
body.tt .tt-oc .nav-link:hover{ background:var(--tt-tint); color:var(--tt-a2); }
body.tt .tt-oc .offcanvas-footer{ padding:14px 18px 18px; border-top:1px solid var(--tt-line); display:flex; }

/* ---------- 반응형 ---------- */
@media (max-width:991.98px){
  body.tt .tt-util-nav{ display:none; }
  body.tt .tt-notice-wrap{ max-width:none; }
  body.tt .tt-main-in{ min-height:64px; gap:12px; }
  body.tt .tt-logo img{ width:122px; }
  body.tt .tt-search{ display:none; }
  body.tt .tt-tools{ margin-left:auto; }
  body.tt .tt-tbtn.tt-hide-m{ display:none; }
  body.tt .tt-burger{ display:inline-flex; }
  body.tt .tt-nav{ position:relative; border-top:0; border-bottom:0; }
  body.tt .tt-nav .navbar-collapse{ padding:4px 0 14px; border-top:1px solid var(--tt-line); }
  body.tt .tt-nav-list{ flex-direction:column; width:100%; gap:0; }
  body.tt .tt-nav .nav-item{ flex-direction:column; border-bottom:1px solid var(--tt-line2); }
  body.tt .tt-nav .nav-link{ height:50px; padding:0 4px; justify-content:space-between; }
  body.tt .tt-nav .tt-allcat>.nav-link{ margin:8px 0; border-radius:8px; padding:0 18px; justify-content:flex-start; }
  body.tt .tt-nav .dropdown-menu{ position:static !important; transform:none !important; border:0; box-shadow:none; background:var(--tt-tint2); border-radius:10px; margin:0 0 10px; padding:6px; }
  body.tt .tt-nav .tt-tg{ margin:14px 0 0; }
  body.tt .tt-m-search{ display:flex; margin:12px 0 4px; }
  body.tt .tt-m-search.tt-search{ display:flex; max-width:none; height:46px; }
  body.tt .tt-footer{ margin-top:48px; padding-bottom:84px; }
  body.tt .btn-telegram{ right:14px !important; bottom:78px !important; width:46px !important; height:46px !important; }
  body.tt .btn-scroll-top{ right:14px !important; bottom:132px !important; width:42px !important; height:42px !important; }
}
@media (max-width:575.98px){
  body.tt .tt-notice-tag span{ display:none; }
  body.tt .tt-tbtn{ height:38px; padding:0 11px; font-size:calc(13px*var(--tt-fs)); }
  body.tt .tt-oc{ width:88vw; }
}

/* ============================================================
   03. 메인 화면
   ============================================================ */
body.tt .tt-hero{ background:linear-gradient(180deg,var(--tt-tint) 0%,#fff 100%); padding:54px 0 34px; overflow:hidden; }
body.tt .tt-hero-in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:center; }
body.tt .tt-slides{ display:grid; min-height:176px; align-content:start; }
body.tt .tt-slide{ grid-area:1/1; opacity:0; animation:tt-sl 10s infinite both; }
body.tt .tt-slide.s2{ animation-delay:5s; }
@keyframes tt-sl{ 0%{opacity:0;transform:translateY(12px)} 6%{opacity:1;transform:none} 46%{opacity:1;transform:none} 52%{opacity:0;transform:translateY(-8px)} 100%{opacity:0} }
body.tt .tt-tag{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 13px; border-radius:999px; background:var(--tt-grad); color:#fff; font-size:max(11px,calc(12.5px*var(--tt-fs))); font-weight:600; box-shadow:var(--tt-glow); }
body.tt .tt-tag .tti{ width:13px; height:13px; }
body.tt .tt-hook{ margin:18px 0 4px; font-size:calc(23px*var(--tt-fs)); font-weight:600; color:#2B3445; letter-spacing:-.03em; line-height:1.4; }
body.tt .tt-h1{ margin:0; font-size:calc(56px*var(--tt-fs)); font-weight:700; letter-spacing:-.045em; line-height:1.18; background:linear-gradient(100deg,var(--tt-a1) 10%,var(--tt-a2) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
body.tt .tt-hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
body.tt .tt-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
body.tt .tt-chips a{ display:inline-flex; align-items:center; height:34px; padding:0 15px; border-radius:999px; background:#fff; color:var(--tt-a2); font-size:calc(13.5px*var(--tt-fs)); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--tt-line3); transition:all .15s; }
body.tt .tt-chips a:hover{ background:var(--tt-a1); color:#fff; box-shadow:inset 0 0 0 1.5px var(--tt-a1); transform:translateY(-1px); }
body.tt .tt-hero-art{ min-width:0; }
body.tt .tt-art{ display:block; width:100%; max-width:540px; margin:0 auto; height:auto; overflow:visible; }
body.tt .tt-fl{ animation:tt-fl 6s ease-in-out infinite; }
body.tt .tt-fl2{ animation-duration:8s; animation-direction:reverse; }
@keyframes tt-fl{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* 바로가기 */
body.tt .tt-quick{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; padding-top:26px; }
body.tt .tt-quick a{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px 0; color:var(--tt-ink); font-size:calc(13.5px*var(--tt-fs)); font-weight:600; letter-spacing:-.02em; text-align:center; }
body.tt .tt-q-ic{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--tt-tint); color:var(--tt-a1); transition:transform .2s,background .2s,color .2s,box-shadow .2s; }
body.tt .tt-q-ic .tti{ width:27px; height:27px; }
body.tt .tt-quick a:hover .tt-q-ic{ background:var(--tt-grad); color:#fff; transform:translateY(-4px); box-shadow:var(--tt-glow); }
body.tt .tt-quick a:hover{ color:var(--tt-a2); }

/* 섹션 헤더 / 탭 */
body.tt .tt-sec{ margin-top:56px; }
body.tt .tt-sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 20px; border-bottom:1px solid var(--tt-line); }
body.tt .tt-sec-title{ margin:0 0 10px; display:flex; align-items:center; gap:12px; font-size:calc(28px*var(--tt-fs)); font-weight:600; letter-spacing:-.04em; }
body.tt .tt-sec-title small{ font-size:calc(15px*var(--tt-fs)); font-weight:500; color:var(--tt-sub); letter-spacing:-.02em; margin-left:2px; }
body.tt .tt-sec-title small b{ color:var(--tt-a1); font-weight:600; }
body.tt .tt-sec-ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:var(--tt-grad); color:#fff; box-shadow:var(--tt-glow); flex:none; }
body.tt .tt-sec-ic .tti{ width:22px; height:22px; }
body.tt .tt-tabs{ display:flex; flex-wrap:wrap; }
body.tt .tt-tabs a{ display:inline-flex; align-items:center; min-height:46px; padding:0 18px; font-size:calc(15px*var(--tt-fs)); font-weight:500; color:#555E70; border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .15s; }
body.tt .tt-tabs a:hover{ color:var(--tt-a2); }
body.tt .tt-tabs a.on{ color:var(--tt-a2); font-weight:600; border-bottom-color:var(--tt-a1); }

/* 프로그램 카드 */
body.tt .tt-pgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:24px; }
body.tt .tt-pcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--tt-line3); border-top:4px solid var(--tt-a1); border-radius:12px; overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s; }
body.tt .tt-pcard:hover{ transform:translateY(-4px); box-shadow:0 22px 34px -18px rgba(var(--tt-a2-rgb),.35); border-color:var(--tt-line3); border-top-color:var(--tt-a1); }
body.tt .tt-pthumb{ position:relative; display:block; aspect-ratio:4/3; background:var(--tt-tint2); overflow:hidden; }
body.tt .tt-pthumb img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .35s; }
body.tt .tt-pcard:hover .tt-pthumb img{ transform:scale(1.04); }
body.tt .tt-pbadge{ position:absolute; left:12px; top:12px; margin:0; padding:.42em .75em; border-radius:999px; font-size:max(11px,calc(11.5px*var(--tt-fs))); font-weight:600; letter-spacing:0; color:#fff !important; background:var(--tt-a1) !important; box-shadow:0 6px 12px -6px rgba(0,0,0,.4); }
body.tt .tt-pbadge.bg-danger{ background:#F04452 !important; }
body.tt .tt-pbadge.bg-success{ background:#16A34A !important; }
body.tt .tt-pbadge.bg-warning{ background:#F59E0B !important; }
body.tt .tt-pbadge.bg-info,body.tt .tt-pbadge.bg-primary,body.tt .tt-pbadge.bg-accent{ background:var(--tt-a1) !important; }
body.tt .tt-pbadge.bg-dark{ background:#17171A !important; }
body.tt .tt-pbadge.bg-secondary{ background:#667085 !important; }
body.tt .tt-pcert{ position:absolute; right:12px; top:12px; display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:999px; background:rgba(255,255,255,.96); color:var(--tt-a2); font-size:max(11px,calc(11.5px*var(--tt-fs))); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--tt-line3); }
body.tt .tt-pcert .tti{ width:12px; height:12px; }
body.tt .tt-pbody{ display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
body.tt .tt-pmeta{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:max(11px,calc(12.5px*var(--tt-fs))); }
body.tt .tt-pmeta a{ color:var(--tt-a1); font-weight:600; }
body.tt .tt-pdl{ display:inline-flex; align-items:center; gap:4px; color:var(--tt-mut); font-weight:500; }
body.tt .tt-pdl .tti{ width:13px; height:13px; }
body.tt .tt-ptitle{ margin:8px 0 14px; font-size:calc(17px*var(--tt-fs)); font-weight:600; letter-spacing:-.035em; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.tt .tt-ptitle a{ color:var(--tt-ink); }
body.tt .tt-ptitle a:hover{ color:var(--tt-a2); }
body.tt .tt-pfoot{ margin-top:auto; padding-top:14px; border-top:1px dashed #DDE6FA; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
body.tt .tt-pdisc{ display:flex; align-items:center; gap:6px; font-size:max(11px,calc(12.5px*var(--tt-fs))); line-height:1; min-height:15px; }
body.tt .tt-pdisc b{ color:#F04452; font-weight:600; }
body.tt .tt-pdisc del{ color:#A4ACBD; }
body.tt .tt-pnow{ display:flex; align-items:baseline; gap:1px; margin-top:5px; font-size:calc(14px*var(--tt-fs)); font-weight:600; color:var(--tt-ink); white-space:nowrap; }
body.tt .tt-pnow strong{ font-size:calc(23px*var(--tt-fs)); font-weight:700; letter-spacing:-.04em; }
body.tt .tt-pterm{ margin-left:7px; padding:2px 7px; border-radius:6px; background:var(--tt-tint); color:var(--tt-a2); font-size:max(11px,calc(11.5px*var(--tt-fs))); font-weight:600; }
body.tt .tt-pfoot .btn{ flex:none; }
body.tt .tt-pfoot .btn .tti{ width:14px; height:14px; margin-left:2px !important; }
body.tt .tt-empty{ margin-top:24px; padding:56px 0; text-align:center; color:var(--tt-mut); border:1.5px dashed var(--tt-line); border-radius:12px; }
body.tt .tt-empty .tti{ width:36px; height:36px; color:var(--tt-line3); }
body.tt .tt-empty p{ margin:10px 0 0; font-size:calc(15px*var(--tt-fs)); }

/* 랭킹 / 이용 방법 */
body.tt .tt-duo{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; margin-top:56px; }
body.tt .tt-duo>*{ min-width:0; }
body.tt .tt-box{ border:1.5px solid var(--tt-line3); border-radius:14px; padding:24px 26px; background:#fff; }
body.tt .tt-box.tint{ background:var(--tt-tint); border-color:var(--tt-tint); }
body.tt .tt-box-title{ margin:0 0 10px; display:flex; align-items:center; gap:10px; font-size:calc(19px*var(--tt-fs)); font-weight:600; }
body.tt .tt-box-title .tti{ width:22px; height:22px; color:var(--tt-a1); }
body.tt .tt-rank,body.tt .tt-steps{ list-style:none; margin:0; padding:0; }
body.tt .tt-rank li{ display:flex; align-items:center; gap:14px; min-height:54px; border-top:1px solid #EEF1F8; }
body.tt .tt-rank li:first-child{ border-top:0; }
body.tt .tt-rn{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:#EEF1F8; color:#667085; font-size:calc(13px*var(--tt-fs)); font-weight:600; }
body.tt .tt-rank li:nth-child(-n+3) .tt-rn{ background:var(--tt-grad); color:#fff; box-shadow:0 5px 10px -4px rgba(var(--tt-a2-rgb),.5); }
body.tt .tt-rank a{ flex:1; min-width:0; color:var(--tt-ink); font-weight:500; font-size:calc(15.5px*var(--tt-fs)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.tt .tt-rank a:hover{ color:var(--tt-a2); }
body.tt .tt-rc{ display:inline-flex; align-items:center; gap:4px; color:var(--tt-mut); font-size:max(11px,calc(12.5px*var(--tt-fs))); }
body.tt .tt-rc .tti{ width:13px; height:13px; }
body.tt .tt-steps li a{ display:flex; align-items:center; gap:14px; min-height:62px; color:var(--tt-ink); border-radius:10px; transition:background .15s; }
body.tt .tt-steps li a:hover{ background:rgba(255,255,255,.7); }
body.tt .tt-si{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--tt-grad); color:#fff; box-shadow:0 8px 14px -6px rgba(var(--tt-a2-rgb),.55); }
body.tt .tt-si .tti{ width:20px; height:20px; }
body.tt .tt-steps b{ display:block; font-size:calc(15px*var(--tt-fs)); font-weight:600; }
body.tt .tt-steps small{ display:block; font-size:max(11px,calc(12.5px*var(--tt-fs))); color:var(--tt-sub); }

/* 하단 CTA */
body.tt .tt-cta{ margin-top:20px; display:flex; align-items:center; gap:18px; padding:26px 32px; border-radius:16px; background:var(--tt-grad); color:#fff; position:relative; overflow:hidden; box-shadow:0 24px 40px -22px rgba(var(--tt-a2-rgb),.7); }
body.tt .tt-cta::before{ content:""; position:absolute; right:-60px; top:-90px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.08); }
body.tt .tt-cta::after{ content:""; position:absolute; right:130px; bottom:-130px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.06); }
body.tt .tt-cta>*{ position:relative; z-index:1; }
body.tt .tt-cta-ic{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.18); }
body.tt .tt-cta-ic .tti{ width:26px; height:26px; }
body.tt .tt-cta-txt{ flex:1; min-width:0; }
body.tt .tt-cta-txt b{ display:block; font-size:calc(22px*var(--tt-fs)); font-weight:600; letter-spacing:-.04em; }
body.tt .tt-cta-txt span{ display:block; font-size:calc(14px*var(--tt-fs)); opacity:.85; margin-top:2px; }
body.tt .tt-cta-btn{ display:flex; gap:8px; flex-wrap:wrap; }
body.tt .tt-cta .btn-light{ background:#fff; color:var(--tt-a2); border-color:#fff; }
body.tt .tt-cta .btn-light:hover{ background:var(--tt-tint); color:var(--tt-a2); }
body.tt .btn-cta-line{ border:1.5px solid rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.1); }
body.tt .btn-cta-line:hover{ background:rgba(255,255,255,.2); color:#fff; border-color:#fff; }

/* 팝업(관리자 등록 팝업) */
body.tt .popup-layer{ z-index:1060; width:380px; filter:drop-shadow(0 24px 36px rgba(var(--tt-sh-rgb),.28)); }
body.tt .popup-layer .card{ border:0; border-radius:14px; overflow:hidden; }
body.tt .popup-layer .card-header{ background:var(--tt-grad); color:#fff; font-weight:600; border:0 !important; padding:14px 18px; }
body.tt .popup-layer .card-body{ padding:18px; }
body.tt .popup-layer .card-footer{ background:var(--tt-tint2); border-top:1px solid var(--tt-line); }
body.tt .popup-layer .card-footer .btn{ box-shadow:none; }

/* ---------- 반응형 ---------- */
@media (max-width:1199.98px){
  body.tt .tt-pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.tt .tt-h1{ font-size:calc(46px*var(--tt-fs)); }
}
@media (max-width:991.98px){
  body.tt .tt-hero{ padding:34px 0 22px; }
  body.tt .tt-hero-in{ grid-template-columns:1fr; gap:10px; }
  body.tt .tt-hero-art{ order:-1; max-width:360px; margin:0 auto; }
  body.tt .tt-slides{ min-height:190px; }
  body.tt .tt-h1{ font-size:calc(40px*var(--tt-fs)); }
  body.tt .tt-hook{ font-size:calc(19px*var(--tt-fs)); }
  body.tt .tt-quick{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:6px; }
  body.tt .tt-q-ic{ width:58px; height:58px; }
  body.tt .tt-duo{ grid-template-columns:minmax(0,1fr); }
  body.tt .tt-pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.tt .tt-sec{ margin-top:42px; }
  body.tt .tt-sec-title{ font-size:calc(23px*var(--tt-fs)); }
  body.tt .tt-tabs{ overflow-x:auto; flex-wrap:nowrap; width:100%; scrollbar-width:none; }
  body.tt .tt-tabs::-webkit-scrollbar{ display:none; }
  body.tt .tt-tabs a{ flex:none; padding:0 14px; }
  body.tt .tt-cta{ flex-wrap:wrap; padding:22px; }
  body.tt .tt-cta-txt{ flex-basis:60%; }
  body.tt .tt-cta-btn{ width:100%; }
  body.tt .tt-cta-btn .btn{ flex:1; }
}
@media (max-width:575.98px){
  body.tt .tt-hero-art{ max-width:290px; }
  body.tt .tt-slides{ min-height:168px; }
  body.tt .tt-h1{ font-size:calc(34px*var(--tt-fs)); }
  body.tt .tt-hook{ font-size:calc(16.5px*var(--tt-fs)); margin-top:14px; }
  body.tt .tt-hero-cta .btn{ flex:1; --cz-btn-padding-x:1rem; }
  body.tt .tt-pgrid{ gap:12px; }
  body.tt .tt-pbody{ padding:12px 12px 14px; }
  body.tt .tt-ptitle{ font-size:calc(15px*var(--tt-fs)); }
  body.tt .tt-pfoot{ flex-direction:column; align-items:stretch; }
  body.tt .tt-pfoot .btn{ width:100%; }
  body.tt .tt-pnow strong{ font-size:calc(20px*var(--tt-fs)); }
  body.tt .tt-pterm{ display:none; }
  body.tt .tt-box{ padding:20px; }
  body.tt .tt-cta-txt b{ font-size:calc(18px*var(--tt-fs)); }
  body.tt .popup-layer{ width:90% !important; }
}
@media (prefers-reduced-motion:reduce){
  body.tt .tt-slide{ animation:none; opacity:1; }
  body.tt .tt-slide.s2{ display:none; }
  body.tt .tt-fl{ animation:none; }
}
body.tt .btn-scroll-top:not(.show){ pointer-events:none; }

/* ============================================================
   04. 서브페이지 공통 컴포넌트
   ============================================================ */

/* ---------- 페이지 상단 제목 영역 ---------- */
body.tt .tt-phead{ position:relative; overflow:hidden; padding:30px 0 30px; border-bottom:1px solid var(--tt-line); background:radial-gradient(circle at 94% 0%,rgba(var(--tt-a1-rgb),.13),transparent 42%),radial-gradient(circle at 70% 120%,rgba(var(--tt-a1-rgb),.07),transparent 40%),linear-gradient(180deg,var(--tt-tint),#fff); }
body.tt .tt-phead .breadcrumb{ margin-bottom:12px; }
body.tt .tt-phead .breadcrumb-item a{ display:inline-flex; align-items:center; gap:4px; }
body.tt .tt-phead .breadcrumb .tti{ width:14px; height:14px; vertical-align:-2px; }
body.tt .tt-phead-title{ margin:0; font-size:calc(32px*var(--tt-fs)); font-weight:700; letter-spacing:-.045em; line-height:1.25; }
body.tt .tt-phead-sub{ margin:8px 0 0; color:var(--tt-sub); font-size:calc(15px*var(--tt-fs)); }
body.tt .tt-body{ padding-top:30px; }
body.tt .tt-body.tight{ padding-top:20px; }

/* ---------- 카드 ---------- */
body.tt .tt-card{ background:#fff; border:1px solid var(--tt-line); border-radius:16px; padding:28px; box-shadow:var(--tt-card); }
body.tt .tt-card+.tt-card{ margin-top:20px; }
body.tt .tt-cash>.tt-card,body.tt .tt-pay>.tt-card,body.tt .tt-acc>.tt-card,body.tt .tt-write-grid>.tt-card,body.tt .tt-write-grid>aside>.tt-card{ margin-top:0 !important; }
body.tt .tt-card.flat{ box-shadow:none; }
body.tt .tt-card-title{ display:flex; align-items:center; gap:10px; margin:0 0 20px; font-size:calc(19px*var(--tt-fs)); font-weight:600; letter-spacing:-.035em; }
body.tt .tt-card-title .tti{ width:22px; height:22px; color:var(--tt-a1); }
body.tt .tt-card-title small{ margin-left:auto; font-size:calc(13px*var(--tt-fs)); font-weight:500; color:var(--tt-mut); letter-spacing:-.01em; }
body.tt .tt-card-sub{ margin:-12px 0 18px; font-size:calc(13.5px*var(--tt-fs)); color:var(--tt-sub); }
body.tt .tt-line{ height:1px; background:var(--tt-line); border:0; margin:22px 0; opacity:1; }
body.tt .card{ border:1px solid var(--tt-line); border-radius:14px; box-shadow:none; }
body.tt .card-header{ background:var(--tt-tint2); border-bottom:1px solid var(--tt-line); font-weight:600; }

/* ---------- 표 ---------- */
body.tt .table{ --cz-table-bg:transparent; margin-bottom:0; color:var(--tt-body); }
body.tt .table>:not(caption)>*>*{ padding:.9rem .9rem; border-bottom-color:var(--tt-line2); vertical-align:middle; }
body.tt .table>thead>tr>*{ background:var(--tt-tint2); color:#475467; font-weight:600; font-size:.8125rem; border-bottom:1px solid var(--tt-line); white-space:nowrap; }
body.tt .table>thead>tr>*:first-child{ border-radius:10px 0 0 10px; }
body.tt .table>thead>tr>*:last-child{ border-radius:0 10px 10px 0; }
body.tt .table>tbody>tr>*{ font-size:.9rem; }
body.tt .table-hover>tbody>tr:hover>*{ background:var(--tt-tint2); --cz-table-accent-bg:var(--tt-tint2); color:var(--tt-ink); }
body.tt .table .badge{ font-size:.72rem; }
@media (max-width:760px){
  body.tt .table-mobile-responsive tr:not(.bg-light-blue){ border-bottom:1px solid var(--tt-line) !important; }
  body.tt .table-mobile-responsive td:before{ color:var(--tt-mut); font-weight:600; font-size:.75rem; }
  body.tt .table-mobile-responsive td{ border-bottom:0 !important; padding-top:1.4rem !important; }
}

/* ---------- 페이지네이션 ---------- */
body.tt .tt-pager{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:26px; flex-wrap:wrap; }
body.tt .tt-pager ul{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
body.tt .tt-pager .page-link{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--tt-line); border-radius:10px; background:#fff; color:#475467; font-size:calc(14px*var(--tt-fs)); font-weight:500; margin:0 !important; gap:4px; }
body.tt .tt-pager .page-link:hover{ border-color:var(--tt-a1); color:var(--tt-a2); background:var(--tt-tint2); }
body.tt .tt-pager .page-item.active .page-link{ background:var(--tt-grad); border-color:transparent; color:#fff; box-shadow:var(--tt-glow); }
body.tt .tt-pager .page-link-static{ border:0; background:none; color:#667085; }
body.tt .tt-pager .tti{ width:15px; height:15px; }

/* ---------- 빈 화면 ---------- */
body.tt .tt-nodata{ text-align:center; padding:52px 16px; color:var(--tt-mut); }
body.tt .tt-nodata .tti{ width:40px; height:40px; color:var(--tt-line3); }
body.tt .tt-nodata p{ margin:12px 0 0; font-size:calc(15px*var(--tt-fs)); }

/* ---------- 관리자 HTML 영역(본문·설명) ---------- */
body.tt .tt-prose{ color:#2B3445; font-size:calc(15.5px*var(--tt-fs)); line-height:1.85; word-break:break-word; }
body.tt .tt-prose img,body.tt .board-content img{ max-width:100%; height:auto; border-radius:8px; }
body.tt .tt-prose h1,body.tt .tt-prose h2,body.tt .tt-prose h3,body.tt .tt-prose h4{ margin:1.4em 0 .6em; }
body.tt .tt-prose table{ max-width:100%; }
body.tt .tt-prose a{ text-decoration:underline; text-underline-offset:3px; }
body.tt .tt-prose ul,body.tt .tt-prose ol{ padding-left:1.4em; }

/* ============================================================
   프로그램 목록
   ============================================================ */
body.tt .tt-toolbar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 20px; border-bottom:1px solid var(--tt-line); }
body.tt .tt-toolbar .tt-count{ margin:0 0 12px; color:var(--tt-sub); font-size:calc(14px*var(--tt-fs)); }
body.tt .tt-toolbar .tt-count b{ color:var(--tt-a1); font-weight:600; }
body.tt .tt-list-grid{ margin-bottom:10px; }

/* ============================================================
   프로그램 상세
   ============================================================ */
body.tt .tt-pd{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:start; }
body.tt .tt-pd-img{ background:var(--tt-tint2); border:1px solid var(--tt-line); border-radius:16px; overflow:hidden; padding:0; }
body.tt .tt-pd-img img{ display:block; width:100%; height:auto; }
body.tt .tt-pd-info{ background:#fff; border:1px solid var(--tt-line); border-radius:16px; padding:28px; box-shadow:var(--tt-card); }
body.tt .tt-pd-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
body.tt .tt-pd-title{ margin:0 0 6px; font-size:calc(28px*var(--tt-fs)); font-weight:700; letter-spacing:-.045em; line-height:1.3; }
body.tt .tt-pd-title .badge{ font-size:.8rem; vertical-align:middle; margin-right:8px; background:var(--tt-a1) !important; color:#fff !important; padding:.45em .85em; border-radius:999px; }
body.tt .tt-pd-title .badge.bg-danger{ background:#F04452 !important; }
body.tt .tt-pd-title .badge.bg-success{ background:#16A34A !important; }
body.tt .tt-pd-title .badge.bg-warning{ background:#F59E0B !important; }
body.tt .tt-pd-title .badge.bg-dark{ background:#17171A !important; }
body.tt .tt-cert{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 12px; border-radius:999px; background:var(--tt-tint); color:var(--tt-a2); font-size:max(11px,calc(12.5px*var(--tt-fs))); font-weight:600; }
body.tt .tt-cert .tti{ width:14px; height:14px; }
body.tt .tt-pd-sales{ display:flex; align-items:center; gap:6px; margin:6px 0 18px; font-size:calc(13.5px*var(--tt-fs)); color:var(--tt-sub); }
body.tt .tt-pd-sales .tti{ width:16px; height:16px; color:var(--tt-a1); }
body.tt .tt-pd-sales b{ color:var(--tt-ink); font-weight:600; }
body.tt .tt-optlist{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0 0 20px; }
body.tt .tt-opt{ display:flex; align-items:center; gap:12px; margin:0; padding:15px 18px; border:1.5px solid var(--tt-line); border-radius:12px; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; background:#fff; }
body.tt .tt-opt:hover{ border-color:#9DB8FF; }
body.tt .tt-opt:has(input:checked){ border-color:var(--tt-a1); background:var(--tt-tint2); box-shadow:0 0 0 4px rgba(var(--tt-a1-rgb),.1); }
body.tt .tt-opt .form-check-input{ margin:0; flex:none; width:20px; height:20px; }
body.tt .tt-opt-term{ font-weight:600; color:var(--tt-ink); font-size:calc(15.5px*var(--tt-fs)); }
body.tt .tt-opt{ min-width:0; }
body.tt .tt-opt-price{ margin-left:auto; display:flex; align-items:baseline; justify-content:flex-end; flex-wrap:wrap; gap:2px 8px; min-width:0; }
body.tt .tt-opt-price del,body.tt .tt-opt-price strong,body.tt .tt-opt-price em{ white-space:nowrap; }
body.tt .tt-opt-price del{ color:#A4ACBD; font-size:max(11px,calc(12.5px*var(--tt-fs))); }
body.tt .tt-opt-price strong{ font-size:calc(20px*var(--tt-fs)); font-weight:700; letter-spacing:-.04em; color:var(--tt-ink); }
body.tt .tt-opt-price em{ font-style:normal; font-size:calc(13px*var(--tt-fs)); font-weight:600; color:var(--tt-ink); }
body.tt .tt-opt-disc{ display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; background:#FFE9EA; color:#D13338; font-size:max(11px,calc(11.5px*var(--tt-fs))); font-weight:600; }
body.tt .tt-buy{ display:flex; gap:10px; }
body.tt .tt-buy .btn{ flex:1; --cz-btn-padding-y:.9rem; font-size:1.0625rem; }
body.tt .tt-meta{ list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--tt-line2); }
body.tt .tt-meta li{ display:flex; justify-content:space-between; gap:12px; padding:13px 2px; border-bottom:1px solid var(--tt-line2); font-size:calc(14px*var(--tt-fs)); }
body.tt .tt-meta li span:first-child{ color:var(--tt-sub); font-weight:500; }
body.tt .tt-meta li span:last-child{ color:var(--tt-ink); font-weight:500; text-align:right; }
body.tt .tt-tabbox{ margin-top:32px; }
body.tt .tt-tabbox .nav-tabs{ margin-bottom:0; }
body.tt .tt-tabbox .tab-content{ background:#fff; border:1px solid var(--tt-line); border-top:0; border-radius:0 0 16px 16px; padding:30px; min-height:200px; }

/* ============================================================
   로그인 · 회원가입
   ============================================================ */
body.tt .tt-auth{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); max-width:960px; margin:0 auto; background:#fff; border:1px solid var(--tt-line); border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(21,49,160,.35); }
body.tt .tt-auth-side{ position:relative; padding:40px 36px; color:#fff; background:var(--tt-grad); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
body.tt .tt-auth-side::before{ content:""; position:absolute; right:-90px; top:-90px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.09); }
body.tt .tt-auth-side::after{ content:""; position:absolute; left:-70px; bottom:-110px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.07); }
body.tt .tt-auth-side>*{ position:relative; z-index:1; }
body.tt .tt-auth-side .tt-auth-logo{ display:inline-flex; align-self:flex-start; padding:11px 18px; border-radius:12px; background:#fff; margin-bottom:34px; box-shadow:0 14px 26px -14px rgba(0,0,0,.5); }
body.tt .tt-auth-side .tt-auth-logo img{ width:132px; height:auto; display:block; }
body.tt .tt-auth-side h2{ color:#fff; margin:0 0 10px; font-size:calc(26px*var(--tt-fs)); font-weight:700; letter-spacing:-.045em; line-height:1.35; }
body.tt .tt-auth-side p{ margin:0 0 26px; opacity:.85; font-size:calc(14.5px*var(--tt-fs)); line-height:1.7; }
body.tt .tt-auth-side ul{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:12px; }
body.tt .tt-auth-side li{ display:flex; align-items:center; gap:10px; font-size:calc(14px*var(--tt-fs)); font-weight:500; }
body.tt .tt-auth-side li .ic{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.2); }
body.tt .tt-auth-side li .ic .tti{ width:16px; height:16px; }
body.tt .tt-auth-main{ padding:40px 40px 36px; }
body.tt .tt-auth-main h2{ margin:0 0 6px; font-size:calc(26px*var(--tt-fs)); font-weight:700; letter-spacing:-.045em; }
body.tt .tt-auth-main .tt-auth-sub{ margin:0 0 26px; font-size:calc(14px*var(--tt-fs)); color:var(--tt-sub); }
body.tt .tt-field{ position:relative; margin-bottom:14px; }
body.tt .tt-field>.tti{ position:absolute; left:15px; top:23px; transform:translateY(-50%); width:18px; height:18px; color:#98A2B3; z-index:5; pointer-events:none; }
body.tt .tt-field .form-control{ padding-left:44px; min-height:48px; }
body.tt .tt-field .password-toggle{ width:100%; }
body.tt .tt-field.plain .form-control{ padding-left:15px; }
body.tt .tt-field-grp{ margin-bottom:18px; }
body.tt .tt-field-grp>label{ display:block; margin-bottom:7px; font-size:calc(14px*var(--tt-fs)); font-weight:600; color:#2B3445; }
body.tt .tt-field-grp .req{ color:#E5484D; margin-left:2px; font-weight:600; }
body.tt .tt-field-grp .form-text{ margin-top:6px; }
body.tt .tt-pwrow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
body.tt .tt-inbtn{ display:flex; gap:8px; }
body.tt .tt-inbtn .form-control{ flex:1; min-width:0; }
body.tt .tt-inbtn .btn{ flex:none; min-height:46px; }
body.tt .tt-auth-links{ display:flex; justify-content:space-between; gap:12px; margin:4px 0 6px; font-size:calc(13.5px*var(--tt-fs)); }
body.tt .tt-auth-links a{ color:var(--tt-sub); font-weight:500; }
body.tt .tt-auth-links a:hover{ color:var(--tt-a2); }
body.tt .tt-turnstile{ display:flex; justify-content:center; margin:16px 0; min-height:0; }
body.tt .tt-auth-main .btn-block{ width:100%; --cz-btn-padding-y:.85rem; font-size:1.0625rem; margin-top:8px; }
body.tt .tt-auth-foot{ margin-top:22px; padding-top:20px; border-top:1px dashed var(--tt-line); text-align:center; font-size:calc(14px*var(--tt-fs)); color:var(--tt-sub); }
body.tt .tt-auth-foot a{ font-weight:600; margin-left:6px; }

/* ============================================================
   구매(결제)
   ============================================================ */
body.tt .tt-pay{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
body.tt .tt-pay-item{ display:flex; gap:22px; align-items:center; }
body.tt .tt-pay-item .thumb{ flex:none; width:180px; border-radius:12px; overflow:hidden; background:var(--tt-tint2); border:1px solid var(--tt-line); }
body.tt .tt-pay-item .thumb img{ display:block; width:100%; height:auto; }
body.tt .tt-pay-item h3{ margin:0 0 8px; font-size:calc(20px*var(--tt-fs)); font-weight:600; letter-spacing:-.04em; }
body.tt .tt-pay-item h3 a{ color:var(--tt-ink); }
body.tt .tt-chip{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px; border-radius:999px; background:var(--tt-tint); color:var(--tt-a2); font-size:max(11px,calc(12.5px*var(--tt-fs))); font-weight:600; }
body.tt .tt-chip.gray{ background:#F1F4FB; color:#475467; }
body.tt .tt-pay-sel{ margin-top:14px; }
body.tt .tt-pay-sel label{ display:block; font-size:calc(13px*var(--tt-fs)); font-weight:600; color:#475467; margin-bottom:6px; }
body.tt .tt-sum{ position:sticky; top:84px; }
body.tt .tt-sum-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--tt-line2); font-size:calc(14.5px*var(--tt-fs)); }
body.tt .tt-sum-row span:first-child{ color:var(--tt-sub); }
body.tt .tt-sum-row b{ font-weight:600; color:var(--tt-ink); }
body.tt .tt-sum-total{ text-align:center; padding:22px 0 18px; }
body.tt .tt-sum-total span{ display:block; font-size:calc(13.5px*var(--tt-fs)); color:var(--tt-sub); font-weight:500; margin-bottom:6px; }
body.tt .tt-sum-total strong{ font-size:calc(32px*var(--tt-fs)); font-weight:700; letter-spacing:-.05em; color:var(--tt-a2); }
body.tt .tt-sum .btn{ width:100%; --cz-btn-padding-y:.95rem; font-size:1.0625rem; }
body.tt .tt-note{ margin:14px 0 0; font-size:max(11px,calc(12.5px*var(--tt-fs))); color:var(--tt-mut); line-height:1.6; }

/* ============================================================
   결과 화면 (성공 · 실패 · 구매 실패)
   ============================================================ */
body.tt .tt-result{ max-width:640px; margin:30px auto 0; text-align:center; }
body.tt .tt-result-ic{ display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; margin-bottom:20px; background:var(--tt-tint); color:var(--tt-a1); box-shadow:0 0 0 10px rgba(var(--tt-a1-rgb),.07); }
body.tt .tt-result-ic .tti{ width:42px; height:42px; }
body.tt .tt-result-ic.ok{ background:#E3F6EA; color:#16A34A; box-shadow:0 0 0 10px rgba(22,163,74,.08); }
body.tt .tt-result-ic.ng{ background:#FFE9EA; color:#E5484D; box-shadow:0 0 0 10px rgba(229,72,77,.08); }
body.tt .tt-result h2{ margin:0 0 14px; font-size:calc(27px*var(--tt-fs)); font-weight:700; letter-spacing:-.045em; }
body.tt .tt-result p{ margin:0 0 6px; color:var(--tt-sub); font-size:calc(15px*var(--tt-fs)); line-height:1.7; }
body.tt .tt-result p b{ color:var(--tt-ink); }
body.tt .tt-result-btn{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* ============================================================
   캐시 충전
   ============================================================ */
body.tt .steps{ display:flex; width:100%; position:relative; counter-reset:none; }
body.tt .step-item{ flex:1 1 0; text-align:center; text-decoration:none !important; position:relative; color:var(--tt-mut); }
body.tt .step-item .step-progress,body.tt .steps-dark .step-item .step-progress{ position:relative; height:auto !important; width:auto; margin-bottom:10px; display:block; background:transparent !important; border-radius:0 !important; }
body.tt .step-item .step-progress::before,body.tt .step-item .step-progress::after{ display:none !important; }
body.tt .step-item::before{ content:""; position:absolute; left:calc(-50% + 22px); right:calc(50% + 22px); top:19px; height:3px; background:var(--tt-line); border-radius:3px; }
body.tt .step-item:first-child::before{ display:none; }
body.tt .step-item.active::before{ background:var(--tt-a1); }
body.tt .step-count{ position:relative; z-index:1; display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--tt-line); color:#98A2B3; font-weight:600; font-size:calc(15px*var(--tt-fs)); margin:0 !important; top:0 !important; left:0 !important; transform:none !important; }
body.tt .step-item.active .step-count{ background:var(--tt-a1); border-color:var(--tt-a1); color:#fff; }
body.tt .step-item.current .step-count{ box-shadow:0 0 0 6px rgba(var(--tt-a1-rgb),.16); background:var(--tt-grad); }
body.tt .step-label{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:calc(14px*var(--tt-fs)); font-weight:600; color:#98A2B3; margin:0; padding-top:0; }
body.tt .step-label i{ font-size:1.1em; }
body.tt .step-item.active .step-label{ color:var(--tt-ink); }
body.tt .step-item.current .step-label{ color:var(--tt-a2); }
body.tt .tt-stepbox{ padding:22px 28px 18px; }

body.tt .tt-cash{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
body.tt .tt-cash-view{ display:flex; align-items:center; gap:8px; height:72px; padding:0 14px 0 20px; border:2px solid var(--tt-a1); border-radius:14px; background:var(--tt-tint2); margin-bottom:12px; }
body.tt .tt-cash-view .won{ font-size:calc(24px*var(--tt-fs)); font-weight:600; color:var(--tt-a1); }
body.tt .tt-cash-view input{ flex:1; min-width:0; height:100%; border:0; background:transparent; outline:0; padding:0; font-size:calc(30px*var(--tt-fs)); font-weight:700; letter-spacing:-.04em; color:var(--tt-ink); text-align:right; }
body.tt .tt-cash-view input::placeholder{ color:var(--tt-line3); font-weight:600; }
body.tt .tt-cash-view input:disabled{ background:transparent; color:var(--tt-ink); }
body.tt .tt-cash-view .btn-reset-cash{ flex:none; width:40px; height:40px; padding:0; border-radius:50%; border:1.5px solid var(--tt-line3); background:#fff; color:#E5484D; display:inline-flex; align-items:center; justify-content:center; box-shadow:none; }
body.tt .tt-cash-view .btn-reset-cash:hover{ background:#FFE9EA; border-color:#F3B4B6; transform:none; }
body.tt .tt-cash-view .btn-reset-cash .tti{ width:18px; height:18px; }
body.tt .tt-amounts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
body.tt .tt-amounts .btn-add-cash{ --cz-btn-padding-x:.4rem; height:46px; border:1.5px solid var(--tt-line3); background:#fff; color:var(--tt-ink); font-weight:600; font-size:.875rem; }
body.tt .tt-amounts .btn-add-cash::before{ content:"+"; color:var(--tt-a1); margin-right:1px; font-weight:600; }
body.tt .tt-amounts .btn-add-cash:hover{ border-color:var(--tt-a1); background:var(--tt-tint2); color:var(--tt-a2); }
body.tt .tt-namebox{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-radius:12px; background:var(--tt-tint2); border:1px solid var(--tt-line); margin-bottom:18px; }
body.tt .tt-namebox span{ font-size:calc(13.5px*var(--tt-fs)); color:var(--tt-sub); font-weight:500; }
body.tt .tt-namebox input{ border:0; background:transparent; text-align:right; font-weight:600; font-size:calc(15.5px*var(--tt-fs)); color:var(--tt-ink); min-width:0; width:50%; padding:0; outline:0; }
body.tt .tt-cash .btn-submit{ width:100%; --cz-btn-padding-y:.95rem; font-size:1.0625rem; }

body.tt .tt-copyrow{ display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--tt-line2); }
body.tt .tt-copyrow:last-child{ border-bottom:0; padding-bottom:0; }
body.tt .tt-copyrow label{ margin:0; font-size:calc(14px*var(--tt-fs)); font-weight:500; color:var(--tt-sub); }
body.tt .tt-copyrow input{ border:0; background:transparent; font-size:calc(17px*var(--tt-fs)); font-weight:600; color:var(--tt-ink); letter-spacing:-.02em; padding:0; min-width:0; width:100%; outline:0; }
body.tt .tt-copyrow .btn{ --cz-btn-padding-y:.3rem; --cz-btn-padding-x:.7rem; font-size:.8125rem; }
body.tt .tt-copyrow.big{ grid-template-columns:110px auto minmax(0,1fr); gap:6px 4px; }
body.tt .tt-copyrow.big label{ margin-right:8px; }
body.tt .tt-copyrow.big input{ font-size:calc(28px*var(--tt-fs)); color:var(--tt-a2); font-weight:700; width:9em; text-align:right; }
body.tt .tt-copyrow .unit{ font-size:calc(15px*var(--tt-fs)); font-weight:600; color:var(--tt-ink); }
body.tt .tt-guide{ margin:0; padding:0; list-style:none; counter-reset:g; display:grid; gap:10px; }
body.tt .tt-guide li{ counter-increment:g; position:relative; padding-left:34px; font-size:calc(14.5px*var(--tt-fs)); line-height:1.7; color:#3A4254; }
body.tt .tt-guide li::before{ content:counter(g); position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--tt-tint); color:var(--tt-a2); font-size:max(11px,calc(12px*var(--tt-fs))); font-weight:600; display:flex; align-items:center; justify-content:center; }
body.tt .tt-guide b{ color:#E5484D; font-weight:600; }
body.tt .tt-guide a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   FAQ
   ============================================================ */
body.tt .tt-faq-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
body.tt .tt-faq-tabs a{ display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:999px; background:var(--tt-tint2); color:#475467; font-weight:600; font-size:calc(14.5px*var(--tt-fs)); transition:all .15s; }
body.tt .tt-faq-tabs a:hover{ background:var(--tt-tint); color:var(--tt-a2); }
body.tt .tt-faq-tabs a.active{ background:var(--tt-grad); color:#fff; box-shadow:var(--tt-glow); }
body.tt .tt-faq .accordion-button{ gap:12px; font-size:calc(16px*var(--tt-fs)); }
body.tt .tt-faq .accordion-button::before{ content:"Q"; flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--tt-tint); color:var(--tt-a2); font-weight:700; font-size:calc(14px*var(--tt-fs)); }
body.tt .tt-faq .accordion-button:not(.collapsed)::before{ background:var(--tt-grad); color:#fff; }
body.tt .tt-faq .accordion-body{ padding:6px 1.25rem 1.5rem 3.8rem; }

/* ============================================================
   마이페이지
   ============================================================ */
body.tt .tt-me{ position:relative; overflow:hidden; border-radius:20px; padding:30px 34px; background:var(--tt-grad); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; box-shadow:0 26px 44px -26px rgba(var(--tt-a2-rgb),.75); }
body.tt .tt-me::before{ content:""; position:absolute; right:-70px; top:-110px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.09); }
body.tt .tt-me>*{ position:relative; z-index:1; }
body.tt .tt-me-id{ display:flex; align-items:center; gap:18px; min-width:0; }
body.tt .tt-me-av{ flex:none; width:76px; height:76px; border-radius:50%; background:#fff; padding:3px; box-shadow:0 10px 20px -8px rgba(0,0,0,.4); }
body.tt .tt-me-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
body.tt .tt-me h2{ margin:0 0 6px; font-size:calc(24px*var(--tt-fs)); font-weight:700; color:#fff; letter-spacing:-.04em; }
body.tt .tt-me-lv{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:calc(13px*var(--tt-fs)); opacity:.92; }
body.tt .tt-me-lv span{ display:inline-flex; align-items:center; gap:6px; }
body.tt .tt-me-lv .badge{ background:#fff !important; color:var(--tt-a2) !important; }
body.tt .tt-me-lv .pill{ display:inline-block; padding:1px 8px; border-radius:999px; background:rgba(255,255,255,.2); font-weight:600; }
body.tt .tt-me-stats{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
body.tt .tt-me-stat{ min-width:150px; padding:13px 18px; border-radius:14px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); }
body.tt .tt-me-stat span{ display:block; font-size:max(11px,calc(12px*var(--tt-fs))); opacity:.8; }
body.tt .tt-me-stat b{ display:block; font-size:calc(22px*var(--tt-fs)); font-weight:700; letter-spacing:-.04em; }
body.tt .tt-me .btn-light{ background:#fff; color:var(--tt-a2); border-color:#fff; font-weight:600; }
body.tt .tt-me .btn-light:hover{ background:var(--tt-tint); color:var(--tt-a2); }

body.tt .tt-acc{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; margin-top:24px; }
body.tt .tt-acc-nav{ position:sticky; top:84px; background:#fff; border:1px solid var(--tt-line); border-radius:16px; padding:10px; box-shadow:var(--tt-card); }
body.tt .tt-acc-nav a{ display:flex; align-items:center; gap:11px; padding:.8rem .95rem; border-radius:10px; color:#344054; font-weight:500; font-size:calc(15px*var(--tt-fs)); transition:background .15s,color .15s; }
body.tt .tt-acc-nav a .tti{ width:20px; height:20px; color:#98A2B3; transition:color .15s; }
body.tt .tt-acc-nav a:hover{ background:var(--tt-tint2); color:var(--tt-a2); }
body.tt .tt-acc-nav a:hover .tti{ color:var(--tt-a1); }
body.tt .tt-acc-nav a.on{ background:var(--tt-tint); color:var(--tt-a2); font-weight:600; }
body.tt .tt-acc-nav a.on .tti{ color:var(--tt-a1); }
body.tt .tt-acc-nav a.out{ margin-top:6px; border-top:1px solid var(--tt-line2); border-radius:0 0 10px 10px; color:#98A2B3; }
body.tt .tt-acc-main{ min-width:0; }
body.tt .tt-acc-h{ margin:0 0 4px; font-size:calc(22px*var(--tt-fs)); font-weight:700; letter-spacing:-.04em; }
body.tt .tt-acc-note{ margin:0 0 20px; color:var(--tt-mut); font-size:calc(13.5px*var(--tt-fs)); }
body.tt .tt-lic{ border:1px solid var(--tt-line); border-radius:14px; padding:20px; background:#fff; }
body.tt .tt-lic+.tt-lic{ margin-top:16px; }
body.tt .tt-lic-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
body.tt .tt-lic-prog{ display:flex; align-items:center; gap:16px; min-width:0; }
body.tt .tt-lic-prog .thumb{ flex:none; width:104px; border-radius:10px; overflow:hidden; background:var(--tt-tint2); border:1px solid var(--tt-line); }
body.tt .tt-lic-prog .thumb img{ display:block; width:100%; height:auto; }
body.tt .tt-lic-prog h3{ margin:0; font-size:calc(17px*var(--tt-fs)); font-weight:600; letter-spacing:-.035em; }
body.tt .tt-lic-prog h3 a{ color:var(--tt-ink); }
body.tt .tt-lic .strike,body.tt .tt-lic strike{ color:#A4ACBD; }
body.tt .program-name-change{ color:var(--tt-a1); margin-left:6px; }
body.tt .program-name-change .tti{ width:16px; height:16px; }
body.tt .tt-lic .btn-sm{ white-space:nowrap; }
body.tt .tt-form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 18px; }
body.tt .tt-form-grid .full{ grid-column:1/-1; }

/* ============================================================
   게시판
   ============================================================ */
body.tt .tt-btabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
body.tt .tt-btabs a{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 20px; border-radius:999px; background:var(--tt-tint2); color:#475467; font-weight:600; font-size:calc(14.5px*var(--tt-fs)); transition:all .15s; }
body.tt .tt-btabs a .tti{ width:16px; height:16px; opacity:.75; }
body.tt .tt-btabs a:hover{ background:var(--tt-tint); color:var(--tt-a2); }
body.tt .tt-btabs a.on{ background:var(--tt-grad); color:#fff; box-shadow:var(--tt-glow); }
body.tt .tt-bhero{ text-align:center; padding:26px 16px 30px; margin-bottom:22px; border-radius:14px; background:linear-gradient(180deg,var(--tt-tint2),#fff); border:1px solid var(--tt-line); }
body.tt .tt-bhero .tt-bicon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:var(--tt-tint); color:var(--tt-a1); margin-bottom:12px; }
body.tt .tt-bhero .tt-bicon .tti{ width:26px; height:26px; }
body.tt .tt-bhero h2{ margin:0 0 14px; font-size:calc(20px*var(--tt-fs)); font-weight:600; }
body.tt .tt-bhero .btn{ margin:4px; }
body.tt .btn-tg{ --cz-btn-color:#fff; --cz-btn-bg:#26A5E4; --cz-btn-border-color:#26A5E4; --cz-btn-hover-color:#fff; --cz-btn-hover-bg:#1E92CC; --cz-btn-hover-border-color:#1E92CC; background-image:none !important; box-shadow:0 8px 16px -8px rgba(38,165,228,.7); }
body.tt .tt-btable{ width:100%; table-layout:fixed; }
body.tt .tt-btable th.c-no{ width:72px; }
body.tt .tt-btable th.c-user{ width:110px; }
body.tt .tt-btable th.c-date{ width:120px; }
body.tt .tt-btable th.c-view{ width:80px; }
body.tt .tt-btable td{ font-size:.875rem; }
body.tt .tt-btable td.no{ color:var(--tt-mut); font-size:.8125rem; text-align:center; }
body.tt .tt-btable td.user{ text-align:center; color:#475467; }
body.tt .tt-btable td.date,body.tt .tt-btable td.view{ text-align:right; color:var(--tt-mut); font-size:.8125rem; white-space:nowrap; }
body.tt .tt-btable tr.fixed>td{ background:#FAFBFF; }
body.tt .tt-btable .board-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.02em; font-size:.9375rem; font-weight:500; }
body.tt .tt-btable .board-title a{ color:var(--tt-ink); }
body.tt .tt-btable .board-title a:hover{ color:var(--tt-a2); }
body.tt .tt-btable tr.fixed .board-title a{ color:#D13338; font-weight:600; }
body.tt .tt-btable .board-title .badge{ margin-right:8px; vertical-align:1px; }
body.tt .tt-btable .board-title .tti{ width:15px; height:15px; margin-right:6px; color:#98A2B3; }
body.tt .tt-btable .board-title.private-question a{ color:#98A2B3; font-weight:500; }
body.tt .tt-btable .prog{ color:var(--tt-a1); font-size:.8125rem; font-weight:600; margin-right:8px; }
body.tt .tt-bmeta{ display:none; margin-top:4px; font-size:max(11px,calc(12px*var(--tt-fs))); color:var(--tt-mut); font-weight:400; white-space:normal; }
body.tt .tt-btable .badge.ans{ background:#E3F6EA !important; color:#12873D !important; margin-left:10px; }
body.tt .tt-bfoot{ display:flex; justify-content:flex-end; margin-top:20px; gap:8px; }

body.tt .tt-view-head{ padding-bottom:18px; border-bottom:1px solid var(--tt-line); }
body.tt .tt-view-title{ margin:0 0 12px; font-size:calc(24px*var(--tt-fs)); font-weight:600; letter-spacing:-.04em; line-height:1.4; }
body.tt .tt-view-title .prog{ color:var(--tt-a1); font-size:.7em; font-weight:600; margin-right:8px; }
body.tt .tt-view-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:calc(13.5px*var(--tt-fs)); color:var(--tt-sub); }
body.tt .tt-view-meta span{ display:inline-flex; align-items:center; gap:6px; }
body.tt .tt-view-meta .tti{ width:15px; height:15px; color:var(--tt-mut); }
body.tt .board-content{ min-height:220px; padding:28px 4px; color:#2B3445; font-size:calc(15.5px*var(--tt-fs)); line-height:1.85; }
body.tt .board-content>p{ line-height:1.85; margin:0 0 .6em; }
body.tt .tt-vnav{ display:flex; gap:8px; justify-content:space-between; padding-top:20px; border-top:1px solid var(--tt-line); }
body.tt .tt-vnav a{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 16px; border:1.5px solid var(--tt-line); border-radius:10px; font-weight:600; font-size:calc(14px*var(--tt-fs)); color:#344054; background:#fff; }
body.tt .tt-vnav a:hover{ border-color:var(--tt-a1); color:var(--tt-a2); background:var(--tt-tint2); }
body.tt .tt-vnav .tti{ width:16px; height:16px; }
body.tt .tt-vactions{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
body.tt .tt-comments h2{ display:flex; align-items:center; gap:8px; font-size:calc(19px*var(--tt-fs)); font-weight:600; margin:0 0 6px; }
body.tt .tt-comments h2 .badge{ background:var(--tt-tint) !important; color:var(--tt-a2) !important; font-size:.8rem; padding:.3em .7em; border-radius:999px; }
body.tt .tt-cmt{ padding:18px 0; border-bottom:1px solid var(--tt-line2); }
body.tt .tt-cmt-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
body.tt .tt-cmt-av{ width:34px; height:34px; border-radius:50%; background:var(--tt-tint); color:var(--tt-a2); display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:calc(14px*var(--tt-fs)); flex:none; }
body.tt .tt-cmt-top h6{ margin:0; font-size:calc(14.5px*var(--tt-fs)); font-weight:600; }
body.tt .tt-cmt-top .del{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:max(11px,calc(12.5px*var(--tt-fs))); font-weight:600; color:#D13338; }
body.tt .tt-cmt-top .del .tti{ width:14px; height:14px; }
body.tt .tt-cmt-body{ padding-left:44px; color:#2B3445; font-size:calc(14.5px*var(--tt-fs)); line-height:1.75; }
body.tt .tt-cmt-body p{ margin:0 0 .4em; }
body.tt .tt-cmt-date{ display:block; margin-top:4px; font-size:max(11px,calc(12px*var(--tt-fs))); color:var(--tt-mut); }
body.tt .tt-cmt-form{ margin-top:22px; padding:20px; border-radius:14px; background:var(--tt-tint2); border:1px solid var(--tt-line); }
body.tt .tt-cmt.ans .tt-cmt-av{ background:var(--tt-grad); color:#fff; }

body.tt .tt-write .form-control.title{ min-height:54px; font-size:1.0625rem; font-weight:600; }
body.tt .tt-write-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
body.tt .tt-write-grid>aside{ position:sticky; top:84px; }
body.tt .tt-switch{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border:1.5px solid var(--tt-line); border-radius:12px; margin-top:10px; background:#fff; cursor:pointer; }
body.tt .tt-switch .form-check{ margin:0; padding:0; display:flex; align-items:center; width:100%; justify-content:space-between; flex-direction:row-reverse; }
body.tt .tt-switch .form-check-input{ margin:0; float:none; width:2.6em; height:1.4em; }
body.tt .tt-switch .form-check-label{ font-weight:500; font-size:calc(14.5px*var(--tt-fs)); color:#2B3445; }
body.tt .form-check-input[type=checkbox].form-switch,body.tt .form-switch .form-check-input{ border-radius:2em; }
body.tt .form-switch .form-check-input:checked{ background-color:var(--tt-a1); }

/* ============================================================
   오류 페이지
   ============================================================ */
body.tt .tt-err{ text-align:center; padding:56px 0 20px; }
body.tt .tt-err-code{ margin:0; font-size:calc(120px*var(--tt-fs)); font-weight:700; letter-spacing:-.07em; line-height:1; background:linear-gradient(135deg,var(--tt-a1),var(--tt-a2) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
body.tt .tt-err h2{ margin:14px 0 6px; font-size:calc(24px*var(--tt-fs)); font-weight:600; }
body.tt .tt-err p{ margin:0; color:var(--tt-sub); }
body.tt .tt-err-links{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:760px; margin:34px auto 10px; }
body.tt .tt-err-links a{ display:flex; align-items:center; gap:14px; padding:20px 22px; border:1px solid var(--tt-line); border-radius:14px; background:#fff; color:var(--tt-ink); font-weight:600; transition:all .2s; box-shadow:var(--tt-card); text-align:left; }
body.tt .tt-err-links a:hover{ border-color:var(--tt-a1); transform:translateY(-3px); box-shadow:0 18px 30px -18px rgba(var(--tt-a2-rgb),.4); color:var(--tt-a2); }
body.tt .tt-err-links .ic{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--tt-tint); color:var(--tt-a1); display:flex; align-items:center; justify-content:center; }
body.tt .tt-err-links .ic .tti{ width:22px; height:22px; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:991.98px){
  body.tt .tt-phead{ padding:22px 0 22px; }
  body.tt .tt-phead-title{ font-size:calc(25px*var(--tt-fs)); }
  body.tt .tt-body{ padding-top:20px; }
  body.tt .tt-card{ padding:20px; border-radius:14px; }
  body.tt .tt-pd{ grid-template-columns:minmax(0,1fr); gap:18px; }
  body.tt .tt-pd-info{ padding:20px; }
  body.tt .tt-pd-title{ font-size:calc(23px*var(--tt-fs)); }
  body.tt .tt-tabbox .tab-content{ padding:20px; }
  body.tt .tt-auth{ grid-template-columns:minmax(0,1fr); max-width:520px; }
  body.tt .tt-auth-side{ display:none; }
  body.tt .tt-auth-main{ padding:30px 24px 26px; }
  body.tt .tt-pay{ grid-template-columns:minmax(0,1fr); }
  body.tt .tt-sum{ position:static; }
  body.tt .tt-cash{ grid-template-columns:minmax(0,1fr); }
  body.tt .tt-acc{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:16px; }
  body.tt .tt-acc-nav{ position:static; display:flex; overflow-x:auto; gap:4px; padding:8px; scrollbar-width:none; }
  body.tt .tt-acc-nav::-webkit-scrollbar{ display:none; }
  body.tt .tt-acc-nav a{ flex:none; padding:.65rem .95rem; white-space:nowrap; font-size:calc(14px*var(--tt-fs)); }
  body.tt .tt-acc-nav a.out{ margin:0; border-top:0; border-radius:10px; }
  body.tt .tt-me{ padding:22px; }
  body.tt .tt-me-stats{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body.tt .tt-me-stat{ min-width:0; padding:12px 14px; }
  body.tt .tt-me-stat b{ font-size:calc(19px*var(--tt-fs)); word-break:keep-all; }
  body.tt .tt-me-stats .btn{ grid-column:1/-1; justify-content:center; }
  body.tt .tt-write-grid{ grid-template-columns:minmax(0,1fr); }
  body.tt .tt-write-grid>aside{ position:static; order:-1; }
  body.tt .tt-err-code{ font-size:calc(88px*var(--tt-fs)); }
  body.tt .tt-err-links{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767.98px){
  body.tt .tt-btable thead{ display:none; }
  body.tt .tt-bmeta{ display:block; }
  body.tt .tt-btable>tbody>tr>*{ padding:.85rem .5rem; }
  body.tt .tt-view-title{ font-size:calc(20px*var(--tt-fs)); }
  body.tt .tt-form-grid{ grid-template-columns:minmax(0,1fr); }
  body.tt .tt-pwrow{ grid-template-columns:minmax(0,1fr); }
  body.tt .tt-copyrow{ grid-template-columns:minmax(0,1fr) auto; }
  body.tt .tt-copyrow label{ grid-column:1/-1; margin-bottom:-6px; }
  body.tt .tt-copyrow.big{ grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; }
  body.tt .tt-copyrow.big label{ margin-right:0; }
  body.tt .tt-copyrow.big input{ width:100%; font-size:calc(26px*var(--tt-fs)); }
  body.tt .tt-amounts{ gap:6px; }
  body.tt .tt-amounts .btn-add-cash{ font-size:.8125rem; --cz-btn-padding-x:.2rem; }
  body.tt .tt-pay-item{ flex-direction:column; align-items:flex-start; }
  body.tt .tt-pay-item .thumb{ width:100%; }
  body.tt .tt-buy{ flex-direction:column; }
  body.tt .tt-cash-view input{ font-size:calc(24px*var(--tt-fs)); }
  body.tt .tt-opt{ padding:13px 14px; gap:10px; }
  body.tt .tt-opt-price strong{ font-size:calc(18px*var(--tt-fs)); }
  body.tt .tt-lic-prog .thumb{ width:80px; }
  body.tt .tt-vnav span{ display:none; }
  body.tt .tt-vnav a{ flex:1; justify-content:center; }
  body.tt .step-label{ font-size:max(11px,calc(12.5px*var(--tt-fs))); flex-direction:column; gap:2px; }
  body.tt .tt-stepbox{ padding:16px 8px 12px; }
  body.tt .tt-faq .accordion-body{ padding-left:1.25rem; }
  body.tt .tt-sec-title{ font-size:calc(22px*var(--tt-fs)); }
}

/* ============================================================
   긴 제목·이름 방어 (공백 없는 아주 긴 글자가 와도 화면이 옆으로 밀리지 않게)
   ============================================================ */
body.tt .tt-view-title,body.tt .tt-view-meta span,body.tt .tt-cmt-top h6,body.tt .tt-cmt-top,
body.tt .accordion-button,body.tt .accordion-button b,body.tt .tt-faq-tabs a,
body.tt .breadcrumb-item,body.tt .tt-pay-item h3,body.tt .tt-pd-title,body.tt .tt-pname,body.tt .tt-pname a,
body.tt .tt-me-id h2,body.tt .tt-btable a,body.tt .tt-sec-title,body.tt .tt-lic-prog h3,body.tt .tt-lic-prog h4,body.tt .tt-lic-prog h5{ overflow-wrap:anywhere; min-width:0; }
body.tt .tt-view-meta,body.tt .tt-cmt-top,body.tt .tt-pay-item .flex-grow-1,body.tt .tt-me-id>div,body.tt .tt-lic-prog>div{ min-width:0; }
body.tt .tt-faq-tabs a{ max-width:100%; height:auto; min-height:40px; padding-top:8px; padding-bottom:8px; line-height:1.35; }
body.tt .accordion-button{ text-align:left; }
body.tt .tt-meta li span:last-child{ overflow-wrap:anywhere; min-width:0; }
body.tt .tt-meta li span:first-child{ flex:none; }

/* ============================================================
   05. 색상 조합 레이어
   - 포인트 색 8종(--c0~c7) : 카테고리 · 바로가기 · 이용 단계 · 사이드 메뉴 등에 돌려 씁니다.
   - 테마별로 달라지는 값(히어로 배경 · 구역 띠 · 하단 배너 · 포인트색)은 맨 아래 "테마 변수" 한 곳에서만 바꿉니다.
   - 기능(HTML 구조 · id · name · data-*)에는 영향이 없고 색만 입힙니다.
   ============================================================ */
body.tt{
  --c0:#2F6BFF; --c0b:var(--tt-tint); --c0d:var(--tt-a2); --c0l:var(--tt-line3);   /* 블루 */
  --c1:#FF6B4A; --c1b:#FFEEE9; --c1d:#D1431E; --c1l:#FFCFC3;   /* 코랄 */
  --c2:#12A66B; --c2b:#E2F7EE; --c2d:#0B7D4E; --c2l:#B5E8D1;   /* 그린 */
  --c3:#7B5CF0; --c3b:#EFEBFF; --c3d:#5A3CD0; --c3l:#D6CBFF;   /* 바이올렛 */
  --c4:#F5A000; --c4b:#FFF3D6; --c4d:#9C5D00; --c4l:#FFE0A0;   /* 앰버 */
  --c5:#0EA5C6; --c5b:#E0F5FA; --c5d:#087793; --c5l:#B3E6F1;   /* 시안 */
  --c6:#EC4899; --c6b:#FFE8F3; --c6d:#B1216A; --c6l:#FFC6E0;   /* 핑크 */
  --c7:#475569; --c7b:#ECEFF4; --c7d:#1E293B; --c7l:#CBD2DE;   /* 슬레이트 */
}
body.tt .tn0{ --tn:var(--c0); --tnb:var(--c0b); --tnd:var(--c0d); --tnl:var(--c0l); }
body.tt .tn1{ --tn:var(--c1); --tnb:var(--c1b); --tnd:var(--c1d); --tnl:var(--c1l); }
body.tt .tn2{ --tn:var(--c2); --tnb:var(--c2b); --tnd:var(--c2d); --tnl:var(--c2l); }
body.tt .tn3{ --tn:var(--c3); --tnb:var(--c3b); --tnd:var(--c3d); --tnl:var(--c3l); }
body.tt .tn4{ --tn:var(--c4); --tnb:var(--c4b); --tnd:var(--c4d); --tnl:var(--c4l); }
body.tt .tn5{ --tn:var(--c5); --tnb:var(--c5b); --tnd:var(--c5d); --tnl:var(--c5l); }

/* ---------- 최상단 컬러 라인 ---------- */
body.tt::before{ content:""; display:block; flex:none; width:100%; height:4px; background:var(--top-line,var(--tt-grad)); }

/* ---------- 히어로 ---------- */
body.tt .tt-hero{ background:var(--hero-bg); }
body.tt .tt-tag{ background:var(--ac-grad); box-shadow:var(--ac-glow); }
body.tt .tt-h1{ background-image:linear-gradient(100deg,var(--h1a) 10%,var(--h1b) 90%); }
body.tt .tt-chips a{ background:var(--tnb,#fff); color:var(--tnd,var(--tt-a2)); box-shadow:inset 0 0 0 1.5px var(--tnl,var(--tt-line3)); }
body.tt .tt-chips a:hover{ background:var(--tn,var(--tt-a1)); color:#fff; box-shadow:inset 0 0 0 1.5px var(--tn,var(--tt-a1)); }

/* ---------- 바로가기 8색 ---------- */
body.tt .tt-quick a:nth-child(1){ --tn:var(--c0); --tnb:var(--c0b); --tnd:var(--c0d); }
body.tt .tt-quick a:nth-child(2){ --tn:var(--c4); --tnb:var(--c4b); --tnd:var(--c4d); }
body.tt .tt-quick a:nth-child(3){ --tn:var(--c1); --tnb:var(--c1b); --tnd:var(--c1d); }
body.tt .tt-quick a:nth-child(4){ --tn:var(--c2); --tnb:var(--c2b); --tnd:var(--c2d); }
body.tt .tt-quick a:nth-child(5){ --tn:var(--c3); --tnb:var(--c3b); --tnd:var(--c3d); }
body.tt .tt-quick a:nth-child(6){ --tn:var(--c5); --tnb:var(--c5b); --tnd:var(--c5d); }
body.tt .tt-quick a:nth-child(7){ --tn:var(--c6); --tnb:var(--c6b); --tnd:var(--c6d); }
body.tt .tt-quick a:nth-child(8){ --tn:var(--c7); --tnb:var(--c7b); --tnd:var(--c7d); }
body.tt .tt-q-ic{ background:var(--tnb,var(--tt-tint)); color:var(--tn,var(--tt-a1)); }
body.tt .tt-quick a:hover .tt-q-ic{ background:linear-gradient(135deg,var(--tn),var(--tnd)); color:#fff; box-shadow:0 12px 20px -9px var(--tn); }
body.tt .tt-quick a:hover{ color:var(--tnd,var(--tt-a2)); }

/* ---------- 구역 제목 · 탭 · 카드 (카테고리별 색) ---------- */
body.tt .tt-sec-ic{ background:var(--sec-grad,var(--tt-grad)); box-shadow:0 8px 16px -8px var(--c0); }
body.tt .tt-tabs a.tn0,body.tt .tt-tabs a.tn1,body.tt .tt-tabs a.tn2,body.tt .tt-tabs a.tn3,body.tt .tt-tabs a.tn4,body.tt .tt-tabs a.tn5{ gap:7px; }
body.tt .tt-tabs a[class*="tn"]::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--tn); box-shadow:0 0 0 3px var(--tnb); }
body.tt .tt-tabs a[class*="tn"]:hover{ color:var(--tnd); }
body.tt .tt-tabs a[class*="tn"].on{ color:var(--tnd); border-bottom-color:var(--tn); }

body.tt .tt-pcard{ border-color:var(--tnl,var(--tt-line3)); border-top-color:var(--tn,var(--tt-a1)); }
body.tt .tt-pcard:hover{ border-color:var(--tnl,var(--tt-line3)); border-top-color:var(--tn,var(--tt-a1)); box-shadow:0 22px 34px -18px var(--tn,rgba(var(--tt-a2-rgb),.5)); }
body.tt .tt-pmeta a{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:var(--tnb,var(--tt-tint)); color:var(--tnd,var(--tt-a2)); font-size:max(11px,calc(12px*var(--tt-fs))); }
body.tt .tt-pmeta a:hover{ background:var(--tn,var(--tt-a1)); color:#fff; }
body.tt .tt-pcard .tt-pthumb{ background:var(--tnb,var(--tt-tint2)); }
body.tt .tt-pcard .tt-pnow strong{ color:var(--tt-ink); }

/* ---------- 랭킹 · 이용 방법 ---------- */
body.tt .tt-duo{ position:relative; padding:46px 0; margin-top:52px; background:var(--band); box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax); }
body.tt .tt-duo>.tt-box:nth-child(1){ --tn:var(--c4); --tnb:var(--c4b); --tnd:var(--c4d); }
body.tt .tt-duo>.tt-box:nth-child(2){ --tn:var(--c2); --tnb:var(--c2b); --tnd:var(--c2d); }
body.tt .tt-box,body.tt .tt-box.tint{ background:#fff; border:1px solid var(--tt-line); border-top:4px solid var(--tn,var(--tt-a1)); box-shadow:var(--tt-card); }
body.tt .tt-box-title .tti{ width:24px; height:24px; color:var(--tn,var(--tt-a1)); }
body.tt .tt-rank li:nth-child(1) .tt-rn{ background:linear-gradient(135deg,#FFD56A,#F5A000); color:#fff; box-shadow:0 5px 10px -4px rgba(245,160,0,.7); }
body.tt .tt-rank li:nth-child(2) .tt-rn{ background:linear-gradient(135deg,#D5DCE8,#8E9BB0); color:#fff; box-shadow:0 5px 10px -4px rgba(100,116,139,.6); }
body.tt .tt-rank li:nth-child(3) .tt-rn{ background:linear-gradient(135deg,#F0B98B,#C4703A); color:#fff; box-shadow:0 5px 10px -4px rgba(196,112,58,.6); }
body.tt .tt-rank li:nth-child(1) a{ font-weight:600; }
body.tt .tt-steps li:nth-child(1){ --tn:var(--c0); --tnd:var(--c0d); }
body.tt .tt-steps li:nth-child(2){ --tn:var(--c1); --tnd:var(--c1d); }
body.tt .tt-steps li:nth-child(3){ --tn:var(--c3); --tnd:var(--c3d); }
body.tt .tt-steps li:nth-child(4){ --tn:var(--c2); --tnd:var(--c2d); }
body.tt .tt-si{ background:linear-gradient(135deg,var(--tn,var(--c0)),var(--tnd,var(--c0d))); box-shadow:0 8px 14px -6px var(--tn,var(--c0)); }
body.tt .tt-steps li a:hover{ background:var(--tt-tint2); }

/* ---------- 하단 안내 배너 ---------- */
body.tt .tt-cta{ margin-top:52px; background:var(--cta-bg); box-shadow:0 24px 40px -22px var(--cta-glow); }
body.tt .tt-cta .btn-light{ color:var(--tt-a2); }
body.tt .tt-cta .btn-light:hover{ color:var(--tt-a2); }
body.tt .tt-cta-ic{ background:rgba(255,255,255,.2); }
body.tt .tt-cta::before{ background:var(--cta-orb,rgba(255,255,255,.08)); width:340px; height:340px; right:-70px; top:-120px; }

/* ---------- 상단 바 · 서브 페이지 ---------- */
body.tt .tt-phead{ background:var(--phead-bg); }
body.tt .tt-auth-side,body.tt .tt-me,body.tt .tt-oc .offcanvas-header{ background:var(--dark-grad,var(--tt-grad)); }
body.tt .tt-me{ box-shadow:0 26px 44px -26px var(--cta-glow); }
body.tt .tt-acc-nav a:nth-child(1) .tti{ color:var(--c0); }
body.tt .tt-acc-nav a:nth-child(2) .tti{ color:var(--c3); }
body.tt .tt-acc-nav a:nth-child(3) .tti{ color:var(--c1); }
body.tt .tt-acc-nav a:nth-child(4) .tti{ color:var(--c2); }
body.tt .tt-acc-nav a:nth-child(5) .tti{ color:var(--c4); }
body.tt .tt-acc-nav a:nth-child(6) .tti{ color:var(--c5); }
body.tt .tt-acc-nav a:nth-child(7) .tti{ color:var(--c6); }
body.tt .tt-acc-nav a.out .tti{ color:#98A2B3; }
body.tt .tt-card-title .tti{ color:var(--ac); }
body.tt .tt-guide li:nth-child(4n+1)::before{ background:var(--c0b); color:var(--c0d); }
body.tt .tt-guide li:nth-child(4n+2)::before{ background:var(--c1b); color:var(--c1d); }
body.tt .tt-guide li:nth-child(4n+3)::before{ background:var(--c2b); color:var(--c2d); }
body.tt .tt-guide li:nth-child(4n+4)::before{ background:var(--c3b); color:var(--c3d); }
body.tt .tt-err-links a:nth-child(1) .ic{ background:var(--c0b); color:var(--c0); }
body.tt .tt-err-links a:nth-child(2) .ic{ background:var(--c1b); color:var(--c1); }
body.tt .tt-err-links a:nth-child(3) .ic{ background:var(--c2b); color:var(--c2); }
body.tt .tt-err-links a:nth-child(4) .ic{ background:var(--c3b); color:var(--c3); }
body.tt .tt-bhero .tt-bicon{ background:var(--ac-b); color:var(--ac); }
body.tt .tt-pd-sales .tti{ color:var(--ac); }
body.tt .tt-cert{ background:var(--c2b); color:var(--c2d); }
body.tt .tt-cert .tti{ color:var(--c2); }
body.tt .tt-sum-total strong{ color:var(--tt-a1); }
body.tt .table>thead>tr>*{ background:var(--tt-tint2); }

/* ============================================================
   테마 변수 (기본값 = 블루 × 코랄)
   ※ 색을 바꾸고 싶으면 아래 값만 수정하세요.
   ============================================================ */
body.tt{
  --ac:#FF6B4A; --ac-d:#D1431E; --ac-b:#FFEEE9;
  --ac-grad:linear-gradient(135deg,#FF9A4D,#FF4D6A);
  --ac-glow:0 8px 18px -6px rgba(255,90,80,.55);
  --h1a:var(--tt-a1); --h1b:var(--tt-a2);
  --hero-bg:radial-gradient(640px 380px at 90% 14%,rgba(255,107,74,.30),transparent 70%),radial-gradient(700px 400px at 4% 0%,rgba(var(--tt-a1-rgb),.24),transparent 70%),linear-gradient(180deg,var(--tt-tint) 0%,#fff 100%);
  --band:#FFF6F1;
  --cta-bg:linear-gradient(115deg,var(--tt-a2) 0%,var(--tt-a1) 100%);
  --cta-orb:radial-gradient(circle at 40% 40%,rgba(255,138,92,.7),rgba(255,107,74,.0) 68%);
  --cta-glow:rgba(var(--tt-a2-rgb),.6);
  --dark-grad:linear-gradient(135deg,var(--tt-a2) 0%,var(--tt-a1) 70%,#6E8CFF 130%);
  --phead-bg:radial-gradient(circle at 94% 0%,rgba(255,107,74,.14),transparent 42%),radial-gradient(circle at 6% 120%,rgba(var(--tt-a1-rgb),.12),transparent 44%),linear-gradient(180deg,var(--tt-tint),#fff);
  --top-line:linear-gradient(90deg,var(--tt-a1) 0%,#7B5CF0 45%,#FF6B4A 100%);
  --sec-grad:linear-gradient(135deg,var(--tt-a1),var(--tt-a2));
}

/* ===== 아이콘 (CSS mask · 외부 파일 불필요) ===== */
.tti{display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.2em;background-color:currentColor;-webkit-mask:var(--tti) center/contain no-repeat;mask:var(--tti) center/contain no-repeat}
.tti-search{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.tti-user{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E")}
.tti-wallet{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h13v4'/%3E%3Cpath d='M3 7v11a2 2 0 002 2h15V9H5a2 2 0 01-2-2z'/%3E%3Ccircle cx='16.5' cy='14.5' r='1.2'/%3E%3C/svg%3E")}
.tti-bell{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1112 0c0 6 2 7 2 7H4s2-1 2-7z'/%3E%3Cpath d='M10 20a2 2 0 004 0'/%3E%3C/svg%3E")}
.tti-gift{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12'/%3E%3Cpath d='M12 8S10.5 3 8 4.5 9 8 12 8zm0 0s1.5-5 4-3.5S15 8 12 8z'/%3E%3C/svg%3E")}
.tti-refresh{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 11-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
.tti-chat{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
.tti-users{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c1-3.5 3.5-5 7-5s6 1.5 7 5'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 010 7M18 15c2 .5 3.5 2 4 5'/%3E%3C/svg%3E")}
.tti-help{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 114 2c-.9.6-1.5 1-1.5 2.2M12 17v.01'/%3E%3C/svg%3E")}
.tti-grid{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.tti-download{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E")}
.tti-tag{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.2'/%3E%3C/svg%3E")}
.tti-crown{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4 4 5-7 5 7 4-4-2 11H5z'/%3E%3C/svg%3E")}
.tti-flame{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s5 4 5 9a5 5 0 01-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3 1-5 1-8z'/%3E%3C/svg%3E")}
.tti-sparkle{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E")}
.tti-send{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4L3 11l6 2 2 6 3-4 5 4z'/%3E%3Cpath d='M9 13l12-9'/%3E%3C/svg%3E")}
.tti-up{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E")}
.tti-chev{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.tti-shield{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.tti-image{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 9'/%3E%3C/svg%3E")}
.tti-headset{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 20c0 1.5-2 2-5 2'/%3E%3C/svg%3E")}
.tti-arrow{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.tti-bolt{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E")}
.tti-cart{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11h10.6L20 7H6.5'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E")}
.tti-heart{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-4.8-8-11a4.5 4.5 0 018-2.7A4.5 4.5 0 0120 9c0 6.2-8 11-8 11z'/%3E%3C/svg%3E")}
.tti-star{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E")}
.tti-percent{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E")}
.tti-coupon{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 000 4v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2a2 2 0 000-4z'/%3E%3Cpath d='M14 7v10' stroke-dasharray='2 2'/%3E%3C/svg%3E")}
.tti-clock{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.tti-home{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9H4z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E")}
.tti-laptop{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E")}
.tti-code{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-5 4 5 4M16 8l5 4-5 4M14 5l-4 14'/%3E%3C/svg%3E")}
.tti-chart{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E")}
.tti-cloud{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 01-.5-8 5.5 5.5 0 0110.7 1A3.5 3.5 0 0117 18z'/%3E%3C/svg%3E")}
.tti-globe{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E")}
.tti-megaphone{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l8 4V6L7 10z'/%3E%3Cpath d='M18 9c1.5 1 1.5 5 0 6'/%3E%3C/svg%3E")}
.tti-box{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E")}
.tti-medal{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='5.5'/%3E%3Cpath d='M8.5 10L6 3h4l2 4 2-4h4l-2.5 7'/%3E%3C/svg%3E")}
.tti-truck{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.7'/%3E%3Ccircle cx='17' cy='17.5' r='1.7'/%3E%3C/svg%3E")}
.tti-lock{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E")}
.tti-list{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E")}
.tti-plus{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.tti-card{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E")}
.tti-menu{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.tti-close{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.tti-check{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.tti-logout{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5a1 1 0 00-1 1v14a1 1 0 001 1h4'/%3E%3Cpath d='M16 8l4 4-4 4M20 12H9'/%3E%3C/svg%3E")}
.tti-login{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 011 1v14a1 1 0 01-1 1h-4'/%3E%3Cpath d='M11 8l4 4-4 4M15 12H4'/%3E%3C/svg%3E")}
.tti-eye{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.tti-edit{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E")}
.tti-trash{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E")}
.tti-chevd{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.tti-chevl{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E")}
.tti-chevu{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.tti-external{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E")}
.tti-mail{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.tti-phone{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E")}
.tti-key{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E")}
.tti-calendar{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.tti-info{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E")}
.tti-alert{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E")}
.tti-file{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.tti-copy{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2'/%3E%3C/svg%3E")}
.tti-coins{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E")}
.tti-bank{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E")}
.tti-checkc{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E")}
.tti-xc{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.tti-hourglass{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 4 6 5 9-1 3-5 4-5 9M17 3c0 5-4 6-5 9 1 3 5 4 5 9'/%3E%3C/svg%3E")}
.tti-inbox{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3C/svg%3E")}
.tti-arrowl{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.tti-minus{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.tti-pin{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 10-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")}
.tti-edit2{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.tti-dots{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01'/%3E%3C/svg%3E")}
.tti-tg{--tti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 4.5L2.8 11.7c-.8.3-.8 1.4 0 1.7l4.6 1.5 1.8 5.6c.2.6 1 .8 1.4.3l2.6-2.6 4.8 3.5c.6.4 1.3.1 1.5-.6l3.2-15.2c.2-.8-.5-1.5-1.2-1.4z'/%3E%3C/svg%3E")}

/* ===== 글자 크기 설정 ===== */
/* ============================================================
   ★ 글자 크기 설정 — 아래 숫자 하나로 사이트 전체 글자 크기가 바뀝니다
   1 = 기본(이전 크기), 0.92 = 약 8% 작게, 0.88 = 약 12% 작게, 0.96 = 약 4% 작게
   ============================================================ */
:root{ --tt-fs:.92; }
html{ font-size:calc(100% * var(--tt-fs)); }

/* ===== 색상 설정 ===== */
/* ============================================================
   ★ 색상 설정 — 여기 값만 바꾸면 사이트 전체 색이 바뀝니다 (오로라 글라스)
   차분한 페리윙클 블루 + 라벤더 + 민트 그라데이션, 유리 같은 반투명 카드, 둥근 알약 버튼
   ============================================================ */
body.tt{
  --tt-a1:#6A82F0; --tt-a2:#4A5FD4; --tt-a3:#3947AE;
  --tt-a1-rgb:106,130,240; --tt-a2-rgb:74,95,212; --tt-sh-rgb:50,60,120;
  --tt-tint:#EFF2FF; --tt-tint2:#F6F7FF; --tt-line:#E3E7F8; --tt-line3:#D3D9F2;
  --tt-ink:#242943; --tt-body:#454C68; --tt-sub:#6E7691; --tt-mut:#99A0BA;
  --tt-grad:linear-gradient(135deg,#88A2FF 0%,#6A82F0 48%,#8F7CF0 100%);
  --tt-glow:0 12px 24px -10px rgba(106,130,240,.6);
  --tt-card:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -24px rgba(50,60,120,.32);
  --tt-r:12px; --tt-rl:20px;
  --cz-primary:#6A82F0; --cz-primary-rgb:106,130,240; --cz-accent:#4A5FD4; --cz-accent-rgb:74,95,212;
  --cz-link-color:#4A5FD4; --cz-link-hover-color:#3947AE; --cz-info:#6A82F0; --cz-info-rgb:106,130,240;
  --cz-body-color:#454C68; --cz-body-color-rgb:69,76,104; --cz-border-color:#E3E7F8; --cz-nav-link-color:#242943;
  --cz-success:#3FA886; --cz-danger:#E26D77; --cz-warning:#E8B05A;
  --cz-success-rgb:63,168,134; --cz-danger-rgb:226,109,119; --cz-warning-rgb:232,176,90;

  --c0:#6A82F0; --c0b:#EDF0FF; --c0d:#4658C8; --c0l:#CBD4FA;
  --c1:#EE8F86; --c1b:#FFEFEC; --c1d:#C25A50; --c1l:#F9CFC9;
  --c2:#58B79B; --c2b:#E6F6F0; --c2d:#2F8A70; --c2l:#B9E4D6;
  --c3:#9A85EE; --c3b:#F1EDFF; --c3d:#6D55C9; --c3l:#D8CFFA;
  --c4:#E8B05A; --c4b:#FFF4DF; --c4d:#98660F; --c4l:#F7DDAE;
  --c5:#5DB4D6; --c5b:#E3F4FA; --c5d:#2D809F; --c5l:#B5DEEE;
  --c6:#E58DB4; --c6b:#FFEAF3; --c6d:#AE4D7D; --c6l:#F8C9DC;
  --c7:#7A839E; --c7b:#EEF0F5; --c7d:#3F4660; --c7l:#CDD2E0;

  --bd-danger:#E26D77; --bd-success:#3FA886; --bd-warning:#E8B05A;
  --ac:#8F7CF0; --ac-d:#6D55C9; --ac-b:#F1EDFF;
  --ac-grad:linear-gradient(135deg,#B3A3FF,#8F7CF0);
  --ac-glow:0 10px 20px -8px rgba(143,124,240,.55);
  --h1a:#5C75EC; --h1b:#9A7CF0;
  --hero-bg:transparent; --band:transparent;
  --cta-bg:linear-gradient(120deg,#7088F2 0%,#8F7CF0 62%,#B39EF5 100%);
  --cta-orb:radial-gradient(circle at 40% 40%,rgba(255,255,255,.4),rgba(255,255,255,0) 68%);
  --cta-glow:rgba(106,100,240,.55);
  --dark-grad:linear-gradient(150deg,#7088F2 0%,#8F7CF0 66%,#B39EF5 130%);
  --phead-bg:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
  --top-line:linear-gradient(90deg,#88A2FF,#9A85EE 50%,#78D6C8);
  --sec-grad:linear-gradient(135deg,#88A2FF,#8F7CF0);

  background:
    radial-gradient(900px 620px at 6% -4%,rgba(136,162,255,.28),transparent 62%),
    radial-gradient(820px 600px at 96% 4%,rgba(184,152,255,.24),transparent 62%),
    radial-gradient(900px 700px at 50% 104%,rgba(120,214,200,.2),transparent 62%),
    #F6F7FD;
  background-attachment:fixed;
}


/* ============================================================
   공통 : 움직임 · 입체감  (세 가지 디자인 모두 사용)
   - 버튼 : 올라오는 움직임 + 빛이 훑고 지나가는 효과 + 화살표가 살짝 밀림 + 누르면 눌림
   - 카드 : 마우스를 올리면 떠오르며 살짝 기울어짐(입체)
   - 히어로 그림 : 약간 기울어진 입체 + 천천히 떠 있는 움직임
   - 움직임 줄이기 설정(접근성)을 켠 기기에서는 모두 꺼집니다
   ============================================================ */
body.tt{ --ease:cubic-bezier(.2,.8,.2,1); }
body.tt b,body.tt strong{ font-weight:600; }

/* ---------- 버튼 ---------- */
body.tt .btn:not(.btn-scroll-top):not(.btn-telegram):not(.btn-link){
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .2s,background-color .2s,color .2s,border-color .2s;
}
body.tt .btn:not(.btn-scroll-top):not(.btn-telegram):not(.btn-link)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-115%); transition:transform .75s var(--ease);
}
body.tt .btn:not(.btn-scroll-top):not(.btn-telegram):not(.btn-link):hover::after{ transform:translateX(115%); }
body.tt .btn:not(:disabled):not(.disabled):hover{ transform:translateY(-3px); }
body.tt .btn:not(:disabled):not(.disabled):active{ transform:translateY(0) scale(.975); transition-duration:.08s; }
body.tt .btn .tti-arrow{ transition:transform .3s var(--ease); }
body.tt .btn:hover .tti-arrow{ transform:translateX(4px); }
body.tt .btn:disabled,body.tt .btn.disabled{ transform:none; }

/* ---------- 카드 · 박스 : 떠오르며 기울어짐 ---------- */
body.tt .tt-pcard{ transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .25s; will-change:transform; }
body.tt .tt-pcard:hover{ transform:perspective(1100px) translateY(-9px) rotateX(2.2deg); }
body.tt .tt-pcard .tt-pthumb img{ transition:transform .8s var(--ease); }
body.tt .tt-pcard:hover .tt-pthumb img{ transform:scale(1.07); }
body.tt .tt-box,body.tt .tt-card,body.tt .tt-err-links a,body.tt .tt-pay-item{ transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .25s; }
body.tt .tt-quick a .tt-q-ic{ transition:transform .4s var(--ease),background .25s,color .25s,box-shadow .3s; }
body.tt .tt-quick a:hover .tt-q-ic{ transform:translateY(-7px) scale(1.06) rotate(-4deg); }
body.tt .tt-steps li a{ transition:transform .3s var(--ease),background .2s; }
body.tt .tt-steps li a:hover{ transform:translateX(5px); }
body.tt .tt-rank li{ transition:transform .3s var(--ease); }
body.tt .tt-rank li:hover{ transform:translateX(4px); }

/* ---------- 히어로 그림 : 입체 + 떠 있는 움직임 ---------- */
@keyframes ttFloatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
body.tt .tt-hero-art{ perspective:1500px; animation:ttFloatY 7s ease-in-out infinite; }
body.tt .tt-art{ transform:rotateY(-14deg) rotateX(6deg) rotateZ(.8deg); transform-origin:58% 52%; transition:transform .9s var(--ease); filter:drop-shadow(0 44px 34px rgba(var(--tt-sh-rgb),.22)) drop-shadow(0 8px 10px rgba(var(--tt-sh-rgb),.12)); }
body.tt .tt-hero-art:hover .tt-art{ transform:rotateY(-4deg) rotateX(2deg); }

@media (max-width:991.98px){
  body.tt .tt-art{ transform:rotateY(-7deg) rotateX(3deg); }
  body.tt .tt-pcard:hover{ transform:translateY(-5px); }
}
@media (prefers-reduced-motion:reduce){
  body.tt .tt-hero-art{ animation:none; }
  body.tt .tt-art,body.tt .tt-pcard,body.tt .btn,body.tt .tt-quick a .tt-q-ic{ transition:none; }
  body.tt .tt-pcard:hover,body.tt .btn:hover,body.tt .tt-quick a:hover .tt-q-ic{ transform:none; }
  body.tt .btn::after{ display:none; }
}

/* ---------- 히어로 그림 색을 디자인 색에 맞춤 (그림 속 색상 → 변수) ---------- */
body.tt .tt-art [fill="#2F6BFF"]{ fill:var(--tt-a1); }
body.tt .tt-art [stroke="#2F6BFF"]{ stroke:var(--tt-a1); }
body.tt .tt-art [fill="#1D3FD0"]{ fill:var(--tt-a2); }
body.tt .tt-art [fill="#EEF3FF"]{ fill:var(--tt-tint); }
body.tt .tt-art [fill="#CFDBFF"],body.tt .tt-art [fill="#B7C9FF"]{ fill:var(--tt-line3); }
body.tt .tt-art [stroke="#CFDBFF"]{ stroke:var(--tt-line3); }
body.tt .tt-art [fill="#FF7A00"]{ fill:var(--ac); }

/* ---------- 배지 · 할인율 색 (차분하게) ---------- */
body.tt .tt-pbadge.bg-danger{ background:var(--bd-danger,#F04452) !important; }
body.tt .tt-pbadge.bg-success{ background:var(--bd-success,#16A34A) !important; }
body.tt .tt-pbadge.bg-warning{ background:var(--bd-warning,#F59E0B) !important; }
body.tt .tt-pdisc b{ color:var(--bd-danger,#F04452); }

/* ---------- 머리글 : 유리 ---------- */
body.tt .tt-util{ background:rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.8); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); }
body.tt .tt-header{ background:transparent; }
body.tt .tt-search{ border:1.5px solid rgba(var(--tt-a1-rgb),.3); background:rgba(255,255,255,.82); border-radius:999px; overflow:hidden; box-shadow:0 10px 24px -16px rgba(var(--tt-sh-rgb),.4); }
body.tt .tt-search button{ border-radius:0; padding:0 26px; }
body.tt .tt-tbtn{ border-radius:999px; background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.95); box-shadow:0 8px 18px -12px rgba(var(--tt-sh-rgb),.4); }
body.tt .tt-tbtn.dark{ background:linear-gradient(135deg,#383F63,#242943); border-color:transparent; }
body.tt .tt-nav{ background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%); border-top:1px solid rgba(255,255,255,.85); border-bottom:1px solid rgba(var(--tt-a1-rgb),.14); box-shadow:0 14px 30px -22px rgba(var(--tt-sh-rgb),.45); }
body.tt .tt-nav .nav-link{ font-weight:500; }
body.tt .tt-nav .tt-allcat>.nav-link{ border-radius:0 0 16px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
body.tt .tt-footer{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.9); }
body.tt .tt-burger{ border-radius:999px; background:rgba(255,255,255,.85); }

/* ---------- 버튼 : 알약 + 윤기 ---------- */
body.tt .btn{ --cz-btn-border-radius:999px; }
body.tt .btn-primary,body.tt .btn-accent{
  background-image:var(--tt-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(40,50,140,.18),var(--tt-glow);
}
body.tt .btn-primary:hover,body.tt .btn-accent:hover{ filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(40,50,140,.18),0 18px 28px -10px rgba(var(--tt-a1-rgb),.7); }
body.tt .btn-outline-secondary,body.tt .btn-outline-primary{ background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); }
body.tt .btn-sm{ --cz-btn-padding-x:1rem; }

/* ---------- 히어로 ---------- */
body.tt .tt-hero{ position:relative; }
body.tt .tt-hero::before,body.tt .tt-hero::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(24px); }
body.tt .tt-hero::before{ width:520px; height:520px; right:-60px; top:-150px; background:radial-gradient(circle at 40% 40%,rgba(170,140,255,.5),rgba(170,140,255,0) 70%); }
body.tt .tt-hero::after{ width:460px; height:460px; left:-120px; bottom:-200px; background:radial-gradient(circle at 50% 50%,rgba(110,214,200,.42),rgba(110,214,200,0) 70%); }
body.tt .tt-hero-in{ position:relative; z-index:1; }
body.tt .tt-tag{ background:rgba(255,255,255,.72); color:var(--tt-a2); border:1px solid rgba(255,255,255,.95); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:0 8px 18px -10px rgba(var(--tt-sh-rgb),.45); }
body.tt .tt-hook{ color:var(--tt-body); font-weight:500; }
body.tt .tt-chips a{ background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px var(--tnl,#D3DFFF); }

/* ---------- 바로가기 : 유리 구슬 ---------- */
body.tt .tt-q-ic{ width:68px; height:68px; background:linear-gradient(150deg,rgba(255,255,255,.95),var(--tnb,#EEF3FF)); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 2px 0 rgba(255,255,255,1),inset 0 -10px 18px -10px var(--tnl,#CBD4FA),0 18px 26px -16px var(--tn,#6A82F0); }
body.tt .tt-quick a:hover .tt-q-ic{ background:linear-gradient(150deg,var(--tn),var(--tnd)); color:#fff; border-color:transparent; box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 22px 28px -14px var(--tn); }
body.tt .tt-quick a{ font-weight:500; }

/* ---------- 구역 제목 · 탭 ---------- */
body.tt .tt-sec-ic{ border-radius:14px; background:var(--sec-grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 20px -10px rgba(var(--tt-a1-rgb),.65); }
body.tt .tt-sec-title{ font-weight:600; }
body.tt .tt-sec-head{ border-bottom:0; }
body.tt .tt-tabs{ gap:3px; padding:4px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); border-radius:999px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:inset 0 1px 2px rgba(var(--tt-sh-rgb),.06),0 10px 24px -18px rgba(var(--tt-sh-rgb),.4); margin-bottom:10px; }
body.tt .tt-tabs a{ min-height:38px; border-bottom:0; margin:0; border-radius:999px; padding:0 16px; }
body.tt .tt-tabs a.on,body.tt .tt-tabs a[class*="tn"].on{ background:#fff; box-shadow:0 8px 16px -8px rgba(var(--tt-sh-rgb),.4); color:var(--tnd,var(--tt-a2)); border-bottom:0; }

/* ---------- 프로그램 카드 : 유리 ---------- */
body.tt .tt-pcard{ position:relative; background:rgba(255,255,255,.76); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.95); border-radius:22px; box-shadow:var(--tt-card); }
body.tt .tt-pcard::before{ content:""; position:absolute; z-index:2; left:22px; right:22px; top:0; height:3px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,var(--tn,var(--tt-a1)),var(--tnd,var(--tt-a2))); opacity:.85; }
body.tt .tt-pcard:hover{ border-color:#fff; box-shadow:0 1px 0 #fff inset,0 34px 50px -28px var(--tn,rgba(var(--tt-a1-rgb),.6)); }
body.tt .tt-pcard .tt-pthumb{ margin:10px 10px 0; border-radius:16px; overflow:hidden; background:var(--tnb); }
body.tt .tt-pbody{ padding:14px 18px 18px; }
body.tt .tt-pmeta a{ background:var(--tnb); }
body.tt .tt-pdl{ color:var(--tt-mut); }

/* ---------- 랭킹 · 이용 방법 : 유리 박스 ---------- */
body.tt .tt-duo{ clip-path:none; box-shadow:none; padding:0; margin-top:60px; background:transparent; }
body.tt .tt-box,body.tt .tt-box.tint{ position:relative; background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.95); border-top:1px solid rgba(255,255,255,.95); border-radius:24px; box-shadow:var(--tt-card); }
body.tt .tt-box::before{ content:""; position:absolute; left:26px; right:26px; top:0; height:3px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,var(--tn),var(--tnd)); opacity:.85; }
body.tt .tt-rank li{ border-top-color:rgba(var(--tt-a1-rgb),.1); }
body.tt .tt-si{ background:linear-gradient(150deg,var(--tn),var(--tnd)); box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -6px 10px -4px rgba(0,0,0,.18),0 12px 18px -8px var(--tn); }
body.tt .tt-steps li a:hover{ background:rgba(255,255,255,.7); }
body.tt .tt-rn{ border-radius:10px; }

/* ---------- 하단 배너 ---------- */
body.tt .tt-cta{ border-radius:26px; padding:30px 36px; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 50px -28px var(--cta-glow); }
body.tt .tt-cta .btn-light{ background:rgba(255,255,255,.95); }
body.tt .tt-cta .btn-cta-line{ background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); color:#fff; }
body.tt .tt-cta-ic{ border-radius:18px; background:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }

/* ---------- 서브 페이지 ---------- */
body.tt .tt-phead{ border-bottom:0; }
body.tt .tt-phead-title{ font-weight:700; }
body.tt .tt-card,body.tt .card:not(.popup-layer .card){ background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.95); border-radius:24px; box-shadow:var(--tt-card); }
body.tt .tt-auth{ border-radius:28px; }
body.tt .tt-me{ border-radius:26px; }
body.tt .tt-acc-nav{ background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-color:rgba(255,255,255,.95); border-radius:22px; }
body.tt .form-control,body.tt .form-select{ border-radius:12px; background-color:rgba(255,255,255,.85); }
body.tt .tt-opt{ border-radius:16px; }
body.tt .table>thead>tr>*{ background:rgba(var(--tt-a1-rgb),.06); }

@media (max-width:991.98px){
  body.tt .tt-q-ic{ width:60px; height:60px; }
  body.tt .tt-tabs{ border-radius:18px; }
  body.tt .tt-cta{ padding:24px; }
}