/* 브랜드 영문 워드마크(2026-08-26) — Gorditas(OFL, 자체 호스팅). 영문 "Dasoni Studio" 전용 */
@font-face { font-family: 'Gorditas'; src: url('/fonts/Gorditas-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gorditas'; src: url('/fonts/Gorditas-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
.navbar-brand span, .hero h1, .app-brand, .brand-en { font-family: 'Gorditas', 'Pretendard', sans-serif; }

/* ==========================================================================
   DVFrames — main stylesheet
   ========================================================================== */

:root {
  color-scheme: light;
  --color-primary: #4f6ef8;
  --color-primary-dark: #3a56d4;
  --color-primary-light: #7b93ff;
  --bg: #ffffff;
  --bg-alt: #f6f7fb;
  --bg-card: #ffffff;
  --text: #1c1e21;
  --text-muted: #606770;
  --border: #e3e5ea;
  --navbar-bg: rgba(255, 255, 255, 0.85);
  --hero-bg: linear-gradient(135deg, #3a56d4 0%, #6a3ad4 50%, #a53ad4 100%);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --footer-bg: #1c1e21;
  --footer-text: #ebedf0;
  --footer-muted: #9ca3af;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18191a;
  --bg-alt: #202124;
  --bg-card: #242526;
  --text: #e3e3e3;
  --text-muted: #a0a4ab;
  --border: #333539;
  --navbar-bg: rgba(24, 25, 26, 0.85);
  --hero-bg: linear-gradient(135deg, #23307a 0%, #3d2378 50%, #5e2378 100%);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --footer-bg: #101112;
  --footer-text: #ebedf0;
  --footer-muted: #9ca3af;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

/* Slim scrollbars — 기본(17px) 대비 60% 축소 (7px) */

* {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: var(--text-muted) transparent;     /* Firefox */
}

/* Chrome/Edge/Safari — scrollbar-width/color가 auto여야 ::-webkit-scrollbar가 적용됨 */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
  }
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--navbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: background 0.25s ease;
}

.navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  margin-right: 16px;
}

.navbar-brand:hover {
  text-decoration: none;
  color: var(--color-primary);
}

.navbar-brand img {
  width: 43px;
  height: 43px;
  object-fit: contain;   /* 로고(96×84 비정사각) 늘어남 방지 — 정사각 박스에 비율 유지 배치 */
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.navbar-links a {
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
}

.navbar-links a:hover {
  background: var(--bg-alt);
  text-decoration: none;
  color: var(--color-primary);
}

/* 네브바 풀다운(Dasoni Studio → 앱 3종) — 마우스 오버로 표시(2026-08-05) */
.nav-dd {
  position: relative;
}

.nav-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);   /* 버튼에서 10px 아래(2026-08-05) */
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 150px;
  padding: 6px;
  z-index: 1100;
}

.nav-dd:hover .nav-dd-menu {
  display: block;
}

/* 버튼↔메뉴 10px 간격을 지나는 동안 호버가 끊기지 않게 하는 투명 브리지 */
.nav-dd-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-dd-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  /* 모바일 오버레이 메뉴 — 호버 불가 → 하위 항목 상시 펼침(들여쓰기) */
  .nav-dd-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 0 14px;
    min-width: 0;
    background: transparent;
  }
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switch {
  position: relative;
}

.lang-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}

.lang-btn:hover {
  background: var(--bg-alt);
}

.lang-btn .lang-name { margin: 0 5px 0 6px; }

/* 모바일(네브바가 햄버거로 접히는 폭) — 언어 버튼은 🌐 아이콘만(2026-08-06) */
@media (max-width: 860px) {
  .lang-btn .lang-name,
  .lang-btn .lang-caret { display: none; }

  .lang-btn {
    padding: 6px 9px;
    font-size: 1.05rem;
    line-height: 1;
  }

  /* 메뉴가 오버레이로 빠지면 flex:1 요소가 사라져 로그인·언어·테마가 브랜드
     옆에 붙는다 — 오른쪽 끝으로 정렬(2026-08-06).
     간격 통일(2026-09-02 사용자 지시) — 종전 2px 는 버튼마다 여백이 달라 보였다.
     (같은 날 navbar.html 의 닫는 태그를 고쳐 언어·테마가 .navbar-right 안으로 들어왔다 —
      그 전에는 gap 이 로그인 버튼에만 걸려 세 버튼 간격이 제각각이었다.) */
  .navbar-right {
    margin-left: auto;
    gap: 8px;
    flex: none;
  }

  /* 로고 숨김(2026-09-02 사용자 지시) — 좁은 폭에서는 버튼 행만 남긴다.
     브랜드 글자는 이미 숨겨져 있었고, 이제 이미지까지 숨긴다(햄버거로 이동 가능). */
  .navbar-brand { display: none; }

  /* 좁은 폭에서 오른쪽 묶음이 넘치지 않게: 브랜드는 로고만, 로그인은 버튼 하나로
     압축(긴 표시 이름은 말줄임, 화살표 숨김). 서브 메뉴 동작은 그대로. */
  .navbar-inner { padding: 0 12px; gap: 4px; }

  .navbar-brand { margin-right: 0; }

  .navbar-brand span { display: none; }

  .auth-switch { flex: none; }

  .auth-switch .btn-login {
    padding: 6px 10px;
    margin-right: 0;
    font-size: 0.85rem;
    max-width: 132px;
  }

  .auth-switch .btn-login #auth-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-caret { display: none; }
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 130px;
  padding: 6px;
  display: none;
}

.lang-menu.open {
  display: block;
}

.lang-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
}

.lang-menu a:hover {
  background: var(--bg-alt);
  text-decoration: none;
}

.lang-menu .lang-current {
  color: var(--color-primary);
  font-weight: 700;
}

.lang-menu .lang-disabled {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
  opacity: 0.6;
  cursor: default;
  white-space: nowrap;
}

.btn-login {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-right: 4px;
}

.btn-login:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
  color: #fff;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 1.15rem;
}

.icon-btn:hover {
  background: var(--bg-alt);
}

.navbar-toggle {
  display: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  margin-top: 60px;
  background: var(--hero-bg);
  color: #fff;
  text-align: center;
  padding: 88px 24px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 120%, rgba(255, 255, 255, 0.15), transparent 55%),
    radial-gradient(ellipse at 85% -20%, rgba(255, 255, 255, 0.12), transparent 50%);
  pointer-events: none;
}

.hero h1 {
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.hero .tagline {
  font-size: 1.35rem;
  font-weight: 400;
  opacity: 0.92;
  margin-bottom: 20px;
}

.hero .badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.hero .cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 런처 스타일 앱 버튼 (뷰어/에디터/라이브) */

/* 런처(launcher-tile) 원본 디자인 그대로 */

.app-launch-row {
  display: flex;
  gap: 48px;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
}

.app-launch {
  position: relative;
  overflow: hidden;   /* 대각선 배지 리본이 카드 모서리 밖으로 나가지 않게 */
  width: 220px;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(160deg, rgba(74, 144, 217, 0.12), rgba(15, 20, 40, 0.6));
  border: 1px solid rgba(160, 196, 255, 0.25);
  border-radius: 18px;
  color: rgb(204, 224, 255);
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 30px;
}

.app-launch:hover {
  text-decoration: none;
  transform: translateY(-6px);
  border-color: rgb(160, 196, 255);
  box-shadow: rgba(74, 144, 217, 0.35) 0px 14px 40px;
}

/* 카드 오른쪽 상단 대각선 배지 — 뷰어/라이브 FREE(초록), 에디터 수동 FREE(파랑) */
.app-launch .app-ribbon {
  position: absolute;
  top: 20px;
  right: -36px;
  width: 150px;
  transform: rotate(45deg);
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: #2f9e63;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.app-launch .app-ribbon-manual {
  background: #4a90d9;
  letter-spacing: 0.04em;
}

.app-launch .app-emoji {
  font-size: 64px;
  line-height: 1;
}

.app-launch .app-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgb(160, 196, 255);
  opacity: 0.85;
  margin-bottom: -12px;
}

.app-launch .app-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgb(204, 224, 255);
}

/* 카드 이름 아래 보조 문구(예: 라이브 '로그인 후 사용') — 2026-08-06 */
.app-launch .app-note {
  font-size: 10px;
  font-weight: 500;
  color: rgba(160, 196, 255, 0.6);
  margin-top: -12px;   /* 카드 gap(18px) 보정 — 이름 바로 아래 붙임 */
}

@media (max-width: 600px) {
  .app-launch-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .app-launch {
    width: 240px;
    height: 180px;
  }
}

.btn {
  display: inline-block;
  cursor: pointer;   /* button 요소로도 쓰임(이메일 보내기) — a 기본 pointer와 통일 */
  border: none;
  font-family: inherit;
  padding: 13px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-light {
  background: #fff;
  color: #2b2f36;
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding: 72px 0;
}

.section:nth-of-type(even) {
  background: var(--bg-alt);
}

.section-title {
  font-size: 2.1rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
}

.section-sub {
  text-align: center;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 44px;
}

/* Features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-card .icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Media/video cards */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.media-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.media-card .thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #2b2f4a, #4a2b4a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.6rem;
  position: relative;
}

.media-card .thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-card .body {
  padding: 20px;
}

.media-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  line-height: 1.4;
}

.media-card .credit {
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.media-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Partners */

.partner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  align-items: center;
}

.partner-logo {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 38px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-muted);
  box-shadow: var(--shadow);
}

/* Contact */

.contact-box {
  text-align: center;
}

.contact-box .btn-primary {
  background: var(--color-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 56px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

.footer h4 {
  font-size: 1rem;
  margin-bottom: 14px;
  color: #fff;
}

.footer ul {
  list-style: none;
}

.footer li {
  margin-bottom: 8px;
}

.footer a {
  color: var(--footer-muted);
  font-size: 0.92rem;
}

.footer a:hover {
  color: #fff;
}

.footer-bottom {
  text-align: center;
  color: var(--footer-muted);
  font-size: 0.88rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}

/* 약관 링크 줄 — 구분선 바로 밑, 카피라이트보다 작게 */
.footer-legal {
  text-align: center;
  font-size: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 14px;
  margin-top: 24px;
}

/* 사업자 정보 — 하단 링크 메뉴(footer-grid) 첫 컬럼(2026-08-05) */
.footer-biz {
  color: var(--footer-muted);
  opacity: 0.75;
  font-size: 11px;
  line-height: 1.9;
  border-right: 1px solid rgba(255, 255, 255, 0.1);   /* 사업자 정보 ↔ 링크 메뉴 세로 구분선 */
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 세로 가운데 정렬 */
}

/* 데스크톱: 사업자 컬럼을 링크 컬럼보다 넓게. 링크는 Dasoni·서비스·커뮤니티·문의 4칸 —
   3칸으로 두면 커뮤니티가 생기면서 '문의'가 다음 줄로 밀린다(2026-08-09). */
@media (min-width: 861px) {
  .footer-grid { grid-template-columns: minmax(280px, 1.3fr) repeat(4, minmax(104px, 1fr)); gap: 24px; }
}

/* 링크 메뉴(사업자 컬럼 제외) — 오른쪽으로 20px */
.footer-grid > div:not(.footer-biz) {
  padding-left: 20px;
}

/* 좁은 화면(컬럼이 접히는 구간) — 사업자 정보를 링크 메뉴 뒤로 보낸다.
   그리드 첫 컬럼이라 그냥 두면 모바일에서 맨 위에 오기 때문(2026-08-06). */
@media (max-width: 860px) {
  .footer-grid > div:not(.footer-biz) { order: 0; }

  .footer-biz {
    order: 1;                       /* 문의하기 다음 */
    border-right: none;
    padding-right: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);   /* 메뉴와 구분 */
  }
}

@media (max-width: 600px) {
  /* 한 컬럼으로 접히면 들여쓰기 제거 */
  .footer-grid > div:not(.footer-biz) { padding-left: 0; }
}
/* 거래 책임 고지(2026-08-25, PG 요건) — 사업자 정보(개인정보보호책임자) 아래 2행 간격, 10px */
.footer-resp { font-size: 10px; margin-top: 21px; }   /* 21px ≈ 빈 1행(11px × 1.9) */
html:not([lang="ko"]) .footer-resp { display: none; }   /* 한국어 전용(2026-08-25) */

/* PortOne 인라인 결제 UI(PayPal SPB, 2026-08-25) — 결제 진행 화면 중앙 정렬 */
.portone-ui-container { max-width: 340px; margin: 12px auto 0; }
.footer-legal a { color: var(--footer-muted); opacity: 0.55; font-size: inherit; }   /* .footer a(0.92rem) 덮어쓰기 */
.footer-legal a:hover { color: var(--footer-text); opacity: 1; }
.footer-legal .sep { margin: 0 8px; color: var(--footer-muted); opacity: 0.35; }

/* --------------------------------------------------------------------------
   Wiki layout (도움말 / FAQ)
   -------------------------------------------------------------------------- */

.wiki-layout {
  display: flex;
  max-width: 1400px;
  margin: 60px auto 0;
  min-height: calc(100vh - 60px);
}
/* (2026-08-15) 개인 정보 페이지 1500px 예외 제거 — 이 페이지만 좌측 메뉴가 왼쪽으로
   밀려 도움말 등 다른 wiki 페이지와 사이드바 위치가 어긋났다(사용자 보고). 전부 1400px 통일.
   결제 관리 표가 좁으면 콘텐츠 쪽에서 해결(컨테이너 확장 금지). */

.wiki-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 28px 16px;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--bg);
}

/* 주 메뉴 (섹션 제목) */
.wiki-sidebar .sidebar-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  padding: 0 10px;
  margin: 22px 0 6px;
}

.wiki-sidebar .sidebar-title:first-child {
  margin-top: 0;
}

/* 서브 메뉴 (페이지 링크) — 들여쓰기 + 세로 가이드선 */
.wiki-sidebar a {
  display: block;
  padding: 6px 10px 6px 14px;
  margin-left: 14px;
  border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.wiki-sidebar a:hover {
  background: var(--bg-alt);
  border-left-color: var(--color-primary-light);
  text-decoration: none;
  color: var(--color-primary);
}

.wiki-sidebar a.active {
  background: var(--bg-alt);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.wiki-content {
  flex: 1;
  min-width: 0;
  padding: 40px 48px 80px;
  max-width: 860px;
}


.wiki-content h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

/* 작성 중 안내 — 첫 문서 위 라운드 박스(help.js가 넣는다) */
.help-wip {
  margin: 0 0 28px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(233, 69, 96, 0.08);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.wiki-content .lead {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 1.05rem;
}

.wiki-content article {
  margin-bottom: 56px;
  /* 앵커 보정은 html의 scroll-padding-top(70px)이 담당 — 여기에 scroll-margin을
     더 주면 합산(150px)돼 타이틀이 상단에서 밀리고 스크롤스파이(offset 90) 밖으로
     떨어져 클릭한 메뉴가 active로 안 잡힌다. (2026-08-06) */
  scroll-margin-top: 0;
}

/* 전체 출력 모드 — 문서 사이 구분선 */
.wiki-content article + article {
  border-top: 1px solid var(--border);
  padding-top: 44px;
}

.wiki-content h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.wiki-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 24px 0 8px;
}

.wiki-content p {
  margin-bottom: 12px;
}

.wiki-content ul,
.wiki-content ol {
  margin: 0 0 14px 22px;
}

.wiki-content li {
  margin-bottom: 6px;
}

.wiki-content code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.88em;
  font-family: Consolas, "Courier New", monospace;
}

.wiki-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 0.92rem;
}

.wiki-content th,
.wiki-content td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.wiki-content th {
  background: var(--bg-alt);
  font-weight: 700;
  white-space: nowrap;
}

.wiki-content .note {
  background: var(--bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.94rem;
}

/* Prev/next page navigation */

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.page-nav a {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  max-width: 46%;
}

.page-nav a:hover {
  text-decoration: none;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* FAQ accordion */

.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--bg-card);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 15px 18px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "▸";
  color: var(--color-primary);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.faq-item[open] summary::before {
  transform: rotate(90deg);
}

.faq-item .answer {
  padding: 0 18px 16px 40px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.faq-item .answer p {
  margin-bottom: 8px;
}

.faq-item .answer ul {
  margin-left: 18px;
}

/* 사양 표 — 첫 열(앱 이름)이 두 줄로 접히지 않게(2026-08-06) */
.faq-item .answer table td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}

/* Workflow steps */

.step-list {
  counter-reset: step;
  list-style: none;
  margin: 0 0 14px 0 !important;
}

.step-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 18px 52px;
  margin: 0;
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 2px;
  width: 2px;
  background: var(--border);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .navbar-toggle {
    display: flex;
  }

  .navbar-links {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 2px;
    display: none;
    box-shadow: var(--shadow-lg);
  }

  .navbar-links.open {
    display: flex;
  }

  .hero h1 {
    font-size: 2.3rem;
  }

  .hero .tagline {
    font-size: 1.1rem;
  }

  .section {
    padding: 52px 0;
  }

  .wiki-layout {
    flex-direction: column;
  }

  .wiki-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 16px;
  }

  .wiki-content {
    padding: 28px 20px 60px;
  }
}

/* --------------------------------------------------------------------------
   Auth — 로그인 서브 메뉴 · 회원 가입/약관 오버레이 (런처 이식, 2026-08-04)
   테마 변수 기반 — 라이트/다크 모두 대응
   -------------------------------------------------------------------------- */

.auth-switch {
  position: relative;
}

.auth-switch .btn-login {
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-caret {
  font-size: 0.7rem;
  opacity: 0.8;
}

.auth-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.auth-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 6px;
  display: none;
  z-index: 1100;
}

.auth-menu.open {
  display: block;
}

.auth-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.auth-item:hover:not(:disabled) {
  background: var(--bg-alt);
}

.auth-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.auth-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.auth-plus {
  width: 18px;
  text-align: center;
  color: var(--color-primary);
  font-weight: 700;
}

.auth-signup {
  color: var(--color-primary);
  font-weight: 700;
}

.auth-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* ----- 오버레이 · 모달 ----- */

.ds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ds-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 24px;
  max-height: 85vh;
  overflow-y: auto;
}

.ds-modal-doc {
  max-width: 640px;
}

.ds-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.ds-modal-btns {
  margin-top: 18px;
  text-align: right;
}

.ds-modal-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 18px;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.ds-modal-close:hover {
  background: var(--bg-alt);
}

/* ----- 회원 가입 — 약관 동의 행 · 소셜 버튼 목록 ----- */

/* ── 로그인·회원가입 전용 페이지(2026-08-17) — 네브바 드롭다운 대체 ────────────── */
/* 고정 네브바(60px) + 상단 배너에 타이틀이 가리던 문제(2026-08-17). 다른 페이지와 같은
   90px 상단 여백을 두고, 남는 높이를 황금비(0.618 : 1)로 갈라 카드를 위쪽 38.2% 지점에 놓는다. */
/* 런처 보호(관리>UI '드래그 해제') — 이미지·링크 끌기까지 차단 */
.no-drag img, .no-drag a { -webkit-user-drag: none; }

.auth-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 90px 16px 48px;
  display: grid;
  grid-template-rows: 0.618fr auto 1fr;
  justify-items: center;
}
/* 황금비 지점보다 100px 더 위로(2026-08-17 사용자 지시) — 위 여백이 넓어 보였다.
   음수 margin 은 위쪽 행만 줄이므로 아래 여백은 그대로 유지된다. */
.auth-wrap { grid-row: 2; width: 100%; max-width: 380px; margin-top: -100px; }
/* 가입 페이지는 동의 4줄이 더 있어 로그인보다 50px 내린다(2026-08-17 사용자 지시). */
.auth-page-signup .auth-wrap { margin-top: -50px; }
.auth-title { font-size: 1.5rem; margin: 0 0 22px; text-align: center; }
.auth-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
/* 소셜 버튼 — 아이콘은 왼쪽 고정, 문구는 카드 중앙(제공자가 늘어도 문구 줄이 흔들리지 않는다) */
.auth-social-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg, var(--bg-card));
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.auth-social-btn:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-alt); }
.auth-social-btn:disabled { opacity: 0.45; cursor: default; }
.auth-social-btn img { position: absolute; left: 16px; width: 22px; height: 22px; object-fit: contain; }
.auth-alt { margin-top: 22px; text-align: center; font-size: 0.86rem; color: var(--text-muted); }
.auth-alt a { color: var(--accent, #6c7bff); font-weight: 700; margin-left: 6px; }
/* 로그인 페이지 — 신규 가입 중단 안내(관리 '미가입', 2026-09-05). 회원가입 항목 아래 한 줄 */
.auth-closed-note { display: block; margin-top: 8px; color: #e94560; font-size: 0.82rem; }
.auth-page .signup-consent-row { margin-bottom: 10px; }
/* 연령 확인 행 보조 문장·서버 거부 안내(2026-09-05) */
.signup-consent-sub { margin: -6px 0 10px 26px; font-size: 12px; line-height: 1.45; opacity: 0.75; }
.signup-msg { color: #e94560; font-size: 13px; margin: 0 0 10px; }

.signup-consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.signup-consent-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.signup-consent-row input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
}

.signup-view-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 3px 10px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.signup-view-btn:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.signup-login-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.signup-login-row .auth-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  justify-content: center;
}

/* ----- 약관 본문 ----- */

.legal-body {
  font-size: 0.88rem;
  color: var(--text);
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: var(--bg-alt);
}

.legal-body h1,
.legal-body h2,
.legal-body h3 {
  margin: 12px 0 6px;
  font-size: 1rem;
}

.legal-body p,
.legal-body li {
  margin-bottom: 6px;
}

#auth-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  #auth-label {
    max-width: 80px;
  }
}


/* ----- 이메일 보내기 팝업 ----- */

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.contact-field label {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.contact-field input,
.contact-field textarea {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.contact-note {
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.contact-note.err { color: #e05a5a; }
.contact-note.ok { color: #2ea86e; }

.contact-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.contact-send {
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 8px 22px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.contact-send:hover { background: var(--color-primary-dark); }
.contact-send:disabled { opacity: 0.5; cursor: default; }

/* 번역 대기(비한국어) — 원문(한국어)이 잠깐 보이는 것을 막는다. home-i18n.js가
   apply() 직후 html[data-i18n-wait]를 제거하면 번역된 상태로 한 번에 나타난다.
   visibility라 레이아웃은 그대로 유지되고, 스크립트 실패 시엔 1.5초 뒤 자동 해제. */
html[data-i18n-wait] [data-i18n],
html[data-i18n-wait] [data-i18n-html],
html[data-i18n-wait] #lang-btn,
html[data-i18n-wait] .wiki-sidebar,
html[data-i18n-wait] .wiki-content {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   개인 정보 페이지(account/) — 왼쪽 로그인 정보 + 오른쪽 편집 폼 (2026-08-06)
   -------------------------------------------------------------------------- */

.acct-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 0 0 16px;
}

.acct-id { display: flex; align-items: center; gap: 10px; }

.acct-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; }

.acct-names { min-width: 0; }

.acct-name { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }

.acct-mail { font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; }

.acct-prov {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  padding: 6px 8px;
  border-radius: 6px;
}

.acct-prov + .acct-prov { margin-top: 4px; }

.acct-prov-name { display: flex; align-items: center; gap: 8px; }

.acct-prov-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex: none;
}

.acct-prov-chip img { width: 12px; height: 12px; object-fit: contain; }

.acct-prov-ok { color: #2f9e63; font-weight: 700; }

.acct-form { max-width: 520px; }
/* 크레딧 사용 내역/소멸 예정 탭(2026-08-15) */
.acct-cu-tabs { display: flex; gap: 6px; margin: 18px 0 8px; border-bottom: 1px solid var(--border); }
.acct-cu-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 0.9rem; font-weight: 700;
  padding: 6px 10px 8px; cursor: pointer;
}
.acct-cu-tab.on { color: var(--text); border-bottom-color: var(--accent, #6c7bff); }
.acct-inv-req { color: #e8912d; font-weight: 700; font-size: 0.82rem; }
/* 결제 관리 pane 전용 — 카드(구독 상태·현재 구독제·결제 카드)와 결제 내역 표를
   100px 넓게(2026-08-15 사용자 지시). 페이지 열·사이드바 위치는 불변. */
.acct-form-pay { max-width: 620px; }

/* 저장소 목록은 파일명이 길어 520px로는 잘린다 — 이 pane만 본문 폭을 다 쓴다. */
.acct-form-wide { max-width: 100%; }

.acct-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 18px 0 6px;
}
/* 카드 타이틀 — '크레딧 사용 내역' 탭(.acct-cu-tab.on)과 같은 글자 스타일로 통일(2026-08-16).
   대상: 개인 정보(이메일·닉네임·연결 계정·동의) · 결제 관리(현재 구독제·결제 카드·결제 내역).
   모달 안의 입력 라벨은 종전 크기를 유지해야 해서 전역이 아니라 이 수식 클래스로만 적용한다. */
.acct-label.acct-label-h {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.acct-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}

.acct-readonly { opacity: 0.7; }

.acct-row { display: flex; gap: 8px; }

.acct-row .acct-input { flex: 1; }

/* 결제 수단 모달 — 인라인 행(이메일+인증 / 코드+확인 / 만료+보안코드) */
.pm-inline { display: flex; gap: 8px; align-items: center; }
.pm-inline .acct-input { flex: 1; }
.pm-inline .acct-btn { white-space: nowrap; }
.pm-vstatus { font-size: 0.8rem; margin: 5px 0 2px; min-height: 1.1em; }
.pm-vstatus.ok { color: #22a06b; }
.pm-vstatus.err { color: var(--accent, #e94560); }
.pm-btns { display: flex; justify-content: flex-end; gap: 12px; }
.pm-hint { font-size: 9px; }

.acct-btn {
  flex: none;
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.acct-btn:hover { background: var(--color-primary-dark); }

.acct-btn:disabled { opacity: 0.5; cursor: default; }

.acct-btn-sm { padding: 5px 12px; font-size: 0.78rem; font-weight: 600; }

.acct-btn-danger { background: #d64550; }

.acct-btn-danger:hover { background: #b8323d; }

/* 환불 불가 — 결제 내역 목록의 빨강 버튼(클릭 시 미충족 조건 팝업) */
.acct-btn-noref { background: #e94560; }

.acct-btn-noref:hover { background: #c9354c; }

.acct-provs .acct-prov { background: var(--bg-alt); border: 1px solid var(--border); }

.acct-consent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.acct-consent + .acct-consent { margin-top: 6px; }

.acct-consent label { display: flex; align-items: center; gap: 6px; cursor: pointer; flex: 1; min-width: 0; }

.acct-note {
  margin-top: 14px;
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-alt);
}

.acct-note.ok { color: #2f9e63; }

.acct-note.err { color: #d64550; }

.acct-danger-row { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.acct-danger-flex { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.acct-wd-notice {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #d64550;
  background: rgba(214, 69, 80, 0.08);
  border: 1px solid rgba(214, 69, 80, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-line;
}

.acct-wd-confirm { font-size: 0.88rem; line-height: 1.7; text-align: center; }

.acct-wd-list { display: inline-block; text-align: left; margin: 6px 0; padding-left: 22px; }

/* 구독 관리 — 에디터 구독 관리 창과 같은 구성(상태·현재 구독제·결제 내역·취소) */
.acct-sub-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.acct-sub-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  padding: 2px 10px;
}

.acct-sub-state { font-size: 0.88rem; line-height: 1.6; }

.acct-sub-warn { font-size: 0.8rem; color: #d64550; margin-top: 4px; }

.acct-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
}

.acct-sub-plan { font-size: 0.9rem; font-weight: 700; }
/* 현재 구독제 라벨 + [구독 취소/재개] 버튼 한 줄(라벨 오른쪽) */
.acct-sub-plantop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-sub-planbtn { display: inline-flex; }
/* 라벨 옆이라 조금 더 작게(2026-08-12) */
.acct-sub-planbtn .acct-btn-sm { padding: 3px 9px; font-size: 0.72rem; }

.acct-sub-next { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }

.acct-sub-credits { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

.acct-sub-cardno { font-size: 0.85rem; color: var(--text-muted); }

.acct-invoices { display: flex; flex-direction: column; gap: 1px; }

.acct-inv {
  display: grid;
  gap: 6px;
  align-items: center;
  font-size: 0.8rem;
  padding: 7px 10px;
  background: var(--bg-alt);
}
/* 결제 내역 7열: 결제일자/상품/결제수단/금액/상태/영수증/환불(A안, [환불 불가] 폭 확보) */
.acct-inv-pay { grid-template-columns: 0.9fr 1.35fr 0.85fr 0.85fr 0.6fr 0.65fr max-content; }   /* 환불 열 = 버튼 너비(고정 px 없음), 금액 열 fr — subgrid 미지원 폴백(행 단위 그리드) */
/* 결제 내역 그리드(2026-09-07 사용자 지시) — 헤더·행이 subgrid 로 트랙을 공유: 환불 열은 가장 넓은 버튼([환불 신청]/[환불 불가]/
   [신청됨]/[확인중]) 너비(max-content)로 모든 행 동일, 금액 열(fr)이 늘고 줄며 표 전체 너비 유지. 환불·금액 모두 고정 px 없음. */
@supports (grid-template-columns: subgrid) {
  .acct-inv-grid { display: grid; grid-template-columns: 0.9fr 1.35fr 0.85fr 0.85fr 0.6fr 0.65fr max-content; column-gap: 6px; }
  .acct-inv-grid > .acct-invoices, .acct-inv-grid .acct-list { display: contents; }   /* 목록 상자·페이지 묶음은 트랙에 참여하지 않음 */
  .acct-inv-grid .acct-inv-pay { grid-column: 1 / -1; grid-template-columns: subgrid; }
  /* 크레딧 사용/소멸 예정 4열: 일자·크레딧·상태는 내용 폭(max-content), 구분이 나머지 전부 */
  .acct-inv-grid-cr { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; }
  .acct-inv-grid .acct-inv-cr { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .acct-inv-grid .acct-pager, .acct-inv-grid .acct-hint { grid-column: 1 / -1; }
}
/* 크레딧 내역 4열: 사용일자/구분/크레딧/상태 */
.acct-inv-cr { grid-template-columns: 1fr 1.6fr 1fr 0.8fr; }
/* 크레딧 사용 내역 구분 열 — 한 줄 유지(2026-09-07 사용자 지시). subgrid 에선 남는 폭을 다 쓰고, 그래도 넘치면 말줄임 */
.acct-inv-cr .acct-inv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* 크레딧·상태 열 +40px(2026-09-07 사용자 지시) — 트랙이 max-content 라 셀 왼쪽 여백으로 넓힌다(우측 정렬 텍스트는 그대로) */
.acct-inv-cr .acct-inv-amt, .acct-inv-cr .acct-inv-st { padding-left: 40px; }
.acct-inv-cr .acct-inv-date { padding-right: 20px; }   /* 사용 일자 열 +20px(2026-09-07 사용자 지시) — 좌측 정렬이라 오른쪽 여백 */
/* 헤더 행 — 굵게·흐리게, hover 없음 */
.acct-inv-hd { font-weight: 700; color: var(--text-muted); background: var(--bg); font-size: 0.72rem; text-transform: none; }
.acct-inv .acct-btn-sm { padding: 3px 10px; font-size: 0.72rem; white-space: nowrap; }
.acct-inv-method { color: var(--text-muted); overflow-wrap: anywhere; }
/* 영수증 열 */
.acct-inv-rc { text-align: right; color: var(--text-muted); }
.acct-inv-rclink { color: var(--accent, #6c7bff); text-decoration: underline; }
/* 환불 열 — 상태와 구분되는 별도 항목(왼쪽 구분선). 버튼 없는 행은 '—'로 정렬만 유지 */
.acct-inv-rf { display: flex; justify-content: flex-end; align-items: center; border-left: 1px solid var(--border); padding-left: 8px; min-height: 1em; color: var(--text-muted); }
.acct-inv-rf .acct-btn-sm { padding: 3px 8px; font-size: 0.7rem; }

/* 셀프 환불 팝업 — 조건 목록 */
.acct-rf-body { font-size: 0.85rem; line-height: 1.8; }
.acct-rf-cond.ok { color: #22a06b; }
.acct-rf-cond.no { color: var(--accent, #e94560); }
.acct-rf-err { color: var(--accent, #e94560); font-size: 0.8rem; margin-top: 8px; }
.acct-rf-terms { display: inline-block; margin-top: 10px; font-size: 0.78rem; color: var(--accent, #6c7bff); text-decoration: underline; }
.acct-rf-long { margin-top: 10px; font-weight: 700; color: #e8912d; font-size: 0.9rem; }

/* 개인 정보 탭(일반/회사정보/세금계산서 — CORP_MEMBER C1) */
.acct-tabs { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
.acct-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px;
  color: var(--text-muted); font-size: 0.9rem; cursor: pointer; font-family: inherit; }
.acct-tab.active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent, #6c7bff); }

/* 상단 배너는 #ds-topbar(home-i18n.js) 재사용 — 별도 스타일 없음 */

/* 기업 회원 계정 알림 라운드 박스(개인 정보 일반 탭) */
.acct-corp-notice {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: rgba(245, 197, 66, 0.12); border: 1px solid #e8a33d;
  color: #e8a33d; font-size: 0.86rem; font-weight: 700;
}

/* 결제 내역·사용 내역 페이저 — [<] n/N [>] */
.acct-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.acct-pager-lbl { font-size: 0.8rem; color: var(--text); font-weight: 700; min-width: 44px; text-align: center; }

.acct-inv:first-child { border-radius: 8px 8px 0 0; }

.acct-inv:last-child { border-radius: 0 0 8px 8px; }

.acct-inv-date { color: var(--text-muted); }

.acct-inv-name { overflow-wrap: anywhere; }

.acct-inv-amt { text-align: right; }

.acct-inv-st { text-align: right; color: var(--text-muted); }

.acct-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }

@media (max-width: 860px) {
  .acct-form { max-width: none; }
  /* 좁은 화면 — 결제수단·영수증 열은 숨겨 핵심(일자/상품/금액/상태/환불)만 */
  .acct-inv-method, .acct-inv-rc { display: none; }
  .acct-inv-pay { grid-template-columns: 0.9fr 1.3fr 0.75fr 0.55fr max-content; }
  @supports (grid-template-columns: subgrid) {
    .acct-inv-grid { grid-template-columns: 0.9fr 1.3fr 0.75fr 0.55fr max-content; }
  }
  .acct-inv-cr { grid-template-columns: 1fr 1.5fr 1fr 0.8fr; }
  @supports (grid-template-columns: subgrid) {
    .acct-inv-grid-cr { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; }
  }
}

/* --------------------------------------------------------------------------
   상단 알림 바(ds-topbar) — 언어 제안 + 향후 긴급 공지 (2026-08-06)
   화면 최상단(2026-09-02 사용자 지시) — 배너가 뜨면 네브바·본문을 배너 높이만큼 내린다.
   늦게 내려오는 문제(배너는 /api/banners 응답 뒤에 붙는다)는 직전 방문 캐시(ds_bar_cache)로
   막는다: 캐시가 있으면 스크립트 실행 즉시 html.has-topbar 를 붙여 자리를 먼저 잡는다.
   -------------------------------------------------------------------------- */

#ds-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;      /* 화면 최상단 — 네브바보다 위 */
  height: 32px;
  z-index: 1001;                   /* 네브바(1000)보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;   /* 문구·버튼은 가운데, [x]만 오른쪽 끝(absolute) */
  gap: 10px;
  padding: 0 40px;
  background: #0f3460;
  border-bottom: 1px solid #335580;
  color: #cce0ff;
  font-size: 0.78rem;
}

.ds-topbar-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-topbar-go {
  flex: none;
  background: #e94560;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 12px;
  cursor: pointer;
}

.ds-topbar-go:hover { background: #d13a52; }

.ds-topbar-x {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #a0c4ff;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

/* 배너가 있으면 그 높이(32px)만큼 네브바와 본문을 내린다. html.has-topbar 는 캐시 기반으로
   스크립트 실행 즉시(첫 페인트 전) 붙고, body.has-topbar 는 실제 배너 렌더 시 붙는다 —
   둘 중 하나만 맞아도 자리가 유지되도록 두 선택자를 모두 건다. */
html.has-topbar .navbar,
body.has-topbar .navbar { top: 32px; }
html.has-topbar body,
body.has-topbar { padding-top: 32px; }

/* --------------------------------------------------------------------------
   가격 페이지(pricing/) — 에디터 '크레딧/구독 구매' 창과 같은 구성 (2026-08-07)
   -------------------------------------------------------------------------- */

.pr-page { padding: 90px 0 60px; }

.pr-page h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: 8px; }

.pr-lead { color: var(--text-muted); margin-bottom: 28px; }

.pr-sec { margin-bottom: 34px; }

.pr-sec h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.pr-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
}

/* 비교표 — 4열 그리드(항목 / 비회원 / 회원 / 구독) */
.pr-table-wrap { overflow-x: auto; }

.pr-table {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  /* (2026-08-23) gap+배경색 방식은 행 높이 서브픽셀 반올림으로 일부 라인이 두꺼워 보임 —
     셀 border 방식으로 교체해 모든 라인을 균일 1px 로. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 520px;
}
.pr-table > .pr-cell { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.pr-table > .pr-cell:nth-child(4n) { border-right: none; }
.pr-table > .pr-cell:nth-last-child(-n+4) { border-bottom: none; }

.pr-cell {
  background: var(--bg-card);
  padding: 10px 12px;
  font-size: 0.86rem;
  text-align: center;
  white-space: pre-line;   /* '추천 대상'처럼 값이 여러 줄인 칸 — \n 을 줄바꿈으로 */
  line-height: 1.6;
}

.pr-cell.pr-label { text-align: left; font-weight: 700; background: var(--bg-alt); }

.pr-cell.pr-head { font-weight: 800; background: var(--bg-alt); }

.pr-cell.pr-accent { color: var(--color-primary); font-weight: 700; }

/* 구매 카드 바로 아래 안내 한 줄 — 카드에 붙여 읽히도록 위 여백을 당긴다(.pr-cards 34px) */
.pr-foot {
  display: flex;
  flex-direction: column;   /* 안내 두 줄(구매 위치 + 환불 요약)을 위아래로 */
  align-items: flex-start;
  gap: 6px;
  margin: -20px 0 34px;
}

.pr-note { color: var(--text-muted); font-size: 0.88rem; }
.pr-refund { font-size: 0.82rem; line-height: 1.6; opacity: 0.9; }

/* 크레딧 세부 사용 목록 표 */
.pr-credit-desc { color: var(--text-muted); line-height: 1.7; font-size: 13px; margin-bottom: 18px; }
.pr-credit-desc p { margin: 0 0 10px; }
.pr-credit-desc ul { margin: 0; padding-left: 18px; }
.pr-credit-desc li { margin: 4px 0; }

.pr-cu-sale { color: #e94560; font-weight: 700; font-size: 12px; margin: 0 0 8px; text-align: right; }
.pr-cu-reg { opacity: 0.55; margin-right: 2px; }

.pr-credit-table { width: 100%; border-collapse: collapse; }
.pr-credit-table th, .pr-credit-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border);
  font-size: 0.9rem; vertical-align: top;
}
.pr-credit-table th { background: var(--bg-alt); font-weight: 700; }
.pr-credit-table .pr-cu-name { font-weight: 700; white-space: nowrap; }
.pr-credit-table .pr-cu-desc { color: var(--text-muted); line-height: 1.6; }
.pr-credit-table .pr-cu-cr { text-align: right; white-space: nowrap; color: var(--color-primary); font-weight: 700; }
.pr-credit-table .pr-cu-empty { color: var(--text-muted); text-align: center; padding: 16px; }

/* '자동 설정 기능' 행 라벨 — 주황 강조(과금 자동화 기능임을 눈에 띄게) */
.pr-table .pr-label.pr-label-auto { color: #e8912d; }
/* 가격 페이지 취소·환불 규정(2026-08-25, PG 심사) */
.pr-refund-list { margin: 0; padding-left: 18px; list-style: disc; }
.pr-refund-list li { color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; margin: 4px 0; }
.pr-refund-more { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.pr-refund-more a { color: var(--accent, #6c7bff); }

/* 구독 카드 크레딧 별도 구매 고지(2026-08-25) — 오렌지 */
.pr-price-line2.pr-label-auto { color: #e8912d; }

.pr-cta {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border-radius: 18px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 700;
}

.pr-cta:hover { background: var(--color-primary-dark); text-decoration: none; color: #fff; }

@media (max-width: 860px) {
  .pr-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pr-item-price { align-self: flex-end; }
}

/* 요금 카드 3장 — 무료 / 크레딧 구매 / 구독 (2026-08-07) */
.pr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 34px;
}

.pr-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}

.pr-card-accent { border-color: var(--color-primary); box-shadow: var(--shadow); }

.pr-card-head { display: flex; align-items: center; gap: 8px; }

.pr-card-title { font-size: 1.15rem; font-weight: 800; flex: 1; }

.pr-badge {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  padding: 3px 10px;
}

.pr-card-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 10px 0 16px;
  min-height: 42px;
}

.pr-field { margin-bottom: 16px; }

.pr-field-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.pr-select {
  width: 100%;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.pr-price { margin-bottom: 18px; min-height: 62px; }

.pr-price-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.pr-price-amt { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }

.pr-price-suffix { font-size: 0.85rem; color: var(--text-muted); }

.pr-price-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.pr-price-line2 { margin-top: 2px; }
.section-note { margin-top: 22px; text-align: center; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.pr-note-hl { color: #e8912d; }

/* 크레딧 수량 강조 — 크레딧 구매/구독 카드에서 무엇을 얼마나 받는지가 핵심 정보 */
.pr-cr { color: var(--color-primary); font-weight: 800; font-size: 0.86rem; }

.pr-price-off {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #e94560;
  border-radius: 10px;
  padding: 2px 8px;
}

.pr-btn {
  width: 100%;
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

.pr-btn:hover { background: var(--bg-alt); }

.pr-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.pr-btn-primary:hover { background: var(--color-primary-dark); }

.pr-btn:disabled { opacity: 0.55; cursor: default; }

.pr-get { font-size: 0.85rem; font-weight: 700; margin: 20px 0 10px; }

.pr-bul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.pr-bul li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; line-height: 1.45; }

.pr-check {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.62rem;
  display: flex; align-items: center; justify-content: center;
}

.pr-msg {
  margin: -18px 0 26px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.pr-msg.ok { color: #2f9e63; border-color: rgba(47, 158, 99, 0.4); }

.pr-msg.err { color: #d64550; border-color: rgba(214, 69, 80, 0.4); }

/* 진행 중 결제 배너(2026-09-11) — 잠금이 풀릴 때까지 남는다. pr-msg 와 달리 타이머가 없다. */
.pr-lock {
  margin: -18px 0 26px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #d64550;
  background: var(--bg-alt);
  border: 1px solid rgba(214, 69, 80, 0.4);
}

.pr-lock a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 8px; }

@media (max-width: 980px) {
  .pr-cards { grid-template-columns: 1fr; }
  .pr-card-desc { min-height: 0; }
  .pr-price { min-height: 0; }
}


/* ── 결제 페이지 /pay/ · 테스트 결제창 /pay/mock/ (2026-08-07, PAYMENT_FLOW.md) ── */
/* 상단 여백 — 고정 네브바(60px)에 제목이 가려지지 않도록 48px + 50px */
.pay-page { padding: 98px 0 72px; }
.pay-wrap { max-width: 560px; }
.pay-title { text-align: center; font-size: 1.9rem; font-weight: 800; margin: 0 0 24px; }

.pay-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}

.pay-msg { color: var(--text-muted); text-align: center; margin: 0 0 4px; }
/* PayPal 버튼 화면(2026-09-06 사용자 지시): 박스 배경 흰색. 다크 테마에서도 흰색이라 글자·테두리 색을 라이트 값으로 고정 */
.pay-box.pay-box-light { background: #fff; border-color: #e3e5ea; color: #1c1e21; }
.pay-box.pay-box-light .pay-msg { color: #606770; }
.pay-box.pay-box-light .pay-btn { border-color: #e3e5ea; }

.pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pay-row:last-of-type { border-bottom: none; }
.pay-note-row { justify-content: flex-end; border-bottom: none; padding-top: 4px; }

.pay-k { color: var(--text-muted); font-size: 0.9rem; }
.pay-v { font-weight: 700; text-align: right; word-break: break-all; }
.pay-amt { font-size: 1.35rem; font-weight: 800; }
.pay-note { color: var(--text-muted); font-size: 0.8rem; }
/* 가격 변경 안내(2026-09-11) — 표시가와 발급된 주문 금액이 다를 때만 나온다. */
.pay-note-warn { color: #e94560; font-weight: 600; }

.pay-refund {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.pay-refund-h { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
/* 카카오페이 이용 안내(2026-08-24) — 라디오 아래 소형 고지 3줄 */
.pm2-kakao-notes { margin: 4px 0 2px 24px; }
.pm2-kakao-note { font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); }
/* 결제 완료 상세(2026-08-24) — 주문번호/상품명/금액/수단 */
.pay-rst { max-width: 340px; margin: 12px auto 0; border-top: 1px solid var(--line, #2a3550); padding-top: 10px; }
.pay-rst-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; line-height: 1.7; }
.pay-rst-k { color: var(--text-muted); flex: none; }
.pay-rst-v { color: var(--text); text-align: right; word-break: break-all; }
/* 고지 섹션 접기(2026-08-24) — 기본 접힘, 제목 클릭 토글(▸/▾) */
.pay-refund > .pay-refund-h { cursor: pointer; user-select: none; }
.pay-refund > .pay-refund-h::before { content: "▾"; display: inline-block; width: 15px; color: var(--text-muted); }
.pay-refund.collapsed > .pay-refund-h::before { content: "▸"; }
.pay-refund.collapsed > *:not(.pay-refund-h) { display: none; }
.pay-refund.collapsed > .pay-refund-h { margin-bottom: 0; }
.pay-refund-list { margin: 0; padding-left: 16px; list-style: disc; }
.pay-refund-list li { color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; margin: 3px 0; }
.pay-refund-list li b { color: var(--text); font-weight: 700; }
.pay-refund-more { margin-top: 8px; font-size: 0.74rem; color: var(--text-muted); }
.pay-refund-more a { color: var(--accent, #6c7bff); }
/* 민원 책임 고지(2026-08-15, PG 요구 고지) — 환불 규정 박스와 동일 스타일 */
.pay-cs { margin-top: 10px; }
.pay-cs-body { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.pay-cs-line { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.pay-cs-line a { color: var(--accent, #6c7bff); text-decoration: none; }
/* 문의 팝업 확장 요소(2026-08-15) — 회신 체크·첨부 행 */
.contact-reply { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 10px; cursor: pointer; }
.contact-file-row { display: flex; align-items: center; gap: 8px; }
.contact-file-btn { padding: 4px 10px; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }
.contact-file-info { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-file-hint { font-size: 0.74rem; color: var(--text-muted); margin-top: 4px; }
#ctKind { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 0.9rem; }

/* 결제 결정 페이지 — 결제 방법 선택 UI */
.pm2 { text-align: left; }
.pm2-label { font-size: 0.82rem; font-weight: 700; color: var(--text); margin: 16px 0 6px; }
.pm2-prod { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; }
.pm2-prod-name { color: var(--text-muted); font-size: 0.9rem; }
.pm2-prod-amt { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.pm2-methods { display: flex; flex-direction: column; gap: 8px; }
/* 수단별 입력·선택 영역은 해당 라디오 바로 아래에 들어간다(2026-08-16) — 세로 gap 8px 로 간격 통일 */
.pm2-methods > .pm2-card, .pm2-methods > .pm2-easy { margin-top: 0; }
.pm2-method { display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.92rem; }
/* 간편 결제 카카오페이 버튼 — 브랜드 이미지 버튼(2026-08-16) */
.pm2-easy-card.pm2-easy-brand { padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; }
.pm2-easy-card.pm2-easy-brand img { height: 24px; width: auto; display: block; object-fit: contain; }
.pm2-card { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pm2-row { display: flex; align-items: center; gap: 10px; }
.pm2-row-label { width: 46px; font-size: 0.82rem; color: var(--text-muted); flex: none; }
.pm2-select { flex: 1; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg, var(--bg-card)); color: var(--text); font-family: inherit; font-size: 0.9rem; }
.pm2-hint { font-size: 0.78rem; color: var(--text-muted); }
/* 신용카드 구매자 이메일 입력(이니시스 필수) */
.pm2-input { box-sizing: border-box; width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg, var(--bg-card)); color: var(--text); font-family: inherit; font-size: 0.9rem; }
.pm2-input:focus { outline: none; border-color: var(--accent, #e94560); }
.pm2-input-err { border-color: #e94560; background: rgba(233, 69, 96, 0.08); }
/* 입력 형식 안내 — 비면 자리도 차지하지 않는다(2026-08-16) */
.pm2-field-hint { font-size: 0.76rem; line-height: 1.4; color: #e94560; }
.pm2-field-hint:empty { display: none; }
.pm2-emailhint { font-size: 0.72rem; color: var(--text-muted); }
.pm2-privacy-link { font-size: 0.72rem; color: var(--accent, #6c7bff); text-decoration: underline; white-space: nowrap; }
/* 간편결제 PG 라운드 카드(카카오페이 등 — 1택) */
.pm2-easy { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.pm2-easy-card {
  padding: 12px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg, var(--bg-card)); color: var(--text); font-family: inherit;
  font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s;
}
.pm2-easy-card.on { border-color: #fae100; background: rgba(250, 225, 0, 0.14); color: #3c1e1e; }
.pm2-easy .pm2-hint { flex-basis: 100%; }
.pm2-soon { margin-top: 10px; padding: 14px; text-align: center; color: var(--text-muted);
  background: rgba(0,0,0,0.15); border: 1px dashed var(--border); border-radius: 8px; font-size: 0.9rem; }
.pm2-err { color: var(--accent, #e94560); font-size: 0.82rem; min-height: 1em; margin-top: 10px; }

.pay-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.pay-btn {
  width: auto;
  min-width: 120px;
  padding: 11px 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.pay-btn:hover { border-color: var(--color-primary); }
.pay-btn:disabled { opacity: 0.5; cursor: default; }

.pay-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pay-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.pay-frame { width: 100%; min-height: 320px; border: 1px solid var(--border); border-radius: 10px; }

/* sdk 모드 오버레이 — 실 PG SDK가 띄우는 결제창 자리 */
.pay-sdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 9003;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pay-sdk-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
}

.pay-sdk-title { font-size: 1.1rem; font-weight: 800; text-align: center; }
.pay-sdk-desc { color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-top: 6px; }

@media (max-width: 560px) {
  .pay-actions { flex-direction: column; }
  .pay-btn { width: 100%; }
}


/* ── 개인 정보 > 저장소(읽기 전용 목록) ─────────────────────────────────── */
.acct-bar { height: 8px; background: rgba(15,52,96,0.5); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.acct-bar-fill { height: 100%; background: var(--color-primary); border-radius: 4px; }

.acct-btn.on { background: var(--color-primary-dark); }

.acct-files { display: flex; flex-direction: column; gap: 1px; }

.acct-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 116px 100px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;   /* 결제 내역(.acct-inv 0.8rem)과 동일(2026-09-07 사용자 지시, 종전 0.88rem) */
}
.acct-file-head { background: transparent; border: none; color: var(--text-muted); font-size: 0.72rem; padding: 2px 10px 2px; }   /* 결제 내역 헤더(.acct-inv-hd 0.72rem)와 동일 */
/* 파일명 — 자르지 않고 줄바꿈해 전체를 보여준다(확장자 앞뒤 어디서든 끊김 허용) */
.acct-file-c0 { overflow-wrap: anywhere; word-break: break-all; line-height: 1.35; }
.acct-file-c1, .acct-file-c2 { color: var(--text-muted); }
.acct-file-c3 { text-align: right; }
/* 저장소 — 사용량 박스·[내보내기] 폰트를 결제 내역과 맞춤(2026-09-07 사용자 지시): 행 0.8rem, 버튼 0.72rem(.acct-inv .acct-btn-sm 과 동일) */
.acct-stor-quota { font-size: 0.8rem; }
.acct-file .acct-btn { padding: 3px 10px; font-size: 0.72rem; font-weight: 600; }
.acct-empty { color: var(--text-muted); padding: 18px 4px; text-align: center; }

/* 문의 내역(2026-09-15, complete/STORAGE_INQUIRY.md §11) — 에디터 모달과 같은 5열 표·상세 아코디언·피드백 */
.acct-inq-row {
  display: grid; grid-template-columns: 40px 72px minmax(0, 1fr) 118px 70px; gap: 8px; align-items: center;
  padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; cursor: pointer;
}
.acct-inq-head { background: transparent; border: none; color: var(--text-muted); font-size: 0.72rem; padding: 2px 10px; cursor: default; }
.acct-inq-no, .acct-inq-date { color: var(--text-muted); }
.acct-inq-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-inq-st { font-weight: 700; }
.acct-inq-st.open { color: #e94560; }
.acct-inq-st.answered { color: #2e9e5b; }
.acct-inq-st.closed { color: var(--text-muted); }
.acct-inq-det { max-height: 180px; overflow-y: auto; padding: 8px 12px; margin: 0 0 2px; background: var(--bg-alt); border-left: 2px solid var(--border); font-size: 0.8rem; box-sizing: border-box; }
.acct-inq-full { white-space: pre-wrap; word-break: break-word; }
.acct-inq-att { margin-top: 5px; color: var(--text-muted); }
.acct-inq-att-link { color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.acct-inq-att-off { color: var(--text-muted); opacity: 0.7; }
.acct-inq-ans { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--border); color: #2e9e5b; white-space: pre-wrap; word-break: break-word; }
.acct-inq-fb { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.acct-inq-fb-btn { width: 34px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: transparent; font-size: 14px; line-height: 1; cursor: pointer; }
.acct-inq-fb-btn:disabled { opacity: 0.55; cursor: default; }
.acct-inq-fb-btn.on-up { border-color: #2e9e5b; background: rgba(46,158,91,0.12); }
.acct-inq-fb-btn.on-down { border-color: #e94560; background: rgba(233,69,96,0.12); }
.acct-inq-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.acct-inq-page { color: var(--text-muted); font-size: 0.8rem; min-width: 48px; text-align: center; }
@media (max-width: 620px) {
  .acct-inq-row { grid-template-columns: 34px minmax(0, 1fr) 64px; }
  .acct-inq-row > :nth-child(2), .acct-inq-row > :nth-child(4) { display: none; }
}

@media (max-width: 620px) {
  .acct-file { grid-template-columns: 1fr 84px; row-gap: 4px; }
  .acct-file-c2 { grid-column: 1; }
  .acct-file-c3 { grid-column: 2; }
  .acct-file-head { display: none; }
}

/* ── 드래그 선택 차단(2026-08-08, 2026-08-17 설정 종속으로 전환) ──────────────
   종전에는 무조건 걸려 있어 관리>UI 체크박스를 켜고 꺼도 화면이 그대로였다.
   이제 html.no-drag 가 붙었을 때만 적용한다(main.js 가 /api/ui-settings 로 판단).
   입력·편집 영역과 .selectable 은 반드시 예외로 둔다. 안 그러면 닉네임 수정,
   문의 폼 작성, 오류 문구 복사가 모두 막힌다. */
.no-drag body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.no-drag input, .no-drag textarea, .no-drag select,
.no-drag [contenteditable="true"], .no-drag .selectable, .no-drag .selectable * {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ── 맨 위로(Top) 버튼(2026-08-26) — 긴 문서 페이지(도움말·FAQ·약관)에서 노출 ── */
#ds-top-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: auto; min-width: 0; padding: 9px 16px; border-radius: 22px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
  background: rgba(15, 52, 96, 0.92); color: #cce0ff; border: 1px solid #4a90d9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s, background 0.15s, color 0.15s;
}
#ds-top-btn.on { opacity: 1; visibility: visible; transform: translateY(0); }
#ds-top-btn:hover { background: #4a90d9; color: #fff; }
@media (max-width: 600px) { #ds-top-btn { right: 14px; bottom: 14px; padding: 8px 13px; } }

/* ── 모달 버튼(2026-08-26 사용자 지시) — 에디터 .confirm-choice-btn 과 같은 모양 ──
   종전: [취소]는 외곽선, [확인]은 파란 채움이라 앱마다 인상이 달랐다.
   변경: 모달 안에서는 전부 알약(radius 20px) 외곽선 + 투명 배경, 종류는 테두리색으로.
   목록·폼 안의 .acct-btn(채움)은 그대로 둔다 — 모달(.ds-modal-btns) 안에서만 적용. */
.ds-modal-btns { display: flex; justify-content: flex-end; gap: 10px; }
.ds-modal-btns .acct-btn,
.ds-modal-btns .ds-modal-close {
  flex: none;
  padding: 6px 18px;
  border-radius: 20px;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* 확정(주 동작) — 파랑 외곽선 */
.ds-modal-btns .acct-btn {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.ds-modal-btns .acct-btn:hover { background: rgba(74,144,217,0.18); color: var(--text); }
/* 위험(탈퇴·환불 신청 등) — 빨강 외곽선 */
.ds-modal-btns .acct-btn-danger,
.ds-modal-btns .acct-btn-noref {
  border-color: #e94560;
  color: #e94560;
  background: transparent;
}
.ds-modal-btns .acct-btn-danger:hover,
.ds-modal-btns .acct-btn-noref:hover { background: rgba(233,69,96,0.18); color: var(--text); }
/* 취소·닫기 — 흐린 외곽선 */
.ds-modal-btns .ds-modal-close {
  border: 1px solid var(--border);
  color: var(--text-dim, var(--text));
}
.ds-modal-btns .ds-modal-close:hover { background: rgba(51,85,128,0.2); color: var(--text); }
.ds-modal-btns .acct-btn:disabled { opacity: 0.5; cursor: default; }

/* 환불 신청 사유 입력(2026-08-27) — 컨펌 창 안 textarea. pm2-input 기반에 여백만 조정 */
.acct-rf-reason { margin: 4px 0 2px; resize: vertical; min-height: 64px; font-family: inherit; }

/* 비교표 아래 표준시(KST) 안내(2026-09-05) */
.pr-compare-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; opacity: 0.75; }