:root {
  /* 홈 상단 배너 비율 (가로 / 세로). PC 는 --hb-ratio, 모바일(820px 이하)은 --hb-ratio-m.
     더 높게 하려면 숫자를 줄이세요. 예) 7 / 2 (기본) → 10 / 3 (조금 더 높게) → 3 / 1 (더 높게) */
  --hb-ratio: 7 / 2;
  --hb-ratio-m: 2 / 1;
  --bg: #F4F9FF;
  --surface: #FFFFFF;
  --surface-2: #F1F7FE;
  --border: #D9E8F7;
  --text: #0F2A43;
  --muted: #51657C;
  --accent: #1D6FCC;
  --accent-2: #14589F;
  --accent-soft: rgba(42, 132, 224, 0.12);
  --display: "Sora", "Inter", sans-serif;
  --sans: "Inter", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: transparent;                /* 바탕색은 html 이 담당해요. (아래 '사이트 배경 장식'이 body 뒤에 깔려요) */
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.section-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Popup notice: 여러 개 지원. 각 팝업 = [로고 + X] / 이미지(꽉 차게) / [1시간 동안 보지 않기] */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.788);
  z-index: 100;
  padding: 16px;
}
.popup-overlay.popup-open { display: flex; }
html.popup-lock { overflow: hidden; }
.popup-stack {
  margin: auto;                      /* 작으면 가운데, 크면 위에서부터 스크롤 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.popup-box {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: clamp(340px, 30vw, 540px);   /* 여러 개일 때: 가로로 나란히 (화면이 클수록 크게) */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(20, 70, 130, 0.22);
}
.popup-box.is-visible { display: flex; }
.popup-stack[data-count="1"] .popup-box { max-width: clamp(420px, 36vw, 600px); }
.popup-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.popup-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}
.popup-brand img { width: 24px; height: 24px; }
.popup-idx {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.popup-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(30, 90, 160, 0.087);
  color: #0F2A43;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-close:hover { background: rgba(30, 90, 160, 0.142); }
.popup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.popup-body a { display: block; }
/* 팝업 이미지 칸: 모든 팝업이 같은 3:4 크기. 이미지는 잘리지 않고 전체가 보이며, 남는 양옆은 같은 이미지를 흐리게 깔아 자연스럽게 채움 */
.popup-frame { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background-color: #F4F9FF; }
.popup-frame::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--pbg) center / cover no-repeat;
  filter: blur(22px) brightness(0.7) saturate(1.15);
}
.popup-frame .popup-image { position: relative; width: 100%; height: 100%; object-fit: contain; }
/* 이미지 팝업끼리는 같은 줄에서 같은 높이로 맞춤(이미지 아래 글이 있어서 더 길어진 팝업이 있어도 버튼 줄이 나란히). 글만 있는 팝업은 그대로 */
@media (min-width: 821px) {
  .popup-stack { align-items: stretch; }
  .popup-box:not(.has-image) { align-self: flex-start; }
  .popup-box.has-image .popup-body { flex: 1 1 auto; }
}
.popup-image { display: block; width: 100%; height: auto; }
.popup-text {
  margin: 0;
  padding: 20px 22px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
}
.popup-foot {
  flex: 0 0 auto;
  padding: 14px 16px;
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.popup-hour {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.popup-hour:hover { filter: brightness(1.1); }
@media (max-width: 820px) {
  .popup-box, .popup-stack[data-count="1"] .popup-box { max-width: 420px; }   /* 모바일: 하나씩 */
}

/* Layout: top bar + left sidebar */
:root {
  --topbar-h: 60px;
  --sidebar-w: 236px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.823);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}
.brand-mark-img {
  width: 26px;
  height: 26px;
  margin-right: 9px;
}
.topbar-stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock-date { color: var(--muted); font-weight: 500; margin-right: -2px; }
.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, #3DDC84);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot, #3DDC84);
  animation: live-ping 1.8s ease-out infinite;
}
@keyframes live-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
}

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}
.content { min-width: 0; }
.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 18px 14px;
  border-right: 1px solid var(--border);
}
.side-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 600;
  color: #1E3A56;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.side-link:hover { border-color: var(--accent); color: var(--text); }
.side-link.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.side-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: #51657C;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.side-ico svg { width: 17px; height: 17px; }
.side-link:hover .side-ico { color: var(--accent); border-color: var(--accent); }
.side-link.active .side-ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sidebar-backdrop { display: none; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 580px;
  padding: 110px 0 100px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.aurora.a1 { width: 520px; height: 520px; left: -120px; top: -170px; background: rgba(94, 169, 240, 0.231); animation: drift1 16s ease-in-out infinite alternate; }
.aurora.a2 { width: 480px; height: 480px; right: -110px; bottom: -210px; background: rgba(90, 170, 235, 0.165); animation: drift2 19s ease-in-out infinite alternate; }
.aurora.a3 { width: 380px; height: 380px; left: 38%; top: 28%; background: rgba(94, 169, 240, 0.077); animation: drift3 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(120px, 80px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-140px, -60px) scale(1.15); } }
@keyframes drift3 { to { transform: translate(-80px, 70px) scale(0.9); } }
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 90, 160, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 90, 160, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 35% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 35% 45%, #000 20%, transparent 75%);
}

/* 오른쪽 로고 오브: 궤도와 링이 천천히 돌고 로고는 둥실 떠 있음 */
.hero-orb {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(12px, 6vw, 96px);
  width: 420px;
  height: 420px;
  translate: 0 -50%;
  pointer-events: none;
  animation: orb-in 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
@keyframes orb-in { from { opacity: 0; transform: scale(0.82); } }
.orb-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 169, 240, 0.303), transparent 68%);
  filter: blur(32px);
}
/* 두 링: 끊기지 않는 실선 + 색이 부드럽게 흐르는 그라데이션 */
.orb-ring {
  position: absolute;
  border-radius: 50%;
}
.orb-ring.r1 {
  inset: 6%;
  background: conic-gradient(from 0deg, rgba(140, 196, 247, 0.165), rgba(140, 196, 247, 0.495), rgba(140, 196, 247, 0.165));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.4px));
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.5));
  animation: spin 48s linear infinite;
}
.orb-ring.r2 {
  inset: -7%;
  background: conic-gradient(from 0deg, rgba(90, 170, 235, 0.077), rgba(90, 170, 235, 0.275), rgba(90, 170, 235, 0.077));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 70s linear infinite reverse;
}
/* 핑크 구슬 + 뒤따라오는 꼬리: 안쪽 링 위를 부드럽게 이어서 달림 */
.orb-orbit { position: absolute; inset: 6%; animation: spin 14s linear infinite; }
.orb-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 230deg, rgba(90, 170, 235, 0.468) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.orb-orbit::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #2A84E0;
  box-shadow: 0 0 14px 4px rgba(90, 170, 235, 0.6);
}
.orb-logo {
  position: absolute;
  inset: 20%;
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 24px 50px rgba(139, 92, 246, 0.5));
  animation: float 6s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-text { max-width: 620px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  margin: 0 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(94, 169, 240, 0.35);
  background: rgba(90, 170, 235, 0.044);
  color: #14589F;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2);
}
.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.ht-line { display: block; }
.ht-grad {
  display: block;
  background: linear-gradient(100deg, #2A84E0 0%, #2A84E0 45%, #FF9A6B 75%, #2A84E0 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.hero-desc { color: var(--muted); max-width: 46ch; margin: 0; font-size: 1.02rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* 히어로 글자/버튼이 차례대로 떠오르는 등장 효과 */
.hero-text > * { opacity: 0; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero-text > :nth-child(1) { animation-delay: 0.05s; }
.hero-text > :nth-child(2) { animation-delay: 0.16s; }
.hero-text > :nth-child(3) { animation-delay: 0.28s; }
.hero-text > .hero-actions { animation-delay: 0.42s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1D6FCC; }
.btn-ghost { border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-event {
  background: linear-gradient(135deg, var(--accent-2), #FF8A65);
  color: #1A0A12;
  font-weight: 700;
}
.btn-event:hover { filter: brightness(1.08); }



/* Sections */
.section { padding: 76px 0; border-bottom: 1px solid var(--border); }
.section-title {
  font-family: var(--display);
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.section-sub { color: var(--muted); margin: 0 0 40px; }

/* About / Why us */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.why-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px;
  background: var(--surface);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.why-icon {
  display: inline-block;
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.why-card h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.why-card p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.6;
}

/* Trust strip */
/* Featured products */
.featured-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.featured-header .section-title { margin: 0; }
.featured-see-all {
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.featured-see-all:hover { color: var(--accent-2); }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.featured-card {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px 20px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.featured-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.featured-card-cat {
  color: var(--accent-2);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.featured-card-name {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.featured-card-price {
  font-family: var(--display);
  font-size: 1.3rem;
  margin: 0;
  color: var(--text);
}
@media (max-width: 820px) {
  .featured-grid { grid-template-columns: 1fr; }
}

/* Stats */
.stats {
  padding-top: 56px;
  border-bottom: none;
  background: radial-gradient(500px circle at 85% 30%, rgba(90, 170, 235, 0.044), transparent 60%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 28px 20px;
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 6px;
}
.stat-label {
  color: var(--muted);
  font-size: 0.88rem;
}
@media (max-width: 820px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* Products */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.plan {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.plan-highlight {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 60%);
}
.plan-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--accent-2);
  color: #1A0A12;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-name {
  font-family: var(--display);
  margin: 4px 0 6px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.plan-desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 20px; min-height: 40px; }
.plan-price { font-family: var(--display); font-size: 1.6rem; margin: 0 0 20px; }
.plan-period { font-size: 0.85rem; color: var(--muted); font-family: var(--sans); }
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
  font-size: 0.9rem;
  color: var(--text);
}
.plan-features li {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.plan-features li:first-child { border-top: none; }
.plan-cta { text-align: center; }

/* Events - grid of thumbnail tiles */
.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.event-tile {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(94, 169, 240, 0.35);
  background: var(--surface);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.event-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent-2);
}
.event-tile-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-tile-fallback { font-size: 2rem; }
.event-tile-body { padding: 16px 18px; }
.event-tile-tag {
  display: inline-block;
  color: var(--accent-2);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.event-tile-body h3 {
  font-family: var(--display);
  font-size: 1rem;
  margin: 0;
  color: var(--text);
}
@media (max-width: 820px) {
  .event-grid { grid-template-columns: 1fr; }
}

/* Event detail page */
.event-detail-inner { max-width: 680px; }
.event-back {
  display: inline-block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 20px;
}
.event-back:hover { color: var(--text); }
.event-detail-image {
  display: block;
  width: 100%;
  border-radius: 14px;
  margin-bottom: 20px;
}
.event-detail-title {
  font-family: var(--display);
  font-size: 1.5rem;
  margin: 4px 0 16px;
}
.event-detail-desc {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.8;
  white-space: pre-line;
}

/* Terms */
.terms-list { display: flex; flex-direction: column; gap: 22px; }
.term-item h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  color: #1B66C4;
  margin: 0 0 8px;
}
.term-item p { color: #0F2A43; margin: 0; max-width: 72ch; font-size: 0.97rem; line-height: 1.85; }
.term-points {
  margin: 0;
  padding-left: 1.3em;
  color: #0F2A43;
  font-size: 0.97rem;
  line-height: 1.85;
  max-width: 72ch;
}
.term-points li {
  margin-bottom: 8px;
}
.term-points li::marker {
  color: var(--accent);
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 4px 20px;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--display);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  color: var(--accent);
  font-size: 1.2rem;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  color: #0F2A43;
  font-size: 0.97rem;
  line-height: 1.85;
  margin: 0 0 20px;
  white-space: pre-line;
}
.faq .section-sub { color: #1E3A56; }

/* Contact */
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.contact-notice-img {
  display: block;
  width: 100%;
  max-width: 640px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 40px;
}
.contact-list {
  margin: 0;
  border-top: 1px solid var(--border);
}
.contact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.contact-row dt { color: var(--muted); font-size: 0.9rem; }
.contact-row dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.92rem; }

/* Footer */
.footer { padding: 28px 0; border-top: 1px solid var(--border); }
.footer-inner {
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.social-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.social-discord { background: #5865F2; box-shadow: 0 6px 18px rgba(94, 169, 240, 0.28); }
.social-kakao { background: #FEE500; box-shadow: 0 6px 18px rgba(254, 229, 0, 0.22); }
.btn-discord, .btn-kakao { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.btn-discord { background: #5865F2; color: #fff; box-shadow: 0 10px 28px rgba(94, 169, 240, 0.28); }
.btn-discord:hover { background: #6B77F5; }
.btn-kakao { background: #FEE500; color: #191919; box-shadow: 0 10px 28px rgba(254, 229, 0, 0.2); }
.btn-kakao:hover { background: #FFEC3D; }

/* Category tabs */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.cat-tab {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cat-tab:hover { border-color: var(--accent); }
.cat-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Product categories */
.category-block { margin-bottom: 48px; }
.category-block:last-child { margin-bottom: 0; }
.category-title {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--accent-2);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Admin */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.admin-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 24px;
  margin-bottom: 24px;
}
.admin-block h3 { font-family: var(--display); margin: 0 0 16px; }
.admin-category-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 0.88rem;
}
.chip-x {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.chip-x:hover { color: var(--accent-2); }
.inline-form { display: inline; margin: 0; }
.admin-inline-form { display: flex; gap: 10px; }
.admin-inline-form input {
  flex: 1;
  max-width: 320px;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
}
.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.82rem; }
.admin-actions { display: flex; gap: 8px; }
.admin-btn-sm { padding: 6px 14px; font-size: 0.82rem; }

.admin-form { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.admin-form label { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.admin-form textarea { resize: vertical; }
.admin-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 14px;
}
.admin-checkbox input { width: auto; }
.admin-form-actions { display: flex; gap: 10px; margin-top: 20px; }
.admin-login-section { display: flex; justify-content: center; }
.admin-login-box { max-width: 360px; }
.admin-error { color: var(--accent-2); font-size: 0.88rem; margin-bottom: 12px; }

/* Responsive */
@media (max-width: 820px) {
  .hero { min-height: 0; padding: 84px 0 76px; }
  .hero-orb { width: 330px; height: 330px; right: -140px; opacity: 0.38; }
  .hero-actions { gap: 10px; }
  .why-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 120px 1fr; }

  .menu-toggle { display: flex; }
  .topbar { padding: 0 14px; gap: 10px; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: 260px;
    height: auto;
    z-index: 45;
    background: var(--bg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .clock-date { display: none; }
  .stat-pill { padding: 6px 11px; font-size: 0.78rem; }
}

@media (max-width: 440px) {
  .brand-text { display: none; }
}

/* Admin: service status buttons */
.admin-status-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.admin-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-status-btn:hover { border-color: var(--dot); }
.admin-status-btn.current { border-color: var(--dot); background: var(--bg); box-shadow: 0 0 0 1px var(--dot) inset; }
.admin-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }

/* ===== Home polish: buttons, reveal, spotlight, icons, stats ===== */
.btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease, color 0.15s ease; }
.btn-lg { padding: 15px 28px; font-size: 1rem; border-radius: 12px; }
.btn-lg:hover { transform: translateY(-2px); }
.hero .btn-primary { box-shadow: 0 12px 34px rgba(94, 169, 240, 0.36); }
.hero .btn-event { box-shadow: 0 12px 34px rgba(90, 170, 235, 0.24); }
.btn-arrow { display: inline-block; margin-left: 4px; transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.7s ease var(--d, 0s), translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s), transform 0.15s ease, border-color 0.15s ease;
}
.js .reveal.in { opacity: 1; translate: 0 0; }

.spot { position: relative; isolation: isolate; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 169, 240, 0.121), transparent 65%);
}
.spot:hover::before { opacity: 1; }

.section-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--accent-2);
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #1B66C4;
  background: linear-gradient(135deg, rgba(94, 169, 240, 0.165), rgba(90, 170, 235, 0.11));
  border: 1px solid rgba(140, 196, 247, 0.38);
  box-shadow: 0 8px 24px rgba(94, 169, 240, 0.16);
  font-size: 0;
}
.why-icon svg { width: 22px; height: 22px; }
.stat-number {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #2A84E0, #2A84E0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) and (min-width: 821px) {
  .hero-orb { width: 340px; height: 340px; right: -30px; opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora, .orb-ring, .orb-orbit, .orb-logo, .ht-grad, .hero-orb { animation: none !important; }
  .hero-text > * { opacity: 1; animation: none; }
}

/* ===== 우리의 여정 (챕터형 스토리) ===== */
.journey-page { border-bottom: none; }
.journey-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* 머리말 */
.journey-hero { position: relative; margin-bottom: 52px; padding-top: 8px; }
.journey-hero::before {
  content: "";
  position: absolute;
  left: -80px; top: -60px;
  width: 360px; height: 260px;
  background: radial-gradient(closest-side, rgba(94, 169, 240, 0.121), transparent);
  pointer-events: none;
  z-index: -1;
}
.journey-title { margin: 8px 0 18px; font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.2; letter-spacing: -0.02em; }
.journey-lead { max-width: 62ch; padding-left: 18px; border-left: 3px solid var(--accent-2); }
.journey-lead p { margin: 0 0 6px; color: #1E3A56; font-size: 1.08rem; line-height: 1.85; word-break: keep-all; }
.journey-lead p:last-child { margin-bottom: 0; }
.journey-lead strong { color: var(--text); }

/* 타임라인 */
.chapters { position: relative; list-style: none; margin: 0; padding: 0 0 0 68px; }
.chapters-line { position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--border); }
.chapters-fill { display: block; width: 100%; height: 0; border-radius: 2px; background: linear-gradient(to bottom, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(140, 196, 247, 0.44); }
.chapter { position: relative; padding-bottom: 40px; }
.chapter:last-child { padding-bottom: 28px; }
.chapter-dot {
  position: absolute;
  left: -68px; top: -2px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--muted);
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
.chapter-dot svg { width: 20px; height: 20px; }
.chapter-dot.is-on { border-color: var(--accent-2); color: var(--accent-2); background: rgba(140, 196, 247, 0.066); box-shadow: 0 0 0 5px rgba(140, 196, 247, 0.096); transform: scale(1.04); }

.chapter-tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(140, 196, 247, 0.4);
  background: rgba(140, 196, 247, 0.055);
  color: var(--accent-2);
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chapter-card {
  position: relative;
  overflow: hidden;
  padding: 30px 32px 32px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.chapter-card:hover { border-color: rgba(140, 196, 247, 0.45); transform: translateY(-2px); }
/* 큰 번호: 글 뒤에 은은하게 */
.chapter-num {
  position: absolute;
  right: 20px; top: 2px;
  font-family: var(--display);
  font-size: 6.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(140, 196, 247, 0.22);
  pointer-events: none;
  user-select: none;
}
.chapter-title { position: relative; margin: 0 0 18px; padding-right: 76px; font-family: var(--display); font-size: 1.4rem; line-height: 1.4; letter-spacing: -0.01em; word-break: keep-all; }
.chapter-img { display: block; width: 100%; height: auto; margin: 0 0 20px; border-radius: 14px; }

/* 본문 */
.story { position: relative; }
.story p { margin: 0 0 12px; color: #1E3A56; font-size: 0.98rem; line-height: 1.95; word-break: keep-all; }
.story p:last-child { margin-bottom: 0; }
.story p.lead { color: var(--text); font-size: 1.12rem; font-weight: 600; line-height: 1.7; }
.story strong { color: var(--text); font-weight: 700; background: linear-gradient(transparent 62%, rgba(140, 196, 247, 0.154) 62%); }
.story blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent-2);
  border-radius: 0 12px 12px 0;
  background: rgba(140, 196, 247, 0.044);
  color: var(--text);
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.7;
  word-break: keep-all;
}

/* 마무리 */
.journey-outro {
  margin-top: 8px;
  padding: 40px 28px 36px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: radial-gradient(420px circle at 50% 0%, rgba(94, 169, 240, 0.11), transparent 70%), var(--surface);
}
.outro-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; border: 1px solid rgba(140, 196, 247, 0.4); background: rgba(140, 196, 247, 0.055); color: var(--accent-2); }
.outro-mark svg { width: 24px; height: 24px; }
.journey-outro h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.35rem; }
.journey-outro p { margin: 0; color: #1E3A56; }
.outro-stat { margin: 22px 0 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }
.outro-stat strong { font-family: var(--display); font-size: 2.4rem; font-weight: 800; color: var(--accent-2); line-height: 1; }
.outro-stat span { color: #1E3A56; font-size: 1rem; font-weight: 500; }
.outro-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

@media (max-width: 560px) {
  .journey-inner { padding: 0 16px; }
  .chapters { padding-left: 52px; }
  .chapters-line { left: 15px; }
  .chapter-dot { left: -52px; width: 32px; height: 32px; }
  .chapter-dot svg { width: 15px; height: 15px; }
  .chapter-card { padding: 22px 20px 24px; border-radius: 18px; }
  .chapter-num { font-size: 4.2rem; right: 12px; }
  .chapter-title { font-size: 1.2rem; padding-right: 52px; }
  .journey-hero::before { left: -40px; }
  .journey-outro { padding: 30px 18px 28px; }
}
@media (prefers-reduced-motion: reduce) { .chapter-dot, .chapter-card { transition: none; } }

/* ===== 품절 표시 ===== */
.plan-badge.badge-soldout { background: #E5484D; color: #fff; }
.plan-soldout .plan-name,
.plan-soldout .plan-desc,
.plan-soldout .plan-price,
.plan-soldout .plan-features { opacity: 0.5; }
.btn-soldout {
  background: var(--surface-2);
  color: #51657C;
  border: 1px solid var(--border);
  cursor: not-allowed;
  pointer-events: none;
}
.featured-soldout .featured-card-cat,
.featured-soldout .featured-card-name,
.featured-soldout .featured-card-price { opacity: 0.5; }
.stock-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.stock-in { background: rgba(61, 220, 132, 0.14); color: #0E7A4B; }
.stock-out { background: rgba(229, 72, 77, 0.18); color: #B3261E; }

/* <button> 으로 만든 테두리/고스트 버튼이 브라우저 기본 회색 배경으로 보이던 문제 수정 */
.btn-ghost, .btn-outline {
  background: transparent;
  font-family: var(--sans);
  cursor: pointer;
}
.btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }

/* ===== 회원가입 / 로그인 ===== */
.auth-section { display: flex; justify-content: center; border-bottom: none; padding-left: 16px; padding-right: 16px; }
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 34px 32px 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(20, 70, 130, 0.14);
}
.auth-title { margin: 0 0 6px; font-family: var(--display); font-size: 1.6rem; }
.auth-sub { margin: 0 0 22px; color: #1E3A56; font-size: 0.92rem; }
.auth-form { max-width: none; }
.auth-form label { color: #1E3A56; }
.auth-form input[type="text"], .auth-form input[type="password"] { padding: 12px 14px; }
.auth-hint { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.auth-submit { width: 100%; margin-top: 22px; text-align: center; }
.auth-switch { margin: 20px 0 0; text-align: center; color: #1E3A56; font-size: 0.9rem; }
.auth-switch a { color: var(--accent); font-weight: 700; }
.auth-msg { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; font-size: 0.88rem; line-height: 1.5; }
.auth-msg-error { color: #B3261E; background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.35); }
.auth-msg-info { color: #1B66C4; background: rgba(94, 169, 240, 0.066); border: 1px solid rgba(94, 169, 240, 0.35); }
@media (max-width: 480px) { .auth-card { padding: 26px 20px 24px; } }

/* ===== 관리자: 탭 + 회원 목록 ===== */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: #1E3A56;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.admin-tab:hover { border-color: var(--accent); color: var(--text); }
.admin-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab-badge { padding: 1px 8px; border-radius: 999px; background: rgba(30, 90, 160, 0.109); font-size: 0.75rem; }
.js .admin-panel:not(.active) { display: none; }
.member-count { margin-left: 8px; color: var(--accent-2); font-size: 0.85rem; font-weight: 600; }
.member-search {
  width: 260px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.86rem;
}
.member-table-wrap { overflow-x: auto; }
.member-empty { text-align: center; color: var(--muted); padding: 28px 10px; }

/* ===== 상단바 오른쪽: 로그인 / 회원가입 (로그인하면 아이디 + 로그아웃) ===== */
.topbar-auth { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.tb-user { color: #1E3A56; font-size: 0.84rem; white-space: nowrap; }
.tb-user b { color: var(--text); font-family: var(--display); }
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--display);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.tb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.tb-btn-ghost { background: var(--surface); color: var(--text); }
.tb-btn-ghost:hover, .tb-btn-ghost.is-active { border-color: var(--accent); color: var(--accent); }
.tb-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(94, 169, 240, 0.28); }
.tb-btn-primary:hover { filter: brightness(1.1); }

@media (max-width: 820px) {
  /* 모바일: 로그인 전엔 시계/운영상태를 숨기고 오른쪽 위에 로그인·회원가입만 */
  .topbar-guest .topbar-stats { display: none; }
  .topbar-guest .topbar-auth { margin-left: auto; }
  .tb-btn { padding: 7px 13px; font-size: 0.8rem; }
  /* 로그인 후: 시계 + 운영상태 옆에 로그아웃은 아이콘만 */
  .tb-user, .tb-label { display: none; }
  .tb-logout { width: 34px; height: 34px; padding: 0; }
}
@media (max-width: 360px) {
  .topbar-stats .stat-pill:first-child { display: none; }
}

/* ===== 정가 / 할인율 표시 ===== */
.price-original {
  margin-right: 8px;
  color: #51657C;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
}
.price-original s { text-decoration-thickness: 1.5px; }
.discount-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(61, 220, 132, 0.38);
  background: rgba(61, 220, 132, 0.13);
  color: #0E7A4B;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.discount-pill-sm { top: 14px; right: 14px; font-size: 0.72rem; padding: 3px 9px; }
.discount-preview { min-height: 1.2em; font-size: 0.82rem; margin-top: 2px; }
.discount-preview.ok { color: #0E7A4B; }
.discount-preview.warn { color: #9A5B00; }

/* ===== 홈 첫 화면 글자 영역: 글꼴 + 스티커 라벨 ===== */
:root {
  /* 홈 첫 화면 제목/버튼 글꼴. 바꾸고 싶으면 이 줄만 수정하세요. (base.html 의 Google Fonts 링크에도 같은 글꼴 이름이 있어야 해요) */
  --hero-font: "Do Hyeon", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.hero-title {
  font-family: var(--hero-font);
  font-weight: 400;              /* 도현체는 이미 굵게 그려진 글꼴이라 더 굵게 만들지 않음 */
  font-synthesis: none;
  font-size: clamp(2.7rem, 6.2vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero-actions .btn {
  font-family: var(--hero-font);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

/* "구독형 디지털 상품 스토어": 형광펜으로 칠한 듯한 하이라이트 라벨 */
.hero-text > .hero-tag {
  margin: 0 0 28px;
  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s forwards;
}
.hero-tag span {
  position: relative;
  display: inline-block;
  padding: 3px 12px;
  isolation: isolate;
  color: #0F2A43;
  font-family: var(--hero-font);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}
.hero-tag span::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 52%;
  z-index: -1;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(90, 170, 235, 0.413), rgba(94, 169, 240, 0.385));
  transform: skewX(-10deg);
}
@media (prefers-reduced-motion: reduce) {
  .hero-text > .hero-tag { opacity: 1; animation: none; }
}
@media (max-width: 480px) {
  .hero-tag span { font-size: 1rem; }
}

/* ===== 홈 상단 배너 (자동으로 넘어가는 광고 배너) ===== */
.home-banner { max-width: 1040px; margin: 0 auto; padding: 22px 24px 0; }
.hb-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--hb-ratio);      /* 배너 칸은 항상 이 비율로 고정이에요. (이미지 비율이 달라도 높이가 안 바뀌고, 넘치는 부분은 가운데 기준으로 잘려요) */
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.hb-viewport.hb-fit { aspect-ratio: var(--hb-ratio); }          /* (예전 JS 가 붙이던 클래스: 이제 비율을 풀지 않아요) */
.hb-track { display: flex; align-items: stretch; height: 100%; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.hb-slide { flex: 0 0 100%; min-width: 0; }
.hb-slide a, .hb-slide picture { display: block; width: 100%; }
/* 이미지는 자르지 않고 통째로. 너무 세로로 긴 이미지만 최대 높이로 제한(그 경우도 잘리지 않고 안에 맞춰 들어감) */
.hb-slide, .hb-slide picture, .hb-slide a { display: block; height: 100%; }
.hb-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.hb-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(15, 42, 67, 0.385);
  color: #0F2A43;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.hb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 42, 67, 0.315);
  color: #0F2A43;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.hb-prev { left: 12px; }
.hb-next { right: 12px; }
.hb-viewport:hover .hb-nav, .hb-nav:focus-visible { opacity: 1; }
.hb-nav:hover { background: rgba(15, 42, 67, 0.45); }
@media (max-width: 820px) {
  .home-banner { padding: 14px 16px 0; }
  .hb-viewport, .hb-viewport.hb-fit { aspect-ratio: var(--hb-ratio-m); border-radius: 14px; }
  .hb-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hb-track, .hb-viewport { transition: none; } }

/* 관리자: 배너/팝업 썸네일 */
.admin-thumb { display: block; width: 96px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); }

/* ===== 홈: 맨 위 배너 + 카드형 대시보드 레이아웃 ===== */
.home-banner { padding-top: 24px; }
.hb-viewport { border-radius: 22px; box-shadow: 0 18px 50px rgba(20, 70, 130, 0.14); }

.home-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px 64px; }
.home-wrap-top { padding-top: 24px; padding-bottom: 0; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.home-actions .btn { padding: 12px 24px; border-radius: 12px; font-size: 0.95rem; }
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.home-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.home-card {
  min-width: 0;
  padding: 26px 26px 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}
.home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home-card-title { margin: 0 0 6px; font-family: var(--display); font-size: 1.25rem; line-height: 1.35; }
.home-card-head .home-card-title { margin: 0; }
.home-card-sub { margin: 0 0 22px; color: var(--muted); font-size: 0.92rem; }
.home-card .section-kicker { margin-bottom: 8px; }

/* 카드 안에서는 칸 크기에 맞춰 자동으로 줄을 바꿈 */
.home-card .featured-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.home-card .featured-card { background: var(--surface-2); }
.home-card .why-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 22px; }
.home-card .why-card { background: var(--surface-2); padding: 22px 20px; }

/* 서비스 현황 */
.stat-list { list-style: none; margin: 14px 0 0; padding: 0; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.stat-row:first-child { border-top: none; }
.stat-row .stat-label { color: #1E3A56; font-size: 0.92rem; }
.stat-row .stat-number { margin: 0; font-size: 1.6rem; }

/* 배너가 없을 때 보이는 간단한 소개 */
.intro-card { padding: 38px 34px; }
.intro-title { margin: 0 0 14px; font-family: var(--display); font-size: clamp(1.8rem, 4.6vw, 2.6rem); line-height: 1.2; letter-spacing: -0.02em; }
.intro-title span { color: var(--accent-2); }
.intro-desc { margin: 0 0 6px; color: var(--muted); max-width: 52ch; }
.intro-card .home-actions { margin-top: 22px; }

@media (max-width: 960px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .home-wrap { padding: 0 16px 48px; }
  .home-banner { padding-top: 16px; }
  .home-card { padding: 20px 18px 22px; border-radius: 18px; }
  .intro-card { padding: 26px 20px; }
  .home-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ===== 할인 배지/가격 겹침 해결 + 홈 인기 상품 한 줄 목록 ===== */
/* 배지를 카드 위에 띄우지 않고, 정가 옆 정해진 자리에 놓음 */
.discount-pill.discount-pill-inline { position: static; top: auto; right: auto; flex-shrink: 0; }
.plan-compare {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 4px;
  min-height: 34px;          /* 배지가 있는 카드/없는 카드가 같은 높이를 차지해서 가격 줄이 나란히 맞음 */
}
.plan-compare .price-original { margin-right: 0; }
.plan-price { white-space: nowrap; }

.feat-list { display: flex; flex-direction: column; gap: 10px; }
.feat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.feat-row:hover { border-color: var(--accent); transform: translateY(-2px); }
.feat-info { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0; }
.feat-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;          /* 제품 화면의 아이콘과 같은 방식: 테두리/배경 없이 이미지만 */
}
/* 이미지가 없는 상품의 글자 아이콘만 네모칸 유지 */
.feat-ico-ph { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg); border-radius: 12px; font-family: var(--display); font-size: 1.2rem; font-weight: 800; color: var(--accent-2); }
.feat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feat-cat { color: var(--accent-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.feat-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-family: var(--display); font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.feat-chip { font-style: normal; padding: 2px 9px; border-radius: 999px; background: var(--accent-2); color: #1A0A12; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.feat-chip-soldout { background: #E5484D; color: #fff; }
.feat-price { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; margin-left: auto; text-align: right; }
.feat-price-main { font-family: var(--display); font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.feat-price-main small { margin-left: 2px; color: var(--muted); font-family: var(--sans); font-size: 0.8rem; font-weight: 500; }
.featured-soldout .feat-ico, .featured-soldout .feat-cat, .featured-soldout .feat-name-text, .featured-soldout .feat-price .price-original, .featured-soldout .feat-price-main { opacity: 0.5; }
@media (max-width: 560px) {
  .feat-row { padding: 14px; }
}

/* ===== 홈 PC: 바로가기 카드 + 고정되는 오른쪽 칸 ===== */
.home-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; position: sticky; top: 76px; }
.quick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.quick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.quick-row:hover { border-color: var(--accent); transform: translateX(2px); }
.quick-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent-2);
}
.quick-ico svg { width: 17px; height: 17px; }
.quick-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.quick-text b { font-family: var(--display); font-size: 0.92rem; font-weight: 700; }
.quick-text small { color: var(--muted); font-size: 0.74rem; }
.quick-arrow { color: var(--muted); font-size: 1rem; transition: transform 0.15s ease, color 0.15s ease; }
.quick-row:hover .quick-arrow { color: var(--text); transform: translateX(3px); }
/* PC에서는 배너 밑 버튼 줄이 필요 없음(오른쪽 '바로가기'가 대신함). 모바일은 기존 그대로 */
@media (min-width: 961px) { .home-actions-mobile { display: none; } }
@media (max-width: 960px) {
  .quick-card { display: none; }
  .home-side { position: static; }
}

/* ================= 구매 / 장바구니 / 주문 ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 상품 카드 버튼 2개 */
.plan-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.plan-actions .btn { width: 100%; text-align: center; padding-left: 0; padding-right: 0; }
.plan-actions form { display: block; }

/* 상단 장바구니 아이콘 + 개수 */
.tb-cart { position: relative; width: 38px; height: 38px; padding: 0; }
.tb-cart svg { width: 17px; height: 17px; }
.tb-cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent-2); color: #1A0A12; font-size: 0.7rem; font-weight: 800; line-height: 1;
  border: 2px solid var(--bg);
}
.tb-cart-badge[hidden] { display: none; }
.side-badge { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--accent-2); color: #1A0A12; font-size: 0.72rem; font-style: normal; font-weight: 800; }
@media (max-width: 820px) { .tb-cart { width: 34px; height: 34px; } }

/* 알림창(토스트) */
.toast-stack { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  border-radius: 14px; background: #F4F9FF; border: 1px solid var(--border); color: var(--text);
  box-shadow: 0 14px 40px rgba(20, 70, 130, 0.2); font-size: 0.92rem; animation: toast-in 0.25s ease both;
}
.toast a { color: var(--accent-2); font-weight: 700; white-space: nowrap; }
.toast-ok { border-left: 4px solid #3DDC84; }
.toast-error { border-left: 4px solid #E5484D; }
.toast-out { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 공통 레이아웃 */
.shop-inner { max-width: 1000px; }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; margin-top: 8px; }
.shop-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.shop-card, .shop-summary { padding: 22px 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.shop-summary { position: sticky; top: 76px; }
.shop-summary h3, .shop-card-title { margin: 0 0 14px; font-family: var(--display); font-size: 1.08rem; }
.shop-cta { display: block; width: 100%; text-align: center; margin-top: 16px; }
.shop-link, .shop-back { display: inline-block; margin-top: 10px; color: var(--accent-2); font-size: 0.88rem; font-weight: 600; }
.shop-back { margin: 0 0 6px; color: var(--muted); }
.shop-back:hover, .shop-link:hover { color: var(--text); }
.shop-note { margin: 12px 0 0; color: #1E3A56; font-size: 0.86rem; line-height: 1.65; }
.shop-warn { margin: 12px 0 0; padding: 11px 14px; border-radius: 10px; color: #9A5B00; background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.35); font-size: 0.86rem; line-height: 1.6; }
.shop-empty { text-align: center; padding: 56px 20px; border: 1px dashed var(--border); border-radius: 20px; background: var(--surface); }
.shop-empty-ico { font-size: 2.4rem; margin-bottom: 8px; }
.shop-empty p { margin: 0 0 18px; color: var(--muted); }
.sum-list { margin: 0; }
.sum-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 0.92rem; }
.sum-list dt { color: var(--muted); flex-shrink: 0; }
.sum-list dd { margin: 0; text-align: right; word-break: break-all; }
.sum-total { margin-top: 6px; padding-top: 14px !important; border-top: 1px solid var(--border); }
.sum-total dt { color: var(--text); font-weight: 700; }
.sum-total dd { font-family: var(--display); font-size: 1.35rem; font-weight: 800; color: var(--accent-2); }
.sum-hint { margin: 12px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

/* 장바구니 */
.cart-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.cart-row.is-unavailable { opacity: 0.6; }
.cart-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.cart-ico-ph { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg); border-radius: 14px; font-family: var(--display); font-size: 1.3rem; font-weight: 800; color: var(--accent-2); }
.cart-info { flex: 1; min-width: 0; }
.cart-cat { color: var(--accent-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.cart-name { margin: 2px 0 4px; font-family: var(--display); font-size: 1.02rem; line-height: 1.35; }
.cart-price { margin: 0; color: #1E3A56; font-size: 0.9rem; }
.cart-price small { margin-left: 2px; color: var(--muted); }
.cart-flag { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 0.7rem; font-style: normal; font-weight: 800; }
.cart-controls { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.cart-qty { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 0.9rem; }
.cart-sub { min-width: 92px; text-align: right; font-family: var(--display); font-size: 1.02rem; }
.cart-remove, .cart-clear { background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 0.84rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cart-remove:hover, .cart-clear:hover { color: #B3261E; }
.cart-clear-form { text-align: right; }

/* 결제 */
.co-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border); }
.co-line:first-of-type { border-top: none; }
.co-line.is-unavailable { opacity: 0.55; }
.co-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-line-price { text-align: right; color: var(--muted); font-size: 0.86rem; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.co-line-price b { color: var(--text); font-family: var(--display); font-size: 1rem; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--border); }
.co-total strong { font-family: var(--display); font-size: 1.3rem; color: var(--accent-2); }
.shop-form label em { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.shop-form select { max-width: 220px; }
.pay-steps { margin: 14px 0 0; padding-left: 1.2em; color: #1E3A56; font-size: 0.86rem; line-height: 1.8; }
.pay-steps b { color: var(--text); }
.shop-agree { margin-top: 16px; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; }
.shop-agree a { color: var(--accent-2); text-decoration: underline; }

/* 주문 상세 */
.order-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.order-head .section-title { margin: 0; }
.status-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
.status-lg { font-size: 0.86rem; padding: 5px 14px; }
.st-pending { background: rgba(255, 183, 77, 0.16); color: #9A5B00; }
.st-paid { background: rgba(94, 169, 240, 0.088); color: #1B66C4; }
.st-done { background: rgba(61, 220, 132, 0.15); color: #0E7A4B; }
.st-canceled { background: rgba(229, 72, 77, 0.16); color: #B3261E; }
.stepper { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.stepper li span { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); font-size: 0.78rem; }
.stepper li.is-on { color: var(--text); }
.stepper li.is-on span { background: var(--accent); color: #fff; }
.stepper li.is-now { border-color: var(--accent); }
.bank-list { margin: 0; }
.bank-list > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 0.95rem; }
.bank-list > div:first-child { border-top: none; }
.bank-list dt { color: var(--muted); }
.bank-list dd { margin: 0; display: flex; align-items: center; gap: 10px; text-align: right; font-weight: 600; }
.bank-amount { font-family: var(--display); font-size: 1.25rem; color: var(--accent-2); }
.copy-btn { padding: 4px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); }
.copy-btn.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.bank-card .cart-clear { margin-top: 14px; }
.note-card { border-color: rgba(61, 220, 132, 0.4); }
.note-text { margin: 0; white-space: pre-line; word-break: break-all; line-height: 1.8; }
.order-cards { display: flex; flex-direction: column; gap: 12px; }
.order-card { display: block; padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); transition: border-color 0.15s ease, transform 0.15s ease; }
.order-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.order-card-top, .order-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-no { font-family: var(--display); font-weight: 700; }
.order-summary { margin: 8px 0 10px; color: #1E3A56; font-size: 0.92rem; }
.order-date { color: var(--muted); font-size: 0.84rem; }
.order-card-bottom strong { font-family: var(--display); font-size: 1.1rem; }

/* 관리자: 주문 */
.shop-set-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.order-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.of-btn { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: #1E3A56; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.of-btn b { margin-left: 4px; color: var(--accent-2); }
.of-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.of-btn.active b { color: #0F2A43; }
.order-link { color: var(--accent-2); font-weight: 700; }
.order-items-cell { max-width: 260px; font-size: 0.86rem; color: #1E3A56; }
.muted { color: var(--muted); }
.tab-badge-alert { background: #E5484D !important; color: #fff; }
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
.history li:first-child { border-top: none; }
.history time { color: var(--muted); font-variant-numeric: tabular-nums; }
.history em { color: #1E3A56; font-style: normal; }
.quick-actions { display: flex; flex-direction: column; gap: 0; }

@media (max-width: 900px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-summary { position: static; }
  .shop-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cart-row { flex-wrap: wrap; }
  .cart-controls { width: 100%; justify-content: space-between; }
  .stepper { flex-direction: column; }
  .shop-card, .shop-summary { padding: 18px 16px; border-radius: 18px; }
  .toast-stack { bottom: 76px; }
}

.co-unit { white-space: nowrap; }
.co-unit small { margin: 0 2px; }
.shop-inner > .section-title { margin-bottom: 18px; }

.shop-set-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ================= 제품 설명 보기 + 누적 판매량 ================= */
/* 누적 판매량 박스: 설명 글이 빠진 자리를 채움 */
/* 누적 판매 + 상품 정보를 한 박스로 */
.plan-facts {
  margin: 0 0 14px;
  padding: 2px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.plan-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.plan-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}
.plan-stat + .plan-info-row, .plan-facts > .plan-info-row:first-child { }
.plan-facts > .plan-info-row:first-child { border-top: none; }
.plan-info-label { display: inline-flex; align-items: center; gap: 8px; color: #1E3A56; font-weight: 600; flex-shrink: 0; }
.plan-info-label svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-2); }
.plan-info-value { color: var(--text); font-weight: 700; text-align: right; min-width: 0; word-break: keep-all; }
.plan-stat-label { display: inline-flex; align-items: center; gap: 8px; color: #1E3A56; font-size: 0.86rem; font-weight: 600; }
.plan-stat-label svg { width: 16px; height: 16px; color: var(--accent-2); }
.plan-stat-num { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1; white-space: nowrap; }
.plan-stat-num small { margin-left: 3px; color: var(--muted); font-family: var(--sans); font-size: 0.8rem; font-weight: 500; }
.plan-soldout .plan-facts { opacity: 0.6; }

/* 제품 설명 보기 버튼: 남는 공간을 채우면서 구매 버튼은 항상 카드 아래에 */
.plan-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px dashed #D9E8F7;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.plan-detail-btn svg { width: 17px; height: 17px; color: var(--accent-2); }
.plan-detail-btn:hover { border-color: var(--accent); border-style: solid; background: rgba(94, 169, 240, 0.044); }
.plan > .plan-actions, .plan > .plan-cta { margin-top: auto; }          /* 남는 공간은 내용과 구매 버튼 사이로 */

/* 설명 이미지 창 */
.detail-modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(255, 255, 255, 0.802); }
.detail-modal[hidden] { display: none; }
.detail-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(20, 70, 130, 0.22);
  overflow: hidden;
}
.detail-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 56px; border-bottom: 1px solid var(--border); }
.detail-head h3 { margin: 0; font-family: var(--display); font-size: 1.02rem; text-align: center; }
.detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--bg); }
.detail-img { display: block; width: 100%; height: auto; }          /* 여러 장이 틈 없이 이어져 하나의 긴 설명처럼 */
.detail-foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.detail-foot > * { flex: 1; text-align: center; }
.detail-foot form { display: flex; }
.detail-foot form .btn { width: 100%; }
.detail-foot .btn-primary { flex: 1.3; }
.form-help { color: var(--muted); font-size: 0.8rem; line-height: 1.6; }
.form-help b { color: var(--text); }

/* ================= 쿠폰 / 마이페이지 ================= */
.sum-discount dt, .sum-discount dd { color: #0E7A4B; }
.sum-discount-text { color: #0E7A4B; font-weight: 700; }
.order-coupon { color: var(--accent-2); }
.tab-badge-accent { background: var(--accent-2) !important; color: #1A0A12; }

/* 마이페이지 머리 */
.my-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px 26px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(420px circle at 0% 0%, rgba(94, 169, 240, 0.099), transparent 70%), var(--surface); }
.my-profile { display: flex; align-items: center; gap: 16px; min-width: 0; }
.my-avatar { width: 56px; height: 56px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
.my-profile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-name { font-family: var(--display); font-size: 1.25rem; }
.my-name small { margin-left: 2px; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.my-sub { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 28px; margin: 0; }
.my-stats div { display: flex; flex-direction: column; gap: 4px; }
.my-stats dt { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.my-stats dd { margin: 0; font-family: var(--display); font-size: 1.45rem; font-weight: 800; white-space: nowrap; }
.my-stats dd small { margin-left: 2px; color: var(--muted); font-family: var(--sans); font-size: 0.78rem; font-weight: 500; }
.my-stats dd.is-alert { color: #9A5B00; }
.my-stats dd.is-accent { color: var(--accent-2); }

.my-tabs { display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.my-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: #1E3A56; font-family: var(--display); font-size: 0.92rem; font-weight: 700; cursor: pointer; }
.my-tab:hover { border-color: var(--accent); color: var(--text); }
.my-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.js .my-panel:not(.active) { display: none; }
.my-filters { margin-bottom: 14px; }

/* 쿠폰 등록 */
.coupon-register { padding: 18px 20px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.coupon-register-label { display: block; margin-bottom: 10px; font-family: var(--display); font-weight: 700; }
.coupon-register-row { display: flex; gap: 10px; }
.coupon-register-row input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; }
.coupon-register-row input::placeholder { text-transform: none; letter-spacing: 0; }

/* 쿠폰 카드(티켓 모양) */
.coupon-list { display: flex; flex-direction: column; gap: 14px; }
.coupon {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
.coupon::before, .coupon::after { content: ""; position: absolute; right: 188px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); }
.coupon::before { top: -11px; }
.coupon::after { bottom: -11px; }
.coupon-main { flex: 1; display: flex; align-items: center; gap: 22px; padding: 20px 24px; min-width: 0; }
.coupon-benefit { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; flex-shrink: 0; min-width: 104px; max-width: 132px; font-family: var(--display); font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--accent-2); text-align: center; }
.coupon-benefit small { font-size: 1.05rem; margin-left: 2px; }
.coupon-benefit em { flex-basis: 100%; margin-top: 6px; color: var(--muted); font-family: var(--sans); font-size: 0.76rem; font-style: normal; font-weight: 600; letter-spacing: 0.1em; }
.coupon-info { min-width: 0; }
.coupon-info h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.05rem; line-height: 1.4; }
.coupon-info ul { margin: 0; padding: 0; list-style: none; color: #1E3A56; font-size: 0.82rem; line-height: 1.75; }
.coupon-info li { padding-left: 12px; position: relative; }
.coupon-info li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.coupon-side { flex: 0 0 188px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-left: 2px dashed var(--border); text-align: center; }
.coupon-code { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; word-break: break-all; }
.coupon-use { color: var(--accent-2); font-size: 0.86rem; font-weight: 700; }
.coupon-state { color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.coupon.is-off { opacity: 0.55; }
.coupon.is-off .coupon-benefit { color: var(--muted); }
.coupon-mini { display: flex; align-items: center; gap: 10px; }

/* 결제 화면 쿠폰 */
.co-coupon { margin: 16px 0 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.co-coupon-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.9rem; }
.co-coupon-row { display: flex; gap: 8px; margin-top: 8px; }
.co-coupon-row input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 0.88rem; text-transform: uppercase; }
.co-coupon-row input::placeholder { text-transform: none; }
.co-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(61, 220, 132, 0.4); background: rgba(61, 220, 132, 0.08); }
.co-coupon-applied[hidden], #couponInputs[hidden], .sum-discount[hidden] { display: none; }
.co-coupon-applied > div { display: flex; flex-direction: column; min-width: 0; }
.co-coupon-applied strong { font-size: 0.9rem; }
.co-coupon-applied small { color: #0E7A4B; font-size: 0.78rem; }
.co-coupon-remove { background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 0.82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; flex-shrink: 0; }
.co-coupon-msg { min-height: 0; margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; }
.co-coupon-msg:empty { display: none; }
.co-coupon-msg.is-error { color: #B3261E; }
.co-coupon-msg.is-ok { color: #0E7A4B; }

/* 관리자 쿠폰 폼 */
.coupon-form em { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.coupon-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coupon-split > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coupon-form input[type="date"] { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-family: var(--sans); font-size: 0.92rem; color-scheme: light; }
.coupon-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coupon-radio { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: 0.9rem !important; color: var(--text) !important; }
.coupon-radio input { margin-top: 4px; accent-color: var(--accent); }
.coupon-radio span { display: flex; flex-direction: column; gap: 2px; }
.coupon-radio small { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.coupon-radio:has(input:checked) { border-color: var(--accent); background: rgba(94, 169, 240, 0.055); }

@media (max-width: 820px) {
  .my-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 14px 18px; }
}
@media (max-width: 640px) {
  .coupon { flex-direction: column; }
  .coupon::before, .coupon::after { display: none; }
  .coupon-main { padding: 18px 18px 14px; gap: 16px; }
  .coupon-benefit { font-size: 1.8rem; min-width: 74px; }
  .coupon-side { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-left: none; border-top: 2px dashed var(--border); padding: 12px 18px; }
  .coupon-split, .coupon-radios { grid-template-columns: minmax(0, 1fr); }
  .my-head { padding: 20px 18px; }
  .my-tab { padding: 9px 16px; }
}

.nowrap { white-space: nowrap; }
.admin-actions .btn, .admin-actions form { white-space: nowrap; }
.admin-actions { white-space: nowrap; }
.coupon-code.nowrap { word-break: keep-all; }

/* ===== 가격 표시 개선: 기간 칩 / 정가 / 할인 배지 ===== */
.plan-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.plan-price-num { font-weight: 700; letter-spacing: -0.01em; }
/* 기간(월, 3개월 ...): 작은 회색 글자 → 밝고 또렷한 칩 */
.plan-period {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(140, 196, 247, 0.5);
  background: rgba(140, 196, 247, 0.077);
  color: #1B66C4;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.plan-period i { font-style: normal; font-weight: 500; opacity: 0.8; }
.feat-price-main { display: inline-flex; align-items: center; gap: 8px; }
.feat-price-main .plan-period { margin: 0; padding: 3px 10px; font-size: 0.84rem; font-weight: 700; color: #1B66C4; }
/* 정가(취소선): 더 크고 밝게 */
.price-original { color: #1E3A56; font-size: 0.95rem; font-weight: 600; }
.price-original s { text-decoration-thickness: 2px; text-decoration-color: rgba(255, 123, 128, 0.85); }
.discount-pill { font-size: 0.82rem; }
/* 장바구니/결제의 기간 글자도 같은 이유로 조금 밝게 */
.cart-price small, .co-unit small, .co-line-price small { color: #1E3A56; font-weight: 600; }
@media (max-width: 560px) {
  .plan-period { font-size: 0.86rem; }
  .feat-price-main { flex-wrap: wrap; }
}

.feat-price-main small.plan-period { margin-left: 0; color: #1B66C4; font-family: var(--sans); font-weight: 700; font-size: 0.84rem; }
.feat-price-main small.plan-period i { font-weight: 500; }

/* ===== 이용 기간/수량 입력 (관리자) ===== */
.period-row { display: grid; grid-template-columns: 120px 140px minmax(0, 1fr); gap: 10px; align-items: center; }
.period-row input[type="text"] { min-width: 0; }
.period-row select { max-width: none; width: 100%; }
.period-row input[hidden] { display: none; }
.period-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.period-quick button { min-width: 38px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: #1E3A56; font-family: var(--sans); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.period-quick button:hover { border-color: var(--accent); color: var(--text); }
.period-quick button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.period-preview { display: inline-block; padding: 2px 11px; border-radius: 999px; border: 1px dashed var(--border); color: var(--muted); font-weight: 700; }
.period-preview.on { border: 1px solid rgba(140, 196, 247, 0.5); background: rgba(140, 196, 247, 0.077); color: #1B66C4; }
@media (max-width: 560px) { .period-row { grid-template-columns: 100px minmax(0, 1fr); } .period-row input[type="text"]:last-child { grid-column: 1 / -1; } }

/* ===== 디스코드 스타일 글 (이용약관 / 이벤트 / 자주묻는질문) ===== */
.dc { color: inherit; font-size: inherit; line-height: inherit; word-break: keep-all; overflow-wrap: anywhere; }
.faq-item .dc { color: #0F2A43; font-size: 0.97rem; line-height: 1.85; margin: 0 0 20px; }
.event-detail-desc.dc { color: var(--text); font-size: 0.96rem; line-height: 1.8; }
/* 변환된 글 안의 줄(p)은 원래 p 규칙(큰 아래 여백, 줄바꿈 유지)을 따르지 않고 한 줄씩 */
.dc p, .faq-item .dc p, .event-detail-desc.dc p { margin: 0; white-space: normal; font-size: inherit; line-height: inherit; color: inherit; }
.dc .dc-gap { height: 0.8em; }
.dc strong { color: #0F2A43; font-weight: 800; }
.dc em { font-style: italic; }
.dc u { text-underline-offset: 3px; }
.dc s { opacity: 0.75; }
/* `네모칸`: 디스코드의 인라인 코드처럼 */
.dc-code, .term-points .dc-code {
  display: inline;
  padding: 1px 7px;
  margin: 0 1px;
  border-radius: 6px;
  background: #F4F9FF;
  border: 1px solid #D9E8F7;
  color: #1B66C4;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "D2Coding", monospace;
  font-size: 0.88em;
  line-height: 1.5;
  white-space: break-spaces;
  word-break: break-all;
}
/* ```여러 줄 코드``` */
.dc-codeblock {
  margin: 10px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: #F4F9FF;
  border: 1px solid #D9E8F7;
  color: #1B66C4;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "D2Coding", monospace;
  font-size: 0.88rem;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
}
.dc-codeblock code { background: none; border: none; padding: 0; color: inherit; font: inherit; white-space: pre; }
/* > 인용 */
.dc-quote { margin: 8px 0; padding: 6px 0 6px 14px; border-left: 4px solid #D9E8F7; color: #1E3A56; line-height: 1.7; }
/* - 목록 */
.dc-list { margin: 6px 0; padding-left: 22px; }
.dc-list li { margin: 2px 0; padding: 0; }
.dc-list li::marker { color: var(--accent-2); }
/* # 제목 */
.dc .dc-h { color: #0F2A43; font-family: var(--display); font-weight: 800; line-height: 1.4; margin: 12px 0 4px; }
.dc .dc-h1 { font-size: 1.35rem; }
.dc .dc-h2 { font-size: 1.15rem; }
.dc .dc-h3 { font-size: 1.02rem; }
.dc-link { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
/* ||스포일러||: 클릭하면 보임 */
.dc-spoiler { padding: 0 4px; border-radius: 4px; background: #F1F7FE; color: transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; user-select: none; }
.dc-spoiler:hover { background: #F1F7FE; }
.dc-spoiler.shown { background: rgba(140, 196, 247, 0.088); color: inherit; cursor: text; user-select: text; }
/* 이용약관 항목 안의 꾸미기 */
.term-points li strong { color: #0F2A43; font-weight: 800; }

.dc p.dc-h { margin: 14px 0 4px; font-weight: 800; color: #0F2A43; line-height: 1.4; }
.dc p.dc-h1 { font-size: 1.45rem; }
.dc p.dc-h2 { font-size: 1.2rem; }
.dc p.dc-h3 { font-size: 1.05rem; }
.dc > p.dc-h:first-child { margin-top: 0; }

/* 관리자: 글 꾸미기 안내 */
.dc-help { margin: 8px 0 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.dc-help summary { padding: 9px 14px; cursor: pointer; color: var(--accent-2); font-size: 0.86rem; font-weight: 700; list-style: none; }
.dc-help summary::-webkit-details-marker { display: none; }
.dc-help[open] summary { border-bottom: 1px solid var(--border); }
.dc-help-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.dc-help-table td { padding: 7px 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: #1E3A56; }
.dc-help-table td:first-child { width: 46%; white-space: normal; word-break: keep-all; }
.dc-help-table tr:last-child td { border-bottom: none; }
.dc-help-table code { padding: 1px 6px; border-radius: 5px; background: #F4F9FF; border: 1px solid #D9E8F7; color: #1B66C4; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }
.dc-help-table code.dc-code { padding: 1px 7px; }
.dc-help-note { margin: 0; padding: 8px 14px 10px; color: var(--muted); font-size: 0.8rem; line-height: 1.6; border-top: 1px solid var(--border); }

/* ===== 홈 인기 상품 줄: 가격 배치 =====
   카드가 넓으면(620px 이상) 예전처럼 한 줄(낮은 행), 좁으면 가격을 두 줄로 쌓고(이름 옆), 더 좁으면 이름 아래로 */
.feat-list { container-type: inline-size; container-name: feat; }
/* 기본값(컨테이너 쿼리를 모르는 오래된 브라우저용): 예전처럼 좁으면 아래 줄로 내려가게 해서 최소한 깨지지 않음 */
.feat-row { flex-wrap: wrap; }
.feat-info { flex: 1 1 240px; }
.feat-price { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; margin-left: auto; text-align: right; }
/* 컨테이너 쿼리를 아는 브라우저(대부분)는 카드 폭에 맞춰 정밀하게 배치 */
/* 구형 브라우저용 보험(화면 폭 기준): 컨테이너 쿼리를 '모르는' 브라우저에서만 적용됨 (@supports not).
   좁은 화면에서는 가격을 두 줄로 쌓아 이름 아래 오른쪽에 둠 */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .feat-info { flex: 1 1 100%; }
    .feat-price { flex: 1 1 100%; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: 0; padding-left: 54px; }
    .feat-price-top { justify-content: flex-end; }
  }
}
@supports (container-type: inline-size) {
  .feat-row { flex-wrap: nowrap; }
  .feat-info { flex: 1 1 0; }
  .feat-price { flex-wrap: nowrap; gap: 0; }
}
.feat-price-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; line-height: 1; }
.feat-price-top .price-original { font-size: 0.86rem; white-space: nowrap; }
.feat-price-top .discount-pill { font-size: 0.72rem; padding: 3px 9px; }
.feat-price-main { font-size: 1.25rem; line-height: 1.1; }

/* 넓을 때: 한 줄 (배지 · 정가 · 가격 · 기간) */
@container feat (min-width: 620px) {
  .feat-price { flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; }
}
/* 중간: 두 줄 쌓기 (위: 배지+정가 / 아래: 가격+기간) */
@container feat (max-width: 619px) {
  .feat-price { flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; }
}
/* 아주 좁음(약 440px 미만, 모바일 등): 이름 아래로 내려가되 두 줄 쌓기 유지 */
@container feat (max-width: 439px) {
  .feat-row { flex-wrap: wrap; }
  .feat-info { flex: 1 1 100%; }
  .feat-price { flex: 1 1 100%; align-items: flex-end; margin-left: 0; padding-left: 54px; }
  .feat-price-top, .feat-price-main { justify-content: flex-end; }
}

/* 홈 인기 상품 이름: 긴 이름이 가격 때문에 눌려도 단어 중간에서 끊기지 않고 띄어쓰기에서만 줄바꿈 */
.feat-name-text { word-break: keep-all; overflow-wrap: break-word; }

/* ===== 상품 카드: 한 줄 설명 가독성 + 빈 공간 제거 ===== */
/* 설명 글씨: 어두운 회색 → 밝게. 크기는 그대로(키우면 한 줄이던 설명이 두 줄로 접혀 오히려 높아짐).
   제목은 흰색이라 한 단계 아래 위계는 유지 */
.plan-desc { color: #1E3A56; font-size: 0.88rem; line-height: 1.55; font-weight: 500; }

/* 같은 줄 카드끼리 위쪽 4구간(이름/설명/정가줄/가격)만 같은 높이로 맞춤 → 설명이 한 줄이면 빈 공간이 없고,
   한 카드만 길면 그 줄만 길어지며 가격이 모두 나란히 맞음.
   가격 아래(판매량·정보 박스, 특징/설명 버튼, 구매 버튼)는 칸을 맞추지 않고 위에서부터 바로 이어짐 → 옆 카드에 정보 박스가 있어도 빈 공간이 안 생김.
   (subgrid 를 모르는 오래된 브라우저는 아래 규칙이 적용되지 않고 예전 방식 그대로 동작) */
@supports (grid-template-rows: subgrid) {
  .plans { align-items: stretch; }
  .plan {
    display: grid;
    grid-row: span 5;                      /* 이름·설명·정가줄·가격 4칸 + 아래 묶음 1칸 */
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .plan > .plan-name    { grid-row: 1; }
  .plan > .plan-desc    { grid-row: 2; min-height: 0; margin: 0 0 14px; }
  .plan > .plan-compare { grid-row: 3; min-height: 0; margin: 0 0 4px; }
  .plan > .plan-price   { grid-row: 4; margin: 0 0 16px; align-self: start; }
  .plan > .plan-body    { grid-row: 5; display: flex; flex-direction: column; min-height: 0; }
  .plan > .plan-body > .plan-features,
  .plan > .plan-body > .plan-detail-btn { flex-grow: 0; }
  .plan > .plan-body > .plan-features { flex-grow: 1; }                /* 특징 목록이 남는 공간을 채워서 구매 버튼이 맨 아래에 */
  .plan > .plan-body > .plan-actions,
  .plan > .plan-body > .plan-cta { margin-top: auto; }                /* 구매 버튼은 항상 카드 맨 아래 */
  .plan > .plan-body > .plan-detail-btn { margin-bottom: 20px; }
}

/* ===== 마이페이지 (새 디자인) ===== */
.mp .section-title { margin-bottom: 18px; }
.js .my-panel:not(.active) { display: none; }

/* 프로필 */
.mp-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: radial-gradient(520px circle at 0% 0%, rgba(94, 169, 240, 0.143), transparent 70%), radial-gradient(420px circle at 100% 100%, rgba(90, 170, 235, 0.066), transparent 70%), var(--surface);
}
.mp-avatar {
  flex-shrink: 0;
  width: 68px; height: 68px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2A84E0);
  color: #fff;
  font-family: var(--display); font-size: 1.8rem; font-weight: 800;
  box-shadow: 0 0 0 4px rgba(94, 169, 240, 0.176), 0 10px 26px rgba(94, 169, 240, 0.28);
}
.mp-who { flex: 1; min-width: 0; }
.mp-name { margin: 0 0 8px; font-family: var(--display); font-size: 1.45rem; line-height: 1.3; word-break: break-all; }
.mp-nim { margin-left: 2px; font-size: 1.05rem; font-weight: 600; color: #0F2A43; }
.mp-name small { margin-left: 10px; color: #1E3A56; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; }
.mp-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.mp-meta li { display: inline-flex; align-items: center; gap: 7px; color: #1E3A56; font-size: 0.92rem; }
.mp-meta svg { width: 15px; height: 15px; color: var(--accent-2); flex-shrink: 0; }
.mp-meta-k { color: #1E3A56; }
.mp-meta b { color: #0F2A43; font-weight: 700; word-break: break-all; }
.mp-shop-btn { flex-shrink: 0; white-space: nowrap; }

/* 숫자 타일 */
.mp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.mp-stat {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 18px 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
button.mp-stat { cursor: pointer; }
button.mp-stat:hover { border-color: rgba(140, 196, 247, 0.55); transform: translateY(-2px); background: #F4F9FF; }
.mp-stat-ico { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: 10px; background: rgba(140, 196, 247, 0.077); color: var(--accent-2); }
.mp-stat-ico svg { width: 18px; height: 18px; }
.mp-stat-k { color: #1E3A56; font-size: 0.9rem; font-weight: 600; }
.mp-stat-v { font-family: var(--display); font-size: 1.85rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.mp-stat-v small { margin-left: 3px; color: #1E3A56; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; }
.mp-stat.is-alert { border-color: rgba(255, 183, 77, 0.55); background: linear-gradient(180deg, rgba(255, 183, 77, 0.1), transparent), var(--surface); }
.mp-stat.is-alert .mp-stat-ico { background: rgba(255, 183, 77, 0.18); color: #9A5B00; }
.mp-stat.is-alert .mp-stat-v { color: #9A5B00; }
.mp-stat.is-accent .mp-stat-v { color: var(--accent-2); }
.mp-stat-total { background: linear-gradient(135deg, rgba(94, 169, 240, 0.121), rgba(90, 170, 235, 0.066)), var(--surface); border-color: rgba(140, 196, 247, 0.35); }

/* 탭 */
.mp-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.mp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: none; border-radius: 999px; background: transparent; color: #1E3A56; font-family: var(--display); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.mp-tab:hover { color: #0F2A43; }
.mp-tab.active { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(94, 169, 240, 0.32); }
.mp-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(30, 90, 160, 0.087); color: #0F2A43; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; text-align: center; }
.mp-count.is-on { background: #2A84E0; color: #1A0A12; }

/* 필터 */
.mp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mp-filter { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: #1E3A56; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.mp-filter b { color: #0F2A43; font-weight: 800; }
.mp-filter:hover { border-color: var(--accent); }
.mp-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mp-filter.is-zero:not(.active) { opacity: 0.55; }
.mp-filter.is-zero:not(.active) b { color: #1E3A56; font-weight: 600; }

/* 주문 카드 */
.mp-orders { display: flex; flex-direction: column; gap: 10px; }
.mp-order {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.mp-order::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border); }
.mp-order.st-pending::before { background: #FFB74D; }
.mp-order.st-paid::before { background: #5B9BFF; }
.mp-order.st-done::before { background: #3DDC84; }
.mp-order.st-canceled::before { background: #7A7F8C; }
.mp-order:hover { border-color: rgba(140, 196, 247, 0.55); background: #F4F9FF; transform: translateY(-1px); }
.mp-order.st-pending { border-color: rgba(255, 183, 77, 0.45); background: linear-gradient(90deg, rgba(255, 183, 77, 0.09), transparent 55%), var(--surface); }
.mp-order.st-canceled { opacity: 0.78; }
.mp-thumbs { display: inline-flex; flex-shrink: 0; }
.mp-thumb { position: relative; width: 46px; height: 46px; margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; border: 2px solid var(--surface); background: #F4F9FF; color: var(--accent-2); font-family: var(--display); font-weight: 800; overflow: hidden; }
.mp-thumb:first-child { margin-left: 0; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mp-order-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mp-order-title { font-family: var(--display); font-size: 1.05rem; line-height: 1.4; word-break: keep-all; }
.mp-order-title em { color: #1E3A56; font-family: var(--sans); font-style: normal; font-size: 0.92rem; font-weight: 600; }
.mp-order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; color: #1E3A56; font-size: 0.86rem; }
.mp-order-meta i { width: 3px; height: 3px; border-radius: 50%; background: #7A7F8C; }
.mp-coupon-tag { color: var(--accent-2); font-weight: 700; }
.mp-deadline { color: #9A5B00; font-size: 0.86rem; font-weight: 700; }
.mp-order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.mp-order-price { font-family: var(--display); font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.mp-chev { width: 18px; height: 18px; flex-shrink: 0; color: #51657C; }
.mp-order:hover .mp-chev { color: #0F2A43; }
.mp-nothing { margin: 18px 0; text-align: center; color: #1E3A56; font-size: 0.95rem; }

/* 빈 화면 */
.mp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 20px; text-align: center; border: 1px dashed #D9E8F7; border-radius: 18px; background: var(--surface); }
.mp-empty-ico { font-size: 2.4rem; }
.mp-empty p { margin: 0; color: #1E3A56; line-height: 1.7; }

/* 쿠폰 탭 */
.mp-register { padding: 18px 20px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.mp-register-label { display: block; margin-bottom: 10px; color: #0F2A43; font-family: var(--display); font-weight: 700; }
.mp-register-row { display: flex; gap: 10px; }
.mp-register-row input { flex: 1; min-width: 0; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mp-register-row input::placeholder { color: #51657C; text-transform: none; letter-spacing: 0; }
.coupon-info ul { color: #1E3A56; font-size: 0.9rem; }
.coupon-benefit em { color: #1E3A56; font-size: 0.8rem; }
.coupon-state { color: #1E3A56; font-size: 0.9rem; }
.coupon.is-off { opacity: 0.7; }

@media (max-width: 820px) {
  .mp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mp-profile { flex-wrap: wrap; padding: 20px 18px; gap: 14px 16px; }
  .mp-avatar { width: 56px; height: 56px; font-size: 1.5rem; }
  .mp-shop-btn { width: 100%; text-align: center; }
  .mp-name { font-size: 1.25rem; }
  .mp-name small { display: block; margin: 4px 0 0; }
  .mp-stat { padding: 14px 14px 13px; }
  .mp-stat-v { font-size: 1.6rem; }
  .mp-tabs { display: flex; }
  .mp-tab { flex: 1; justify-content: center; padding: 10px 12px; }
  .mp-order { flex-wrap: wrap; padding: 14px 14px 14px 18px; gap: 10px 12px; }
  .mp-order-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 0; }
  .mp-chev { display: none; }
  .mp-thumb { width: 38px; height: 38px; margin-left: 5px; }
  .mp-thumb:nth-child(n+2) { display: none; }          /* 모바일은 이름 자리를 위해 아이콘 1개만 */
  .mp-order-main { flex: 1 1 0; min-width: 0; }
}

/* ===== PC 사이드바 (새 디자인) =====
   821px 이상(PC)에서만 적용. 모바일 서랍(820px 이하)은 기존 모양 그대로.
   상자 겹침을 없애고: 그룹 이름 + 얇은 구분선 + 테두리 없는 메뉴, 선택된 메뉴는 왼쪽 보라 막대 */
.side-title { display: none; }
@media (min-width: 821px) {
  .sidebar { padding: 14px 14px 20px; }
  .side-card {
    position: relative;
    gap: 2px;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }
  .side-card:last-of-type { border-bottom: none; margin-bottom: 0; }
  .side-title {
    display: block;
    padding: 0 12px 5px;
    color: #51657C;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
  }
  .side-link {
    position: relative;
    gap: 12px;
    padding: 6px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E3A56;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .side-link:hover { background: rgba(30, 90, 160, 0.043); color: #0F2A43; transform: translateX(2px); }
  .side-link.active {
    background: linear-gradient(90deg, rgba(94, 169, 240, 0.132), rgba(94, 169, 240, 0.022));
    color: #0F2A43;
    transform: none;
  }
  .side-link.active::before {
    content: "";
    position: absolute;
    left: -10px; top: 8px; bottom: 8px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    box-shadow: 0 0 12px rgba(94, 169, 240, 0.56);
  }
  .side-ico {
    width: 32px; height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(30, 90, 160, 0.038);
    color: #1E3A56;
  }
  .side-ico svg { width: 18px; height: 18px; }
  .side-link:hover .side-ico { background: rgba(94, 169, 240, 0.11); color: var(--accent-2); border: none; }
  .side-link.active .side-ico { background: var(--accent); border: none; color: #fff; box-shadow: 0 6px 16px rgba(94, 169, 240, 0.36); }
  .side-badge { padding: 2px 9px; font-size: 0.76rem; }
}

/* ===== 페이지 머리말 (스토어, 구매등급, 이벤트 ... 모든 페이지 맨 위 공통) ===== */
.page-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 34px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
/* 뒤쪽의 은은한 보랏빛 번짐 */
.page-head::before {
  content: "";
  position: absolute;
  left: -70px; top: -60px;
  width: min(420px, calc(100% + 40px)); height: 230px;          /* 좁은 화면에서 오른쪽으로 삐져나가 가로 스크롤이 생기지 않게 머리말 폭 안으로 제한 */
  background: radial-gradient(closest-side, rgba(94, 169, 240, 0.11), transparent);
  pointer-events: none;
  z-index: -1;
}
/* 아래 구분선 가운데 짧은 보라 강조선 */
.page-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 92px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #2A84E0);
}
.page-head-ico {
  flex-shrink: 0;
  width: 62px; height: 62px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), #2A84E0);
  color: #fff;
  box-shadow: 0 12px 30px rgba(94, 169, 240, 0.32), inset 0 1px 0 rgba(30, 90, 160, 0.224);
}
.page-head-ico svg { width: 28px; height: 28px; }
.page-head-text { min-width: 0; }
.page-head-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--accent-2);
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.page-head-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent-2); }
.page-head-title {
  margin: 0;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 35%, #D3C8FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0F2A43;
}
.page-head-sub { max-width: 62ch; margin: 10px 0 0; color: #1E3A56; font-size: 1rem; line-height: 1.65; word-break: keep-all; }

@media (max-width: 640px) {
  .page-head { gap: 14px; margin-bottom: 24px; padding-bottom: 20px; }
  .page-head-ico { width: 48px; height: 48px; border-radius: 15px; }
  .page-head-ico svg { width: 22px; height: 22px; }
  .page-head-title { font-size: 1.6rem; }
  .page-head-kicker { font-size: 0.7rem; letter-spacing: 0.18em; margin-bottom: 4px; }
  .page-head-sub { font-size: 0.92rem; margin-top: 8px; }
}

/* ===== 구매등급 카드 ===== */
/* 각 카드는 자기 등급 색(--gc) 하나로 빛/배지/금액/체크 색이 모두 정해져요 */
.grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.grade {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid color-mix(in srgb, var(--gc) 22%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(260px 150px at 20% 0%, color-mix(in srgb, var(--gc) 17%, transparent), transparent 70%),
    var(--surface);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* 카드 맨 위의 얇은 색 띠 */
.grade::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gc), color-mix(in srgb, var(--gc) 25%, transparent)); }
.grade:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gc) 55%, var(--border)); box-shadow: 0 14px 36px color-mix(in srgb, var(--gc) 16%, transparent); }
.grade-top { border-color: color-mix(in srgb, var(--gc) 60%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 28%, transparent), 0 16px 44px color-mix(in srgb, var(--gc) 18%, transparent); }
.grade-badge { position: absolute; right: 16px; top: 16px; padding: 4px 11px; border-radius: 999px; background: var(--gc); color: #1A0A12; font-size: 0.72rem; font-weight: 800; }

.grade-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.grade-emblem {
  flex-shrink: 0;
  width: 58px; height: 58px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--gc) 16%, #F4F9FF);
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--gc) 26%, transparent), inset 0 1px 0 rgba(30, 90, 160, 0.096);
}
.grade-emblem img { width: 34px; height: 34px; object-fit: contain; }
.grade-emblem b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--gc); }
.grade-title { min-width: 0; }
.grade-tier { display: block; margin-bottom: 2px; color: var(--gc); font-family: var(--display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; }
.grade-title h3 { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }

/* 달성 조건 */
.grade-cond { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 86px; margin-bottom: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(30, 90, 160, 0.029); border: 1px solid rgba(30, 90, 160, 0.112); }
.grade-cond-label { color: #1E3A56; font-size: 0.8rem; font-weight: 600; }
.grade-amount { font-family: var(--display); font-size: 1.55rem; font-weight: 800; line-height: 1.2; color: var(--gc); white-space: nowrap; }
.grade-amount small { margin-left: 2px; color: #0F2A43; font-family: var(--sans); font-size: 0.86rem; font-weight: 600; }
.grade-cond-text { color: #0F2A43; font-size: 0.96rem; font-weight: 600; line-height: 1.5; word-break: keep-all; }

/* 혜택 목록: 구분선 줄 → 체크 아이콘 목록 */
.grade-benefits-title { margin: 0 0 10px; color: #1E3A56; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; }
.grade-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grade-benefits li { display: flex; align-items: flex-start; gap: 11px; color: #0F2A43; font-size: 0.93rem; line-height: 1.5; }
.grade-check { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--gc) 18%, transparent); color: var(--gc); }
.grade-check svg { width: 13px; height: 13px; }
.grade-benefit-text { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
/* 쿠폰·할인 같은 핵심 혜택은 칩으로 강조 */
.grade-benefits li.is-perk { padding: 9px 12px; margin: 2px -4px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 38%, transparent); color: #0F2A43; font-weight: 700; }
.grade-benefits li.is-perk .grade-check { background: var(--gc); color: #14101A; }

@media (max-width: 1060px) { .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .grade-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .grade { padding: 22px 18px 20px; }
  .grade-emblem { width: 52px; height: 52px; border-radius: 16px; }
  .grade-title h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .grade { transition: none; } .grade:hover { transform: none; } }

/* ===== 마이페이지: 내 구매 등급 ===== */
.my-grade {
  position: relative;
  margin: 0 0 18px;
  padding: 22px 26px 18px;
  border: 1px solid color-mix(in srgb, var(--gc) 38%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(420px 170px at 0% 0%, color-mix(in srgb, var(--gc) 20%, transparent), transparent 72%),
    var(--surface);
  overflow: hidden;
}
.my-grade::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gc), color-mix(in srgb, var(--gc) 20%, transparent)); }
.my-grade-main { display: flex; align-items: center; gap: 18px; }
.my-grade-main .grade-emblem { width: 64px; height: 64px; border-radius: 20px; }
.my-grade-main .grade-emblem img { width: 38px; height: 38px; }
.my-grade-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.my-grade-kicker { color: var(--gc); font-family: var(--display); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; }
.my-grade-tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); color: #0F2A43; font-style: normal; font-size: 0.7rem; letter-spacing: 0; }
.my-grade-name { font-family: var(--display); font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
.my-grade-note { color: #1E3A56; font-size: 0.92rem; line-height: 1.5; }
.my-grade-note b { color: #0F2A43; }
.my-grade-link { flex-shrink: 0; align-self: flex-start; color: var(--gc); font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
.my-grade-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.my-grade-bar { height: 10px; margin: 18px 0 8px; border-radius: 999px; background: rgba(30, 90, 160, 0.054); overflow: hidden; }
.my-grade-bar span { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 60%, #fff 0%), var(--gc)); box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 60%, transparent); }
.my-grade-scale { display: flex; justify-content: space-between; gap: 10px; color: #1E3A56; font-size: 0.8rem; font-weight: 600; }
.my-grade-scale span:nth-child(2) { color: #0F2A43; }
.my-grade-benefits { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.my-grade-benefits li { padding: 6px 12px; border-radius: 999px; background: rgba(30, 90, 160, 0.038); border: 1px solid rgba(30, 90, 160, 0.16); color: #0F2A43; font-size: 0.83rem; font-weight: 500; }
.my-grade-benefits li.is-perk { background: color-mix(in srgb, var(--gc) 14%, transparent); border-color: color-mix(in srgb, var(--gc) 42%, transparent); color: #0F2A43; font-weight: 700; }
.my-grade-foot { margin: 14px 0 0; color: #1E3A56; font-size: 0.78rem; line-height: 1.6; }
@media (max-width: 640px) {
  .my-grade { padding: 18px 16px 14px; }
  .my-grade-main { flex-wrap: wrap; gap: 14px; }
  .my-grade-main .grade-emblem { width: 54px; height: 54px; border-radius: 17px; }
  .my-grade-name { font-size: 1.45rem; }
  .my-grade-link { width: 100%; align-self: auto; }
  .my-grade-scale { font-size: 0.74rem; }
}

/* 관리자 회원 표: 등급 지정 */
.mg-form { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mg-select { max-width: 190px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 0.8rem; }

/* ===== 관리자: 카테고리 순서/이름 관리, 제품 목록의 카테고리 묶음 ===== */
.cat-manage { display: flex; flex-direction: column; gap: 8px; }
.cat-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cat-move { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.cat-move form { margin: 0; }
.cat-arrow { width: 28px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 800; line-height: 1; cursor: pointer; }
.cat-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-2); }
.cat-arrow:disabled { opacity: 0.28; cursor: default; }
.cat-no { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(140, 196, 247, 0.077); color: var(--accent-2); font-family: var(--display); font-size: 0.8rem; font-weight: 800; }
.cat-rename { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; }
.cat-rename input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 0.92rem; font-weight: 600; }
.cat-count { flex-shrink: 0; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.cat-warn { margin: 6px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.35); color: #9A5B00; font-size: 0.86rem; line-height: 1.6; }
.admin-table .prod-group-row td { padding: 12px 14px; background: rgba(94, 169, 240, 0.055); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prod-group-name { margin-right: 10px; color: var(--accent-2); font-family: var(--display); font-size: 0.95rem; font-weight: 800; }
.admin-table .prod-empty-row td { padding: 12px 14px; font-size: 0.84rem; }
@media (max-width: 640px) {
  .cat-row { flex-wrap: wrap; gap: 8px 10px; }
  .cat-rename { flex-basis: 100%; order: 5; }
}

/* 카테고리 추가 입력칸: 다른 입력칸처럼 어둡게 (기본 흰 배경이 튀어 보임) */
.admin-block .admin-inline-form input[type="text"] { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 0.92rem; }
.admin-block .admin-inline-form input[type="text"]::placeholder { color: var(--muted); }

/* 관리자 제품 표: 좁은 화면에서는 표 안에서만 옆으로 스크롤 */
.admin-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== 관리자: 회원 누적 구매 금액 조정 ===== */
.adj-plus { color: #0E7A4B; }
.adj-minus { color: #B3261E; }
.adj-member { display: flex; align-items: center; gap: 14px; margin: 0; }
.adj-member > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adj-avatar { width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--display); font-size: 1.2rem; font-weight: 800; }
.adj-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adj-kind-opt { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; color: var(--text) !important; font-size: 0.92rem !important; }
.adj-kind-opt input { accent-color: var(--accent); flex-shrink: 0; }
.adj-kind-opt span { display: flex; flex-direction: column; gap: 2px; }
.adj-kind-opt b { font-size: 1rem; }
.adj-kind-opt small { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.adj-kind-opt.adj-add:has(input:checked) { border-color: #3DDC84; background: rgba(61, 220, 132, 0.1); }
.adj-kind-opt.adj-sub:has(input:checked) { border-color: #FF5C6C; background: rgba(255, 92, 108, 0.1); }
.adj-preview { display: none; flex-direction: column; gap: 4px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border); font-size: 0.9rem; line-height: 1.6; }
.adj-preview.on { display: flex; }
.adj-preview.moved { border-style: solid; border-color: var(--accent-2); background: rgba(140, 196, 247, 0.044); }
.adj-preview b { color: #0F2A43; }
.adj-grade-new { color: var(--accent-2); }
.adj-warn { color: #9A5B00; font-size: 0.84rem; }
.mg-info { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mg-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
@media (max-width: 560px) { .adj-kind { grid-template-columns: minmax(0, 1fr); } }


/* ===== 사이트 배경 장식 (site-backdrop) =====
   검은 빈 곳에 은은한 색 번짐(오로라) + 점 격자 무늬를 깔아요. 내용 뒤에만 깔리고 클릭/글자에는 영향이 없어요.
   세기를 바꾸고 싶으면 아래 :root 의 값만 고치세요. (0 = 없음 / 숫자가 클수록 진하게)
     --bd-glow  : 색 번짐 세기   (기본 1.2)
     --bd-grid  : 점 격자 세기   (기본 1)               */
:root { --bd-glow: 1.2; --bd-grid: 1; }

/* 색 번짐: 화면에 고정된 큰 층 (스크롤해도 따라와서, 어디를 보든 바탕이 비어 보이지 않아요) */
body::before {
  content: "";
  position: fixed;
  inset: -12vmax;                          /* 화면보다 크게 깔아서 흔들려도 가장자리가 안 보임 */
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(52vmax 44vmax at 20% 12%, rgba(140, 196, 247, calc(0.19 * var(--bd-glow))), transparent 70%),
    radial-gradient(46vmax 40vmax at 90% 10%, rgba(90, 170, 235, calc(0.12 * var(--bd-glow))), transparent 70%),
    radial-gradient(50vmax 44vmax at 88% 92%, rgba(140, 196, 247, calc(0.14 * var(--bd-glow))), transparent 70%),
    radial-gradient(44vmax 38vmax at 8% 92%, rgba(90, 170, 235, calc(0.1 * var(--bd-glow))), transparent 72%),
    radial-gradient(60vmax 30vmax at 52% 52%, rgba(140, 196, 247, calc(0.06 * var(--bd-glow))), transparent 72%);
  will-change: transform;
}
/* 점 격자: 가운데로 갈수록 옅어지는 아주 가는 점 무늬 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(140, 196, 247, calc(0.09 * var(--bd-grid))) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 18%, #000 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 18%, #000 100%);
}

/* 아주 천천히 흐르는 움직임: 넓은 PC 화면에서만 (모바일은 배터리를 아끼려고 멈춰 있어요) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body::before { animation: backdropDrift 48s ease-in-out infinite alternate; }
}
@keyframes backdropDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.2vmax, -1.6vmax, 0) scale(1.04); }
  100% { transform: translate3d(-1.8vmax, 1.4vmax, 0) scale(1.02); }
}
/* 인쇄할 때는 배경 장식을 빼요 */
@media print { body::before, body::after { display: none; } }


/* ===== 마이페이지 정돈: 프로필 + 숫자 요약을 하나의 카드로, 등급 카드는 간단하게 ===== */
.mp-hero {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(520px circle at 0% 0%, rgba(94, 169, 240, 0.11), transparent 70%),
    radial-gradient(420px circle at 100% 100%, rgba(90, 170, 235, 0.055), transparent 70%),
    var(--surface);
  overflow: hidden;
}
/* 위: 프로필 (예전의 따로 떨어진 카드 모양은 없애고 hero 안으로) */
.mp-hero .mp-profile { margin: 0; padding: 24px 28px 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mp-hero .mp-shop-btn { padding: 9px 18px; font-size: 0.9rem; }
/* 아래: 숫자 4칸을 상자 없이 한 줄 + 구분선 */
.mp-hero .mp-stats { margin: 0; gap: 0; border-top: 1px solid var(--border); background: rgba(30, 90, 160, 0.021); }
.mp-hero .mp-stat { padding: 16px 24px 15px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; gap: 3px; }
.mp-hero .mp-stat + .mp-stat { border-left: 1px solid var(--border); }
.mp-hero .mp-stat-k { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.mp-hero .mp-stat-v { font-size: 1.5rem; }
.mp-hero .mp-stat-v small { margin-left: 3px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.mp-hero button.mp-stat { cursor: pointer; transition: background 0.15s ease; }
.mp-hero button.mp-stat:hover { background: rgba(140, 196, 247, 0.044); }
/* 강조는 숫자 색으로만 (상자 색칠 대신): 입금 대기가 있으면 주황, 쓸 수 있는 쿠폰이 있으면 분홍 */
.mp-hero .mp-stat.is-alert .mp-stat-v { color: #9A5B00; }
.mp-hero .mp-stat.is-accent .mp-stat-v { color: var(--accent-2); }
.mp-hero .mp-stat-total { background: none; }

/* 등급 카드: 안내를 줄이되, 답답하지 않게 여백은 충분히 */
.my-grade { padding: 22px 26px 16px; margin-bottom: 18px; }
.my-grade-main { gap: 16px; }
.my-grade-text { gap: 5px; }
.my-grade-bar { margin: 18px 0 8px; height: 8px; }
.my-grade-scale { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.my-grade-foot { margin: 10px 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 820px) {
  .mp-hero .mp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-hero .mp-stat:nth-child(3) { border-left: 0; }
  .mp-hero .mp-stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .mp-hero .mp-profile { padding: 18px 18px 16px; }
  .mp-hero .mp-stat { padding: 13px 16px 12px; }
  .mp-hero .mp-stat-v { font-size: 1.35rem; }
  .my-grade { padding: 18px 16px 14px; }
}


/* ===== 지급 · 보증 (A/S) ===== */
/* 보증 상태 칩 */
.w-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.w-active { background: rgba(61, 220, 132, 0.12); color: #0E7A4B; border-color: rgba(61, 220, 132, 0.4); }
.w-soon { background: rgba(255, 183, 77, 0.12); color: #9A5B00; border-color: rgba(255, 183, 77, 0.45); }
.w-expired { background: rgba(30, 90, 160, 0.038); color: #51657C; border-color: rgba(30, 90, 160, 0.224); }
.w-none { background: rgba(30, 90, 160, 0.032); color: #51657C; border-color: rgba(30, 90, 160, 0.16); font-weight: 600; }

/* 고객 화면: 지급 카드 */
.dl-intro { margin: 0 0 12px; color: var(--muted); font-size: 0.88rem; }
.dl-intro b { color: #0F2A43; }
.dl-list { display: flex; flex-direction: column; gap: 12px; }
.dl-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.dl-card.dl-soon { border-color: rgba(255, 183, 77, 0.4); }
.dl-card.dl-expired { opacity: 0.82; }
.dl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dl-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.dl-meta { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.dl-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 0.9rem; }
.dl-meta dt { margin: 0; color: var(--muted); flex-shrink: 0; }
.dl-meta dd { margin: 0; text-align: right; color: #0F2A43; min-width: 0; overflow-wrap: anywhere; }
.dl-no { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; margin-right: 8px; }
.dl-card-link { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.dl-link-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.dl-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-link-text { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: #0F2A43; font-size: 0.88rem; line-height: 1.5; word-break: break-all; white-space: pre-wrap; }
.dl-open { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); color: var(--accent-2); font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.dl-open:hover { border-color: var(--accent); }

/* 관리자: 목록 */
.rec-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 18px 0 14px; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-table td { vertical-align: top; }
.rec-no { font-family: var(--display); font-weight: 700; font-size: 0.86rem; padding: 2px 8px; border-radius: 6px; background: rgba(140, 196, 247, 0.077); color: var(--accent-2); }
.rec-no-chat { background: rgba(90, 170, 235, 0.088); color: #14589F; }
.rec-src { display: block; margin-top: 3px; }
.rec-link { max-width: 260px; }
.rec-link-text { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; margin-right: 6px; font-size: 0.84rem; }

/* 관리자: 지급 항목 편집기 */
.dl-rows { display: flex; flex-direction: column; gap: 10px; }
/* 한 줄(항목)은 두 층: 위에 '상품명 | 링크'(링크가 더 넓게), 아래에 '보증 일수 | 보증 시작일 | 지우기'. 좁은 칸(주문 상세)에서도 링크 칸이 넓게 나와요 */
.dl-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; align-items: end; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.dl-row .dl-title { grid-column: 1 / span 5; }
.dl-row .dl-link { grid-column: 6 / span 7; }
.dl-row .dl-days { grid-column: 1 / span 3; }
.dl-row .dl-start { grid-column: 4 / span 5; }
.dl-row .dl-x { grid-column: 12 / span 1; justify-self: end; }
.dl-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dl-f label { margin: 0 !important; font-size: 0.76rem !important; color: var(--muted) !important; }
.dl-f input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 0.9rem; }
.dl-x { width: 34px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dl-x:hover { color: #B3261E; border-color: #FF8A8E; }
.dl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.dl-hint { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.dl-hint b { color: #0F2A43; }
.dl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.84rem; }
@media (max-width: 760px) {
  .dl-row .dl-title, .dl-row .dl-link { grid-column: 1 / -1; }
  .dl-row .dl-days { grid-column: 1 / span 4; }
  .dl-row .dl-start { grid-column: 5 / span 6; }
  .dl-row .dl-x { grid-column: 11 / span 2; }
  .dl-card { padding: 16px; }
  .dl-card-head { flex-wrap: wrap; }
}
.dl-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(30, 90, 160, 0.032); color: #1E3A56; font-size: 0.86rem; line-height: 1.6; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }

/* 마이페이지 탭이 3개가 되면서, 좁은 화면에서 글자가 두 줄로 쪼개지지 않게 */
.mp-tab { white-space: nowrap; }
@media (max-width: 640px) {
  .mp-tabs { display: flex; padding: 3px; gap: 2px; }
  .mp-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 6px; font-size: 0.84rem; gap: 5px; }
  .mp-tab .mp-count { min-width: 20px; padding: 1px 6px; font-size: 0.72rem; }
}
@media (max-width: 360px) { .mp-tab { padding: 9px 3px; font-size: 0.78rem; gap: 3px; } }
/* A/S 관리 화면의 제목 줄: '+ 수동 주문 만들기' 버튼이 두 줄로 쪼개지지 않게 (이 화면에만 적용) */
.rec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; }
.rec-head > div { min-width: 0; flex: 1 1 320px; }
.rec-head .btn { white-space: nowrap; flex-shrink: 0; }
/* 날짜/시각 입력칸: 브라우저 기본(흰 배경)이 튀지 않게 다른 입력칸처럼 어둡게 (달력 아이콘은 밝게) */
.admin-form input[type="date"], .admin-form input[type="datetime-local"], .dl-f input[type="date"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--sans); font-size: 0.92rem; color-scheme: light;
}
.admin-form input[type="date"]::-webkit-calendar-picker-indicator, .admin-form input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }


/* ===== 마이페이지: 등급을 프로필·숫자와 한 카드 안에서 이어서 ===== */
/* 예전의 '따로 떨어진 금색 상자' 모양(테두리·모서리·윗줄·빛)을 걷어내고, 카드의 세 번째 층으로. 등급 색은 은은한 번짐으로만 */
.mp-hero .mp-grade-in {
  position: relative;
  margin: 0;
  padding: 20px 28px 16px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background:
    radial-gradient(520px 150px at 0% 0%, color-mix(in srgb, var(--gc) 16%, transparent), transparent 75%),
    rgba(30, 90, 160, 0.018);
}
.mp-hero .mp-grade-in::before { display: none; }
.mp-hero .mp-grade-in .my-grade-main { align-items: center; gap: 16px; }
.mp-hero .mp-grade-in .grade-emblem { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--gc) 22%, transparent), inset 0 1px 0 rgba(30, 90, 160, 0.08); }
.mp-hero .mp-grade-in .grade-emblem img { width: 30px; height: 30px; }
.mp-hero .mp-grade-in .my-grade-text { gap: 2px; }
.mp-hero .mp-grade-in .my-grade-name { font-size: 1.45rem; }
.mp-hero .mp-grade-in .my-grade-bar { height: 6px; margin: 16px 0 12px; }
.mp-hero .mp-grade-in .my-grade-bar span { box-shadow: 0 0 10px color-mix(in srgb, var(--gc) 50%, transparent); }
/* 아래 줄: 안내(왼쪽) + 전체 등급 보기(오른쪽)를 한 줄로 */
.my-grade-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 6px; }
.my-grade-bottom .my-grade-foot { margin: 0; flex: 1 1 280px; }
.my-grade-bottom .my-grade-link { flex-shrink: 0; align-self: auto; }
.mp-hero .mp-grade-in:first-of-type { margin-top: 0; }

@media (max-width: 640px) {
  .mp-hero .mp-grade-in { padding: 16px 18px 14px; }
  .mp-hero .mp-grade-in .grade-emblem { width: 46px; height: 46px; border-radius: 14px; }
  .mp-hero .mp-grade-in .my-grade-name { font-size: 1.3rem; }
  .my-grade-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .my-grade-bottom .my-grade-foot { flex-basis: auto; }
}
.my-grade-note { word-break: keep-all; overflow-wrap: break-word; }          /* "남았어요"처럼 글자 중간에서 끊기지 않고 띄어쓰기에서만 줄바꿈 */
.my-grade-foot { word-break: keep-all; overflow-wrap: break-word; }


/* ===== 점검 모드 (관리자 화면) ===== */
.mt-badge { margin-left: 10px; padding: 3px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; vertical-align: middle; }
.mt-badge.on { background: rgba(255, 92, 108, 0.16); color: #B3261E; border: 1px solid rgba(255, 92, 108, 0.5); }
.mt-badge.off { background: rgba(30, 90, 160, 0.043); color: #51657C; border: 1px solid rgba(30, 90, 160, 0.224); }
.mt-block.is-on { border-color: rgba(255, 92, 108, 0.55); background: linear-gradient(180deg, rgba(255, 92, 108, 0.08), transparent 55%), var(--surface); }
.mt-since { margin: 12px 0 0; color: var(--muted); font-size: 0.84rem; }
.mt-since b { color: #0F2A43; }
.mt-btn-on { background: #E5484D; border: 1px solid #E5484D; color: #fff; font-weight: 800; }
.mt-btn-on:hover { background: #F25A5F; }
.mt-btn-off { background: #2BB673; border-color: #2BB673; color: #04110A; font-weight: 800; }
.mt-btn-off:hover { background: #35C97F; }

/* 점검 중에 관리자에게만 보이는 안내 띠: 스크롤해도 맨 위에 고정, 아래의 상단바·사이드바를 띠 높이만큼 밀어 내려요 */
:root { --mt-bar-h: 0px; }
.mt-admin-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  min-height: 38px; padding: 7px 16px;
  background: #D93B45; color: #fff; font-size: 0.86rem; line-height: 1.4; text-align: center;
}
.mt-admin-bar b { font-weight: 800; }
.mt-admin-bar a { padding: 3px 12px; border-radius: 999px; background: rgba(15, 42, 67, 0.175); color: #0F2A43; font-weight: 800; white-space: nowrap; }
.mt-admin-bar a:hover { background: rgba(15, 42, 67, 0.28); }
.mt-admin-bar ~ .topbar { top: var(--mt-bar-h); }
.mt-admin-bar ~ * .sidebar, .mt-admin-bar ~ .layout .sidebar { top: calc(var(--topbar-h) + var(--mt-bar-h)); height: calc(100vh - var(--topbar-h) - var(--mt-bar-h)); }
.mt-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 183, 77, 0.09); border: 1px solid rgba(255, 183, 77, 0.35); color: #9A5B00; font-size: 0.86rem; line-height: 1.6; }
.mt-note b { color: #0F2A43; }
.admin-form.mt-form { max-width: 720px; }          /* 폼 전체의 480px 제한을 이 폼만 넓혀요 (다른 폼은 그대로) */
.mt-form input[type="text"], .mt-form textarea { width: 100%; max-width: 100%; }
@media (max-width: 560px) {
  .mt-form .admin-form-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .mt-form .admin-form-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .mt-admin-bar { font-size: 0.8rem; padding: 7px 12px; gap: 8px; }
}


/* ===== 사이트 이름 일괄 바꾸기 (관리자) ===== */
.rb-info { margin: 18px 0 20px; padding: 18px 22px; }
.rb-info ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: #1E3A56; font-size: 0.9rem; line-height: 1.6; }
.rb-info code, .rb-skip code, .form-help code { padding: 1px 6px; border-radius: 5px; background: rgba(30, 90, 160, 0.054); color: #0F2A43; font-size: 0.84em; }
.rb-names .coupon-split { margin-bottom: 12px; }
.rb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rb-all { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; color: var(--text) !important; font-size: 0.9rem !important; cursor: pointer; }
.rb-all input, .rb-item input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.rb-list { display: flex; flex-direction: column; gap: 8px; }
.rb-item { display: flex !important; align-items: flex-start; gap: 14px; margin: 0 !important; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text) !important; font-size: 0.92rem !important; cursor: pointer; }
.rb-item:has(input:checked) { border-color: rgba(140, 196, 247, 0.55); background: rgba(140, 196, 247, 0.039); }
.rb-item input { margin-top: 3px; }
.rb-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rb-label { color: var(--accent-2); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em; }
.rb-ctx { color: #1E3A56; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.rb-arrow { color: var(--muted); font-size: 0.86rem; }
.rb-arrow b { color: #0E7A4B; }
.rb-skip { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rb-skip li { display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; }
.rb-skip .rb-label { color: var(--muted); }
.rb-skip code { word-break: break-all; white-space: normal; background: none; padding: 0; color: #1E3A56; }
@media (max-width: 560px) { .rb-info { padding: 14px 16px; } .rb-item { padding: 12px 13px; gap: 11px; } }
.rb-step { margin: 18px 0 26px; padding: 20px 22px; }
.rb-step-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 800; }
.rb-step-title { display: flex; align-items: center; margin: 26px 0 0; font-size: 1.15rem; font-weight: 800; }
.rb-now { margin: 0 0 12px; color: #1E3A56; font-size: 0.92rem; }
.rb-now b { color: #0F2A43; }
.rb-src { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(30, 90, 160, 0.049); color: var(--muted); font-size: 0.76rem; font-weight: 700; }

/* =====================================================================
   아이스 블루 & 화이트 테마 — 변환 후 사람이 판단한 보정
   (자동 변환이 놓치는 경우: 색칠된 면 위의 글자, 등급 색 글자, 상태 칩 등)
   ===================================================================== */

/* A. 등급 색(--gc)을 '글자'로 쓰는 곳: 금·은·플래티넘 같은 밝은 등급 색은 흰 카드에서 안 읽혀요.
      등급 색을 35%만 남기고 남색과 섞어서 읽히게 하고(대체 색을 먼저 적어 구형 브라우저도 안전), 엠블럼·막대·테두리는 원래 등급 색 그대로예요. */
.my-grade-kicker, .my-grade-link, .grade-tier, .grade-amount, .grade-need b, .my-grade .grade-name-color {
  color: #3F5F86;
  color: color-mix(in srgb, var(--gc) 35%, #0F2A43);
}

/* B. 분홍 → 깊은 파랑으로 바뀐 '인기/가장 많이 선택' 칩: 파랑 면 위에서는 흰 글자 */
.plan-badge, .feat-chip { color: #FFFFFF; }
.plan-badge.badge-soldout, .feat-chip-soldout { background: #CC2F36; color: #FFFFFF; }

/* C. 빨강 면 위 흰 글자 (점검 시작 등): 빨강을 한 단계 진하게 */
.mt-btn-on { background: #CC2F36; border-color: #CC2F36; }
.mt-btn-on:hover { background: #B3262D; }
.btn-danger, .admin-btn-danger { background: #CC2F36; border-color: #CC2F36; color: #FFFFFF; }

/* D. 파랑 면(활성 탭·활성 필터 등) 안의 글자와 작은 배지: 흰 글자 + '더 어두운 파랑' 바탕 (밝은 바탕이면 흰 글자가 안 읽혀요) */
.mp-tab.active .mp-count, .cat-tab.active .count, .admin-tab.active .tab-badge { background: rgba(8, 44, 100, 0.38); color: #FFFFFF; }
.mp-count.is-on { background: #0F4C97; color: #FFFFFF; }
.mp-filter.active b, .of-btn.active b { color: #FFFFFF; }

/* D2. 사진·색칠된 면 위에 얹는 컨트롤(배너 이전/다음, 팝업 닫기, 점검 안내 띠의 링크): 어두운 반투명 바탕 + 흰 글자 */
.hb-nav, .hb-counter, .popup-close { background: rgba(10, 36, 68, 0.62); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); }
.mt-admin-bar a { background: rgba(0, 0, 0, 0.28); color: #FFFFFF; }

/* E. 기간 칩: 글자를 한 단계 진하게 */
.plan-period, .feat-price-main .plan-period, .feat-price-main small.plan-period { color: #14589F; }

/* F. 카드: 푸른 기운의 은은한 두 겹 그림자로 '서리 낀 유리'처럼 살짝 떠 보이게 (세기는 --shadow-card 한 곳에서 조절해요) */
:root { --shadow-card: 0 1px 2px rgba(30, 90, 160, 0.06), 0 10px 28px rgba(30, 90, 160, 0.075); --shadow-pop: 0 18px 50px rgba(20, 70, 140, 0.18); }
.why-card, .featured-card, .stat-card, .plan, .admin-block, .chapter-card, .auth-card, .home-card, .shop-card, .shop-empty,
.cart-row, .order-card, .detail-box, .coupon-register, .coupon, .mp-order, .mp-register, .dl-card, .popup-box { box-shadow: var(--shadow-card); }
.popup-box, .toast, .modal-box, .detail-modal { box-shadow: var(--shadow-pop); }

/* G. 브라우저 기본 컨트롤(스크롤바, 날짜 달력, 체크박스, 선택 상자)이 밝은 테마에 맞게 나오도록 */
:root { color-scheme: light; }
html { scrollbar-color: #B7D3EE #F4F9FF; }
::selection { background: rgba(94, 169, 240, 0.35); color: #0F2A43; }

/* 사이드바의 메뉴 묶음(.side-card)은 카드가 아니라 평평한 목록이라 그림자를 주지 않아요 */
.sidebar .side-card { box-shadow: none; }

/* H. 그라데이션 글자(글자 모양으로 오려 쓰는 배경): 흰 바탕에서 읽히도록 '남색 → 깊은 파랑'으로. 가장 연한 색도 큰 글자 기준(3:1)을 넘겨요 */
.page-head-title { background: linear-gradient(180deg, #0F2A43 35%, #1B66C4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ht-grad { background: linear-gradient(100deg, #1B66C4 0%, #2A84E0 45%, #1D6FCC 75%, #1B66C4 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
.stat-number { background: linear-gradient(135deg, #1B66C4, #2A84E0); -webkit-background-clip: text; background-clip: text; }

/* I. 활성 메뉴 글자: 모바일 서랍(더 진한 하늘색 면) 위에서도 읽히도록 한 단계 진하게 */
.side-link.active, .side-link.active span { color: #174F96; }