/* ── 디자인 토큰 ──────────────────────────────────────────────────────
   버튼 모양이 8·9·10·12·14px 로 제각각이고 여백도 16·18·22·26px 로 섞여 있었다.
   여기서 한 번만 정하고 아래에서는 이 값을 쓴다. 새 규칙을 만들 때도 이 척도 안에서
   고른다 — 눈대중으로 숫자를 새로 만들지 않는다. */
:root {
  /* 간격: 4의 배수 한 척도 */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px;
  /* 모서리: 컨트롤 / 카드 / 알약 세 가지만 */
  --r-ctl: 10px; --r-card: 14px; --r-pill: 999px;
  /* 글자 위계: 제목 / 라벨 / 본문 / 보조 */
  --t-title: 1.05rem; --t-label: .9rem; --t-body: .95rem; --t-note: .78rem;
  /* 색 역할 */
  --c-ink: #0f172a; --c-body: #334155; --c-mute: #64748b; --c-faint: #94a3b8;
  --c-line: #e2e8f0; --c-brand: #2563eb; --c-danger: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* .actions 등의 display 규칙이 hidden을 덮어쓰지 않게 */
body {
  font-family: 'Noto Sans CJK KR', 'NanumSquare', system-ui, sans-serif;
  background: #f4f6fb; color: #1f2937; min-height: 100vh;
}
.wrap { position: relative; max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
/* 앱바 — 예전에는 가운데 제목 위에 버튼을 절대배치해서 제목과 겹쳐 답답했다.
   한 줄 플렉스로 바꿔 마크·이름·동작이 서로 밀지 않게 한다. */
.app-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand-mark {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-card);
  display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
  background: linear-gradient(135deg, #3b82f6, #2563eb 45%, #7c3aed);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
.brand-text { min-width: 0; }
h1 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; }
.sub { text-align: center; color: #6b7280; font-size: .85rem; margin: 6px 0 24px; }
.app-head .sub { text-align: left; margin: 2px 0 0; font-size: .8rem; }
.header-actions { margin-left: auto; display: flex; gap: 7px; z-index: 42; }
.header-actions .header-icon {
  display: grid; place-items: center; width: 42px; height: 42px; min-width: 42px; padding: 0;
  border: 1px solid #dbe3ee; border-radius: var(--r-card); background: rgba(255,255,255,.94);
  box-shadow: 0 2px 9px rgba(30,41,59,.08); color: #334155;
}
.header-actions .header-icon:active { background: #eff6ff; }
.hamburger { gap: 4px; align-content: center; }
.hamburger span { display: block; width: 18px; height: 2px; border-radius: 99px; background: #334155;
  transition: transform .18s ease, opacity .18s ease; }
.hamburger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

.panel {
  background: #fff; border-radius: var(--r-card); padding: 24px;
  box-shadow: 0 2px 12px rgba(30, 41, 59, .08);
  display: flex; flex-direction: column; gap: 16px;
}
.field { display: flex; flex-direction: column; gap: var(--sp2); border: 0; }
/* 라벨이 본문과 같은 굵기·색이라 훑어볼 수가 없었다. 라벨은 진하고 작게,
   설명은 흐리게 — 두 단계로 벌린다. */
.field > span {
  font-weight: 800; font-size: var(--t-label); color: var(--c-ink);
  letter-spacing: -.01em;
}
input[type=text], select {
  padding: 12px 14px; border: 1.5px solid #d1d5db; border-radius: var(--r-ctl);
  font-size: 1rem; background: #fff;
}
input[type=text]:focus, select:focus { outline: none; border-color: #2563eb; }
/* 색상 칩 — 예전에는 conic-gradient 라 파이 조각처럼 잘려 보였다. 부드러운 대각
   그라데이션이 "이 팔레트의 색들"을 더 자연스럽게 보여 준다. 선택은 파란 상자 대신
   칩 자체에 링과 체크로 표시해 무엇이 골라졌는지 한눈에 들어오게 했다. */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 12px 8px; }
/* 칩 자체는 40px이지만 누르는 자리는 44px을 준다 — 편집기와 같은 기준. */
.palette .swatch {
  padding: 0; border: 0; border-radius: var(--r-card); background: none;
  display: grid; place-items: center; min-height: 44px;
}
/* 색 이름은 화면에서 감추되 스크린리더에는 남긴다(툴팁은 title 이 맡는다). */
.palette .swatch-name {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.palette .swatch .dot {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, var(--c1), var(--c2) 58%, var(--c3));
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1), 0 1px 3px rgba(15, 23, 42, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.palette .swatch.sel { color: #0f172a; }
.palette .swatch.sel .dot {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c1), 0 2px 8px rgba(15, 23, 42, .18);
}
.palette .swatch.sel .dot::after {
  content: ""; position: absolute; left: 13px; top: 10px;
  width: 9px; height: 16px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .45));
}
/* 「+」 칸 — 팔레트 칩과 같은 자리·같은 크기로 두되, 점선과 ＋ 로 「고른 색이
   아니라 고르러 가는 곳」임을 구분한다. 색을 넣고 나면 그 색을 그대로 보여 준다. */
.palette .swatch-add {
  padding: 0; border: 0; border-radius: var(--r-card); background: none;
  display: grid; place-items: center; cursor: pointer; min-height: 44px;
}
.palette .swatch-add .dot {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px dashed var(--c-mute, #94a3b8); background: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.palette .swatch-add .dot::before {
  content: "＋"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1; color: var(--c-mute, #94a3b8);
}
/* 연속 색상을 고른 뒤에는 점선을 걷고 그 색 자체가 된다 — 팔레트 칩과 같은 규칙.
   --cc 는 이 칸 전용이다. --c-pick 은 이미 전역 디자인 토큰이라 쓰면 안 된다. */
.palette .swatch-add.has-color .dot {
  border: 0; background: var(--cc, #2563eb);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1), 0 1px 3px rgba(15, 23, 42, .12);
}
.palette .swatch-add.has-color .dot::before { content: none; }
.palette .swatch-add.sel .dot {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cc, #2563eb), 0 2px 8px rgba(15, 23, 42, .18);
}
.palette .swatch-add.sel .dot::after {
  content: ""; position: absolute; left: 13px; top: 10px;
  width: 9px; height: 16px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .45));
}
.custom-color-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: var(--r-card); background: #f8fafc;
}
.custom-color-row[hidden] { display: none; }
.custom-color-row.sel { border-color: #2563eb; background: #eff6ff; }
.custom-color-picker { display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .8rem; font-weight: 700; white-space: nowrap; }
/* 색 우물은 네모난 기본 컨트롤 대신 팔레트 칩과 같은 원형으로 맞춘다. */
.custom-color-picker input[type=color] { width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .12); }
.custom-color-picker input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color-picker input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.custom-color-row input[type=text] { flex: 1; min-width: 94px; max-width: 130px;
  padding: 9px 10px; border-radius: var(--r-ctl); font-size: .82rem; font-family: ui-monospace, monospace;
  text-transform: uppercase; }
.custom-color-row button { padding: 9px 11px; border-radius: var(--r-ctl); font-size: .78rem; }
.field-hint { font-size: var(--t-note); color: var(--c-mute); line-height: 1.5; }
.field-hint.warn { color: #b45309; font-weight: 700; }
.font-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.font-picker-row select { min-width: 0; }
.font-picker-row button { padding: 9px 11px; font-size: .78rem; white-space: nowrap; }
.font-file-label { display: flex; flex-direction: column; gap: 7px; font-size: .86rem;
  font-weight: 700; color: #374151; }
.font-file-label input { width: 100%; padding: 9px; border: 1px dashed #94a3b8;
  border-radius: var(--r-ctl); background: #f8fafc; }
.font-license-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px;
  font-size: .82rem; line-height: 1.45; color: #475569; }
.font-license-check input { flex: none; margin-top: 3px; }
.uploaded-font-list { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.uploaded-font-row { display: flex; gap: 8px; align-items: center; padding: 9px 10px;
  border: 1px solid #e2e8f0; border-radius: var(--r-ctl); }
.uploaded-font-row .meta { flex: 1; min-width: 0; }
.uploaded-font-row strong, .uploaded-font-row small { display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.uploaded-font-row small { color: #64748b; font-size: .7rem; margin-top: 2px; }
.uploaded-font-row button { padding: 6px 9px; font-size: .75rem; color: #b91c1c; }
@media (max-width: 620px) {
  .font-picker-row { grid-template-columns: 1fr 1fr; }
  .font-picker-row select { grid-column: 1 / -1; }
}

.styles { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.styles label { display: flex; align-items: center; gap: 6px; font-size: .95rem; cursor: pointer; }

/* 버튼은 **3종만** 쓴다 — 주(primary) / 보조(기본) / 조용(ghost).
   예전에는 파란 채움·흰 테두리·연파랑·회색 알약이 규칙 없이 섞여, 같은 줄에 있는
   버튼끼리도 무엇이 중요한지 알 수 없었다. */
button {
  padding: 13px 20px; border: 1.5px solid #d8dee7; border-radius: var(--r-ctl);
  font-size: var(--t-body); font-weight: 700; background: #fff; color: var(--c-body);
  cursor: pointer; transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
button:active { transform: scale(.985); }
button.primary {
  background: var(--c-brand); border-color: var(--c-brand); color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
button.primary:active { background: #1d4ed8; }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.status { font-size: .85rem; color: #6b7280; text-align: center; min-height: 1.2em; }

.divider { border: 0; border-top: 1px solid #e5e7eb; margin: 28px 0; }

.auth { margin-bottom: 16px; }
.auth #authForms { display: flex; flex-direction: column; gap: 8px; }
.auth .google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; font-size: .95rem; background: #fff;
}
.auth .google .g { color: #4285F4; font-weight: 900; font-size: 1.1rem; }
.auth .pw-fallback summary { font-size: .8rem; color: #6b7280; cursor: pointer; padding: 4px 2px; }
.auth .pw-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.auth input { flex: 1; min-width: 110px; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); font-size: .95rem; }
.auth button { padding: 10px 14px; font-size: .9rem; }
/* 로그인 계정 정보는 상단 햄버거 안에 넣는다. 공유 버튼은 헤더의 독립 아이콘이다. */
.auth #authInfo {
  position: absolute; top: 82px; right: 16px; z-index: 41;
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  width: min(280px, calc(100% - 32px)); padding: 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-card);
  box-shadow: 0 14px 36px rgba(15,23,42,.18); font-size: .92rem;
  max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain;
}
.account-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.account-summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.account-language { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 4px; }
.account-language > span { color: #334155; font-size: .8rem; font-weight: 800; }
.account-language small { color: #64748b; font-size: .67rem; line-height: 1.4; }
.account-language .language-select { width: 100%; margin: 0; padding: 9px 34px 9px 11px;
  border: 1.5px solid #ddd6fe; border-radius: var(--r-ctl); background-color: #f5f3ff;
  color: #312e81; font-size: .8rem; font-weight: 700; cursor: pointer; }
.account-language .language-select:focus { outline: none; border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.auth #authInfo button { width: 100%; padding: 10px 12px; font-size: .82rem; }
.auth #authInfo .account-contact { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
  font-weight: 700; }
.auth #authInfo .account-logout { background: #f8fafc; color: #475569; }
.auth .status { margin-top: 4px; }
.plan-badge { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; font-weight: 700;
  font-size: .78rem; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.plan-badge.app { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.plan-badge.studio { background: linear-gradient(135deg, #34d399, #059669); }
.plan-badge.pro { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.sub-btn { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; border: none;
  font-weight: 700; border-radius: var(--r-pill); white-space: nowrap; cursor: pointer; }
.sub-btn:active { filter: brightness(.92); }
.sub-menu { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.sub-card { background: #fff; border-radius: var(--r-card); padding: 20px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.sub-card h3 { font-size: 1.05rem; text-align: center; margin-bottom: 4px; }
.sub-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1.5px solid #f59e0b; background: #fffbeb; border-radius: var(--r-card); padding: 12px 14px;
  font-weight: 700; font-size: .95rem; cursor: pointer; }
.sub-opt small { font-weight: 400; color: #6b7280; font-size: .78rem; }
.sub-opt.app-plan { border-color: #2563eb; background: #eff6ff; }
.sub-opt.studio { border-color: #059669; background: #ecfdf5; }
.sub-opt.pro { border-color: #7c3aed; background: #f5f3ff; }
.sub-opt.pack { border-color: #0891b2; background: #ecfeff; }
.sub-opt:active { filter: brightness(.95); }
.sub-opt:disabled { opacity: .58; cursor: wait; filter: grayscale(.12); }
.sub-opt.current-product { opacity: .66; cursor: default; box-shadow: inset 0 0 0 2px #64748b; }
.current-plan-change { margin: -2px 0 2px; padding: 9px 11px; border-radius: var(--r-ctl);
  background: #f1f5f9; color: #475569; font-size: .8rem; line-height: 1.45; }
.feature-table-open { padding: 11px 12px; border: 1px solid #bfdbfe; background: #eff6ff;
  color: #1d4ed8; border-radius: var(--r-ctl); font-size: .86rem; font-weight: 700; cursor: pointer; }
.subscription-manage { padding: 10px 12px; border: 1px solid #cbd5e1; background: #fff;
  color: #334155; border-radius: var(--r-ctl); font-size: .84rem; font-weight: 700; cursor: pointer; }
.sub-close { padding: 10px; border: none; background: #f3f4f6; border-radius: var(--r-ctl); cursor: pointer; }
/* 프로모션 코드 — 결제 버튼과 섞이면 눌러야 할 것이 헷갈리므로 선을 그어 분리한다. */
.promo-box { display: flex; flex-direction: column; gap: 7px; padding-top: 12px;
  border-top: 1px dashed #d1d5db; }
.promo-box > label { font-size: .82rem; font-weight: 800; color: #334155; }
.promo-row { display: flex; gap: 7px; }
.promo-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid #d1d5db;
  border-radius: var(--r-ctl); font: inherit; font-size: .9rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.promo-row input:focus { outline: none; border-color: #2563eb; }
.promo-row button { padding: 10px 16px; border: none; border-radius: var(--r-ctl); background: #2563eb;
  color: #fff; font-weight: 800; font-size: .86rem; cursor: pointer; }
.promo-row button:disabled { background: #94a3b8; cursor: default; }
.promo-msg { margin: 0; font-size: .78rem; line-height: 1.45; color: #b91c1c; }
.promo-msg.ok { color: #047857; font-weight: 700; }
.promo-play { padding: 8px 10px; border: 1px solid #cbd5e1; background: #fff; color: #475569;
  border-radius: var(--r-ctl); font-size: .78rem; font-weight: 700; cursor: pointer; }
.legal-links, .site-footer { display: flex; justify-content: center; gap: 7px; color: #9ca3af;
  font-size: .76rem; }
.legal-links a, .site-footer a { color: #6b7280; }
.site-footer { margin-top: 36px; }

/* 사용자별 기능·처리 방식 공개표 — 가격 메뉴와 같은 내용을 실제 권한 기준으로 펼친다. */
.feature-disclosure { margin: 0 0 18px; border: 1px solid #cbd5e1; border-radius: var(--r-card);
  background: #fff; box-shadow: 0 2px 10px rgba(30,41,59,.06); overflow: hidden; }
.feature-disclosure > summary { padding: 13px 15px; cursor: pointer; color: #1e3a8a;
  font-size: .92rem; font-weight: 800; list-style-position: inside; }
.feature-disclosure[open] > summary { border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.feature-disclosure-body { padding: 16px; }
.feature-disclosure-body h2 { margin: 20px 0 9px; font-size: 1rem; color: #111827; }
.feature-disclosure-body h2:first-of-type { margin-top: 14px; }
.feature-intro, .feature-note { color: #475569; font-size: .82rem; line-height: 1.6; }
.feature-intro b { color: #1d4ed8; }
.feature-note { margin-top: 12px; padding: 11px 12px; border-radius: var(--r-ctl);
  background: #f8fafc; border-left: 3px solid #60a5fa; }
.feature-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #e5e7eb;
  border-radius: var(--r-ctl); -webkit-overflow-scrolling: touch; }
.feature-table { width: 100%; border-collapse: separate; border-spacing: 0; color: #374151;
  font-size: .76rem; line-height: 1.45; }
.plan-feature-table { min-width: 980px; }
.consumer-price-table { min-width: 790px; }
.processing-feature-table { min-width: 980px; }
.feature-table th, .feature-table td { padding: 9px 10px; border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.feature-table tr > :last-child { border-right: 0; }
.feature-table tbody tr:last-child > * { border-bottom: 0; }
.feature-table thead th { background: #eff6ff; color: #1e3a8a; font-weight: 800; }
.feature-table thead .feature-group-head th { background: #dbeafe; text-align: center;
  color: #1e40af; }
.feature-table thead th small { display: block; margin-top: 3px; color: #64748b;
  font-weight: 500; white-space: nowrap; }
.feature-table tbody th { position: sticky; left: 0; z-index: 1; min-width: 142px;
  background: #f8fafc; color: #111827; font-weight: 700; }
.feature-table tbody tr:nth-child(even) td { background: #fcfcfd; }
.feature-table .own-service th, .feature-table .own-service td { background: #eff6ff; }
.feature-table .own-service th { color: #1d4ed8; }
.feature-table .yes { color: #047857; font-weight: 700; }
.feature-table .preview { color: #b45309; font-weight: 700; }
.feature-table .no { color: #9ca3af; }
.feature-table [data-feature-plan].current { background: #dbeafe; box-shadow: inset 0 -3px #2563eb; }
.api-tag { display: inline-block; padding: 2px 6px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: .7rem; font-weight: 800; }
.api-tag.current { color: #047857; background: #d1fae5; }
.api-tag.possible { color: #92400e; background: #fef3c7; }
.api-tag.no-api { color: #475569; background: #e2e8f0; }
.price-source-note a { color: #1d4ed8; font-weight: 700; }

/* 공개 정책 문서 — Play Console URL과 결제창에서 같은 페이지를 연다. */
.policy { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 70px;
  line-height: 1.72; color: #374151; }
.policy h1 { text-align: left; font-size: 1.7rem; margin: 18px 0 2px; color: #111827; }
.policy h2 { font-size: 1.08rem; margin: 30px 0 9px; color: #111827; }
.policy p, .policy li { font-size: .92rem; }
.policy ul { padding-left: 22px; }
.policy li + li { margin-top: 6px; }
.policy-date, .policy-note { color: #6b7280; }
.policy-back { color: #2563eb; font-size: .88rem; }
.policy-action { display: inline-block; padding: 10px 16px; border-radius: var(--r-ctl);
  background: #2563eb; color: #fff; font-weight: 700; text-decoration: none; }
.policy table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff;
  font-size: .83rem; }
.policy th, .policy td { border: 1px solid #e5e7eb; padding: 9px 10px; text-align: left;
  vertical-align: top; }
.policy th { background: #f8fafc; color: #111827; }
@media (max-width: 600px) {
  .policy table { display: block; overflow-x: auto; white-space: normal; }
  .policy th, .policy td { min-width: 120px; }
}
.account-settings { border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
  padding: 7px 0; }
.account-settings > summary { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px; color: #334155; font-size: .82rem; font-weight: 800;
  list-style: none; cursor: pointer; }
.account-settings > summary::-webkit-details-marker { display: none; }
.account-settings > summary::after { content: "›"; color: #94a3b8; font-size: 1.15rem;
  line-height: 1; transform: rotate(90deg); transition: transform .16s ease; }
.account-settings[open] > summary::after { transform: rotate(-90deg); }
.account-settings-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.setting-row { display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--r-card); padding: 12px 14px; box-shadow: 0 2px 10px rgba(30,41,59,.07); }
.setting-row .meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-row .meta strong { font-size: .92rem; }
.setting-row .meta span { font-size: .78rem; color: #6b7280; }
.setting-row button { padding: 9px 14px; font-size: .82rem; flex: none; }
.setting-row button.danger { color: #dc2626; border-color: #fca5a5; }
.subscription-manage-row, .account-delete-row { margin-top: 10px; }
.account-settings .setting-row { flex-wrap: wrap; gap: 7px; padding: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; box-shadow: none; }
.account-settings .setting-row .meta { flex-basis: 100%; }
.account-settings .setting-row .meta strong { font-size: .8rem; }
.account-settings .setting-row .meta span { font-size: .7rem; line-height: 1.4; }
.account-settings .setting-row button { width: auto !important; margin-left: auto; padding: 7px 10px !important;
  font-size: .72rem !important; }
.account-settings .setting-row button + button { margin-left: 0; }
.account-settings .subscription-manage-row, .account-settings .account-delete-row { margin-top: 0; }
.contact-card { max-width: 440px; }
.contact-card > .hint { margin: 0; font-size: .84rem; line-height: 1.5; color: #64748b; }
.contact-field { display: flex; flex-direction: column; gap: 6px; color: #374151;
  font-size: .86rem; font-weight: 700; }
.contact-field input, .contact-field textarea { width: 100%; padding: 11px 12px;
  border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); background: #fff; font: inherit;
  font-weight: 400; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.account-delete-card p { font-size: .9rem; line-height: 1.55; color: #4b5563; }
.delete-confirm-label { display: flex; flex-direction: column; gap: 7px; font-size: .86rem;
  color: #4b5563; }
.delete-confirm-label strong { color: #111827; word-break: break-all; }
#deleteAccountConfirm { width: 100%; padding: 11px 12px; border: 1.5px solid #d1d5db;
  border-radius: var(--r-ctl); font-size: .95rem; }
.danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; }
.danger-solid:disabled { opacity: .45; cursor: default; }
.ai-report-card { max-width: 440px; }
.ai-report-card > .hint { margin: 0; font-size: .82rem; line-height: 1.5; color: #64748b; }
.ai-report-preview { width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--r-ctl);
  border: 1px solid #e2e8f0; background: #f8fafc; }
.ai-report-field { display: flex; flex-direction: column; gap: 6px; color: #374151;
  font-size: .84rem; font-weight: 700; }
.ai-report-field select, .ai-report-field textarea { width: 100%; padding: 10px 11px;
  border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); background: #fff; font: inherit;
  font-weight: 400; resize: vertical; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card {
  background: #fff; border: 2px solid transparent; border-radius: var(--r-card);
  padding: 10px; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(30, 41, 59, .06), 0 6px 16px rgba(30, 41, 59, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:active { transform: scale(.985); }
/* 선택은 파란 테두리 하나로만 알렸는데 눈에 잘 안 띄었다. 링과 살짝 뜬 그림자,
   그리고 오른쪽 위 체크로 "이게 지금 고른 로고"를 분명히 한다. */
.card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 10px 22px rgba(37, 99, 235, .16);
}
.card.selected::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 20px; height: 20px;
  border-radius: 50%; background: #2563eb;
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .4);
}
.card svg { width: 100%; height: auto; display: block; }
/* 예전 태그는 흐린 회색 글씨가 그림 위에 그냥 얹혀 디버그 라벨처럼 보였다.
   반투명 알약으로 띄워 배지처럼 읽히게 한다. */
.card .tag {
  position: absolute; top: 9px; left: 9px; z-index: 1;
  font-size: .66rem; font-weight: 700; letter-spacing: -.01em;
  color: #475569; background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: var(--r-pill);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.card.selected .tag { color: #1d4ed8; }
.card.skeleton { aspect-ratio: 1; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { background: #e5e7eb; } }

.editor { margin-top: 22px; }
.editor .hint { font-size: .8rem; color: #6b7280; text-align: center; margin-bottom: 10px; }
.editor .canvas {
  background: #fff; border-radius: var(--r-card); max-width: 430px; margin: 0 auto;
  box-shadow: 0 2px 10px rgba(30, 41, 59, .07); padding: 8px;
}
.editor .canvas svg { width: 100%; height: auto; display: block; touch-action: none; }
.editor g.el:hover { outline: 1.5px dashed #93c5fd; cursor: move; }
.editor g.el.active { outline: 1.5px dashed #2563eb; }
.edit-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; }
.edit-actions > button { font-size: .85rem; padding: 8px 16px; min-height: 44px; }
.dpad {
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px);
  gap: 5px; justify-content: center;
}
.dpad button {
  padding: 0; font-size: .95rem; border-radius: var(--r-card); touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
.dpad button:active { background: #dbeafe; border-color: #2563eb; }
.dpad .up { grid-area: 1 / 2; }
.dpad .left { grid-area: 2 / 1; }
.dpad .step { grid-area: 2 / 2; font-size: .8rem; color: #2563eb; border-color: #93c5fd; }
.dpad .right { grid-area: 2 / 3; }
.dpad .down { grid-area: 3 / 2; }

.actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.actions button { min-width: 140px; }
.action-group {
  flex: 1 1 100%; min-width: 0; padding: 15px; border: 1px solid #e2e8f0;
  border-radius: var(--r-card); background: #fff; text-align: left;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.action-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.action-group-head strong { color: #1e293b; font-size: .9rem; }
.action-group-head span { color: #64748b; font-size: .7rem; }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.action-grid button { width: 100%; min-width: 0; padding: 11px 8px; font-size: .82rem;
  min-height: 44px; }
/* PNG·SVG는 광고 보상 문구가 붙어 길다. 넓은 화면만 세 칸, 폰에서는 한 줄에 하나씩
   놓아 영문·일문·PT-BR에서도 왼쪽 아이콘과 가운데 문구가 겹치지 않게 한다. */
.save-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.use-grid #openMockup.reward-view { grid-column: 1 / -1; }
.png-opts { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.png-opts label { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: #6b7280; }
.png-opts select { padding: 8px 10px; border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); font-size: .85rem; background: #fff; min-height: 44px; }
.png-opts select:focus { outline: none; border-color: #2563eb; }
@media (max-width: 600px) {
  .action-group { padding: 13px; }
  .action-group-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-grid.save-grid { grid-template-columns: minmax(0, 1fr); }
  .action-grid.save-grid button { padding: 11px 6px; font-size: .78rem; }
  .action-grid.save-grid #saveSlot { grid-column: auto; }
  .use-grid > :last-child { grid-column: 1 / -1; }
  .png-opts { gap: 8px 12px; }
  .png-opts label { flex: 1 1 130px; }
  .png-opts select { flex: 1; min-width: 0; }
}

/* 처리 위치 — 단순 토글이 아니라 적용 범위·실제 위치·API 연결을 한 카드에서 설명한다. */
.runloc-card {
  flex-basis: 100%; width: 100%; margin-top: 6px; padding: 14px;
  border: 1px solid #dbe4ef; border-radius: var(--r-card); background: #f8fafc;
  text-align: left;
}
.runloc-head {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; margin-bottom: 12px;
}
.runloc-icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-ctl); background: #e0e7ff; font-size: 1rem;
}
.runloc-title { display: flex; flex-direction: column; min-width: 0; }
.runloc-title strong { color: #1e293b; font-size: .9rem; }
.runloc-title > span { margin-top: 2px; color: #64748b; font-size: .7rem; line-height: 1.35; }
.runloc-state {
  padding: 5px 9px; border-radius: var(--r-pill); background: #dbeafe; color: #1d4ed8;
  font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.runloc-state.server { background: #dcfce7; color: #047857; }
.runloc {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
}
.runloc.device-only { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.runloc button {
  min-width: 0; padding: 10px 6px; border: 1.5px solid #d7dee8; border-radius: 11px;
  background: #fff; color: #475569; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.runloc button > span { font-size: .8rem; font-weight: 800; white-space: nowrap; }
.runloc button small { color: #7c8798; font-size: .64rem; font-weight: 600; line-height: 1.2; }
.runloc button.on {
  border-color: #2563eb; background: #eff6ff; color: #1d4ed8;
  box-shadow: inset 0 0 0 1px #2563eb;
}
.runloc button.on small { color: #2563eb; }
.runloc button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.runloc-note { margin-top: 10px; color: #334155; font-size: .76rem; line-height: 1.5; }
.runloc-network {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid #e2e8f0; color: #64748b; font-size: .69rem; line-height: 1.45;
}
.runloc-network strong { color: #475569; }
@media (max-width: 380px) {
  .runloc-card { padding: 12px; }
  .runloc-head { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; }
  .runloc-icon { width: 32px; height: 32px; }
  .runloc-state { padding: 4px 7px; font-size: .64rem; }
  .runloc { gap: 5px; }
  .runloc button { padding: 9px 3px; }
  .runloc button > span { font-size: .72rem; }
  .runloc button small { font-size: .59rem; }
}

/* 목업: 장면이 가로로 긴 3:2라 킷보다 넓은 칸을 쓴다 */
.mk-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mk-item .bk-prev { background: none; padding: 0; }
.mk-item .bk-prev svg { border-radius: var(--r-ctl); }
/* 목업 칸은 좁아서 PNG/SVG가 줄바꿈된다 — 이름을 한 줄 차지하게 올려 버튼을 나란히 둔다 */
.mk-item .bk-row > span { flex-basis: 100%; }
.mk-item .bk-row button { padding: 7px 12px; }
.mk-item .bk-vars { margin-right: auto; }
/* 아트 스타일은 생성 전에 보여줄 그림이 없다 — 빈 박스가 세로를 차지하면
   폴더폰(360px)에서 8종을 훑는 데 스크롤이 너무 길어진다. 설명 한 줄 높이만 쓴다. */
#mkArt .bk-prev { border: 0; padding: 0; min-height: 0; }
/* :not([hidden]) 이 없으면 display:block 이 hidden 속성을 이겨서, 숨긴 이미지가
   자리를 차지하고 설명을 옆으로 밀어낸다. */
#mkArt .bk-prev img:not([hidden]) { width: 100%; border-radius: var(--r-ctl); display: block; }
#mkArt .bk-row .hint { flex-basis: 100%; font-size: .8rem; color: #9ca3af; margin: 0 0 6px; }
#mkArt .bk-row .hint.err { color: #b91c1c; font-weight: 600; }
/* 견본 그림 — 데모 심볼로 만든 것이라 "예시"임이 드러나게 살짝 흐리고 라벨을 얹는다 */
#mkArt .art-sample { width: 100%; border-radius: var(--r-ctl); display: block; opacity: .92; }
#mkArt .bk-prev { position: relative; }
#mkArt .bk-prev:has(.art-sample)::after {
  content: "예시"; position: absolute; left: 8px; top: 8px;
  background: rgba(15,23,42,.62); color: #fff; font-size: .7rem;
  padding: 3px 8px; border-radius: var(--r-pill);
}
/* 부분 수정 결과임을 **그림 위에** 밝힌다. 이게 없으면 결과가 원본을 조용히
   덮어써서 "지운 게 어디 갔지" 가 된다(실제 사용자 보고). */
#mkArt .art-edited {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  background: rgba(37,99,235,.9); color: #fff; font-size: .7rem; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-pill);
}
/* 저장하지 않은 수정본이 있는 카드는 저장 버튼을 눈에 띄게 — 닫으면 사라진다 */
#mkArt button.unsaved, #logoFixSave.unsaved {
  background: #2563eb; color: #fff; border-color: #2563eb;
  animation: unsavedPulse 1.6s ease-in-out 3;
}
@keyframes unsavedPulse { 50% { box-shadow: 0 0 0 5px rgba(37,99,235,.22); } }

.saves { margin-top: 30px; }
.saves h2 { font-size: 1.05rem; margin-bottom: 10px; }
.saves .hint { font-size: .82rem; color: #9ca3af; }
.saves ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.saves li {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--r-card); padding: 10px 12px;
  box-shadow: 0 2px 10px rgba(30, 41, 59, .07);
}
.saves .thumb { width: 56px; height: 56px; flex: none; border: 1px solid #e5e7eb; border-radius: var(--r-ctl); overflow: hidden; }
.saves .thumb svg { width: 100%; height: 100%; display: block; }
.saves .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.saves .meta strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saves .meta span { font-size: .75rem; color: #9ca3af; }
.saves li button { padding: 8px 12px; font-size: .8rem; flex: none; }
/* 삭제는 되돌릴 수 없는 동작인데 「불러오기」와 같은 크기·무게라 오히려 더 눈에
   띄었다. 아이콘만 남긴 작은 고스트 버튼으로 낮추고, 누를 때만 빨갛게 만든다.
   좁은 화면에서 줄이 접히던 것도 함께 해결된다. */
.saves li button.danger {
  width: 38px; height: 38px; padding: 0; flex: none;
  border-color: transparent; background: transparent; color: var(--c-faint);
  font-size: 0; position: relative; border-radius: var(--r-pill);
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
/* 누르는 순간 원형 배경이 퍼지며 빨개진다 — 되돌릴 수 없는 동작이라는 신호를
   누를 때만 준다. 평소에는 조용히 있어야 스크롤을 방해하지 않는다. */
.saves li button.danger::after {
  content: ""; position: absolute; inset: 4px; border-radius: var(--r-pill);
  background: currentColor; opacity: 0; transform: scale(.6);
  transition: opacity .16s ease, transform .16s ease;
}
.saves li button.danger:active { transform: scale(.92); }
.saves li button.danger:active::after { opacity: .12; transform: scale(1); }
.saves li button.danger::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--trash) center/contain no-repeat;
          mask: var(--trash) center/contain no-repeat;
  --trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
}
.saves li button.danger:hover, .saves li button.danger:active { color: var(--c-danger); }
.saves h2 a { font-size: .8rem; font-weight: 600; color: #2563eb; text-decoration: none; margin-left: 8px; }

.sub a { color: #2563eb; text-decoration: none; }
.sect { font-size: 1.05rem; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sect small { font-weight: 400; color: #9ca3af; font-size: .78rem; }
.clear-all { margin-left: auto; padding: 6px 12px; font-size: .75rem; color: #dc2626; border-color: #fca5a5; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; }
.pager button { padding: 8px 16px; font-size: .9rem; }
.pager span { font-size: .85rem; color: #6b7280; min-width: 48px; text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gcard {
  background: #fff; border-radius: var(--r-card); padding: 14px;
  box-shadow: 0 2px 12px rgba(30, 41, 59, .08);
  display: flex; flex-direction: column; gap: 10px;
}
.gcard .main-thumb { border: 1px solid #f1f5f9; border-radius: var(--r-card); overflow: hidden; }
.gcard .main-thumb svg { width: 100%; height: auto; display: block; }
.gcard .variants { display: flex; gap: 6px; }
.gcard .variants .v {
  flex: 1; border: 2px solid #e5e7eb; border-radius: var(--r-ctl); overflow: hidden; background: #fff;
}
.gcard .variants .v.sel { border-color: #2563eb; }
.gcard .variants svg { width: 100%; height: auto; display: block; }
.gcard .ginfo { display: flex; flex-direction: column; gap: 2px; }
.gcard .ginfo strong { font-size: .95rem; }
.gcard .ginfo span { font-size: .75rem; color: #9ca3af; }
.gcard .gbtns { display: flex; gap: 8px; }
.gcard .gbtns button { flex: 1; padding: 10px; font-size: .85rem; }
.gcard .gbtns button.danger { color: #dc2626; border-color: #fca5a5; }

.modal-ov {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal {
  background: #fff; border-radius: var(--r-card); padding: 22px; max-width: 340px; width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}
.modal p { font-size: .95rem; line-height: 1.5; word-break: keep-all; }
.modal .mbtns { display: flex; gap: 10px; margin-top: 18px; }
.modal .mbtns button { flex: 1; padding: 11px; font-size: .9rem; }
.modal .mok { background: #dc2626; border-color: #dc2626; color: #fff; }

/* ── 전용 심볼·로고 변형·모션·추천 팔레트 ───────────────────── */
.brand-tool {
  margin-top: 24px; padding: 16px; border-radius: var(--r-card);
  background: #eef4ff; border: 1px solid #cbdcff;
}
.brand-tool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.brand-tool-head h2 { font-size: 1.05rem; margin-bottom: 4px; }
.brand-tool-head p { font-size: .8rem; line-height: 1.5; color: #64748b; }
.brand-tool-head .tool-close { min-width: 0; padding: 4px 9px; border: 0; background: transparent;
  color: #64748b; font-size: 1rem; }
.character-sample {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px 112px; gap: 10px;
  align-items: center; margin-top: 13px; padding: 10px; border: 1px solid #c7d7fe;
  border-radius: var(--r-card); background: rgba(255, 255, 255, .72);
}
.character-sample-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.character-sample-copy > span { width: fit-content; padding: 3px 7px; border-radius: var(--r-pill);
  background: #dbeafe; color: #1d4ed8; font-size: .65rem; font-weight: 800; }
.character-sample figure { margin: 0; min-width: 0; }
.character-sample img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain;
  border: 1px solid #e2e8f0; border-radius: var(--r-ctl); background: #fff; }
.character-sample figcaption { margin-top: 4px; color: #475569; font-size: .64rem;
  font-weight: 700; text-align: center; }
.character-sample-tabs button { width: 100%; min-width: 0; padding: 8px 9px; border-radius: var(--r-ctl);
  color: #475569; background: #fff; font-size: .7rem; text-align: left; }
.character-sample-tabs button.on { border-color: #2563eb; background: #dbeafe;
  color: #1d4ed8; box-shadow: inset 0 0 0 1px #2563eb; }
.character-builder {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px; align-items: start; margin: 14px 0 8px;
}
.character-builder label { display: flex; flex-direction: column; gap: 5px;
  min-width: 0; font-size: .8rem; font-weight: 600; color: #475569; }
.character-builder select, .character-builder input { width: 100%; padding: 9px 10px;
  min-width: 0; min-height: 40px; border: 1px solid #cbd5e1; border-radius: var(--r-ctl);
  background: #fff; }
.character-builder .character-provider, .character-builder .character-brief {
  grid-column: 1 / -1;
}
.character-provider-hint { color: #64748b; font-size: .7rem; font-weight: 500; }
.character-generate { grid-column: 1 / -1; }
.character-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 12px 0; }
.character-output-grid figure { margin: 0; padding: 10px; border: 1px solid #e2e8f0;
  border-radius: var(--r-card); background: #f8fafc; }
.character-output-grid figcaption { margin-bottom: 7px; font-size: .82rem;
  font-weight: 700; color: #334155; }
.character-output-grid img { display: block; width: 100%; border-radius: var(--r-ctl); background: #fff; }
.character-reference { grid-column: 1 / -1; padding: 12px; border: 1px dashed #93c5fd;
  border-radius: var(--r-card); background: #f8fbff; }
.character-reference > label { font-weight: 700; }
.character-reference input[type=file] { margin-top: 6px; background: #fff; }
.character-reference input[type=file]::file-selector-button { margin-right: 9px; padding: 7px 10px;
  border: 0; border-radius: var(--r-ctl); background: #e0e7ff; color: #1e40af; font-weight: 700; }
.character-reference-preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.character-reference-preview img { width: 72px; height: 72px; object-fit: contain;
  border-radius: var(--r-ctl); background: #fff; border: 1px solid #e2e8f0; }
.character-reference-preview span { font-size: .78rem; color: #475569; word-break: break-all; }
.character-reference-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin-top: 10px; }
.character-reference-actions.single-action { grid-template-columns: 1fr; }
.character-reference-actions button { width: 100%; min-width: 0; }
.character-reference small { display: block; margin-top: 8px; color: #64748b;
  font-size: .72rem; line-height: 1.45; }
@media (max-width: 520px) {
  .character-sample { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-sample-copy { grid-column: 1 / -1; }
  .character-builder { grid-template-columns: 1fr; }
  .character-builder label, .character-builder .character-brief,
  .character-builder > button { grid-column: 1; }
  .character-reference-actions { grid-template-columns: 1fr; }
  .character-output-grid { grid-template-columns: 1fr; }
}
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tool-card { background: #fff; border-radius: var(--r-card); padding: 9px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(30,41,59,.07); }
.tool-card.variant-horizontal { grid-column: 1 / -1; }
.tool-preview { border: 1px solid #edf0f5; border-radius: var(--r-ctl); overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center; }
.tool-preview svg { width: 100%; height: auto; display: block; }
.tool-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tool-card-foot strong { flex: 1; font-size: .8rem; color: #334155; }
.tool-card-foot button { min-width: 0; padding: 6px 10px; font-size: .75rem; }
.tool-card.skeleton { min-height: 150px; animation: pulse 1.2s infinite; }
.motion-bar { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; flex-wrap: wrap; }
.motion-bar label { font-size: .82rem; font-weight: 600; color: #475569; }
.motion-bar select { margin-left: 5px; padding: 8px; border: 1px solid #cbd5e1;
  border-radius: var(--r-ctl); background: #fff; }
.motion-bar button { min-width: 130px; padding: 8px 12px; }
.motion-preview { max-width: 390px; margin: 12px auto 0; border-radius: var(--r-card); overflow: hidden;
  background-color: #fff; background-image: linear-gradient(45deg,#eef2f7 25%,transparent 25%),
    linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),
    linear-gradient(-45deg,transparent 75%,#eef2f7 75%); background-size: 24px 24px;
  background-position: 0 0,0 12px,12px -12px,-12px 0; }
.motion-preview svg { width: 100%; height: auto; display: block; }
.palette-info { display: flex; flex-direction: column; gap: 6px; padding: 8px 2px 2px; }
.palette-info strong { font-size: .9rem; }
.palette-info > span { min-height: 2.6em; font-size: .73rem; line-height: 1.4; color: #64748b; }
.color-chips { display: flex; gap: 5px; }
.color-chips i { display: block; flex: 1; height: 28px; border-radius: var(--r-ctl); border: 1px solid rgba(15,23,42,.1); }
.palette-info button { width: 100%; margin-top: 2px; padding: 8px; font-size: .78rem; }
.palette-card.applied { outline: 2px solid #2563eb; }
.spec-color-note { margin-top: 8px; font-size: .72rem; color: #2563eb; line-height: 1.4; }

/* ── 브랜드 킷 ─────────────────────────────────────────────── */
.brandkit { margin-top: 30px; }
.brandkit h2 { font-size: 1.05rem; margin-bottom: 8px; }
.brandkit .hint { font-size: .82rem; color: #6b7280; margin-bottom: 14px; line-height: 1.5; }
.bk-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.bk-contact input {
  padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); font-size: .92rem; width: 100%;
}
.bk-contact input:focus { outline: none; border-color: #2563eb; }
#bkGen { width: 100%; }
.bk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px;
}
.bk-item {
  background: #fff; border-radius: var(--r-card); padding: 10px;
  box-shadow: 0 2px 10px rgba(30, 41, 59, .07);
  display: flex; flex-direction: column; gap: 8px;
}
.bk-item.bk-card, .bk-item.bk-cover, .bk-item.bk-email_sig,
.bk-item.bk-presentation { grid-column: 1 / -1; } /* 가로형은 한 줄 전체 */
.bk-prev {
  border: 1px solid #f1f5f9; border-radius: var(--r-ctl); overflow: hidden; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bk-prev svg { width: 100%; height: auto; display: block; }
.bk-avatar .bk-prev, .bk-favicon .bk-prev { max-width: 160px; margin: 0 auto; }
.bk-logo_white .bk-prev { background: #1f2937; } /* 반전 로고는 어두운 배경에서 확인 */
.bk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-row > span { flex: 1; font-size: .85rem; font-weight: 700; color: #374151; }
.bk-row button { padding: 7px 14px; font-size: .8rem; }
.bk-vars { display: flex; gap: 4px; }
.bk-vars button {
  padding: 5px 10px; font-size: .78rem; min-width: 30px; border-radius: var(--r-ctl);
  color: #6b7280;
}
.bk-vars button.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.bk-item.skeleton { min-height: 140px; animation: pulse 1.2s infinite; }

@media (max-width: 480px) {
  .grid { gap: 10px; }
  .bk-contact { grid-template-columns: 1fr; }
  .bk-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card.variant-horizontal { grid-column: auto; }
}

/* 목업 탭: 벡터 장면 / 사진 목업 */
/* 탭 3개가 폴더폰 커버(344px)에서 "아트 스 / 타일"로 갈라진다 — 줄바꿈을 막고
   좁으면 가로로 밀어 본다. */
.mk-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tabs button { padding: 8px 16px; font-size: .85rem; border: 1.5px solid #d1d5db;
  background: #fff; border-radius: var(--r-pill); cursor: pointer; min-width: 0;
  white-space: nowrap; flex: 0 0 auto; }
/* 탭이 주버튼과 같은 파란 채움이면 「목업 생성/갱신」과 같은 기능으로 보인다.
   파란 채움은 **실행 버튼에만** 쓰고, 탭은 연한 틴트로 고른 상태만 표시한다. */
.mk-tabs button.on {
  background: #eff4ff; border-color: #bfdbfe; color: var(--c-link); font-weight: 700;
}
.mk-item .bk-prev img { width: 100%; height: auto; display: block; border-radius: var(--r-ctl); }
.mk-fail { padding: 28px 8px; text-align: center; font-size: .8rem; color: #9ca3af;
  background: #f3f4f6; border-radius: var(--r-ctl); }

/* 부분 수정(인페인팅) 모달 — 폴더폰 344px 에서도 캔버스가 화면을 넘지 않아야 한다 */
.edit-card { max-width: 560px; }
.edit-wrap { position: relative; background: #0f172a; border-radius: var(--r-card); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
#inpCanvas { max-width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; }
.edit-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edit-tools label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 130px;
  font-size: .85rem; color: #6b7280; }
.edit-tools input[type=range] { flex: 1; min-width: 80px; }
.edit-tools button { padding: 9px 12px; font-size: .85rem; }
#inpPrompt { padding: 12px; border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); font-size: .95rem; }
.edit-strength { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #6b7280; }
.edit-strength input { flex: 1; }

/* 로고 가져오기 모달 */
button.ghost {
  background: transparent; color: var(--c-mute); border-color: transparent;
  font-size: var(--t-label); font-weight: 600;
}
button.ghost:active { background: #eef2f7; }
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.modal-card { background: #fff; border-radius: var(--r-card); padding: 20px; width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  /* 내용이 길어지면 카드 안에서 스크롤 — 안 그러면 제목과 버튼이 화면 밖으로 잘린다 */
  max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: -20px; background: #fff; padding-top: 4px; z-index: 1; }
.modal-foot { position: sticky; bottom: -20px; background: #fff; padding-bottom: 4px; }
.modal-head h3 { font-size: 1.15rem; }
.modal-x { padding: 4px 10px; border: none; background: none; font-size: 1.1rem; color: #6b7280; cursor: pointer; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; }
.modal-foot button { padding: 10px 18px; font-size: .9rem; min-width: 0; }
.logo-chat-card { max-width: 520px; }
.logo-chat-hint { margin: -3px 0 0; color: #64748b; font-size: .78rem !important;
  line-height: 1.5 !important; }
.logo-chat-examples { display: flex; gap: 6px; overflow-x: auto; padding: 1px 1px 5px;
  scrollbar-width: thin; }
.logo-chat-examples button { flex: 0 0 auto; width: auto; padding: 7px 10px; border-color: #c7d2fe;
  border-radius: var(--r-pill); background: #eef2ff; color: #4338ca; font-size: .72rem; white-space: nowrap; }
.logo-chat-messages { min-height: 150px; max-height: 280px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #e2e8f0;
  border-radius: var(--r-card); background: #f8fafc; overscroll-behavior: contain; }
.logo-chat-message { max-width: 88%; padding: 9px 11px; border-radius: var(--r-card);
  font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.logo-chat-message.assistant { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0;
  color: #334155; border-bottom-left-radius: 4px; }
.logo-chat-message.user { align-self: flex-end; background: #2563eb; color: #fff;
  border-bottom-right-radius: 4px; }
.logo-chat-message.working::after { content: ""; display: inline-block; width: 1.2em;
  animation: chat-dots 1.2s steps(4, end) infinite; }
@keyframes chat-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; }
  75%, 100% { content: "..."; } }
.logo-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.logo-chat-compose textarea { min-width: 0; resize: none; padding: 10px 11px;
  border: 1.5px solid #cbd5e1; border-radius: var(--r-ctl); font: inherit; font-size: .85rem; }
.logo-chat-compose textarea:focus { outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.logo-chat-compose button { min-width: 72px; padding: 10px 13px; font-size: .82rem; }
.logo-chat-foot { justify-content: space-between; }
.logo-chat-foot #logoChatUndo { color: #1d4ed8; border-color: #bfdbfe; }
@media (max-width: 420px) {
  .logo-chat-card { padding: 15px; gap: 11px; }
  .logo-chat-compose { grid-template-columns: 1fr; }
  .logo-chat-compose button { width: 100%; }
}
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  border: 2px dashed #cbd5e1; border-radius: var(--r-card); padding: 28px 16px; text-align: center; }
.drop.over { border-color: #2563eb; background: #eff6ff; }
.drop-ico { font-size: 1.6rem; color: #94a3b8; }
.drop-main { font-size: .9rem; font-weight: 600; }
.drop-sub { font-size: .78rem; color: #9ca3af; }
.imp-prev { background: #f8fafc; border-radius: var(--r-card); padding: 12px; text-align: center; }
.imp-prev svg, .imp-prev img { max-width: 100%; max-height: 190px; height: auto; display: block; margin: 0 auto; }
.imp-prev .meta { font-size: .74rem; color: #6b7280; margin-top: 8px; }
.imp-names { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-names label { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px;
  font-size: .8rem; font-weight: 600; color: #6b7280; }
.imp-names input { padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); font-size: .95rem; }
.imp-kinds { border: none; display: flex; gap: 8px; flex-wrap: wrap; }
.imp-kinds legend { font-size: .8rem; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.imp-kinds label { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 2px;
  border: 1.5px solid #d1d5db; border-radius: var(--r-ctl); padding: 10px; cursor: pointer; font-size: .82rem; }
.imp-kinds label:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.imp-kinds label span { font-size: .72rem; color: #6b7280; }
.imp-kinds input { margin-bottom: 2px; }

/* 편집기: 요소 크기·회전 + 스펙 편집 */
/* 슬라이더는 **줄 폭을 따라간다.** 예전에는 `width: 110px` 고정이라 411px 화면에서
   줄의 27%만 쓰고 있었다. 그 폭에서 회전(-180~180°)은 1px 당 3.27° — 손가락이 8px
   흔들리면 26° 튄다. 미세조정용 컨트롤이 미세조정이 안 되는 폭이었다. */
.el-tf { display: flex; flex-direction: column; gap: var(--sp2); width: 100%;
  max-width: 430px; margin: 0 auto; }
.el-tf label { display: flex; align-items: center; gap: var(--sp2); font-size: .8rem;
  font-weight: 800; color: var(--c-mute); }
.el-tf label > span:first-child { flex: 0 0 56px; }
.el-tf input[type=range] { flex: 1 1 auto; min-width: 0; height: 44px; }
.el-tf output { flex: 0 0 46px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--c-action); }

/* 「로고 전체」에 걸리는 것은 묶음을 나눠 둔다 — 크기·회전은 고른 요소에만 걸린다.
   같은 모양으로 붙여 두면 화면에서 그 차이가 사라진다. */
.el-tf.whole-logo { margin-top: var(--sp2); padding-top: var(--sp3);
  border-top: 1px solid var(--c-line); }
.tf-group-title { font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: var(--c-faint); }

/* 요소 칩 — 무엇을 고른 상태인지 남기고, 겹쳐서 탭하기 어려운 요소도 고를 수 있게 */
.el-picker { display: flex; flex-wrap: wrap; gap: var(--sp2); justify-content: center;
  width: 100%; max-width: 430px; margin: 0 auto; }
.el-picker button { min-height: 44px; padding: 0 14px; font-size: .78rem; font-weight: 700;
  border-radius: var(--r-pill); }
/* 「지금 고른 것」은 --c-pick(남보라). 결과 카드 선택과 같은 규칙을 쓴다. */
.el-picker button[aria-pressed="true"] {
  border-color: var(--c-pick); color: var(--c-pick);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
}

/* 십자 패드 + 작은 버튼들을 한 줄에. 십자 패드가 혼자 한 줄을 쓰면 세로를 148px
   먹는데, 하는 일은 1px 이동뿐이다. */
.edit-row { display: flex; align-items: center; justify-content: center; gap: var(--sp4);
  flex-wrap: wrap; width: 100%; max-width: 430px; margin: 0 auto; }
.edit-side { display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp2); min-width: 0; }
.edit-side > button { min-height: 44px; font-size: .8rem; white-space: nowrap; }
.el-color-row { display: flex; align-items: center; gap: var(--sp2);
  font-size: .8rem; font-weight: 800; color: var(--c-mute); }
.el-color-row input[type=color] { width: 44px; height: 44px; padding: 2px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-ctl); background: none;
  cursor: pointer; }
.el-color-row button { min-height: 44px; font-size: .72rem; padding: 0 8px; }
.import-edit-panel {
  width: 100%; max-width: 430px; margin: 2px auto 0; padding: 13px;
  border: 1px solid #bfdbfe; border-radius: var(--r-card); background: #eff6ff;
  box-shadow: 0 2px 10px rgba(30,41,59,.05);
}
.import-edit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.import-edit-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.import-edit-head strong { color: #1e3a8a; font-size: .86rem; }
.import-edit-head span:not(.import-edit-badge) { color: #64748b; font-size: .7rem; line-height: 1.4; }
.import-edit-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: var(--r-pill);
  background: #dcfce7; color: #047857; font-size: .64rem; font-weight: 800; }
/* 그리드로 두면 색상 선택기가 hidden 일 때(기본값) 자동 배치가 한 칸씩 당겨져서
   「색상 적용」 버튼이 42px 짜리 색상칸에 들어가 카드 밖으로 삐져나온다.
   플렉스는 숨은 항목을 아예 세지 않아 그 문제가 없다. */
.import-color-row { display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 7px; margin-top: 11px; }
.import-color-row label { flex: 1 1 140px; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  color: #475569; font-size: .72rem; font-weight: 700; }
.import-color-row input[type=color] { flex: 0 0 auto; }
.import-color-row button { flex: 0 0 auto; }
.import-color-row select, .import-color-row button { min-height: 38px; }
.import-color-row select { width: 100%; padding: 7px 9px; border: 1px solid #bfdbfe;
  border-radius: var(--r-ctl); background: #fff; }
.import-color-row input[type=color] { width: 42px; height: 38px; padding: 3px;
  border: 1px solid #bfdbfe; border-radius: var(--r-ctl); background: #fff; }
.import-color-row button { padding: 7px 10px; white-space: nowrap; }
.import-edit-panel > small { display: block; margin-top: 7px; color: #64748b;
  font-size: .66rem; line-height: 1.4; }
.import-edit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin-top: 10px; }
.import-edit-actions button { min-width: 0; padding: 8px 7px; font-size: .72rem; }
.import-edit-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.import-edit-panel .status { margin: 7px 0 0; min-height: 0; text-align: left; }
@media (max-width: 420px) {
  /* 좁은 화면에서는 버튼을 한 줄 통째로 내린다 (플렉스 wrap 과 함께 동작). */
  .import-color-row button { flex: 1 0 100%; }
  .import-edit-actions { grid-template-columns: 1fr; }
  .import-edit-actions button:last-child { grid-column: 1; }
}
.spec-edit { width: 100%; max-width: 430px; margin: 4px auto 0; background: #fff;
  border-radius: var(--r-card); padding: 12px 14px; box-shadow: 0 2px 10px rgba(30,41,59,.07); }
/* 손가락 표적은 44px. 예전에는 요약줄이 20px, 선택 상자가 35px 이라 편집기 안에서
   44px 을 넘는 것이 십자 패드뿐이었다. */
.spec-edit summary { font-size: .85rem; font-weight: 700; cursor: pointer; color: #2563eb;
  min-height: 44px; display: flex; align-items: center; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.spec-grid label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem;
  font-weight: 600; color: #6b7280; }
.spec-grid input, .spec-grid select { padding: 8px 10px; border: 1.5px solid #d1d5db;
  border-radius: var(--r-ctl); font-size: .85rem; background: #fff; min-height: 44px; }
.spec-grid label:first-child, .spec-grid label:nth-child(2) { grid-column: 1 / -1; }

/* 로고 부분 수정 결과 — 로고(벡터)와 **다른 것**임이 보이게 따로 담는다 */
.fixout {
  margin-top: 16px; padding: 14px; border-radius: var(--r-card);
  background: #f8fafc; border: 1px solid #e2e8f0;
}
.fixout-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.fixout-head .hint { font-size: .8rem; color: #64748b; }
.fixout img { width: 100%; max-width: 360px; border-radius: var(--r-ctl); display: block; margin-bottom: 10px; }

/* 사진 목업 — 제안서에 실을 장면 고르기 + 자리 정밀조정 */
.mk-pick { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: #475569; }
.mk-pick input { accent-color: #2563eb; }
#mkPhoto button.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.mk-tune {
  margin-top: 8px; padding: 10px; border-radius: var(--r-ctl);
  background: #f8fafc; border: 1px solid #e2e8f0;
}
.mk-tune-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .8rem; }
.mk-tune-row > span:first-child { flex: 0 0 46px; color: #475569; }
.mk-tune-row input[type=range] { flex: 1; min-width: 0; }
.mk-tune-val { flex: 0 0 46px; text-align: right; color: #2563eb; font-variant-numeric: tabular-nums; }

/* 사진 목업 도구 막대 — 92종 중 무엇을 골랐는지 늘 보이게 */
.mk-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.mk-count { font-size: .82rem; color: #64748b; }
.mk-section {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  margin: 4px 0 0; padding: 10px 12px; border-radius: var(--r-ctl);
  background: #eff6ff; border: 1px solid #dbeafe; color: #1e3a8a;
}
.mk-section strong { font-size: .9rem; white-space: nowrap; }
.mk-section span { font-size: .76rem; line-height: 1.45; color: #64748b; }
.mk-section-more { margin-top: 10px; background: #f8fafc; border-color: #e2e8f0; color: #334155; }
/* 광고 보상·로고 팩의 기본 실사 6종은 폰에서도 2열×3행으로 한눈에 확인한다.
   저장·조정 도구가 없는 보기 전용 카드라 1열로 크게 늘일 이유가 없다. */
#mkPhoto.basic-six {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
}
#mkPhoto.basic-six .mk-section { padding: 8px 10px; margin: 0 0 2px; }
#mkPhoto.basic-six .mk-item { min-width: 0; padding: 6px; gap: 4px; }
#mkPhoto.basic-six .bk-prev img { width: 100%; height: 112px; object-fit: cover; object-position: center; }
#mkPhoto.basic-six .bk-prev img.awaiting { opacity: 0; }
#mkPhoto.basic-six .bk-prev.loading { min-height: 112px; animation: pulse 1.2s infinite; }
#mkPhoto.basic-six .bk-row { min-height: 34px; }
#mkPhoto.basic-six .bk-row > span { font-size: .7rem; line-height: 1.3; }
@media (max-width: 480px) {
  .mk-section { align-items: flex-start; flex-direction: column; gap: 2px; }
}
.mk-tune-note { margin-left: 10px; font-size: .76rem; color: #64748b; }
/* 「자리 저장」과 「불러오기」는 하는 일이 반대다 — 붙여 두면 좁은 화면에서 잘못
   누른다(실제로 저장했는데 옛 값이 돌아왔다는 보고). 줄을 갈라 떨어뜨린다. */
.mk-tune > button { margin: 4px 6px 0 0; }
#mkPhoto .mk-tune .load-sep { flex-basis: 100%; height: 0; }
/* 로그인 전 공유 버튼 — 로그인 폼 줄에 붙는다 */
.share-anon { margin-top: 8px; }
/* 공유 최후 폴백 — 주소를 고를 수 있게 띄운다(http 에서는 복사 API 가 다 막힌다) */
.share-fallback {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0; padding: 10px; border-radius: var(--r-ctl);
  background: #eff6ff; border: 1px solid #bfdbfe; font-size: .84rem; color: #1e40af;
}
.share-fallback input {
  width: 100%; padding: 8px; border-radius: var(--r-ctl); border: 1px solid #bfdbfe;
  font-size: .9rem; background: #fff;
}
/* 제안서 설정 — 고객 보관 · 납품물 표 */
.prop-opts { grid-column: 1 / -1; margin-top: 10px; padding: 12px; border-radius: var(--r-card);
  flex-basis: 100%; width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; }
.prop-opts summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: #334155; }
.prop-opts .hint { font-size: .8rem; color: #64748b; margin: 6px 0 10px; }
.prop-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .86rem; }
.prop-row input { flex: 1; padding: 8px; border: 1px solid #cbd5e1; border-radius: var(--r-ctl); }
.prop-h { font-size: .84rem; margin: 14px 0 6px; color: #334155; }
.deliv-row { display: flex; gap: 6px; margin-bottom: 6px; }
.deliv-row input:first-child { flex: 0 0 110px; }
.deliv-row input { padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: var(--r-ctl);
  font-size: .84rem; min-width: 0; }
.deliv-row input:last-of-type { flex: 1; }
.deliv-row button { flex: 0 0 auto; }
.client-list { font-size: .84rem; }
.client-list .cl { margin-bottom: 8px; }
.client-list .cl b { display: block; margin-bottom: 2px; }
.client-list a { color: #2563eb; margin-right: 10px; }

/* ── 첫 화면 완성 샘플 ─────────────────────────────────────────────────
   폼만 보여 주면 무엇을 만들어 주는 앱인지 알 수 없다. 가로 스크롤 한 줄이라
   세로 공간을 거의 쓰지 않으면서 결과물을 먼저 보여 준다. */
.samples { margin-bottom: 16px; }
.samples-title { font-size: .9rem; font-weight: 700; color: #334155; margin: 0 0 10px; }
.samples-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.samples-strip::-webkit-scrollbar { height: 0; }
.sample-card {
  flex: none; width: 132px; margin: 0; scroll-snap-align: start;
  background: #fff; border: 1px solid #e8edf4; border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 6px rgba(30, 41, 59, .06);
}
.sample-art { display: block; width: 100%; height: 150px; object-fit: cover; background: #f8fafc; }
.sample-card figcaption {
  padding: 8px 10px 10px; border-top: 1px solid #f1f5f9;
  font-size: .76rem; font-weight: 700; color: #334155; line-height: 1.25; text-align: center;
}

/* 비활성 버튼의 이유 — title 툴팁은 폰에서 뜨지 않으므로 화면에 적는다. */
.action-note {
  margin: 8px 2px 0; font-size: .76rem; line-height: 1.45; color: #64748b;
  padding-left: 18px; position: relative;
}
.action-note::before { content: "ⓘ"; position: absolute; left: 0; top: 0; color: #94a3b8; }

/* ── 동작 버튼 아이콘 ──────────────────────────────────────────────────
   예전에는 라벨 앞에 이모지를 붙였다. 이모지는 OS마다 그림이 다르고 색이 제멋대로라
   버튼 색과 따로 놀았다. 단색 선 아이콘을 mask 로 깔아 글자색을 그대로 따르게 한다. */
.action-grid button { position: relative; padding-left: 32px; }
.action-grid button::before {
  content: ""; position: absolute; left: 11px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
  opacity: .85;
}
#logoChatOpen   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
#makeCustomSymbol { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z'/%3E%3Cpath d='M18 15l.8 2L21 17.8l-2.2.8L18 21l-.8-2.4L15 17.8l2.2-.8z'/%3E%3C/svg%3E"); }
#logoCharacter  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 10h.01M15 10h.01M8.5 15a4.5 4.5 0 0 0 7 0'/%3E%3C/svg%3E"); }
#openVariants   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
#openMotion     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 4l13 8-13 8z'/%3E%3C/svg%3E"); }
#openPalettes   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 1 9-9c0 2-1.6 3-3.2 3H16a2 2 0 0 0-1.4 3.4A2 2 0 0 1 12 21z'/%3E%3Cpath d='M7.5 12h.01M10 8h.01M14.5 8h.01'/%3E%3C/svg%3E"); }
#logoFix        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4l5 5L9 20H4v-5z'/%3E%3Cpath d='M13 6l5 5'/%3E%3C/svg%3E"); }
#savePng        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='1.5'/%3E%3Cpath d='M4 17l5-5 4 4 2-2 5 4'/%3E%3C/svg%3E"); }
#saveSvg        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M9 13l-2 2 2 2M15 13l2 2-2 2'/%3E%3C/svg%3E"); }
#saveSlot       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h12l2 2v16l-7-4-7 4z'/%3E%3C/svg%3E"); }
#openKit        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3 12h18M12 8v13M12 8S9.5 3 7 4.5 8 8 12 8s6.5 1 5-3.5S12 8 12 8z'/%3E%3C/svg%3E"); }
#openMockup     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 14l4.5-4.5 4 4L15 10l6 6'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }
#makeProposal   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }

/* ── 미리보기 확대 ────────────────────────────────────────────────────
   목업 카드는 폰에서 150px 남짓이라 합성된 로고가 보이지 않는다. 탭하면 전체
   화면으로 키운다. 새 창이나 다운로드 없이 그 자리에서 확인만 하는 용도다. */
.zoom-box {
  position: fixed; inset: 0; z-index: 90; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; background: rgba(8, 12, 22, .92);
  animation: zoomIn .16s ease;
}
@keyframes zoomIn { from { opacity: 0 } to { opacity: 1 } }
.zoom-stage {
  max-width: 100%; max-height: 78vh; overflow: auto;
  border-radius: var(--r-card); background: #fff; padding: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.zoom-stage img, .zoom-stage svg { display: block; max-width: 100%; height: auto; }
.zoom-cap { color: #e2e8f0; font-size: .85rem; font-weight: 600; text-align: center; margin: 0; }
.zoom-close {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.1rem; line-height: 1;
}
.zoom-close:active { background: rgba(255, 255, 255, .26); }
/* 확대할 수 있다는 걸 알려 준다 */
.mk-item .bk-prev, .bk-item .bk-prev { cursor: zoom-in; }

/* 남아 있던 이모지 3곳도 같은 선 아이콘으로 맞춘다. */
/* 아이콘을 absolute 로 왼쪽 끝에 붙이면 가운데 정렬된 글자와 멀찍이 떨어져
   따로 노는 두 덩어리가 된다. 인라인으로 나란히 놓아 한 덩어리로 읽히게 한다. */
#openImport, #shareAppAnon {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
}
.saves h2 span[data-i18n="saves.title"] {
  display: inline-flex; align-items: center; gap: var(--sp2);
}
#openImport::before, #shareAppAnon::before, .saves h2 span[data-i18n="saves.title"]::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background-color: currentColor; opacity: .8;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
#openImport { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M8 8l4-4 4 4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); }
#shareAppAnon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.saves h2 span[data-i18n="saves.title"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
/* 로그인이 주 동작인데 「앱 공유」와 같은 흰 버튼이라 위계가 없었다. */
#googleBtn { border-color: #cbd5e1; box-shadow: 0 1px 3px rgba(15,23,42,.06); font-weight: 700; }
#shareAppAnon { background: transparent; border-color: transparent; color: #64748b; box-shadow: none; }
#shareAppAnon:active { background: #eef2f7; }

/* 경고는 회색 안내와 확실히 달라야 한다 — 예전엔 둘 다 같은 회색이었다. */
.field-hint.warn { color: #b45309; font-weight: 600; }

/* ── 여백 리듬 ────────────────────────────────────────────────────────
   섹션 간격이 16·18·22·26px 로 제각각이라 무엇이 한 덩어리인지 안 보였다.
   섹션 사이는 --sp5, 섹션 안 항목 사이는 --sp3 으로 한 단계 벌린다. */
.panel { gap: var(--sp4); padding: var(--sp5); border-radius: var(--r-card); }
.action-group { margin-top: var(--sp5); }
.action-group-head { margin-bottom: var(--sp3); }
.sect { margin: var(--sp6) 0 var(--sp3); }
.divider { margin: var(--sp6) 0; }
.samples { margin-bottom: var(--sp5); }
.auth { margin-bottom: var(--sp5); }
.saves ul { gap: var(--sp3); }

/* ── E. 색 역할 분리 ──────────────────────────────────────────────────
   파랑 하나가 주버튼·링크·선택·배지에 전부 쓰여 무엇이 강조인지 평평했다.
   역할을 셋으로 나눈다: 실행(주버튼) / 이동(링크) / 선택(고른 상태).
   성공·경고·위험도 화면마다 다른 값을 쓰던 것을 여기로 모은다. */
:root {
  --c-action: #2563eb;   /* 누르면 무슨 일이 일어나는 것 */
  --c-link:   #1d4ed8;   /* 다른 곳으로 가는 것 */
  --c-pick:   #4f46e5;   /* 지금 고른 것 */
  --c-ok:     #059669;
  --c-warn:   #b45309;
  --c-danger: #dc2626;
}
a, .saves h2 a, .sub a { color: var(--c-link); }
button.primary { background: var(--c-action); border-color: var(--c-action); }
.card.selected { border-color: var(--c-pick); }
.card.selected .tag { color: var(--c-pick); }
.palette .swatch.sel .dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-pick), 0 2px 8px rgba(15,23,42,.18); }
.palette .swatch-add.sel .dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-pick), 0 2px 8px rgba(15,23,42,.18); }
.card.selected::after { background-color: var(--c-pick); }

/* ── F. 다크 모드 ────────────────────────────────────────────────────
   토큰을 한곳에 모아 둔 덕분에 값만 갈아 끼우면 된다. 시스템 설정을 따르고
   따로 토글은 두지 않는다 — 설정이 하나 늘어날 만큼의 이득이 없다. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-ink: #f1f5f9; --c-body: #cbd5e1; --c-mute: #94a3b8; --c-faint: #64748b;
    --c-line: #334155;
    --c-action: #3b82f6; --c-link: #93c5fd; --c-pick: #818cf8;
  }
  body { background: #0b1220; color: var(--c-body); }
  .panel, .card, .sample-card, .saves li, .modal-card, .sub-card,
  .tool-card, .zoom-stage { background: #131c2e; }
  .panel, .card, .sample-card, .saves li { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
  input[type=text], select, textarea, button {
    background: #1a2438; border-color: var(--c-line); color: var(--c-body);
  }
  button.primary { color: #fff; }
  button.ghost { background: transparent; }
  .field > span, h1, h2, h3 { color: var(--c-ink); }
  .custom-color-row, .runloc-card, .action-group { background: #131c2e; }
  /* .sel 은 라이트 기준의 연한 파랑(#eff6ff)이라 다크에서 글자 대비가 1.36 까지
     떨어진다(읽을 수 없다). 줄을 「+」 안으로 접은 뒤로는 연속 색상을 고른 상태,
     즉 .sel 이 이 줄의 기본 모습이 됐으므로 여기서 반드시 덮는다. */
  .custom-color-row.sel { background: #16233c; border-color: var(--c-pick); }
  .card .tag { background: rgba(19, 28, 46, .86); color: var(--c-body); }
  .sample-card figcaption { background: #131c2e; border-top-color: var(--c-line); }
  .divider, hr { border-color: var(--c-line); }
  .samples-title, .action-group-head strong { color: var(--c-ink); }
}

@media (prefers-color-scheme: dark) {
  /* 구글 버튼만 흰 배경을 따로 갖고 있어 글자가 흐리게 남았다. */
  #googleBtn { background: #1a2438; border-color: var(--c-line); color: var(--c-ink); }
  #googleBtn .g { color: #8ab4f8; }
  .pw-fallback summary, .field-hint, small { color: var(--c-mute); }
  .zoom-box { background: rgba(2, 6, 14, .94); }
}

/* 헤더 아이콘 버튼도 선 아이콘으로. 공유는 이모지를 뗀 뒤 빈 상자로 남아 있었다. */
#shareApp { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
#shareApp::before {
  content: ""; width: 18px; height: 18px; background-color: currentColor; opacity: .85;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  /* 흰 배경이 고정돼 있어 다크에서 흰 덩어리로 남던 헤더 버튼 */
  .header-actions .header-icon {
    background: #1a2438; border-color: var(--c-line); color: var(--c-body);
    box-shadow: 0 2px 9px rgba(0, 0, 0, .45);
  }
  .header-actions .header-icon:active { background: #223049; }
  .hamburger span { background: var(--c-body); }
  .saves .thumb, .sample-card { border-color: var(--c-line); }
  .import-color-row select, .import-color-row input[type=text] { background: #1a2438; }
}

@media (prefers-color-scheme: dark) {
  /* 로고는 흰 바탕을 전제로 그려진다(투명 배경 + 진한 남색 글자). 카드까지 어둡게
     하면 글자가 배경에 묻혀 아무것도 안 보인다 — 그림 자리만 흰색으로 남긴다. */
  .card > svg { background: #fff; border-radius: var(--r-ctl); }
  .saves .thumb { background: #fff; }
}

/* ── 저장 목록 줄 다듬기 ──────────────────────────────────────────────
   1) 날짜가 「8. 16. 오전 / 11:45 · 식당 · 파 / 랑」처럼 세 줄로 접혔다.
      한 줄로 두고 넘치면 … 로 자른다 — 날짜 뒷부분은 못 봐도 지장이 없다.
   2) 휴지통이 화면 오른쪽 끝에 붙어 스크롤 스와이프의 시작점과 겹쳤다.
      실제로 오탭이 났다. 오른쪽에 여백을 두고 버튼을 안쪽으로 들인다. */
.saves li { padding-right: var(--sp5); }
.saves .meta span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saves li button.danger { margin-left: var(--sp1); }

/* 「불러오기」가 넓어 메타 글자를 밀어냈다. 목록 안에서는 조금 좁혀 준다. */
.saves li button[data-act="load"] { padding: 8px 12px; font-size: .78rem; }

/* 목업 탭도 같은 선 아이콘으로 (숨은 패널이라 앞선 정리에서 빠져 있었다) */
#mkTabVector, #mkTabPhoto { display: inline-flex; align-items: center; gap: 6px; }
#mkTabVector::before, #mkTabPhoto::before {
  content: ""; width: 15px; height: 15px; background-color: currentColor; opacity: .8;
  -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat;
}
#mkTabVector { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1'/%3E%3Crect x='15' y='15' width='6' height='6' rx='1'/%3E%3Cpath d='M9 6h6a3 3 0 0 1 3 3v6'/%3E%3C/svg%3E"); }
#mkTabPhoto  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3Cpath d='M8 6l1.5-2h5L16 6'/%3E%3C/svg%3E"); }

/* 「디자인 바꾸기」도 같은 선 아이콘으로 */
#designToggle { display: flex; align-items: center; gap: var(--sp2); }
#designToggle::before {
  content: ""; width: 15px; height: 15px; background-color: currentColor; opacity: .85;
  -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 1 9-9c0 2-1.6 3-3.2 3H16a2 2 0 0 0-1.4 3.4A2 2 0 0 1 12 21z'/%3E%3Cpath d='M7.5 12h.01M10 8h.01M14.5 8h.01'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  /* 흰 배경을 직접 갖고 있던 나머지 카드·컨트롤. 어두운 화면에서 혼자 튀었다. */
  .spec-edit, .export-card, .save-card, details.spec-edit { background: #131c2e; }
  .spec-edit summary, #designToggle { color: var(--c-link); }
  select, .export-row select { background: #1a2438; color: var(--c-body); border-color: var(--c-line); }
  option { background: #1a2438; color: var(--c-body); }
}

@media (prefers-color-scheme: dark) {
  /* 더 구체적인 규칙이 흰 배경을 덮어쓰고 있었다. 같은 구체성으로 맞선다. */
  .png-opts select { background: #1a2438; color: var(--c-body); border-color: var(--c-line); }
  .png-opts label { color: var(--c-mute); }
}

@media (prefers-color-scheme: dark) {
  /* 캐릭터·변형·모션·팔레트 패널이 밝은 파랑 배경을 직접 갖고 있어, 어두운 화면에서
     흰 글씨가 밝은 바탕에 얹혀 제목이 아예 안 보였다. 패널째 어둡게 맞춘다. */
  .brand-tool { background: #131c2e; border-color: var(--c-line); }
  .brand-tool-head h2 { color: var(--c-ink); }
  .brand-tool-head p, .brand-tool label, .brand-tool legend { color: var(--c-mute); }
  .brand-tool select, .brand-tool input[type=text], .brand-tool textarea {
    background: #1a2438; color: var(--c-body); border-color: var(--c-line);
  }
  .character-sample, .tool-card { background: #1a2438; border-color: var(--c-line); }
  .character-sample figcaption, .tool-card figcaption { color: var(--c-mute); }
  .brand-tool .tool-close { color: var(--c-mute); }
  /* 가져온 로고 수정 패널도 같은 성격 */
  .import-edit-panel { background: #131c2e; border-color: var(--c-line); }
  .import-edit-head strong { color: #93c5fd; }
}

@media (prefers-color-scheme: dark) {
  .saves li button.danger { color: #64748b; }
  .saves li button.danger:hover, .saves li button.danger:active { color: #f87171; }
}

/* 한국어는 단어 중간에서 끊으면 「AI에게 수 / 정 요청」처럼 읽기 어려워진다.
   keep-all 로 어절 단위로만 넘긴다. 그래도 좁으면 글자를 조금 줄인다. */
/* 「캐릭터 추가 / ·생성」처럼 가운뎃점 뒤에서 끊기던 것을 막는다. 아이콘 자리를
   조금 줄이고 글자도 한 단계 낮춰 한 줄에 들어가게 한다. 좁은 기기에서 넘치면
   그때만 어절 단위로 접힌다(keep-all). */
.action-grid button {
  word-break: keep-all; line-height: 1.3;
  font-size: .82rem; letter-spacing: -.02em;
  padding-left: 28px; padding-right: 8px;
}
.action-grid button::before { left: 9px; width: 15px; height: 15px; }

@media (prefers-color-scheme: dark) {
  /* 선택되지 않은 목업 탭이 흰색으로 남아 어두운 화면에서 혼자 튀었다. */
  #mkTabs button { background: #1a2438; color: var(--c-mute); border-color: var(--c-line); }
  #mkTabs button.on { background: #1e293b; color: #93c5fd; border-color: #334155; }
  .mk-bar button { background: #1a2438; color: var(--c-body); border-color: var(--c-line); }
  .mk-count { color: var(--c-mute); }
  .mk-section { background: #172554; border-color: #1e3a8a; color: #bfdbfe; }
  .mk-section span { color: var(--c-mute); }
  .mk-section-more { background: #1a2438; border-color: var(--c-line); color: var(--c-body); }
}