* { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f7; color: #1d1d1f; }

  /* ── 로그인 / 가입 — 분할 레이아웃 (2026-05-09 v6) ── */
  #screen-login {
    min-height: 100vh;
    background: #f8fafc;
    transition: background 0.4s;
  }
  #screen-login.signup-mode { background: #f8fafc; }
  .signup-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }
  /* ── 좌측: Active Stores ── */
  .signup-left {
    background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 50%, #fce7f3 100%);
    padding: 60px 56px;
    position: relative;
    overflow: hidden;
  }
  .signup-left::before {
    content: ''; position: absolute;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%);
    top: -200px; right: -200px; filter: blur(20px);
    pointer-events: none;
  }
  .signup-left::after {
    content: ''; position: absolute;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(236,72,153,0.15) 0%, transparent 70%);
    bottom: -150px; left: -100px; filter: blur(30px);
    pointer-events: none;
  }
  .signup-bg-shape {
    position: absolute; border-radius: 24px;
    background: rgba(255,255,255,0.4); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    pointer-events: none;
  }
  .signup-bg-shape-1 { width: 140px; height: 140px; top: 8%; right: 10%; transform: rotate(15deg); border-radius: 32px; }
  .signup-bg-shape-2 { width: 100px; height: 100px; bottom: 12%; right: 25%; transform: rotate(-20deg); border-radius: 50%; }
  .signup-brand { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 60px; color: #0f172a; position: relative; }
  .signup-brand span { color: #6366f1; }
  .signup-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: #6366f1; margin-bottom: 12px;
    position: relative; display: flex; align-items: center; gap: 8px;
  }
  .signup-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #10b981; position: relative; animation: signupPulse 2s infinite;
  }
  .signup-live-dot::before {
    content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%;
    background: #10b981; animation: signupPing 2s infinite;
  }
  @keyframes signupPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
  @keyframes signupPing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
  .signup-section-headline { font-size: 28px; font-weight: 800; letter-spacing: -0.8px; color: #0f172a; margin-bottom: 8px; position: relative; }
  .signup-section-sub { font-size: 14px; color: #64748b; margin-bottom: 28px; position: relative; }
  .signup-stores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; margin-bottom: 28px; }
  .signup-store-card {
    background: white; border: 1px solid rgba(226,232,240,0.8); border-radius: 16px;
    overflow: hidden; cursor: pointer; transition: all 0.25s; text-decoration: none;
    color: inherit; display: block; position: relative; box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    min-height: 200px;
  }
  /* 카드 안 모든 자식이 클릭 이벤트 가로채지 않게 — 카드 어디 호버해도 a 태그로 전달 */
  .signup-store-card * { pointer-events: none; }
  .signup-store-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(99,102,241,0.2); border-color: #a5b4fc; }
  .signup-store-img-wrap { position: relative; overflow: hidden; }
  .signup-store-img {
    width: 100%; height: 130px; object-fit: cover; background: #f1f5f9; display: block; transition: transform 0.4s;
  }
  .signup-store-card:hover .signup-store-img { transform: scale(1.05); }
  .signup-store-live {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    color: white; padding: 4px 8px; border-radius: 6px; font-size: 10px;
    font-weight: 600; display: flex; align-items: center; gap: 4px;
  }
  .signup-store-live-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; animation: signupPulse 2s infinite; }
  .signup-store-info { padding: 14px 16px; }
  .signup-store-name { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px; letter-spacing: -0.2px; }
  .signup-store-meta { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; }
  .signup-store-flag { font-size: 14px; }
  .signup-stat-row {
    display: flex; gap: 24px; padding: 18px 22px;
    background: rgba(255,255,255,0.7); backdrop-filter: blur(10px);
    border-radius: 14px; border: 1px solid rgba(255,255,255,0.8); position: relative;
  }
  .signup-stat-item { flex: 1; }
  .signup-stat-num { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #0f172a; }
  .signup-stat-label { font-size: 11px; color: #64748b; margin-top: 2px; font-weight: 500; }

  /* ── 우측: 가입/로그인 폼 (50:50 — 박스 컬럼 가득, 자식 380 가운데) ── */
  .signup-layout .login-box {
    background: white;
    border-radius: 0;
    width: 100%;
    max-width: none;
    padding: 60px 40px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .signup-layout .login-box > * { width: 100%; max-width: 380px; }
  .login-box {
    background: #fff; border-radius: 20px; padding: 48px 40px;
    width: 400px; box-shadow: 0 32px 80px rgba(0,0,0,0.3);
  }

  /* 모바일만 단일 컬럼 (480px 이하), 태블릿 이상 50:50 유지 */
  @media (max-width: 480px) {
    .signup-layout { grid-template-columns: 1fr; }
    .signup-left { padding: 32px 24px; }
    .signup-layout .login-box { padding: 32px 24px; max-width: 100%; }
  }
  .login-logo { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
  .login-logo span { color: #0071e3; }
  .login-sub { color: #86868b; font-size: 14px; margin-bottom: 32px; }
  .lang-dd-wrap { position: relative; margin-bottom: 28px; }
  .lang-dd-btn {
    width: 100%; padding: 9px 14px; border: 1.5px solid #d2d2d7;
    border-radius: 10px; background: #fafafa; font-size: 13px; font-weight: 500;
    color: #1d1d1f; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; transition: border-color 0.15s;
  }
  .lang-dd-btn:hover { border-color: #0071e3; }
  .lang-dd-btn.open { border-color: #0071e3; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .lang-dd-arrow { font-size: 10px; color: #86868b; transition: transform 0.15s; }
  .lang-dd-btn.open .lang-dd-arrow { transform: rotate(180deg); }
  .lang-dd-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border: 1.5px solid #0071e3; border-top: none;
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    overflow: hidden; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  .lang-dd-list.open { display: block; }
  .lang-dd-search-wrap { padding: 8px 10px 6px; border-bottom: 1px solid #f0f0f0; }
  .lang-dd-search {
    width: 100%; padding: 6px 10px; border: 1.5px solid #e0e0e5;
    border-radius: 7px; font-size: 13px; outline: none; color: #1d1d1f;
  }
  .lang-dd-search:focus { border-color: #0071e3; }
  .lang-dd-options { overflow-y: auto; max-height: 250px; }
  .lang-dd-options::-webkit-scrollbar { width: 4px; }
  .lang-dd-options::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 4px; }
  .lang-dd-empty { padding: 14px; font-size: 13px; color: #aaa; text-align: center; display: none; }
  .lang-dd-divider {
    padding: 5px 14px 3px; font-size: 10px; font-weight: 700; color: #86868b;
    text-transform: uppercase; letter-spacing: 0.06em; background: #f9f9f9;
    border-top: 1px solid #f0f0f0;
  }
  .lang-dd-option {
    padding: 10px 14px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 10px; color: #1d1d1f; transition: background 0.1s;
  }
  .lang-dd-option:hover { background: #f0f6ff; }
  .lang-dd-option.selected { background: #e8f0fe; font-weight: 600; color: #0071e3; }
  #screen-login.signup-mode .login-sub { margin-bottom: 4px; }
  .auth-signup-sub { font-size:12px; color:#86868b; text-align:center; margin-bottom:20px; min-height:16px; }
  .form-group { margin-bottom: 16px; }
  .form-group label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; }
  .form-group input {
    width: 100%; padding: 12px 16px; border: 1px solid #d2d2d7;
    border-radius: 10px; font-size: 15px; outline: none; transition: border-color 0.2s;
  }
  .form-group input:focus { border-color: #0071e3; }
  .btn-primary {
    width: 100%; padding: 14px; background: #0071e3; color: #fff;
    border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; margin-top: 8px; transition: background 0.2s;
  }
  .btn-primary:hover { background: #0077ed; }
  .login-footer { text-align: center; margin-top: 20px; font-size: 13px; color: #86868b; }
  .login-footer a { color: #0071e3; text-decoration: none; }
  .signup-only { display: none; }
  #screen-login.signup-mode .signup-only { display: block; }

  /* ── 레이아웃 ── */
  #screen-dashboard { display: none; min-height: 100vh; }
  .layout { display: flex; }
  .sidebar {
    width: 240px; background: #1d1d1f; min-height: 100vh;
    padding: 24px 0; position: fixed; top: 0; left: 0;
  }
  .sidebar-logo { padding: 8px 24px 24px; font-size: 18px; font-weight: 800; color: #fff; border-bottom: 1px solid #2d2d2f; cursor: pointer; transition: opacity 0.2s; display: flex; align-items: center; gap: 8px; letter-spacing: -0.3px; }
  .sidebar-logo span { color: #0071e3; }
  .sidebar-logo:hover { opacity: 0.7; }
  .sidebar-logo .logo-icon { width: 28px; height: 28px; background: #0071e3; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0; }
  .sidebar-section { padding: 20px 24px 8px; font-size: 11px; color: #86868b; font-weight: 600; letter-spacing: 0.05em; }
  .nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 24px;
    color: #a1a1a6; font-size: 14px; cursor: pointer; transition: all 0.15s;
  }
  .nav-item:hover { color: #fff; background: #2d2d2f; }
  .nav-item.active { color: #fff; background: #2d2d2f; border-left: 3px solid #0071e3; }
  .nav-icon { font-size: 16px; width: 20px; text-align: center; }
  .main { margin-left: 240px; flex: 1; }
  .topbar {
    background: #fff; padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #e5e5ea; position: sticky; top: 0; z-index: 10;
  }
  .topbar-title { font-size: 18px; font-weight: 600; }
  .topbar-right { display: flex; align-items: center; gap: 12px; }
  .avatar {
    width: 36px; height: 36px; background: #0071e3; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .content { padding: 32px; }

  /* ── 공통 ── */
  .card {
    background: #fff; border-radius: 14px; padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .card-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
  .btn-small {
    padding: 6px 14px; background: #0071e3; color: #fff;
    border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .btn-outline {
    padding: 6px 14px; background: #fff; color: #0071e3;
    border: 1px solid #0071e3; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  }

  /* ── 거래처 목록 탭 ── */
  .clients-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
  }
  .clients-summary {
    display: flex; gap: 16px; margin-bottom: 24px;
  }
  .summary-chip {
    padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
    background: #fff; border: 1px solid #e5e5ea;
  }
  .summary-chip .num { font-weight: 700; color: #0071e3; }
  .client-card {
    background: #fff; border-radius: 14px; padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 12px;
    display: flex; align-items: center; gap: 16px;
  }
  .client-card.inactive { opacity: 0.6; }
  .client-avatar {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0;
  }
  .client-info { flex: 1; }
  .client-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .client-domain { font-size: 12px; color: #86868b; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .client-meta { display: flex; gap: 12px; overflow: hidden; }
  .client-meta span { font-size: 11px; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .client-actions { display: flex; align-items: center; gap: 12px; }
  .toggle-wrap { display: flex; align-items: center; gap: 8px; }
  .toggle-label { font-size: 12px; color: #86868b; }
  .toggle {
    width: 44px; height: 24px; background: #d2d2d7; border-radius: 12px;
    cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0;
  }
  .toggle.on { background: #34c759; }
  .toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .toggle.on::after { left: 22px; }
  .client-status-badge {
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  }
  .badge-on { background: #d1fae5; color: #065f46; }
  .badge-off { background: #f3f4f6; color: #6b7280; }
  .client-card { cursor: pointer; transition: box-shadow 0.2s; }
  .client-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
  /* ── 활동 국가 자동완성 ── */
  .country-ac-wrap { position: relative; }
  .country-ac-input {
    width: 100%; padding: 10px 14px; border: 1.5px solid #d2d2d7;
    border-radius: 10px; font-size: 13px; outline: none; background: #fff;
    color: #1d1d1f; transition: border-color 0.15s;
  }
  .country-ac-input:focus, .country-ac-wrap.open .country-ac-input {
    border-color: #0071e3;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .country-ac-input.has-value { padding-left: 38px; }
  .country-ac-flag {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 16px; pointer-events: none; display: none;
  }
  .country-ac-input.has-value ~ .country-ac-flag { display: block; }
  .country-ac-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border: 1.5px solid #0071e3; border-top: none;
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    max-height: 280px; overflow-y: auto; z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  .country-ac-wrap.open .country-ac-list { display: block; }
  .country-ac-section-label {
    padding: 7px 14px 4px; font-size: 10px; font-weight: 700;
    color: #86868b; text-transform: uppercase; letter-spacing: 0.5px;
    background: #fafafa;
  }
  .country-ac-option {
    padding: 9px 14px; font-size: 13px; cursor: pointer; color: #1d1d1f;
    display: flex; align-items: center; gap: 10px;
  }
  .country-ac-option:hover, .country-ac-option.highlight { background: #f0f7ff; }
  .country-ac-opt-flag { font-size: 18px; flex-shrink: 0; }
  .country-ac-opt-name { flex: 1; }
  .country-ac-opt-code { color: #86868b; font-size: 11px; font-weight: 600; flex-shrink: 0; }
  .country-ac-empty { padding: 18px; font-size: 13px; color: #aaa; text-align: center; }
  .country-ac-list mark { background: #fef9c3; color: #854d0e; padding: 0 2px; border-radius: 2px; font-weight: 700; }
  .country-ac-list::-webkit-scrollbar { width: 5px; }
  .country-ac-list::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 4px; }

  /* ── 다국어 그룹 카드 ── */
  .group-card {
    background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 12px; overflow: hidden; border: 1px solid #e2e8f0;
  }
  .group-header {
    display: flex; align-items: center; gap: 16px; padding: 18px 24px;
    cursor: pointer; transition: background 0.15s;
  }
  .group-header:hover { background: #f8fafc; }
  .group-info { flex: 1; min-width: 0; }
  .group-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .group-meta { font-size: 12px; color: #86868b; display: flex; gap: 10px; flex-wrap: wrap; }
  .group-count {
    background: #f1f5f9; color: #475569; padding: 4px 10px;
    border-radius: 12px; font-size: 11px; font-weight: 700; flex-shrink: 0;
  }
  .group-arrow { color: #94a3b8; font-size: 14px; transition: transform 0.2s; flex-shrink: 0; }
  .group-card.open .group-arrow { transform: rotate(180deg); }
  .group-children {
    display: none; padding: 0 24px 14px; border-top: 1px solid #f1f5f9;
  }
  .group-card.open .group-children { display: block; }
  .child-row {
    display: flex; align-items: center; padding: 10px 0; gap: 12px;
    border-bottom: 1px solid #f8fafc; cursor: pointer;
  }
  .child-row:last-child { border-bottom: none; }
  .child-row:hover { background: #fafafc; }
  .child-flag { font-size: 16px; flex-shrink: 0; }
  .child-info { flex: 1; min-width: 0; }
  .child-lang { font-size: 13px; font-weight: 600; color: #1e293b; }
  .child-domain { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .child-badge {
    padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; flex-shrink: 0;
  }
  .child-badge.main { background: #fef3c7; color: #78350f; }
  .child-badge.sub { background: #ede9fe; color: #5b21b6; }
  .toggle-mini {
    width: 36px; height: 20px; background: #d2d2d7; border-radius: 10px;
    position: relative; cursor: pointer; flex-shrink: 0;
  }
  .toggle-mini.on { background: #34c759; }
  .toggle-mini::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: left 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  .toggle-mini.on::after { left: 18px; }

  /* 다국어 추가 카드 (정보 탭 내) */
  .ml-add-card { padding: 14px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; margin-top: 6px; }
  .ml-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
  .ml-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
    background: #ede9fe; color: #5b21b6;
  }
  .ml-chip.main { background: #fef3c7; color: #78350f; }
  .ml-chip.main::before { content: '⭐'; }
  .ml-add-btn {
    background: #f0f9ff; color: #0369a1; border: 1px dashed #7dd3fc;
    padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer;
  }
  .ml-add-btn:hover { background: #e0f2fe; }
  .ml-add-row {
    display: flex; gap: 8px; align-items: center; margin-top: 10px;
    padding: 10px; background: #fff; border-radius: 8px; border: 1px solid #cbd5e1;
  }
  .ml-add-row .lang-dd-wrap { flex: 1; margin: 0; }
  .ml-help { font-size: 11px; color: #86868b; margin-top: 8px; line-height: 1.5; }

  /* 다국어 추가 confirm 모달 */
  .ml-modal-list { background: #f8fafc; padding: 12px 14px; border-radius: 8px; margin: 14px 0; }
  .ml-modal-item { font-size: 12px; color: #334155; padding: 4px 0; }
  .ml-modal-warn { background: #fff8e1; color: #78350f; padding: 8px 12px; border-radius: 6px; font-size: 12px; margin: 10px 0; }

  /* 잠긴 필드 표시 */
  .locked-overlay {
    position: relative; padding: 10px 12px; background: #f1f5f9;
    border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; color: #475569;
  }
  .locked-overlay::after {
    content: '🔒'; position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); color: #94a3b8;
  }
  .locked-note { font-size: 11px; color: #94a3b8; margin-top: 4px; }

  /* ── FREE 무료기간 카드 ── */
  .client-card.free-period {
    background: linear-gradient(135deg, #f0f9ff 0%, #e8f5e9 100%);
    border: 2px solid #81c784;
    box-shadow: 0 1px 4px rgba(129,199,132,0.2);
  }
  .client-card.free-ending {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    border: 2px solid #ffb74d;
    box-shadow: 0 1px 4px rgba(255,183,77,0.2);
  }
  .free-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 800; padding: 2px 8px;
    border-radius: 20px; letter-spacing: 0.4px; flex-shrink: 0;
  }
  .free-badge.green { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
  .free-badge.orange { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

  /* ── GBP 배지 & 섹션 ── */
  .gbp-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 20px; letter-spacing: 0.3px; flex-shrink: 0;
  }
  .gbp-badge.none      { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
  .gbp-badge.unverified{ background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
  .gbp-badge.verified  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
  .gbp-badge.stale     { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; animation: gbpPulse 2s infinite; }
  @keyframes gbpPulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

  .gbp-alert-banner {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ffb74d; border-radius: 14px;
    padding: 14px 18px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: box-shadow 0.2s;
  }
  .gbp-alert-banner:hover { box-shadow: 0 4px 12px rgba(255,183,77,0.3); }
  .gbp-alert-icon { font-size: 20px; }
  .gbp-alert-text { flex: 1; }
  .gbp-alert-title { font-size: 13px; font-weight: 700; color: #e65100; margin-bottom: 2px; }
  .gbp-alert-sub { font-size: 12px; color: #bf360c; }
  .gbp-alert-arrow { color: #e65100; font-size: 16px; }

  .summary-chip.ok .num { color: #15803d; }
  .summary-chip.warn .num { color: #c2410c; }
  .summary-chip.danger .num { color: #b91c1c; }

  .gbp-detail-card {
    background: #fafafa; border-radius: 12px; padding: 18px 20px;
    margin-top: 14px;
  }
  .gbp-detail-title {
    font-size: 13px; font-weight: 700; color: #1d1d1f;
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
  }
  .gbp-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f0f0f5; gap: 10px;
  }
  .gbp-detail-row:last-child { border-bottom: none; }
  .gbp-detail-row-label { font-size: 12px; color: #86868b; flex-shrink: 0; }
  .gbp-detail-row-value { font-size: 13px; font-weight: 500; color: #1d1d1f; text-align: right; word-break: break-all; }
  .gbp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .gbp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 600;
    border: none; cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
  }
  .gbp-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .gbp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .gbp-btn.primary { background: #0071e3; color: #fff; }
  .gbp-btn.success { background: #34c759; color: #fff; }
  .gbp-btn.outline { background: #fff; color: #0071e3; border: 1.5px solid #0071e3; }
  .gbp-btn.ghost   { background: transparent; color: #86868b; }
  .gbp-help {
    font-size: 11px; color: #86868b; margin-top: 8px; line-height: 1.5;
  }
  .gbp-note {
    background: #f0f9ff; border-left: 3px solid #0071e3;
    padding: 8px 12px; border-radius: 6px;
    font-size: 11px; color: #0c4a6e; margin-top: 8px;
  }
  .gbp-cand-item {
    background: #fff; border: 1.5px solid #e5e5ea; border-radius: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .gbp-cand-item:hover { border-color: #0071e3; box-shadow: 0 2px 8px rgba(0,113,227,0.08); }
  .gbp-cand-name { font-size: 14px; font-weight: 700; color: #1d1d1f; margin-bottom: 4px; }
  .gbp-cand-addr { font-size: 12px; color: #555; line-height: 1.5; margin-bottom: 10px; word-break: break-all; }
  .gbp-cand-actions { display: flex; gap: 8px; align-items: center; }
  .gbp-cand-score { font-size: 11px; color: #86868b; margin-left: auto; }
  .gbp-cand-score.high { color: #15803d; font-weight: 600; }
  #gbp-cand-more-btn {
    width: 100%; margin-top: 8px; padding: 10px;
    background: #f2f2f7; color: #0071e3; border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer;
  }
  #gbp-cand-more-btn:hover { background: #e5e5ea; }
  #gbp-cand-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ── 거래처 상세 ── */
  .detail-hero {
    background: #fff; border-radius: 16px; padding: 24px 28px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 18px;
    display: flex; align-items: center; gap: 20px;
  }
  .detail-avatar {
    width: 58px; height: 58px; border-radius: 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 20px; flex-shrink: 0;
  }
  .detail-hero-info { flex: 1; }
  .detail-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
  .detail-domain { font-size: 13px; color: #0071e3; font-weight: 500; margin-bottom: 8px; }
  .detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .detail-tag { background: #f2f2f7; color: #86868b; padding: 2px 8px; border-radius: 6px; font-size: 11px; }
  .detail-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .sub-row { display: flex; align-items: center; gap: 10px; }
  .sub-row-label { font-size: 13px; font-weight: 600; }
  .detail-sw {
    width: 46px; height: 26px; border-radius: 13px; background: #34c759;
    position: relative; cursor: pointer; transition: background 0.2s;
  }
  .detail-sw::after {
    content: ''; position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: all 0.2s;
  }
  .detail-sw.off { background: #d2d2d7; }
  .detail-sw.off::after { right: auto; left: 3px; }
  .btn-edit-info {
    padding: 8px 16px; background: #f2f2f7; color: #1d1d1f;
    border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  }

  .auto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
  .auto-card { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  .auto-card.linkable { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; text-decoration: none; display: block; }
  .auto-card.linkable:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); transform: translateY(-1px); }
  .auto-card-icon { font-size: 18px; margin-bottom: 6px; }
  .auto-card-label { font-size: 11px; color: #86868b; margin-bottom: 4px; }
  .auto-card-value { font-size: 13px; font-weight: 600; }
  .auto-card-value.blue { color: #0071e3; }
  .auto-card-value.green { color: #34c759; }

  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .info-card { background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  .info-card.full { grid-column: span 2; }
  .info-card-label { font-size: 11px; font-weight: 700; color: #86868b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
  .info-card-value { font-size: 14px; color: #1d1d1f; line-height: 1.6; }
  .info-card-value.muted { color: #86868b; font-style: italic; }
  .lang-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .lang-chip { background: #e8f0fe; color: #1a56db; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
  .link-rows { display: flex; flex-direction: column; gap: 8px; }
  .link-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: #f9f9f9; border-radius: 10px; text-decoration: none;
    color: #1d1d1f; transition: background 0.15s; cursor: pointer;
  }
  .link-row:hover { background: #f0f7ff; }
  .link-row-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
  .link-row-label { font-size: 13px; font-weight: 600; flex: 1; }
  .link-row-url { font-size: 11px; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
  .link-row-arrow { color: #c7c7cc; font-size: 12px; margin-left: 4px; }

  /* ── 대시보드 탭 (개별 거래처) ── */
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
  .stat-card { background: #fff; border-radius: 14px; padding: 20px 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  .stat-label { font-size: 12px; color: #86868b; font-weight: 500; margin-bottom: 8px; }
  .stat-value { font-size: 28px; font-weight: 700; }
  .stat-sub { font-size: 12px; color: #86868b; margin-top: 4px; }
  .stat-up { color: #34c759; }
  .section-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
  .post-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid #f5f5f7;
  }
  .post-item:last-child { border-bottom: none; }
  .post-thumb {
    width: 52px; height: 52px; background: #e5e5ea; border-radius: 8px;
    overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px;
  }
  .post-info { flex: 1; }
  .post-title { font-size: 13px; font-weight: 500; margin-bottom: 3px; line-height: 1.4; }
  .post-date { font-size: 11px; color: #86868b; }
  .post-status { font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
  .status-live { background: #d1fae5; color: #065f46; }
  .status-draft { background: #fef3c7; color: #92400e; }

  /* ── 업로드 탭 ── */
  .upload-set {
    border: 1px solid #e5e5ea; border-radius: 10px; padding: 14px 16px;
    margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all 0.2s;
  }
  .upload-set:hover { border-color: #0071e3; background: #f0f7ff; }
  .set-icon { font-size: 24px; }
  .set-info { flex: 1; }
  .set-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  .set-count { font-size: 11px; color: #86868b; }
  .dropzone {
    border: 2px dashed #d2d2d7; border-radius: 14px; padding: 40px;
    text-align: center; cursor: pointer; transition: all 0.2s; margin-top: 16px; background: #fafafa;
  }
  .dropzone:hover { border-color: #0071e3; background: #f0f7ff; }
  .dropzone-icon { font-size: 40px; margin-bottom: 12px; }
  .dropzone-text { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
  .dropzone-sub { font-size: 12px; color: #86868b; }

  /* ── 설정 탭 ── */
  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .settings-group { margin-bottom: 4px; }
  .settings-group label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; color: #86868b; }
  .settings-group input, .settings-group select, .settings-group textarea {
    width: 100%; padding: 10px 14px; border: 1px solid #d2d2d7;
    border-radius: 8px; font-size: 14px; outline: none; font-family: inherit; transition: border-color 0.2s;
  }
  .settings-group input:focus, .settings-group select:focus { border-color: #0071e3; }
  .settings-group textarea { resize: vertical; min-height: 80px; }
  .settings-full { grid-column: span 2; }

  /* ── 구독 탭 ── */
  .billing-client-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f5f5f7;
  }
  .billing-client-row:last-child { border-bottom: none; }
  .billing-dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; flex-shrink: 0; }
  .billing-dot.off { background: #d2d2d7; }
  .billing-plan-price { font-size: 28px; font-weight: 800; color: #1d1d1f; }
  .billing-plan-country { font-size: 14px; color: #86868b; margin-top: 4px; }
  .billing-plan-badge {
    font-size: 12px; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; background: rgba(52,199,89,0.1); color: #34c759;
  }
  .billing-stat-box { background: #f5f5f7; border-radius: 10px; padding: 14px; text-align: center; }
  .billing-stat-num { font-size: 26px; font-weight: 800; color: #1d1d1f; }
  .billing-stat-label { font-size: 11px; color: #86868b; font-weight: 600; margin-top: 3px; }
  /* 계정 탭 언어 드롭다운 */
  .acct-lang-dd-wrap { position: relative; }
  .acct-lang-dd-btn {
    width: 100%; padding: 10px 14px; border: 1.5px solid #d2d2d7;
    border-radius: 10px; background: #fafafa; font-size: 13px; font-weight: 500;
    color: #1d1d1f; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; transition: border-color 0.15s; outline: none;
  }
  .acct-lang-dd-btn:hover { border-color: #0071e3; }
  .acct-lang-dd-btn.open { border-color: #0071e3; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .acct-lang-dd-arrow { font-size: 10px; color: #86868b; transition: transform 0.15s; }
  .acct-lang-dd-btn.open .acct-lang-dd-arrow { transform: rotate(180deg); }
  .acct-lang-dd-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border: 1.5px solid #0071e3; border-top: none;
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    overflow: hidden; z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  .acct-lang-dd-list.open { display: block; }
  .acct-lang-dd-search-wrap { padding: 8px 10px 6px; border-bottom: 1px solid #f0f0f0; }
  .acct-lang-dd-search {
    width: 100%; padding: 6px 10px; border: 1.5px solid #e0e0e5;
    border-radius: 7px; font-size: 13px; outline: none; color: #1d1d1f;
  }
  .acct-lang-dd-search:focus { border-color: #0071e3; }
  .acct-lang-dd-options { overflow-y: auto; max-height: 220px; }
  .acct-lang-dd-options::-webkit-scrollbar { width: 4px; }
  .acct-lang-dd-options::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 4px; }
  .acct-lang-dd-empty { padding: 14px; font-size: 13px; color: #aaa; text-align: center; display: none; }
  .acct-lang-dd-option {
    padding: 9px 14px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    color: #1d1d1f; transition: background 0.1s;
  }
  .acct-lang-dd-option:hover { background: #f0f6ff; }
  .acct-lang-dd-option.selected { background: #e8f0fe; font-weight: 600; color: #0071e3; }
  .acct-lang-dd-divider {
    padding: 5px 14px 3px; font-size: 10px; font-weight: 700; color: #86868b;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: #f9f9f9; border-top: 1px solid #f0f0f0;
  }

  /* ── 탭 네비 ── */
  .tab-nav { display: flex; gap: 4px; margin-bottom: 24px; background: #f5f5f7; padding: 4px; border-radius: 10px; width: fit-content; }
  .tab-btn {
    padding: 8px 18px; border-radius: 8px; border: none; background: transparent;
    font-size: 13px; font-weight: 500; cursor: pointer; color: #86868b; transition: all 0.2s;
  }
  .tab-btn.active { background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

  /* ── 브레드크럼 ── */
  .breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #86868b; margin-bottom: 20px;
  }
  .breadcrumb span { cursor: pointer; }
  .breadcrumb span:hover { color: #0071e3; }
  .breadcrumb-sep { color: #d2d2d7; }
  .breadcrumb-current { color: #1d1d1f; font-weight: 500; cursor: default; }

  /* ── 거래처 추가 모달 ── */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px); display: flex; align-items: flex-start;
    justify-content: center; padding: 24px 16px; z-index: 500;
    overflow-y: auto;
  }
  .modal-overlay.hidden { display: none; }
  .modal {
    background: #fff; border-radius: 24px; width: 100%; max-width: 580px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.25); overflow: hidden;
    animation: modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
    margin: auto;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .modal-header {
    padding: 24px 28px 20px; border-bottom: 1px solid #f0f0f5;
    display: flex; justify-content: space-between; align-items: center;
  }
  .modal-title { font-size: 18px; font-weight: 700; }
  .modal-close {
    width: 30px; height: 30px; border-radius: 50%; background: #f2f2f7;
    border: none; font-size: 16px; cursor: pointer; color: #86868b;
    display: flex; align-items: center; justify-content: center;
  }
  .modal-close:hover { background: #e5e5ea; }
  .modal-body { padding: 22px 28px; max-height: 70vh; overflow-y: auto; }
  .modal-footer {
    padding: 16px 28px 24px; border-top: 1px solid #f0f0f5;
    display: flex; gap: 10px;
  }
  .btn-modal-cancel {
    padding: 13px 24px; background: #f2f2f7; color: #1d1d1f;
    border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .btn-modal-save {
    flex: 1; padding: 13px; background: #0071e3; color: #fff;
    border: none; border-radius: 12px; font-size: 14px; font-weight: 600;
    cursor: pointer; box-shadow: 0 4px 12px rgba(0,113,227,0.3); transition: background 0.15s;
  }
  .btn-modal-save:hover { background: #0077ed; }
  .btn-modal-save:disabled { background: #86868b; box-shadow: none; cursor: not-allowed; }

  /* 자동생성 칩 */
  .auto-row { display: flex; gap: 7px; margin-bottom: 20px; flex-wrap: wrap; }
  .auto-chip {
    display: flex; align-items: center; gap: 5px;
    background: #f0f7ff; color: #0071e3; border: 1px solid #cce4ff;
    padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 500;
  }

  /* 구독 토글 박스 */
  .sub-toggle-box {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0; border-radius: 14px;
    padding: 15px 18px; display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; transition: all 0.2s;
  }
  .sub-toggle-box.off { background: #f9f9f9; border-color: #e5e5ea; }
  .sub-label { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
  .sub-desc { font-size: 12px; color: #86868b; }
  .sw {
    width: 50px; height: 28px; border-radius: 14px; background: #34c759;
    position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
  }
  .sw::after {
    content: ''; position: absolute; top: 3px; right: 3px;
    width: 22px; height: 22px; background: #fff; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: all 0.2s;
  }
  .sw.off { background: #d2d2d7; }
  .sw.off::after { right: auto; left: 3px; }

  /* 섹션 제목 */
  .sec-title {
    font-size: 11px; font-weight: 700; color: #86868b; text-transform: uppercase;
    letter-spacing: 0.8px; margin: 18px 0 12px; display: flex; align-items: center; gap: 8px;
  }
  .sec-title::after { content: ''; flex: 1; height: 1px; background: #f0f0f5; }

  /* 모달 폼 */
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .form-full-mb { margin-bottom: 12px; }
  .form-group-m label {
    font-size: 11px; font-weight: 700; color: #86868b; display: block;
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px;
  }
  .form-group-m input, .form-group-m textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid #e5e5ea;
    border-radius: 11px; font-size: 14px; outline: none; font-family: inherit;
    background: #fafafa; transition: all 0.15s;
  }
  .form-group-m input:focus, .form-group-m textarea:focus {
    border-color: #0071e3; background: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
  }
  .form-group-m textarea { resize: vertical; min-height: 80px; }

  /* 바로가기 플랫폼 */
  .platform-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .platform-btn {
    display: flex; align-items: center; gap: 5px; padding: 5px 11px;
    border-radius: 20px; border: 1.5px solid #e5e5ea; background: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; color: #1d1d1f;
  }
  .platform-btn:hover { border-color: #0071e3; color: #0071e3; background: #f0f7ff; }
  .link-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .link-card {
    display: flex; align-items: center; gap: 10px; background: #fafafa;
    border: 1.5px solid #e5e5ea; border-radius: 12px; padding: 10px 14px; transition: border-color 0.15s;
  }
  .link-card:focus-within { border-color: #0071e3; background: #fff; }
  .link-plat-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
  }
  .link-fields { flex: 1; display: flex; gap: 0; align-items: center; }
  .link-label-inp {
    width: 110px; flex-shrink: 0; padding: 5px 8px; border: none;
    background: transparent; font-size: 13px; font-weight: 600; outline: none; color: #1d1d1f;
  }
  .link-sep { width: 1px; height: 18px; background: #e5e5ea; flex-shrink: 0; margin: 0 4px; }
  .link-url-inp {
    flex: 1; padding: 5px 8px; border: none; background: transparent;
    font-size: 13px; outline: none; color: #86868b;
  }
  .link-del-btn {
    width: 26px; height: 26px; border-radius: 8px; background: transparent; border: none;
    color: #c7c7cc; cursor: pointer; font-size: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
  }
  .link-del-btn:hover { background: #fff0f0; color: #ff3b30; }
  .btn-add-link {
    width: 100%; padding: 10px; border: 1.5px dashed #d2d2d7; background: transparent;
    border-radius: 11px; font-size: 13px; color: #86868b; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
  }
  .btn-add-link:hover { border-color: #0071e3; color: #0071e3; background: #f0f7ff; }

  /* ── 거래처 상세 탭 (밑줄 스타일) ── */
  .client-tab-nav { display: flex; margin-bottom: 22px; border-bottom: 2px solid #e5e5ea; }
  .client-tab-btn {
    padding: 11px 22px; border: none; background: transparent;
    font-size: 14px; font-weight: 500; cursor: pointer; color: #86868b;
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
  }
  .client-tab-btn:hover:not(:disabled) { color: #1d1d1f; }
  .client-tab-btn.active { color: #0071e3; font-weight: 700; border-bottom-color: #0071e3; }
  .client-tab-btn:disabled { color: #c7c7cc; cursor: default; }

  /* 서브도메인 링크 */
  .detail-domain-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: #0071e3; font-weight: 500; margin-bottom: 8px; text-decoration: none;
  }
  .detail-domain-link:hover { text-decoration: underline; opacity: 0.8; }

  /* ── 사진 업로드 탭 ── */
  .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
  .folder-card {
    background: #fff; border-radius: 14px; padding: 20px; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer;
    border: 2px solid transparent; transition: all 0.2s;
  }
  .folder-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
  .folder-card.selected { border-color: #0071e3; }
  .folder-icon-lg { font-size: 36px; margin-bottom: 10px; }
  .folder-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  .folder-count { font-size: 12px; color: #86868b; }
  .sfh-bar {
    display: none; align-items: center; gap: 10px; margin-bottom: 16px;
    padding: 12px 16px; background: #f0f7ff; border-radius: 12px;
  }
  .sfh-icon { font-size: 20px; }
  .sfh-name-label { font-size: 14px; font-weight: 700; flex: 1; }
  .sfh-count-label { font-size: 12px; color: #86868b; }
  .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; margin-top: 4px; }
  .file-thumb {
    background: #e5e5ea; border-radius: 10px; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; cursor: pointer;
  }
  .file-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .file-thumb:hover .file-del-btn { opacity: 1; }
  .file-del-btn {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
    background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; opacity: 0; transition: opacity 0.15s; cursor: pointer;
  }
  .file-add-cell {
    aspect-ratio: 1; border: 2px dashed #d2d2d7; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #d2d2d7; cursor: pointer; transition: all 0.15s;
  }
  .file-add-cell:hover { border-color: #0071e3; color: #0071e3; }
  .file-name-cell { font-size: 11px; color: #86868b; margin-top: 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .file-item { position: relative; cursor: pointer; }
  .file-item.checked .file-thumb { outline: 2.5px solid #0071e3; outline-offset: 1px; border-radius: 10px; }
  .file-check {
    position: absolute; top: 6px; left: 6px; z-index: 3;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,0.92); border: 2px solid rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: transparent;
    opacity: 0; transition: opacity 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
  .file-item:hover .file-check, .file-item.checked .file-check { opacity: 1; }
  .file-item.checked .file-check { background: #0071e3; border-color: #0071e3; color: #fff; }
  .sfh-sel-badge {
    font-size: 12px; color: #0071e3; font-weight: 600;
    padding: 2px 9px; background: #e8f0fe; border-radius: 20px; display: none;
  }
  .btn-del-sel {
    background: #ff3b30 !important; color: #fff !important;
    border-color: #ff3b30 !important; display: none;
  }
  .upload-section-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .upload-section-title { font-size: 15px; font-weight: 700; }
  .upload-section-label {
    font-size: 11px; font-weight: 700; color: #86868b;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
  }
  .upload-section-label::after { content: ''; flex: 1; height: 1px; background: #e5e5ea; }
  .folder-grid-homepage { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; margin-bottom: 24px; }
  .folder-grid-posting  { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 10px; margin-bottom: 24px; }
  .folder-num { font-size: 24px; font-weight: 800; color: #c7c7cc; margin-bottom: 6px; line-height: 1; }

  /* 업로드 진행 패널 */
  .upload-progress-panel {
    display: none; margin-top: 16px;
    background: #fff; border: 1px solid #e5e5ea; border-radius: 14px; padding: 16px 18px;
  }
  .upload-progress-panel.active { display: block; }
  .upload-progress-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  .upload-progress-spinner {
    width: 14px; height: 14px; border: 2px solid #e5e5ea;
    border-top-color: #0071e3; border-radius: 50%;
    animation: spin 0.7s linear infinite; flex-shrink: 0;
  }
  .upload-progress-title { font-size: 13px; font-weight: 600; flex: 1; }
  .upload-progress-pct { font-size: 13px; font-weight: 700; color: #0071e3; }
  .upload-progress-filename {
    font-size: 12px; color: #86868b; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .upload-progress-track {
    height: 5px; background: #f0f0f5; border-radius: 999px; overflow: hidden;
  }
  .upload-progress-fill {
    height: 100%; background: #0071e3; border-radius: 999px; transition: width 0.1s linear; width: 0%;
  }
  .upload-progress-panel.done .upload-progress-spinner { border-top-color: #34c759; }
  .upload-progress-panel.done .upload-progress-fill { background: #34c759; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── 햄버거 버튼 (모바일 전용) ── */
  .hamburger-btn {
    display: none; width: 36px; height: 36px; border: none; background: #f2f2f7;
    border-radius: 10px; cursor: pointer; align-items: center; justify-content: center;
    flex-direction: column; gap: 5px; padding: 8px; flex-shrink: 0;
  }
  .hamburger-btn span {
    display: block; width: 18px; height: 2px; background: #1d1d1f; border-radius: 2px; transition: all 0.2s;
  }

  /* 사이드바 오버레이 (모바일 전용) */
  .sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 99;
  }

  /* ── 모바일 반응형 ── */
  @media (max-width: 768px) {
    /* 로그인 박스 */
    .login-box { width: calc(100% - 32px); padding: 28px 20px; border-radius: 16px; }

    /* 사이드바 - 오버레이 방식 */
    .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; z-index: 100; }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-overlay.visible { display: block; }

    /* 메인 전체 폭 */
    .main { margin-left: 0; }

    /* 탑바 */
    .topbar { padding: 12px 16px; }
    .hamburger-btn { display: flex; }

    /* 콘텐츠 패딩 */
    .content { padding: 16px; }

    /* 그리드 축소 */
    .auto-grid,
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
    .info-grid,
    .settings-grid,
    .section-grid,
    .form-grid-2 { grid-template-columns: 1fr; }
    .info-card.full { grid-column: span 1; }
    .settings-full { grid-column: span 1; }

    /* 클라이언트 카드 */
    .client-card { flex-wrap: wrap; }
    .client-actions { width: 100%; justify-content: flex-end; }

    /* 디테일 히어로 */
    .detail-hero { flex-direction: column; align-items: flex-start; }
    .detail-hero-right { align-items: flex-start; width: 100%; flex-direction: row; flex-wrap: wrap; }

    /* 탭 스크롤 */
    .tab-nav { width: 100%; overflow-x: auto; }
    .client-tab-nav { overflow-x: auto; }
    .client-tab-btn { padding: 11px 14px; font-size: 13px; white-space: nowrap; }

    /* 요약 칩 */
    .clients-summary { flex-wrap: wrap; gap: 8px; }
    .clients-header { flex-wrap: wrap; gap: 10px; }

    /* 모달 */
    .modal-header { padding: 20px 20px 16px; }
    .modal-body { padding: 16px 20px; max-height: 60vh; }
    .modal-footer { padding: 12px 20px 20px; }

    /* 완료 카드 */
    .done-card { width: calc(100% - 32px); padding: 28px 20px; }

    /* 요금 통계 3열 → 1열 */
    .billing-stat-grid { grid-template-columns: 1fr !important; }

    /* 링크 URL 말줄임 너비 축소 */
    .link-row-url { max-width: 120px; }

    /* 업로드 섹션 상단 wrap */
    .upload-section-top { flex-wrap: wrap; gap: 8px; }

    /* 파일 그리드 2열 최소 */
    .file-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .folder-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

    /* 모바일 터치 타겟 (최소 44x44 권장) */
    .lang-dd-option { padding: 12px 14px; } /* 8px 10px → 12px 14px */
    .btn-primary, .btn-secondary { min-height: 40px; padding: 10px 16px; }
    .nav-item { min-height: 40px; padding: 10px 14px; }
  }

  /* 완료 모달 */
  .done-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 600;
  }
  .done-overlay.hidden { display: none; }
  .done-card {
    background: #fff; border-radius: 24px; padding: 40px 36px; width: 400px;
    text-align: center; box-shadow: 0 32px 80px rgba(0,0,0,0.25);
    animation: modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
  }
  .done-icon { font-size: 50px; margin-bottom: 14px; }
  .done-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
  .done-sub { font-size: 14px; color: #86868b; line-height: 1.7; margin-bottom: 22px; }
  .done-info { background: #f9f9f9; border-radius: 14px; padding: 16px 18px; text-align: left; margin-bottom: 22px; }
  .done-row { display: flex; justify-content: space-between; padding: 6px 0; }
  .done-row + .done-row { border-top: 1px solid #f0f0f0; }
  .done-key { font-size: 12px; color: #86868b; }
  .done-val { font-size: 13px; font-weight: 600; }
  .done-val.blue { color: #0071e3; }
  .done-val.green { color: #34c759; }
  .btn-done {
    width: 100%; padding: 14px; background: #1d1d1f; color: #fff;
    border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
  }