/* =========================
   JULY STUDIO LAYOUT
========================= */:root { --july-bg: #f5f7fb; --july-surface: rgba(255, 255, 255, 0.82); --july-card: #ffffff; --july-line: rgba(20, 30, 60, 0.08); --july-text: #12182a; --july-text-soft: #687089; --july-navy: #0f1630; --july-blue: #67b8ff; --july-purple: #8a7dff; --july-pink: #ef9ad7; --july-grad: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); --july-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); --july-radius-lg: 28px; --july-radius-md: 20px; --july-radius-sm: 14px; }
/* 배경 */
body { background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(138, 125, 255, 0.12), transparent 24%), linear-gradient(180deg, #f7f9fd 0%, #f3f5fa 100%); color: var(--july-text); }

/* 전체 래퍼 */
.july-studio { display: flex; min-height: 100vh; position: relative; }
.sub-basic-body { padding: 0; }
/* 사이드바 */
.july-mobile-topbar__brand_span { color: var(--july-grad); }
.july-sidebar { width: 260px; min-width: 260px; padding: 28px 20px 24px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, rgba(12, 18, 41, 0.98) 0%, rgba(18, 22, 49, 0.96) 100%); color: #fff; box-shadow: 10px 0 30px rgba(10, 16, 35, 0.12); z-index: 30; overflow-y: auto; }
.july-sidebar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.18), transparent 22%), radial-gradient(circle at 80% 18%, rgba(138, 125, 255, 0.18), transparent 24%), radial-gradient(circle at bottom left, rgba(239, 154, 215, 0.10), transparent 24%); pointer-events: none; }
.july-sidebar>* { position: relative; z-index: 1; }
.july-logo { display: inline-block; color: #fff; font-size: 34px; font-weight: 900; letter-spacing: -0.04em; text-decoration: none; line-height: 1; margin-bottom: 8px; }
.july-logo-sub { margin: 0; font-size: 12px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.62); font-weight: 600; }
.july-sidebar__top { margin-bottom: 28px; }
.july-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.july-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 14px; color: rgba(255, 255, 255, 0.78); font-size: 15px; font-weight: 600; text-decoration: none; transition: all .2s ease; border: 1px solid transparent; background: transparent; }
.july-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.08); }
.july-nav a.is-active { color: #fff; background: linear-gradient(90deg, rgba(103, 184, 255, 0.18) 0%, rgba(138, 125, 255, 0.18) 50%, rgba(239, 154, 215, 0.18) 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.july-plan-box { padding: 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); margin-bottom: 14px; }
.july-plan-box strong { display: block; font-size: 14px; margin-bottom: 6px; color: #fff; }
.july-plan-box p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.july-plan-box p span { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.62)}
.july-plan-box p .july-plan-box__period { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.62)}
.july-side-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; border-radius: 999px; background: var(--july-grad); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(125, 120, 255, 0.24); }
/* 메인 */
.july-main { flex: 1; min-width: 0; padding: 28px 32px; }
.july-main__inner { width: 100%; max-width: 1440px; margin: 0 auto; }
/* 상단 헤더 */
.july-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.july-page-head__eyebrow { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: var(--july-purple); text-transform: uppercase; }
.july-page-head__title { margin: 0 0 8px; font-size: 42px; line-height: 1.12; letter-spacing: -0.04em; color: var(--july-navy); font-weight: 800; }
.july-page-head__title .point { background: var(--july-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.july-page-head__desc { margin: 0; font-size: 15px; line-height: 1.7; color: var(--july-text-soft); }
/* 카드 */
.july-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: var(--july-shadow); border-radius: var(--july-radius-lg); backdrop-filter: blur(14px); }
.july-card--padded { padding: 26px; }
/* 생성 페이지 2단 */
.july-grid { display: grid; gap: 24px; }
.july-grid--generate { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px); }
/* 필드 */
.july-field { margin-bottom: 18px; }
.july-field:last-child { margin-bottom: 0; }
.july-field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--july-navy); }
.july-field input[type="text"], .july-field input[type="file"], .july-field select, .july-field textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; color: var(--july-text); font-size: 15px; transition: all .2s ease; box-sizing: border-box; }
.july-field textarea { min-height: 140px; padding: 16px; resize: vertical; }
.july-field input:focus, .july-field select:focus, .july-field textarea:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
/* 버튼 */
.july-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: all .2s ease; }
.july-btn:hover { transform: translateY(-1px); }
.july-btn--primary { background: var(--july-grad); color: #fff; box-shadow: 0 12px 26px rgba(125, 120, 255, 0.20); }
.july-btn--line { background: #fff; color: var(--july-navy); border: 1px solid rgba(20, 30, 60, 0.10); }
.july-btn--ghost { background: rgba(255, 255, 255, 0.55); color: var(--july-navy); border: 1px solid rgba(20, 30, 60, 0.08); }
/* 생성 버튼 하단 고정 느낌 */
.july-submit-bar { position: sticky; bottom: 0; margin-top: 20px; padding-top: 18px; background: linear-gradient(180deg, rgba(245, 247, 251, 0) 0%, rgba(245, 247, 251, 0.92) 32%, rgba(245, 247, 251, 1) 100%); }
.july-submit-bar .july-btn { width: 100%; min-height: 56px; font-size: 16px; font-weight: 800; }
/* 생성내역 상단 툴바 */
.july-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.july-search { flex: 1; min-width: 0; position: relative; }
.july-search input { width: 100%; min-height: 50px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.08); background: rgba(255, 255, 255, 0.84); font-size: 14px; }
.july-filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.july-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.08); background: rgba(255, 255, 255, 0.74); color: var(--july-text-soft); font-size: 13px; font-weight: 700; text-decoration: none; }
.july-chip.is-active { background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 50%, rgba(239, 154, 215, 0.12) 100%); color: var(--july-navy); border-color: rgba(138, 125, 255, 0.18); }
/* 히스토리 카드 */
.july-history-list { display: grid; gap: 18px; }
.july-history-card { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); border-radius: 24px; box-shadow: var(--july-shadow); }
.july-history-thumb { width: 140px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #e9eef8 0%, #dfe6f6 100%); }
.july-history-thumb img, .july-history-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.july-history-body { min-width: 0; }
.july-history-title { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--july-navy); letter-spacing: -0.03em; }
.july-history-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; color: var(--july-text-soft); font-size: 13px; font-weight: 600; }
.july-history-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.july-history-keywords span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(103, 184, 255, 0.08); color: #3b5cc9; font-size: 12px; font-weight: 700; }
.july-history-subinfo { display: flex; flex-wrap: wrap; gap: 10px 18px; color: #7d849a; font-size: 13px; }
.july-history-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.july-history-status { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.july-history-status.is-done { background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 50%, rgba(239, 154, 215, 0.12) 100%); color: #4d4aca; }
.july-history-status.is-expired { background: rgba(20, 30, 60, 0.06); color: #7b8194; }
.july-history-card.is-expired { opacity: 0.68; }
/* 현황판 */
.july-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.july-stat-card { padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: var(--july-shadow); }
.july-stat-label { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--july-text-soft); }
.july-stat-value { font-size: 34px; line-height: 1; letter-spacing: -0.04em; font-weight: 900; color: var(--july-navy); }
.july-stat-value .point { background: var(--july-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* 반응형 */
@media (max-width:1280px) {
  .july-grid--generate { grid-template-columns: 1fr; }
  .july-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:991px) {
  .july-studio { display: block; }
  .july-main { padding: 20px 16px 32px; }
  .july-page-head { display: block; }
  .july-page-head__title { font-size: 32px; }
  .july-history-card { grid-template-columns: 1fr; align-items: flex-start; }
  .july-history-thumb { width: 100%; max-width: 180px; }
  .july-history-actions { width: 100%; align-items: stretch; }
  .july-stat-grid { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px !important; }
  .july-field input, .july-field select, .july-field textarea, .july-onboarding-form input, .july-onboarding-form select, .july-onboarding-form textarea, .july-prefix-input input, .july-keyword-builder__input-wrap input { font-size: 16px !important; }
}
@media (max-width:640px) {
  .july-page-head__title { font-size: 28px; }
  .july-card--padded { padding: 20px; }
  .july-history-title { font-size: 18px; }
}
/* =========================
   JULY SHORTS - GENERATE
========================= */

.july-page--generate .shorts-generate-wrap { padding: 0 !important; background: transparent !important; }
.july-page--generate .shorts-generate-wrap .inner { max-width: none !important; padding: 0 !important; }
.july-page--generate .page-head { display: none !important; }
/* 폼 왼쪽 묶음처럼 보이게 */
.july-page--generate .shorts-form::before { content: ""; display: block; grid-column: 1 / 2; grid-row: 1 / span 20; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); border-radius: 28px; z-index: 0; }
/* usage 박스 오른쪽 카드처럼 */
.july-page--generate .usage-status-box { grid-column: 2 / 3; grid-row: 1 / 2; position: relative; z-index: 1; margin: 0 !important; padding: 24px !important; border-radius: 28px !important; background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(20, 30, 60, 0.07) !important; box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08) !important; }
.july-page--generate .usage-status-box__label { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: #8a7dff; text-transform: uppercase; }
.july-page--generate .usage-status-box__main { font-size: 26px; line-height: 1.1; font-weight: 600; color: #0f1630; letter-spacing: -0.04em; }
.july-page--generate .usage-status-box__sub, .july-page--generate .usage-status-box__period { margin-top: 10px; font-size: 14px; line-height: 1.7; color: #687089; }
/* 폼 요소들 왼쪽 카드 위에 얹기 */
.july-page--generate .shorts-form>.field, .july-page--generate .shorts-form>.grid, .july-page--generate .shorts-form>.upload-box, .july-page--generate .shorts-form>.submit-area { grid-column: 1 / 2; position: relative; z-index: 1; padding-left: 28px; padding-right: 28px; }
.july-page--generate .shorts-form>.field:first-of-type { padding-top: 28px; }
.july-page--generate .shorts-form>.submit-area { padding-bottom: 28px; }
/* 폼 라벨 */
.july-page--generate .field { margin-bottom: 18px !important; }
.july-page--generate .field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: #0f1630; }
/* 입력 요소 */
.july-page--generate .field input[type="text"], .july-page--generate .field input[type="file"], .july-page--generate .field select, .july-page--generate .field textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; color: #12182a; font-size: 15px; transition: all .2s ease; box-sizing: border-box; }
.july-page--generate .field textarea { min-height: 140px; padding: 16px; resize: vertical; }
.july-page--generate .field input:focus, .july-page--generate .field select:focus, .july-page--generate .field textarea:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
/* 2열 필드 */
.july-page--generate .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* 업로드 박스 */
.july-page--generate .upload-box { margin-bottom: 18px; }
/* 제출 버튼 영역 */
.july-page--generate .submit-area { margin-top: 12px; position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(245, 247, 251, 0) 0%, rgba(245, 247, 251, 0.92) 26%, rgba(245, 247, 251, 1) 100%); }
.july-page--generate .submit-area .btn-primary, .july-page--generate .submit-area button[type="submit"] { width: 100%; min-height: 56px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 12px 26px rgba(125, 120, 255, 0.20); }
/* 로딩 오버레이도 톤 맞추기 */
.generate-loading-box { border-radius: 28px !important; box-shadow: 0 24px 60px rgba(22, 28, 45, 0.18) !important; }
.generate-loading-title { color: #0f1630 !important; }
.generate-loading-spinner { border-top-color: #8a7dff !important; }
/* 모바일 */
@media (max-width:1280px) {
  .july-page--generate .shorts-form { grid-template-columns: 1fr; }
  .july-page--generate .usage-status-box { grid-column: 1 / 2; grid-row: auto; }
}
@media (max-width:768px) {
  .july-page--generate .shorts-form::before { grid-column: 1 / 2; grid-row: 2 / span 30; }
  .july-page--generate .shorts-form>.field, .july-page--generate .shorts-form>.grid, .july-page--generate .shorts-form>.upload-box, .july-page--generate .shorts-form>.submit-area { padding-left: 20px; padding-right: 20px; }
  .july-page--generate .shorts-form>.field:first-of-type { padding-top: 20px; }
  .july-page--generate .shorts-form>.submit-area { padding-bottom: 20px; }
  .july-page--generate .grid.two { grid-template-columns: 1fr; }
  .july-page-head__title { font-size: 30px; }
}
html, body { height: 100%; }
body.is-shorts-dashboard, html.is-shorts-dashboard { overflow: hidden; }
.is-shorts-dashboard .july-studio { height: 100vh; overflow: hidden; }
.is-shorts-dashboard .july-sidebar { height: 100vh; overflow-y: auto; overflow-x: hidden; }
.is-shorts-dashboard .july-main { height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 34px 32px; }
/* =========================
   JULY GENERATE LAYOUT RESET
========================= */

.july-page--generate .shorts-generate-wrap { padding: 0 !important; background: transparent !important; }
.july-page--generate .shorts-generate-wrap .inner { max-width: none !important; padding: 0 !important; }
.july-page--generate .page-head { display: none !important; }
/* 기존 이상한 가상 카드 제거 */
.july-page--generate .shorts-form::before { display: none !important; content: none !important; }
/* 왼쪽 실제 입력 카드처럼 */
.july-page--generate .shorts-form>.field, .july-page--generate .shorts-form>.grid, .july-page--generate .shorts-form>.upload-box, .july-page--generate .shorts-form>.submit-area { grid-column: 1 / 2; padding-left: 0 !important; padding-right: 0 !important; }
/* 왼쪽 카드 묶음 배경 */
.july-page--generate .shorts-form { position: relative; }
.july-page--generate .shorts-form-left-card { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); border-radius: 28px; padding: 28px; }
/* 오른쪽 usage 카드 */
.july-page--generate .usage-status-box { grid-column: 2 / 3; grid-row: 1 / 2; margin: 0 !important; padding: 24px !important; border-radius: 28px !important; background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(20, 30, 60, 0.07) !important; box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08) !important; position: sticky; top: 28px; }
/* 필드 spacing */
.july-page--generate .field { margin-bottom: 18px !important; }
.july-page--generate .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.july-page--generate .upload-box { margin-bottom: 18px !important; }
/* submit bar 이상한 sticky 제거 */
.july-page--generate .submit-area { margin-top: 8px; background: transparent !important; position: static !important; padding-bottom: 0 !important; }
/* 버튼 */
.july-page--generate .submit-area .btn-primary, .july-page--generate .submit-area button[type="submit"] { width: 100%; min-height: 56px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 12px 26px rgba(125, 120, 255, 0.20); }
@media (max-width:1280px) {
  .is-shorts-dashboard .july-main { padding: 24px 20px; }
  .july-page--generate .shorts-form { grid-template-columns: 1fr !important; }
  .july-page--generate .usage-status-box { grid-column: 1 / 2; grid-row: auto; position: static; }
}
@media (max-width:768px) {
  .july-page--generate .grid.two { grid-template-columns: 1fr; }
}
.usage-status-box { margin: 18px 0 28px; padding: 18px 20px; border: 1px solid #e7e7e7; border-radius: 18px; background: #fff; }
.usage-status-box.demo { background: #fafafa; }
.usage-status-box__label { font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 8px; }
.usage-status-box__period { font-size: 14px; color: #555; margin-bottom: 8px; }
.usage-status-box__main { font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.usage-status-box__sub { font-size: 14px; color: #666; }
.generate-loading-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 15, 20, 0.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.generate-loading-box { width: 100%; max-width: 360px; background: #fff; border-radius: 20px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); }
.generate-loading-spinner { width: 52px; height: 52px; margin: 0 auto 18px; border: 4px solid #e9e9ef; border-top-color: #111; border-radius: 50%; animation: julyShortsSpin 0.9s linear infinite; }
.generate-loading-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #111; }
.generate-loading-desc { margin: 0; font-size: 14px; line-height: 1.6; color: #666; }
.shorts-form.is-submitting { pointer-events: none; opacity: 0.72; }
@keyframes julyShortsSpin {
  to { transform: rotate(360deg); }
}
.july-page--generate .usage-status-box { margin-bottom: 28px !important; }
.july-page--generate .generate-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 28px; align-items: stretch; }
.july-page--generate .shorts-form-left-card { width: 100%; height: 100%; }
.july-page--generate .generate-preview-card { position: sticky; top: 28px; height: 100%; min-height: 100%; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); border-radius: 28px; padding: 22px; display: flex; flex-direction: column; text-align: center; }
.july-page--generate .generate-preview-label { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: #8a7dff; text-transform: uppercase; }
.july-page--generate .generate-preview-title { margin: 0 0 14px; font-size: 20px; line-height: 1.3; font-weight: 800; color: #0f1630; }
.july-page--generate .phone-mockup { width: 100%; max-width: 340px; margin: auto auto 0; padding: 16px; border-radius: 42px; background: linear-gradient(180deg, #161b33 0%, #0f1630 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 50px rgba(15, 22, 48, 0.24); }
.july-page--generate .phone-mockup__notch { width: 42%; height: 24px; margin: 0 auto 12px; border-radius: 0 0 18px 18px; background: #0a0f22; }
.july-page--generate .phone-mockup__screen { aspect-ratio: 9 / 18; border-radius: 30px; overflow: hidden; background: #161616; display: flex; align-items: center; justify-content: center; position: relative; }
.july-page--generate .phone-mockup__placeholder { padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.74); font-size: 14px; line-height: 1.7; }
.july-page--generate .phone-mockup__screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: none; background: #000; }
.july-page--generate .phone-mockup.is-ready .phone-mockup__placeholder { display: none; }
.july-page--generate .phone-mockup.is-ready .phone-mockup__screen img { display: block; }
.july-auth-sns__btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width:1280px) {
  .july-page--generate .generate-layout { grid-template-columns: 1fr; }
  .july-page--generate .generate-preview-card { position: static; height: auto; min-height: 0; }
}
.july-page--generate .generate-preview-title { margin: 0 0 18px; }
.july-page--generate .generate-preview-card .phone-mockup { flex-shrink: 0; }
.header-logo { display: flex; align-items: center}
.header-logo a { display: block; position: relative; color: #fff; font-weight: 900; }
.header-logo a span { background: linear-gradient(90deg, #77c9ff 0%, #d798ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* =========================
   JULY TAB RADIO
========================= */
.july-tab-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
.july-tab-radio { position: relative; display: inline-flex; align-items: center; }
.july-tab-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.july-tab-radio span { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); color: #4b556b; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s ease; box-sizing: border-box; }
.july-tab-radio input[type="radio"]:checked+span { color: #fff; border-color: transparent; background: #000; box-shadow: 0 10px 24px rgba(125, 120, 255, 0.20); }
.july-tab-radio span:hover { border-color: rgba(138, 125, 255, 0.30); }
/* =========================
   JULY ONBOARDING MODAL
========================= */
.july-onboarding-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(10, 16, 35, 0.52); backdrop-filter: blur(8px); padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; }
.july-onboarding-modal { width: 100%; max-width: 760px; margin: auto; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 30px 80px rgba(15, 22, 48, 0.20); border-radius: 32px; padding: 32px; max-height: none; overflow: visible; }
.july-onboarding-eyebrow { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: #8a7dff; }
.july-onboarding-head h2 { margin: 0 0 10px; font-size: 34px; line-height: 1.2; letter-spacing: -0.04em; color: #0f1630; font-weight: 900; }
.july-onboarding-head p { margin: 0 0 24px; color: #687089; font-size: 15px; line-height: 1.7; }
.july-onboarding-form .field { margin-bottom: 18px; }
.july-onboarding-form .field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: #0f1630; }
.july-onboarding-form .field label .onboarding_note { font-size: 13px; font-weight: 700; color: #868686; }
.july-onboarding-form input[type="text"], .july-onboarding-form select { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; color: #12182a; font-size: 15px; box-sizing: border-box; }
.july-onboarding-form input:focus, .july-onboarding-form select:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
.july-onboarding-form .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.july-onboarding-actions { margin-top: 12px; }
.onboarding-tips-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; margin-left: 8px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(138, 125, 255, .10); color: #5d54d6; font-size: 12px; font-weight: 800; cursor: pointer; vertical-align: middle; }
.onboarding-tips-btn:hover { background: rgba(138, 125, 255, .16); }
.onboarding-guide-modal[hidden] { display: none; }
.onboarding-guide-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 18px; }
.onboarding-guide-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 16, 35, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.onboarding-guide-modal__panel { position: relative; z-index: 1; width: min(100%, 420px); padding: 26px 22px 22px; border-radius: 26px; background: rgba(255,255,255,.98); border: 1px solid rgba(20, 30, 60, .08); box-shadow: 0 24px 70px rgba(15, 22, 48, .22); color: #0f1630; }
.onboarding-guide-modal__close { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f5fa; color: #0f1630; font-size: 22px; line-height: 1; cursor: pointer; }
.onboarding-guide-modal__eyebrow { display: inline-flex; align-items: center; min-height: 27px; padding: 0 11px; margin-bottom: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(103,184,255,.12), rgba(239,154,215,.12)); color: #5d54d6; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.onboarding-guide-modal__panel h3 { margin: 0 0 14px; color: #0f1630; font-size: 22px; line-height: 1.35; letter-spacing: -.04em; font-weight: 800; }
.onboarding-guide-modal__panel ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.onboarding-guide-modal__panel li { position: relative; padding: 12px 12px 12px 38px; border-radius: 15px; background: #f8faff; border: 1px solid rgba(20, 30, 60, .07); color: #374151; font-size: 13px; line-height: 1.6; font-weight: 700; word-break: keep-all; }
.onboarding-guide-modal__panel li::before { content: "✓"; position: absolute; left: 13px; top: 12px; width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #77c9ff, #d798ff); color: #fff; font-size: 11px; font-weight: 900; }
.onboarding-guide-modal__example { margin-top: 14px; padding: 14px; border-radius: 17px; background: linear-gradient(90deg, rgba(103,184,255,.10), rgba(239,154,215,.10)); border: 1px solid rgba(138, 125, 255, .13); }
.onboarding-guide-modal__example strong { display: block; margin-bottom: 5px; color: #5d54d6; font-size: 12px; font-weight: 900; }
.onboarding-guide-modal__example p { margin: 0; color: #0f1630; font-size: 13px; line-height: 1.6; font-weight: 800; }
@media (max-width:768px) {
  .july-onboarding-overlay { align-items: flex-start; padding: 12px 10px 20px; }
  .july-onboarding-modal { padding: 24px 20px; border-radius: 24px; }
  .july-onboarding-head h2 { font-size: 28px; }
  .july-onboarding-form .grid.two { grid-template-columns: 1fr; }
  .july-onboarding-overlay { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
.july-chip-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.july-chip-radio { position: relative; display: inline-flex; align-items: center; }
.july-chip-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.july-chip-radio span { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); color: #4b556b; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.july-chip-radio input[type="radio"]:checked+span { color: #fff; border-color: transparent; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); box-shadow: 0 10px 24px rgba(125, 120, 255, 0.18); }
.july-onboarding-form input[type="tel"] { width: 100% !important; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; color: #12182a; font-size: 15px; box-sizing: border-box; }
.july-onboarding-form .grid.july-grid-3-7 { display: grid; grid-template-columns: 5fr 5fr; gap: 16px; }
.july-chip-check-group { display: flex; flex-wrap: wrap; gap: 10px; }
.july-chip-check { position: relative; display: inline-flex; align-items: center; }
.july-chip-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.july-chip-check span { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); color: #4b556b; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.july-chip-check input[type="checkbox"]:checked+span { color: #fff; border-color: transparent; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); box-shadow: 0 10px 24px rgba(125, 120, 255, 0.18); }
@media (max-width:768px) {
  .july-onboarding-form .grid.july-grid-3-7 { grid-template-columns: 1fr; }
}
/* =========================
   JULY KEYWORD BUILDER
========================= */
.july-keyword-builder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 18px; box-sizing: border-box; }
.july-keyword-builder:focus-within { border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
.july-keyword-builder__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.july-keyword-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.14) 0%, rgba(138, 125, 255, 0.16) 52%, rgba(239, 154, 215, 0.14) 100%); color: #4d4aca; font-size: 13px; font-weight: 800; white-space: nowrap; }
.july-keyword-tag__remove { border: 0; background: transparent; color: #6a6f85; font-size: 16px; line-height: 1; padding: 0; cursor: pointer; }
.july-keyword-builder__input-wrap { display: inline-flex; align-items: center; min-height: 38px; flex: 1 1 180px; min-width: 140px; }
.july-keyword-builder__hash { color: #8a7dff; font-size: 16px; font-weight: 900; margin-right: 4px; }
.july-keyword-builder__input-wrap input { border: 0 !important; outline: none !important; background: transparent !important; min-height: 38px !important; width: 100%; padding: 0 !important; box-shadow: none !important; font-size: 14px; }
.july-keyword-builder.is-limit .july-keyword-builder__input-wrap { display: none; }
.july-keyword-builder__hint { width: 100%; margin-top: 2px; font-size: 12px; color: #7b8298; }
/* =========================
   JULY PREFIX INPUT
========================= */
.july-prefix-input { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; box-sizing: border-box; transition: all .2s ease; }
.july-prefix-input:focus-within { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
.july-prefix-input__prefix { flex: 0 0 auto; margin-right: 6px; color: #8a7dff; font-size: 16px; font-weight: 900; line-height: 1; }
.july-prefix-input input { flex: 1 1 auto; width: 100%; min-height: 38px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; }
/* =========================
   JULY MOBILE SIDEBAR
========================= */

@media (max-width:1400px) {
  .july-page--generate .phone-mockup { margin-top: 30px; }
}
.july-mobile-topbar, .july-mobile-overlay { display: none; }
@media (max-width:991px) {
  .july-sidebar__top { display: none; }
  .july-sidebar { justify-content: flex-start; }
  html.is-shorts-dashboard, body.is-shorts-dashboard { overflow: auto !important; }
  .is-shorts-dashboard .july-studio { display: block; height: auto; overflow: visible; }
  .is-shorts-dashboard .july-main { height: auto; overflow: visible; padding: calc(20px + env(safe-area-inset-top)) 16px 28px; }
  .july-mobile-topbar__brand { display: flex; flex-direction: column; line-height: 1.1; color: #fff; }
  .july-mobile-topbar__brand strong { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
  .july-mobile-topbar__brand span { background: linear-gradient(90deg, #77c9ff 0%, #d798ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .july-mobile-topbar__brand p { margin-top: 4px; font-size: 11px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.72); font-weight: 700; }
  .july-mobile-overlay { position: fixed; inset: 0; z-index: 1090; border: 0; background: rgba(8, 12, 28, 0.48); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: all .25s ease; }
.july-sidebar { position: fixed !important; top: 0; left: 0; width: min(82vw, 320px) !important; min-width: 0 !important; height: 100vh; height: 100dvh; z-index: 1100; transform: translateX(-100%); transition: transform .28s ease; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top, 0px) + 24px) 18px max(20px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; touch-action: pan-y; justify-content: space-evenly;}
  body.is-july-sidebar-open { overflow: hidden !important; }
  body.is-july-sidebar-open .july-sidebar { transform: translateX(0); }
  body.is-july-sidebar-open .july-mobile-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .july-sidebar__top { margin-top: 0; }
  .july-sidebar__bottom { margin-top: 28px; }
  .july-page--generate .generate-preview-card { display: none !important; }
  .july-page--generate .generate-layout { grid-template-columns: 1fr !important; }
}
/* =========================
   JULY FILE UPLOAD
========================= */
.july-file-upload { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; box-sizing: border-box; }
.july-file-upload__input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.july-file-upload__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 28px; padding: 0 16px; border-radius: 999px; background: #000; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 20px rgba(125, 120, 255, 0.16); }
.july-file-upload__name { flex: 1 1 auto; min-width: 0; color: #687089; font-size: 14px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width:768px) {
  .july-file-upload { flex-direction: column; align-items: stretch; }
  .july-file-upload__btn { width: 100%; }
  .july-file-upload__name { white-space: normal; word-break: break-all; }
}
.july-file-upload { align-items: center; }
.july-file-upload__btn { flex: 0 0 auto; height: 40px; min-height: 40px; line-height: 40px; padding: 0 20px; border-radius: 999px; margin: 0 !important; text-align: center; color: #fff !important; }
.july-file-upload__name { display: flex; align-items: center; min-height: 40px; line-height: 1.4; }
@media (max-width:768px) {
  .july-file-upload { flex-direction: row; align-items: center; }
  .july-file-upload__btn { width: auto; }
  .july-file-upload__name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.july-file-upload__btn, .july-file-upload__name { box-sizing: border-box; }
/* =========================
   JULY HISTORY
========================= */

.july-page--history { padding: 0; }
.july-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.july-history-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.july-history-list { display: grid; gap: 18px; }
.july-history-card { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 28px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); }
.july-history-card.is-expired { opacity: 0.72; }
.july-history-thumb { width: 120px; }
.july-history-thumb img { width: 100%; aspect-ratio: 9 / 7.2; object-fit: cover; display: block; border-radius: 18px; background: #eef2fb; }
.july-thumb-placeholder { width: 100%; aspect-ratio: 9 / 7.2; border-radius: 18px; background: linear-gradient(135deg, #eef2fb 0%, #e3e9f7 100%); color: #98a1b6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.july-history-body { min-width: 0; }
.july-history-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.july-history-title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; letter-spacing: -0.03em; font-weight: 600; color: #0f1630; }
.july-history-meta { margin: 0; font-size: 14px; color: #6f7891; font-weight: 600; }
.july-history-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.july-history-keywords span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.10) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.10) 100%); color: #4d4aca; font-size: 12px; font-weight: 800; }
.july-history-status-wrap { flex: 0 0 auto; }
.july-history-status { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.july-history-status.is-done { background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.12) 100%); color: #4d4aca; }
.july-history-status.is-expired { background: rgba(20, 30, 60, 0.06); color: #7d8498; }
.july-history-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-bottom: 18px; }
.july-history-info dl { margin: 0; }
.july-history-info dt { margin-bottom: 4px; font-size: 12px; color: #8a92a8; font-weight: 700; }
.july-history-info dd { margin: 0; font-size: 14px; color: #131a2b; word-break: break-all; font-weight: 600; }
.july-history-actions { display: flex; justify-content: flex-end; }
.july-empty-box { padding: 60px 20px; text-align: center; border-radius: 28px; border: 1px dashed rgba(20, 30, 60, 0.12); background: rgba(255, 255, 255, 0.68); }
.july-empty-box__text { margin: 0 0 16px; color: #687089; font-size: 15px; }
@media (max-width:991px) {
  .july-history-thumb { width: 100%; max-width: 220px; }
  .july-history-top { flex-direction: column; align-items: flex-start; }
  .july-history-info { grid-template-columns: 1fr; }
  .july-history-card { grid-template-columns: 1fr; align-items: flex-start; }
  .july-history-actions { align-self: flex-start; justify-content: flex-start; }
}
.july-history-card { padding: 18px; gap: 18px; }
.july-history-info { gap: 10px 20px; margin-bottom: 14px; }
.july-history-title { font-size: 22px; margin: 0 0 4px; }
.july-history-meta { font-size: 13px; }
.july-history-body { min-width: 0; }
.july-history-actions { display: flex; align-items: center; justify-content: flex-end; align-self: center; margin-top: 0; }
.july-history-info dd { font-size: 14px; font-weight: 600; color: #131a2b; }
.july-history-info dl:nth-child(2) dd { color: #6f7891; font-size: 13px; }
.july-history-filter .july-chip { min-height: 38px; padding: 0 14px; }
.july-history-filter .july-chip.is-active { color: #fff; border-color: transparent; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); box-shadow: 0 10px 24px rgba(125, 120, 255, 0.18); }
.july-history-info--compact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.july-history-info__row { display: grid; grid-template-columns: repeat(3, max-content); gap: 22px; align-items: start; }
.july-history-info__row:last-child { grid-template-columns: max-content max-content; gap: 22px; align-items: start; }
.july-history-info__row dl { margin: 0; }
.july-history-info__row dl.is-wide { min-width: 0; }
.july-history-info__row dt { margin-bottom: 4px; font-size: 12px; color: #8a92a8; font-weight: 700; }
.july-history-info__row dd { margin: 0; font-size: 14px; color: #131a2b; font-weight: 600; word-break: break-all; }
.july-history-info__row dl.is-wide dd { color: #6f7891; font-size: 13px; }
.july-history-info--compact { max-width: 760px; }
.july-history-card { gap: 10px; padding: 16px 18px; }
.july-history-top { margin-bottom: 10px; }
.july-history-info--compact { gap: 8px; margin-bottom: 12px; }
@media (max-width:991px) {

  .july-history-info__row, .july-history-info__row:last-child { grid-template-columns: 1fr; }
}
/* ===== 생성내역 1줄 정보형 최종 정리 ===== */
.july-history-card { grid-template-columns: 120px minmax(0, 1fr) auto !important; gap: 18px !important; align-items: center !important; padding: 14px 18px !important; }
.july-history-thumb { width: 120px !important; align-self: center !important; }
.july-history-body { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "top top" "info actions"; column-gap: 20px; row-gap: 10px; align-items: center; min-width: 0; }
.july-history-top { grid-area: top; display: flex !important; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 0 !important; }
.july-history-info--compact { grid-area: info; margin-bottom: 0 !important; max-width: none !important; display: block !important; }
.july-history-info__row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 18px !important; }
.july-history-info__row:last-child { margin-top: 6px; gap: 18px !important; }
.july-history-info__row dl { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.july-history-info__row dt { margin: 0 !important; font-size: 12px; color: #8a92a8; font-weight: 700; white-space: nowrap; }
.july-history-info__row dd { margin: 0 !important; font-size: 14px; color: #131a2b; font-weight: 600; white-space: nowrap; }
.july-history-info__row dl.is-wide dd { color: #6f7891; font-size: 13px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.july-history-actions { grid-area: actions; display: flex !important; align-items: end; justify-content: flex-end !important; align-self: end !important; margin-top: 8px !important; min-width: 110px; }
.july-history-actions .july-btn, .july-history-actions .btn-primary, .july-history-actions .btn-disabled { min-width: 96px; min-height: 40px; padding: 0 18px; font-size: 13px; }
@media (max-width:991px) {
  .july-history-card { grid-template-columns: 1fr !important; gap: 14px !important; align-items: flex-start !important; }
  .july-history-body { grid-template-columns: 1fr !important; grid-template-areas: "top" "info" "actions"; row-gap: 10px; }
  .july-history-info__row, .july-history-info__row:last-child { display: flex !important; flex-wrap: wrap; gap: 10px 14px !important; }
  .july-history-actions { justify-content: flex-start !important; margin-top: 4px !important; }
}
/* ===== 생성내역 1줄 정보형 + 버튼 아래 정렬 ===== */
.july-history-card { grid-template-columns: 120px minmax(0, 1fr) auto !important; gap: 18px !important; align-items: center !important; padding: 14px 18px !important; }
.july-history-thumb { width: 120px !important; align-self: center !important; }
.july-history-body { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "top top" "info actions"; column-gap: 22px; row-gap: 10px; align-items: center; min-width: 0; }
.july-history-top { grid-area: top; margin-bottom: 0 !important; }
.july-history-info--compact { grid-area: info; margin-bottom: 0 !important; max-width: none !important; }
.july-history-info__row.is-one-line { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 18px !important; }
.july-history-info__row.is-one-line dl { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.july-history-info__row.is-one-line dt { margin: 0 !important; font-size: 12px; color: #8a92a8; font-weight: 700; white-space: nowrap; }
.july-history-info__row.is-one-line dd { margin: 0 !important; font-size: 14px; color: #131a2b; font-weight: 600; white-space: nowrap; }
.july-history-info__row.is-one-line dl.is-wide { min-width: 0; }
.july-history-info__row.is-one-line dl.is-wide dd { color: #6f7891; font-size: 13px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.july-history-actions { grid-area: actions; display: flex !important; align-items: flex-end; justify-content: flex-end; align-self: end !important; margin-top: 6px !important; min-width: 110px; }
.mobile { display: none !important; }
.july-history-actions .july-btn, .july-history-actions .btn-primary, .july-history-actions .btn-disabled { min-width: 96px; min-height: 40px; padding: 0 18px; font-size: 13px; }
@media (max-width:991px) {
  .july-history-card { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; padding: 14px !important; }
  .july-history-thumb { width: 96px !important; flex: 0 0 96px !important; align-self: flex-start !important; }
  .july-history-body { flex: 1 1 calc(100% - 108px) !important; min-width: 0; display: flex !important; flex-wrap: wrap !important; align-items: flex-start; gap: 10px 0; }
  /* 상단 제목/뱃지 영역 */
  .july-history-top { width: 100% !important; display: flex !important; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 0 !important; flex-direction: row; }
  .july-history-title-wrap { min-width: 0; flex: 1 1 auto; }
  .july-history-title { font-size: 16px !important; line-height: 1.25; margin: 0 0 2px !important; }
  .july-history-meta { font-size: 12px !important; margin: 0 0 10px 0 !important }
  .july-history-status-wrap { position: absolute; right: 30px; }
  /* 키워드 */
  .july-history-keywords { width: 100% !important; margin: 4px 0 0 !important; gap: 6px !important; }
  .july-history-keywords span { min-height: 24px; padding: 0 10px; font-size: 11px; }
  /* 다운로드 버튼: 썸네일 오른쪽 영역 안에서 우측 정렬 */
  .july-history-actions { width: 100% !important; order: 3; display: flex !important; justify-content: flex-end !important; align-items: flex-start; margin: 4px 0 0 !important; }
  .july-history-actions .july-btn, .july-history-actions .btn-primary, .july-history-actions .btn-disabled { min-width: 92px; min-height: 36px; font-size: 12px; padding: 0 16px; }
  /* 하단 정보: 카드 전체 너비로 내려서 좌측 정렬 */
  .july-history-info--compact { width: 100% !important; order: 4; margin-top: 2px !important; }
  .july-history-info__row, .july-history-info__row.is-one-line { display: flex !important; flex-wrap: wrap; gap: 6px 12px !important; width: 100%; }
  .july-history-info__row dl, .july-history-info__row.is-one-line dl { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
  .july-history-info__row dt, .july-history-info__row dd, .july-history-info__row.is-one-line dt, .july-history-info__row.is-one-line dd { font-size: 12px !important; margin: 0 !important; }
  .mobile { display: block !important; }
  .pc { display: none !important; }
}
.july-history-filter .july-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
/* ===== 만료 썸네일 오버레이 ===== */
.july-history-thumb { position: relative; overflow: hidden; }
.july-history-thumb.is-expired img { filter: grayscale(0.15) brightness(0.82); }
.july-thumb-placeholder.is-expired { background: linear-gradient(135deg, #e9edf6 0%, #dce3f1 100%); color: #8c94a8; }
.july-history-thumb__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(15, 22, 48, 0.34); backdrop-filter: blur(2px); color: #fff; text-align: center; padding: 12px; pointer-events: none; }
.july-history-thumb__overlay-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 800; letter-spacing: -0.01em; }
.july-history-thumb__overlay small { display: block; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.july-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.july-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 10px; height: 10px; padding: 15px 10px; border-radius: 999px; color: #4e4e4e; text-decoration: none; font-weight: 900; font-size: 14px; }
.july-page-link.is-active { color: #fff; background: #8a7dff; border-color: transparent; font-weight: 900; }
.july-page-link.is-disabled { pointer-events: none; opacity: 0.4; }
/* =========================
   JULY SHORTS - RESULT
========================= */
.july-page--result .july-result-grid { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(360px, 4.5fr); gap: 24px; }
.july-result-side { display: grid; gap: 20px; }
.july-result-card { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: var(--july-shadow); border-radius: 28px; overflow: hidden; }
.july-result-card--video { padding: 28px; }
.july-result-video-wrap { display: flex; justify-content: center; align-items: center; min-height: 620px; border-radius: 24px; background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(138, 125, 255, 0.12), transparent 24%), linear-gradient(180deg, #eef3fb 0%, #e8edf7 100%); padding: 24px; }
.july-result-video { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: 24px; background: #000; box-shadow: 0 24px 60px rgba(15, 22, 48, 0.18); display: block; }
.july-result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.july-result-actions .july-btn { flex: 1 1 180px; }
.july-result-card--info, .july-result-card--meta { padding: 24px; }
.july-result-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.july-result-card__head strong { font-size: 18px; font-weight: 800; color: var(--july-navy); }
.july-result-card__head span { font-size: 12px; font-weight: 700; color: var(--july-text-soft); }
.july-result-info-list { display: grid; gap: 14px; }
.july-result-info-item { padding: 14px 16px; border-radius: 18px; background: rgba(248, 250, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.06); }
.july-result-info-item__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--july-text-soft); }
.july-result-info-item__value { display: block; font-size: 15px; line-height: 1.5; color: var(--july-navy); word-break: break-word; }
.july-result-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.july-result-keywords span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(103, 184, 255, 0.10); color: #3b5cc9; font-size: 12px; font-weight: 800; }
.july-result-notice { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.08) 0%, rgba(138, 125, 255, 0.08) 50%, rgba(239, 154, 215, 0.08) 100%); border: 1px solid rgba(138, 125, 255, 0.12); }
.july-result-notice p { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--july-navy); }
.july-result-notice p:last-child { margin-bottom: 0; }
.july-code-editor { border-radius: 20px; overflow: hidden; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
.july-code-editor__top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #111827; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.july-code-editor__title { margin-left: 6px; font-size: 12px; font-weight: 700; color: rgba(230, 238, 252, 0.72); }
.july-code-editor__top .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.july-code-editor__top .dot.is-red { background: #fb7185; }
.july-code-editor__top .dot.is-yellow { background: #fbbf24; }
.july-code-editor__top .dot.is-green { background: #34d399; }
.july-code-editor__body { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.july-code-editor__lines { padding: 16px 10px 16px 0; background: #0b1220; border-right: 1px solid rgba(255, 255, 255, 0.06); text-align: right; color: rgba(148, 163, 184, 0.7); font: 13px/2 'Consolas', 'Monaco', 'Courier New', monospace; }
.july-code-editor__lines span { display: block; }
.july-code-editor__code { margin: 0; padding: 16px 18px; color: #e5eefc; font: 13px/2 'Consolas', 'Monaco', 'Courier New', monospace; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.july-code-editor__code .key { color: #93c5fd; }
.july-code-editor__code .string { color: #c4b5fd; }
@media (max-width:1280px) {
  .july-page--result .july-result-grid { grid-template-columns: 1fr; }
  .july-result-video-wrap { min-height: auto; }
}
@media (max-width:640px) {

  .july-result-card--video, .july-result-card--info, .july-result-card--meta { padding: 20px; }
  .july-result-video-wrap { padding: 18px; border-radius: 20px; }
  .july-result-video { max-width: 300px; border-radius: 20px; }
  .july-result-actions { flex-direction: column; }
  .july-result-actions .july-btn { width: 100%; flex: none; }
}
/* =========================
   JULY SHORTS - RESULT DEMO TUNE
========================= */

.july-page--result .july-result-video-wrap { min-height: 620px; padding: 24px; align-items: center; justify-content: center; }
.july-page--result .july-demo-thumb-wrap { position: relative; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; min-height: 0; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(15, 22, 48, 0.18); }
.july-page--result .july-demo-thumb-image { display: block; width: 100%; height: 100%; object-fit: contain; background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.10), transparent 28%), radial-gradient(circle at top right, rgba(138, 125, 255, 0.10), transparent 24%), linear-gradient(180deg, #dfe6f2 0%, #cfd7e5 100%); }
.july-page--result .july-demo-thumb-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; text-decoration: none; color: #fff; background: linear-gradient(180deg, rgba(15, 22, 48, 0.16) 0%, rgba(15, 22, 48, 0.30) 45%, rgba(15, 22, 48, 0.42) 100%); backdrop-filter: blur(1.5px); }
.july-page--result .july-demo-thumb-play { width: 64px; height: 64px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 24px rgba(15, 22, 48, 0.18); position: relative; flex: 0 0 auto; }
.july-page--result .july-demo-thumb-play::before { content: ""; position: absolute; left: 26px; top: 20px; border-left: 16px solid #111827; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.july-page--result .july-demo-thumb-overlay strong { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.july-page--result .july-demo-thumb-overlay em { margin: 0; font-style: normal; font-size: 14px; line-height: 1.7; font-weight: 600; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); }
@media (max-width:640px) {
  .july-page--result .july-demo-thumb-wrap { max-width: 300px; border-radius: 20px; }
  .july-page--result .july-demo-thumb-play { width: 58px; height: 58px; }
  .july-page--result .july-demo-thumb-play::before { left: 24px; top: 18px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
  .july-page--result .july-demo-thumb-overlay strong { font-size: 18px; }
  .july-page--result .july-demo-thumb-overlay em { font-size: 13px; }
}
/* =========================
   JULY SHORTS - RESULT PHONE MOCKUP
========================= */

.july-page--result .july-result-video-wrap { display: flex; justify-content: center; align-items: center; min-height: 620px; border-radius: 24px; background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(138, 125, 255, 0.12), transparent 24%), linear-gradient(180deg, #eef3fb 0%, #e8edf7 100%); padding: 24px; }
.july-page--result .july-result-phone-mockup { width: 100%; max-width: 360px; padding: 16px; border-radius: 42px; background: linear-gradient(180deg, #161b33 0%, #0f1630 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 50px rgba(15, 22, 48, 0.24); }
.july-page--result .july-result-phone-mockup__notch { width: 42%; height: 22px; margin: 0 auto 12px; border-radius: 0 0 18px 18px; background: #0a0f22; }
.july-page--result .july-result-phone-mockup__screen { aspect-ratio: 9 / 18; border-radius: 30px; overflow: hidden; background: #050505; position: relative; display: flex; align-items: stretch; justify-content: stretch; }
.july-page--result .july-result-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; border-radius: 0; box-shadow: none; }
/* 비회원 썸네일도 목업 안에 꽉 차게 */
.july-page--result .july-demo-thumb-wrap { position: relative; width: 100%; height: 100%; min-height: 0; border-radius: 0; overflow: hidden; background: #000; box-shadow: none; }
.july-page--result .july-demo-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.10), transparent 28%), radial-gradient(circle at top right, rgba(138, 125, 255, 0.10), transparent 24%), linear-gradient(180deg, #dfe6f2 0%, #cfd7e5 100%); }
.july-page--result .july-demo-thumb-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; text-decoration: none; color: #fff; background: linear-gradient(180deg, rgba(15, 22, 48, 0.14) 0%, rgba(15, 22, 48, 0.30) 48%, rgba(15, 22, 48, 0.42) 100%); backdrop-filter: blur(1.5px); }
.july-page--result .july-demo-thumb-play { width: 64px; height: 64px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 24px rgba(15, 22, 48, 0.18); position: relative; flex: 0 0 auto; }
.july-page--result .july-demo-thumb-play::before { content: ""; position: absolute; left: 26px; top: 20px; border-left: 16px solid #111827; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.july-page--result .july-demo-thumb-overlay strong { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.july-page--result .july-demo-thumb-overlay em { margin: 0; font-style: normal; font-size: 14px; line-height: 1.7; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
@media (max-width:640px) {
  .july-page--result .july-result-phone-mockup { max-width: 300px; border-radius: 34px; padding: 14px; }
  .july-page--result .july-result-phone-mockup__screen { border-radius: 24px; }
  .july-page--result .july-demo-thumb-play { width: 58px; height: 58px; }
  .july-page--result .july-demo-thumb-play::before { left: 24px; top: 18px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
  .july-page--result .july-demo-thumb-overlay strong { font-size: 18px; }
  .july-page--result .july-demo-thumb-overlay em { font-size: 13px; }
}
/* =========================
   JULY KEYWORD INSIGHT
========================= */

.july-keyword-insight-card { margin-top: 14px; padding: 18px 18px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(246, 248, 253, 0.96) 0%, rgba(239, 243, 251, 0.96) 100%); border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 12px 28px rgba(22, 28, 45, 0.06); }
.july-keyword-insight-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.july-keyword-insight-card__head strong { font-size: 15px; font-weight: 800; color: #0f1630; }
.july-keyword-insight-card__badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.july-keyword-insight-card__badge.is-danger, .july-keyword-insight-card__badge.is-high { background: linear-gradient(90deg, rgba(103, 184, 255, 0.14) 0%, rgba(138, 125, 255, 0.16) 52%, rgba(239, 154, 215, 0.14) 100%); color: #4d4aca; }
.july-keyword-insight-card__badge.is-mid { background: rgba(20, 30, 60, 0.06); color: #5b647d; }
.july-keyword-insight-card__badge.is-low { background: rgba(103, 184, 255, 0.10); color: #3a63c7; }
.july-keyword-insight-card__score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.july-keyword-insight-card__score b { font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; color: #0f1630; }
.july-keyword-insight-card__score span { font-size: 14px; font-weight: 700; color: #7a839b; }
.july-keyword-insight-card__summary { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: #687089; }
.july-keyword-insight-card__block+.july-keyword-insight-card__block { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(20, 30, 60, 0.10); }
.july-keyword-insight-card__label { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #8a7dff; text-transform: uppercase; }
.july-keyword-insight-card__block p { margin: 0; font-size: 15px; line-height: 1.7; color: #5e6883; }
.july-keyword-insight-card__block p+p { margin-top: 4px; }
.generate-top-inline-fields { display: block; }
@media (min-width:1024px) {
  .generate-top-inline-fields { display: flex; gap: 20px; align-items: flex-start; }
  .generate-top-inline-fields>.field { flex: 1 1 0; margin-bottom: 0; }
}
/* =========================
   JULY SHORTS - DASHBOARD
========================= */

.july-page--dashboard, .myinfo-page { padding: 0; }
.myinfo-wrap { display: grid; gap: 24px; }
.myinfo-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.myinfo-head__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: var(--july-purple); text-transform: uppercase; }
.myinfo-head__title { margin: 0; font-size: 42px; line-height: 1.12; letter-spacing: -0.04em; color: var(--july-navy); font-weight: 900; }
.myinfo-head__desc { margin: 0; font-size: 15px; line-height: 1.75; color: var(--july-text-soft); }
.myinfo-section { display: grid; gap: 24px; }
.myinfo-grid { display: grid; gap: 24px; }
.myinfo-grid--top { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); align-items: start; }
.myinfo-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.myinfo-grid--bottom { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
.myinfo-card { position: relative; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: var(--july-shadow); border-radius: 28px; padding: 26px; overflow: hidden; }
.myinfo-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.16) 0%, rgba(138, 125, 255, 0.20) 52%, rgba(239, 154, 215, 0.16) 100%); pointer-events: none; }
.myinfo-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.myinfo-card__title { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: var(--july-navy); }
.myinfo-card__sub { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--july-text-soft); }
.myinfo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.08); background: rgba(255, 255, 255, 0.68); color: var(--july-navy); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .2s ease; }
.myinfo-btn:hover { transform: translateY(-1px); border-color: rgba(138, 125, 255, 0.18); background: linear-gradient(90deg, rgba(103, 184, 255, 0.10) 0%, rgba(138, 125, 255, 0.10) 50%, rgba(239, 154, 215, 0.10) 100%); }
.myinfo-btn--dark { background: linear-gradient(180deg, #161b33 0%, #0f1630 100%); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(15, 22, 48, 0.18); }
.myinfo-btn--dark:hover { background: linear-gradient(180deg, #1a2140 0%, #131a36 100%); }
.myinfo-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(20, 30, 60, 0.06); }
.myinfo-field:first-of-type { border-top: 0; padding-top: 0; }
.myinfo-field__label { font-size: 13px; font-weight: 800; color: #7a839c; line-height: 1.6; }
.myinfo-field__value { min-width: 0; font-size: 15px; line-height: 1.8; color: var(--july-navy); font-weight: 600; word-break: break-word; }
.myinfo-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.myinfo-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.12) 100%); color: #4d4aca; font-size: 12px; font-weight: 800; border: 1px solid rgba(138, 125, 255, 0.10); }
.myinfo-stat { text-align: left; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-start; }
.myinfo-stat__label { font-size: 13px; font-weight: 800; color: var(--july-text-soft); }
.myinfo-stat__value { margin-top: 12px; font-size: 34px; line-height: 1.08; letter-spacing: -0.04em; font-weight: 900; color: var(--july-navy); word-break: keep-all; }
.myinfo-stat__value .point { background: var(--july-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.myinfo-stat__sub { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--july-text-soft); }
.myinfo-table-wrap { overflow-x: auto; margin-top: 2px; }
.myinfo-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.myinfo-table thead th { padding: 14px 16px; background: rgba(248, 250, 255, 0.96); border-bottom: 1px solid rgba(20, 30, 60, 0.08); color: #7a839c; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-align: left; white-space: nowrap; }
.myinfo-table tbody td { padding: 16px; border-bottom: 1px solid rgba(20, 30, 60, 0.06); color: var(--july-navy); font-size: 14px; font-weight: 600; vertical-align: middle; }
.myinfo-table tbody tr:last-child td { border-bottom: 0; }
.myinfo-table tbody tr:hover td { background: rgba(248, 250, 255, 0.72); }
.myinfo-list { display: grid; gap: 14px; }
.myinfo-list-item { padding: 18px 18px; border-radius: 20px; background: rgba(248, 250, 255, 0.82); border: 1px solid rgba(20, 30, 60, 0.06); transition: all .2s ease; }
.myinfo-list-item:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(22, 28, 45, 0.06); }
.myinfo-list-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.myinfo-list-item__title { min-width: 0; font-size: 16px; line-height: 1.5; font-weight: 800; color: var(--july-navy); word-break: keep-all; }
.myinfo-list-item__badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.12) 100%); color: #4d4aca; font-size: 12px; font-weight: 900; white-space: nowrap; }
.myinfo-list-item__meta { font-size: 13px; line-height: 1.7; color: var(--july-text-soft); }
@media (max-width:1280px) {

  .myinfo-grid--top, .myinfo-grid--bottom { grid-template-columns: 1fr; }
  .myinfo-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:991px) {
  .myinfo-head__title { font-size: 32px; }
  .myinfo-card { padding: 22px; border-radius: 24px; }
  .myinfo-card__head { flex-direction: column; align-items: flex-start; }
  .myinfo-field { grid-template-columns: 1fr; gap: 6px; }
  .myinfo-grid--cards { grid-template-columns: 1fr; }
  .myinfo-stat { min-height: 0; }
  .myinfo-stat__value { font-size: 28px; }
}
@media (max-width:640px) {
  .myinfo-head__title { font-size: 28px; }
  .myinfo-card { padding: 20px; }
  .myinfo-card__title { font-size: 19px; }
  .myinfo-list-item__top { flex-direction: column; align-items: flex-start; }
  .myinfo-table { min-width: 480px; }
}
/* =========================
   JULY DASHBOARD MODAL
========================= */

body.is-july-modal-open { overflow: hidden; }
.july-modal[hidden] { display: none !important; }
.july-modal { position: fixed; inset: 0; z-index: 99999; }
.july-modal__overlay { position: absolute; inset: 0; background: rgba(15, 18, 35, 0.56); backdrop-filter: blur(6px); }
.july-modal__dialog { position: relative; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; margin: 24px auto; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 30px 80px rgba(15, 22, 48, 0.24); border-radius: 28px; padding: 28px; }
.july-modal__dialog--wide { width: min(820px, calc(100vw - 32px)); }
.july-modal__close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(20, 30, 60, 0.06); color: var(--july-navy); font-size: 24px; line-height: 1; cursor: pointer; }
.july-modal__head { margin-bottom: 22px; }
.july-modal__eyebrow { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--july-purple); text-transform: uppercase; }
.july-modal__head h3 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: -0.04em; color: var(--july-navy); }
.july-modal__head p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--july-text-soft); }
.july-modal-form .field { margin-bottom: 18px; }
.july-modal-form .field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--july-navy); }
.july-modal-form .field input[type="text"], .july-modal-form .field input[type="tel"], .july-modal-form .field select, .july-modal-form .field textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; color: var(--july-text); font-size: 15px; box-sizing: border-box; }
.july-modal-form .field input:focus, .july-modal-form .field select:focus, .july-modal-form .field textarea:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
.july-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.myinfo-inline-search { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.myinfo-select { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 14px; color: var(--july-text); font-size: 14px; box-sizing: border-box; }
.myinfo-select:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
@media (max-width:768px) {

  .july-modal__dialog, .july-modal__dialog--wide { width: calc(100vw - 20px); margin: 10px auto; max-height: calc(100vh - 20px); padding: 22px 18px; border-radius: 22px; }
  .myinfo-inline-search { grid-template-columns: 1fr; }
  .july-modal__actions { flex-direction: column; }
  .july-modal__actions .july-btn { width: 100%; }
}
/* dashboard edit modal = onboarding modal reuse */
.july-onboarding-overlay.is-edit-mode[hidden] { display: none !important; }
.july-onboarding-overlay.is-edit-mode { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 18, 35, 0.56); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.july-onboarding-overlay.is-edit-mode .july-onboarding-modal { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; margin: 0; }
.july-onboarding-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.july-tab-radio-group.is-readonly .july-tab-radio.is-locked { pointer-events: none; opacity: 1; }
.july-tab-radio-group.is-readonly .july-tab-radio.is-locked span { background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 50%, rgba(239, 154, 215, 0.12) 100%); border-color: rgba(138, 125, 255, 0.18); color: var(--july-navy); font-weight: 700; }
@media (max-width:768px) {
  .july-onboarding-overlay.is-edit-mode { padding: 10px; }
  .july-onboarding-actions { flex-direction: column; }
  .july-onboarding-actions .july-btn { width: 100%; }
}
/* dashboard edit keyword tags */
#dashboardKeywordBuilder .july-keyword-builder__tags { display: flex; flex-wrap: wrap; gap: 10px; }
#dashboardKeywordBuilder .july-keyword-tag { appearance: none; -webkit-appearance: none; border: 0 !important; outline: none !important; box-shadow: none !important; background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 50%, rgba(239, 154, 215, 0.12) 100%); color: #4d4aca; border-radius: 999px; min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
#dashboardKeywordBuilder .july-keyword-tag span { line-height: 1; }
#dashboardKeywordBuilder .july-keyword-tag em { font-style: normal; font-size: 16px; line-height: 1; color: #6a6f85; }
#dashboardKeywordBuilder .july-keyword-tag:hover { transform: translateY(-1px); }
#dashboardKeywordBuilder .july-keyword-builder__input-wrap { min-height: 42px; }
#dashboardKeywordBuilder input[type="text"] { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }
/* realtime duplicate feedback */
.july-field-feedback { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; font-weight: 600; min-height: 18px; color: #7d849a; }
.july-field-feedback.is-ok { color: #2d9b63; }
.july-field-feedback.is-error { color: #d64b63; }
.july-field-feedback.is-loading { color: #7d849a; }
.myinfo-inline-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 14px; color: var(--july-text); font-size: 14px; box-sizing: border-box; }
.myinfo-inline-input:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
.myinfo-diagnosis-block { margin-top: 12px; padding: 16px 18px; border-radius: 20px; background: rgba(248, 250, 255, 0.88); border: 1px solid rgba(20, 30, 60, 0.06); }
.myinfo-diagnosis-block--place { margin-top: 14px; }
.myinfo-diagnosis-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.myinfo-diagnosis-block__head strong { font-size: 16px; font-weight: 800; color: var(--july-navy); line-height: 1.4; }
.myinfo-diagnosis-block__meta { font-size: 13px; line-height: 1.75; color: var(--july-text-soft); }
.myinfo-status-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--july-grad); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px rgba(125, 120, 255, 0.18); }
.myinfo-status-chip.is-soft { background: linear-gradient(90deg, rgba(103, 184, 255, 0.14) 0%, rgba(138, 125, 255, 0.14) 50%, rgba(239, 154, 215, 0.14) 100%); color: #4d4aca; box-shadow: none; border: 1px solid rgba(138, 125, 255, 0.12); }
.myinfo-rank-list { display: grid; gap: 8px; margin-top: 12px; }
.myinfo-rank-list__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(20, 30, 60, 0.05); }
.myinfo-rank-list__rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.14) 0%, rgba(138, 125, 255, 0.14) 50%, rgba(239, 154, 215, 0.14) 100%); color: var(--july-navy); font-size: 12px; font-weight: 900; }
.myinfo-rank-list__title { min-width: 0; font-size: 13px; font-weight: 700; color: var(--july-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myinfo-card--wide { grid-column: 1 / -1; }
.myinfo-diagnosis-layout { display: grid; gap: 14px; }
.myinfo-guide-box { margin-top: 14px; padding: 18px 18px; border-radius: 20px; background: rgba(248, 250, 255, 0.82); border: 1px solid rgba(20, 30, 60, 0.06); }
.myinfo-guide-box__label { font-size: 13px; font-weight: 800; color: var(--july-purple); margin-bottom: 10px; }
.myinfo-guide-box__title { font-size: 24px; line-height: 1.12; font-weight: 600; letter-spacing: -0.04em; color: var(--july-navy); margin-bottom: 12px; }
.myinfo-guide-box__desc { font-size: 14px; line-height: 1.8; color: var(--july-text-soft); }
@media (max-width:991px) {
  .myinfo-guide-box__title { font-size: 24px; }
}
.myinfo-left-stack { display: grid; gap: 24px; align-content: start; }
.myinfo-history-card .myinfo-table { min-width: 100%; }
.myinfo-history-card .myinfo-table-wrap { overflow-x: auto; }
.myinfo-market-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.myinfo-market-metric { padding: 14px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(20, 30, 60, 0.05); }
.myinfo-market-metric__label { display: block; font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--july-text-soft); margin-bottom: 6px; }
.myinfo-market-metric__value { display: block; font-size: 20px; line-height: 1.2; font-weight: 900; letter-spacing: -0.03em; color: var(--july-navy); }
@media (max-width:768px) {
  .myinfo-market-metrics { grid-template-columns: 1fr; }
}
.myinfo-keyword-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.myinfo-keyword-tab { border: 0; background: #f3f4f6; color: #777; border-radius: 999px; padding: 10px 14px; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: all .2s ease; }
.myinfo-keyword-tab.is-active { background: #f3edff; color: #5b4ff5; }
.myinfo-keyword-tab:hover { background: #ece8ff; color: #5b4ff5; }
.july-nav a.is-active { pointer-events: none; cursor: default; }
.july-page--customers .customers-wrap { display: flex; flex-direction: column; gap: 24px; }
.customers-grid { display: flex; align-items: flex-start; gap: 20px; }
.customers-main { flex: 0 0 calc(65% - 10px); width: calc(65% - 10px); min-width: 0; }
.customers-side { flex: 0 0 calc(35% - 10px); width: calc(35% - 10px); min-width: 320px; display: flex; flex-direction: column; gap: 18px; }
.customers-main, .customers-side { align-self: start; }
.customers-card { padding: 24px; }
.customers-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.customers-card__title { font-size: 22px; font-weight: 800; color: #111827; }
.customers-card__sub { margin-top: 6px; font-size: 14px; color: #7a8499; }
.customers-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.customers-input, .customers-select, .customers-textarea { width: 100%; border: 1px solid #dde3ee; border-radius: 14px; background: #fff; padding: 13px 14px; font-size: 14px; color: #111827; outline: none; }
.customers-input:focus, .customers-select:focus, .customers-textarea:focus { border-color: #7c6cf6; box-shadow: 0 0 0 4px rgba(124, 108, 246, 0.10); }
.customers-filter .customers-input { flex: 1 1 240px; }
.customers-filter .customers-select { width: 160px; }
.customers-table-wrap { overflow-x: auto; }
.customers-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.customers-table th, .customers-table td { border-bottom: 1px solid #edf0f6; padding: 15px 12px; text-align: left; font-size: 14px; vertical-align: middle; }
.customers-table th { color: #7a8499; font-weight: 700; background: #fafbfe; }
.customers-link { color: #111827; font-weight: 700; }
.customers-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 32px; padding: 0 10px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: 13px; font-weight: 700; }
.customers-badge.is-danger { background: #fee2e2; color: #dc2626; }
.customers-risk-text { font-size: 13px; font-weight: 700; color: #b45309; }
.customers-risk-text.is-safe { color: #059669; }
.customers-empty { text-align: center !important; color: #7a8499; padding: 40px 16px !important; }
.customers-form { display: flex; flex-direction: column; gap: 14px; }
.customers-form__field { display: flex; flex-direction: column; gap: 8px; }
.customers-form__field label { font-size: 14px; font-weight: 700; color: #374151; }
.customers-check { display: inline-flex; align-items: center; gap: 8px; }
.customers-submit { width: 100%; margin-top: 4px; }
.customers-form-help { margin: -4px 0 14px; font-size: 13px; line-height: 1.6; color: #6b7280; word-break: keep-all; }
.customers-reset-link { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1; font-size: 13px; font-weight: 700; color: #7c6cf6; text-decoration: none; }
.customers-detail { display: flex; flex-direction: column; gap: 18px; }
.customers-detail__top { display: flex; flex-direction: row; gap: 16px; align-items: center; justify-content: flex-start; }
.customers-detail__name { font-size: 24px; font-weight: 800; color: #111827; }
.customers-detail__phone { font-size: 15px; color: #6b7280; }
.customers-detail__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.customers-detail-stat { padding: 8px 14px 5px; border-radius: 16px; background: #f8faff; border: 1px solid #edf0f6; }
.customers-detail-stat span { display: block; font-size: 12px; color: #7a8499; margin-bottom: 3px; }
.customers-detail-stat strong { font-size: 16px; font-weight: 800; color: #111827; }
.customers-detail__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.customers-detail__meta>div { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #edf0f6; }
.customers-detail__meta span { display: block; font-size: 12px; color: #7a8499; margin-bottom: 0px; }
.customers-detail__meta strong { font-size: 14px; color: #111827; }
.customers-detail__label { font-size: 14px; font-weight: 700; color: #374151; margin-bottom: 8px; }
.customers-detail__memo-box { min-height: 90px; padding: 14px; border-radius: 16px; background: #f9fafb; border: 1px solid #edf0f6; font-size: 14px; color: #374151; line-height: 1.6; }
.customers-card--timeline { margin-top: 20px; }
.customers-timeline { position: relative; display: flex; flex-direction: column; gap: 18px; }
.customers-timeline-item { position: relative; display: flex; gap: 16px; }
.customers-timeline-item__line { position: absolute; top: 28px; left: 9px; width: 2px; height: calc(100% + 18px); background: #e5e7eb; }
.customers-timeline-item:last-child .customers-timeline-item__line { display: none; }
.customers-timeline-item__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 999px; background: #cbd5e1; margin-top: 6px; flex: 0 0 20px; }
.customers-timeline-item__dot.is-reserved { background: #6366f1; }
.customers-timeline-item__dot.is-completed { background: #10b981; }
.customers-timeline-item__dot.is-cancelled { background: #94a3b8; }
.customers-timeline-item__dot.is-noshow { background: #ef4444; }
.customers-timeline-item__content { flex: 1; padding: 16px 18px; border-radius: 18px; border: 1px solid #edf0f6; background: #fff; }
.customers-timeline-item__top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.customers-timeline-item__top strong { font-size: 15px; font-weight: 800; color: #111827; }
.customers-timeline-item__title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.customers-status-badge { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.customers-status-badge.is-reserved { background: #eef2ff; color: #4f46e5; }
.customers-status-badge.is-completed { background: #dcfce7; color: #166534; }
.customers-status-badge.is-cancelled { background: #e5e7eb; color: #475569; }
.customers-status-badge.is-noshow { background: #fee2e2; color: #b91c1c; }
.customers-timeline-item__dates { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: #6b7280; }
.customers-timeline-item__memo { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; color: #374151; font-size: 14px; line-height: 1.6; }
.customers-empty--timeline { text-align: center; padding: 40px 16px; }
.customers-timeline-item__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.customers-mini-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer; transition: all .2s ease; text-decoration: none; white-space: nowrap; }
.customers-mini-btn.is-completed { background: #dcfce7; color: #166534; }
.customers-mini-btn.is-noshow { background: #fee2e2; color: #b91c1c; }
.customers-mini-btn.is-cancelled { background: #e5e7eb; color: #475569; }
.customers-mini-btn.is-delete { background: #111827; color: #fff; }
.customers-mini-btn.is-edit { background: #eef2ff; color: #4f46e5; }
.customers-inline-form { display: inline-flex; align-items: center; margin: 0; flex-shrink: 0; }
.customers-danger-link { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; margin: 0; font-size: 13px; font-weight: 700; color: #dc2626; cursor: pointer; line-height: 1; white-space: nowrap; vertical-align: middle; }
.customers-danger-link:hover { color: #b91c1c; }
.customers-detail-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap; white-space: nowrap; }

.customers-summary-card, .customers-card { background: #fff; border: 1px solid #edf0f6; border-radius: 24px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05); }
.customers-summary-card { min-width: 0; padding: 20px 18px; }
.customers-summary-card__label { font-size: 12px; color: #7a8499; margin-bottom: 8px; line-height: 1.4; word-break: keep-all; }
.customers-summary-card__value { font-size: 26px; font-weight: 800; color: #111827; line-height: 1.15; letter-spacing: -0.03em; word-break: keep-all; overflow-wrap: anywhere; }
.customers-summary-card.is-total-sales .customers-summary-card__value { color: #7c3aed; }
.customers-summary-card.is-noshow .customers-summary-card__value { color: #b91c1c; }
/* 카드가 너무 넓어지지 않게 내부 폭 제한 느낌 */
@media (min-width:1025px) {
  .customers-summary-card { min-height: 96px; }
}
/* 태블릿 */
@media (max-width:1024px) {
  .customers-summary-card { padding: 18px 16px; }
  .customers-summary-card__value { font-size: 22px; }
}
/* 모바일: 지금처럼 3 / 2 / 2 */
@media (max-width:767px) {
  .customers-summary-card__label { font-size: 11px; margin-bottom: 6px; line-height: 1.35; }
  .customers-summary-card__value { font-size: 17px; line-height: 1.1; }
}

@media (max-width:1024px) {
  .customers-grid { display: block; }
  .customers-main, .customers-side { width: auto; min-width: 0; }
  .customers-side { margin-top: 18px; }
}
@media (max-width:767px) {
  .customers-card__title { font-size: 18px; }
  .customers-detail__stats, .customers-detail__meta { grid-template-columns: 1fr; }
  .customers-timeline-item__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .customers-timeline-item__dates { flex-direction: column; gap: 4px; }
  .customers-grid { display: block; }
  .customers-side { width: auto; min-width: 0; margin-top: 18px; }
  .customers-main { order: 1; }
  .customers-card__head { gap: 10px; }
  .customers-detail-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap; white-space: nowrap; }
  .customers-reset-link, .customers-danger-link { font-size: 13px; }
  .customers-timeline-item__content { padding: 14px; }
  .customers-timeline-item__actions { justify-content: flex-start; width: 100%; }
  .customers-mini-btn { height: 28px; padding: 0 9px; font-size: 11px; }
}
.july-plan-box { display: flex; flex-direction: column; gap: 10px; }
.july-plan-box__plan { margin: 0; font-size: 15px !important; font-weight: 800; color: #fff; }
.july-plan-box__period { margin: 0; font-size: 13px !important; line-height: 1.5; color: rgba(255, 255, 255, 0.72)}
.july-side-btn--subtle { margin-top: 2px; background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.12); }
.july-history-agency { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(138, 125, 255, 0.10); color: #7a63ff; font-size: 12px; font-weight: 800; margin: 4px 0 8px; }
.dashboard-agency-badge { display: inline-flex; align-items: center; margin-top: 6px; padding: 0 10px; min-height: 24px; border-radius: 999px; background: rgba(138, 125, 255, 0.10); color: #7a63ff; font-size: 12px; font-weight: 800; }
/* =========================
   JULY GENERATE TOP INSIGHT
========================= */
.july-page--generate .generate-top-grid { display: grid; grid-template-columns: minmax(320px, 3fr) minmax(480px, 7fr); gap: 24px; margin-bottom: 26px; align-items: stretch; }
.july-page--generate .generate-top-grid__left, .july-page--generate .generate-top-grid__right { min-width: 0; }
.july-page--generate .generate-top-grid .usage-status-box { height: 100%; margin: 0 !important; }
.july-datalab-card { height: 100%; min-height: 156px; padding: 22px 24px; border-radius: 28px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.july-datalab-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, rgba(103, 184, 255, 0.10), transparent 22%), radial-gradient(circle at 85% 18%, rgba(138, 125, 255, 0.10), transparent 22%), radial-gradient(circle at 60% 100%, rgba(239, 154, 215, 0.08), transparent 24%); pointer-events: none; }
.july-datalab-card>* { position: relative; z-index: 1; }
.july-datalab-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 12px; }
.july-datalab-card__eyebrow { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #8a7dff; text-transform: uppercase; }
.july-datalab-card__title { display: block; font-size: 26px; line-height: 1.2; font-weight: 600; color: #0f1630; letter-spacing: -0.04em; }
.july-datalab-card__badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #4d4aca; background: linear-gradient(90deg, rgba(103, 184, 255, 0.14) 0%, rgba(138, 125, 255, 0.16) 52%, rgba(239, 154, 215, 0.14) 100%); white-space: nowrap; }
.july-datalab-card__summary { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: #687089; }
.july-datalab-card__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.july-datalab-stat { min-width: 0; padding: 14px 14px 12px; border-radius: 18px; background: rgba(248, 250, 255, 0.86); border: 1px solid rgba(20, 30, 60, 0.06); }
.july-datalab-stat__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #7b8298; }
.july-datalab-stat__value { display: block; font-size: 22px; line-height: 1.1; font-weight: 900; letter-spacing: -0.03em; color: #0f1630; word-break: keep-all; }
.july-datalab-card__bottom { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.july-datalab-card__recommend, .july-datalab-card__upgrade { margin: 0; padding: 14px 16px; border-radius: 18px; font-size: 13px; line-height: 1.7; }
.july-datalab-card__recommend { background: rgba(248, 250, 255, 0.88); color: #495168; border: 1px solid rgba(20, 30, 60, 0.06); }
.july-datalab-card__upgrade { background: linear-gradient(90deg, rgba(103, 184, 255, 0.10) 0%, rgba(138, 125, 255, 0.10) 52%, rgba(239, 154, 215, 0.10) 100%); color: #363f5b; border: 1px solid rgba(138, 125, 255, 0.10); font-weight: 700; }
@media (max-width:1280px) {
  .july-page--generate .generate-top-grid { grid-template-columns: 1fr; }
  .july-datalab-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:768px) {
  .july-datalab-card { padding: 20px; border-radius: 24px; }
  .july-datalab-card__title { font-size: 22px; }
  .july-datalab-card__head { flex-direction: column; align-items: flex-start; }
  .july-datalab-card__stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .july-datalab-stat__value { font-size: 19px; }
  .july-datalab-card__bottom { grid-template-columns: 1fr; }
}
.july-page--pricing .july-pricing-wrap { display: flex; flex-direction: column; gap: 24px; }
.july-page--pricing .july-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.july-page--pricing .july-pricing-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; padding: 26px 24px 24px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.july-page--pricing .july-pricing-card.is-recommended { border-color: #4d4aca; box-shadow: 0 18px 36px rgba(17, 24, 39, 0.12); }
.july-page--pricing .july-pricing-card__badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #f3f4f6; color: #111827; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; width: fit-content; margin-bottom: 14px; }
.july-page--pricing .july-pricing-card.is-recommended .july-pricing-card__badge { background: #111827; color: #fff; }
.july-page--pricing .july-pricing-card__title { margin: 0 0 8px; font-size: 28px; font-weight: 800; color: #111827; }
.july-page--pricing .july-pricing-card__desc { margin: 0 0 20px; color: #6b7280; line-height: 1.6; min-height: 48px; white-space: pre-wrap;}
.july-page--pricing .july-pricing-compare { display: grid; gap: 12px; margin-bottom: 18px; }
.july-page--pricing .july-pricing-price-box { border: 1px solid #e5e7eb; border-radius: 18px; padding: 16px 16px 14px; background: #fafafa; }
.july-page--pricing .july-pricing-price-box.is-year { background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.12) 100%); border-color: #f7f7f7; position: relative; }
.july-page--pricing .july-pricing-price-box__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.july-page--pricing .july-pricing-price-box__label { font-size: 13px; font-weight: 800; color: #374151; }
.july-page--pricing .july-pricing-price-box__chip { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.july-page--pricing .july-pricing-price-box__main { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.july-page--pricing .july-pricing-price-box__main strong { font-size: 30px; line-height: 1; color: #111827; font-weight: 900; }
.july-page--pricing .july-pricing-price-box__main span { color: #6b7280; font-size: 20px; font-weight: 700; }
.july-page--pricing .july-pricing-price-box__sub { color: #4b5563; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.july-page--pricing .july-pricing-price-box__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; color: #6b7280; font-size: 13px; line-height: 1.5; }
.july-page--pricing .july-pricing-price-box__meta strong { color: #4d4aca; font-weight: 800; }
.july-page--pricing .july-pricing-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #374151; font-size: 14px; line-height: 1.55; }
.july-page--pricing .july-pricing-features li { position: relative; padding-left: 16px; }
.july-page--pricing .july-pricing-features li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: #4d4aca; }
.july-page--pricing .july-pricing-actions { display: grid; gap: 10px; margin-top: 22px; }
.july-page--pricing .july-pricing-note { margin-top: 14px; color: #6b7280; font-size: 12px; line-height: 1.6; }
.july-page--pricing .july-pricing-topbox { background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; padding: 24px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); }
.july-page--pricing .july-pricing-topbox__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.july-page--pricing .july-pricing-topbox__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.july-page--pricing .july-pricing-topbox__row:last-child { border-bottom: 0; }
.july-page--pricing .july-pricing-topbox__label { color: #6b7280; font-weight: 700; }
.july-page--pricing .july-pricing-topbox__value { color: #111827; font-weight: 800; text-align: right; }
.july-page--pricing .july-pricing-topbox__actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.july-page--pricing .july-pricing-guestbox { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e5e7eb; border-radius: 24px; padding: 24px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); }
.july-page--pricing .july-pricing-guestbox__title { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #111827; }
.july-page--pricing .july-pricing-guestbox__desc { margin: 0; color: #6b7280; line-height: 1.7; }
.july-page--pricing .july-pricing-guestbox__actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.july-page--pricing .july-btn[disabled], .july-page--pricing button[disabled] { opacity: 0.55; cursor: not-allowed; }
@media (max-width:1100px) {
  .july-page--pricing .july-pricing-grid { grid-template-columns: 1fr; }
  .july-page--pricing .july-pricing-topbox__grid { grid-template-columns: 1fr; }
}
.july-page--pricing .july-pricing-retention-box { margin-top: 18px; margin-bottom: 2px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.12) 100%); border: 1px solid #f7f7f7; }
.july-page--pricing .july-pricing-retention-box__title { font-size: 16px; font-weight: 800; color: #4d4aca; margin-bottom: 8px; }
.july-page--pricing .july-pricing-retention-box__desc { color: #4d4aca; font-size: 14px; line-height: 1.7; }
.july-pricing-actions form { width: 100%; }
.july-pricing-actions form .july-btn { width: 100%; }
.july-page--pricing .july-pricing-price__time { font-size: 20px; }
.form-note-txt { font-size: 12px; color: #5b647d; }
.july-history-thumb__link { display: block; width: 100%; height: 100%; }
.july-history-thumb__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.july-history-thumb__link.is-disabled { pointer-events: none; cursor: default; }
.july-history-thumb__link:not(.is-disabled):hover img { transform: scale(1.02); transition: transform 0.2s ease; }
.july-biz-info { list-style: none; padding: 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); margin-bottom: 14px; }
.july-biz-info li, .july-biz-info li a { font-size: 10px; color: #fff; }
.july-biz-info li a:hover { color: #687089; }
.july-guide-modal { position: fixed; inset: 0; z-index: 100005; }
.july-guide-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(3px); }
.july-guide-modal__dialog { position: relative; width: calc(100% - 32px); max-width: 760px; margin: 0 auto; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
.july-guide-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: #f3f4f6; border-radius: 50%; font-size: 22px; line-height: 1; color: #374151; cursor: pointer; }
.july-guide-modal__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: #6b7280; letter-spacing: .08em; }
.july-guide-modal__head strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 800; color: #111827; line-height: 1.3; }
.july-guide-modal__body { margin-top: 20px; max-height: 70vh; overflow-y: auto; color: #374151; font-size: 15px; line-height: 1.8; }
body.is-july-guide-open { overflow: hidden; }
.july-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.july-page-head__guide { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #dbe3f0; background: #fff; color: #4f46e5; font-size: 14px; font-weight: 700; cursor: pointer; }
.july-page-head__guide:hover { background: #f8fafc; }
@media (max-width:767px) {
  .july-guide-modal__dialog { width: calc(100% - 20px); padding: 20px 16px; border-radius: 20px; }
  .july-guide-modal__head strong { font-size: 24px; }
}
@media (max-width:767px) {
  .july-page-head { position: relative; display: block; padding-right: 92px; }
  .july-page-head__guide { position: absolute; top: 2px; right: 0; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fff; border: 1px solid #d9e1ee; color: #4f46e5; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); white-space: nowrap; }
}
/* =========================
   JULY INQUIRY
========================= */

.july-page--inquiry { padding: 0; }
.july-inquiry-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; align-items: start; }
.july-inquiry-card { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); border-radius: 28px; padding: 24px; }
.july-inquiry-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.july-inquiry-card__title { font-size: 24px; line-height: 1.25; letter-spacing: -0.03em; font-weight: 900; color: #0f1630; }
.july-inquiry-card__sub { margin-top: 6px; font-size: 14px; line-height: 1.7; color: #687089; }
.july-inquiry-grid { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.july-page--inquiry .field { margin-bottom: 16px; }
.july-page--inquiry .field:last-child { margin-bottom: 0; }
.july-page--inquiry .field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: #0f1630; }
.july-page--inquiry .field input[type="text"], .july-page--inquiry .field input[type="file"], .july-page--inquiry .field select, .july-page--inquiry .field textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); border-radius: 16px; color: #12182a; font-size: 15px; transition: all .2s ease; box-sizing: border-box; }
.july-page--inquiry .field textarea { min-height: 180px; padding: 16px; resize: vertical; }
.july-page--inquiry .field input:focus, .july-page--inquiry .field select:focus, .july-page--inquiry .field textarea:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); background: #fff; }
.july-page--inquiry .field-help { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: #7b8298; }
.july-inline-notice { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.10) 0%, rgba(138, 125, 255, 0.10) 52%, rgba(239, 154, 215, 0.10) 100%); border: 1px solid rgba(138, 125, 255, 0.12); color: #4d4aca; font-size: 13px; line-height: 1.7; font-weight: 700; }
.july-inquiry-actions { margin-top: 18px; text-align: end;}
.july-inquiry-actions .july-btn { min-width: 160px; min-height: 50px; padding: 0 20px; font-size: 14px; font-weight: 800; }
.july-inquiry-list { display: grid; gap: 14px; }
.july-inquiry-item { width: 100%; text-align: left; border: 1px solid rgba(20, 30, 60, 0.07); background: rgba(248, 250, 255, 0.84); border-radius: 22px; padding: 18px 18px 16px; cursor: pointer; transition: all .18s ease; box-sizing: border-box; }
.july-inquiry-item:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 14px 30px rgba(22, 28, 45, 0.08); border-color: rgba(138, 125, 255, 0.14); }
.july-inquiry-item__badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; margin-bottom: 12px; }
.july-inquiry-item__badge.is-pending { background: rgba(20, 30, 60, 0.06); color: #6f7891; }
.july-inquiry-item__badge.is-answered { background: linear-gradient(90deg, rgba(103, 184, 255, 0.12) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.12) 100%); color: #4d4aca; }
.july-inquiry-item strong { display: block; margin: 0 0 8px; font-size: 18px; line-height: 1.4; letter-spacing: -0.02em; font-weight: 800; color: #0f1630; }
.july-inquiry-item p { margin: 0; color: #687089; font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.july-inquiry-item__meta { display: block; margin-top: 12px; color: #8a92a8; font-size: 12px; font-weight: 700; }
/* 상세 모달 내용 */
.july-inquiry-detail__meta { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.july-inquiry-detail h4 { margin: 0 0 12px; font-size: 22px; line-height: 1.35; letter-spacing: -0.03em; color: #0f1630; font-weight: 900; }
.july-inquiry-detail__content { color: #4b556b; font-size: 15px; line-height: 1.85; word-break: keep-all; }
.july-inquiry-detail__file { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: rgba(248, 250, 255, 0.96); border: 1px solid rgba(20, 30, 60, 0.08); color: #687089; font-size: 14px; }
.july-inquiry-detail__file a { color: #4d4aca; font-weight: 700; text-decoration: none; }
.july-inquiry-reply { margin-top: 22px; padding: 18px; border-radius: 20px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.10) 0%, rgba(138, 125, 255, 0.10) 52%, rgba(239, 154, 215, 0.10) 100%); border: 1px solid rgba(138, 125, 255, 0.12); }
.july-inquiry-reply strong { display: block; margin-bottom: 10px; font-size: 14px; color: #4d4aca; font-weight: 900; }
.july-inquiry-reply div { color: #374151; font-size: 14px; line-height: 1.8; word-break: keep-all; }
/* 모바일 */
@media (max-width:1280px) {
  .july-inquiry-wrap { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
  .july-inquiry-card { padding: 20px 16px; border-radius: 22px; }
  .july-inquiry-card__title { font-size: 20px; }
  .july-inquiry-card__sub { font-size: 13px; }
  .july-inquiry-grid { grid-template-columns: 1fr; gap: 14px; }
  .july-inquiry-actions .july-btn { width: 100%; }
  .july-inquiry-item { padding: 16px 14px 14px; border-radius: 18px; }
  .july-inquiry-item strong { font-size: 16px; }
  .july-inquiry-item p { font-size: 13px; }
  .july-inquiry-detail h4 { font-size: 18px; }
  .july-inquiry-detail__content, .july-inquiry-reply div { font-size: 14px; line-height: 1.8; }
}
.customers-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.customers-pagination a, .customers-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; color: #111827; text-decoration: none; font-size: 13px; font-weight: 700; }
.customers-pagination a:hover { border-color: #111827; }
.customers-pagination .is-active { color: #fff; background: #8a7dff; font-weight: 900; }
.customers-pagination .is-disabled { color: #aaaaaa; }
.july-ajax-modal { position: fixed; inset: 0; z-index: 99999; }
.july-ajax-modal__dim { position: absolute; inset: 0; background: rgba(10, 16, 35, 0.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.july-ajax-modal__dialog { position: relative; width: min(92vw, 760px); max-height: 86vh; overflow-y: auto; margin: 5vh auto 0; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 30px 80px rgba(15, 22, 48, 0.22); border-radius: 28px; padding: 28px; }
.july-ajax-modal__close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(20, 30, 60, 0.06); color: #0f1630; font-size: 22px; cursor: pointer; }
.july-ajax-modal__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: #8a7dff; }
.july-ajax-modal__head h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; color: #0f1630; font-weight: 900; }
.july-ajax-modal__desc { margin: 0 0 22px; color: #687089; font-size: 14px; line-height: 1.7; }
.july-form-row { margin-bottom: 18px; }
.july-form-label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: #0f1630; }
.july-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.july-radio-box { position: relative; display: inline-flex; align-items: center; }
.july-radio-box input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.july-radio-box span { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); color: #4b556b; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.july-radio-box input[type="radio"]:checked + span { color: #fff; border-color: transparent; background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); box-shadow: 0 10px 24px rgba(125, 120, 255, 0.18); }
.july-form-actions { margin-top: 12px; }
.july-copy-result { margin-top: 24px; }
.july-copy-loading { padding: 18px; border-radius: 16px; background: rgba(248, 250, 255, 0.96); color: #687089; font-size: 14px; }
.july-copy-block { margin-bottom: 16px; padding: 18px; border-radius: 18px; background: rgba(248, 250, 255, 0.96); border: 1px solid rgba(20, 30, 60, 0.08); }
.july-copy-block:last-child { margin-bottom: 0; }
.july-copy-block__title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #0f1630; }
.july-copy-box { margin-bottom: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(20, 30, 60, 0.08); }
.july-copy-box:last-child { margin-bottom: 0; }
.july-copy-box__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #8a92a8; }
.july-copy-box__text { margin: 0 0 12px; font-size: 14px; line-height: 1.8; color: #131a2b; white-space: pre-wrap; word-break: keep-all; }
.july-copy-box__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.july-copy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: #000; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.july-result-video-wrap { position: relative; }
.july-result-ai-btn { position: absolute; top: 42px; right: 19%; z-index: 20; width: 80px; height: 80px; padding: 0 16px; border-radius: 50%; white-space: nowrap; box-shadow: 0 12px 28px rgba(15, 22, 48, 0.18); line-height: 18px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
/* 모바일에서 너무 붙지 않게 */
@media (max-width:768px) {
  .july-result-ai-btn { top: 50px; right: 16px; min-height: 38px; padding: 0 14px; font-size: 13px; width: 70px; height: 70px; }
}
.july-input, .july-select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(20, 30, 60, 0.10); background: #fff; color: #0f1630; font-size: 14px; box-sizing: border-box; }
.july-input:focus, .july-select:focus { outline: none; border-color: rgba(138, 125, 255, 0.55); box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.10); }
.july-keyword-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.july-agency-fields { margin-top: 18px; padding: 18px; border-radius: 18px; background: rgba(248, 250, 255, 0.96); border: 1px solid rgba(20, 30, 60, 0.08); }
@media (max-width:768px) {
  .july-keyword-grid { grid-template-columns: 1fr; }
}
.july-copy-box__text { text-align: left; white-space: pre-wrap; word-break: keep-all; line-height: 1.9; }
.july-copy-box__actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.july-input-with-prefix { position: relative; }
.july-input-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: #8a7dff; pointer-events: none; z-index: 2; }
.july-input--with-prefix { padding-left: 34px; }
.july-ajax-modal { position: fixed; inset: 0; z-index: 100003; }
.july-ajax-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(2px); }
.july-ajax-modal__dialog { position: relative; width: calc(100% - 32px); max-width: 400px; margin: 0 auto; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 22px; padding: 30px 24px 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); text-align: center; }
.july-ajax-modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; background: #f3f4f6; border-radius: 50%; font-size: 20px; line-height: 1; color: #374151; cursor: pointer; }
.july-ajax-modal__head strong { display: block; font-size: 20px; font-weight: 800; color: #111827; line-height: 1.4; word-break: keep-all; padding: 10px 20px 0; }
.july-ajax-modal__body { margin-top: 10px; padding: 0 10px; }
.july-ajax-modal__body p { margin: 0; font-size: 14px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
.july-ajax-modal__actions { margin-top: 20px; }
.july-ajax-modal__actions .july-btn { min-width: 96px; height: 44px; padding: 0 20px; font-size: 15px; border-radius: 999px; }
body.is-july-modal-open { overflow: hidden; }
.july-ajax-modal__actions .july-btn--primary { background: linear-gradient(135deg, #6bb6ff 0%, #c989e8 100%); border: 0; box-shadow: none; }
.july-confirm-modal { position: fixed; inset: 0; z-index: 100100; }
.july-confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(2px); }
.july-confirm-modal__dialog { position: relative; width: calc(100% - 32px); max-width: 400px; margin: 0 auto; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 22px; padding: 30px 24px 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); text-align: center; z-index: 100101; }
.july-confirm-modal__head strong { display: block; font-size: 20px; font-weight: 800; color: #111827; line-height: 1.4; word-break: keep-all; padding: 10px 20px 0; }
.july-confirm-modal__body { margin-top: 10px; padding: 0 10px; }
.july-confirm-modal__body p { margin: 0; font-size: 14px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
.july-confirm-modal__actions { margin-top: 20px; display: flex; justify-content: center; gap: 10px; }
.july-confirm-modal__actions .july-btn { min-width: 96px; height: 44px; padding: 0 20px; font-size: 15px; border-radius: 999px; }
body.is-july-confirm-open { overflow: hidden; }
.july-auth-modal { position: fixed; inset: 0; z-index: 100001;}
.july-auth-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(3px); }
.july-auth-modal__dialog {position: relative; width: calc(100% - 32px); max-width: 480px; margin: 0 auto; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
.july-auth-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: #f3f4f6; border-radius: 50%; font-size: 22px; line-height: 1; color: #374151; cursor: pointer; }
.july-auth-modal__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: #6b7280; letter-spacing: 0.08em; }
.july-auth-modal__head strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 800; color: #111827; line-height: 1.3; word-break: keep-all; }
.july-auth-modal__head p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
.july-auth-modal__body { margin-top: 24px; }
.july-auth-view[hidden] { display: none !important; }
.july-auth-form .field+.field { margin-top: 14px; }
.july-auth-form .field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #111827; }
.july-auth-form .field input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #d1d5db; border-radius: 14px; font-size: 15px; color: #111827; background: #fff; box-sizing: border-box; }
.july-auth-form .field input:focus { outline: none; border-color: #8ab8ff; box-shadow: 0 0 0 4px rgba(107, 182, 255, 0.12); }
.july-auth-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.6; color: #4b5563; }
.july-auth-check input { margin-top: 3px; }
.july-auth-form__actions { margin-top: 18px; }
.july-auth-form__actions .myinfo-btn { width: 100%; min-height: 52px; border-radius: 999px; }
.july-auth-modal__switch { margin-top: 16px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: #6b7280; }
.july-auth-modal__switch-btn { border: 0; background: transparent; color: #111827; font-weight: 700; cursor: pointer; padding: 0; }
.july-auth-complete { text-align: center; padding: 8px 4px 2px; }
.july-auth-complete__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6bb6ff 0%, #c989e8 100%); color: #fff; font-size: 28px; font-weight: 900; }
.july-auth-complete__title { display: block; font-size: 22px; font-weight: 800; color: #111827; line-height: 1.4; }
.july-auth-complete__desc { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
body.is-july-auth-open { overflow: hidden; }
@media (max-width:767px) {
  .july-auth-modal { position: fixed; inset: 0; z-index: 99999; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px; }
  .july-auth-modal__dialog { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: 0; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;}
  .july-auth-modal__head { flex: 0 0 auto; padding: 0; }
  .july-auth-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;   }
  .july-auth-modal__close { top: 12px; right: 12px; }
  .july-auth-check {flex-direction: column;}
}
.july-auth-sns { margin-top: 18px; }
.july-auth-sns__divider { position: relative; text-align: center; margin-bottom: 14px; }
.july-auth-sns__divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e5e7eb; transform: translateY(-50%); }
.july-auth-sns__divider span { position: relative; display: inline-block; padding: 0 12px; background: #fff; font-size: 13px; color: #9ca3af; z-index: 1; }
.july-auth-sns__buttons { display: flex; flex-direction: column; gap: 10px; }
.july-auth-sns__btn { width: 100%; min-height: 52px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.july-auth-sns__btn:hover { transform: translateY(-1px); }
.july-auth-sns__btn--kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.july-auth-sns__btn--naver { background: #03C75A; border-color: #03C75A; color: #fff; }
.july-sns-flow-modal { position: fixed; inset: 0; z-index: 100002; }
.july-sns-flow-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(3px); }
.july-sns-flow-modal__dialog { position: relative; width: calc(100% - 32px); max-width: 820px; margin: 0 auto; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 26px; padding: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
.july-sns-flow-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: #f3f4f6; border-radius: 50%; font-size: 22px; line-height: 1; color: #374151; cursor: pointer; }
.july-sns-flow-modal__head { padding: 8px 40px 14px 6px; }
.july-sns-flow-modal__head strong { display: block; font-size: 20px; font-weight: 800; color: #111827; line-height: 1.4; }
.july-sns-flow-modal__body { margin-top: 4px; }
body.is-july-sns-flow-open { overflow: hidden; }
.july-page-head, .myinfo-head { position: relative; }
@media (max-width:767px) {

  .july-page-head, .myinfo-head { position: relative; padding-right: 92px; }
  .july-page-head__guide { position: absolute; top: 2px; right: 0; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
}
@media (max-width:767px) {
  .july-sns-flow-modal__dialog { width: calc(100% - 20px); padding: 14px; border-radius: 20px; }
}
.myinfo-head { position: relative; display: block; padding-right: 140px; }
.myinfo-head .july-page-head__guide { position: absolute; top: 8px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 110px; min-height: 42px; padding: 0 16px; margin: 0; border-radius: 999px; white-space: nowrap; z-index: 2; }
@media (max-width:767px) {
  .myinfo-head { padding-right: 92px; }
  .myinfo-head .july-page-head__guide { top: 2px; min-width: 0; min-height: 30px; padding: 0 10px; font-size: 11px; }
}
.july-auth-check__link { display: inline-flex; align-items: center; margin-left: 6px; padding: 0; border: 0; background: transparent; color: #6c8dff; font-size: 13px; font-weight: 700; line-height: 1.6; cursor: pointer; }
.july-auth-check__link:hover { color: #4f46e5; }
.july-terms-modal { position: fixed; inset: 0; z-index: 100005; }
.july-terms-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(3px); }
.july-terms-modal__dialog { position: relative; width: calc(100% - 32px); max-width: 640px; margin: 0 auto; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 26px; padding: 28px 24px 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
.july-terms-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: #f3f4f6; border-radius: 50%; font-size: 22px; line-height: 1; color: #374151; cursor: pointer; }
.july-terms-modal__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: #6b7280; letter-spacing: 0.08em; }
.july-terms-modal__head strong { display: block; margin-top: 8px; font-size: 26px; font-weight: 800; color: #111827; line-height: 1.3; }
.july-terms-modal__body { margin-top: 20px; }
.july-terms-modal__content { max-height: 52vh; overflow-y: auto; padding-right: 6px; font-size: 14px; line-height: 1.8; color: #4b5563; }
.july-terms-modal__content h4 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #111827; }
.july-terms-modal__content p+h4 { margin-top: 18px; }
.july-terms-modal__content p { margin: 0; }
.july-terms-modal__actions { margin-top: 20px; display: flex; justify-content: center; }
.july-terms-modal__actions .myinfo-btn { display: flex; align-items: center !important; justify-content: center !important; width: 100%; min-height: 52px; border-radius: 999px; box-sizing: border-box; }
body.is-july-terms-open { overflow: hidden; }
@media (max-width:767px) {
  .july-terms-modal__dialog { width: calc(100% - 20px); padding: 24px 18px 18px; border-radius: 22px; }
  .july-terms-modal__head strong { font-size: 22px; }
  .july-terms-modal__content { max-height: 56vh; }
}
.july-instagram-inline-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.july-instagram-inline-meta__btn { height: 34px; padding: 0 14px; border: 1px solid #d8dbe8; background: #fff; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1f2a44; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }
.july-instagram-inline-meta__btn img { width: 18px; margin-right: 3px; border-radius: 4px; }
.july-instagram-inline-meta__btn:hover { border-color: #a78bfa; color: #6d5dfc; }
.july-instagram-inline-meta__status { font-size: 13px; font-weight: 600; color: #5b647a; line-height: 1.4; }
.july-instagram-inline-meta__guide { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #6b7280; word-break: keep-all; }
@media (max-width:768px) {
  .july-instagram-inline-meta { align-items: center; flex-direction: row; gap: 8px; }
  .july-instagram-inline-meta__btn { height: 32px; font-size: 12px; padding: 0 12px; }
  .july-instagram-inline-meta__status, .july-instagram-inline-meta__guide { font-size: 12px; }
}
.july-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.july-field-label-row label { margin-bottom: 0 !important; }
.july-inline-link-btn { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 700; color: #8b5cf6; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.july-inline-link-btn:hover { text-decoration: underline; }
.july-field-label-row__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.july-inline-help-btn { border: 0; background: transparent; padding: 0 10px 0 0; font-size: 12px; font-weight: 700; color: #4b5563; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.july-inline-help-btn:hover { text-decoration: underline; }
@media (max-width:768px) {
  .july-field-label-row { align-items: flex-start; }
  .july-field-label-row__left { flex-wrap: wrap; gap: 8px; }
  .july-inline-help-btn { font-size: 11px; }
}
.july-instagram-guide-modal { position: fixed; inset: 0; z-index: 100280; }
.july-instagram-guide-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.july-instagram-guide-modal__dialog { position: relative; width: min(560px, calc(100vw - 32px)); margin: 6vh auto 0; background: #fff; border-radius: 28px; padding: 28px 28px 24px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18); z-index: 1; }
.july-instagram-guide-modal__close { position: absolute; right: 18px; top: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #6b7280; }
.july-instagram-guide-modal__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #8b5cf6; margin-bottom: 10px; }
.july-instagram-guide-modal__head strong { display: block; font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 18px; }
.july-instagram-guide-modal__content p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: #475569; word-break: keep-all; }
.july-instagram-guide-modal__content h4 { margin: 20px 0 8px; font-size: 16px; font-weight: 800; color: #111827; }
.july-instagram-guide-modal__highlight { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.08)); font-size: 15px; font-weight: 700; line-height: 1.7; color: #312e81; word-break: keep-all; }
.july-instagram-guide-modal__actions { display: flex; justify-content: flex-end; margin-top: 22px; }
@media (max-width:768px) {
  .july-instagram-guide-modal__dialog { width: calc(100vw - 24px); margin-top: 4vh; padding: 24px 20px 20px; border-radius: 22px; }
  .july-instagram-guide-modal__head strong { font-size: 24px; }
  .july-instagram-guide-modal__content p, .july-instagram-guide-modal__highlight { font-size: 14px; }
}
.myinfo-instagram-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.myinfo-instagram-stat, .myinfo-instagram-ratio__item { border: 1px solid #ececf4; border-radius: 18px; padding: 18px 16px; background: #fff; }
.myinfo-instagram-stat__label, .myinfo-instagram-ratio__label { display: block; font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--july-text-soft); margin-bottom: 6px; }
.myinfo-instagram-stat__value, .myinfo-instagram-ratio__value { display: block; font-size: 20px; line-height: 1.2; font-weight: 900; letter-spacing: -0.03em; color: var(--july-navy); }
.myinfo-instagram-ratio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.myinfo-instagram-ratio__sub { display: block; margin-top: 8px; font-size: 13px; color: #7b8195; }
.myinfo-instagram-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.myinfo-instagram-media__item { display: block; text-decoration: none; color: inherit; }
.myinfo-instagram-media__thumb { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #f3f4f8; display: flex; align-items: center; justify-content: center; }
.myinfo-instagram-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myinfo-instagram-media__thumb span { font-size: 12px; color: #98a2b3; font-weight: 700; }
.myinfo-instagram-media__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: #667085; }
.myinfo-instagram-media__meta strong { color: #111827; font-weight: 800; }
.myinfo-instagram-media__empty { grid-column: 1 / -1; border: 1px dashed #d9dbe8; border-radius: 18px; padding: 24px 18px; text-align: center; color: #7b8195; font-size: 14px; }
.myinfo-guide-box--instagram { margin-top: 18px; }
@media (max-width:991px) {
  .myinfo-instagram-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .myinfo-instagram-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px) {
    .myinfo-instagram-summary, .myinfo-instagram-ratio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .myinfo-instagram-media { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; gap: 4px; }
    .myinfo-instagram-stat, .myinfo-instagram-ratio__item { padding: 14px 12px; border-radius: 14px; }
    .myinfo-instagram-stat__value, .myinfo-instagram-ratio__value { font-size: 18px; }
    .myinfo-instagram-media__thumb { border-radius: 12px; }
    .myinfo-instagram-media__meta { font-size: 11px; justify-content: space-evenly; }
}
.myinfo-table-wrap { scrollbar-width: thin; scrollbar-color: #c9b7ff #ececf4; }
.myinfo-table-wrap::-webkit-scrollbar { height: 6px; }
.myinfo-table-wrap::-webkit-scrollbar-track { background: #ececf4; border-radius: 999px; }
.myinfo-table-wrap::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c9b7ff 0%, #b39cff 100%); border-radius: 999px; }
.myinfo-table-wrap::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #bda6ff 0%, #a98fff 100%); }
.myinfo-card--weekly-plan { margin-top: 0; }
.myinfo-weekly-plan { display: flex; flex-direction: column; gap: 16px; }
.myinfo-weekly-plan__summary { padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(196, 181, 253, 0.14)); border: 1px solid rgba(196, 181, 253, 0.35); }
.myinfo-weekly-plan__summary strong { display: block; font-size: 15px; font-weight: 800; color: #5b21b6; margin-bottom: 8px; }
.myinfo-weekly-plan__summary p { margin: 0; font-size: 14px; line-height: 1.75; color: #475569; word-break: keep-all; }
.myinfo-weekly-plan__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.myinfo-weekly-plan__item { padding: 18px 18px 16px; border-radius: 20px; border: 1px solid #ececf4; background: #fff; }
.myinfo-weekly-plan__channel { display: inline-block; margin-bottom: 10px; padding: 6px 10px; border-radius: 999px; background: #f3f0ff; color: #7c3aed; font-size: 12px; font-weight: 700; }
.myinfo-weekly-plan__item strong { display: block; font-size: 16px; font-weight: 800; color: #111827; line-height: 1.45; margin-bottom: 8px; word-break: keep-all; }
.myinfo-weekly-plan__item p { margin: 0; font-size: 14px; line-height: 1.75; color: #667085; word-break: keep-all; }
@media (max-width:768px) {
    .myinfo-weekly-plan__list { grid-template-columns: 1fr; }
    .myinfo-weekly-plan__summary, .myinfo-weekly-plan__item { border-radius: 16px; padding: 16px; }
}
.myinfo-guide-box__desc { white-space: pre-line; }
.myinfo-lock-badge { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; background: rgba(124, 58, 237, 0.10); color: #7c3aed; font-size: 12px; font-weight: 800; line-height: 1; border: 1px solid rgba(124, 58, 237, 0.18); }
.myinfo-card--weekly-plan.is-locked { position: relative; }
.myinfo-weekly-plan__summary { position: relative; }
.myinfo-weekly-plan__summary--locked { background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(196, 181, 253, 0.16)); }
.myinfo-weekly-plan__score { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.myinfo-weekly-plan__score-value { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; padding: 3px 12px; border-radius: 999px; background: #ffffff; border: 1px solid #e7defd; color: #5b21b6; font-size: 14px; font-weight: 800; }
.myinfo-weekly-plan__score-label { font-size: 13px; font-weight: 700; color: #7c3aed; }
.myinfo-weekly-plan__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.myinfo-weekly-plan__meta span { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: #f8f7ff; border: 1px solid #ece9ff; color: #667085; font-size: 12px; font-weight: 700; }
.myinfo-weekly-plan__list--locked .myinfo-weekly-plan__item.is-placeholder { position: relative; overflow: hidden; }
.myinfo-planner-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(49, 46, 129, 0.94)); color: #fff; }
.myinfo-planner-cta__text strong { display: block; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.myinfo-planner-cta__text p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.82); }
@keyframes julyPlannerShimmer {
    100% { transform: translateX(100%); }
}
@media (max-width:768px) {
    .myinfo-planner-cta { flex-direction: column; align-items: stretch; }
    .myinfo-weekly-plan__meta { gap: 6px; }
}
.myinfo-planner-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 20px 22px; border-radius: 24px; background: radial-gradient(circle at top left, rgba(103, 184, 255, 0.16), transparent 30%), radial-gradient(circle at 85% 20%, rgba(138, 125, 255, 0.18), transparent 28%), linear-gradient(135deg, rgba(15, 22, 48, 0.98), rgba(23, 29, 61, 0.96)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 18px 44px rgba(18, 24, 52, 0.18); color: #fff; }
.myinfo-planner-cta__text strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.35; margin-bottom: 6px; letter-spacing: -0.02em; }
.myinfo-planner-cta__text p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.myinfo-planner-cta .myinfo-btn { flex: 0 0 auto; min-width: 148px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--july-grad); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 12px 24px rgba(125, 120, 255, 0.24); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.myinfo-planner-cta .myinfo-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(125, 120, 255, 0.30); opacity: 0.98; }
.myinfo-planner-cta .myinfo-btn:active { transform: translateY(0); box-shadow: 0 10px 18px rgba(125, 120, 255, 0.22); }
.myinfo-planner-cta { position: relative; overflow: hidden; }
.myinfo-planner-cta > * { position: relative; z-index: 1; }
.myinfo-planner-cta::after { content: ''; position: absolute; top: -20%; left: -30%; width: 42%; height: 140%; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 35%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 65%, rgba(255,255,255,0) 100% ); transform: skewX(-18deg) translateX(-180%); animation: julyPlannerCtaShimmer 2.2s linear infinite; pointer-events: none; }
@keyframes julyPlannerCtaShimmer {
    0% { transform: skewX(-18deg) translateX(-180%); opacity: 0; }
    10% { opacity: 1; }
    70% { transform: skewX(-18deg) translateX(420%); opacity: 1; }
    100% { transform: skewX(-18deg) translateX(420%); opacity: 0; }
}
@media (max-width:768px) {
    .myinfo-planner-cta { flex-direction: column; align-items: stretch; padding: 18px; border-radius: 20px; }
    .myinfo-planner-cta .myinfo-btn { width: 100%; min-width: 0; }
    .myinfo-planner-cta::after { animation: julyPlannerCtaShimmer 1.5s ease-in-out infinite}
}
.myinfo-weekly-plan__summary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 24px; align-items: stretch; }
.myinfo-weekly-plan__summary-main { min-width: 0; }
.myinfo-weekly-plan__focus { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px 18px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(196, 181, 253, 0.28); }
.myinfo-weekly-plan__focus-title { font-size: 13px; font-weight: 800; color: #7c3aed; letter-spacing: -0.01em; }
.myinfo-weekly-plan__focus-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.myinfo-weekly-plan__focus-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #ece9ff; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.05); }
.myinfo-weekly-plan__focus-badge em { font-style: normal; font-size: 11px; font-weight: 800; color: #8b93a7; }
.myinfo-weekly-plan__focus-badge strong { font-size: 12px; font-weight: 800; color: #111827; }
.myinfo-weekly-plan__focus-progress { display: flex; flex-direction: column; gap: 8px; }
.myinfo-weekly-plan__focus-progress-bar { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); overflow: hidden; border: 1px solid rgba(236, 233, 255, 0.9); }
.myinfo-weekly-plan__focus-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--july-grad); box-shadow: 0 6px 14px rgba(125, 120, 255, 0.18); }
.myinfo-weekly-plan__focus-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.myinfo-weekly-plan__focus-progress-meta strong { font-size: 14px; font-weight: 900; color: #5b21b6; }
.myinfo-weekly-plan__focus-progress-meta span { font-size: 12px; font-weight: 800; color: #7c3aed; }
.myinfo-weekly-plan__focus-message strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; color: #111827; line-height: 1.45; word-break: keep-all; }
.myinfo-weekly-plan__focus-message p { margin: 0; font-size: 13px; line-height: 1.7; color: #667085; word-break: keep-all; }
@media (max-width:1024px) {
    .myinfo-weekly-plan__summary { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
    .myinfo-weekly-plan__focus { padding: 16px; border-radius: 16px; }
    .myinfo-weekly-plan__focus-badges { gap: 6px; }
    .myinfo-weekly-plan__focus-badge { min-height: 32px; padding: 0 10px; }
}
.myinfo-weekly-plan__summary { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.95fr); gap: 22px; align-items: stretch; }
.myinfo-weekly-plan__summary-left { display: flex; flex-direction: column; min-width: 0; }
.myinfo-weekly-plan__summary-left > strong { display: block; font-size: 16px; font-weight: 800; color: #5b21b6; margin-bottom: 12px; line-height: 1.4; }
.myinfo-weekly-plan__summary-left > p { margin: 0; font-size: 14px; line-height: 1.75; color: #475569; word-break: keep-all; }
.myinfo-weekly-plan__score { margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.myinfo-weekly-plan__score-value { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; padding: 8px 12px; border-radius: 999px; background: #ffffff; border: 1px solid #e7defd; color: #5b21b6; font-size: 14px; font-weight: 800; }
.myinfo-weekly-plan__score-label { font-size: 13px; font-weight: 700; color: #7c3aed; }
.myinfo-weekly-plan__summary-message { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(236, 233, 255, 0.95); }
.myinfo-weekly-plan__summary-message strong { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 800; color: #111827; line-height: 1.45; word-break: keep-all; }
.myinfo-weekly-plan__summary-message p { margin: 0; font-size: 13px; line-height: 1.75; color: #667085; word-break: keep-all; }
.myinfo-weekly-plan__summary-right { display: flex; align-items: stretch; min-width: 0; }
.myinfo-weekly-plan__focus { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(196, 181, 253, 0.28); }
.myinfo-weekly-plan__focus-title { font-size: 13px; font-weight: 800; color: #7c3aed; letter-spacing: -0.01em; }
.myinfo-weekly-plan__focus-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.myinfo-weekly-plan__focus-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #ece9ff; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.05); }
.myinfo-weekly-plan__focus-badge em { font-style: normal; font-size: 11px; font-weight: 800; color: #8b93a7; }
.myinfo-weekly-plan__focus-badge strong { font-size: 12px; font-weight: 800; color: #111827; margin-bottom: 0;}
.myinfo-weekly-plan__focus-progress { display: flex; flex-direction: column; gap: 10px; }
.myinfo-weekly-plan__focus-progress-bar { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); overflow: hidden; border: 1px solid rgba(236, 233, 255, 0.9); }
.myinfo-weekly-plan__focus-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--july-grad); box-shadow: 0 6px 14px rgba(125, 120, 255, 0.18); }
.myinfo-weekly-plan__focus-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.myinfo-weekly-plan__focus-progress-meta strong { font-size: 22px; font-weight: 900; color: #5b21b6; line-height: 1; }
.myinfo-weekly-plan__focus-progress-meta span { font-size: 12px; font-weight: 800; color: #7c3aed; }
@media (max-width:1180px) {
    .myinfo-weekly-plan__summary { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
    .myinfo-weekly-plan__summary-message, .myinfo-weekly-plan__focus { padding: 16px; border-radius: 16px; }
    .myinfo-weekly-plan__focus-badges { gap: 6px; }
    .myinfo-weekly-plan__focus-badge { min-height: 32px; padding: 0 10px; }
}


/* 기본적으로 가로 배치를 적용 (768 이하 & 1600 이상 공통) */
.capture_box { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
/* 중간 단계(태블릿)만 따로 덮어쓰기 */
@media (min-width:769px) and (max-width:1709px) {
  .capture_box { flex-direction: column; gap: 0; align-items: flex-start; }
  .capture_box div:nth-child(2) { align-self: flex-end; }
}
/* 주의: 1600px 이상에서 nth-child(2)의 위치를 다시 원복해야 할 수도 있습니다 */
@media (min-width:1710px) {
  .capture_box div:nth-child(2) { align-self: auto; }
}
.customers-capture-box { margin-bottom: 18px; padding: 16px; border-radius: 18px; background: #f8f7ff; border: 1px solid #ece9ff; }
.customers-capture-box__head strong { display: block; font-size: 14px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.customers-capture-box__head p { margin: 0; font-size: 13px; line-height: 1.6; color: #667085; }
.customers-capture-box__actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.customers-capture-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #000; color: #fff; font-size: 11px; font-weight: 500; cursor: pointer; min-width: 70px; }
.customers-capture-btn:hover, .customers-mini-btn:hover {transform: translateY(-1px); }
.customers-capture-result { margin-top: 5px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #ece9ff; font-size: 13px; line-height: 1.7; color: #475569; }
.customers-capture-help { margin: 0; font-size: 13px; color: #8b93a7; margin-top: 5px;}
.customers-input.is-autofilled, .customers-textarea.is-autofilled { background: #fffdf2; border-color: #f3d36a; }
.customers-head-actions { display: flex; gap: 10px; align-items: center; }
.customers-head-btn, .customers-outline-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; }
.customers-head-btn { border: 0; border: 1px solid rgba(20, 30, 60, 0.10); background: rgba(248, 250, 255, 0.96); color: #4b556b; }
.customers-head-btn img{ width: 20px; margin-right: 3px;}
.customers-outline-btn { border: 1px solid #d9d9f5; background: #fff; color: #4b4fcf; }
  .excel_btn_flex { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
  .excel_btn_flex div:nth-child(2) { align-self: flex-end; }
@media (min-width:1600px) {
.excel_btn_flex { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row; }
}
.july-modal[hidden] { display: none; }
.july-modal { position: fixed; inset: 0; z-index: 99999; }
.july-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.july-modal__dialog { position: relative; z-index: 2; width: min(640px, calc(100% - 32px)); margin: 60px auto; background: #fff; border-radius: 28px; padding: 28px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
.july-modal__close { position: absolute; right: 18px; top: 18px; border: 0; background: transparent; font-size: 28px; cursor: pointer; color: #475569; }
.july-modal__head h3 { margin: 0 0 8px; font-size: 28px; font-weight: 800; color: #111827; }
.july-modal__head p { margin: 0; font-size: 14px; line-height: 1.7; color: #667085; }
.customers-excel-box { margin-top: 20px; margin-bottom: 18px; }
.customers-gradient-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: linear-gradient(90deg, #5ea8f4 0%, #d98cd9 100%); color: #fff; font-weight: 800; text-decoration: none; }
.customers-excel-help { margin-top: 10px; font-size: 12px; line-height: 1.7; color: #8b93a7; }
.customers-excel-actions { margin-top: 18px; }
.customers-excel-result { margin-top: 20px; padding: 18px; border-radius: 18px; background: #f8f7ff; border: 1px solid #e8e4ff; font-size: 14px; line-height: 1.8; color: #344054; }
.customers-file-upload { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid #dbe1ea; border-radius: 18px; background: #fff; }
.customers-file-upload__button { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border: 1px solid #cfd7e6; border-radius: 12px; background: #f8fafc; color: #111827; font-size: 14px; font-weight: 700; cursor: pointer; }
.customers-file-upload__button:hover { background: #f1f5f9; }
.customers-file-upload__name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customers-file-upload.is-selected { border-color: #cfc7ff; background: #fcfbff; }
.customers-file-upload.is-selected .customers-file-upload__name { color: #111827; font-weight: 600; }
.customers-table tbody tr.is-selected .customers-link { font-weight: 700; }
.customers-table tbody tr.is-selected .customers-link { position: relative; display: inline-block; font-weight: 700; color: #1f2340; z-index: 1; padding: 0 2px; }
.customers-table tbody tr.is-selected .customers-link::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 1px; height: 0.72em; background: rgba(196, 181, 253, 0.55); border-radius: 999px; z-index: -1; transform: rotate(-1.2deg); }
.customers-table tbody tr.is-selected .customers-link:hover::after { background: rgba(196, 181, 253, 0.68); }
.customers-timeline-item__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.customers-amount-chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #f5f1ff; color: #5b3cc4; font-size: 13px; font-weight: 600; line-height: 1; }
.customers-amount-chip.is-deposit { background: #fff1f6; color: #c03a78; }
.customers-amount-chip.is-balance { background: #f3f4f8; color: #4b5563; }
.customers-reset-filter-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; height: 46px; padding: 0 18px; border-radius: 999px; background: #f3f4f8; color: #4b5563; font-weight: 600; text-decoration: none; transition: all 0.2s ease; }
.customers-reset-filter-btn:hover { background: #e8eaf1; color: #1f2937; }
.customers-quick-period { display: flex; flex-wrap: wrap; gap: 8px; }
.customers-quick-period-btn { border: 0; border-radius: 999px; padding: 8px 14px; background: #f4f0ff; color: #6d4aff; font-weight: 600; cursor: pointer; }
.customers-quick-period-btn:hover {transform: translateY(-1px);}

.customers-quick-period-btn { transition: all .2s ease; }
.customers-quick-period-btn.is-active { background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); color: #fff; box-shadow: 0 10px 24px rgba(125, 120, 255, 0.18); transform: translateY(-1px); }

.customers-filter { display: grid; grid-template-columns: minmax(0, 2.2fr) 160px 1fr 1fr; gap: 12px; align-items: center; }
.customers-filter .customers-input, .customers-filter .customers-select { min-width: 0; width: 100%; }
.customers-filter > input[name="keyword"], .customers-filter > select[name="status"], .customers-filter > input[name="date_from"], .customers-filter > input[name="date_to"] { min-width: 0; width: 100%; }
/* 버튼줄 */
.customers-filter .customers-quick-period { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.customers-filter .customers-quick-period-btn, .customers-filter .customers-quick-period .myinfo-btn, .customers-filter .customers-quick-period .customers-head-btn { width: 65px; min-width: 65px; max-width: 65px; height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; flex: 0 0 65px; }
.customers-filter .customers-quick-period > .myinfo-btn--dark { margin-left: auto; }
/* 태블릿 */
@media (max-width:1024px) {
  .customers-filter { grid-template-columns: minmax(0, 1.8fr) 150px 1fr 1fr; gap: 10px; }
  .customers-filter .customers-quick-period { flex-wrap: wrap; }
  .customers-filter .customers-quick-period-btn, .customers-filter .customers-quick-period .myinfo-btn, .customers-filter .customers-quick-period .customers-head-btn { width: 92px; min-width: 92px; max-width: 92px; flex-basis: 92px; height: 42px; }
}
/* 모바일 */
@media (max-width:767px) {
  .customers-filter { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
  /* 1줄: 키워드 7 / 상태 3 */
  .customers-filter > input[name="keyword"] { grid-column: span 7; }
  .customers-filter > select[name="status"] { grid-column: span 3; }
  /* 2줄: 날짜 5 / 5 */
  .customers-filter > input[name="date_from"] { grid-column: span 5; }
  .customers-filter > input[name="date_to"] { grid-column: span 5; }
  /* 3줄: 버튼들 */

  .customers-filter .customers-quick-period > .myinfo-btn--dark { margin-left: 0; }
  .customers-filter .customers-quick-period { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .customers-filter .customers-quick-period-btn, .customers-filter .customers-quick-period .myinfo-btn, .customers-filter .customers-quick-period .customers-head-btn { width: 100%; min-width: 0; max-width: none; flex: initial; height: 44px; padding: 0 8px; font-size: 14px; }
  /* 모바일 날짜 2칸은 완전 반반 */
  .customers-filter > input[name="date_from"], .customers-filter > input[name="date_to"] { width: 100%; }
}

#customerReviewRequestModal { display: flex; align-items: center; justify-content: center; padding: 24px; }
#customerReviewRequestModal .july-modal__backdrop { background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(8px); }
#customerReviewRequestModal .july-modal__dialog { width: min(100%, 540px); margin: 0; padding: 0; border-radius: 32px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 30px 80px rgba(15, 22, 48, 0.22); overflow: hidden; }
#customerReviewRequestModal .july-modal__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(20, 30, 60, 0.06); color: #6b7280; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
#customerReviewRequestModal .july-modal__head { padding: 34px 34px 12px; text-align: center; margin-bottom: 0;}
#customerReviewRequestModal .july-modal__head::before { content: "REVIEW REQUEST"; display: block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: #8a7dff; }
#customerReviewRequestModal .july-modal__head h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; letter-spacing: -0.04em; color: #0f1630; font-weight: 900; }
#customerReviewRequestModal .july-modal__head p { margin: 0; font-size: 15px; line-height: 1.8; color: #687089; word-break: keep-all; }
#customerReviewRequestModal .july-modal__body { padding: 18px 34px 34px; }
#customerReviewRequestModal .customers-review-request-box { padding: 22px; border-radius: 24px; background: #f8f9ff; border: 1px solid #e9ecf5; }
#customerReviewRequestModal .customers-review-request-box::before { content: "생성문구"; display: block; margin-bottom: 14px; font-size: 14px; font-weight: 800; color: #111827; text-align: center; }
#customerReviewRequestModal .customers-review-request-preview { position: relative; min-height: 220px; padding: 18px 18px 72px; border-radius: 18px; background: #fff; border: 1px solid #e5e7eb; color: #6b7280; font-size: 15px; line-height: 2; white-space: pre-wrap; word-break: keep-all; box-sizing: border-box; }
#customerReviewRequestModal .customers-review-request-actions { margin-top: -58px; padding-right: 14px; display: flex; justify-content: flex-end; position: relative; z-index: 1; }
/* 모바일 */
@media (max-width:767px) {
  #customerReviewRequestModal { padding: 16px; }
  #customerReviewRequestModal .july-modal__dialog { width: min(100%, 540px); margin: 0; border-radius: 28px; }
  #customerReviewRequestModal .july-modal__head { padding: 30px 22px 10px; }
  #customerReviewRequestModal .july-modal__head h3 { font-size: 22px; }
  #customerReviewRequestModal .july-modal__head p { font-size: 14px; line-height: 1.75; }
  #customerReviewRequestModal .july-modal__body { padding: 16px 22px 24px; }
  #customerReviewRequestModal .customers-review-request-box { padding: 18px; border-radius: 22px; }
  #customerReviewRequestModal .customers-review-request-preview { min-height: 250px; font-size: 14px; line-height: 1.95; padding: 16px 16px 70px; }
  #customerReviewRequestModal .customers-review-request-actions { margin-top: -56px; padding-right: 12px; }
  #customerReviewRequestModal .july-modal__close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 22px; }
  
  .july-modal__head h3 { font-size: 22px; }
}
#customerCrmSubscribeModal { display: flex; align-items: center; justify-content: center; padding: 24px; }
#customerCrmSubscribeModal .july-modal__backdrop { background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(8px); }
#customerCrmSubscribeModal .july-modal__dialog { width: min(100%, 540px); margin: 0; padding: 0; border-radius: 32px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 30px 80px rgba(15, 22, 48, 0.22); overflow: hidden; position: relative; }
#customerCrmSubscribeModal .july-modal__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(20, 30, 60, 0.06); color: #6b7280; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
#customerCrmSubscribeModal .july-modal__head { padding: 36px 34px 14px; text-align: center; }
#customerCrmSubscribeModal .july-modal__head::before { content: "CUSTOMER CRM"; display: block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: #8a7dff; }
#customerCrmSubscribeModal .july-modal__head h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.2; letter-spacing: -0.04em; color: #0f1630; font-weight: 900; }
#customerCrmSubscribeModal .july-modal__head p { margin: 0; font-size: 15px; line-height: 1.8; color: #687089; word-break: keep-all; }
#customerCrmSubscribeModal .july-modal__body { padding: 18px 34px 34px; }
#customerCrmSubscribeModal .customers-subscribe-guide { padding: 24px 22px; border-radius: 24px; background: #f8f9ff; border: 1px solid #e9ecf5; text-align: center; }
#customerCrmSubscribeModal .customers-subscribe-guide__text { margin: 0 0 18px; font-size: 15px; line-height: 1.9; color: #6b7280; word-break: keep-all; }
#customerCrmSubscribeModal .customers-subscribe-guide__btn { min-width: 160px; height: 48px; padding: 0 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(15, 22, 48, 0.16); text-decoration: none; }
/* 살짝 강조되는 정보 박스 느낌 */
#customerCrmSubscribeModal .customers-subscribe-guide::before { content: "고객 등록 · 방문 이력 관리 · 엑셀 업로드 · 매출 확인"; display: block; margin-bottom: 14px; font-size: 13px; font-weight: 800; line-height: 1.6; color: #111827; word-break: keep-all; }
/* 모바일 */
@media (max-width:767px) {
  #customerCrmSubscribeModal { padding: 16px; }
  #customerCrmSubscribeModal .july-modal__dialog { width: min(100%, 540px); border-radius: 28px; }
  #customerCrmSubscribeModal .july-modal__head { padding: 30px 22px 10px; }
  #customerCrmSubscribeModal .july-modal__head h3 { font-size: 24px; }
  #customerCrmSubscribeModal .july-modal__head p { font-size: 14px; line-height: 1.75; }
  #customerCrmSubscribeModal .july-modal__body { padding: 16px 22px 24px; }
  #customerCrmSubscribeModal .customers-subscribe-guide { padding: 20px 18px; border-radius: 22px; }
  #customerCrmSubscribeModal .customers-subscribe-guide__text { font-size: 14px; line-height: 1.8; }
  #customerCrmSubscribeModal .customers-subscribe-guide__btn { width: 100%; min-width: 0; height: 46px; }
  #customerCrmSubscribeModal .july-modal__close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 22px; }
}

.customers-form__row { display: grid; gap: 14px; }
.customers-form__row--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.customers-form__label-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.customers-form__label-line label { margin-bottom: 0; }
/* 예약금 토글 */
.customers-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.customers-switch input { position: absolute; opacity: 0; pointer-events: none; }
.customers-switch__track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #e5e7eb; transition: all .2s ease; flex-shrink: 0; }
.customers-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15); transition: all .2s ease; }
.customers-switch input:checked + .customers-switch__track { background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); }
.customers-switch input:checked + .customers-switch__track::after { left: 21px; }
.customers-switch__text { font-size: 13px; font-weight: 700; color: #6b7280; white-space: nowrap; }
/* 잔금 요약 박스 */
.customers-balance-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; border-radius: 18px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.10) 0%, rgba(138, 125, 255, 0.12) 52%, rgba(239, 154, 215, 0.10) 100%); border: 1px solid rgba(138, 125, 255, 0.18); box-sizing: border-box; }
.customers-balance-summary__label { font-size: 13px; font-weight: 700; color: #6b7280; }
.customers-balance-summary__value { font-size: 18px; font-weight: 800; color: #0f1630; letter-spacing: -0.02em; }
/* 모바일 */
@media (max-width:767px) {
  .customers-form__row--2col { grid-template-columns: 1fr; gap: 12px; }
  .customers-form__label-line { align-items: flex-start; flex-direction: column; gap: 8px; }
  .customers-switch__text { font-size: 12px; }
  .customers-balance-summary { min-height: 52px; padding: 0 16px; }
  .customers-balance-summary__value { font-size: 16px; }
}
.js-deposit-field { display: block !important; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); transition: max-height .22s ease, opacity .18s ease, transform .18s ease, margin-top .18s ease; margin-top: -6px; pointer-events: none; }
.js-deposit-field.is-open { max-height: 120px; opacity: 1; transform: translateY(0); margin-top: 0; pointer-events: auto; }
.is-shorts-dashboard.is-customers-page { overflow: auto; }
.is-shorts-dashboard.is-customers-page .july-studio { min-height: 100vh; height: auto; overflow: visible; align-items: flex-start; }
.is-shorts-dashboard.is-customers-page .july-main { min-height: 100vh; height: auto; overflow: visible; }
.is-shorts-dashboard.is-customers-page .july-sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; }
.is-shorts-dashboard.is-customers-page .customers-wrap, .is-shorts-dashboard.is-customers-page .customers-grid, .is-shorts-dashboard.is-customers-page .customers-side { overflow: visible; }
.july-studio.is-customers-layout { min-height: 100vh; height: auto; overflow: visible; align-items: flex-start; }
.july-studio.is-customers-layout .july-main { min-height: 100vh; height: auto; overflow: visible; }
.july-studio.is-customers-layout .july-sidebar { position: sticky !important; top: 0 !important; align-self: flex-start; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; flex-shrink: 0; }
.july-studio.is-customers-layout .customers-wrap, .july-studio.is-customers-layout .customers-grid, .july-studio.is-customers-layout .customers-side { overflow: visible; }
@media (min-width:992px) {
  .july-studio.is-customers-layout .july-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: 260px !important; min-width: 260px !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 30; }
  .july-studio.is-customers-layout .july-main { margin-left: 260px; width: calc(100% - 260px); min-width: 0; }
}
@media (max-width:991px) {
  .july-studio.is-customers-layout .july-sidebar {position: fixed !important; top: 0; left: 0; width: min(82vw, 320px) !important; min-width: 0 !important; height: 100vh; height: 100dvh; z-index: 1100; transform: translateX(-100%); transition: transform .28s ease; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top, 0px) + 24px) 18px max(20px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; touch-action: pan-y; justify-content: space-between;}
  .july-studio.is-customers-layout .july-main { margin-left: 0 !important; width: auto !important; min-width: 0 !important; padding: calc(20px + env(safe-area-inset-top)) 16px 28px !important; }
  body.is-july-sidebar-open .july-studio.is-customers-layout .july-sidebar { transform: translateX(0) !important; }
  .july-sidebar .july-nav a, .july-sidebar .july-nav a.is-active { position: relative; overflow: hidden; border-radius: 14px !important; min-height: 40px; line-height: 1.2; box-sizing: border-box; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .july-studio.is-customers-layout .july-sidebar { border-radius: 0 !important; }
}
.customers-textarea { min-height: 84px !important; height: 84px !important; resize: vertical; }
.customers-summary-card--action { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.customers-summary-card--action:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(125, 120, 255, 0.12); border-color: rgba(138, 125, 255, 0.18); }
.customers-summary-card--action:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(138, 125, 255, 0.12); border-color: rgba(138, 125, 255, 0.28); }
.customers-summary-card--action .customers-summary-card__label::after { content: " · 클릭해서 보기"; font-size: 11px; font-weight: 700; color: #8a7dff; }
/* =========================
   CUSTOMERS SUMMARY GROUP LAYOUT
========================= */

.customers-summary { display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: start; }
.customers-summary__group { display: grid; gap: 16px; align-items: stretch; }
.customers-summary__group--stats { grid-column: 1 / 2; grid-row: 1 / 2; grid-template-columns: repeat(3, 240px); justify-content: start; }
.customers-summary__group--schedule { grid-column: 2 / 3; grid-row: 1 / 2; grid-template-columns: repeat(2, 240px); justify-content: end; }
.customers-summary__group--sales { grid-column: 1 / 3; grid-row: 2 / 3; grid-template-columns: repeat(4, 240px); justify-content: start; }
.customers-summary-card { width: 240px; max-width: 240px; min-height: 96px; }
@media (min-width:1441px) {
  .customers-summary__group--sales { grid-column: 1 / 3; grid-row: 2 / 3; grid-template-columns: repeat(3, 240px) 1fr; width: 100%; }
  .customers-summary__group--sales .customers-summary-card:last-child { justify-self: end; }
}
/* 태블릿 */
@media (max-width:1440px) {
  .customers-summary__group--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customers-summary__group--sales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customers-summary__group--schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customers-summary-card { width: 100%; max-width: none; }
}
@media (max-width:767px) {
  .customers-summary { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .customers-summary__group { display: grid !important; gap: 12px !important; width: 100%; grid-column: auto !important; grid-row: auto !important; justify-content: stretch !important; }
  .customers-summary__group--stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .customers-summary__group--sales { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }
  .customers-summary__group--schedule { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }
  .customers-summary-card { width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 88px !important; }
  .customers-summary-card__label { line-height: 1.35; word-break: keep-all; }
}

/* =========================
   모바일 헤더 및 햄버거 버튼
========================= */
@media (max-width: 991px) {
  .july-mobile-topbar { display: block; position: fixed; inset: 0 auto auto 0; width: 100%; height: 0; min-height: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; overflow: visible; pointer-events: none; z-index: 9999; }
  .july-mobile-topbar__brand { display: none; }
  .july-mobile-menu-btn { position: fixed; right: 0; top: calc(env(safe-area-inset-top, 0px) + 100px); width: auto; min-width: 40px; height: 36px; padding: 0 9px 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 14px 0 0 14px; background: #0f1630; color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); border-right: 0; box-shadow: 0 8px 20px rgba(15, 22, 48, 0.24); z-index: 10000; pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
  .july-mobile-menu-btn img { display: block; width: 12px; object-fit: contain; flex: 0 0 auto; }
}

.customers-head-actions--stack { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; }
.customers-head-actions--stack .customers-head-btn { min-width: 120px; justify-content: center; }
.customer-service-form { margin-top: 22px; }
.customer-service-list { display: flex; flex-direction: column; gap: 5px; }
.customer-service-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 54px; gap: 8px; align-items: end; padding: 14px; border: 1px solid #ece9ff; border-radius: 18px; background: #f8f7ff; }
.customer-service-row__field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; color: #111827; }
.customer-service-row__delete { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer; transition: all .2s ease; text-decoration: none; white-space: nowrap; color: #fff; background: #000; }
.customer-service-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
@media (max-width:768px) {
  .customer-service-actions { flex-direction: column; }
  .customer-service-actions .customers-outline-btn, .customer-service-actions .myinfo-btn { width: 100%; }
  .customer-service-row { grid-template-columns: minmax(0, 1fr) 96px 48px; gap: 6px; padding: 12px; }
  .customer-service-row__field label { font-size: 12px; }
  .customer-service-row .customers-input { height: 42px; padding: 0 10px; font-size: 13px; }
  .customer-service-row__delete { height: 42px; font-size: 11px; }
  .customer-service-actions { flex-direction: column; }
  .customer-service-actions .customers-outline-btn, .customer-service-actions .myinfo-btn { width: 100%; }
}
.july-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 10050; }
.july-modal[hidden] { display: none; }
.july-modal__dialog { max-height: calc(100dvh - 48px); overflow-y: auto; margin: 0; }
.customers-input--service-name { margin-top: 8px; }
.july-sidebar > *:nth-child(3) {
}
@media (max-width:768px) {
  .july-modal { padding: 16px; }
  .july-modal__dialog { width: 100%; max-height: calc(100dvh - 32px); }
  .july-sidebar { padding-bottom: 40px; height: calc(100vh - 20px); }
}
.myinfo-card__flex { display: flex; gap: 10px}
.alimtalk-preview-box { margin-top: 14px; background: #f6f7fb; border-radius: 18px; padding: 18px; }
.alimtalk-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.alimtalk-preview-head span { font-size: 15px; font-weight: 600; color: #111827; }
.alimtalk-preview-head em { font-style: normal; font-size: 12px; color: #6b7280; }
.alimtalk-preview-card { max-width: 420px; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); border: 1px solid rgba(226, 232, 240, 0.9); }
.alimtalk-preview-channel { display: inline-flex; align-items: center; margin-bottom: 10px; padding: 5px 9px; border-radius: 999px; background: #ffeb00; color: #111; font-size: 12px; font-weight: 600; }
.alimtalk-preview-title { font-size: 18px; line-height: 1.35; color: #111827; font-weight: 700; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef0f4; }
.alimtalk-preview-body { font-size: 14px; line-height: 1.75; color: #374151; }
.alimtalk-preview-button { margin-top: 14px; width: 100%; padding: 11px 14px; border-radius: 12px; background: #111827; color: #fff; text-align: center; font-size: 13px; font-weight: 600; }
.alimtalk-guide-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.alimtalk-guide-btn { border: 0; border-radius: 999px; background: #111827; color: #fff; padding: 10px 15px; font-size: 13px; font-weight: 600; cursor: pointer; }
.alimtalk-guide-note { font-size: 13px; color: #6b7280; }
.alimtalk-guide-modal { position: fixed; inset: 0; z-index: 9999; display: none; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; justify-content: center; }
.alimtalk-guide-modal.is-open { display: flex; }
.alimtalk-guide-modal__backdrop { position: fixed; inset: 0; }
.alimtalk-guide-modal__panel { position: relative; width: min(520px, 100%); max-height: none; margin: auto 0; overflow: visible; background: #fff; border-radius: 26px; padding: 30px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24); }
.alimtalk-guide-modal__close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f3f4f6; color: #111827; font-size: 26px; line-height: 1; cursor: pointer; }
.alimtalk-guide-modal__eyebrow { font-size: 12px; letter-spacing: 0.18em; color: #8b5cf6; font-weight: 700; margin-bottom: 8px; }
.alimtalk-guide-modal__title { margin: 0; font-size: 26px; line-height: 1.3; color: #111827; font-weight: 800; }
.alimtalk-guide-modal__desc { margin: 12px 0 20px; font-size: 15px; line-height: 1.7; color: #6b7280; }
.alimtalk-guide-list { display: grid; gap: 10px; }
.alimtalk-guide-item { border: 1px solid #eef0f4; border-radius: 16px; padding: 14px; background: #fafbff; }
.alimtalk-guide-item__label { font-size: 13px; color: #8b5cf6; font-weight: 700; margin-bottom: 8px; }
.alimtalk-guide-item__good { font-size: 14px; color: #111827; margin-bottom: 4px; }
.alimtalk-guide-item__bad { font-size: 13px; color: #9ca3af; }
.alimtalk-guide-sample { margin-top: 16px; border-radius: 18px; background: #f6f7fb; padding: 16px; }
.alimtalk-guide-sample__title { font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.alimtalk-guide-sample__body { font-size: 14px; line-height: 1.7; color: #374151; }
.alimtalk-guide-modal__foot { margin-top: 20px; display: flex; justify-content: flex-end; }
.alimtalk-guide-modal__confirm { border: 0; border-radius: 999px; background: #111827; color: #fff; padding: 12px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.alimtalk-preview-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.alimtalk-preview-tab { border: 1px solid #e5e7eb; background: #fff; color: #4b5563; border-radius: 999px; padding: 9px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.alimtalk-preview-tab.is-active { background: #111827; border-color: #111827; color: #fff; }
.alimtalk-preview-stage { background: #f6f7fb; border-radius: 20px; padding: 18px; }
.alimtalk-preview-card { display: none; max-width: 460px; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); border: 1px solid rgba(226, 232, 240, 0.9); }
.alimtalk-preview-card.is-active { display: block; }
.alimtalk-preview-channel { display: inline-flex; align-items: center; margin-bottom: 10px; padding: 5px 9px; border-radius: 999px; background: #ffeb00; color: #111; font-size: 12px; font-weight: 600; }
.alimtalk-preview-sub { font-size: 12px; color: #9ca3af; margin-bottom: 4px; }
.alimtalk-preview-title { font-size: 18px; line-height: 1.35; color: #111827; font-weight: 700; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef0f4; }
.alimtalk-preview-body { font-size: 14px; line-height: 1.75; color: #374151; }
.alimtalk-preview-button { display: block; margin-top: 14px; width: 100%; padding: 11px 14px; border-radius: 12px; background: #f3f4f6; color: #111827; text-align: center; font-size: 13px; font-weight: 700; border: 1px solid #e5e7eb; text-decoration: none; }
.customers-card--alimtalk-guide-card { display: flex; flex-direction: row; gap: 15px}
.alimtalk-preview-emoji { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-left: 2px; }
.alimtalk-guide-head { display: flex; flex-direction: row; justify-content: space-between; }
@media (max-width:640px) {
  .alimtalk-guide-head { flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0; }
  .alimtalk-guide-head div:nth-child(2) { align-self: flex-end; }
  .alimtalk-guide-actions { margin-top: 0; }
  .alimtalk-preview-card { max-width: none; }
  .alimtalk-guide-modal { padding: 18px; align-items: flex-start; }
  .alimtalk-guide-modal__panel { width: 100%; margin: 24px 0; padding: 24px 20px; border-radius: 22px; }
  .alimtalk-guide-modal__title { font-size: 23px; }
}

.july-nav a { position: relative; }
.july-nav a .july-nav-notice-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: linear-gradient(135deg, #ff315f 0%, #ff7aa2 100%); color: #fff; font-size: 11px; line-height: 1; font-style: normal; font-weight: 900; box-shadow: 0 8px 18px rgba(255, 49, 95, 0.28), 0 0 0 4px rgba(255, 49, 95, 0.10); }

.july-nav a { gap: 11px; }
.july-nav-icon { width: 30px; height: 30px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); transition: all .2s ease; }
.july-nav-icon svg { width: 18px; height: 18px; display: block; }
.july-nav-text { flex: 1 1 auto; min-width: 0; }
.july-nav a:hover .july-nav-icon { color: #fff; background: rgba(255, 255, 255, 0.11); }
.july-nav a.is-active .july-nav-icon { color: #fff; background: linear-gradient(135deg, rgba(103, 184, 255, 0.22), rgba(138, 125, 255, 0.18), rgba(239, 154, 215, 0.18)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 22px rgba(103, 184, 255, 0.10); }
.july-nav a.is-active { position: relative; }
.july-nav a.is-active::after { content: ""; position: absolute; left: -2px; top: 13px; bottom: 13px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); box-shadow: 0 0 14px rgba(138, 125, 255, 0.52); }

@supports (height:100dvh) {
    .alimtalk-guide-modal { min-height: 100dvh; }
}

.alimtalk-guide-modal { position: fixed; inset: 0; z-index: 9999; display: none; padding: 24px; overflow: hidden; align-items: center; justify-content: center; }
.alimtalk-guide-modal.is-open { display: flex; }
.alimtalk-guide-modal__backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.56); backdrop-filter: blur(5px); }
.alimtalk-guide-modal__panel { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; margin: 0; background: #fff; border-radius: 26px; padding: 30px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24); }
.alimtalk-guide-modal__desc, .alimtalk-guide-list, .alimtalk-guide-sample { flex: 0 0 auto; }
.alimtalk-guide-list, .alimtalk-guide-sample { min-height: 0; }
.alimtalk-guide-modal__scroll { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 6px; }

.customers-live-capture-btn { background: #6756ff; }
@media (max-width:767px) {
  .capture_box { display: flex; flex-direction: column; justify-content: space-between; gap: 0;}
  .capture_box div:nth-child(2) { align-self: flex-end; }
}

#customerLiveCaptureModal { position: fixed; inset: 0; z-index: 9999; }
#customerLiveCaptureModal[hidden] { display: none !important; }
#customerLiveCaptureModal .july-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
#customerLiveCaptureModal .july-modal__dialog { position: absolute; top: 50%; left: 50%; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; transform: translate(-50%, -50%); background: #fff; border-radius: 24px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22); }
#customerLiveCaptureModal .customers-live-capture-guide__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#customerLiveCaptureModal .customers-live-capture-guide__notice { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #f8fafc; color: #64748b; font-size: 13px; line-height: 1.6; }
.myinfo-btn--dark:hover {color: #fff;}

.capture--naver img, .capture--insta img {width: 18px; margin-right: 6px; border-radius: 6px;}

/* =========================
   LIVE CAPTURE INSTALL BOX
========================= */

.customers-live-capture-install { display: block; margin: 0 0 20px; padding: 22px 24px; border-radius: 22px; background: radial-gradient(circle at 0% 0%, rgba(103, 184, 255, 0.18), transparent 34%), radial-gradient(circle at 100% 0%, rgba(239, 154, 215, 0.18), transparent 34%), #f8faff; border: 1px solid rgba(138, 125, 255, 0.16); box-sizing: border-box; }
.customers-live-capture-install__body { width: 100%; min-width: 0; }
.customers-live-capture-install__title { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; color: #101426; font-size: 17px; line-height: 1.35; font-weight: 900; letter-spacing: -0.03em; }
.customers-live-capture-install__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 16px; background: transparent; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 12px 26px rgba(15, 22, 48, 0.14); }
.customers-live-capture-install__icon img { width: 46px; height: 46px; object-fit: contain; display: block; }
.customers-live-capture-install__body p { margin: 0; color: #667085; font-size: 14px; line-height: 1.7; font-weight: 700; }
.customers-live-capture-install__actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.customers-live-capture-install__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; min-width: 190px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #ffffff; color: #101426; border: 1px solid rgba(20, 30, 60, 0.10); font-size: 14px; line-height: 1; font-weight: 900; text-decoration: none; box-shadow: 0 12px 26px rgba(15, 22, 48, 0.10); box-sizing: border-box; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.customers-live-capture-install__btn:hover { transform: translateY(-1px); border-color: rgba(66, 133, 244, 0.28); box-shadow: 0 16px 32px rgba(66, 133, 244, 0.16); color: #101426; text-decoration: none; }
.customers-live-capture-install__google-icon { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #fff; }
.customers-live-capture-install__google-icon svg { width: 18px; height: 18px; display: block; }
.customers-live-capture-install__actions > span:not(.customers-live-capture-install__google-icon) { flex: 1 1 auto; min-width: 0; color: #8a91a6; font-size: 13px; line-height: 1.6; font-weight: 800; }
.customers-live-capture-install__btn.is-installed { background: #101426; color: #fff; border-color: #101426; opacity: 0.78; pointer-events: none; }
/* 실시간 캡처 모달은 PC 기능이라 PC에서 살짝 넓게 */
@media (min-width:768px) {
    #customerLiveCaptureModal .july-modal__dialog--md { width: 620px; max-width: calc(100vw - 48px); }
}
@media (max-width:640px) {
    .customers-live-capture-install { padding: 16px; border-radius: 20px; }
    .customers-live-capture-install__title { gap: 12px; font-size: 16px; }
    .customers-live-capture-install__icon, .customers-live-capture-install__icon img { width: 42px; height: 42px; }
    .customers-live-capture-install__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .customers-live-capture-install__btn { width: 100%; min-width: 0; }
    .customers-live-capture-install__actions > span:not(.customers-live-capture-install__google-icon) { text-align: center; font-size: 12px; }
}

.customers-live-capture-install.is-installed { padding: 20px 24px; background: radial-gradient(circle at 0% 0%, rgba(103, 184, 255, 0.16), transparent 34%), radial-gradient(circle at 100% 0%, rgba(239, 154, 215, 0.16), transparent 34%), #f8faff; }
.customers-live-capture-install.is-installed .customers-live-capture-install__title { margin-bottom: 0; }
.customers-live-capture-install.is-installed .customers-live-capture-install__title::after { content: "READY"; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; margin-left: 10px; padding: 0 10px; border-radius: 999px; background: linear-gradient(135deg, #37c978 0%, #60d394 100%); color: #fff; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: 0.08em; box-shadow: 0 8px 18px rgba(55, 201, 120, 0.22), 0 0 0 4px rgba(55, 201, 120, 0.10); }


/* =========================
   JULY PRICING GUIDE BOX
========================= */

.july-pricing-guide-box {padding: 28px; border-radius: 28px; background: radial-gradient(circle at 0% 0%, rgba(103, 184, 255, 0.14), transparent 34%), radial-gradient(circle at 100% 0%, rgba(239, 154, 215, 0.14), transparent 34%), rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 30, 60, 0.07); box-shadow: 0 18px 50px rgba(22, 28, 45, 0.08); }
.july-pricing-guide-box__head { margin-bottom: 20px; }
.july-pricing-guide-box__eyebrow { display: inline-flex; align-items: center; min-height: 28px; margin-bottom: 10px; padding: 0 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.14), rgba(239, 154, 215, 0.14)); color: #5d54d6; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; }
.july-pricing-guide-box__head h3 { margin: 0 0 8px; color: #0f1630; font-size: 26px; line-height: 1.28; letter-spacing: -0.04em; font-weight: 900; }
.july-pricing-guide-box__head p { margin: 0; color: #687089; font-size: 15px; line-height: 1.7; font-weight: 700; }
.july-pricing-guide-box__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.july-pricing-guide-card { position: relative; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid rgba(20, 30, 60, 0.08); box-shadow: 0 12px 28px rgba(15, 22, 48, 0.06); }
.july-pricing-guide-card.is-pro { border-color: rgba(138, 125, 255, 0.24); background: radial-gradient(circle at 100% 0%, rgba(138, 125, 255, 0.12), transparent 34%), #fff; }
.july-pricing-guide-card__badge { display: inline-flex; align-items: center; min-height: 28px; margin-bottom: 12px; padding: 0 11px; border-radius: 999px; background: rgba(15, 22, 48, 0.06); color: #0f1630; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: 0.08em; }
.july-pricing-guide-card.is-pro .july-pricing-guide-card__badge { background: linear-gradient(90deg, #67b8ff 0%, #8a7dff 52%, #ef9ad7 100%); color: #fff; box-shadow: 0 10px 22px rgba(125, 120, 255, 0.20); }
.july-pricing-guide-card h4 { margin: 0 0 12px; color: #0f1630; font-size: 20px; line-height: 1.35; letter-spacing: -0.035em; font-weight: 900; }
.july-pricing-guide-card p { margin: 0; color: #5f687f; font-size: 14px; line-height: 1.75; font-weight: 700; word-break: keep-all; }
.july-pricing-guide-card span { font-size: 13px; font-weight: 800; color: var(--july-purple); word-break: keep-all; }
.july-pricing-guide-card p + p { margin-top: 10px; }
.july-pricing-year-tip p + p { margin-top: 6px; }
.july-pricing-year-tip > div { max-width: 860px; }
.july-pricing-year-tip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(90deg, rgba(103, 184, 255, 0.11), rgba(239, 154, 215, 0.11)); border: 1px solid rgba(138, 125, 255, 0.13); }
.july-pricing-year-tip strong { display: block; margin-bottom: 5px; color: #0f1630; font-size: 16px; line-height: 1.4; font-weight: 900; letter-spacing: -0.03em; }
.july-pricing-year-tip p { margin: 0; color: #687089; font-size: 13px; line-height: 1.65; font-weight: 700; }
.july-pricing-year-tip {
    position: relative;
}

.july-pricing-year-tip__btn { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: #0f1630; color: #fff; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 10px 22px rgba(15, 22, 48, 0.16); transition: transform .18s ease, box-shadow .18s ease; }
.july-pricing-year-tip__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 22, 48, 0.22); }
.july-pricing-year-toast { position: absolute; right: 18px; bottom: 104px; z-index: 20; width: 260px; padding: 15px 16px; border-radius: 18px; background: rgba(15, 22, 48, 0.96); color: #fff; box-shadow: 0 18px 42px rgba(15, 22, 48, 0.24); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; }
.july-pricing-year-toast::after { content: ""; position: absolute; right: 34px; bottom: -7px; width: 14px; height: 14px; background: rgba(15, 22, 48, 0.96); transform: rotate(45deg); }
.july-pricing-year-toast.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.july-pricing-year-toast strong { display: block; margin-bottom: 7px; color: #fff; font-size: 14px; line-height: 1.35; font-weight: 900; letter-spacing: -0.02em; }
.july-pricing-cancel-tip span { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; margin-bottom: 10px; padding: 0 10px; border-radius: 999px; background: linear-gradient(135deg, #37c978 0%, #60d394 100%); color: #fff; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: 0.08em}
.july-pricing-year-toast p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 13px; line-height: 1.65; font-weight: 700; }
.july-pricing-year-toast b { color: #ffd66b; font-weight: 900; }
@media (max-width:640px) {
    .july-pricing-year-tip__btn { width: 100%; justify-content: center; }
    .july-pricing-year-toast { right: 50%; bottom: 68px; width: min(260px, calc(100vw - 52px)); transform: translate(50%, 8px); }
    .july-pricing-year-toast.is-show { transform: translate(50%, 0); }
    .july-pricing-year-toast::after { right: 50%; margin-right: -7px; }
    .july-onboarding-head p { margin: 0 }
}
@media (max-width:900px) {
    .july-pricing-guide-box { padding: 22px; border-radius: 24px; }
    .july-pricing-guide-box__grid { grid-template-columns: 1fr; }
    .july-pricing-year-tip { flex-direction: column; align-items: flex-start; }
}
@media (max-width:640px) {
    .july-pricing-guide-box { padding: 18px; }
    .july-pricing-guide-box__head h3 { font-size: 22px; }
    .july-pricing-guide-card { padding: 18px; }
    .july-pricing-guide-card h4 { font-size: 18px; }
}


/* =========================
   JULY MOBILE MODAL SCROLL FIX
   - Safari safe
   - append only
========================= */
@media (max-width:767px){

  body.is-july-guide-open,
  body.is-july-terms-open,
  body.is-july-instagram-guide-open,
  body.is-july-modal-open,
  body.is-july-confirm-open{
    overflow:hidden!important;
    touch-action:none!important;
  }

  /* 1) 온보딩 정보 입력 모달 */
  .july-onboarding-overlay{
    align-items:stretch!important;
    justify-content:center!important;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    overflow:hidden!important;
  }

  .july-onboarding-modal{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:760px!important;
    max-height:none!important;
    height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }

  .july-onboarding-head{
    flex:0 0 auto!important;
    padding:24px 20px 16px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(20,30,60,.08)!important;
  }

  .july-onboarding-form{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 20px 20px!important;
  }

  .july-onboarding-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:3!important;
    margin:18px -20px -20px!important;
    padding:14px 20px calc(env(safe-area-inset-bottom, 0px) + 16px)!important;
    background:#fff!important;
    border-top:1px solid rgba(20,30,60,.08)!important;
  }

  /* 2) 온보딩/키워드 도움말 작은 모달 */
  .onboarding-guide-modal[hidden]{
    display:none!important;
  }

  .onboarding-guide-modal:not([hidden]){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px)!important;
    overflow:hidden!important;
  }

  .onboarding-guide-modal__panel{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:420px!important;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    padding:24px 20px 20px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  .onboarding-guide-modal__close{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    z-index:5!important;
  }

  /* 3) 공통 이용가이드 / 문의 상세 모달 */
  .july-guide-modal{
    position:fixed!important;
    inset:0!important;
    z-index:100004!important;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .july-guide-modal[aria-hidden="true"]{
    display:none!important;
  }

  .july-guide-modal[aria-hidden="false"]{
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
  }

  .july-guide-modal__dialog{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:760px!important;
    height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
    background:#fff!important;
  }

  .july-guide-modal__close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:9!important;
  }

  .july-guide-modal__head{
    flex:0 0 auto!important;
    padding:24px 52px 16px 20px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(20,30,60,.08)!important;
  }

  .july-guide-modal__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 20px 22px!important;
  }

  /* 4) 약관 모달 */
  .july-terms-modal{
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .july-terms-modal[aria-hidden="true"]{
    display:none!important;
  }

  .july-terms-modal[aria-hidden="false"]{
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
  }

  .july-terms-modal__dialog{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:760px!important;
    height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
    background:#fff!important;
  }

  .july-terms-modal__close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:9!important;
  }

  .july-terms-modal__head{
    flex:0 0 auto!important;
    padding:24px 52px 16px 20px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(20,30,60,.08)!important;
  }

  .july-terms-modal__content{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 20px!important;
  }

  .july-terms-modal__actions{
    flex:0 0 auto!important;
    padding:14px 20px calc(env(safe-area-inset-bottom, 0px) + 16px)!important;
    background:#fff!important;
    border-top:1px solid rgba(20,30,60,.08)!important;
  }

  /* 5) 인스타 프로계정 안내 모달 */
  .july-instagram-guide-modal{
    position:fixed!important;
    inset:0!important;
    z-index:100004!important;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .july-instagram-guide-modal[aria-hidden="true"]{
    display:none!important;
  }

  .july-instagram-guide-modal[aria-hidden="false"]{
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
  }

  .july-instagram-guide-modal__dialog{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:620px!important;
    height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
    background:#fff!important;
  }

  .july-instagram-guide-modal__close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:9!important;
  }

  .july-instagram-guide-modal__head{
    flex:0 0 auto!important;
    padding:24px 52px 16px 20px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(20,30,60,.08)!important;
  }

  .july-instagram-guide-modal__content{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 20px!important;
  }

  .july-instagram-guide-modal__actions{
    flex:0 0 auto!important;
    padding:14px 20px calc(env(safe-area-inset-bottom, 0px) + 16px)!important;
    background:#fff!important;
    border-top:1px solid rgba(20,30,60,.08)!important;
  }

  /* 6) 고객관리 큰 공통 모달 */
  #customerReviewRequestModal,
  #customerCrmSubscribeModal{
    align-items:stretch!important;
    justify-content:center!important;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    overflow:hidden!important;
  }

  #customerReviewRequestModal .july-modal__dialog,
  #customerCrmSubscribeModal .july-modal__dialog{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:540px!important;
    height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }

  #customerReviewRequestModal .july-modal__close,
  #customerCrmSubscribeModal .july-modal__close{
    top:14px!important;
    right:14px!important;
    z-index:9!important;
  }

  #customerReviewRequestModal .july-modal__head,
  #customerCrmSubscribeModal .july-modal__head{
    flex:0 0 auto!important;
    padding:26px 52px 14px 20px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(20,30,60,.08)!important;
  }

  #customerReviewRequestModal .july-modal__body,
  #customerCrmSubscribeModal .july-modal__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 20px 22px!important;
  }

    /* 7) 고객관리 실시간 캡쳐 모달 */
  #customerLiveCaptureModal{
    align-items:stretch!important;
    justify-content:center!important;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px)!important;
    overflow:hidden!important;
  }

  #customerLiveCaptureModal .july-modal__dialog,
  #customerLiveCaptureModal .july-modal__dialog--md{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:540px!important;
    height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }

  #customerLiveCaptureModal .july-modal__close{
    top:14px!important;
    right:14px!important;
    z-index:9!important;
  }

  #customerLiveCaptureModal .july-modal__head{
    flex:0 0 auto!important;
    padding:26px 52px 14px 20px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(20,30,60,.08)!important;
  }

  #customerLiveCaptureModal .july-modal__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 20px 22px!important;
  }

  #customerLiveCaptureModal .july-modal__actions{
    flex:0 0 auto!important;
    padding:14px 20px calc(env(safe-area-inset-bottom, 0px) + 16px)!important;
    background:#fff!important;
    border-top:1px solid rgba(20,30,60,.08)!important;
  }
}