/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  --primary: #25635a;
  --primary-dark: #1a4a43;
  --primary-light: color-mix(in srgb, var(--primary), white 88%);
  --accent: #c08b4f;
  --accent-dark: #a67440;
  --ink: #18231f;
  --muted: #5f6d68;
  --soft: #f5f1ea;
  --soft-alt: #f0ebe1;
  --line: #d9dfd8;
  --line-subtle: #e8ede7;
  --paper: #ffffff;
  --danger: #9f2d2d;
  --focus: #0f766e;
  --font-scale: 1;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 4px rgba(37, 55, 49, .06);
  --shadow-sm: 0 2px 10px rgba(37, 55, 49, .08);
  --shadow-md: 0 8px 28px rgba(37, 55, 49, .11);
  --shadow-lg: 0 20px 56px rgba(37, 55, 49, .14);
  --shadow-xl: 0 32px 80px rgba(37, 55, 49, .18);
  color-scheme: light;
  font-family: "PretendardVariable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-size: calc(15.5px * var(--font-scale));
  line-height: 1.65;
  letter-spacing: -.01em;
}

/* ─── Animations ─────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes progress-slide {
  from { transform: translateX(-120%); }
  to { transform: translateX(240%); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(1.2rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-1rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(.8rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* ─── Reset ──────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  color: var(--ink);
  background: #f7f5f0;
}

::selection {
  background: color-mix(in srgb, var(--primary), white 70%);
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

a,
button,
input,
textarea,
select {
  transition:
    border-color .18s ease,
    box-shadow   .18s ease,
    background   .18s ease,
    color        .18s ease,
    transform    .16s ease,
    opacity      .18s ease;
}

button:active:not(:disabled) {
  transform: scale(.96);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus), white 15%);
  outline-offset: 3px;
}

[v-cloak] {
  display: none;
}

/* ─── Skip link ──────────────────────────────────────────── */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  padding: .75rem 1rem;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

/* ─── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line-subtle);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(37, 99, 90, .07), 0 2px 16px rgba(37, 55, 49, .05);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: .85rem 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 14rem;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 9px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--primary), transparent 50%);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.brand small {
  max-width: 13rem;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* ─── Primary nav ────────────────────────────────────────── */
.primary-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

.primary-nav button {
  padding: .6rem 1rem;
  color: var(--muted);
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .93rem;
  white-space: nowrap;
  position: relative;
}

.primary-nav button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: left .2s ease, right .2s ease;
  opacity: 0;
}

.primary-nav button:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.primary-nav button:hover::after,
.primary-nav button.active::after {
  left: .75rem;
  right: .75rem;
  opacity: 1;
}

.primary-nav button.active {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 700;
}

/* ─── Button families ────────────────────────────────────── */
.admin-button,
.primary-button,
.ghost-button,
.icon-button,
.text-button,
.small-actions button,
.config-item button,
.editor-toolbar button,
.block-actions button,
.reply-state button {
  border-radius: var(--radius-sm);
}

.admin-button,
.primary-button,
.ghost-button,
.text-button,
.small-actions button,
.config-item button,
.editor-toolbar button,
.block-actions button,
.reply-state button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-button {
  gap: .4rem;
  padding: .6rem 1rem;
  color: #fff;
  background: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 2px 6px rgba(24, 35, 31, .2);
}

.admin-button:hover {
  background: color-mix(in srgb, var(--ink), white 18%);
  box-shadow: 0 4px 12px rgba(24, 35, 31, .25);
  transform: translateY(-1px);
}

.icon-button.mobile-menu {
  display: none;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--ink);
  background: #edf2ef;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
}

.icon-button:hover {
  background: #dde8e1;
  color: var(--primary);
}

.primary-button {
  min-height: 2.8rem;
  padding: .7rem 1.4rem;
  color: #fff;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: -.005em;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary), transparent 55%);
  border-radius: 8px;
}

.primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary), black 8%) 0%, var(--primary-dark) 100%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary), transparent 45%);
  transform: translateY(-2px);
}

.ghost-button {
  min-height: 2.8rem;
  padding: .66rem 1.1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-subtle);
  font-weight: 600;
  font-size: .93rem;
  border-radius: 7px;
}

.ghost-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary), white 35%);
  background: var(--primary-light);
  color: var(--primary);
}

.text-button {
  align-self: flex-start;
  padding: .4rem .7rem;
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 700;
  font-size: .88rem;
  border-radius: var(--radius-sm);
}

.text-button:hover {
  background: color-mix(in srgb, var(--primary), white 78%);
}

.danger-text {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger), white 91%);
}

.danger-text:hover {
  background: color-mix(in srgb, var(--danger), white 78%);
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 42rem;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem;
  background: linear-gradient(to bottom, transparent, #f7f5f0);
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(108deg, rgba(8, 24, 18, .86) 0%, rgba(8, 24, 18, .52) 45%, rgba(8, 24, 18, .12) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .18), transparent 65%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin-left: max(1.5rem, calc((100vw - 1200px) / 2));
  padding: 8rem 1.5rem 11rem;
  color: #fff;
  animation: fadeIn .8s ease both;
}

.eyebrow {
  margin: 0 0 .75rem;
  color: color-mix(in srgb, var(--accent), white 25%);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero h1,
.page-title-row h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hero p:not(.eyebrow) {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: 1.1rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hero-actions,
.form-actions,
.small-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero-actions {
  margin-top: 2.2rem;
}

.hero .ghost-button {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(10px);
}

.hero .ghost-button:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .65);
  color: #fff;
}

/* ─── Banner Carousel Controls ───────────────────── */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 26;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .32);
  transition: background .2s, border-color .2s, transform .15s;
}

.hero-arrow::before {
  content: '';
  display: block;
  width: .65rem;
  height: .65rem;
  border-top: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
}

.hero-arrow-prev { left: 1.5rem; }
.hero-arrow-prev::before { transform: rotate(-135deg) translate(-1px, 1px); }

.hero-arrow-next { right: 1.5rem; }
.hero-arrow-next::before { transform: rotate(45deg) translate(-1px, 1px); }

.hero-arrow:hover {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-50%) scale(1.1);
}

.hero-dots {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  gap: .6rem;
  padding: .45rem .8rem;
  background: rgba(0, 0, 0, .25);
  border-radius: 2rem;
  backdrop-filter: blur(6px);
}

.hero-dot {
  width: .55rem;
  height: .55rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  border: 0;
  transition: background .22s, transform .22s, width .22s;
}

.hero-dot.active {
  background: #fff;
  transform: scale(1.4);
  width: 1.4rem;
  border-radius: 4px;
}

/* ─── Stats Bar ──────────────────────────────────────────── */
.stats-bar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--primary), transparent 50%);
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .1);
  gap: .3rem;
  position: relative;
}

.stat-item:last-child {
  border-right: 0;
}

.stat-number {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
}

.stat-unit {
  font-size: 55%;
  font-weight: 700;
  margin-left: .15em;
  opacity: .88;
  letter-spacing: 0;
}

.stat-label {
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: .1rem;
}

/* ─── Intro section with optional image ──────────────────── */
.intro-section-wrap {
  background: #fff;
}

.intro-section-wrap.has-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 38rem;
}

.intro-image-col {
  position: relative;
  overflow: hidden;
}

.intro-image-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(255,255,255,.08));
}

.intro-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.intro-image-col:hover img {
  transform: scale(1.02);
}

.intro-text-col {
  /* inherits .section max-width padding when no image */
}

.intro-section-wrap.has-image .intro-text-col {
  padding: 5rem 4rem 5rem 4.5rem;
  max-width: none;
  margin: 0;
  align-self: center;
}

.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 10px;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary), transparent 55%);
  flex-shrink: 0;
}

/* ─── Section background wrappers ────────────────────────── */
.process-section-bg {
  background: #f7f9f7;
}

.board-overview-bg {
  background: #fff;
}

/* ─── Location section ───────────────────────────────────── */
.location-section-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 34rem;
  background: var(--soft);
}

.location-map-col {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--primary), white 76%) 0 9rem, transparent 9.2rem),
    linear-gradient(135deg, color-mix(in srgb, var(--primary), white 88%), color-mix(in srgb, var(--accent), white 88%));
  min-height: 30rem;
  overflow: hidden;
}

.location-map-col::before {
  content: "";
  position: absolute;
  inset: 2rem;
  opacity: .32;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary), white 42%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary), white 42%) 1px, transparent 1px);
  background-size: 3.4rem 3.4rem;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.location-map-col iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.map-activate-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.map-activate-overlay::after {
  content: '클릭하면 지도를 조작할 수 있습니다';
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .35rem .85rem;
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: .78rem;
  border-radius: 2rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.map-activate-overlay:hover::after {
  opacity: 1;
}

.location-info-col {
  padding: 4.5rem 3.5rem 4.5rem 4rem !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: center;
}

.location-info-col h2 {
  margin: .5rem 0 1.4rem;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.location-address {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 1.8rem;
  font-size: .97rem;
  color: var(--ink);
  font-weight: 500;
  padding: .9rem 1.1rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line-subtle);
}

.transport-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.transport-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1.1rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line-subtle);
  font-size: .92rem;
  transition: border-color .18s, box-shadow .18s;
}

.transport-item:hover {
  border-color: color-mix(in srgb, var(--primary), white 38%);
  box-shadow: var(--shadow-xs);
}

.transport-type {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--primary);
  min-width: 3.5rem;
  padding: .22rem .55rem;
  background: var(--primary-light);
  border-radius: 4px;
  text-align: center;
  font-size: .8rem;
}

.transport-desc {
  color: var(--muted);
  line-height: 1.55;
}

/* ─── Admin: stat-editor-item ────────────────────────────── */
.stat-editor-item {
  display: grid;
  grid-template-columns: 6rem 4rem 1fr auto;
  gap: .7rem;
  align-items: start;
  padding: .75rem 1rem;
  background: var(--soft);
  border-radius: var(--radius);
  border: 1px solid var(--line-subtle);
}

/* ─── Sections ───────────────────────────────────────────── */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5.5rem 1.5rem;
}

.section-heading {
  max-width: 50rem;
  margin-bottom: 2.8rem;
}

.section-heading.compact {
  max-width: none;
}

.section-heading h2,
.admin-panel h2,
.login-panel h2,
.editor-panel h2,
.post-detail h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.section-heading p:not(.eyebrow) {
  color: var(--muted);
  margin: .8rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.page-title-row p,
.feature-item p,
.board-card span,
.config-item span,
.site-footer p {
  color: var(--muted);
}

/* ─── Feature grid ───────────────────────────────────────── */
.feature-grid,
.board-grid,
.metric-grid {
  display: grid;
  gap: 1.1rem;
}

.feature-grid {
  grid-template-columns: repeat(var(--feature-count, 3), minmax(0, 1fr));
}

.feature-item,
.board-card,
.login-panel,
.editor-panel,
.admin-panel,
.config-item,
.metric-grid article {
  background: var(--paper);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.post-detail {
  background: var(--paper);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 2px 20px rgba(37, 99, 90, .07);
}

.feature-item {
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--line-subtle);
  box-shadow: 0 2px 12px rgba(37, 99, 90, .06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(37, 99, 90, .12);
  border-color: color-mix(in srgb, var(--primary), white 60%);
}

.feature-item > span:not(.feature-icon),
.feature-item > .feature-icon {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 10px;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary), transparent 55%);
}

.feature-item h3,
.board-card h3 {
  margin: 1rem 0 .45rem;
  font-size: 1.07rem;
  font-weight: 700;
  line-height: 1.35;
}

.feature-item p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.65;
}

/* ─── Board grid ─────────────────────────────────────────── */
.board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.latest-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.1rem;
}

.latest-board-panel {
  display: grid;
  gap: .9rem;
  padding: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}

.latest-board-panel:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary), white 55%);
}

.latest-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-subtle);
}

.latest-board-head p {
  margin: 0 0 .28rem;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.latest-board-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.005em;
}

.latest-post-list {
  display: grid;
  gap: .45rem;
}

.latest-post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.7rem;
  padding: .7rem .2rem;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid var(--line-subtle);
  text-align: left;
  gap: .5rem;
  transition: background .14s;
  border-radius: var(--radius-sm);
}

.latest-post-row:last-child {
  border-bottom: 0;
}

.latest-post-row strong {
  flex: 1;
  min-width: 0;
  font-size: .94rem;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-post-row::after {
  content: '›';
  color: var(--line);
  font-size: 1.1rem;
  font-weight: 300;
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}

.latest-post-row:hover strong {
  color: var(--primary);
}

.latest-post-row:hover::after {
  color: var(--primary);
  transform: translateX(2px);
}

.board-card {
  display: flex;
  min-height: 13rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem 1.4rem;
  transition: transform .24s ease, box-shadow .24s ease, border-color .2s ease;
  border-top: 3px solid transparent;
  border-bottom: 0;
}

.board-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--accent);
}

.board-card p {
  margin: 0 0 .5rem;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─── Page layout ────────────────────────────────────────── */
.page-section,
.admin-section {
  min-height: 44rem;
}

.page-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--line-subtle);
}

.page-title-row p {
  margin: .4rem 0 0;
  font-size: .95rem;
}

.board-search {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  gap: .5rem;
  align-items: end;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--soft), white 50%);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
}

.board-search .field {
  margin: 0;
}

.board-search button {
  min-height: 2.7rem;
  white-space: nowrap;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: start;
}

.post-list-wrap {
  display: grid;
  gap: .55rem;
}

/* ─── Mobile back button ─────────────────────────────────── */
.mobile-back-btn {
  display: none;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1.2rem;
  padding: .5rem .9rem;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .9rem;
}

/* ─── Post list ──────────────────────────────────────────── */
.post-list {
  display: grid;
  gap: .55rem;
}

.post-row {
  display: grid;
  gap: .2rem;
  width: 100%;
  padding: .95rem 1.1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .13s, background .15s;
}

.post-row:hover {
  border-color: color-mix(in srgb, var(--primary), white 38%);
  border-left-color: var(--primary);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--primary), white 98%);
  transform: translateX(2px);
}

.post-row.active {
  border-color: color-mix(in srgb, var(--primary), white 20%);
  border-left-color: var(--primary);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--primary), white 96%);
}

.post-row strong {
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.38;
  word-break: keep-all;
}

.post-row small,
.post-row span:not(.badge) {
  color: var(--muted);
  font-size: .8rem;
}

/* ─── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.pagination button {
  min-width: 2.4rem;
  min-height: 2.35rem;
  padding: .3rem .55rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .88rem;
}

.pagination button:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--primary), white 38%);
  color: var(--primary);
}

.pagination button.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary), transparent 58%);
}

/* ─── Badge ──────────────────────────────────────────────── */
.badge {
  width: fit-content;
  padding: .1rem .45rem;
  color: #fff;
  background: var(--accent);
  border-radius: 5px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .03em;
}

/* ─── Post detail ────────────────────────────────────────── */
.post-detail,
.editor-panel,
.admin-panel,
.login-panel {
  padding: 1.75rem;
}

.post-detail-head,
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.post-detail-head > div:first-child {
  min-width: 0;
}

.post-detail-head > .small-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: .45rem;
  align-self: flex-start;
}

.post-detail-head > .small-actions button {
  min-width: 3.25rem;
}

.panel-heading > div {
  min-width: 0;
}

.panel-heading > .form-actions,
.panel-heading > .small-actions,
.panel-heading > label {
  flex: 0 0 auto;
  align-self: center;
}

.panel-heading > .form-actions,
.panel-heading > .small-actions {
  flex-wrap: nowrap;
  align-items: center;
}

.panel-heading button {
  white-space: nowrap;
}

.post-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  margin: .8rem 0 0;
}

.post-meta-grid div {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--muted);
  font-size: .84rem;
  white-space: nowrap;
}

.post-meta-grid dt {
  font-weight: 700;
  color: var(--primary);
}

.post-meta-grid dd {
  margin: 0;
}

.small-actions button,
.config-item button,
.reply-state button {
  padding: .44rem .7rem;
  color: var(--ink);
  background: #edf1ee;
  font-size: .88rem;
  font-weight: 600;
}

.small-actions button:hover,
.config-item button:hover,
.reply-state button:hover {
  background: #dde9de;
  color: var(--primary);
}

/* ─── Rich content ───────────────────────────────────────── */
.rich-content {
  margin: 1.2rem 0 2rem;
  line-height: 1.82;
  color: var(--ink);
  font-size: .96rem;
}

.rich-content h2 {
  margin: 1.8rem 0 .6rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.rich-content p,
.rich-content li,
.rich-content blockquote {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.rich-content ul {
  padding-left: 1.5rem;
}

.rich-content li + li {
  margin-top: .3rem;
}

.rich-content blockquote {
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary), white 96%);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
}

.rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.rich-content figcaption {
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
  margin-top: .45rem;
}

.attachment-editor {
  display: grid;
  gap: .75rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--soft), white 50%);
}



.post-attachments {
  margin: -1rem 0 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-subtle);
}

.post-attachments h3 {
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: 1rem;
}

.attachment-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachment-list.compact {
  gap: .4rem;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: space-between;
  padding: .7rem .8rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  background: #fff;
}

.attachment-item a,
.attachment-item span {
  min-width: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.attachment-item small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .78rem;
}

.attachment-item button {
  flex: 0 0 auto;
  padding: .35rem .55rem;
  color: var(--ink);
  background: #edf1ee;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 700;
}

/* ─── Rich editor ────────────────────────────────────────── */
/* ─── Rich Editor (Quill) ──────────────────────────────────── */
.rich-editor.quill-wrapper {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1rem 0;
}

.rich-editor.quill-wrapper .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--line-subtle);
  background: #f7f9f7;
  font-family: inherit;
}

.rich-editor.quill-wrapper .ql-container {
  border: none;
  font-family: inherit;
  font-size: .95rem;
}

.rich-editor.quill-wrapper .ql-editor {
  min-height: 12rem;
  max-height: 36rem;
  overflow-y: auto;
  line-height: 1.8;
  color: var(--ink);
}

.rich-editor.quill-wrapper .ql-editor h2 { font-size: 1.2rem; font-weight: 700; margin: 1rem 0 .4rem; }
.rich-editor.quill-wrapper .ql-editor h3 { font-size: 1.05rem; font-weight: 700; margin: .9rem 0 .3rem; }
.rich-editor.quill-wrapper .ql-editor img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ─── Block editor (legacy) ──────────────────────────────── */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.2rem;
  padding: .7rem .9rem;
  background: var(--soft);
  border-radius: var(--radius-sm);
}

.editor-toolbar button {
  padding: .3rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--paper);
  border: 1px solid var(--line-subtle);
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.editor-toolbar button:hover {
  background: color-mix(in srgb, var(--primary), white 92%);
  border-color: color-mix(in srgb, var(--primary), white 50%);
}

.editor-block {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .5rem;
  align-items: start;
  margin-bottom: .7rem;
}

.block-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding-top: .2rem;
}

.block-actions span {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
  padding: .25rem .4rem;
  background: var(--soft);
  border-radius: 4px;
  min-width: 1.4rem;
  text-align: center;
}

.block-actions button {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.block-actions button:hover {
  background: var(--soft);
  color: var(--ink);
}

.block-actions button:last-child:hover {
  background: #fde8e8;
  color: #c0392b;
}

.editor-block .field span {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ─── Empty states ───────────────────────────────────────── */
.empty-state,
.empty-detail p {
  color: var(--muted);
}

.board-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 4rem 1rem;
  color: var(--muted);
  text-align: center;
}
.board-empty-state svg { opacity: .45; }
.board-empty-state p { margin: 0; font-size: .95rem; }
.board-empty-sub { font-size: .85rem !important; opacity: .7; }

.scope-badge {
  display: inline-block;
  padding: .1em .45em;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  vertical-align: middle;
  margin-left: .3em;
}
.scope-badge.internal { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.scope-badge.external { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.empty-detail {
  display: grid;
  place-content: center;
  min-height: 18rem;
  text-align: center;
}

.empty-detail h2 {
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ─── Loading state ──────────────────────────────────────── */
.global-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary), white 78%);
}

.global-loading-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: progress-slide 1s ease-in-out infinite;
}

.global-loading-bar span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3.5rem 1rem;
  color: var(--muted);
  font-size: .9rem;
}

.loading-state::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ─── Comments ───────────────────────────────────────────── */
.comments {
  border-top: 1px solid var(--line-subtle);
  padding-top: 1.5rem;
  margin-top: .5rem;
}

.comments h3 {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
}

.comment-list {
  display: grid;
  gap: .65rem;
}

.comment {
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--soft), white 60%);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  animation: fadeIn .22s ease both;
  transition: border-color .15s, background .15s;
}

.comment:hover {
  background: color-mix(in srgb, var(--soft), white 30%);
  border-color: var(--line);
}

.comment.reply {
  margin-top: .5rem;
  margin-left: 1.6rem;
  background: var(--paper);
  border-color: var(--line-subtle);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  font-size: .85rem;
}

.comment-meta strong {
  color: var(--ink);
}

.comment-meta span {
  color: var(--muted);
}

.comment p {
  margin: .4rem 0 .55rem;
  font-size: .95rem;
  line-height: 1.65;
}

.comment-actions {
  display: flex;
  gap: .35rem;
  margin-top: .15rem;
}

.comment-form {
  display: grid;
  gap: .75rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-subtle);
}

.reply-state {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--muted);
}

/* ─── Forms ──────────────────────────────────────────────── */
.field {
  display: grid;
  gap: .35rem;
  color: var(--ink);
  font-weight: 600;
}

.field span abbr,
abbr[title="필수"] {
  color: #d0322e;
  text-decoration: none;
  font-style: normal;
  font-weight: 700;
  margin-left: .1em;
}

.field span,
.check-row span,
.upload-box span {
  font-size: .86rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .01em;
}

.field input,
.field textarea,
.field select,
select {
  width: 100%;
  min-height: 2.7rem;
  padding: .65rem .85rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: 7px;
  transition: border-color .18s, box-shadow .18s;
}

.field input:hover,
.field textarea:hover,
.field select:hover,
select:hover {
  border-color: color-mix(in srgb, var(--primary), white 42%);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), white 78%);
  outline: none;
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.65;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  cursor: pointer;
}

.check-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-height: unset;
  accent-color: var(--primary);
  cursor: pointer;
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: #7a4f1e;
  background: #fffaf2;
  border: 1px solid #f0d9b0;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  line-height: 1.6;
}

.privacy-note::before {
  content: '⚠';
  flex-shrink: 0;
  font-size: .8rem;
  margin-top: .08rem;
}

/* ─── Block editor ───────────────────────────────────────── */
.block-editor {
  display: grid;
  gap: .8rem;
  margin: 1rem 0;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
}

.editor-toolbar button {
  padding: .48rem .8rem;
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 700;
  font-size: .86rem;
}

.editor-toolbar button:hover {
  background: color-mix(in srgb, var(--primary), white 78%);
}

.editor-block {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .8rem;
  padding: 1rem;
  background: #fafaf6;
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
}

.block-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .3rem;
  align-content: start;
}

.block-actions span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 700;
  font-size: .78rem;
  text-align: center;
}

.block-actions button {
  min-height: 2rem;
  background: #e8ede8;
  font-size: .84rem;
}

.block-actions button:hover {
  background: #d6e1d6;
}

.image-block-fields {
  display: grid;
  gap: .65rem;
}

.upload-box {
  display: grid;
  gap: .38rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1.5px dashed color-mix(in srgb, var(--primary), white 32%);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

.upload-box:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 첨부파일 에디터 헤더 */
.attachment-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.attachment-editor-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.upload-trigger-btn {
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.upload-preview-img {
  display: block;
  max-width: min(100%, 28rem);
  max-height: 8rem;
  object-fit: contain;
  margin-top: .5rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: var(--soft);
}

.hidden-field {
  position: absolute;
  left: -999rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.robot-check {
  display: grid;
  gap: .5rem;
  max-width: 18rem;
}

/* ─── Editor panel ───────────────────────────────────────── */
.editor-panel {
  margin-bottom: 1.4rem;
  animation: fadeIn .22s ease both;
}

/* ─── Login panel ────────────────────────────────────────── */
.login-panel {
  display: grid;
  gap: 1.1rem;
  max-width: 28rem;
  animation: fadeInScale .28s ease both;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.login-panel h2 {
  font-size: 1.45rem !important;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}

.login-panel .field {
  margin: 0;
}

.login-panel .primary-button {
  justify-self: start;
  min-width: 6rem;
}

.login-panel p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
}

.login-panel code {
  background: #edf2ef;
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: .83em;
}

.session-expired-notice {
  color: var(--accent) !important;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem !important;
  font-size: .9rem;
}

/* ─── Password force-change modal ────────────────────────── */
.modal-backdrop.pw-force {
  background: rgba(8, 18, 14, .78);
}

/* ─── Domain settings panel ──────────────────────────────── */
.domain-item > div {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.domain-arrow {
  color: var(--muted);
  font-size: .85rem;
}

.domain-tenant {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: .85rem;
  background: var(--soft);
  padding: .12rem .45rem;
  border-radius: 4px;
  color: var(--primary);
}

.domain-save-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-subtle);
}

.domain-save-row .help-text {
  font-size: .85rem;
  color: var(--muted);
}

/* ─── Admin shell ────────────────────────────────────────── */
.admin-shell {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.admin-tabs {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: .3rem;
}

.admin-tabs button {
  padding: .76rem 1rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  text-align: left;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: -.005em;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}

.admin-tabs button:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary), white 55%);
}

.admin-tabs button.active {
  color: #fff;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: var(--primary);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--primary), transparent 55%);
  font-weight: 700;
}

/* 🔒 접근 불가 탭 */
.admin-tabs button.tab-locked {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: auto;
  background: var(--soft);
  border-style: dashed;
  font-size: .82rem;
}
.admin-tabs button.tab-locked:hover {
  background: var(--soft);
  color: var(--muted);
  border-color: var(--line);
}
.tab-lock-icon { margin-right: .3em; font-size: .8em; }

/* ─── Dashboard sections ─────────────────────────────────── */
.dash-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-subtle);
}
.dash-section:last-child { border-bottom: none; }
.dash-section-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .85rem;
}
.dash-sub-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin: .85rem 0 .5rem;
}
.metric-grid { margin-bottom: 0; }

/* ─── Admin panels ───────────────────────────────────────── */
.admin-panel {
  animation: fadeIn .22s ease both;
  border-radius: var(--radius);
}

.admin-panel > .panel-heading h2,
.admin-panel h2 {
  color: var(--ink);
  letter-spacing: -.015em;
}

.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 2rem;
}

.metric-grid article {
  padding: 1.4rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  border-radius: var(--radius);
}

.metric-grid article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.metric-grid strong {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: -.02em;
}

.metric-grid span {
  color: var(--muted);
  font-size: .88rem;
  display: block;
  margin-top: .4rem;
}

.audit-filters {
  grid-template-columns: minmax(9rem, 14rem) 1fr;
}

.audit-table-wrap {
  margin-top: 1.25rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.audit-table thead {
  background: color-mix(in srgb, var(--soft), white 30%);
}
.audit-table thead th {
  padding: .65rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-subtle);
}
.audit-table tbody tr {
  border-bottom: 1px solid var(--line-subtle);
  transition: background .12s;
}
.audit-table tbody tr:last-child { border-bottom: 0; }
.audit-table tbody tr:hover { background: color-mix(in srgb, var(--soft), white 55%); }
.audit-table td {
  padding: .65rem 1rem;
  vertical-align: middle;
  color: var(--text);
}
.audit-cell-date {
  color: var(--muted);
  white-space: nowrap;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  width: 11rem;
}
.audit-cell-action { white-space: nowrap; width: 1%; }
.audit-cell-target {
  color: var(--ink);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-cell-user {
  color: var(--muted);
  font-size: .82rem;
  width: 7rem;
}
.audit-action-badge {
  display: inline-flex;
  align-items: center;
  padding: .22em .65em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--soft), white 20%);
  border: 1px solid var(--line-subtle);
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.audit-badge--danger  { background: #fff1f0; border-color: #ffa39e; color: #c0392b; }
.audit-badge--success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.audit-badge--warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.audit-badge--info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

.audit-pagination { margin-top: 1.25rem; justify-content: center; }

.pagination-info {
  width: 100%;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-muted, #6b7280);
  margin-bottom: .25rem;
}

.link-text {
  color: var(--accent);
  text-decoration: underline;
  font-size: .82rem;
  margin-left: .4em;
  cursor: pointer;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 1rem 0;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.address-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: stretch;
}

.address-input-row button {
  white-space: nowrap;
}

.email-split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
}

.email-split-row > span {
  color: var(--muted);
  font-weight: 800;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
}

.theme-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .55rem;
  min-height: 9.5rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.theme-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary), white 35%);
  box-shadow: var(--shadow-sm);
}

.theme-card.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-sm);
}

.theme-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-card strong {
  color: var(--ink);
  font-size: .98rem;
}

.theme-card small {
  color: var(--muted);
  line-height: 1.45;
}

.theme-swatch {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: .25rem;
  height: 2.5rem;
}

.theme-swatch i {
  display: block;
  border-radius: 999px;
}

.theme-swatch i:nth-child(1) { background: var(--swatch-primary); }
.theme-swatch i:nth-child(2) { background: var(--swatch-accent); }
.theme-swatch i:nth-child(3) { background: var(--swatch-soft); border: 1px solid rgba(0, 0, 0, .08); }

.admin-map-preview {
  min-height: 18rem;
  overflow: hidden;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: var(--soft);
}

.admin-map-preview iframe {
  display: block;
  width: 100%;
  height: 18rem;
  border: 0;
}

.sub-config {
  display: grid;
  gap: 1.1rem;
  margin: 1.6rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-subtle);
}

.sub-config > .panel-heading {
  margin-bottom: 0;
}

.sub-config .panel-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .88rem;
}

.intro-feature-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .85rem;
}

.intro-feature-editor .drawer-form {
  margin-top: 0;
}

.intro-feature-editor h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}

/* ─── Process step editor (admin) ────────────────────────── */
.process-step-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.process-step-editor .drawer-form {
  margin-top: 0;
}

.process-step-editor h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}

/* ─── Icon picker ────────────────────────────────────────── */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .4rem;
}

.icon-picker button {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  min-height: 2.85rem;
  padding: .48rem .58rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: 7px;
  font-weight: 700;
}

.icon-picker button.active {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: var(--primary-light);
}

.icon-combo {
  position: relative;
}

.icon-combo-button,
.icon-combo-list button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .48rem;
  width: 100%;
  min-height: 2.7rem;
  padding: .48rem .7rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: 7px;
  font-weight: 600;
  text-align: left;
}

.icon-combo-button:hover {
  border-color: color-mix(in srgb, var(--primary), white 38%);
  background: var(--primary-light);
}

.icon-combo-button::after {
  content: "⌄";
  margin-left: auto;
  color: var(--muted);
  font-size: .9rem;
}

.icon-combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 20;
  display: grid;
  gap: .22rem;
  max-height: 15rem;
  overflow: auto;
  padding: .4rem;
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: 9px;
  box-shadow: var(--shadow-lg);
}

.icon-combo-list button.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
}

.icon-choice-mark {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 6px;
  flex-shrink: 0;
}

/* ─── Config list ────────────────────────────────────────── */
.config-list {
  display: grid;
  gap: .55rem;
  margin: 1rem 0;
}

.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  transition: box-shadow .18s, border-color .18s;
}

.config-item:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary), white 55%);
}

.config-item div {
  display: grid;
  min-width: 0;
}

.config-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .97rem;
}

.config-item span {
  font-size: .85rem;
  margin-top: .1rem;
}

.quick-nav-config {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(7rem, .8fr) minmax(12rem, 1.4fr) auto;
  align-items: end;
}

.drawer-form {
  margin-top: 1.1rem;
  padding: 1.4rem;
  background: #f8f9f5;
  border: 1px solid var(--line-subtle);
  border-radius: 12px;
  animation: fadeIn .18s ease both;
  box-shadow: 0 2px 12px rgba(37, 99, 90, .05);
}

.drawer-form h3 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.drawer-form .form-actions {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-subtle);
}

/* ─── Consult modal ──────────────────────────────────────── */
.consult-modal {
  width: min(44rem, 100%);
}

.consult-modal .panel-heading h2 {
  font-size: 1.35rem !important;
  font-weight: 800;
}

.consult-modal .panel-heading p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.consult-form {
  margin-top: 1.3rem;
}

.consult-done {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
}

.consult-done-icon {
  display: inline-grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary), transparent 44%);
}

.consult-done h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.consult-receipt {
  margin: .8rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}
.consult-receipt strong {
  font-family: monospace;
  font-size: 1rem;
  color: var(--text);
  letter-spacing: .08em;
}

/* ─── Consult admin list ─────────────────────────────────── */
.consult-list {
  display: grid;
  gap: .45rem;
  margin-top: 1.3rem;
}

.consult-table {
  overflow: hidden;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: #fff;
}

.consult-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  align-items: end;
  margin-top: 1.2rem;
  padding: .9rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--soft), white 45%);
}

.consult-filters .field {
  min-width: 0;
}

.consult-filters .field input,
.consult-filters .field select {
  width: 100%;
  min-width: 0;
}

.consult-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  grid-column: 1 / -1;
  margin: 0;
  gap: .6rem;
}

.consult-filter-actions button {
  min-height: 2.8rem;
  min-width: 5.5rem;
  flex: 0 0 auto;
}

.consult-dashboard {
  display: grid;
  gap: .9rem;
  margin-top: 1.2rem;
}

.consult-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.consult-metrics article {
  padding: .95rem 1rem;
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.consult-metrics span {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}

.consult-metrics strong {
  color: var(--ink);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.consult-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .75fr);
  gap: .85rem;
}

.consult-daily-panel,
.consult-handler-panel {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
}

.consult-daily-panel h3,
.consult-handler-panel h3 {
  margin: 0;
  font-size: .95rem;
}

/* ── Column chart ── */
.consult-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.consult-legend {
  display: flex;
  gap: .75rem;
}

.consult-legend span {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600;
}

.consult-legend i {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.consult-legend i.req  { background: var(--primary); }
.consult-legend i.proc { background: color-mix(in srgb, var(--primary), var(--accent, #7c9e55) 60%); }
.consult-legend i.comp { background: color-mix(in srgb, var(--ink), white 58%); }

.consult-col-chart-wrap {
  overflow-x: auto;
  padding-bottom: .25rem;
}

.consult-col-chart {
  display: flex;
  align-items: flex-end;
  gap: .55rem;
  min-width: fit-content;
  padding: .5rem 0 0;
  position: relative;
}

.consult-col-chart::after {
  content: '';
  position: absolute;
  bottom: 1.55rem;
  left: 0; right: 0;
  height: 1px;
  background: var(--line-subtle);
  pointer-events: none;
}

.chart-col-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 2.8rem;
}

.chart-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
}

.chart-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 120px;
  gap: 2px;
}

.chart-val {
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}

.chart-bar {
  width: .68rem;
  border-radius: 3px 3px 0 0;
  transition: height .45s cubic-bezier(.16,1,.3,1);
  min-height: 0;
}

.chart-bar.req  { background: var(--primary); }
.chart-bar.proc { background: color-mix(in srgb, var(--primary), var(--accent, #7c9e55) 60%); }
.chart-bar.comp { background: color-mix(in srgb, var(--ink), white 58%); }

.chart-x-label {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  padding-bottom: .15rem;
}

/* ── Handler list ── */
.consult-handler-list {
  display: grid;
  gap: .5rem;
}

.consult-handler-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .65rem;
  background: var(--soft);
  border-radius: 8px;
}

.consult-handler-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consult-handler-row strong {
  color: var(--primary);
}

/* 컬럼: 고객(텍스트 좌) | 연락처(중앙) | 신청일(중앙) | 상태(중앙) | 요약(텍스트 좌) | 열기(우) */
.consult-table-head,
.consult-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, .75fr) minmax(8rem, .9fr) minmax(10rem, 1fr) 6rem minmax(9rem, 1.3fr) 3.2rem;
  gap: 0;
  align-items: center;
}

/* 헤더: 모든 셀 중앙 정렬 */
.consult-table-head {
  padding: 0 .9rem;
  height: 2.6rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft), white 30%);
  border-bottom: 1px solid var(--line-subtle);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.consult-table-head > span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
}
/* 헤더: 고객·요약은 좌측 */
.consult-table-head > span:first-child,
.consult-table-head > span:nth-child(5) {
  justify-content: flex-start;
}
/* 헤더: 열기는 우측 */
.consult-table-head > span:last-child {
  justify-content: flex-end;
}

.consult-row {
  width: 100%;
  min-height: 3.2rem;
  padding: .6rem .9rem;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line-subtle);
  border-left: 3px solid transparent;
  border-radius: 0;
  animation: fadeIn .15s ease both;
  transition: border-color .18s, background .18s;
}

.consult-row:last-child { border-bottom: 0; }

.consult-row:hover {
  background: color-mix(in srgb, var(--primary), white 97%);
  border-left-color: var(--primary);
}

.consult-row.checked { opacity: .85; }

/* 데이터 셀 공통 */
.consult-row-person,
.consult-row-phone,
.consult-row-date,
.consult-row-summary,
.consult-row .consult-status,
.consult-row-action {
  min-width: 0;
  padding: 0 .4rem;
}

/* 고객명: 좌측 */
.consult-row-person {
  display: flex;
  align-items: center;
}
.consult-row-person strong {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 800;
}

/* 연락처·날짜: 중앙 */
.consult-row-phone,
.consult-row-date {
  color: var(--muted);
  font-size: .83rem;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
  width: 100%;
}

/* 상태 배지: 중앙 */
.consult-row .consult-status {
  justify-self: center;
  display: flex;
  justify-content: center;
}

/* 요약: 좌측, 말줄임 */
.consult-row-summary {
  overflow: hidden;
  color: var(--muted);
  font-size: .85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 열기: 우측 */
.consult-row-action {
  justify-self: end;
  color: var(--primary);
  font-size: .83rem;
  font-weight: 700;
  white-space: nowrap;
}

.consult-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}

.consult-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .85rem;
}

.consult-meta strong {
  font-size: 1rem;
  font-weight: 700;
}

.consult-meta span {
  color: var(--muted);
  font-size: .88rem;
}

.consult-date {
  font-size: .82rem !important;
}

.consult-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .78rem !important;
  font-weight: 800;
  white-space: nowrap;
  color: var(--primary) !important;
  background: var(--primary-light);
}

.consult-status.status-new {
  color: #8a4f00 !important;
  background: #fff3d8;
}

.consult-status.status-scheduled {
  color: #164e63 !important;
  background: #dff6fb;
}

.consult-status.status-completed,
.consult-status.status-closed {
  color: var(--muted) !important;
  background: var(--line-subtle);
}

.consult-body {
  margin: 0;
  color: var(--ink);
  font-size: .93rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── Preview modals ─────────────────────────────────────── */
.consult-result-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: .85rem;
  margin-top: 1rem;
}

.consult-result-grid .field.wide {
  grid-column: 1 / -1;
}

.consult-result-grid textarea {
  min-height: 6rem;
}

.consult-result-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  color: var(--muted);
  font-size: .86rem;
}

.consult-result-footer .primary-button {
  flex: 0 0 auto;
}

.consult-admin-modal {
  width: min(36rem, 100%);
}

.consult-admin-modal .panel-heading h2 {
  font-size: 1.15rem;
}

.consult-admin-modal .panel-heading .eyebrow {
  font-size: .75rem;
  margin-bottom: .1rem;
}

.consult-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem .6rem;
  margin: .2rem 0 .8rem;
  padding: .65rem .8rem;
  background: var(--soft);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
}

.consult-detail-meta div {
  min-width: 0;
}

.consult-detail-meta dt {
  margin-bottom: .12rem;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.consult-detail-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.privacy-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.privacy-value span {
  min-width: 4rem;
}

.mini-button {
  min-height: 1.9rem;
  padding: .28rem .55rem;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary), white 72%);
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}

.mini-button:hover {
  background: color-mix(in srgb, var(--primary), white 82%);
}

.consult-detail-body {
  margin-bottom: .7rem;
  padding: .65rem .8rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
}

.consult-detail-body h3 {
  margin: 0 0 .35rem;
  font-size: .9rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .01em;
}

.consult-detail-body p {
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.consult-detail-form {
  display: grid;
  gap: .65rem;
}

.consult-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.admin-preview {
  display: grid;
  gap: .8rem;
  margin-top: 1rem;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--line-subtle);
  border-radius: 9px;
}

.preview-heading {
  margin-bottom: 0;
}

.preview-grid {
  grid-template-columns: repeat(var(--feature-count, 3), minmax(0, 1fr));
}

.preview-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin: .5rem 0 0;
}

.preview-info-list div {
  padding: .8rem;
  background: var(--soft);
  border-radius: var(--radius-sm);
}

.preview-info-list dt {
  color: var(--primary);
  font-size: .78rem;
  font-weight: 800;
}

.preview-info-list dd {
  margin: .25rem 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.preview-brand {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-subtle);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(8, 18, 14, .52);
  backdrop-filter: blur(6px);
  animation: fadeIn .18s ease both;
}

.preview-modal {
  width: min(68rem, 100%);
  max-height: min(90vh, 52rem);
  overflow: auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: fadeInScale .22s ease both;
}

.home-post-modal {
  width: min(46rem, 100%);
}

.modal-loading {
  padding: 2rem 0 .8rem;
}

.modal-post-detail {
  display: grid;
  gap: 1.2rem;
  padding-top: .5rem;
}

.modal-post-detail .post-meta-grid {
  margin: 0;
}

.modal-post-detail .rich-content {
  min-height: 4rem;
  padding-top: .2rem;
}

.modal-preview {
  border: 0;
  box-shadow: none;
  padding: 1rem 0 0;
}

.preview-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.preview-stats {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius);
  overflow: hidden;
}

.preview-process {
  margin-top: 1rem;
}

.preview-contact {
  border-radius: var(--radius);
  overflow: hidden;
}

.preview-location-grid {
  display: grid;
  grid-template-columns: minmax(18rem, .9fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}

.preview-location-grid .admin-map-preview {
  min-height: 20rem;
}

.preview-quick-nav {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .96);
  overflow: hidden;
  min-width: 4.2rem;
}

.footer-preview {
  text-align: center;
  background: var(--ink);
  color: #fff;
}

.footer-preview p,
.footer-preview span,
.footer-preview small {
  color: rgba(255, 255, 255, .76);
}

.seo-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.seo-card p {
  margin: 0 0 .35rem;
  color: #1a0dab;
  font-size: .82rem;
}

.seo-card h3 {
  margin: 0;
  color: #1a0dab;
  font-size: 1.1rem;
}

.seo-card span {
  display: block;
  margin-top: .35rem;
  color: #4d5156;
  line-height: 1.5;
}

.banner-preview {
  position: relative;
  min-height: 17rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 1.6rem;
  color: #fff;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
}

.banner-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 28, 22, .78), rgba(10, 28, 22, .18));
}

.banner-image-check img {
  display: block;
  width: min(100%, 36rem);
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
  background: var(--soft);
}

.banner-btn-editor {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .5rem;
}
.banner-btn-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr 7rem 8rem 1.8rem;
  gap: .4rem;
  align-items: center;
}
.banner-btn-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.banner-btn-row input,
.banner-btn-row select {
  width: 100%;
  min-width: 0;
}
@media (max-width: 600px) {
  .banner-btn-row {
    grid-template-columns: 1.4rem 1fr 1.8rem;
    grid-template-rows: auto auto;
  }
  .banner-btn-row select:nth-child(3),
  .banner-btn-row select:nth-child(4) {
    grid-column: 2;
  }
}

.banner-preview-nav {
  position: absolute;
  bottom: .9rem;
  right: 1rem;
  display: flex;
  gap: .4rem;
}

.banner-preview-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .15s;
}

.banner-preview-dot.active {
  background: #fff;
}

.preview-banner-count {
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  margin: .6rem 0 0;
}

.banner-preview > div:not(.banner-preview-overlay) {
  position: relative;
  max-width: 34rem;
}

.banner-preview h3 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
}

.banner-preview p:not(.eyebrow),
.preview-help {
  margin: .4rem 0 0;
  color: var(--muted);
}

.banner-preview p:not(.eyebrow) {
  color: rgba(255, 255, 255, .88);
}

/* ─── Quick nav ──────────────────────────────────────────── */
.quick-nav {
  position: fixed;
  right: 1rem;
  top: 50%;
  z-index: 25;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  min-width: 4.2rem;
  /* 기본: 접힌 상태 — 토글 버튼만 보임 */
  max-height: 3rem;
  transition: max-height .28s cubic-bezier(.16, 1, .3, 1), box-shadow .18s;
}

.quick-nav.open {
  max-height: 28rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
}

/* 공통 버튼 */
.qn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  min-height: 2.7rem;
  padding: .5rem .75rem;
  color: var(--ink);
  background: transparent;
  border: none;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}

.qn-btn:hover {
  background: color-mix(in srgb, var(--primary), transparent 90%);
  color: var(--primary);
}

/* 사용자 정의 버튼 그룹 */
.qn-custom {
  display: flex;
  flex-direction: column;
}

/* 접근성 버튼 그룹 (가+/가-) — 나란히 */
.qn-a11y {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.qn-a11y-btn {
  font-size: .78rem;
  color: var(--muted);
  min-height: 2.5rem;
  padding: .4rem .3rem;
}

.qn-a11y-btn:hover {
  color: var(--primary);
}

/* 구분선 */
.qn-divider {
  height: 1px;
  background: rgba(0, 0, 0, .07);
  margin: 0;
}

/* 맨 위로 버튼 */
.qn-top-btn {
  flex-direction: column;
  gap: .18rem;
  font-size: .72rem;
  color: var(--muted);
  min-height: 2.6rem;
  padding: .45rem .5rem;
}

.qn-top-btn:hover {
  color: var(--primary);
}

.qn-top-btn svg {
  flex-shrink: 0;
}

/* 토글 버튼 — 항상 노출, 패널 맨 아래 */
.qn-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.8rem;
  padding: .5rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary), white 94%);
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .07);
  cursor: pointer;
  transition: background .12s, color .12s;
}

.qn-toggle:hover {
  background: color-mix(in srgb, var(--primary), white 86%);
  color: var(--primary);
}

/* 접힌 상태: 토글 버튼의 border-top 제거 */
.quick-nav:not(.open) .qn-toggle {
  border-top: none;
  border-radius: 14px;
  min-height: 3rem;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: #0c1812;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.8rem;
  align-items: start;
}

.footer-brand-col {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  min-width: 13rem;
}

.footer-logo-mark {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.footer-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-name {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
  letter-spacing: -.005em;
  margin-bottom: .22rem;
}

.footer-tagline {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .35);
}

.footer-info-col {
  padding-left: 2.5rem;
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.footer-contact {
  font-size: .875rem;
  color: rgba(255, 255, 255, .48);
  margin: 0 0 .7rem;
  line-height: 1.6;
}

.footer-note {
  font-size: .8rem;
  color: rgba(255, 255, 255, .28);
  margin: .6rem 0 0;
  line-height: 1.7;
  max-width: 46rem;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.2rem;
  margin-bottom: .45rem;
}

.footer-meta span {
  font-size: .78rem;
  color: rgba(255, 255, 255, .32);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem 7rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-bottom span,
.footer-bottom small {
  color: rgba(255, 255, 255, .22);
  font-size: .78rem;
}

.footer-privacy-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .35);
  font-size: .78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-privacy-link:hover {
  color: rgba(255, 255, 255, .6);
}

/* ─── Privacy Modal ──────────────────────────────────────── */
.privacy-modal {
  max-width: 700px;
  width: 94vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.privacy-modal-body {
  padding: 1.5rem 2rem;
  overflow-y: auto;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink);
  flex: 1;
}

.privacy-modal-body h2, .privacy-modal-body h3 {
  font-weight: 700;
  margin: 1.2rem 0 .5rem;
}

.privacy-modal-body p {
  margin: .5rem 0;
}

.privacy-modal-body ul, .privacy-modal-body ol {
  padding-left: 1.5rem;
  margin: .5rem 0;
}

/* ─── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  z-index: 120;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: .85rem 1.4rem;
  color: #fff;
  background: rgba(16, 24, 20, .96);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .18);
  text-align: center;
  font-size: .92rem;
  font-weight: 500;
  transform: translateX(-50%);
  animation: slideDown .22s cubic-bezier(.16, 1, .3, 1) both;
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
}

/* ─── Mobile floating CTA ───────────────────────────────── */
.mobile-fab-consult {
  display: none;
}

@media (max-width: 767px) {
  .mobile-fab-consult {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: fixed;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 110;
    padding: .75rem 1.2rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary), transparent 36%);
    cursor: pointer;
    animation: fabIn .3s cubic-bezier(.16, 1, .3, 1) both;
  }
  .mobile-fab-consult:hover,
  .mobile-fab-consult:focus-visible {
    background: var(--primary-dark, color-mix(in srgb, var(--primary), black 15%));
    box-shadow: 0 6px 28px color-mix(in srgb, var(--primary), transparent 28%);
    transform: translateY(-2px);
  }
  @keyframes fabIn {
    from { opacity: 0; transform: translateY(1rem) scale(.9); }
    to   { opacity: 1; transform: none; }
  }
  .quick-nav { display: none; }
  .audit-table-wrap { -webkit-overflow-scrolling: touch; }
  .audit-cell-date { width: 8rem; font-size: .73rem; }
  .audit-cell-user { max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audit-filters { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .dash-section { margin-bottom: 1.4rem; padding-bottom: 1.4rem; }
  .post-row { padding: .85rem .9rem; }
  .post-row strong { font-size: .92rem; }
}

/* ─── High contrast ──────────────────────────────────────── */
.high-contrast {
  --ink: #050505;
  --muted: #242424;
  --soft: #ffffff;
  --soft-alt: #f8f8f8;
  --line: #111111;
  --line-subtle: #1e1e1e;
  --paper: #ffffff;
  --primary: #00483f;
  --primary-dark: #003028;
  --primary-light: #e0f0ee;
  --accent: #7d4a00;
}

.high-contrast body {
  background: #fff;
}

.high-contrast .hero-overlay {
  background: rgba(0, 0, 0, .78);
}

/* ─── Process section ────────────────────────────────────── */
.process-section {
  background: transparent;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.8rem;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 2.8rem;
  left: calc(12.5% - .5rem);
  right: calc(12.5% - .5rem);
  height: 2px;
  background: linear-gradient(to right, var(--primary-light), color-mix(in srgb, var(--primary), white 60%), var(--primary-light));
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem 1.8rem;
  background: var(--paper);
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 2px 16px rgba(37, 99, 90, .07);
  transition: transform .22s, box-shadow .22s;
  text-align: center;
}

.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(37, 99, 90, .13);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  background: var(--primary-light);
  border: 2px solid color-mix(in srgb, var(--primary), white 58%);
  border-radius: 50%;
  margin: 0 auto .9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.process-step h3 {
  margin: 0 0 .55rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.process-step p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── Contact strip ──────────────────────────────────────── */
.contact-strip {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--paper);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.contact-strip::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 50rem;
  height: 50rem;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 60%);
  pointer-events: none;
}

.contact-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
}

.contact-strip h2 {
  margin: 0 0 .6rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--paper);
  letter-spacing: -.01em;
}

.contact-strip p {
  margin: 0;
  opacity: .82;
  font-size: 1rem;
  color: var(--paper);
  line-height: 1.65;
}

.contact-strip-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.contact-strip .primary-button {
  background: var(--paper);
  color: var(--primary);
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.contact-strip .primary-button:hover {
  background: var(--soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.strip-phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.5rem;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--radius);
  color: var(--paper);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .15s;
}

.strip-phone:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.72);
  transform: translateY(-1px);
}

/* ─── Site sub-tabs (inside admin site panel) ────────────── */
.site-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.7rem;
  border-bottom: 2px solid var(--line-subtle);
  padding-bottom: .5rem;
}

.site-tabs button {
  padding: .6rem 1.1rem;
  background: transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s, background .15s;
}

.site-tabs button:hover {
  color: var(--ink);
  background: var(--soft);
}

.site-tabs button.active {
  color: var(--primary);
  background: var(--primary-light);
  border-bottom: 2.5px solid var(--primary);
  margin-bottom: -2px;
  font-weight: 700;
}

.step-editor {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

/* ─── Footer meta (kept for backward compat — see footer redesign above) ── */

/* ─── 980px ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .icon-button.mobile-menu {
    display: grid;
  }

  .header-inner {
    gap: .65rem;
    padding: .75rem 1rem;
  }

  .brand {
    min-width: 0;
    flex: 1;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: transparent;
  }

  .primary-nav {
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: calc(100% + .4rem);
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 39;
  }

  .primary-nav.open {
    display: flex;
    animation: fadeIn .15s ease both;
  }

  .primary-nav button {
    text-align: left;
    padding: .8rem 1rem;
  }

  .primary-nav button::after {
    display: none;
  }

  .hero {
    min-height: 36rem;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-layout {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consult-filters,
  .consult-result-grid {
    grid-template-columns: 1fr;
  }

  .consult-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consult-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .consult-table-head {
    display: none;
  }

  .consult-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .7rem;
    border-left-color: var(--primary);
  }

  .consult-row-phone,
  .consult-row-date,
  .consult-row-summary {
    grid-column: 1 / -1;
  }

  .consult-row-action {
    grid-column: 2;
    grid-row: 1;
  }

  .consult-detail-meta {
    grid-template-columns: 1fr;
  }

  .consult-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .consult-result-grid .field.wide {
    grid-column: auto;
  }

  .consult-result-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-tabs {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    overflow-x: auto;
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-nav {
    right: .75rem;
    top: auto;
    bottom: 5rem;
    transform: none;
    z-index: 45;
    min-width: 3.8rem;
  }

  .qn-btn {
    min-height: 2.5rem;
    font-size: .79rem;
  }

  .qn-toggle {
    min-height: 2.6rem;
  }
}

/* ─── 720px ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .header-inner {
    padding: .6rem .85rem;
  }

  .brand small {
    display: none;
  }

  .admin-button span:last-child {
    display: none;
  }

  .hero {
    min-height: 30rem;
    background-position: 62% center;
  }

  .hero-content {
    padding: 5.5rem 1.2rem 8rem;
  }

  .hero-arrow {
    width: 2.2rem;
    height: 2.2rem;
  }

  .hero-arrow::before {
    width: .52rem;
    height: .52rem;
    border-top-width: 2px;
    border-right-width: 2px;
  }

  .hero-arrow-prev { left: .7rem; }
  .hero-arrow-next { right: .7rem; }

  .hero p:not(.eyebrow) {
    font-size: 1rem;
  }

  .section {
    padding: 3.5rem 1.1rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .theme-grid {
    grid-template-columns: 1fr;
  }

  .board-grid {
    grid-template-columns: 1fr;
  }

  .page-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
  }

  .board-search {
    grid-template-columns: 1fr;
    margin-top: -.4rem;
  }

  .post-detail-head {
    flex-direction: column;
    gap: .6rem;
  }

  .post-detail-head > .small-actions {
    align-self: stretch;
  }

  .post-detail-head > .small-actions button {
    flex: 1 1 0;
  }

  .attachment-item {
    align-items: stretch;
    flex-direction: column;
  }

  .attachment-item small,
  .attachment-item button {
    align-self: flex-start;
  }

  .panel-heading {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .config-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .quick-nav-config {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .address-input-row {
    grid-template-columns: 1fr;
  }

  .editor-block {
    grid-template-columns: 1fr;
  }

  .block-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .block-actions span {
    min-width: 2rem;
    text-align: left;
  }

  .admin-shell {
    gap: .85rem;
  }

  .admin-tabs {
    gap: .25rem;
  }

  .admin-tabs button {
    padding: .62rem .72rem;
    font-size: .84rem;
    text-align: center;
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
  }

  .metric-grid strong {
    font-size: 1.7rem;
  }

  .toast {
    top: 4.8rem;
    max-width: calc(100vw - 2rem);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 2.5rem 1.2rem 2rem;
  }

  .footer-brand-col {
    min-width: 0;
  }

  .footer-info-col {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-left: 0;
    padding-top: 1.5rem;
  }

  .footer-bottom {
    padding: 1rem 1.2rem 6rem;
  }

  .intro-feature-editor {
    grid-template-columns: 1fr;
  }

  .preview-modal {
    padding: 1.1rem;
  }

  .preview-info-list,
  .preview-location-grid {
    grid-template-columns: 1fr;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .process-steps::before {
    display: none;
  }

  .contact-strip {
    padding: 3.5rem 0;
  }

  .contact-strip-inner {
    flex-direction: column;
    gap: 1.8rem;
    padding: 0 1.5rem;
    text-align: center;
  }

  .contact-strip-actions {
    flex-direction: column;
    width: 100%;
  }

  .contact-strip-actions .primary-button,
  .strip-phone {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .site-tabs {
    gap: .25rem;
    flex-wrap: wrap;
  }

  .site-tabs button {
    padding: .52rem .72rem;
    font-size: .84rem;
  }

  /* footer-meta responsive handled in footer redesign */

  .login-panel {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step-editor {
    grid-template-columns: 1fr;
  }

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

  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-detail,
  .editor-panel,
  .admin-panel,
  .login-panel {
    padding: 1.2rem;
  }
}

/* ─── Stats bar responsive ────────────────────────────────── */
@media (max-width: 980px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: 0;
  }

  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
}

@media (max-width: 720px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 .5rem;
  }

  .stat-item {
    padding: 1.8rem .75rem;
  }
}

/* ─── Admin UI improvements ──────────────────────────────── */

/* 대시보드 카드 클릭 가능 상태 */
.metric-card-link {
  position: relative;
  transition: transform .18s, box-shadow .18s, background .18s !important;
}
.metric-card-link:hover {
  background: var(--primary-light) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
.metric-card-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 게시판/메뉴 타입 배지 */
.board-type-badge {
  display: inline-flex;
  align-items: center;
  padding: .1em .42em;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.board-type-notice { background: #fff3d8; color: #8a4f00; }
.board-type-qna    { background: #eff6ff; color: #1e40af; }
.board-type-board  { background: #f0fdf4; color: #166534; }

/* 노출/숨김 상태 배지 */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: .1em .42em;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.status-active   { background: #f0fdf4; color: #166534; }
.status-inactive { background: var(--line-subtle); color: var(--muted); }

/* 역할 배지 */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: .1em .48em;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.role-owner   { background: #fdf2f8; color: #86198f; }
.role-manager { background: #eff6ff; color: #1e40af; }
.role-editor  { background: #f0fdf4; color: #166534; }
.role-viewer  { background: var(--soft); color: var(--muted); }
.role-public  { background: var(--line-subtle); color: var(--muted); }

/* config-item 메타 정보 줄 */
.config-item-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .4rem;
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 400;
}
.config-item-meta > span:not([class]) {
  color: var(--muted);
}
.user-id-label {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: .78rem;
  color: var(--muted);
}

/* 입소상담 날짜 빠른 선택 */
.consult-date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .85rem;
}
.date-shortcut-btn {
  padding: .32rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary), white 55%);
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.date-shortcut-btn:hover {
  background: color-mix(in srgb, var(--primary), white 75%);
  border-color: color-mix(in srgb, var(--primary), white 30%);
}

@media (max-width: 720px) {
  .consult-date-shortcuts {
    gap: .3rem;
  }
  .date-shortcut-btn {
    font-size: .76rem;
    padding: .28rem .65rem;
  }
}

/* ─── Intro image layout responsive ──────────────────────── */
@media (max-width: 980px) {
  .intro-section-wrap.has-image {
    grid-template-columns: 1fr;
  }

  .intro-image-col {
    min-height: 22rem;
  }

  .intro-section-wrap.has-image .intro-text-col {
    padding: 3.5rem 1.5rem;
  }
}

/* ─── Location section responsive ────────────────────────── */
@media (max-width: 980px) {
  .location-section-wrap {
    grid-template-columns: 1fr;
  }

  .location-map-col {
    min-height: 22rem;
  }

  .location-info-col {
    padding: 3rem 1.5rem !important;
  }
}

@media (max-width: 720px) {
  .stat-editor-item {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Post detail modal ──────────────────────────────────── */
.post-detail-modal {
  display: flex;
  flex-direction: column;
  width: min(660px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .05),
    0 8px 24px rgba(0, 0, 0, .08),
    0 32px 64px rgba(0, 0, 0, .15);
  animation: pdmEnter .22s cubic-bezier(.16, 1, .3, 1) both;
  scroll-behavior: smooth;
}

@keyframes pdmEnter {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Header — sticky ── */
.pdm-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  padding: 1.6rem 1.5rem 1.4rem 2rem;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid var(--line-subtle);
}

.pdm-head-text {
  flex: 1;
  min-width: 0;
}

/* ── Right-side controls (action buttons + close) ── */
.pdm-head-right {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  padding-top: .1rem;
}

/* ── Close button — in normal flow ── */
.pdm-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--soft);
  border: 1px solid var(--line-subtle);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}

.pdm-close-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.pdm-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .55rem;
  padding: .22rem .65rem;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.pdm-badge::before {
  content: '';
  display: block;
  width: .42rem;
  height: .42rem;
  background: currentColor;
  border-radius: 50%;
  opacity: .7;
}

.pdm-title {
  margin: 0 0 .75rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.32;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.pdm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .5rem;
  font-size: .82rem;
  color: var(--muted);
}

.pdm-dot {
  width: 2px;
  height: 2px;
  background: var(--line);
  border-radius: 50%;
  display: inline-block;
  margin: 0 .1rem;
  vertical-align: middle;
}

/* ── Action buttons (수정/삭제) — kept for legacy, pdm-head-right is new ── */
.pdm-head-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.pdm-action-btn {
  padding: .32rem .7rem;
  background: transparent;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}

.pdm-action-btn:hover {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
}

.pdm-action-btn.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger), white 72%);
}

.pdm-action-btn.danger:hover {
  background: color-mix(in srgb, var(--danger), white 92%);
  border-color: color-mix(in srgb, var(--danger), white 52%);
}

/* ── Body ── */
.pdm-body {
  flex: 1;
  padding: 1.6rem 2rem 2.2rem;
}

.pdm-edit-body {
  display: grid;
  gap: 1rem;
}

.post-form-modal {
  width: min(720px, 96vw);
}

/* ── Attachments ── */
.pdm-files {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-subtle);
}

.pdm-files-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .85rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pdm-files-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  background: var(--line);
  color: var(--muted);
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.pdm-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.pdm-file-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line-subtle);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.pdm-file-item:hover {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary), white 96%);
  box-shadow: var(--shadow-xs);
}

/* file type left-border colors */
.pdm-file-item[data-ext="pdf"]  { border-left-color: #e53e3e; }
.pdm-file-item[data-ext="xlsx"],
.pdm-file-item[data-ext="xls"]  { border-left-color: #276749; }
.pdm-file-item[data-ext="docx"],
.pdm-file-item[data-ext="doc"]  { border-left-color: #2b6cb0; }
.pdm-file-item[data-ext="pptx"],
.pdm-file-item[data-ext="ppt"]  { border-left-color: #c05621; }
.pdm-file-item[data-ext="hwp"],
.pdm-file-item[data-ext="hwpx"] { border-left-color: #6b46c1; }

.pdm-ext {
  flex-shrink: 0;
  padding: .22rem .44rem;
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--line-subtle);
  border-radius: 5px;
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .05em;
  font-family: ui-monospace, "SF Mono", monospace;
}

.pdm-fname {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.005em;
}

.pdm-fsize {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pdm-dl {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-subtle);
  border-radius: 50%;
  font-size: .72rem;
  color: var(--muted);
  transition: background .14s, color .14s, border-color .14s;
}

.pdm-file-item:hover .pdm-dl {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .post-detail-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 1.4rem 1.4rem 0 0;
  }

  .pdm-head {
    padding: 1.3rem 1.2rem 1.1rem 1.4rem;
    border-radius: 1.4rem 1.4rem 0 0;
  }

  .pdm-title { font-size: 1.15rem; }

  .pdm-body {
    padding: 1.2rem 1.4rem 1.8rem;
  }
}

/* ─── Mobile modal slide-up sheet ───────────────────────── */
@media (max-width: 768px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .preview-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 1.2rem 1.2rem 0 0;
    margin: 0;
  }
}