:root {
  --bg: #0a0b0d;
  --surface: #131519;
  --surface-2: #1a1d22;
  --surface-3: #1f2228;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --gold: #cea23c;
  --gold-bright: #f0cf7a;
  --gold-dim: #8a6f2f;
  --text: #f2efe6;
  --text-muted: #9aa0ab;
  --text-faint: #5f6570;
  --radius: 14px;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'PretendardVariable', 'Pretendard', -apple-system, sans-serif;
  --danger: #e85d5d;
  --success: #8fe3a3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(206, 162, 60, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(93, 126, 224, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

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

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 11, 13, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.logo-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: contain;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-btn {
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: none;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}

.nav-btn:hover {
  border-color: var(--gold-dim);
  color: var(--text);
  background: rgba(255,255,255,0.03);
}

.nav-btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #161207;
  border: none;
}

.nav-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(206,162,60,0.28);
}
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 40px 36px;
  position: relative;
  animation: modalIn .25s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.modal-close:hover {
  background: var(--surface-3);
}

.modal h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.modal .modal-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}

.form-input:focus {
  border-color: var(--gold-dim);
}

.form-input::placeholder {
  color: var(--text-faint);
}

.form-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #161207;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .2s, box-shadow .2s;
}

.form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(206,162,60,0.25);
}

.form-btn:disabled {
  color: var(--text-faint);
  background: var(--surface-3);
  border: 1px solid var(--border);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity: .72;
}

.form-msg {
  text-align: center;
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
}

.form-msg.ok { color: var(--success); }
.form-msg.error { color: var(--danger); }

.signup-requirements {
  margin: 9px 2px 0;
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
}

.signup-requirements.ready {
  color: var(--success);
}

.form-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 20px;
}

.form-switch a {
  color: var(--gold-bright);
  font-weight: 600;
  cursor: pointer;
}

.form-switch a:hover {
  text-decoration: underline;
}
.user-bar {
  display: none;
  align-items: center;
  gap: 10px;
}

.user-bar.active {
  display: flex;
}

.user-name {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.user-bar .nav-btn {
  font-size: 12px;
  padding: 7px 14px;
}
.page-hero {
  padding: 80px 0 50px;
  text-align: center;
}

.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  padding: 6px 12px;
  border: 1px solid rgba(206, 162, 60, 0.35);
  border-radius: 999px;
  background: rgba(206, 162, 60, 0.06);
  margin-bottom: 18px;
}

.page-hero .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-bright);
}

.page-hero h1 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.page-hero h1 .accent {
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-hero p {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.products-section {
  padding: 0 0 80px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.prod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}

.prod-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
}

.prod-visual {
  height: 260px;
  background: radial-gradient(circle at 30% 20%, rgba(206,162,60,0.12), transparent 55%),
              linear-gradient(165deg, var(--surface-2), var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.prod-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-visual .prod-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 13px;
  font-family: var(--mono);
}

.prod-visual .prod-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--gold-dim);
}

.prod-body {
  padding: 28px 24px 24px;
}

.prod-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.prod-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.6;
}

.prod-stock {
  width: fit-content;
  margin: 12px 0 4px;
  padding: 5px 10px;
  border: 1px solid rgba(143, 227, 163, .25);
  border-radius: 999px;
  color: var(--success);
  background: rgba(143, 227, 163, .08);
  font-family: var(--mono);
  font-size: 11px;
}

.prod-stock.sold-out {
  color: var(--danger);
  border-color: rgba(242, 163, 163, .28);
  background: rgba(242, 163, 163, .08);
}

.prod-cta:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.prod-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.prod-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.prod-option-name {
  font-size: 13.5px;
  font-weight: 600;
}

.prod-option-price {
  font-size: 13.5px;
  font-family: var(--mono);
  color: var(--gold-bright);
}

.prod-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #161207;
  transition: transform .2s, box-shadow .2s;
  border: none;
  cursor: pointer;
}

.prod-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(206,162,60,0.25);
}
.main-cta {
  padding: 0 0 80px;
}

.cta-box {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 300px at 30% 0%, rgba(206,162,60,0.15), transparent 70%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 60px 48px;
  text-align: center;
}

.cta-box h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.cta-box p {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 28px;
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #161207;
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(206,162,60,0.25);
}

.btn-secondary {
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: border-color .2s, background .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  border-color: var(--gold-dim);
  background: rgba(255,255,255,0.03);
}
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

.footer-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer-desc {
  font-size: 13.5px;
  color: var(--text-faint);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: 10px;
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding: 50px 0 30px;
  }

  .page-hero h1 {
    font-size: 30px;
  }

  .modal {
    margin: 16px;
    padding: 32px 24px;
  }

  .cta-box {
    padding: 40px 24px;
  }

  .cta-btns {
    flex-direction: column;
  }

  .cta-btns a {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .wrap {
    padding: 0 18px;
  }

  .page-hero h1 {
    font-size: 26px;
  }
}
.badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
}

.badge-btn:hover {
  background: var(--surface-3);
  border-color: var(--gold-dim);
  color: var(--gold-bright);
}

.badge-count {
  background: var(--gold);
  color: #0b0c10;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.badge-count.unread {
  background: #e85d5d;
  color: #fff;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.notices-section {
  padding: 40px 0 60px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.section-head h2 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.section-head p {
  color: var(--text-muted);
  font-size: 13.5px;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  cursor: pointer;
  transition: all .2s ease;
}

.notice-card:hover {
  border-color: var(--gold-dim);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.notice-card.pinned {
  border-color: rgba(206, 162, 60, 0.4);
  background: linear-gradient(180deg, rgba(206, 162, 60, 0.05) 0%, var(--surface) 100%);
}

.notice-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.notice-badge-pin {
  background: var(--gold);
  color: #0b0c10;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.notice-badge-normal {
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.notice-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}

.notice-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.notice-body {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-line;
  display: none;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.notice-card.open .notice-body {
  display: block;
}
.prod-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 22px;
  background: var(--surface-2);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.prod-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}

.prod-option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.prod-option-name {
  color: var(--text-muted);
}

.prod-option-price {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--gold-bright);
}
.msg-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  padding-right: 4px;
}

.msg-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all .2s ease;
}

.msg-item.unread {
  border-color: var(--gold);
  background: rgba(206, 162, 60, 0.04);
}

.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.msg-sender {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--gold);
  font-weight: 600;
}

.msg-time {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--mono);
}

.msg-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.msg-content {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-line;
}

.msg-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-faint);
  font-size: 13.5px;
}
.order-prod-info {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}

.order-prod-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.order-prod-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}
#authModal .modal {
  max-width: 580px;
  max-height: 88vh;
  overflow-y: auto;
}

.req {
  color: #e85d5d;
  font-weight: bold;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-with-btn {
  display: flex;
  gap: 8px;
}

.input-with-btn input {
  flex: 1;
}

.btn-check {
  padding: 0 16px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}

.btn-check:hover {
  background: rgba(206, 162, 60, 0.15);
  border-color: var(--gold);
}

.field-hint {
  font-size: 12px;
  margin-top: 5px;
  min-height: 16px;
}
.field-hint.ok { color: #8fe3a3; }
.field-hint.error { color: #f2a3a3; }

.rrn-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rrn-sep {
  color: var(--text-faint);
  font-weight: bold;
  font-size: 16px;
}

.rrn-front, .rrn-back {
  flex: 1;
  text-align: center;
  letter-spacing: 2px;
  font-family: var(--mono);
}
.photo-upload-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.photo-preview-box {
  width: 90px;
  height: 115px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  flex-shrink: 0;
}

.photo-preview-box span {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.3;
  padding: 4px;
}

.photo-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-upload {
  padding: 8px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all .2s ease;
  width: fit-content;
}

.btn-upload:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.photo-filename {
  font-size: 11.5px;
  color: var(--text-muted);
}
.stamp-section {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(206, 162, 60, .22);
  background:
    linear-gradient(145deg, rgba(206, 162, 60, .08), transparent 52%),
    var(--surface-2);
}

.stamp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.stamp-section-head label {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.stamp-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.stamp-required-badge {
  flex-shrink: 0;
  padding: 5px 9px;
  border: 1px solid rgba(206, 162, 60, .34);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(206, 162, 60, .1);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

.stamp-options-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.stamp-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.stamp-pill {
  position: relative;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.stamp-pill:hover {
  color: var(--text);
  border-color: rgba(206, 162, 60, .55);
  transform: translateY(-1px);
}

.stamp-pill.active {
  background: linear-gradient(135deg, rgba(247, 211, 116, .22), rgba(206, 162, 60, .1));
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(247, 211, 116, .12), 0 7px 20px rgba(0, 0, 0, .18);
}

.stamp-pill.active::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--gold-bright);
  font-size: 10px;
}

.stamp-pill-none.active {
  color: var(--text);
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
}

.custom-stamp-upload {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(206, 162, 60, .2);
  border-radius: 12px;
  background: rgba(0, 0, 0, .18);
}

.custom-stamp-upload[hidden] {
  display: none;
}

.custom-stamp-preview {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed rgba(206, 162, 60, .42);
  border-radius: 50%;
  background: var(--surface-3);
  text-align: center;
}

.custom-stamp-preview span {
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
}

.custom-stamp-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.custom-stamp-action {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.custom-stamp-action strong {
  color: var(--text);
  font-size: 13px;
}

.custom-stamp-action > span:not(.photo-filename) {
  color: var(--text-muted);
  font-size: 11.5px;
}

@media (max-width: 560px) {
  .stamp-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-stamp-upload {
    grid-template-columns: 74px 1fr;
    gap: 12px;
  }

  .custom-stamp-preview {
    width: 74px;
    height: 74px;
  }
}

[hidden] { display: none !important; }
.form-group { display:block; margin-block:16px; }
#challengeWidget { margin-top:18px; }
#profileData dt { margin-top:16px; color:var(--text-muted,#aaa); }
#profileData dd { margin:4px 0; overflow-wrap:anywhere; }
.form-btn:disabled { opacity:.5; cursor:wait; }
:focus-visible { outline:2px solid #e7bd6d; outline-offset:4px; }
#authModal{padding:24px;background:rgba(3,5,8,.82);overflow-y:auto}
#authModal .modal{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:38px;border-color:#514431;box-shadow:0 30px 100px #0008;background:linear-gradient(145deg,#1d1e21,#101215 60%);scrollbar-width:thin;scrollbar-color:#655336 #151619}
#authModal.signup-mode .modal{max-width:720px}
.auth-eyebrow{color:#d2af6c;font-size:10px;font-weight:700;letter-spacing:.23em;margin-bottom:16px}
#authModal h2{font-size:28px;letter-spacing:-.045em;line-height:1.3;padding-right:18px}
.signup-intro{color:#bbb9b3;font-size:14px;line-height:1.8;margin-top:12px}
.signup-summary{display:flex;gap:18px;margin:24px 0 30px;padding:15px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;font-size:12px;color:#dcc697}
.signup-section{min-width:0;border:0;padding:0;margin:0 0 28px}
.signup-section legend{font-size:17px;font-weight:650;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;padding:0}
.signup-section legend span{font-size:11px;color:#d7b678;letter-spacing:.02em;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid #b8954c3d;background:#b8954c0d}
.section-help{color:#9f9f9e;font-size:12px;line-height:1.7;margin:9px 0 16px}
.signup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#authModal .form-group{font-size:12px;color:#cfceca;font-weight:500;margin:0 0 15px}
#authModal .form-input{display:block;margin-top:8px;min-width:0;background:#0f1114;border-color:#34363c;font-size:16px;padding:13px 14px;border-radius:10px}
#authModal .form-input:focus{border-color:#d7b678;box-shadow:0 0 0 3px #d7b67815}
#authModal .form-input::placeholder{font-size:13px;color:#757873}
.signup-id-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.signup-id-row .btn-check{height:48px;margin-bottom:15px}
#signupForm .field-hint{color:#a5a6a8;line-height:1.7;margin:-5px 0 16px;font-size:11px}
.signup-notice{padding:20px;border:1px solid #bfa36a29;border-radius:14px;background:#bfa36a08;margin-bottom:18px}
.signup-notice strong{font-size:13px;color:#dfc592}
.signup-notice p{font-size:12px;color:#adaeaf;line-height:1.7;margin:7px 0 15px}
.readonly-check{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.7;color:#d7d5d0;cursor:pointer}
.readonly-check input{width:18px;height:18px;margin-top:1px;accent-color:#d2af6c;flex-shrink:0}
#signupForm .form-btn{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-radius:12px}
.auth-switch{text-align:center;color:#aaa;font-size:12px;margin-top:22px}
.auth-switch button{border:0;background:none;color:#e5ca96;font:inherit;font-weight:600;padding:8px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#authMessage{font-size:13px;line-height:1.7;overflow-wrap:anywhere;color:#e9cc94}
#challengeWidget{display:flex;justify-content:center}
@media(max-width:560px){#authModal{padding:12px}#authModal .modal{padding:30px 20px;max-height:calc(100dvh - 24px);border-radius:18px}#authModal h2{font-size:24px}.signup-grid{grid-template-columns:1fr;gap:0}.signup-summary{justify-content:space-between;gap:6px;font-size:10px}.signup-notice{padding:16px}.signup-id-row{gap:8px}.signup-id-row .btn-check{padding:0 12px}}
@media(prefers-reduced-motion:reduce){#authModal .modal{animation:none}#authModal .form-btn{transition:none}}
.portal-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #b79b6045;border-radius:50%;background:#c9a96309;cursor:pointer;transition:background .2s,border-color .2s}
.portal-icon:hover{background:#c9a96320;border-color:#d7bc80}.portal-icon img{display:block}
.page-hero{overflow:hidden;border-bottom:1px solid #bba06925;background:radial-gradient(ellipse at 85% 65%,#b6904014,transparent 55%);padding:90px 0 74px}
.page-hero .wrap{min-height:200px}.page-hero .eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.22em;color:#d1b780}
.hero-dot{width:5px;height:5px;border-radius:50%;background:#d1b780;box-shadow:0 0 14px #d1b78066}
.page-hero h1{max-width:760px;font-size:clamp(32px,4.4vw,56px);line-height:1.18;letter-spacing:-.055em;margin:23px 0 18px;font-weight:650}
.page-hero #heroSub{max-width:590px;font-size:14px;line-height:1.9;color:#a9adb4;position:relative;z-index:1}
.hero-link{display:inline-flex;align-items:center;gap:30px;margin-top:30px;font-size:12px;padding:10px 0;border-bottom:1px solid #c6ab754d;color:#dcc38f}
.hero-link span{font-size:20px}.hero-orbit{position:absolute;right:20px;top:-30px;width:250px;height:250px;border-radius:50%;border:1px solid #c8a56726;display:grid;place-items:center;pointer-events:none;z-index:-1}
.hero-orbit:before,.hero-orbit:after{content:'';position:absolute;inset:22px;border:1px solid #c8a5671a;border-radius:50%}.hero-orbit:after{inset:-26px;border-style:dashed;opacity:.5}.hero-orbit span{font-family:Georgia,serif;font-size:126px;font-style:italic;color:#c8a56714}
.section-index{font-size:10px!important;letter-spacing:.17em;color:#cbb17e!important;margin-bottom:12px}.section-head h2{letter-spacing:-.045em;font-weight:650}.section-head p{line-height:1.8}
.products-section{padding-top:54px}.products-grid{gap:24px}.product-card{border-color:#ffffff12;border-radius:20px;overflow:hidden;background:linear-gradient(155deg,#1b1d20,#101215);box-shadow:0 12px 35px #0002;padding:26px}
.product-card>img{display:block;border-radius:12px;margin-bottom:24px;width:100%;max-height:240px;object-fit:contain;background:#0c0e11}
.product-card>h3{font-size:20px;line-height:1.5;letter-spacing:-.035em;margin-bottom:12px}.product-card>p{font-size:13px;line-height:1.9;color:#b1b4ba}.product-card>.form-btn{margin-top:24px;border-radius:12px;font-size:13px}
.notices-section{padding-bottom:64px}#noticeList{border:1px solid #ffffff12;background:#ffffff02;border-radius:16px;padding:30px;color:#979da7;font-size:13px}footer{border-top:1px solid #bba06920}
@media(max-width:680px){.page-hero{padding:54px 0 44px}.hero-orbit{width:170px;height:170px;right:-80px;top:20px;opacity:.6}.hero-orbit span{font-size:88px}.page-hero h1{max-width:90%}.page-hero #heroSub{max-width:86%;font-size:13px}.product-card{padding:20px}.products-grid{gap:18px}.nav-right{gap:10px}.portal-icon{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portal-icon{transition:none}}