/* YACHTCAMP HQ — 다크 기본 · 심플 · 전문 */

:root {
  --bg: #0f141c;
  --panel: #151b25;
  --panel-2: #121821;
  --ink: #e8ecf3;
  --sub: #97a1b3;
  --line: #232c3a;
  --accent: #2fa98c;
  --accent-bright: #43c3a4;
  --accent-soft: rgba(47, 169, 140, 0.12);
  --accent-line: rgba(47, 169, 140, 0.35);
  --live: #2fd07a;
  --amber: #e0a34e;
  --amber-soft: rgba(224, 163, 78, 0.13);
  --radius: 12px;
  --max: 1060px;
}

/* ---------- 주간(라이트) 모드 — body.light ---------- */
body.light {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel-2: #e9edf2;
  --ink: #16202c;
  --sub: #5b6779;
  --line: #d9e0e8;
  --accent: #1f9478;
  --accent-bright: #16856a;
  --accent-soft: rgba(31, 148, 120, 0.10);
  --accent-line: rgba(31, 148, 120, 0.35);
}
body.light .topbar { background: rgba(255, 255, 255, 0.88); }
body.light .mob-menu { background: rgba(255, 255, 255, 0.98); }
body.light .btn { background: #ffffff; border-color: #cfd7e0; }
body.light .btn:hover { background: #f0f3f7; border-color: #b9c4d0; }
body.light .btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
body.light .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
body.light .tag, body.light .acc-badge.off, body.light .lecture-soon { background: #e4e9ef; }
body.light .stack img { border-color: #cfd7e0; box-shadow: 0 24px 50px -18px rgba(30, 45, 60, 0.25), 0 4px 14px rgba(30, 45, 60, 0.12); }
body.light .edu-card { background: radial-gradient(600px 300px at 88% 20%, var(--accent-soft), transparent 65%), #ffffff; }
body.light .about-copy p { color: #3d4a5c; }
body.light .card-features li { color: #46536a; }
body.light .auth-modal { background: rgba(240, 244, 248, 0.8); }
body.light #toast { background: #16202c; color: #f3f5f8; }
body.light .video-play { background: rgba(255, 255, 255, 0.75); color: #16202c; border-color: rgba(22, 32, 44, 0.35); }
body.light .wordmark-hq { color: #ffffff; }

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

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

/* ---------- 상단바 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 20, 28, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 28px; height: 60px; }
/* 로고는 두 줄 — 위 YACHT, 아래 CAMP (2026-09-19 사장님 지시).
   머리띠 높이(60px)는 그대로 두어야 아래 내용이 밀리지 않으므로 글자를 줄이고 행간을 좁힌다. */
.wordmark {
  font-weight: 800; letter-spacing: 0.10em; font-size: 13px;
  display: inline-flex; flex-direction: column; line-height: 1.02; flex: none;
}
.wordmark span { display: block; }
.wordmark-hq {
  margin-left: 6px; padding: 2px 6px; border-radius: 5px;
  background: var(--accent); color: #071410;
  font-size: 10px; letter-spacing: 0.12em; vertical-align: 2px;
}
.nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
/* 탭이 하나 늘 때마다 글자가 '라이 / 브'처럼 두 줄로 쪼개졌다(2026-09-19 프로필 탭 추가 때 실측).
   메뉴 글자는 줄바꿈하지 않는다 — 좁으면 통째로 줄어들게 둔다. */
.nav a { font-size: 14px; color: var(--sub); transition: color .15s; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
/* 목적지 탭 (강의·쇼핑·로그인) — 앵커 메뉴와 구분되게 강조 */
.nav-dest {
  font-weight: 700; color: var(--ink) !important;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); transition: border-color .15s, background .15s, color .15s;
}
.nav-dest:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.nav-login { color: var(--accent-bright) !important; border-color: var(--accent-line); }
.nav-login:hover { background: var(--accent); color: #04110d !important; border-color: var(--accent); }
.live-chip {
  font-size: 12px; font-weight: 600; color: var(--accent-bright);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* 주간/야간 전환 버튼 */
.theme-btn {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 16px; line-height: 1;
}
.theme-btn:hover { border-color: var(--accent-line); }

/* ---------- 모바일 메뉴 (☰) ---------- */
.menu-btn {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: 19px; line-height: 1;
}
.mob-menu {
  border-top: 1px solid var(--line);
  background: rgba(15, 20, 28, 0.98); backdrop-filter: blur(10px);
  padding: 8px 16px 14px;
}
.mob-menu[hidden] { display: none; }
.mm-item {
  display: block; padding: 13px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.mm-item:active, .mm-item:hover { background: var(--panel); }
.mm-go { color: var(--accent-bright); font-weight: 800; }
.mm-line { border-top: 1px solid var(--line); margin: 8px 0; }

/* ---------- 히어로 ---------- */
.hero {
  padding: 88px 0 56px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(47, 169, 140, 0.10), transparent 65%),
    radial-gradient(700px 380px at -10% 30%, rgba(47, 169, 140, 0.06), transparent 60%);
}
/* 겹친 이미지 3장을 뺀 뒤 1열 (2026-08-16). 전폭으로 늘리면 쇼케이스·영상이 너무 커지므로
   읽기 좋은 폭에서 멈춘다. 이미지를 되살리면 1.05fr 0.95fr로 되돌린다.

   2026-08-17 사장님 지시로 760px 제한을 푼다 — 파노라마·쇼케이스 영상·강의 줄·쇼핑 줄이
   모두 아래 구획과 같은 폭(.wrap 안쪽 1012px)으로 나온다. 위 주석의 '읽기 좋은 폭에서
   멈춘다'는 이 지시로 대체됐다. 읽는 글의 폭은 .hero-sub의 max-width(560px)가 따로 잡는다.
   폭 계산에 100vw를 쓰지 않는다 — 스크롤바 너비만큼 어긋나 가로 스크롤이 생긴다. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 48px; align-items: center; margin-bottom: 56px;
}

/* 대표 화면 스택 */
.stack { position: relative; height: 400px; }
.stack img {
  position: absolute; width: 78%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 12px; border: 1px solid #2c3646;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.35);
  background: var(--panel);
}
.stack img:nth-child(1) { top: 0; right: 0; transform: rotate(2deg); z-index: 1; }
.stack img:nth-child(2) { top: 86px; left: 0; transform: rotate(-2.5deg); z-index: 2; }
.stack img:nth-child(3) { top: 182px; right: 24px; transform: rotate(1.2deg); z-index: 3; }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--accent-bright); text-transform: uppercase; margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800; line-height: 1.14; letter-spacing: -0.025em;
  margin-bottom: 22px; word-break: keep-all;
}
.hero-sub { font-size: 15px; color: var(--sub); max-width: 560px; margin-bottom: 24px; }

/* ---------- 관제 콘솔 (시그니처) ---------- */
.console {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.console-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.console-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }
.console-count { font-size: 13px; color: var(--sub); }
.console-row {
  display: grid;
  grid-template-columns: 14px 200px 1fr auto;
  align-items: center; gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
}
.console-row:last-child { border-bottom: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #38424f; justify-self: center; }
.dot.on { background: var(--live); box-shadow: 0 0 0 4px rgba(47, 208, 122, 0.16); }
.console-name { font-weight: 700; font-size: 15px; }
.console-role { font-size: 14px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-actions { display: flex; gap: 8px; }

/* ---------- 라이브 서비스 — 손으로 미는 가로 목록 (2026-08-16) ----------
   사장님 지시: 아이폰처럼 이미지 + 아래 제품명, 손으로 밀면 밀리고 누르면 그 서비스로.
   스크롤 스냅으로 만든다 — 라이브러리 없이 폰·트랙패드에서 자연스럽게 밀린다. */
/* 그리드 칸은 기본이 min-width:auto라 안에 넓은 것이 있으면 칸째로 늘어난다.
   그러면 가로 목록이 '넘치지' 않아 밀 공간이 안 생긴다 — 0으로 눌러 준다 */
.hero-grid > * { min-width: 0; }
.public-cta, .live-rail-wrap { position: relative; margin-top: 22px; min-width: 0; }

.live-rail {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
  /* 화면 밖으로 시원하게 흘러나가게 — 끝이 잘려 보여야 '더 있다'는 게 전해진다 */
  margin-inline: -2px;
}
.live-rail::-webkit-scrollbar { display: none; }
.live-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.live-rail.dragging a { pointer-events: none; }
/* 파노라마로 흐르는 동안에는 스냅을 끈다 — 켜져 있으면 매 장마다 붙잡혀 덜컹거린다 */
.live-rail.flowing { scroll-snap-type: none; scroll-behavior: auto; }

.lr-item {
  flex: 0 0 auto; width: clamp(190px, 46vw, 236px);
  scroll-snap-align: start;
  text-decoration: none; color: inherit;
  transition: transform .18s ease;
}
.lr-item:hover { transform: translateY(-3px); }

/* 커버 원본이 16:9라 4:3으로 자르면 좌우가 잘려 로고가 날아간다 — 원본에 가깝게 */
.lr-shot {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line); background: #0c1119;
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.8);
  transition: border-color .18s ease;
}
.lr-item:hover .lr-shot, .lr-item:focus-visible .lr-shot { border-color: var(--accent-line); }
.lr-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; user-select: none; -webkit-user-drag: none;
}

.lr-name {
  display: flex; align-items: center; gap: 7px;
  margin: 11px 2px 0;
}
.lr-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; }
.lr-state {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 11px; font-weight: 600; color: var(--sub);
}
.lr-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px rgba(47, 208, 122, 0.13);
}
.lr-item.is-new .lr-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.lr-copy {
  margin: 4px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 38px; text-wrap: pretty;
}

@media (max-width: 700px) {
  .live-rail { gap: 11px; }
  .lr-item { width: clamp(160px, 56vw, 200px); }
  .lr-copy { -webkit-line-clamp: 2; min-height: 36px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-item, .lr-shot { transition: none; }
  .live-rail { scroll-behavior: auto; }
}

/* ---------- 주제별 색 (2026-08-16 사장님 지시: 각 주제의 스타일에 맞추어) ----------
   같은 카드 양식을 쓰되 주제마다 색만 달리한다. 색이 구획을 구분하는 유일한 표시이므로
   장식이 아니라 정보다. 라이브는 초록(가동 중), 커머스는 호박(돈), 법률은 청록(신뢰),
   미디어는 보라(창작), 플랫폼은 파랑(도구). */
[data-topic] { --topic: var(--accent-bright); }
[data-topic="live"]     { --topic: #2fd07a; }
[data-topic="commerce"] { --topic: #e0a34e; }
[data-topic="law"]      { --topic: #4cc9d6; }
[data-topic="train"]    { --topic: #f0916b; }
[data-topic="media"]    { --topic: #a78bfa; }
[data-topic="platform"] { --topic: #60a5fa; }

[data-topic] .sec-label { color: var(--topic); }
[data-topic] .sec-label::before {
  content: ''; display: inline-block; width: 16px; height: 2px; border-radius: 2px;
  background: var(--topic); vertical-align: middle; margin-right: 8px;
}
[data-topic] .card:hover { border-color: color-mix(in srgb, var(--topic) 45%, transparent); }
[data-topic] .card-cover { border-bottom-color: color-mix(in srgb, var(--topic) 22%, var(--line)); }

/* ---------- 구획 제목 — 아이폰 제목 스타일 + 반짝임 (2026-08-16 사장님 지시) ----------
   애플이 제품명을 쓰는 방식: 크게, 굵게, 자간을 바짝 좁혀서.
   거기에 빛이 한 번 훑고 지나간다. 색을 바꾸는 게 아니라 빛이 지나가는 것이라 과하지 않다.
   반짝임 색은 그 구획의 주제색(--topic)을 쓴다 — 구획마다 다른 빛이 지나간다.
   구획마다 시작 시각을 어긋나게 해 화면 전체가 동시에 번쩍이지 않게 한다. */
[data-topic] .sec-title {
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  /* 빛의 띠는 넉넉히 잡아야 눈에 들어온다 — 좁으면 스쳐 지나가 안 보인다 */
  background-image: linear-gradient(
    105deg,
    var(--ink) 0%, var(--ink) 25%,
    var(--topic) 38%, #ffffff 50%, var(--topic) 62%,
    var(--ink) 75%, var(--ink) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sec-shine 3.6s ease-in-out infinite;
}
[data-topic="commerce"] .sec-title { animation-delay: .5s; }
[data-topic="law"]      .sec-title { animation-delay: 1.0s; }
[data-topic="train"]    .sec-title { animation-delay: 1.5s; }
[data-topic="media"]    .sec-title { animation-delay: 2.0s; }
[data-topic="platform"] .sec-title { animation-delay: 2.5s; }

@keyframes sec-shine {
  0%   { background-position: 100% 0; }
  45%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }   /* 지나간 뒤에는 쉰다 — 계속 번쩍이면 피곤하다 */
}

/* 라이브 라벨 옆 불빛 — '지금 켜져 있다'는 신호라 여기에만 둔다 */
#sec-live .sec-label { position: relative; }
#sec-live .sec-label::after {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); margin-left: 8px; vertical-align: middle;
  animation: live-pulse 2.2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 208, 122, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(47, 208, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 208, 122, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-topic] .sec-title { animation: none; background: none; color: var(--ink); }
  #sec-live .sec-label::after { animation: none; }
}

/* 강의 클래스 한 줄 — 라이브 목록과 영상 사이 (2026-08-16)
   카드로 만들면 위아래 덩어리와 경쟁한다. 한 줄 띠로 조용히 놓는다 */
.hero-edu {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(90deg, var(--accent-soft), transparent 62%), var(--panel);
  transition: border-color .18s ease, transform .18s ease;
}
.hero-edu[hidden] { display: none; }
.hero-edu:hover, .hero-edu:focus-visible {
  border-color: var(--accent-line); transform: translateY(-2px);
}
.he-badge {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: #04211a;
}
.he-body { min-width: 0; flex: 1; }
.he-title { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.he-desc {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.he-go {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--accent-bright);
}
/* 이용권 줄 — 같은 양식이되 파는 줄이라 강조를 한 단계 올린다 (2026-08-19).
   새 색을 만들지 않고 기존 강조색을 더 넓게·더 밝게 쓴다. */
.hero-edu.is-pass {
  background: linear-gradient(90deg, var(--accent-soft), transparent 82%), var(--panel);
  border-color: var(--accent-line);
}
.hero-edu.is-pass .he-price {
  font-style: normal; font-weight: 800; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.hero-edu.is-pass:hover, .hero-edu.is-pass:focus-visible { border-color: var(--accent-bright); }

/* 쇼핑 줄 — 같은 양식, 색만 호박색으로 구분한다 */
.hero-edu.is-shop {
  background: linear-gradient(90deg, var(--amber-soft), transparent 62%), var(--panel);
}
.hero-edu.is-shop .he-badge { background: var(--amber); color: #2a1a05; }
.hero-edu.is-shop:hover, .hero-edu.is-shop:focus-visible { border-color: rgba(224, 163, 78, 0.45); }
.hero-edu.is-shop .he-go { color: var(--amber); }

@media (max-width: 700px) {
  .hero-edu { padding: 12px 13px; gap: 10px; }
  .he-desc { font-size: 12px; }
  .he-go { font-size: 12px; }
}

/* 히어로 스튜디오 영상 — 버튼 바로 아래 */
.hero-video {
  position: relative; display: block; margin-top: 18px;
  text-decoration: none; color: inherit;
}
.hero-video video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid #2c3646; background: #000;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hero-video:hover video, .hero-video:focus-visible video {
  border-color: var(--accent-line); box-shadow: 0 26px 56px -20px rgba(0, 0, 0, 0.75);
}
/* 누를 수 있다는 표시 — 폰에서는 우하단 '자세히' 버튼과 겹치므로 왼쪽에 둔다 */
.hero-video-go {
  position: absolute; right: 10px; bottom: 10px; pointer-events: none;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: rgba(15, 20, 28, 0.78); color: var(--accent-bright);
  border: 1px solid var(--accent-line); backdrop-filter: blur(3px);
  transition: background .2s ease, color .2s ease;
}
.hero-video:hover .hero-video-go, .hero-video:focus-visible .hero-video-go {
  background: var(--accent); color: #04211a; border-color: var(--accent);
}
@media (max-width: 700px) {
  .hero-video-go { right: auto; left: 10px; font-size: 11.5px; padding: 5px 10px; }
}
.hero-video-tag {
  position: absolute; top: 10px; left: 10px; pointer-events: none;
  font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px;
  background: rgba(15, 20, 28, 0.75); color: #fff; backdrop-filter: blur(2px);
}
body.light .hero-video video { border-color: #cfd7e0; box-shadow: 0 24px 50px -18px rgba(30, 45, 60, 0.25); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2c3646; background: #1b2330; color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: #3d4a5e; background: #202a39; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #071410; }
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--sub); }
.btn-ghost:hover { color: var(--ink); border-color: transparent; background: transparent; }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn-lg { font-size: 15px; padding: 11px 20px; border-radius: 10px; }

/* ---------- 섹션 공통 ---------- */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.sec-head { margin-bottom: 36px; }
.sec-label {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent-bright); margin-bottom: 10px;
}
.sec-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.sec-desc { color: var(--sub); margin-top: 8px; max-width: 620px; }

/* ---------- 소개 ---------- */
.about-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px;
  align-items: start;
}
.about-copy p { margin-bottom: 18px; color: #c4cbd8; }
.about-copy p:last-child { margin-bottom: 0; }

.timeline { list-style: none; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 22px 22px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.tl-date { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-bright); }
.tl-text { font-size: 14.5px; color: var(--sub); }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-top: 48px; overflow: hidden;
}
.stats > div { padding: 22px 24px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats dt { font-size: 12.5px; color: var(--sub); margin-bottom: 4px; }
.stats dd { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- 제품 카드 ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover {
  border-color: #354153;
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.card-cover {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
/* 제작 예시 영상 커버 */
.video-cover { position: relative; cursor: pointer; overflow: hidden; display: block; }
.video-cover .video-poster { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.video-cover video { object-position: center; background: #000; }
.video-cover.playing { cursor: default; }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 20, 28, 0.66); color: #fff; font-size: 22px; padding-left: 4px;
  border: 2px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(2px);
  transition: transform 0.15s ease, background 0.15s ease;
}
.video-cover:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: var(--accent); color: #04110d; }
.video-tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #04110d;
}
.card-body { padding: 24px 26px 22px; display: flex; flex-direction: column; flex: 1; }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  background: #202938; color: var(--sub);
}
.badge.live { background: var(--accent-soft); color: var(--accent-bright); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.card .dot { justify-self: auto; }
.card-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.card-tagline { font-size: 12.5px; color: var(--sub); margin-bottom: 16px; }
.card-features { list-style: none; margin-bottom: 20px; flex: 1; }
.card-features li {
  position: relative; padding-left: 16px;
  font-size: 12.5px; color: #b9c2d0; margin-bottom: 5px;
}
.card-features li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  opacity: 0.8;
}
.card-note { font-size: 13px; color: var(--sub); margin-bottom: 14px; }
.card-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- 아카이브 ---------- */
.archive { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.archive-row {
  display: grid; grid-template-columns: 190px 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid var(--line);
}
.archive-row:last-child { border-bottom: 0; }
.archive-name { font-weight: 700; font-size: 14.5px; }
.archive-desc { font-size: 12.5px; color: var(--sub); }
.tag {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #202938; color: var(--sub); white-space: nowrap;
}
.tag.ing { background: var(--accent-soft); color: var(--accent-bright); }

/* ---------- 강의(edu) 연결고리 ---------- */
.edu-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 34px; border-radius: 16px;
  border: 1px solid var(--accent-line);
  background:
    radial-gradient(600px 300px at 88% 20%, var(--accent-soft), transparent 65%),
    linear-gradient(135deg, #141c26, #171f2c);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.edu-card:hover {
  transform: translateY(-3px); border-color: var(--accent-bright);
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.8);
}
.edu-card-body { flex: 1; }
.edu-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 11px; border-radius: 999px; background: var(--accent); color: #04110d;
}
.edu-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 12px; }
.edu-desc { font-size: 15px; color: var(--sub); margin-top: 8px; max-width: 620px; }
.edu-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--accent-bright);
  padding: 12px 20px; border-radius: 10px; border: 1px solid var(--accent-line);
  background: rgba(47, 169, 140, 0.08); white-space: nowrap;
}
.edu-card:hover .edu-cta { background: var(--accent); color: #04110d; border-color: var(--accent); }
.edu-arrow { transition: transform 0.15s ease; }
.edu-card:hover .edu-arrow { transform: translateX(4px); }

/* ---------- 기본: 설명·기능은 숨김 (제목·한 줄 소개·커버만) / '자세히'로 펼침 ---------- */
/* 기본: 소개 섹션(제목·칸 포함) 통째로 숨김 + 카드 설명 숨김 — '자세히'로 펼침 */
#about, .card-features, .card-note, .archive-desc, .about-grid, .stats { display: none; }
.card-tagline, .sec-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* 라이브 서비스 카드는 숨김 제외 — 설명 전부 표시 (2026-08-15 지시) */
#sec-live .card-features { display: block; }
#sec-live .card-features li { display: list-item; }
#sec-live .card-note { display: block; }
#sec-live .card-tagline { -webkit-line-clamp: unset; overflow: visible; }

/* 메뉴 '소개' 클릭: 소개 섹션만 전체 펼침 (글·여정·숫자) */
body.show-about #about { display: block; }
body.show-about .about-grid { display: grid; }
body.show-about .stats { display: grid; }
/* 자세히: 전부 펼침 */
body.full #about { display: block; }
body.full .card-features { display: block; }
body.full .card-features li { display: list-item; }
body.full .card-note, body.full .archive-desc { display: block; }
body.full .about-grid { display: grid; }
body.full .stats { display: grid; }
body.full .card-tagline, body.full .sec-desc {
  -webkit-line-clamp: unset; overflow: visible;
}

.lean-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #04110d;
  background: var(--accent); border: 0;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}
.lean-toggle:hover { background: var(--accent-bright); }

/* ---------- 통합 계정 (로그인/구독) ---------- */
.nav-login.is-admin { color: var(--amber) !important; border-color: rgba(224,163,78,.4); }
.nav-login.is-admin:hover { background: var(--amber); color: #1a1206 !important; border-color: var(--amber); }

.auth-modal {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(6, 9, 14, 0.86); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-modal[hidden] { display: none; }
.auth-modal-in {
  position: relative; width: min(420px, 100%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 28px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
}
.auth-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: transparent; color: var(--sub); border: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.auth-close:hover { color: var(--ink); border-color: var(--accent-line); }
.auth-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.auth-sub { font-size: 13.5px; color: var(--sub); margin-top: 6px; }
.auth-tabs { display: flex; gap: 6px; margin: 20px 0 16px; background: var(--panel-2); padding: 4px; border-radius: 10px; }
.auth-tab {
  flex: 1; padding: 9px; border-radius: 7px; border: 0; cursor: pointer;
  background: transparent; color: var(--sub); font-size: 14px; font-weight: 700;
}
.auth-tab.on { background: var(--accent); color: #04110d; }
.auth-input {
  width: 100%; margin-bottom: 10px; padding: 12px 14px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font-size: 14.5px;
}
.auth-input:focus { outline: none; border-color: var(--accent); }
/* 비밀번호 미리보기(👁️) */
.pw-wrap { position: relative; margin-bottom: 10px; }
.pw-wrap .auth-input { margin-bottom: 0; padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 8px; cursor: pointer;
  background: none; font-size: 16px; line-height: 1; opacity: 0.65;
}
.pw-toggle:hover { opacity: 1; background: var(--panel-2); }
.auth-msg { min-height: 18px; font-size: 13px; color: #e06a6a; margin: 2px 0 10px; }
.auth-submit { width: 100%; }
.auth-agree { display: flex; align-items: flex-start; gap: 8px; margin: 4px 2px 4px; font-size: 12.5px; color: var(--sub); line-height: 1.5; cursor: pointer; }
.auth-agree input { margin-top: 3px; accent-color: var(--accent); }
.auth-agree a { color: var(--accent-bright); text-decoration: underline; }

.acc-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--sub); margin: 22px 0 10px; }
.acc-services { display: flex; flex-direction: column; gap: 8px; }
.acc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line);
}
/* 가격 줄이 길어졌으므로(월가 + 일회용) 글자 쪽이 줄어들고 버튼은 안 줄어들게 한다 */
.acc-name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acc-name { font-size: 14px; font-weight: 600; }
.acc-price { font-size: 11.5px; color: var(--sub); line-height: 1.45; }
.acc-state { display: flex; align-items: center; gap: 6px; flex: none; }
.acc-buy {
  font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #04110d; border: 0;
  white-space: nowrap;              /* '일회용'이 '일회 / 용'으로 접히지 않게 */
}
.acc-buy:hover { background: var(--accent-bright); }
/* 일회용 팩 버튼 — 구독 버튼보다 조용하게 (2026-08-17 가격 개편) */
.acc-buy.ghost { background: transparent; color: var(--sub); border: 1px solid var(--line); }
.acc-buy.ghost:hover { background: transparent; color: var(--ink); border-color: var(--accent-line); }
.acc-paynote {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.55; color: var(--sub);
}
.acc-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.acc-badge.on { background: var(--accent-soft); color: var(--accent-bright); }
.acc-badge.tok { background: rgba(224,163,78,.15); color: var(--amber); }
.acc-badge.off { background: #202938; color: var(--sub); }
/* 시험용 계정 (2026-08-17) — 실계정과 한눈에 구별되게 */
.acc-badge.test {
  background: rgba(120, 130, 150, 0.22); color: #9fb0c8;
  border: 1px dashed #4a566b; padding: 2px 8px;
}
.acc-actions { display: flex; gap: 10px; margin-top: 22px; }
.acc-actions .btn { flex: 1; }

#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: #eef2f8; color: #10151d; font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 관리자 콘솔 ---------- */
.admin-wrap { padding-top: 40px; padding-bottom: 80px; }
.admin-gate { max-width: 380px; margin: 60px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; }
/* 가림/미가림 스위치 한 줄 (2026-08-16 사장님 지시) — 회원 목록 위에 둔다 */
.site-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 18px;
}
.ss-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-title { font-size: 14.5px; font-weight: 700; }
.ss-desc { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
@media (max-width: 560px) {
  .site-setting { flex-direction: column; align-items: stretch; }
  .site-setting .btn { width: 100%; }
}

.admin-tools { margin-bottom: 18px; }
/* ── 회원 목록 아코디언 (사장님 지시 2026-08-17) ──────────────────────
   명단(이메일 줄)은 항상 다 보이고, 한 명을 누르면 그 자리에서 앱별 상세가 펼쳐진다. */
.admin-user {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 8px; overflow: hidden;
}
.admin-user.open { border-color: var(--accent-line); }
.admin-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 13px 16px;
}
.admin-row:hover { background: var(--panel-2); }
.admin-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-caret { flex: none; width: 12px; color: var(--sub); font-size: 11px; }
.admin-mail {
  font-size: 14px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-tags { display: flex; gap: 5px; flex: none; }
.admin-sum { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.admin-sum-t { font-size: 11.5px; color: var(--sub); white-space: nowrap; }
.admin-sum-t.tok { color: var(--amber); font-weight: 600; }
.acc-badge.pend {
  background: rgba(47, 169, 140, 0.18); color: var(--accent-bright);
  border: 1px dashed var(--accent-line); font-size: 11px; padding: 2px 8px;
}
/* ── 건당 단품·바우처 (2026-08-18) ──────────────────────────────── */
.sku-list { margin-top: 6px; }
.sku-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 12px; margin-top: 6px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.sku-info { min-width: 0; }
.sku-name { font-size: 13px; font-weight: 600; }
.sku-desc { font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.5; }
.acc-vouchers { margin-top: 16px; }
.admin-sum-t.vch { color: #b79cf0; font-weight: 600; }
.vch-box {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.vch-title { font-size: 11.5px; color: var(--sub); font-weight: 700; margin-right: 4px; }
.vch-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(150, 120, 220, 0.16); color: #b79cf0; border: 1px solid rgba(150, 120, 220, 0.35);
}

/* ── 무통장입금 (2026-08-17) ─────────────────────────────────────── */
/* 손님 화면 — 계좌 안내 상자 */
.bank-box {
  margin: 14px 0 4px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.bank-line { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 13px; }
.bank-k { flex: none; width: 72px; color: var(--sub); font-size: 11.5px; }
.bank-v { font-weight: 600; word-break: break-all; }
.bank-line.strong .bank-v { font-size: 16px; font-weight: 800; color: var(--accent-bright); }
.bank-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--sub); }
.acc-orders { margin-top: 18px; }
.ord-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 12px; margin-top: 6px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.ord-info { min-width: 0; }
.ord-label { font-size: 13px; font-weight: 600; }
.ord-meta { font-size: 11px; color: var(--sub); margin-top: 3px; word-break: break-all; }
.acc-badge.ord-wait { background: rgba(224, 163, 78, 0.16); color: var(--amber); }
.acc-badge.ord-ok { background: var(--accent-soft); color: var(--accent-bright); }
.acc-badge.ord-no { background: #202938; color: var(--sub); }

/* 관리자 화면 — 입금 대기 목록 */
#orders { margin-bottom: 18px; }
.ord-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ord-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ord-title { font-size: 14px; font-weight: 700; }
.ord-acct { font-size: 11.5px; color: var(--sub); margin-top: 6px; }
.ord-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 2px; border-top: 1px solid var(--line); margin-top: 10px;
}
.ord-item.wait { background: rgba(224, 163, 78, 0.05); }
.ord-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ord-no { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ord-warn { font-size: 11px; color: var(--amber); font-weight: 700; }
.ord-main { font-size: 13px; font-weight: 600; margin-top: 4px; }
.ord-acts { display: flex; gap: 6px; margin-left: auto; flex: none; }
@media (max-width: 620px) {
  .ord-acts { margin-left: 0; width: 100%; }
  .ord-acts .mini { flex: 1; }
}

/* 제명 버튼 — 다른 버튼과 확실히 구별되게 (실수하면 안 되는 일) */
.mini.kick { color: #e08b86; border-color: rgba(179, 69, 63, 0.55); margin-left: 6px; }
.mini.kick:hover { background: #b3453f; color: #fff; border-color: #b3453f; }

/* 제명 회원 보기 — 평소엔 접혀 있어 명단을 어지럽히지 않는다 */
#removed { margin-top: 18px; }
.removed-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
}
.removed-sum { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sub); list-style: none; }
.removed-sum::-webkit-details-marker { display: none; }
.removed-sum::before { content: '▸ '; }
.removed-box[open] .removed-sum::before { content: '▾ '; }
.removed-sum:hover { color: var(--ink); }
.removed-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.removed-row:last-child { border-bottom: 0; }
.rm-info { flex: 1; min-width: 0; }
.rm-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rm-mail { font-size: 13.5px; font-weight: 600; }
.rm-meta { font-size: 11.5px; color: var(--sub); margin-top: 3px; line-height: 1.5; }
/* 즉시 소멸 — 복구(초록)와 헷갈리면 안 되므로 채운 빨강으로 확실히 구분한다 */
.mini.kill {
  background: #7d2f2b; border-color: #7d2f2b; color: #ffe9e7; font-weight: 700;
}
.mini.kill:hover { background: #b3453f; border-color: #b3453f; color: #fff; }

.admin-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.admin-body .admin-meta { margin: 12px 0 12px; }

@media (max-width: 620px) {
  .admin-row { flex-wrap: wrap; gap: 7px; padding: 12px 13px; }
  .admin-mail { flex: 1 1 100%; order: 1; }
  .admin-caret { order: 0; }
  .admin-tags { order: 2; }
  .admin-sum { order: 3; margin-left: auto; }
  .admin-body { padding: 4px 13px 14px; }
}
.admin-user-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-email { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; flex-wrap: wrap; }
.admin-meta { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.admin-uacts { display: flex; gap: 6px; }
.admin-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.admin-svc { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.admin-svc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.admin-svc-name { font-size: 13px; font-weight: 700; }
.admin-svc-state { display: flex; gap: 5px; }
.admin-svc-acts { display: flex; flex-wrap: wrap; gap: 5px; }

/* ══ 관리자 현황 탭 (2026-08-17 사장님 지시) ══ */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.atab {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--sub); padding: 9px 14px; margin-bottom: -1px;
}
.atab:hover { color: var(--ink); }
.atab.on { color: var(--accent-bright); border-bottom-color: var(--accent); }

.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.dcard.warn { border-color: rgba(224, 163, 78, 0.45); background: rgba(224, 163, 78, 0.07); }
.dcard-label { font-size: 12px; color: var(--sub); font-weight: 600; }
.dcard-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 5px; }
.dcard.warn .dcard-value { color: var(--amber); }
.dcard-sub { font-size: 11.5px; color: var(--sub); margin-top: 4px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dash-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-title { font-size: 14px; font-weight: 700; }
.dash-note { font-size: 11.5px; color: var(--sub); display: flex; gap: 5px; align-items: center; }
.dash-empty { font-size: 12.5px; color: var(--sub); margin: 6px 0; }

.srow { display: grid; grid-template-columns: 116px 1fr 62px; gap: 10px; align-items: center; padding: 6px 0; }
.srow-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow-bar { height: 7px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.srow-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.srow-num { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.srow-sub { grid-column: 2 / -1; font-size: 11px; color: var(--sub); margin-top: -2px; }

.trend { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.tbar { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.tbar:hover { opacity: 1; }
.tbar.zero { background: var(--line); }
.trend-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); margin-top: 7px; }

.urow {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 62px 84px 92px 104px 74px;
  gap: 10px; align-items: center; padding: 8px 2px;
  font-size: 12.5px; border-bottom: 1px solid var(--line);
}
.urow:last-child { border-bottom: 0; }
.urow.head { font-size: 11px; color: var(--sub); font-weight: 700; border-bottom: 1px solid var(--line); }
.urow.off { opacity: .55; }
.u-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.u-dim { color: var(--sub); font-size: 11.5px; }
.u-use { font-variant-numeric: tabular-nums; }
.u-bal { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-bal.low { color: var(--amber); }
/* 월 한도 소진 표시 (2026-08-17 한도제 ON) */
.srow-over { color: var(--amber); font-weight: 700; }
.u-over {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: #2a1a05; background: var(--amber);
}

@media (max-width: 900px) {
  .dash-cards { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .urow { grid-template-columns: minmax(0, 1fr) 56px 88px 68px; }
  .urow > :nth-child(3), .urow > :nth-child(4) { display: none; }   /* 가입·마지막로그인은 좁은 화면에서 감춘다 */
}

/* ── 회원 내역 (토큰 사용·부여 이력) 2026-08-17 ── */
.admin-hist { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.hist-sum { cursor: pointer; font-size: 12.5px; color: var(--sub); font-weight: 600; list-style: none; }
.hist-sum::-webkit-details-marker { display: none; }
.hist-sum::before { content: '▸ '; }
.admin-hist[open] .hist-sum::before { content: '▾ '; }
.hist-sum:hover { color: var(--ink); }
.hist-rows { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.hist-row {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: baseline;
  padding: 5px 2px; font-size: 12px; border-bottom: 1px solid var(--line);
}
.hist-row:last-child { border-bottom: 0; }
.hist-at { color: var(--sub); font-variant-numeric: tabular-nums; }
.hist-what { font-weight: 600; }
.hist-row.use .hist-what { color: var(--amber); font-weight: 700; }
.hist-svc { color: var(--sub); font-size: 11.5px; text-align: right; }
@media (max-width: 560px) {
  .hist-row { grid-template-columns: 62px 1fr; }
  .hist-svc { grid-column: 2; text-align: left; }
}

/* ── 저장해야 적용되는 이용권 변경 (2026-08-17 사장님 지시) ── */
.admin-svc.pending { border-color: var(--accent-line); background: var(--accent-soft); }
.pend-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0 0 8px; padding: 5px 6px 5px 9px; border-radius: 7px;
  background: rgba(47, 169, 140, 0.16); border: 1px dashed var(--accent-line);
}
.pend-chip.rv { background: rgba(179, 69, 63, 0.16); border-color: rgba(179, 69, 63, 0.5); }
.pend-text { font-size: 11.5px; font-weight: 700; color: var(--accent-bright); }
.pend-chip.rv .pend-text { color: #e08b86; }
.pend-x {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--sub); font-size: 11px; line-height: 1; padding: 3px 4px; border-radius: 5px;
}
.pend-x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }

/* 저장 막대 — 대기 중인 변경이 있을 때만 아래에 뜬다 */
.save-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 130%);
  z-index: 70; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  width: min(680px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--accent-line); border-radius: 14px;
  padding: 13px 16px; box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.85);
  transition: transform .22s ease, opacity .22s ease; opacity: 0; pointer-events: none;
}
.save-bar.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sb-info { flex: 1 1 220px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.sb-acts { display: flex; gap: 8px; flex: none; }
body.has-pending { padding-bottom: 96px; }   /* 막대가 마지막 회원을 가리지 않게 */

@media (max-width: 560px) {
  .save-bar { bottom: 10px; padding: 12px 14px; gap: 10px; }
  .sb-info { flex-basis: 100%; font-size: 12.5px; }
  .sb-acts { width: 100%; }
  .sb-acts .btn { flex: 1; }
}
.mini {
  font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 7px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--sub);
}
.mini:hover { color: var(--ink); border-color: var(--accent-line); }
.mini.on { color: var(--accent-bright); border-color: var(--accent-line); }
.mini.on:hover { background: var(--accent); color: #04110d; }
.mini.danger:hover { background: #b3453f; color: #fff; border-color: #b3453f; }
@media (max-width: 860px) { .admin-svcs { grid-template-columns: 1fr; } }

/* ---------- 푸터 ---------- */
.footer { border-top: 1px solid var(--line); padding: 32px 0 48px; margin-top: 40px; }
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-note { font-size: 13px; color: var(--sub); }
.footer-note a { color: var(--accent-bright); }
.footer-biz { margin-top: 14px; font-size: 12px; color: #6b7688; line-height: 1.6; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  /* 모바일: 로고 + [강의][쇼핑] 탭 + ☰ (나머지 메뉴·로그인은 ☰ 안) */
  .nav { display: flex; gap: 7px; margin-left: auto; }
  .nav-scroll { display: none; }
  #nav-login { display: none; }   /* 로그인은 ☰ 메뉴 안 */
  .nav-dest { padding: 6px 11px; font-size: 12.5px; }
  .menu-btn { display: block; margin-left: 0; }
  .topbar-in { gap: 8px; }
  #live-chip { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .stack { height: 340px; max-width: 480px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cards { grid-template-columns: 1fr; }
  .console-row { grid-template-columns: 14px 1fr auto; }
  .console-role { display: none; }
  .archive-row { grid-template-columns: 1fr auto; grid-auto-flow: dense; }
  .archive-desc { grid-column: 1 / -1; }
  .hero { padding: 64px 0 44px; }
  .hero-title { font-size: 31px; }
  .hero-sub { font-size: 14px; margin-bottom: 28px; }
  .edu-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
}

@media (max-width: 560px) {
  .hero-title { font-size: 22px; line-height: 1.25; }
  .sec-title { font-size: 19px; }
  .card-name { font-size: 16px; }
  body { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- 라이브 아래 구획 가리기 (2026-08-16 사장님 지시) ----------
   첫 두 장만 남기고 나머지는 흐린다. 무엇이 있는지는 보여야 가입할 마음이 생기므로
   완전히 지우지 않는다. 흐린 것은 눌리지도 긁히지도 않게 막는다. */
.gt-lock, .gt-lock-sec {
  filter: blur(7px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.gt-lock-sec { filter: blur(8px); opacity: 0.42; }   /* 구획째 잠기면 제목까지 흐려진다 */
/* 흐린 자리에는 키보드(Tab)로도 못 들어간다 */
.gt-lock a, .gt-lock button, .gt-lock-sec a, .gt-lock-sec button { pointer-events: none; }

.gate-cta { padding: 6px 0 26px; }
.gate-cta-in {
  border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: 18px;
  padding: 30px 28px;
  text-align: center;
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.75);
}
.gate-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.gate-desc {
  margin: 0 auto 18px; max-width: 46ch;
  color: var(--sub); font-size: 13.5px; line-height: 1.6; text-wrap: pretty;
}
.gate-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .gate-cta-in { padding: 24px 18px; border-radius: 16px; }
  .gate-title { font-size: 17px; }
  .gate-acts { flex-direction: column; }
  .gate-acts .btn { width: 100%; }
}

/* ── 마진 관리 탭 (2026-08-19 사장님 지시) — 숫자를 읽고 고치는 화면이라 표가 주인공이다 ── */
.mg-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mg-chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.mg-chip b { font-variant-numeric: tabular-nums; }
.mg-chip.ok { border-color: var(--accent-line); }
.mg-chip.bad { border-color: #b3452f; color: #e0765c; }
.mg-chip.dim { color: var(--sub); }
.mg-warn { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid #b3452f; background: rgba(179, 69, 47, .12); font-size: 13px; }
.mg-scroll { overflow-x: auto; }
.mg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mg-table th, .mg-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.mg-table th { font-size: 11px; letter-spacing: .04em; color: var(--sub); font-weight: 700; }
.mg-table tbody tr:hover { background: var(--panel); }
.mg-unit { display: block; font-size: 11px; color: var(--sub); }
.mg-api { max-width: 260px; white-space: normal; color: var(--sub); font-size: 12px; }
.mg-num { font-variant-numeric: tabular-nums; text-align: right; }
.mg-num.ok { color: var(--accent-bright); font-weight: 700; }
.mg-num.bad { color: #e0765c; font-weight: 700; }
.mg-in { width: 92px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; }
.mg-in.sm { width: 68px; }
.mg-rec { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--accent-line);
  background: transparent; color: var(--accent-bright); font-size: 12px; cursor: pointer; }
.mg-rec:hover { background: var(--accent-soft); }
.mg-credit { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.mg-sub { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.mg-crow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; }
.mg-crow label, .mg-rates label { display: inline-flex; align-items: center; gap: 6px; }
.mg-rates { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--sub); }
.mg-hint { font-size: 11px; color: var(--sub); }
.mg-toggle { font-weight: 700; }
.mg-actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
.mg-note { font-size: 12px; color: var(--sub); }

/* ── 패널 하단 닫기 줄 (2026-08-19 사장님 지적: 열람 후 끝내기가 없다) ──
 * 내용이 길어도 항상 손 닿는 곳에 닫기를 둔다. 패널 자체도 넘치면 스크롤되게 한다. */
.auth-modal { overflow-y: auto; }
.auth-modal-in { max-height: calc(100vh - 40px); overflow-y: auto; }
.panel-endbar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; justify-content: center;
  margin: 16px -28px -30px; 
  padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--panel) 58%, transparent);
}
.panel-end-close {
  padding: 12px 30px; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  background: var(--ink); color: var(--panel); border: none;
}
.panel-end-close:hover { opacity: 0.88; }
.panel-end-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }


/* 릴스 3칸 — 인스타식 세로 타일 (2026-09-29 사장님 지시: 파노라마 위).
   영상은 피지컬AI(physicalai.yachtcamp.net) 파일을 그대로 가리킨다 — 11MB 짜리를 두 벌 두지 않는다.
   소리: 브라우저가 자동재생 때 소리를 막는다. 음소거로 틀고 스피커를 눌러 켠다. */
.reels3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px;max-width:560px}
.reel-t{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;display:block;border:1px solid rgb(255 255 255/.08)}
.reel-t video{width:100%;height:100%;object-fit:cover;display:block}
.reel-t .shade{position:absolute;inset:0;background:linear-gradient(transparent 48%,rgb(0 0 0/.8));pointer-events:none}
.reel-t .cap{position:absolute;left:10px;right:10px;bottom:9px;color:#fff;font-weight:700;font-size:12px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;pointer-events:none;text-shadow:0 1px 4px rgb(0 0 0/.65)}
.reel-t .tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;
  background:rgb(0 0 0/.55);color:#fff;pointer-events:none;font-variant-numeric:tabular-nums}
.reel-t .tag.new{background:#ff5a1f;color:#fff}
.reel-t .snd{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;
  background:rgb(0 0 0/.5);color:#fff;font-size:13px;line-height:30px;text-align:center;cursor:pointer}
.reel-t .snd:hover{background:rgb(0 0 0/.78)}
@media(max-width:700px){.reels3{gap:8px;max-width:none}.reel-t{border-radius:11px}.reel-t .cap{font-size:11px;left:8px;right:8px}}
.reel-big{position:fixed;inset:0;z-index:2000;background:rgb(0 0 0/.93);display:flex;align-items:center;justify-content:center;padding:18px}
.reel-big video{max-width:min(100%,520px);max-height:100%;border-radius:14px;background:#000}
.reel-big .x{position:absolute;top:14px;right:16px;width:42px;height:42px;border:0;border-radius:50%;background:rgb(255 255 255/.15);color:#fff;font-size:20px;cursor:pointer}
.reel-big .go{position:absolute;left:0;right:0;bottom:22px;text-align:center}
.reel-big .go a{display:inline-block;padding:11px 20px;border-radius:999px;background:#ff5a1f;color:#fff;font-weight:800;font-size:14px;text-decoration:none}