/* ===== Cinematic Dark — base theme (Slice 1) ===== */
:root {
  --bg: #0A0A0B;
  --bg-elev: #141416;
  --line: #26262b;
  --text: #EDEDED;
  --muted: #9a9aa2;
  --gold: #C9A24B;
  --gold-dim: #8d7236;
  --ink: #ffffff;                  /* 본문 강조 텍스트(다크 배경 2차 강조) */
  --body-fg: #e4e4e7;              /* 본문 기본 글자(흰색보다 약간 낮춰 장문 피로↓) */
  --hl: rgba(201,162,75,.30);      /* 형광펜 하이라이트 */
  --hl-soft: rgba(201,162,75,.08); /* 요약/콜아웃 바탕 */
  --maxw: 1280px;
  --radius: 10px;
  --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }

/* Header / Nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,11,0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { font-weight: 700; letter-spacing: 0.18em; font-size: 18px; text-transform: uppercase; }
.brand b { color: var(--gold); }
.nav-links { display: flex; gap: 22px; font-size: 14px; }
.nav-links a:hover { color: var(--gold); }

/* Hero */
.hero {
  padding: 110px 0 70px;
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.05; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.02em;
}
.hero p { color: var(--muted); font-size: clamp(15px, 2vw, 19px); max-width: none; word-break: keep-all; overflow-wrap: break-word; }
.hero .accent { color: var(--gold); }

/* Category filter */
.filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 36px 0 8px; }
.pill {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; color: var(--muted);
  transition: all .2s ease;
}
.pill:hover { border-color: var(--gold-dim); color: var(--text); }
.pill.active { background: var(--gold); border-color: var(--gold); color: #1a1500; font-weight: 600; }

/* Works grid */
.works {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 28px 0 80px;
}
.card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s ease;
}
.card:hover { transform: translateY(-6px); border-color: var(--gold-dim);
  box-shadow: 0 0 36px rgba(201,162,75,.22), 0 18px 40px rgba(0,0,0,.45); }
.card .thumb {
  aspect-ratio: 16/9; background: #000 center/cover no-repeat;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.card .thumb .ph { color: #3a3a40; font-size: 13px; letter-spacing: .1em; }
.card .body { padding: 16px 18px 20px; }
.card .cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.card h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 700; }
.card .desc { color: var(--muted); font-size: 14px; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.empty { padding: 80px 0; text-align: center; color: var(--muted); }

/* Detail */
.work-detail { padding: 60px 0 90px; }
.work-detail .back { font-size: 13px; color: var(--muted); }
.work-detail h1 { font-size: clamp(28px, 4vw, 48px); margin: 18px 0 6px; }
.player { aspect-ratio: 16/9; width: 100%; background: #000; border-radius: var(--radius);
  overflow: hidden; margin: 24px 0 30px; border: 1px solid var(--line); }
.player iframe { width: 100%; height: 100%; border: 0; }
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin: 24px 0; }
.meta-grid .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.meta-grid .v { font-size: 16px; margin-top: 4px; }
.content-body { font-size: 16px; line-height: 1.8; }
.content-body img { border-radius: 8px; margin: 16px 0; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 30px 0; }
.gallery img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.adjacent { display: flex; justify-content: space-between; gap: 16px; margin-top: 50px;
  border-top: 1px solid var(--line); padding-top: 24px; }
.adjacent a { color: var(--muted); font-size: 14px; }
.adjacent a:hover { color: var(--gold); }

/* Buttons & forms */
.btn {
  display: inline-block; background: var(--gold); color: #1a1500; font-weight: 700;
  border: 0; border-radius: 8px; padding: 12px 22px; font-size: 14px; cursor: pointer;
  transition: filter .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: #b23b3b; color: #fff; }
.btn.sm { padding: 7px 12px; font-size: 12.5px; }
.btn.xs { padding: 4px 9px; font-size: 11px; border-radius: 6px; }

label { display: block; font-size: 13px; color: var(--muted); margin: 16px 0 6px; }
input[type=text], input[type=password], input[type=url], input[type=email], input[type=tel], input[type=number], input[type=search], textarea, select {
  width: 100%; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 11px 13px; font-size: 14px; font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold-dim); }
textarea { resize: vertical; min-height: 120px; }
.checkbox-row { display: flex; gap: 24px; align-items: center; margin-top: 16px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
.checkbox-row input { width: auto; }

/* About */
.section-tag { display: inline-block; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.about-section { padding: 90px 0; border-top: 1px solid var(--line); }
.about-lead { font-size: clamp(28px, 4.5vw, 52px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 48px; word-break: keep-all; }
.about-lead .accent { color: var(--gold); }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.about-bio p { color: var(--muted); font-size: 16px; line-height: 1.95; margin: 0 0 18px; }
.about-stats { display: flex; flex-wrap: wrap; gap: 36px 48px; }
.stat-item .stat-num { font-size: 46px; font-weight: 800; line-height: 1; }
.stat-item .stat-num span { color: var(--gold); }
.stat-item .stat-cap { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 60px; border-top: 1px solid var(--line); padding-top: 44px; }
.about-block h3 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li { font-size: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-list li::before { content: "—"; color: var(--gold); margin-right: 12px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.about-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 13px; color: var(--text); transition: border-color .2s; }
.about-tags span:hover { border-color: var(--gold-dim); }
.about-sub { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 60px 0 22px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step { border-top: 2px solid var(--gold-dim); padding-top: 16px; }
.process-step .pnum { font-size: 13px; color: var(--gold); letter-spacing: 0.1em; font-weight: 700; }
.process-step h4 { font-size: 17px; margin: 10px 0 8px; }
.process-step p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.client-list { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.client-list span { border: 1px solid var(--line); border-radius: 8px; padding: 12px 20px; font-size: 14px; letter-spacing: 0.05em; color: var(--muted); }
.connect-links { display: flex; flex-wrap: wrap; gap: 26px; }
.connect-links a { font-size: 16px; color: var(--text); border-bottom: 1px solid var(--gold-dim); padding-bottom: 3px; }
.connect-links a:hover { color: var(--gold); }
@media (max-width: 768px) {
  .about-grid, .about-cols { grid-template-columns: 1fr; gap: 32px; }
  .about-section { padding: 60px 0; }
  .process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact-section { padding: 70px 0 90px; max-width: 720px; }
.contact-title { font-size: clamp(28px, 4vw, 44px); margin: 0 0 8px; font-weight: 800; letter-spacing: -0.01em; }
.contact-form { margin-top: 24px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.loadmore-wrap { text-align: center; padding: 8px 0 40px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--muted); font-size: 13px; }

/* Admin */
.admin-shell { display: flex; min-height: 100vh; }
.admin-side { width: 220px; background: var(--bg-elev); border-right: 1px solid var(--line); padding: 28px 18px; }
.admin-side .brand { display: block; margin-bottom: 28px; font-size: 15px; }
.admin-side nav a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; }
.admin-side nav a:hover, .admin-side nav a.active { background: var(--bg); color: var(--text); }
.admin-main { flex: 1; padding: 36px 40px; max-width: 920px; }
.admin-main h1 { font-size: 26px; margin: 0 0 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stat .n { font-size: 32px; font-weight: 800; color: var(--gold); }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 4px; }

table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th, table.list td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
table.list th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); }
.badge.on { color: var(--gold); border-color: var(--gold-dim); }
.badge.off { color: var(--muted); }

/* Uploader (admin) */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: 10px; padding: 22px; text-align: center;
  color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--gold-dim); background: rgba(201,162,75,.06); }
.thumb-preview { margin-top: 12px; }
/* 미리보기를 실제 카드와 동일하게 16:9로 — 어떤 비율을 올려도 16:9로 보임 */
.thumb-preview img { width: 300px; max-width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.gallery-previews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.gallery-previews .gp { position: relative; }
.gallery-previews img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.gallery-previews .rm {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7); color: #fff; border: 0;
  border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1;
}
.uploading { opacity: .6; pointer-events: none; }

/* Analytics charts (admin) */
.chart-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.chart-card h2 { font-size: 16px; margin: 0 0 16px; }
.chart-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.bar-label { width: 64px; flex: 0 0 64px; color: var(--muted); text-align: right; }
.bar-track { flex: 1; background: var(--bg); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--gold); border-radius: 6px; min-width: 2px; }
.bar-val { width: 48px; flex: 0 0 48px; text-align: right; color: var(--text); }
@media (max-width: 640px) { .chart-2col { grid-template-columns: 1fr; } }

/* Inquiry cards (admin) */
.inquiry-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.inquiry-card.unread { border-color: var(--gold-dim); }
.iq-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iq-head strong { font-size: 16px; }
.iq-body { margin: 12px 0 14px; white-space: pre-wrap; color: var(--text); font-size: 14px; line-height: 1.7; }
.iq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reply-box { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.reply-sub { margin-bottom: 8px; }
.macro-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.macro-row .suggested { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }
.reply-body { min-height: 170px; }

/* Login */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 360px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 14px; padding: 36px 32px; }
.login-card h1 { font-size: 22px; margin: 0 0 6px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.alert { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.alert.err { background: rgba(178,59,59,.15); border: 1px solid #5a2a2a; color: #f0b4b4; }
.alert.ok { background: rgba(201,162,75,.12); border: 1px solid var(--gold-dim); color: var(--gold); }

/* ===== Cinematic layer (Pass 4) ===== */
/* Hero WebGL background */
.hero { position: relative; overflow: hidden; }
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero-inner { position: relative; z-index: 1; }
.hero-reel { margin-top: 40px; max-width: 920px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); overflow: hidden; background: #000;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
  transition: box-shadow .45s ease; }
.hero-reel:hover { box-shadow: 0 0 70px rgba(201,162,75,.40), 0 26px 70px rgba(0,0,0,.55); }
.hero-reel iframe { width: 100%; height: 100%; border: 0; display: block; }

.card-meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.btn.ghost.liked { color: var(--gold); border-color: var(--gold); }

/* 갤러리 라이트박스 */
.gallery img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox .lb-img { max-width: 94vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox .lb-close { position: absolute; top: 16px; right: 22px; background: transparent; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

/* Split-text headline */
.hero-title { font-size: clamp(34px, 6vw, 72px); line-height: 1.05; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.02em; word-break: keep-all; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line.accent { color: var(--gold); }
.hero-title .w { display: inline-block; overflow: hidden; }
.hero-title .w .wi { display: inline-block; will-change: transform; }

/* Magnetic */
[data-magnetic] { display: inline-block; transition: transform .25s cubic-bezier(.2,.7,.2,1); }

/* Video on hover */
.card .thumb { overflow: hidden; }
.hover-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.hover-video.show { opacity: 1; }

/* Page transition curtain */
.curtain {
  position: fixed; inset: 0; background: var(--bg); z-index: 200; pointer-events: none;
  transform: translateY(100%); transition: transform .5s cubic-bezier(.76,0,.24,1);
}
.curtain.active { transform: translateY(0); }

/* Film grain overlay */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 150; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift {
  0% { background-position: 0 0; } 100% { background-position: 120px 120px; }
}

/* Responsive */
@media (max-width: 1024px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .gallery { grid-template-columns: 1fr; }
  .hero { padding: 90px 0 50px; }
  .hero-gl { display: none; }            /* 모바일 WebGL 비활성 (CSS 폴백 배경) */
  .grain { display: none; }
}
@media (max-width: 640px) {
  .works { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .stat-grid { grid-template-columns: 1fr; }

  /* ── 관리자 페이지 모바일 ── */
  .admin-shell { flex-direction: column; }
  .admin-side { width: 100%; padding: 10px 12px; }
  .admin-side .brand { margin-bottom: 8px; }
  /* 세로로 길게 쌓이던 좌측 메뉴 → 가로 스크롤 한 줄로 */
  .admin-side nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 4px; scroll-behavior: smooth; }
  .admin-side nav a { flex: 0 0 auto; padding: 7px 11px; font-size: 13px; }
  /* 모바일에선 핵심 메뉴만: 메일·운영동기화·AI설정·관리자설정·사이트보기 숨김 */
  .admin-side nav a[href*="/mail.jsp"],
  .admin-side nav a[href*="/deploy.jsp"],
  .admin-side nav a[href*="/ai.jsp"],
  .admin-side nav a[href*="/admins.jsp"],
  .admin-side nav a[target="_blank"] { display: none; }
  .admin-main { padding: 16px 14px; max-width: 100%; }
  .admin-main h1 { font-size: 21px; margin-bottom: 14px; }
  /* 넓은 데이터 표 → 가로 스크롤(잘림·과밀 방지) */
  .admin-main table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12px; }
  .admin-main th, .admin-main td { padding: 7px 8px; }
  /* '오늘의 추천 키워드' IT/스포츠 2열 → 1열 */
  .hot-grid { grid-template-columns: 1fr !important; }
  /* 입력/버튼 풀폭 정리 */
  .admin-main input, .admin-main select, .admin-main textarea { max-width: 100%; box-sizing: border-box; }
}

/* 모션 최소화 선호 시 무거운 효과/그레인 제거 */
@media (prefers-reduced-motion: reduce) {
  .grain, .hero-gl { display: none !important; }
}

/* ===== Blog — light theme (same tone & manner, white version) ===== */
body.light {
  --bg: #ffffff;
  --bg-elev: #f7f6f2;
  --line: #e6e3da;
  --text: #1d1d20;
  --muted: #6c6c74;
  --gold: #9c7616;       /* 흰 배경 대비 위해 골드를 더 진하게 */
  --gold-dim: #cdb478;
  --ink: #111114;        /* 강조 텍스트(흰 배경용) — 다크 테마 #fff 를 덮어씀 */
  --body-fg: #2b2b30;    /* 본문 글자(흰 배경용) — 다크 테마 #e4e4e7 을 덮어씀 */
  --hl: rgba(201,162,75,.34);
  --hl-soft: rgba(156,118,22,.08);
}
body.light .site-header {
  background: rgba(255,255,255,0.82);
  border-bottom: 1px solid var(--line);
}
body.light .pill.active { color: #fff; }
body.light .btn { color: #1a1500; }

.blog-hero { padding: 64px 0 26px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.blog-hero p { color: var(--muted); font-size: 16px; max-width: 640px; margin: 0; }
.back-portfolio {
  font-size: 13px; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; color: var(--text); transition: all .2s ease; white-space: nowrap;
}
.back-portfolio:hover { border-color: var(--gold-dim); color: var(--gold); }

/* Blog header: search + portfolio button */
.header-actions { display: flex; align-items: center; gap: 10px; }
.blog-search { display: none; align-items: center; }
.blog-search.open { display: flex; }
.blog-search input {
  width: 190px; border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px;
  padding: 7px 14px; font-size: 13px; background: var(--bg);
}
.blog-search button {
  border: 1px solid var(--line); border-left: 0; border-radius: 0 999px 999px 0;
  background: var(--bg-elev); color: var(--text); padding: 7px 13px; font-size: 14px; cursor: pointer; line-height: 1;
}
.blog-search button:hover { color: var(--gold); }
@media (max-width: 640px) {
  .blog-search input { width: 130px; }
  .blog-search.open ~ #searchToggle { display: none; }
}

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0 70px; }
.blog-card .thumb { aspect-ratio: 16/9; background: #ebe9e2 center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.blog-card .thumb.no-thumb { background: linear-gradient(135deg, var(--gold-dim), #e6e3da); }
.blog-card .thumb.no-thumb span { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.blog-card .date { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 12px; }
/* 카드 높이/요소 위치 통일: 제목 1~2줄에 상관없이 발췌·날짜 정렬이 행마다 일치하도록 */
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card .body { display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-card h3 {
  line-height: 1.3; min-height: 2.6em;            /* 제목 2줄 높이 고정(1줄도 같은 공간) */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card .desc { line-height: 1.45; min-height: 2.9em; }   /* 발췌 2줄 높이 고정 */

/* Blog post detail */
.blog-article { padding: 46px 28px 30px; max-width: 1000px; }   /* 가로 패딩 — 모바일에서 글이 화면 끝에 붙지 않게 */
.blog-article .cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.blog-article h1 { font-size: clamp(28px, 4vw, 44px); margin: 10px 0 12px; line-height: 1.2; letter-spacing: -0.01em; }
.post-meta { color: var(--muted); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 28px; }
.blog-body { font-size: 18px; line-height: 1.75; color: var(--body-fg); text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.blog-body img { border-radius: 10px; margin: 18px 0; }

/* Aligned/resizable image figures (shared: public blog + admin editor) */
figure.img-fig { margin: 18px 0; }
figure.img-fig img { display: inline-block; max-width: 100%; height: auto; border-radius: 8px; margin: 0; }
figure.al-left { text-align: left; }
figure.al-center { text-align: center; }
figure.al-right { text-align: right; }
/* 문단 정렬 래퍼 (블로그 본문 + 포폴 본문 + 에디터) */
.blog-body .al-left, .content-body .al-left, #editor .al-left { text-align: left; }
.blog-body .al-center, .content-body .al-center, #editor .al-center { text-align: center; }
.blog-body .al-right, .content-body .al-right, #editor .al-right { text-align: right; }
.blog-body h2 { font-size: 25px; font-weight: 700; color: var(--ink); margin: 52px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); line-height: 1.4; word-break: keep-all; }
.blog-body h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 34px 0 12px; word-break: keep-all; }
.blog-body p { margin: 0 0 1.3em; }
/* 에디터에서 넣은 빈 줄(빈 문단)을 결과에서도 한 줄 높이로 유지 → 에디터와 동일한 간격 */
.blog-body p:empty, .content-body p:empty { min-height: 1em; }
.blog-body ul, .blog-body ol { margin: 0 0 1.3em; padding-left: 22px; }
.blog-body li { margin: 8px 0; }
.blog-body a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.blog-body blockquote { border-left: 3px solid var(--gold-dim); margin: 24px 0; padding: 6px 18px; color: var(--muted); }
.blog-body .player { margin: 8px 0 26px; }

/* ── 사실기반 글: 표·콜아웃·타이포 (blog-body + content-body 공용, 에디터에도 적용) ── */
.blog-body table, .content-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; line-height: 1.6; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.blog-body th, .blog-body td, .content-body th, .content-body td { padding: 11px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-body th:last-child, .blog-body td:last-child, .content-body th:last-child, .content-body td:last-child { border-right: 0; }
.blog-body tbody tr:last-child td, .content-body tbody tr:last-child td { border-bottom: 0; }
.blog-body thead th, .content-body thead th { background: rgba(201,162,75,.12); font-weight: 700; border-bottom: 2px solid var(--gold-dim); }
.blog-body tbody tr:nth-child(even), .content-body tbody tr:nth-child(even) { background: rgba(0,0,0,.025); }
.blog-body caption, .content-body caption { caption-side: bottom; font-size: 12px; color: var(--muted); padding-top: 8px; text-align: left; }
.blog-body .callout, .content-body .callout { border: 1px solid var(--gold-dim); background: rgba(201,162,75,.07); border-radius: 12px; padding: 14px 18px; margin: 22px 0; }
.blog-body .callout > *:last-child, .content-body .callout > *:last-child { margin-bottom: 0; }
.blog-body blockquote.tip, .content-body blockquote.tip { border-left: 4px solid var(--gold); background: rgba(201,162,75,.06); border-radius: 0 10px 10px 0; color: inherit; padding: 12px 18px; }
.blog-body h4 { font-size: 17px; margin: 22px 0 8px; font-weight: 700; }
.blog-body ul li::marker, .content-body ul li::marker { color: var(--gold); }
.blog-body strong, .content-body strong { font-weight: 700; color: var(--ink); }
/* ── 가독성 강조: 형광펜 하이라이트 · 핵심요약 박스 · FAQ ── */
.blog-body .hl, .blog-body mark, .content-body .hl, .content-body mark {
  background: linear-gradient(180deg, transparent 58%, var(--hl) 58%); padding: 0 2px; color: inherit; border-radius: 2px; }
.blog-body .post-summary, .content-body .post-summary {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0 0 34px; }
.blog-body .post-summary .summary-title, .content-body .post-summary .summary-title {
  display: block; font-size: 16px; font-weight: 700; color: var(--ink); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--gold-dim); }
.blog-body .post-summary ul, .content-body .post-summary ul { margin: 0; padding-left: 20px; }
.blog-body .post-summary li, .content-body .post-summary li { margin: 6px 0; }
.blog-body .faq-item, .content-body .faq-item { border-top: 1px solid var(--line); padding: 16px 0; }
.blog-body .faq-item:last-child, .content-body .faq-item:last-child { border-bottom: 1px solid var(--line); }
.blog-body .faq-item .q, .content-body .faq-item .q { font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.blog-body .faq-item .a, .content-body .faq-item .a { margin: 0; color: var(--body-fg); }
/* 이미지 자리표시 — 사용자가 직접 사진을 넣을 위치(회색 점선 박스) */
.blog-body .img-ph, .content-body .img-ph { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 14px 16px; margin: 18px auto; text-align: center; font-size: 13px; }
/* 본문 이미지 기본 센터 정렬(생성·업로드 공통). 명시적으로 al-left/al-right 지정 시에만 좌/우. */
.blog-body figure.img-fig, .content-body figure.img-fig { text-align: center; }
.blog-body > p > img, .content-body > p > img { display: block; margin-left: auto; margin-right: auto; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 8px; }
.tag-list .tag { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--muted); }

/* Comments */
.comments { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 28px; max-width: 760px; }
.comments h2 { font-size: 18px; margin: 0 0 18px; }
.comment { border-bottom: 1px solid var(--line); padding: 14px 0; }
.comment .c-head { display: flex; gap: 10px; align-items: baseline; }
.comment .c-author { font-weight: 700; font-size: 14px; }
.comment .c-date { font-size: 12px; color: var(--muted); }
.comment .c-body { margin-top: 6px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.comment-empty { color: var(--muted); font-size: 14px; padding: 6px 0 18px; }
.comment-form { margin-top: 24px; }
.comment-form .row2 { display: flex; gap: 12px; }
.comment-form .row2 > * { flex: 1; }

/* Comment thread: admin badge, replies, inline reply/edit forms */
.comment.admin { background: rgba(156,118,22,.06); border-radius: 8px; padding: 12px 14px; border-bottom: 0; }
.c-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--gold);
  border-radius: 999px; padding: 2px 8px; }
.c-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.replies { margin-left: 22px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--line); }
.replies .comment { border-bottom: 1px solid var(--line); }
.replies .comment:last-child { border-bottom: 0; }
.c-forms:not(:empty) { margin: 10px 0 4px; }
.c-inline-form { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.c-inline-form .row2 { display: flex; gap: 10px; }
.c-inline-form .row2 > * { flex: 1; }
.c-inline-form textarea { min-height: 70px; }
.c-inline-form .form-actions { margin-top: 8px; display: flex; gap: 8px; }
.comment-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 4px; }
.admin-replies { margin-left: 22px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--line); }
.admin-replies .inquiry-card { margin-bottom: 10px; }

/* Category settings */
.cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cat-list { list-style: none; padding: 0; margin: 0 0 14px; }
.cat-list li { display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.cat-list li:last-child { border-bottom: 0; }
.cat-list .cat-name { flex: 1; padding: 8px 10px; }
.cat-ord { display: inline-flex; flex-direction: column; gap: 2px; }
.cat-ord .ord-btn { background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
  width: 26px; height: 16px; line-height: 1; font-size: 9px; cursor: pointer; border-radius: 4px; padding: 0; }
.cat-ord .ord-btn:hover { border-color: var(--gold); color: var(--gold); }
.cat-add { display: flex; gap: 8px; }
.cat-add input { flex: 1; }
@media (max-width: 700px) { .cat-cols { grid-template-columns: 1fr; } }

/* Admin blog editor helpers (dark) */
.ai-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.ai-toolbar .hint { font-size: 12px; color: var(--muted); }
.tag-input-row { display: flex; gap: 8px; align-items: stretch; }
.tag-input-row input { flex: 1; }

/* Editor image controls (admin blog editor only) */
#editor figure.img-fig { position: relative; }
#editor figure.img-fig.sel img { outline: 2px solid var(--gold); outline-offset: 2px; }
.imgtool {
  position: absolute; z-index: 60; display: none; gap: 4px; padding: 5px;
  background: #1b1b1f; border: 1px solid #34343a; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.imgtool.show { display: flex; }
.imgtool button {
  background: #2a2a30; color: #ededed; border: 1px solid #3a3a42; border-radius: 6px;
  width: 30px; height: 30px; font-size: 14px; cursor: pointer; line-height: 1; padding: 0;
}
.imgtool button:hover { border-color: var(--gold); color: var(--gold); }
.imgtool button.on { background: var(--gold); color: #1a1500; border-color: var(--gold); }
.imgtool .sep { width: 1px; background: #3a3a42; margin: 2px 2px; }
.img-resize {
  position: absolute; z-index: 60; display: none; width: 16px; height: 16px;
  background: var(--gold); border: 2px solid #1b1b1f; border-radius: 50%; cursor: nwse-resize;
}
.img-resize.show { display: block; }
.img-fit {
  position: absolute; z-index: 61; display: none; transform: translate(-50%, -50%);
  background: rgba(20,20,22,.92); color: #fff; border: 1px solid var(--gold);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.img-fit.show { display: block; }
.img-fit:hover { background: var(--gold); color: #1a1500; }

@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .comment-form .row2 { flex-direction: column; }
}