/* goblub 공용 스타일 — 리퀴드 글래스 (라이트 · 유리 질감 · 쨍한 그라데이션 포인트) */
@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap");

:root {
  --coral: #ff5a76;   /* 체리 레드-핑크 */
  --yellow: #f5a623;  /* 앰버 */
  --mint: #35c98a;    /* 프레시 그린 */
  --sky: #3a8bff;     /* 글로시 블루 */
  --purple: #8f5bff;  /* 바이올렛 */
  --orange: #ff8a3d;  /* 소프트 오렌지 */
  --cream: rgba(255, 255, 255, 0.48);  /* 칩/타일 표면(유리) */
  --surface: rgba(255, 255, 255, 0.34); /* 패널 표면(유리) */
  --line: rgba(122, 134, 195, 0.30);   /* 테두리 */
  --ink: #2b3057;     /* 본문 글자(딥 네이비) */
  --ink-soft: #7079a8;/* 보조 글자 */
  --card-radius: 24px;
  --shadow: 0 20px 40px rgba(96, 106, 155, 0.22);
  /* 두꺼운 유리 단면: 위 얇은 림 라이트 + 아래·좌우 두툼한 유리 글린트 */
  --glass-hi:
    inset 0 2px 2px rgba(255, 255, 255, 1),
    inset 0 -9px 14px rgba(255, 255, 255, 0.65),
    inset 4px 0 8px rgba(255, 255, 255, 0.35),
    inset -4px 0 8px rgba(255, 255, 255, 0.35);
}

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

body {
  background:
    radial-gradient(700px 420px at 10% -4%, rgba(255, 110, 145, 0.16), transparent 58%),
    radial-gradient(820px 480px at 92% 6%, rgba(70, 135, 255, 0.16), transparent 58%),
    radial-gradient(600px 420px at 30% 55%, rgba(255, 190, 90, 0.10), transparent 60%),
    radial-gradient(760px 540px at 72% 100%, rgba(150, 96, 255, 0.14), transparent 62%),
    linear-gradient(180deg, #f7f8fc 0%, #f0f2f9 55%, #edf0f8 100%) fixed;
  color: var(--ink);
  font-family: "Jua", "Malgun Gothic", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* 헤더 */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 헤더 중앙 히어로 문구(홈) */
.hero-inline {
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: 2rem;
  color: var(--ink);
  letter-spacing: 1px;
}
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; }
  .hero-inline { order: 3; width: 100%; text-align: center; margin-top: 6px; font-size: 1.6rem; }
}

.logo {
  font-size: 1.9rem;
  letter-spacing: 2px;
  font-family: "Black Han Sans", "Jua", sans-serif;
}

/* 이미지 로고 — 홈(GOBLUB)·서브(HOME) 같은 규격, 같은 자리 */
.logo .logo-img { height: 45px; width: auto; display: block; }

.logo span { text-shadow: 0 1px 2px rgba(90, 100, 170, 0.25); }
.logo .l1 { color: #ff4d6e; }
.logo .l2 { color: #f5a623; }
.logo .l3 { color: #2f9df0; }
.logo .l4 { color: #8f5bff; }
.logo .l5 { color: #ff8a3d; }
.logo .l6 { color: #ff4d6e; }

.site-nav a {
  margin-left: 18px;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.site-nav a:hover {
  color: var(--sky);
}

/* 본문 공통 */
main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 48px;
}

.hero {
  text-align: center;
  padding: 36px 0 28px;
}

.hero h1 {
  font-family: "Black Han Sans", "Jua", sans-serif;
  font-size: 2.4rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}

.hero p {
  color: var(--ink-soft);
  font-size: 1.15rem;
}

/* 홈 히어로 밴드 — 헤더 문구와 카드 사이 여백 + 유리 구슬 장식 */
.hero-band {
  text-align: center;
  padding: 30px 0 36px;
  margin-bottom: 8px;
}
.hero-band .retro-sun {
  width: 170px;
  height: 170px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, #ffd1dc 0%, #ffb1c8 26%, #c9b6ff 58%, #9ec8ff 100%);
  box-shadow:
    0 24px 46px rgba(140, 120, 230, 0.30),
    inset 0 2px 6px rgba(255, 255, 255, 0.9),
    inset 0 -14px 26px rgba(130, 110, 220, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.hero-band .hero-sub {
  color: var(--ink-soft);
  font-size: 1.12rem;
}
@media (max-width: 480px) {
  .hero-band { padding: 20px 0 26px; }
  .hero-band .retro-sun { width: 130px; height: 130px; }
  .hero-band .hero-sub { font-size: 1rem; }
}

/* 카드 그리드 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ===== 두꺼운 유리판 공통 레시피 =====
   바깥 9px 유리 베젤(border 영역에 프리즘 그라데이션) + 안쪽 내용판(padding-box)
   + ::after 로 안쪽 판 경계선/하이라이트 — 참고: 리퀴드 글래스 UI 킷 */
.card, .panel, .app-card {
  border: 9px solid transparent;
  border-radius: var(--card-radius);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34) 55%, rgba(255, 255, 255, 0.5)) padding-box,
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.98) 0%, rgba(212, 221, 255, 0.62) 28%,
      rgba(255, 255, 255, 0.45) 50%, rgba(255, 219, 233, 0.58) 72%,
      rgba(255, 255, 255, 0.95) 100%) border-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 22px 38px rgba(96, 106, 155, 0.26),
    0 3px 8px rgba(96, 106, 155, 0.14);
  position: relative;
}
/* 안쪽 내용판: 경계 헤어라인 + 상단 하이라이트 + 아래 유리 글린트 */
.card::after, .panel::after, .app-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--card-radius) - 9px);
  box-shadow:
    0 0 0 1px rgba(150, 160, 205, 0.22),
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.card > *, .panel > *, .app-card > * { position: relative; z-index: 1; }

.card {
  --nc: var(--purple);
  padding: 22px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.card:hover,
.card[data-href]:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 26px 48px color-mix(in srgb, var(--nc) 24%, rgba(88, 99, 172, 0.2)),
    0 3px 8px rgba(96, 106, 155, 0.14);
}

.card .icon {
  font-size: 2.6rem;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--nc) 38%, transparent));
}

.card h2 {
  font-size: 1.3rem;
  margin-bottom: 6px;
  color: var(--ink);
}

.card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* 틴트 = 카드별 포인트 컬러 */
.card.tint-coral { --nc: var(--coral); }
.card.tint-yellow { --nc: var(--yellow); }
.card.tint-mint { --nc: var(--mint); }
.card.tint-sky { --nc: var(--sky); }
.card.tint-purple { --nc: var(--purple); }

/* 허브 카드: 왼쪽 소개 + 오른쪽 콘텐츠 바로가기 리스트 */
.card[data-href] { cursor: pointer; }
.card.hub { display: flex; gap: 16px; align-items: stretch; }
.card.hub .left { flex: 1 1 52%; min-width: 0; }
.card.hub .sub {
  flex: 0 0 42%;
  border-left: 1.5px dashed color-mix(in srgb, var(--nc) 40%, transparent);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.card.hub .sub a {
  font-size: 0.86rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.hub .sub a:hover { color: color-mix(in srgb, var(--nc) 75%, var(--ink)); }
/* .whole: 리스트는 미리보기만 — 카드 어디를 눌러도 data-href 허브로 이동 */
.card.hub.whole .sub a { pointer-events: none; }
@media (max-width: 420px) {
  .card.hub { flex-direction: column; gap: 12px; }
  .card.hub .sub { flex-basis: auto; border-left: none; padding-left: 0;
    border-top: 1.5px dashed color-mix(in srgb, var(--nc) 40%, transparent); padding-top: 12px; }
}

/* 준비 중 카드 */
.card.soon {
  opacity: 0.6;
  cursor: default;
}

/* 빈 슬롯 카드(다음 콘텐츠 예고) */
.card.empty-slot {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  border: 2px dashed var(--line);
  color: var(--ink-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card.empty-slot::after { display: none; }

.badge-soon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(180deg, #ff7d92, var(--coral));
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(255, 90, 118, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* 앱 카드 */
.app-card {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.app-card .app-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
}

.app-card .app-info {
  flex: 1;
}

.app-card h2 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.app-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.btn-download {
  background: linear-gradient(180deg, #6fa9ff 0%, var(--sky) 55%, #2f7ae8 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(58, 139, 255, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.6);
}

.btn-download:disabled {
  background: #c9cfe6;
  color: #8b92b8;
  box-shadow: none;
  cursor: default;
}

/* 카드 그리드 안의 다운로드 버튼 */
.card .btn-download {
  margin-top: 16px;
  align-self: flex-start;
}

/* 푸터 */
.site-footer {
  text-align: center;
  padding: 22px;
  color: #9aa1c6;
  font-size: 0.9rem;
}

/* ===== 콘텐츠 페이지 공용 (사주·퀴즈) ===== */
.panel {
  padding: 20px 16px;
  max-width: 620px;
  margin: 0 auto 20px;
}

.panel h2 { margin-bottom: 14px; font-size: 1.25rem; color: var(--ink); }

.field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.field-row label { align-self: center; color: var(--ink-soft); }

select, input[type="number"], input[type="text"] {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(90, 100, 170, 0.08);
}

select:focus, input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(58, 139, 255, 0.18);
}

.btn-primary {
  background: linear-gradient(180deg, #ff92a6 0%, var(--coral) 48%, #ef3057 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 1.05rem;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(150, 20, 50, 0.35);
  box-shadow:
    0 14px 26px rgba(255, 90, 118, 0.38),
    inset 0 3px 5px rgba(255, 255, 255, 0.75),
    inset 0 -7px 12px rgba(160, 20, 55, 0.35);
}

.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow:
    0 10px 20px rgba(96, 106, 155, 0.18),
    inset 0 2px 2px rgba(255, 255, 255, 1),
    inset 0 -5px 9px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  color: var(--sky);
  border-color: rgba(58, 139, 255, 0.5);
}

.error-msg { color: #e83e64; margin-top: 8px; display: none; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
  margin: 18px 0;
}

.pillar {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  padding: 14px 6px;
  box-shadow: 0 6px 14px rgba(88, 99, 172, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pillar .hanja { font-size: 1.7rem; display: block; color: var(--ink); }
.pillar .hangul { color: var(--ink-soft); font-size: 0.9rem; }
.pillar .role { font-size: 0.78rem; color: var(--ink-soft); display: block; margin-bottom: 6px; }

.oheng-bars { margin: 14px 0; }
.oheng-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.oheng-row .name { width: 3.2em; }
.oheng-row .bar { height: 14px; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.oheng-row .cnt { color: var(--ink-soft); font-size: 0.9rem; }
.oheng-목 { background: var(--mint); }
.oheng-화 { background: var(--coral); }
.oheng-토 { background: var(--yellow); }
.oheng-금 { background: #9aa2c4; }
.oheng-수 { background: var(--sky); }

.fine-print { text-align: center; color: #9aa1c6; font-size: 0.85rem; margin-top: 18px; }

/* 퀴즈 */
.progress-track { background: rgba(140, 150, 210, 0.18); border-radius: 999px; height: 10px; margin-bottom: 20px; box-shadow: inset 0 1px 3px rgba(90, 100, 170, 0.15); }
.progress-fill { background: linear-gradient(90deg, #5ee0a5, var(--mint)); height: 10px; border-radius: 999px; transition: width 0.2s; box-shadow: 0 2px 8px rgba(53, 201, 138, 0.45); }
.quiz-q { font-size: 1.2rem; margin-bottom: 18px; }
.choice-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--cream);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(88, 99, 172, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.choice-btn:hover { border-color: rgba(58, 139, 255, 0.55); box-shadow: 0 8px 18px rgba(58, 139, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.result-emoji { font-size: 3.2rem; text-align: center; display: block; margin-bottom: 8px; filter: drop-shadow(0 8px 14px rgba(143, 91, 255, 0.35)); }
.result-name { text-align: center; font-size: 1.5rem; margin-bottom: 10px; color: var(--ink); }
.result-desc { color: var(--ink-soft); line-height: 1.6; }
.result-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* 사주 v2 */
.pillar .ss { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.3; }
.opt-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; color: var(--ink-soft); }
.opt-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.daeun-list { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.daeun-item { flex: 0 0 auto; background: var(--cream); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 10px 12px; text-align: center; min-width: 64px; box-shadow: 0 5px 12px rgba(88, 99, 172, 0.10); }
.daeun-item .age { font-size: 0.78rem; color: var(--ink-soft); display: block; }
.daeun-item .gj { font-size: 1.1rem; }
.daeun-item .ss { font-size: 0.72rem; color: var(--ink-soft); display: block; }
.stars { color: var(--yellow); letter-spacing: 2px; }
.tag-list { list-style: none; margin: 6px 0 0; }
.tag-list li { display: inline-block; background: var(--cream); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 6px 12px; margin: 0 6px 6px 0; font-size: 0.92rem; box-shadow: 0 4px 10px rgba(88, 99, 172, 0.10); }

/* 도시 스카이라인(구 다크 테마 장식) — 라이트 글래스에서는 숨김 */
.city-skyline { display: none; }
main, .site-header, .site-footer { position: relative; z-index: 1; }

/* 모바일 */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.9rem; }
  .site-header { padding: 14px 16px; }
  main { padding: 8px 16px 40px; }
  .app-card { flex-wrap: wrap; }
  .pillar .hanja { font-size: 1.3rem; }
}

/* ============================================================
   네오브루탈리즘 테마 (body.nb) — 홈 '고블럽 소굴'과 통일.
   귀곡 라인(사주팔자·명부·부적·명부대조)에는 nb 클래스를 붙이지 않아 제외됨.
   ============================================================ */
body.nb {
  --nb-paper: #f2ecdd;
  --nb-ink: #16131d;
  --nb-yellow: #ffd23e;
  --nb-pink: #ff5aa8;
  --nb-cyan: #45d6e6;
  --nb-lime: #a6e63e;
  --nb-cream: #efe8d6;
  --nb-purple: #b6a4e8;
  background: var(--nb-paper) !important;
  background-image: radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px) !important;
  background-size: 5px 5px !important;
  color: var(--nb-ink);
  font-family: "Jua", "Malgun Gothic", sans-serif;
}

/* 헤더/푸터 */
body.nb .site-header {
  max-width: 1120px; background: var(--nb-paper);
  border-bottom: 4px solid var(--nb-ink);
}
body.nb .logo span { text-shadow: none; -webkit-text-stroke: 1.5px var(--nb-ink); }
body.nb .site-nav a {
  color: var(--nb-ink); font-family: "Jua", sans-serif; font-size: .95rem;
  border: 2.5px solid var(--nb-ink); border-radius: 10px; padding: 4px 12px;
  background: #fff; box-shadow: 3px 3px 0 var(--nb-ink); margin-left: 10px;
  transition: transform .08s, box-shadow .08s;
}
body.nb .site-nav a:hover {
  color: var(--nb-ink); background: var(--nb-yellow);
  transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--nb-ink);
}
body.nb .site-footer {
  max-width: 1120px; margin: 0 auto; border-top: 4px solid var(--nb-ink);
  background: var(--nb-paper); color: var(--nb-ink); font-family: "Jua", sans-serif;
}

/* 히어로(페이지 타이틀) */
body.nb .hero h1 {
  color: var(--nb-ink); text-shadow: 3px 3px 0 var(--nb-yellow); letter-spacing: .01em;
}
body.nb .hero p { color: rgba(22,19,29,.72); }

/* 카드·패널·앱카드: 유리 제거 → 검정 테두리 + 하드 그림자 */
body.nb .card, body.nb .panel, body.nb .app-card {
  border: 3.5px solid var(--nb-ink) !important;
  border-radius: 16px;
  background: #fff !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 6px 6px 0 var(--nb-ink) !important;
}
body.nb .card::after, body.nb .panel::after, body.nb .app-card::after { display: none !important; }
body.nb .card { transition: transform .1s ease, box-shadow .1s ease; }
body.nb a.card:hover, body.nb .card[data-href]:hover {
  transform: translate(-2px,-3px); box-shadow: 9px 10px 0 var(--nb-ink) !important;
}
body.nb .card h2, body.nb .panel h2, body.nb .app-card h2 {
  font-family: "Black Han Sans","Jua",sans-serif; color: var(--nb-ink); letter-spacing: -.01em;
}
body.nb .card p, body.nb .app-card p { color: rgba(22,19,29,.72); }
body.nb .card .icon { filter: none; }

/* 카드 틴트 → 솔리드 파스텔 */
body.nb .card.tint-coral  { background: var(--nb-pink) !important; }
body.nb .card.tint-yellow { background: var(--nb-yellow) !important; }
body.nb .card.tint-mint   { background: var(--nb-lime) !important; }
body.nb .card.tint-sky    { background: var(--nb-cyan) !important; }
body.nb .card.tint-purple { background: var(--nb-purple) !important; }
body.nb .card.tint-coral p, body.nb .card.tint-yellow p,
body.nb .card.tint-mint p, body.nb .card.tint-sky p,
body.nb .card.tint-purple p { color: rgba(22,19,29,.78); }

/* 허브 카드 구분선 */
body.nb .card.hub .sub { border-left: 2.5px dashed var(--nb-ink); }
body.nb .card.hub .sub a { color: rgba(22,19,29,.75); }
body.nb .card.hub .sub a:hover { color: var(--nb-ink); }
@media (max-width: 420px) {
  body.nb .card.hub .sub { border-left: none; border-top: 2.5px dashed var(--nb-ink); }
}

/* 준비중/빈슬롯/배지 */
body.nb .card.empty-slot { background: #fff !important; border: 3px dashed var(--nb-ink) !important;
  box-shadow: none !important; color: rgba(22,19,29,.6); }
body.nb .badge-soon {
  background: var(--nb-ink); color: #fff; box-shadow: none;
  border-radius: 999px; font-family: "Jua",sans-serif;
}

/* 버튼 */
body.nb .btn-primary, body.nb .btn-ghost, body.nb .btn-download, body.nb .choice-btn {
  border: 3px solid var(--nb-ink) !important; border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--nb-ink) !important; text-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: "Jua",sans-serif; transition: transform .08s, box-shadow .08s;
}
body.nb .btn-primary { background: var(--nb-pink) !important; color: var(--nb-ink) !important; }
body.nb .btn-download { background: var(--nb-cyan) !important; color: var(--nb-ink) !important; }
body.nb .btn-ghost { background: #fff !important; color: var(--nb-ink) !important; }
body.nb .btn-primary:hover, body.nb .btn-ghost:hover, body.nb .btn-download:hover {
  filter: none; transform: translate(-1px,-2px); box-shadow: 6px 7px 0 var(--nb-ink) !important;
  color: var(--nb-ink) !important;
}
body.nb .btn-primary:active, body.nb .btn-ghost:active, body.nb .btn-download:active,
body.nb .choice-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--nb-ink) !important; }
body.nb .btn-download:disabled { background: #d9d3c4 !important; color: #8b8677 !important;
  box-shadow: 3px 3px 0 rgba(22,19,29,.35) !important; }

/* 폼 */
body.nb select, body.nb input[type="number"], body.nb input[type="text"],
body.nb input[type="date"], body.nb textarea {
  border: 2.5px solid var(--nb-ink); border-radius: 10px; background: #fff;
  color: var(--nb-ink); box-shadow: inset 0 0 0 rgba(0,0,0,0);
}
body.nb select:focus, body.nb input:focus, body.nb textarea:focus {
  border-color: var(--nb-ink); box-shadow: 3px 3px 0 var(--nb-cyan);
}
body.nb .field-row label, body.nb .opt-row { color: var(--nb-ink); }

/* 퀴즈 */
body.nb .choice-btn { background: var(--nb-cream) !important; color: var(--nb-ink); }
body.nb .choice-btn:hover { background: var(--nb-yellow) !important;
  transform: translate(-1px,-2px); box-shadow: 6px 7px 0 var(--nb-ink) !important; }
body.nb .progress-track { background: #fff; border: 2.5px solid var(--nb-ink); box-shadow: none;
  height: 14px; padding: 0; overflow: hidden; }
body.nb .progress-fill { background: var(--nb-lime); box-shadow: none; border-radius: 0; height: 100%; }

/* 결과·태그·기둥·대운 */
body.nb .result-emoji { filter: none; }
body.nb .result-name { color: var(--nb-ink); font-family: "Black Han Sans","Jua",sans-serif; }
body.nb .result-desc { color: rgba(22,19,29,.78); }
body.nb .pillar, body.nb .daeun-item, body.nb .tag-list li {
  background: var(--nb-cream); border: 2.5px solid var(--nb-ink); box-shadow: 3px 3px 0 var(--nb-ink);
}
body.nb .pillar .hanja, body.nb .pillar .hangul { color: var(--nb-ink); }
body.nb .stars { color: var(--nb-ink); }
body.nb .fine-print { color: rgba(22,19,29,.55); }

/* 모바일: nb 허브 카드도 홈처럼 한 줄 2개 */
@media (max-width: 640px) {
  body.nb .card-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  body.nb .card { padding: 15px 13px 14px; }
  body.nb .card .icon { font-size: 1.9rem; margin-bottom: 8px; }
  body.nb .card h2 { font-size: 1.06rem; }
  body.nb .card p { font-size: .78rem; line-height: 1.45; }
}


/* ============================================================
   파스텔 클레이 테마 (body.clay) — 홈과 통일. 귀곡 라인은 클래스 미부여로 제외.
   ============================================================ */
body.clay {
  --cl-ink: #4a3d68;
  --cl-ink-soft: #7a6b99;
  --cl-lilac: #d9c9f6;
  --cl-mint: #c2ecd3;
  --cl-peach: #ffd9bd;
  --cl-butter: #ffeaa9;
  --cl-sky: #c4e4f8;
  --cl-pink: #f8c9d9;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255, 214, 235, .55), transparent 60%),
    radial-gradient(800px 520px at -10% 30%, rgba(196, 228, 248, .6), transparent 58%),
    radial-gradient(700px 480px at 105% 78%, rgba(255, 226, 200, .5), transparent 60%),
    linear-gradient(165deg, #e7dcfa 0%, #dbe7fb 42%, #fbdfe7 100%) fixed !important;
  color: var(--cl-ink);
  font-family: "Jua", "Malgun Gothic", sans-serif;
}

/* 헤더/푸터: 떠 있는 말랑 알약 */
body.clay .site-header {
  max-width: 1080px; margin: 14px auto 0; padding: 10px 20px;
  background: rgba(255,255,255,.72); border-radius: 999px;
  box-shadow: 0 12px 28px rgba(140,120,200,.18), inset 0 2px 4px rgba(255,255,255,.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  width: calc(100% - 32px);
}
body.clay .logo span { text-shadow: 0 2px 0 rgba(255,255,255,.9); }
body.clay .site-nav a {
  color: var(--cl-ink-soft); font-size: .95rem; margin-left: 8px;
  background: rgba(255,255,255,.85); border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 5px 12px rgba(140,120,200,.16), inset 0 1.5px 0 #fff;
  transition: transform .12s, box-shadow .12s, color .12s;
}
body.clay .site-nav a:hover {
  color: #8a6fd8; transform: translateY(-2px);
  box-shadow: 0 9px 18px rgba(140,120,200,.24), inset 0 1.5px 0 #fff;
}
body.clay .site-footer {
  max-width: 620px; margin: 0 auto 22px; padding: 12px;
  background: rgba(255,255,255,.6); border-radius: 999px; color: var(--cl-ink-soft);
  box-shadow: 0 8px 18px rgba(140,120,200,.12), inset 0 2px 4px rgba(255,255,255,.9);
}

/* 히어로 제목: 보라 버블 글자 */
body.clay .hero h1 {
  background: linear-gradient(180deg, #cdbcf2 0%, #a993e2 55%, #937bd6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(255,255,255,.85)) drop-shadow(0 9px 14px rgba(140,115,210,.3));
  text-shadow: none;
}
/* 이모지는 그라데이션 클립에서 제외 — 안 그러면 색이 지워져 네모(두부)로 보임 */
body.clay .hero h1 .e { -webkit-text-fill-color: initial; color: initial; }
body.clay .hero p { color: var(--cl-ink-soft); }

/* 카드·패널·앱카드: 말랑 클레이 */
body.clay .card, body.clay .panel, body.clay .app-card {
  border: none !important; border-radius: 26px;
  background: linear-gradient(180deg, #ffffff, #f0ecfb) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 16px 30px rgba(140,115,200,.2), inset 0 4px 9px rgba(255,255,255,.95),
    inset 0 -8px 14px rgba(120,90,190,.12) !important;
}
body.clay .card::after, body.clay .panel::after, body.clay .app-card::after { display: none !important; }
body.clay .card { transition: transform .16s ease, box-shadow .16s ease; }
body.clay a.card:hover, body.clay .card[data-href]:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 24px 40px rgba(140,115,200,.28), inset 0 4px 9px rgba(255,255,255,.95),
    inset 0 -8px 14px rgba(120,90,190,.12) !important;
}
body.clay .card h2, body.clay .panel h2, body.clay .app-card h2 { color: var(--cl-ink); }
body.clay .card p, body.clay .app-card p { color: var(--cl-ink-soft); }
body.clay .card .icon { filter: drop-shadow(0 6px 8px rgba(120,90,190,.2)); }
body.clay .card.tint-coral  { background: linear-gradient(180deg, #fcdde8, var(--cl-pink)) !important; }
body.clay .card.tint-yellow { background: linear-gradient(180deg, #fff3c9, var(--cl-butter)) !important; }
body.clay .card.tint-mint   { background: linear-gradient(180deg, #d7f4e3, var(--cl-mint)) !important; }
body.clay .card.tint-sky    { background: linear-gradient(180deg, #ddf0fd, var(--cl-sky)) !important; }
body.clay .card.tint-purple { background: linear-gradient(180deg, #e6dbfa, var(--cl-lilac)) !important; }
body.clay .card.hub .sub { border-left: 2px dashed rgba(150,125,210,.4); }
body.clay .card.hub .sub a { color: var(--cl-ink-soft); }
body.clay .card.hub .sub a:hover { color: #8a6fd8; }
@media (max-width: 420px) {
  body.clay .card.hub .sub { border-left: none; border-top: 2px dashed rgba(150,125,210,.4); }
}
body.clay .card.empty-slot { background: rgba(255,255,255,.45) !important; box-shadow: none !important;
  border: 2px dashed rgba(150,125,210,.4) !important; color: var(--cl-ink-soft); }
body.clay .badge-soon { background: #cbb9f0; color: #4a3d68; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8); }

/* 버튼 */
body.clay .btn-primary, body.clay .btn-ghost, body.clay .btn-download {
  border: none !important; border-radius: 999px !important; text-shadow: none !important;
  font-family: inherit; transition: transform .12s, box-shadow .12s;
}
body.clay .btn-primary { background: linear-gradient(180deg, #b7a2ec, #8f74d8) !important; color: #fff !important;
  box-shadow: 0 12px 24px rgba(130,100,210,.35), inset 0 2px 4px rgba(255,255,255,.55) !important; }
body.clay .btn-download { background: linear-gradient(180deg, #a8d4f5, #7db4e6) !important; color: #274866 !important;
  box-shadow: 0 12px 24px rgba(90,140,210,.3), inset 0 2px 4px rgba(255,255,255,.65) !important; }
body.clay .btn-ghost { background: linear-gradient(180deg, #ffffff, #efeafc) !important; color: var(--cl-ink) !important;
  box-shadow: 0 9px 18px rgba(140,120,200,.2), inset 0 2px 4px rgba(255,255,255,1) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.clay .btn-primary:hover, body.clay .btn-ghost:hover, body.clay .btn-download:hover {
  filter: none; transform: translateY(-3px);
}
body.clay .btn-ghost:hover { color: #8a6fd8; border-color: transparent; }
body.clay .btn-primary:active, body.clay .btn-ghost:active, body.clay .btn-download:active { transform: translateY(1px); }
body.clay .btn-download:disabled { background: #ded9ec !important; color: #a49bc0 !important;
  box-shadow: none !important; transform: none; }

/* 폼 */
body.clay select, body.clay input[type="number"], body.clay input[type="text"],
body.clay input[type="date"], body.clay textarea {
  border: 1.5px solid rgba(160,135,220,.35); border-radius: 14px; background: #fff;
  color: var(--cl-ink); box-shadow: inset 0 2px 5px rgba(140,115,200,.1);
}
body.clay select:focus, body.clay input:focus, body.clay textarea:focus {
  border-color: #a58ae0; box-shadow: 0 0 0 3px rgba(165,138,224,.22);
}
body.clay .field-row label, body.clay .opt-row { color: var(--cl-ink-soft); }

/* 퀴즈 */
body.clay .choice-btn {
  background: linear-gradient(180deg, #ffffff, #f0ecfb); border: none; border-radius: 18px;
  color: var(--cl-ink);
  box-shadow: 0 10px 20px rgba(140,115,200,.16), inset 0 3px 6px rgba(255,255,255,.95),
    inset 0 -6px 10px rgba(120,90,190,.1);
  transition: transform .14s, box-shadow .14s;
}
body.clay .choice-btn:hover {
  background: linear-gradient(180deg, #eee6fd, #ddccf8); border: none; transform: translateY(-3px);
  box-shadow: 0 15px 28px rgba(140,115,200,.24), inset 0 3px 6px rgba(255,255,255,.95);
}
body.clay .progress-track { background: rgba(255,255,255,.75); border: none; height: 12px;
  box-shadow: inset 0 2px 5px rgba(140,115,200,.18); }
body.clay .progress-fill { background: linear-gradient(90deg, #c3aef2, #9d82e0); height: 12px;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(150,120,220,.4); }

/* 결과·기둥·대운·태그 */
body.clay .result-emoji { filter: drop-shadow(0 8px 12px rgba(140,110,220,.3)); }
body.clay .result-name { color: var(--cl-ink); }
body.clay .result-desc { color: var(--cl-ink-soft); }
body.clay .pillar, body.clay .daeun-item, body.clay .tag-list li {
  background: linear-gradient(180deg, #ffffff, #f0ecfb); border: none;
  box-shadow: 0 8px 16px rgba(140,115,200,.16), inset 0 2px 5px rgba(255,255,255,.95);
}
body.clay .pillar .hanja, body.clay .pillar .hangul { color: var(--cl-ink); }
body.clay .stars { color: #e8b64c; }
body.clay .fine-print { color: #a79cc4; }

/* 모바일: 카드 한 줄 2개 */
@media (max-width: 640px) {
  body.clay .card-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  body.clay .card { padding: 15px 13px 14px; border-radius: 22px; }
  body.clay .card .icon { font-size: 1.9rem; margin-bottom: 8px; }
  body.clay .card h2 { font-size: 1.06rem; }
  body.clay .card p { font-size: .78rem; line-height: 1.45; }
}