/* ================================================================
   ATI Hair Subscription — ati-sub.css v3.1
   Design Direction: Refined Luxury Editorial
   Font: Pretendard (한글) + system stack
   Color: Deep Navy / Warm White / Soft Gold accent
   ================================================================ */

/* ── Google Fonts / 외부 폰트 (Pretendard CDN 미적용 환경 대비) ── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');

/* ── CSS 변수 ──────────────────────────────────────────────────── */
:root {
    /* 색상 */
    --c-ink:      #0e1117;
    --c-ink-2:    #1e2535;
    --c-ink-3:    #3d4661;
    --c-muted:    #6b7390;
    --c-subtle:   #a0a8be;
    --c-border:   #e4e7f0;
    --c-surface:  #f5f6fa;
    --c-white:    #ffffff;
    --c-primary:  #1a56db;
    --c-primary-d:#1344b8;
    --c-primary-l:#eef3ff;
    --c-gold:     #c9982a;
    --c-gold-l:   #fdf6e3;
    --c-green:    #0f7b55;
    --c-green-l:  #e6f5f0;
    --c-red:      #c0392b;
    --c-red-l:    #fdf0ef;
    --c-warn:     #b45309;
    --c-warn-l:   #fffbeb;

    /* 타이포그래피 */
    --font:       'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    /* 레이아웃 */
    --radius-sm:  6px;
    --radius:     12px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --shadow-sm:  0 1px 3px rgba(14,17,23,.06), 0 1px 2px rgba(14,17,23,.04);
    --shadow:     0 4px 16px rgba(14,17,23,.08), 0 1px 4px rgba(14,17,23,.04);
    --shadow-lg:  0 12px 40px rgba(14,17,23,.12), 0 4px 12px rgba(14,17,23,.06);
    --trans:      all .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════════
   공통 유틸
   ════════════════════════════════════════════════════════════════ */

/* ── 버튼 ──────────────────────────────────────────────────────── */
.ati-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    color: var(--c-ink-2);
    font-family: var(--font);
    font-size: 14px;
    font-weight: var(--fw-semi);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: var(--trans);
    white-space: nowrap;
    letter-spacing: -.01em;
}
.ati-btn:hover  { background: var(--c-surface); border-color: #c8cdd8; }
.ati-btn:active { transform: scale(.98); }
.ati-btn:disabled, .ati-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.ati-btn--primary {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}
.ati-btn--primary:hover  { background: var(--c-primary-d); border-color: var(--c-primary-d); color: var(--c-white); }

.ati-btn--ghost {
    background: transparent;
    color: var(--c-ink-3);
    border-color: var(--c-border);
}
.ati-btn--ghost:hover { background: var(--c-surface); }

.ati-btn--sm  { padding: 7px 14px; font-size: 12px; }
.ati-btn--lg  { padding: 15px 32px; font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.ati-btn--full { width: 100%; }

/* ── 인풋 ──────────────────────────────────────────────────────── */
.ati-input, .ati-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    font-family: var(--font);
    font-size: 14px;
    color: var(--c-ink);
    transition: var(--trans);
    appearance: none;
    -webkit-appearance: none;
}
.ati-input:focus, .ati-select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.ati-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7390' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.ati-input--full { width: 100%; }

/* ── 알림 ──────────────────────────────────────────────────────── */
.ati-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font);
    margin-bottom: 16px;
}
.ati-notice--warn {
    background: var(--c-warn-l);
    border: 1px solid #fcd34d;
    color: var(--c-warn);
}

/* ── 게이트 ────────────────────────────────────────────────────── */
.ati-gate {
    text-align: center;
    padding: 60px 24px;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    font-family: var(--font);
}
.ati-gate p { color: var(--c-muted); font-size: 15px; margin: 0 0 20px; }

/* ── 로딩/에러 메시지 ──────────────────────────────────────────── */
.ati-loading-msg { color: var(--c-subtle); font-size: 13px; font-family: var(--font); font-style: italic; }
.ati-error-msg   { color: var(--c-red);    font-size: 13px; font-family: var(--font); }

/* ════════════════════════════════════════════════════════════════
   구독 상품 페이지 (ati_purchase_box)
   ════════════════════════════════════════════════════════════════ */
.ati-pricing {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: var(--font);
}
.ati-pricing--single { padding: 0; }

/* Hero */
.ati-pricing__hero {
    text-align: center;
    padding: 64px 20px 48px;
}
.ati-pricing__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-primary);
    background: var(--c-primary-l);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}
.ati-pricing__title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: var(--fw-black);
    color: var(--c-ink);
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 16px;
}
.ati-pricing__desc {
    font-size: 16px;
    color: var(--c-muted);
    line-height: 1.8;
    margin: 0 0 28px;
}
.ati-pricing__badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.ati-pricing__badge {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--c-ink-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: 6px 14px;
    border-radius: 100px;
}

/* 플랜 카드 그리드 */
.ati-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 56px;
    align-items: start;
}

/* 플랜 카드 */
.ati-plan {
    position: relative;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.ati-plan:hover {
    box-shadow: var(--shadow);
    border-color: #c5cbdc;
    transform: translateY(-2px);
}
.ati-plan--featured {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary), var(--shadow);
    background: linear-gradient(160deg, #f0f5ff 0%, var(--c-white) 60%);
}
.ati-plan--featured:hover {
    box-shadow: 0 0 0 1px var(--c-primary), var(--shadow-lg);
}

/* 인기 리본 */
.ati-plan__ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    padding: 4px 18px;
    border-radius: 100px;
    white-space: nowrap;
}
/* 현재 구독 뱃지 */
.ati-plan__current-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--c-green-l);
    color: var(--c-green);
    font-size: 11px;
    font-weight: var(--fw-bold);
    padding: 3px 10px;
    border-radius: 100px;
}

/* 플랜 헤더 */
.ati-plan__header { display: flex; flex-direction: column; gap: 6px; }
.ati-plan__name {
    font-size: 18px;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    margin: 0;
    letter-spacing: -.02em;
}
.ati-plan__price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 4px;
}
.ati-plan__amount {
    font-size: 36px;
    font-weight: var(--fw-black);
    color: var(--c-ink);
    letter-spacing: -.04em;
    line-height: 1;
}
.ati-plan__unit {
    font-size: 14px;
    color: var(--c-muted);
    font-weight: var(--fw-medium);
    margin-left: 2px;
}
.ati-plan__tagline {
    font-size: 13px;
    color: var(--c-muted);
    margin: 0;
    line-height: 1.5;
}

/* 기능 목록 */
.ati-plan__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-top: 1px solid var(--c-border);
    padding-top: 18px;
}
.ati-plan__feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--c-ink-3);
    line-height: 1.4;
}
.ati-plan__feat-icon {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    font-size: 0;           /* text 숨김, 원형으로 표시 */
}
.ati-plan__feat--on   .ati-plan__feat-icon { background: var(--c-primary); }
.ati-plan__feat--off  { color: var(--c-subtle); text-decoration: line-through; }
.ati-plan__feat--off  .ati-plan__feat-icon { background: var(--c-border); }
.ati-plan__feat--dim  { color: var(--c-subtle); }
.ati-plan__feat--dim  .ati-plan__feat-icon { background: var(--c-border); }

/* 번들 애드온 */
.ati-plan__addons {
    background: var(--c-surface);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ati-plan__addons-label {
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin: 0 0 4px;
}
.ati-plan__addon-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-ink-3);
    cursor: pointer;
}
.ati-plan__addon-check input { flex-shrink: 0; accent-color: var(--c-primary); }
.ati-plan__addon-check span:last-of-type { margin-left: auto; }
.ati-plan__addon-price {
    font-weight: var(--fw-semi);
    color: var(--c-primary);
    white-space: nowrap;
}
.ati-plan__bundle-total {
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    text-align: right;
    margin: 4px 0 0;
    min-height: 18px;
}

/* CTA 버튼 */
.ati-plan__cta {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: var(--fw-bold);
    letter-spacing: -.01em;
    background: var(--c-surface);
    color: var(--c-ink-2);
    border: 1.5px solid var(--c-border);
    cursor: pointer;
    transition: var(--trans);
    font-family: var(--font);
}
.ati-plan__cta:hover { background: var(--c-border); }
.ati-plan__cta--featured {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}
.ati-plan__cta--featured:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); }
.ati-plan__safe {
    text-align: center;
    font-size: 11px;
    color: var(--c-subtle);
    margin: 0;
    letter-spacing: .01em;
}

/* 비교표 */
.ati-compare {
    margin-bottom: 48px;
}
.ati-compare__title {
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: -.02em;
}
.ati-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ati-compare__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font);
    font-size: 13.5px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-white);
}
.ati-compare__table thead th {
    background: var(--c-surface);
    font-weight: var(--fw-bold);
    color: var(--c-ink-2);
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1.5px solid var(--c-border);
    white-space: nowrap;
}
.ati-compare__th-feat {
    text-align: left !important;
    color: var(--c-muted) !important;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ati-compare__table tbody td {
    padding: 13px 20px;
    text-align: center;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-ink-3);
    vertical-align: middle;
}
.ati-compare__table tbody tr:last-child td { border-bottom: none; }
.ati-compare__row-label {
    text-align: left !important;
    font-weight: var(--fw-medium);
    color: var(--c-ink-2) !important;
    background: var(--c-surface) !important;
}
.ati-compare__table tbody tr:hover td { background: #f8faff; }
.ati-compare__table tbody tr:hover .ati-compare__row-label { background: #eef2fa !important; }
.ati-yes { color: var(--c-green); font-weight: var(--fw-bold); font-size: 15px; }
.ati-no  { color: var(--c-subtle); font-size: 15px; }

/* 신뢰 문구 */
.ati-pricing__trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 32px;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    text-align: center;
}
.ati-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-ink-3);
    font-weight: var(--fw-medium);
    font-family: var(--font);
}
.ati-trust-icon { font-size: 24px; }

/* ════════════════════════════════════════════════════════════════
   자판기 (ati_content_factory)
   ════════════════════════════════════════════════════════════════ */
.ati-factory {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 60px;
    font-family: var(--font);
}

/* ── 매장 정보 패널 ─────────────────────────────────────────────── */
.ati-shop-panel {
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.ati-shop-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}
.ati-shop-panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
}
.ati-shop-panel__pct {
    font-size: 11px;
    font-weight: var(--fw-bold);
    padding: 3px 10px;
    border-radius: 100px;
}
.ati-shop-panel__pct--good { background: var(--c-green-l); color: var(--c-green); }
.ati-shop-panel__pct--warn { background: var(--c-warn-l);  color: var(--c-warn); }
.ati-shop-panel__pct--bad  { background: var(--c-red-l);   color: var(--c-red); }

.ati-shop-panel__edit-btn {
    font-size: 12px;
    font-weight: var(--fw-semi);
    color: var(--c-primary);
    background: var(--c-primary-l);
    border: none;
    padding: 6px 14px;
    border-radius: 100px;
    text-decoration: none;
    transition: var(--trans);
    white-space: nowrap;
    cursor: pointer;
}
.ati-shop-panel__edit-btn:hover { background: #dce8ff; }

.ati-shop-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}
@media (max-width: 600px) { .ati-shop-panel__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .ati-shop-panel__grid { grid-template-columns: 1fr; } }

.ati-shop-panel__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    border: 1px solid transparent;
}
.ati-shop-panel__row--empty {
    background: #fff9f0;
    border-color: #ffe4b5;
}
.ati-shop-panel__key {
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-subtle);
}
.ati-shop-panel__val {
    font-size: 13px;
    color: var(--c-ink-2);
    word-break: break-all;
    line-height: 1.4;
}
.ati-shop-panel__empty-tag {
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: var(--c-warn);
    background: var(--c-warn-l);
    padding: 1px 8px;
    border-radius: 4px;
}
.ati-shop-panel__notice {
    font-size: 12px;
    font-weight: var(--fw-medium);
    color: var(--c-primary);
    background: var(--c-primary-l);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin: 0;
    line-height: 1.5;
}

/* ── 헤더 (크레딧) ──────────────────────────────────────────────── */
.ati-factory__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.ati-factory__header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ati-plan-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    padding: 4px 12px;
    background: var(--c-ink);
    color: var(--c-white);
    border-radius: 100px;
}
.ati-factory__credits {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.ati-factory__credits-num {
    font-size: 28px;
    font-weight: var(--fw-black);
    color: var(--c-primary);
    line-height: 1;
    letter-spacing: -.03em;
}
.ati-factory__credits-label {
    font-size: 13px;
    color: var(--c-muted);
    font-weight: var(--fw-medium);
}
.ati-factory__prepaid {
    font-size: 12px;
    color: var(--c-ink-3);
    background: var(--c-gold-l);
    padding: 4px 10px;
    border-radius: 100px;
    font-weight: var(--fw-medium);
}
.ati-factory__timer {
    font-size: 13px;
    font-weight: var(--fw-semi);
    color: var(--c-red);
    font-variant-numeric: tabular-nums;
    background: var(--c-red-l);
    padding: 6px 14px;
    border-radius: 100px;
}

/* ── 바디 ────────────────────────────────────────────────────────── */
.ati-factory__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── 탭 ──────────────────────────────────────────────────────────── */
.ati-tabs {
    display: flex;
    gap: 2px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 16px;
    width: fit-content;
}
.ati-tab {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: var(--fw-semi);
    color: var(--c-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--trans);
    font-family: var(--font);
    white-space: nowrap;
}
.ati-tab:hover  { color: var(--c-ink-2); }
.ati-tab.active {
    background: var(--c-white);
    color: var(--c-ink);
    box-shadow: var(--shadow-sm);
}
.ati-tab-panel         { display: none; }
.ati-tab-panel.active  { display: block; }

/* ── 필터 바 ─────────────────────────────────────────────────────── */
.ati-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 16px 20px;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.ati-filter-bar .ati-select {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}
.ati-filter-bar .ati-input { flex: 1; min-width: 140px; max-width: 240px; }
.ati-filter-bar__btns { display: flex; gap: 8px; flex-shrink: 0; }

/* ── 이미지 섹션 ─────────────────────────────────────────────────── */
.ati-img-section { margin-bottom: 24px; }
.ati-img-section__label {
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-subtle);
    margin: 0 0 10px;
    padding: 0 4px;
    border-left: 3px solid var(--c-primary);
    padding-left: 10px;
}
.ati-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

/* 이미지 카드 */
.ati-img-card {
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--trans);
}
.ati-img-card:hover {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary), var(--shadow);
    transform: translateY(-2px);
}
.ati-img-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}
.ati-img-card__info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ati-img-card__name {
    font-size: 12px;
    font-weight: var(--fw-semi);
    color: var(--c-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ati-img-card__sub {
    font-size: 11px;
    color: var(--c-subtle);
}

/* ── 제목 선택 ────────────────────────────────────────────────────── */
.ati-title-box {
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.ati-title-box__head {
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.ati-title-box__hint {
    font-size: 12px;
    color: var(--c-subtle);
    margin: 0 0 16px;
}
.ati-title-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--trans);
}
.ati-title-opt input[type=radio] {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--c-primary);
    width: 16px;
    height: 16px;
}
.ati-title-opt__text {
    font-size: 13.5px;
    color: var(--c-ink-2);
    line-height: 1.6;
    word-break: keep-all;
}
.ati-title-opt:hover { border-color: var(--c-primary); background: var(--c-primary-l); }
.ati-title-opt--selected { border-color: var(--c-primary); background: var(--c-primary-l); }
.ati-title-opt--selected .ati-title-opt__text { color: var(--c-ink); font-weight: var(--fw-semi); }

/* 직접 수정 */
.ati-title-edit {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 12px;
}
.ati-title-edit__label {
    display: block;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 8px;
}
.ati-title-edit__hint {
    font-size: 11px;
    color: var(--c-subtle);
    margin: 6px 0 0;
}

/* ── 포스팅 버튼 ──────────────────────────────────────────────────── */
.ati-submit-wrap {
    padding: 20px 0 0;
}
.ati-submit-msg {
    font-size: 13px;
    color: var(--c-muted);
    margin: 8px 0 0;
    text-align: center;
}

/* ── 진행 표시 ────────────────────────────────────────────────────── */
.ati-progress-wrap {
    padding: 32px 24px;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    margin: 16px 0;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.ati-progress-msg {
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--c-ink-2);
    margin: 0 0 16px;
}
.ati-progress-bar {
    height: 6px;
    background: var(--c-border);
    border-radius: 100px;
    overflow: hidden;
}
.ati-progress-bar__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--c-primary), #38bdf8);
    border-radius: 100px;
    transition: width .5s ease;
    animation: ati-shimmer 2s ease-in-out infinite;
}
@keyframes ati-shimmer { 0%,100% { opacity: 1 } 50% { opacity: .65 } }

/* ── 결과 ─────────────────────────────────────────────────────────── */
.ati-result {
    padding: 24px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    text-align: center;
    font-family: var(--font);
}
.ati-result--success {
    background: var(--c-green-l);
    border: 1.5px solid #a7f3d0;
}
.ati-result--error {
    background: var(--c-red-l);
    border: 1.5px solid #fca5a5;
}
.ati-result__msg {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    margin: 0 0 8px;
}
.ati-result__title {
    font-size: 13px;
    color: var(--c-ink-3);
    margin: 0 0 16px;
}
.ati-result__sub {
    font-size: 13px;
    color: var(--c-muted);
    margin: 8px 0 0;
}

/* ════════════════════════════════════════════════════════════════
   마이페이지 (class-atisub-mypage.php 기존 클래스 유지)
   ════════════════════════════════════════════════════════════════ */
.atisub-mypage {
    max-width: 860px;
    font-family: var(--font);
}

/* 기존 클래스들 — 새 변수계로 override */
.atisub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: 24px;
}
.atisub-tab {
    padding: 11px 18px;
    font-size: 13px;
    font-weight: var(--fw-semi);
    color: var(--c-muted);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border: 1.5px solid transparent;
    border-bottom: none;
    transition: var(--trans);
    white-space: nowrap;
    font-family: var(--font);
}
.atisub-tab:hover  { background: var(--c-surface); color: var(--c-primary); }
.atisub-tab.active {
    background: var(--c-white);
    color: var(--c-primary);
    border-color: var(--c-border);
    border-bottom-color: var(--c-white);
    margin-bottom: -2px;
}

.atisub-status-card {
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.atisub-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.atisub-muted { color: var(--c-muted); font-size: 13px; }

.atisub-credit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.atisub-credit-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.atisub-credit-num   { font-size: 28px; font-weight: var(--fw-black); color: var(--c-primary); line-height: 1; letter-spacing: -.04em; }
.atisub-credit-label { font-size: 12px; color: var(--c-muted); font-weight: var(--fw-medium); }
.atisub-credit-box small { font-size: 11px; color: var(--c-subtle); }

/* 배지 */
.atisub-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    font-family: var(--font);
}
.atisub-badge-active    { background: var(--c-green-l); color: var(--c-green); }
.atisub-badge-expired   { background: var(--c-red-l);   color: var(--c-red); }
.atisub-badge-cancelled { background: var(--c-surface); color: var(--c-muted); }

/* 공지 */
.atisub-notice { font-family: var(--font); }
.atisub-notice-warning {
    background: var(--c-warn-l);
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--c-warn);
    margin-bottom: 16px;
}

/* 선불 잔액 */
.atisub-prepaid-balance {
    font-size: 36px;
    font-weight: var(--fw-black);
    color: var(--c-primary);
    letter-spacing: -.04em;
    margin-bottom: 6px;
    font-family: var(--font);
}
.atisub-prepaid-balance small { font-size: 15px; font-weight: var(--fw-regular); color: var(--c-muted); margin-left: 6px; }

/* 폼 */
.atisub-form { max-width: 560px; font-family: var(--font); }
.atisub-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.atisub-form-row label { font-size: 13px; font-weight: var(--fw-semi); color: var(--c-ink-2); }
.atisub-form-row input[type=text],
.atisub-form-row input[type=url],
.atisub-form-row textarea {
    padding: 10px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font);
    color: var(--c-ink);
    width: 100%;
    transition: var(--trans);
    background: var(--c-white);
}
.atisub-form-row input:focus,
.atisub-form-row textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}
.atisub-form-row small { font-size: 11px; color: var(--c-subtle); }
.required { color: var(--c-red); }

/* 업체 사진 */
.atisub-photo-item { position: relative; }
.atisub-photo-item img { border-radius: var(--radius-sm); border: 1.5px solid var(--c-border); display: block; }
.atisub-photo-delete {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px;
    background: var(--c-red); color: var(--c-white);
    border: none; border-radius: 50%;
    font-size: 12px; cursor: pointer; line-height: 22px; text-align: center; padding: 0;
}

/* 이력 */
.atisub-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    background: var(--c-white);
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font);
}
.atisub-history-title { font-size: 13px; font-weight: var(--fw-semi); margin: 0 0 4px; color: var(--c-ink-2); }
.atisub-status-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: var(--fw-bold); }
.status-sent    { background: var(--c-green-l); color: var(--c-green); }
.status-failed  { background: var(--c-red-l);   color: var(--c-red); }
.status-pending { background: var(--c-primary-l); color: var(--c-primary); }

/* 테이블 */
.atisub-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-white);
}
.atisub-table th,
.atisub-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: middle;
}
.atisub-table th { background: var(--c-surface); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.atisub-table tr:last-child td { border-bottom: none; }
.atisub-table tr:hover td { background: #f8faff; }
.atisub-loading { color: var(--c-subtle); font-style: italic; font-family: var(--font); }

/* 탭 콘텐츠 */
.atisub-tab-content { padding-top: 4px; }

/* 버튼 (마이페이지 호환) */
.atisub-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    color: var(--c-ink-2);
    font-size: 13px;
    font-weight: var(--fw-semi);
    cursor: pointer;
    text-decoration: none;
    transition: var(--trans);
    font-family: var(--font);
}
.atisub-btn:hover { background: var(--c-surface); }
.atisub-btn-primary {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}
.atisub-btn-primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); color: var(--c-white); }
.atisub-btn-lg { padding: 14px 30px; font-size: 15px; }
.atisub-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 기타 */
.atisub-status-msg { font-size: 13px; color: var(--c-muted); margin-left: 10px; font-family: var(--font); }
.atisub-gate {
    text-align: center;
    padding: 60px 24px;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    font-family: var(--font);
}
.atisub-gate h3 { font-size: 20px; font-weight: var(--fw-bold); color: var(--c-ink); margin: 0 0 14px; }

/* 관리자 */
.atisub-admin-wrap { max-width: 1280px; font-family: var(--font); }
.atisub-credit-adj-wrap { display: flex; align-items: center; gap: 6px; }
.atisub-adj-form { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.atisub-adj-input { width: 72px; padding: 5px 8px; border: 1px solid var(--c-border); border-radius: 4px; font-family: var(--font); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   반응형 (Mobile First)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ati-pricing__grid       { grid-template-columns: 1fr 1fr; }
    .ati-pricing__trust      { grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
    .ati-filter-bar .ati-select { max-width: 100%; }
    .ati-img-grid            { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .atisub-credit-grid      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .ati-pricing__hero       { padding: 40px 4px 32px; }
    .ati-pricing__grid       { grid-template-columns: 1fr; }
    .ati-pricing__trust      { grid-template-columns: 1fr 1fr; }
    .ati-compare__table      { font-size: 12px; }
    .ati-compare__table th,
    .ati-compare__table td   { padding: 10px 12px; }
    .ati-filter-bar          { flex-direction: column; }
    .ati-filter-bar .ati-select,
    .ati-filter-bar .ati-input { max-width: 100%; }
    .ati-filter-bar__btns    { flex-direction: row; width: 100%; }
    .ati-filter-bar__btns .ati-btn { flex: 1; }
    .ati-tabs                { width: 100%; }
    .ati-tab                 { flex: 1; text-align: center; font-size: 12px; padding: 8px 10px; }
    .ati-factory__header     { flex-direction: column; align-items: flex-start; }
    .atisub-credit-grid      { grid-template-columns: 1fr; }
    .atisub-tabs             { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; }
    .atisub-tab              { white-space: nowrap; font-size: 12px; padding: 9px 12px; }
    .ati-shop-panel__grid    { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .ati-pricing__title      { font-size: 24px; }
    .ati-plan__amount        { font-size: 30px; }
    .ati-pricing__trust      { grid-template-columns: 1fr; }
    .ati-img-grid            { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}