/*
 * 파일명: style.css
 * 파일경로: /home/ocimaster/web/vibecode.co.kr/public_html/assets/css/
 * 기능: VibeCode 공통 스타일 — 디자인 토큰 + 베이스 + 컴포넌트 + 레이아웃 + 관리자 셸
 * 작성일: 2026-06-02
 */

/* ===================== 1. 디자인 토큰 ===================== */
:root {
  /* Brand (보라색 금지 — 블루/코랄 조합) */
  --color-primary: #2d6cdf;
  --color-primary-hover: #1f55ba;
  --color-accent: #ff7a59;
  --gradient-cta: linear-gradient(135deg, #2d6cdf 0%, #5b8def 100%);

  /* Surface / BG */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f4f9;
  --color-muted: #eef2f7;

  /* Text */
  --color-text: #1c2430;
  --color-text-strong: #0f1722;
  --color-text-sub: #4a5568;
  --color-text-muted: #8a94a6;

  /* Border */
  --color-border: #e3e8ef;
  --color-border-strong: #cbd5e1;

  /* Status */
  --color-success-bg: #e6f7ed; --color-success-text: #1f7a45;
  --color-error-bg:   #fde8e8; --color-error-text:   #b53030;
  --color-warning-bg: #fff7ed; --color-warning-text: #b45309;
  --color-info-bg:    #e8f0fe; --color-info-text:    #1f55ba;

  /* Font */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px;

  /* Layout */
  --container: 720px; --container-md: 960px; --container-lg: 1100px;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Radius / Shadow (그림자 최소) */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 16px rgba(16,24,40,.08);
}

/* ===================== 2. 베이스 ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-y: scroll; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { color: var(--color-text-strong); line-height: 1.35; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ===================== 3. 레이아웃 ===================== */
.container    { max-width: var(--container);    margin: 0 auto; padding: 0 var(--space-4); width: 100%; }
.container-md { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-4); width: 100%; }
.container-lg { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-4); width: 100%; }
.section { padding: var(--space-6) 0; }

/* 브레드크럼 (목록 복귀) */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.breadcrumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-sub); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb a svg { width: 16px; height: 16px; }
.breadcrumb .sep { color: var(--color-border-strong); }
.breadcrumb .current { color: var(--color-text-strong); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack > * + * { margin-top: var(--space-4); }
.muted { color: var(--color-text-muted); }
.text-sub { color: var(--color-text-sub); }

/* ===================== 4. 사이트 헤더 / 푸터 ===================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header-inner { display: flex; align-items: center; gap: var(--space-4); height: 60px; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--fs-lg); color: var(--color-text-strong); }
.brand-mark { color: var(--color-primary); }
/* 상단 헤더 — 테크니컬 디테일 (사이드바와 동일 톤) */
.site-header .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-cta); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 3px 12px rgba(45,108,223,.4); }
.site-header .brand-name { background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.site-header .brand-caret { color: var(--color-accent); font-weight: 800; margin-left: 1px; animation: caretBlink 1.1s steps(1) infinite; }
.site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.site-nav a:not(.btn) { position: relative; padding: 8px var(--space-3); color: var(--color-text-sub); font-weight: 600; font-size: var(--fs-base); transition: color .18s ease; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px; height: 2px; border-radius: 2px; background: var(--gradient-cta); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.site-nav a:not(.btn):hover { color: var(--color-primary); }
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn).is-active::after { transform: scaleX(1); }
.site-nav a:not(.btn).is-active { color: var(--color-primary); }
.site-header .btn-primary { background: var(--gradient-cta); box-shadow: 0 4px 14px rgba(45,108,223,.3); transition: box-shadow .18s ease, transform .18s ease; }
.site-header .btn-primary:hover { box-shadow: 0 6px 18px rgba(45,108,223,.45); transform: translateY(-1px); }
.site-nav-toggle { display: none; flex: none; width: 40px; height: 40px; margin-left: auto; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.site-nav-toggle .ico-close { display: none; }
.site-header.is-nav-open .site-nav-toggle .ico-menu { display: none; }
.site-header.is-nav-open .site-nav-toggle .ico-close { display: block; }
.site-header.is-nav-open .site-nav-toggle { color: var(--color-primary); border-color: var(--color-primary); }
.site-footer { margin-top: var(--space-7); background: #131a26; color: #aeb6c4; font-size: var(--fs-sm); }
.site-footer .container-lg { padding-top: var(--space-7); padding-bottom: var(--space-5); }
.site-footer a { color: #aeb6c4; transition: color .15s ease; }
.site-footer a:hover { color: #ffffff; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-5); }
.footer-brand .brand { color: #fff; margin-bottom: var(--space-3); }
.site-footer .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-cta); color: #fff; font-size: 12px; font-weight: 800; }
.site-footer .brand-name { color: #fff; }
.footer-desc { margin: 0; max-width: 320px; line-height: 1.6; color: #8b94a3; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col-title { margin: 0 0 var(--space-1); font-size: var(--fs-base); font-weight: 700; color: #e6eaf0; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.08); }
.footer-biz p { margin: 0 0 4px; font-size: var(--fs-xs); line-height: 1.6; color: #7e8696; }
.footer-biz .footer-powered { margin-top: var(--space-2); }
.footer-copy { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); font-size: var(--fs-xs); color: #7e8696; }

/* ===================== 5. 버튼 ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--fs-base); font-weight: 700; font-family: inherit; cursor: pointer;
  min-height: 44px; transition: background .15s, color .15s, border-color .15s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-primary); }
.btn-ghost { background: var(--color-surface-alt); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-muted); }
.btn-danger { background: var(--color-error-text); color: #fff; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* ===================== 6. 알림 / 뱃지 ===================== */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-base); margin-bottom: var(--space-4); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info-text); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--color-surface-alt); color: var(--color-text-sub); }
.badge-tool { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-cat  { background: var(--color-muted); color: var(--color-text-sub); }
.badge-status { text-transform: none; }
.badge-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-public  { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-hidden  { background: var(--color-muted); color: var(--color-text-muted); }

/* ===================== 7. 카드 ===================== */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.card-title { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 var(--space-4); }

/* ===================== 8. 폼 ===================== */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-sub); }
.form-label .req { color: var(--color-error-text); }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 11px 12px; font-size: var(--fs-base); font-family: inherit; background: #fff; color: var(--color-text);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(45,108,223,.12); }
.form-hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-error { margin-top: 6px; font-size: var(--fs-xs); color: var(--color-error-text); }

/* 썸네일 업로드 미리보기 */
.thumb-preview { margin-bottom: var(--space-3); }
.thumb-preview img { display: block; width: 100%; max-width: 240px; aspect-ratio: 16/10; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.thumb-remove { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-sub); cursor: pointer; }

/* 비밀번호 눈 아이콘 */
.input-pass { position: relative; }
.input-pass .input { padding-right: 44px; }
.pass-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-text-muted); cursor: pointer; }
.pass-toggle:hover { color: var(--color-text-sub); }

/* 체크박스 동의 행 */
.consent-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; }
.consent-row input { margin-top: 4px; }
.consent-row label { font-size: var(--fs-base); color: var(--color-text-sub); }
.consent-row a { color: var(--color-primary); text-decoration: underline; }

/* ===================== 9. 인증 페이지 (좁은 폼) ===================== */
.auth-wrap { max-width: 560px; margin: var(--space-7) auto; padding: 0 var(--space-4); }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.auth-title { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 var(--space-2); }
.auth-sub { color: var(--color-text-muted); margin: 0 0 var(--space-5); font-size: var(--fs-base); }
.auth-links { margin-top: var(--space-4); display: flex; justify-content: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.auth-links a:hover { color: var(--color-primary); }

/* ===================== 10. 히어로 ===================== */
.hero { position: relative; overflow: hidden; padding: var(--space-7) 0 var(--space-6); text-align: center; border-bottom: 1px solid var(--color-border); }
/* 배경 글로우 + 코드풍 도트 그리드 (장식, 콘텐츠 뒤) */
.hero::before { content: ''; position: absolute; left: 50%; top: -130px; width: 760px; height: 480px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(45,108,223,.16), rgba(45,108,223,0) 70%); pointer-events: none; z-index: 0; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(45,108,223,.13) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(closest-side at 50% 28%, #000, transparent 75%); mask-image: radial-gradient(closest-side at 50% 28%, #000, transparent 75%); opacity: .7; pointer-events: none; z-index: 0; }
.hero-inner { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-sub); box-shadow: var(--shadow-sm); }
.hero-eyebrow-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); animation: heroDot 2s ease-out infinite; }
@keyframes heroDot { 0% { box-shadow: 0 0 0 0 rgba(255,122,89,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,122,89,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,89,0); } }
.hero h1 { font-size: clamp(28px, 5vw, 38px); margin: 0 0 var(--space-3); letter-spacing: -.02em; }
.hero-grad { background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: var(--fs-md); color: var(--color-text-sub); margin: 0 auto var(--space-5); max-width: 540px; }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); }
.hero-point { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-sub); }
.hero-point svg { width: 15px; height: 15px; color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) { .hero-eyebrow-dot { animation: none; } }

/* 홈 섹션 헤더 / 구분 밴드 */
.home-band { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.section-title svg { width: 20px; height: 20px; }
.section-more { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-sub); }
.section-more:hover { color: var(--color-primary); }

/* 홈 소개(SEO 본문) — 밴드 안 중앙 정렬 */
.home-intro { text-align: center; }
.home-intro-title { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 var(--space-4); }
.home-intro-lead { max-width: 720px; margin: 0 auto var(--space-3); color: var(--color-text-sub); font-size: var(--fs-md); line-height: 1.85; }
.home-intro-lead:last-child { margin-bottom: 0; }
.home-intro strong { color: var(--color-text-strong); font-weight: 700; }

/* 하단 CTA 밴드 */
.cta-band { background: var(--gradient-cta); color: #fff; text-align: center; }
.cta-band .container-lg { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.cta-title { color: #fff; font-size: clamp(22px, 4vw, 30px); margin: 0 0 var(--space-3); letter-spacing: -.01em; }
.cta-sub { color: rgba(255,255,255,.92); margin: 0 auto var(--space-5); max-width: 520px; }
.cta-btn { background: #fff; color: var(--color-primary); min-height: 48px; padding: 12px 24px; font-size: var(--fs-md); }
.cta-btn:hover { background: var(--color-surface-alt); }

/* 소셜 로그인 버튼 (로그인/회원가입) */
.social-login { margin-top: var(--space-4); }
.social-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); margin: var(--space-4) 0; }
.social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.social-btn { width: 100%; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); font-weight: 600; }
.social-btn:hover { background: var(--color-surface-alt); }
.social-btn svg { width: 18px; height: 18px; flex: none; }
.social-naver { background: #03C75A; border-color: #03C75A; color: #fff; }
.social-naver:hover { background: #02b350; }
.social-kakao { background: #FEE500; border-color: #FEE500; color: #191600; }
.social-kakao:hover { background: #f4dc00; }
.social-note { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; line-height: 1.6; }
.social-note a { color: var(--color-text-sub); text-decoration: underline; }
.social-tip { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 10px var(--space-3); background: var(--color-info-bg); color: var(--color-info-text); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.6; text-align: left; }
.social-tip svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.social-tip strong { font-weight: 700; }

/* 프로필 — 연결된 계정 */
.linked-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.linked-row:first-child { border-top: none; padding-top: 0; }
.linked-prov { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-text-strong); }
.linked-prov svg { width: 20px; height: 20px; flex: none; }
.linked-row .linked-badge-on { margin-left: auto; color: var(--color-success-text); font-size: var(--fs-sm); font-weight: 700; }
.linked-row form, .linked-row > a:last-child { margin-left: 0; }
.linked-row .linked-badge-on + form { margin-left: var(--space-2); }
.linked-row > a.btn { margin-left: auto; }

/* 약관 / 개인정보처리방침 등 법적 문서 */
.legal-meta { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0 0 var(--space-5); }
.legal { color: var(--color-text-sub); font-size: var(--fs-base); line-height: 1.8; }
.legal h2 { font-size: var(--fs-md); font-weight: 800; color: var(--color-text-strong); margin: var(--space-6) 0 var(--space-2); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--space-3); }
.legal ul { margin: 0 0 var(--space-3); padding-left: 1.2rem; }
.legal ul ul { margin: var(--space-1) 0 var(--space-2); }
.legal li { margin-bottom: 5px; }
.legal a { color: var(--color-primary); text-decoration: underline; }
.legal-table-wrap { overflow-x: auto; margin: var(--space-2) 0 var(--space-3); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 380px; }
.legal th, .legal td { border: 1px solid var(--color-border); padding: 9px 11px; text-align: left; vertical-align: top; }
.legal th { background: var(--color-surface-alt); color: var(--color-text-sub); font-weight: 700; white-space: nowrap; }

/* ===================== 11. 앱 그리드 / 카드 ===================== */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.app-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: border-color .15s, box-shadow .15s; }
.app-card:hover { border-color: var(--color-border-strong); box-shadow: 0 6px 20px rgba(16,24,40,.10); }
.app-thumb-link { display: block; padding: var(--space-4) var(--space-4) 0; }
.app-thumb { aspect-ratio: 16/10; background: var(--color-surface-alt); object-fit: cover; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.app-thumb-empty { aspect-ratio: 16/10; background: var(--gradient-cta); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: var(--fs-xl); border-radius: var(--radius-md); }
.app-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.app-card-title { font-size: var(--fs-md); font-weight: 700; color: var(--color-text-strong); }
.app-card-tagline { font-size: var(--fs-sm); color: var(--color-text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.app-card-foot { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ===================== 12. 앱 상세 ===================== */
.app-detail-head { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.app-detail-thumb { width: 320px; max-width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-md); border: 1px solid var(--color-border); object-fit: cover; }
.app-detail-info { flex: 1; min-width: 260px; }
.app-detail-info h1 { font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.meta-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.meta-table th { text-align: left; width: 110px; padding: 8px var(--space-3) 8px 0; color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 700; vertical-align: top; }
.meta-table td { padding: 8px 0; font-size: var(--fs-base); border-bottom: 1px solid var(--color-border); }
.prose { white-space: pre-wrap; line-height: 1.8; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* 좋아요 */
.like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: #fff; font-weight: 700; cursor: pointer; min-height: 44px; }
.like-btn.is-liked { background: var(--color-error-bg); color: var(--color-error-text); border-color: transparent; }

/* 댓글 */
.comment { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.comment-head { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--fs-sm); }
.comment-author { font-weight: 700; color: var(--color-text-strong); }
.comment-body { margin-top: 4px; white-space: pre-wrap; }

/* ===================== 13. 필터 툴바 / 페이징 / 빈 상태 ===================== */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip { padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-sub); cursor: pointer; }
.chip.is-active { background: var(--color-primary); color: #fff; border-color: transparent; }

/* 앱 목록 페이지 (셸 메인 전체 폭) */
.app-list-page { padding: var(--space-6) var(--space-7); }
.apps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.apps-head .card-title { margin: 0; }
.app-list-page .app-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* 상단 필터바 */
.apps-filterbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.apps-filterbar .input { flex: 1 1 220px; min-width: 0; }
.apps-filterbar .select { flex: 0 1 auto; width: auto; }
.apps-filterbar .btn { flex: none; }

/* 카드/리스트 보기 토글 */
.view-toggle { display: inline-flex; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--color-text-muted); background: var(--color-surface); }
.view-toggle a + a { border-left: 1px solid var(--color-border); }
.view-toggle a.is-active { background: var(--color-primary); color: #fff; }
.view-toggle svg { width: 18px; height: 18px; }

/* 리스트형 */
.app-list { display: flex; flex-direction: column; gap: var(--space-3); }
.app-list-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .15s; }
.app-list-item:hover { border-color: var(--color-border-strong); }
.app-list-thumb { flex: none; width: 120px; aspect-ratio: 16/10; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-md); }
.app-list-main { flex: 1; min-width: 0; }
.app-list-title { font-size: var(--fs-md); font-weight: 700; color: var(--color-text-strong); }
.app-list-tagline { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 2px 0 var(--space-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.app-list-meta { flex: none; display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-text-muted); }
.app-list-meta svg { width: 14px; height: 14px; vertical-align: -2px; }

.pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text-sub); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .is-active { background: var(--color-primary); color: #fff; border-color: transparent; }

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); }
.empty-state svg { margin-bottom: var(--space-3); color: var(--color-border-strong); }

/* ===================== 14. 태그 입력 (앱 등록) ===================== */
.checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.check-pill { display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-base); }
.check-pill input { margin: 0; }
.check-pill:has(input:checked) { border-color: var(--color-primary); background: var(--color-info-bg); }

/* ===================== 15. 관리자 셸 (가이드 §12) ===================== */
.admin-body { background: var(--color-surface-alt); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-side { position: fixed; inset: 0 auto 0 0; width: 248px; height: 100vh; display: flex; flex-direction: column; background: var(--color-surface); border-right: 1px solid var(--color-border); overflow-y: auto; z-index: 60; }
.admin-side-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--color-border); font-weight: 800; font-size: var(--fs-lg); }
.admin-side-brand .brand-mark { color: var(--color-primary); }
.admin-side-body { flex: 1; padding: var(--space-4); }
.admin-main { flex: 1; min-width: 0; margin-left: 248px; display: flex; flex-direction: column; }
.admin-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--color-border); }
.admin-topbar h1 { margin: 0; font-size: var(--fs-xl); }
.admin-topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.admin-main-inner { padding: var(--space-6); }

.dash-user { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.dash-avatar { flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--gradient-cta); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dash-user-name { display: block; font-weight: 700; color: var(--color-text-strong); }
.dash-user-sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-section { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); padding: var(--space-3) var(--space-2) var(--space-1); }
.dash-nav a { display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-sub); font-weight: 600; }
.dash-nav a svg { width: 18px; height: 18px; flex: none; }
.dash-nav a:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.dash-nav a.is-active { background: var(--color-primary); color: #fff; }
.dash-nav a.is-danger { color: var(--color-error-text); }
.dash-nav a.is-danger:hover { background: var(--color-error-bg); }
.dash-nav-badge { margin-left: auto; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.dash-nav a.is-active .dash-nav-badge { background: rgba(255,255,255,.25); }
.dash-divider { height: 1px; background: var(--color-border); margin: var(--space-3) 0; }

/* 회원 대시보드 셸 (좌측 사이드바) — 관리자 셸과 별개 */
.app-body { background: var(--color-surface-alt); }
.app-shell { display: flex; min-height: 100vh; }
.app-side { position: fixed; inset: 0 auto 0 0; width: 248px; height: 100vh; display: flex; flex-direction: column; background: var(--color-surface); border-right: 1px solid var(--color-border); overflow-y: auto; z-index: 60; }
.app-side-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--color-border); font-weight: 800; font-size: var(--fs-lg); color: var(--color-text-strong); }
.app-side-brand .brand-mark { color: var(--color-primary); }
.app-side-body { flex: 1; padding: var(--space-4); }
.app-main { flex: 1; min-width: 0; margin-left: 248px; display: flex; flex-direction: column; }
.app-topbar { display: none; }
.app-nav-toggle { flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.app-nav-backdrop { display: none; }

/* 회원 사이드바 — 테크니컬 디테일 (애니메이션/글로우, 보라색 미사용) */
.app-side-brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-cta); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 3px 12px rgba(45,108,223,.4); }
.app-side-brand .brand-name { background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.app-side-brand .brand-caret { color: var(--color-accent); font-weight: 800; margin-left: 1px; animation: caretBlink 1.1s steps(1) infinite; }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.app-side .dash-avatar { position: relative; }
.app-side .dash-avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid var(--color-surface); animation: statusPulse 2.2s ease-out infinite; }
@keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.app-side .dash-nav-section::before { content: '// '; color: var(--color-accent); font-weight: 800; }
.app-side .dash-nav a { position: relative; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; animation: navIn .42s ease backwards; }
.app-side .dash-nav a svg { transition: transform .18s ease; }
.app-side .dash-nav a:hover { background: var(--color-surface-alt); color: var(--color-primary); transform: translateX(3px); }
.app-side .dash-nav a:hover svg { transform: scale(1.12); }
.app-side .dash-nav a.is-active { background: var(--gradient-cta); color: #fff; box-shadow: 0 5px 16px rgba(45,108,223,.35); }
.app-side .dash-nav a.is-active:hover { transform: none; }
.app-side .dash-nav a:nth-of-type(1) { animation-delay: .04s; }
.app-side .dash-nav a:nth-of-type(2) { animation-delay: .09s; }
.app-side .dash-nav a:nth-of-type(3) { animation-delay: .14s; }
.app-side .dash-nav a:nth-of-type(4) { animation-delay: .19s; }
.app-side .dash-nav a:nth-of-type(5) { animation-delay: .24s; }
@keyframes navIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .app-side-brand .brand-caret, .site-header .brand-caret, .app-side .dash-avatar::after, .app-side .dash-nav a { animation: none; }
}

/* 통계 카드 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.stat-card .num { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-text-strong); }
.stat-card .label { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* 관리자 테이블 */
.admin-listbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead th { text-align: left; padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.admin-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.admin-table tbody tr:hover { background: var(--color-surface-alt); }
.admin-table .col-title { font-weight: 600; color: var(--color-text-strong); }
.admin-table .col-actions { text-align: right; white-space: nowrap; }
.cell-sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }

.row-actions { position: relative; display: inline-block; }
.row-actions-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 160px; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: none; }
.row-actions.is-open .row-actions-menu { display: block; }
.row-actions-menu form { margin: 0; }
.row-actions-menu a, .row-actions-menu button { display: block; width: 100%; text-align: left; padding: 9px var(--space-3); border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-sub); white-space: nowrap; cursor: pointer; font-size: var(--fs-base); }
.row-actions-menu a:hover, .row-actions-menu button:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.row-actions-menu button.is-danger { color: var(--color-error-text); }

.admin-nav-toggle { display: none; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.admin-nav-backdrop { display: none; }
.inline-form { display: flex; gap: var(--space-2); align-items: center; }
.inline-form .input { width: auto; }

/* ===================== 16. 반응형 ===================== */
/* LG 이하: 앱 그리드 2열 */
@media (max-width: 992px) {
  .app-grid { grid-template-columns: repeat(2, 1fr); }
}
/* MD 이하(768px): 1열, 관리자 셸 세로 + 드로어 + 테이블 카드 */
@media (max-width: 768px) {
  .app-grid { grid-template-columns: 1fr; }

  /* 상단 헤더 모바일 햄버거 드롭다운 */
  .site-header-inner { position: relative; }
  .site-nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4) var(--space-4);
    display: none;
  }
  .site-header.is-nav-open .site-nav { display: flex; }
  .site-nav a:not(.btn) { padding: 12px var(--space-3); font-size: var(--fs-base); }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav a:not(.btn):hover, .site-nav a:not(.btn).is-active { background: var(--color-surface-alt); border-radius: var(--radius-sm); }
  .site-nav .btn { width: 100%; margin-top: var(--space-2); }

  .app-list-page { padding: var(--space-4); }
  .app-list-thumb { width: 84px; }
  .app-list-meta { flex-direction: column; align-items: flex-end; gap: 4px; }

  /* 푸터 — 모바일 2열, 브랜드 전체폭, 하단바 세로 */
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .footer-copy { align-items: flex-start; }

  .app-shell { flex-direction: column; }
  .app-topbar { display: flex; align-items: center; gap: var(--space-3); position: sticky; top: 0; z-index: 40; padding: var(--space-3) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .app-nav-toggle { display: inline-flex; }
  .app-side { position: fixed; top: 0; left: 0; width: 264px; max-width: 82vw; height: 100vh; transform: translateX(-100%); transition: transform .3s ease; z-index: 80; }
  .app-shell.is-nav-open .app-side { transform: translateX(0); }
  .app-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; }
  .app-shell.is-nav-open .app-nav-backdrop { display: block; }
  .app-main { margin-left: 0; }

  .admin-shell { flex-direction: column; }
  .admin-nav-toggle { display: inline-flex; }
  .admin-side { position: fixed; top: 0; left: 0; width: 264px; max-width: 82vw; height: 100vh; transform: translateX(-100%); transition: transform .3s ease; z-index: 80; }
  .admin-shell.is-nav-open .admin-side { transform: translateX(0); }
  .admin-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; }
  .admin-shell.is-nav-open .admin-nav-backdrop { display: block; }
  .admin-main { margin-left: 0; }
  .admin-topbar, .admin-main-inner { padding: var(--space-4); }

  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface); }
  .admin-table tbody td { border: none; padding: var(--space-1) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .admin-table tbody td::before { content: attr(data-label); flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); }
  .admin-table .col-actions { justify-content: flex-start; margin-top: var(--space-2); }
  .row-actions-menu { right: auto; left: 0; }
}

/* ===================== 17. 맨 위로 버튼 (원형 진행률) — 전 페이지 공통 ===================== */
#scrollTopBtn {
  position: fixed; bottom: 24px; right: 24px; width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
  z-index: 990; -webkit-tap-highlight-color: transparent;
}
#scrollTopBtn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#scrollTopBtn:hover { transform: translateY(-3px); }
.scroll-top-bg { position: absolute; inset: 0; border-radius: 50%; background: #1c2430; box-shadow: var(--shadow-md); transition: background-color .2s ease, box-shadow .2s ease; }
#scrollTopBtn:hover .scroll-top-bg { background: #0f1722; box-shadow: 0 6px 22px rgba(16,24,40,.3); }
.scroll-progress-ring { position: absolute; width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-progress-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.scroll-progress-fill { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset .12s linear; }
.scroll-top-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; user-select: none; }
.scroll-top-arrow { width: 14px; height: 14px; color: rgba(255,255,255,.95); display: block; }
#scrollTopBtn:hover .scroll-top-arrow { animation: arrowBounce .45s ease forwards; }
@keyframes arrowBounce { 0% { transform: translateY(0); } 35% { transform: translateY(-4px); } 65% { transform: translateY(-1px); } 100% { transform: translateY(-2px); } }
.scroll-top-pct { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.82); line-height: 1; letter-spacing: -.3px; }
@media (prefers-reduced-motion: reduce) {
  #scrollTopBtn, #scrollTopBtn:hover { transition: opacity .2s ease; transform: none; }
  #scrollTopBtn:hover .scroll-top-arrow { animation: none; }
}