:root {
  color-scheme: dark;
  --qp-font: "Pretendard Variable", Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --qp-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --qp-bg: #090d18;
  --qp-bg-soft: #0d1322;
  --qp-surface: rgba(20, 28, 47, .84);
  --qp-surface-solid: #141c2f;
  --qp-surface-raised: #19233a;
  --qp-border: rgba(148, 163, 184, .14);
  --qp-border-strong: rgba(148, 163, 184, .24);
  --qp-text: #eef3fb;
  --qp-text-soft: #bdc8da;
  --qp-text-dim: #8491a8;
  --qp-primary: #7c8cff;
  --qp-primary-strong: #6577f3;
  --qp-primary-soft: rgba(124, 140, 255, .13);
  --qp-success: #45c895;
  --qp-warning: #f3b75f;
  --qp-danger: #ef7385;
  --qp-info: #59bfe8;
  --qp-radius-sm: 9px;
  --qp-radius: 14px;
  --qp-radius-lg: 20px;
  --qp-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  --qp-control-height: 42px;
}

html { background: var(--qp-bg); }

body.bg-dark {
  min-height: 100vh;
  margin: 0;
  color: var(--qp-text) !important;
  background:
    radial-gradient(circle at 8% -10%, rgba(97, 111, 208, .16), transparent 34rem),
    radial-gradient(circle at 92% 5%, rgba(43, 125, 145, .1), transparent 30rem),
    linear-gradient(180deg, #0c1120 0, var(--qp-bg) 42rem) !important;
  font-family: var(--qp-font);
  font-size: 15px;
  font-weight: 430;
  line-height: 1.58;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image: linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

::selection { color: #fff; background: rgba(124, 140, 255, .42); }
a { color: #9aa8ff; text-underline-offset: 3px; }
a:hover { color: #bdc6ff; }

.navbar.bg-black {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 64px;
  background: rgba(9, 13, 24, .82) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--qp-border) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) saturate(130%);
}

.navbar .container-fluid { max-width: 1540px; padding-inline: clamp(16px, 2.4vw, 36px); }
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-right: 24px;
  color: var(--qp-text) !important;
  font-family: var(--qp-font) !important;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.025em !important;
  text-shadow: none !important;
}
.navbar-brand::before {
  width: 30px;
  height: 30px;
  content: "";
  flex: 0 0 auto;
  margin-right: 10px;
  border: 1px solid rgba(94,241,255,.24);
  border-radius: 9px;
  background: #10203d url("/brand/quizcon-nav-icon.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255,94,196,.08), 0 7px 18px rgba(24, 114, 183, .28);
}
.navbar-nav { row-gap: 4px; }
.navbar-nav .nav-link {
  padding: 8px 10px !important;
  border-radius: 9px;
  color: var(--qp-text-dim) !important;
  font-size: 13px;
  font-weight: 570;
  letter-spacing: -.01em;
  transition: color .15s ease, background .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--qp-text) !important;
  background: rgba(255, 255, 255, .055);
}
.navbar-toggler { border-color: var(--qp-border-strong); border-radius: 10px; }

.qc-play-btn {
  min-height: 34px;
  padding: 7px 11px !important;
  gap: 6px;
  border: 1px solid var(--qp-border-strong);
  border-radius: 9px !important;
  color: var(--qp-text-soft) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 620 !important;
}
.qc-play-btn:hover,
.qc-play-btn:focus-visible {
  color: #fff !important;
  border-color: rgba(124,140,255,.46);
  background: var(--qp-primary-soft) !important;
  filter: none !important;
}
.qc-lang-toggle,
.qc-user-pill {
  border-color: var(--qp-border) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none;
}
.qc-lang-toggle button { color: var(--qp-text-dim) !important; font-family: var(--qp-font); }
.qc-lang-toggle button.active {
  color: #fff !important;
  background: var(--qp-primary-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(124,140,255,.22);
}
.qc-user-pill .qc-user-name { color: var(--qp-text-soft) !important; }
.qc-user-pill button { color: #f4a1ad !important; background: rgba(239,115,133,.09) !important; }

main.py-4 { padding-block: clamp(28px, 4vw, 54px) !important; }
main > .container,
main > .container-fluid { max-width: 1320px; }

.qp-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.qp-page-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--qp-primary);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.qp-page-header h1, .qp-page-header h2 { margin: 0; }
.qp-page-subtitle { max-width: 620px; margin: 7px 0 0; color: var(--qp-text-dim); font-size: 14px; }

.qp-stat-grid { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }
.qp-stat-card { position: relative; height: 100%; min-height: 142px; }
.qp-stat-card::after {
  position: absolute;
  right: -24px;
  bottom: -40px;
  width: 112px;
  height: 112px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,140,255,.16), transparent 68%);
}
.qp-stat-card .card-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; }
.qp-stat-card .card-title { margin: 0; color: var(--qp-text-dim); font-size: 12px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
.qp-stat-card .display-6 { margin: 18px 0 0; font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1; }
.qp-stat-mark {
  position: absolute;
  top: 19px;
  right: 19px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(124,140,255,.18);
  border-radius: 10px;
  color: #aab5ff;
  background: var(--qp-primary-soft);
  font-size: 12px;
  font-weight: 760;
}
.qp-section { margin-top: 38px; }
.qp-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.qp-section-header h2, .qp-section-header h3 { margin: 0; font-size: 1.18rem; }

.qp-auth-shell { display: grid; min-height: calc(100vh - 170px); place-items: center; padding: 24px 16px; }
.qp-auth-card {
  position: relative;
  width: min(100%, 450px);
  padding: clamp(26px, 5vw, 40px);
  overflow: hidden;
  border: 1px solid var(--qp-border);
  border-radius: var(--qp-radius-lg);
  background: linear-gradient(155deg, rgba(27,37,61,.93), rgba(13,19,33,.96));
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.qp-auth-card::before {
  position: absolute;
  top: -105px;
  right: -95px;
  width: 245px;
  height: 245px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle at 35% 40%, rgba(144,157,255,.32), rgba(90,105,219,.1) 42%, transparent 70%);
}
.qp-auth-card::after {
  position: absolute;
  top: 28px;
  right: 32px;
  width: 38px;
  height: 38px;
  content: "";
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(145,160,255,.95), rgba(78,94,202,.95));
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 10px 26px rgba(76,91,194,.26);
}
.qp-auth-card > * { position: relative; z-index: 1; }
.qp-auth-card h1, .qp-auth-card h2 { max-width: calc(100% - 55px); margin-bottom: 8px !important; }
.qp-auth-intro { margin: 0 0 28px; color: var(--qp-text-dim); font-size: 14px; }
.qp-auth-links { margin: 18px 0 0; text-align: center; font-size: 13px; }

.qp-account-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 28px;
}
.qp-account-link {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  min-height: 86px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  color: var(--qp-text-soft);
  text-decoration: none;
  border: 1px solid var(--qp-border);
  border-radius: 13px;
  background: rgba(20,28,47,.58);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.qp-account-link:hover {
  color: var(--qp-text);
  border-color: rgba(124,140,255,.38);
  background: rgba(28,38,63,.78);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  transform: translateY(-2px);
}
.qp-account-link-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #aab5ff;
  border: 1px solid rgba(124,140,255,.2);
  border-radius: 11px;
  background: var(--qp-primary-soft);
}
.qp-account-link-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qp-account-link strong { display: block; color: var(--qp-text); font-size: 13px; font-weight: 650; line-height: 1.35; }
.qp-account-link small { display: block; margin-top: 4px; color: var(--qp-text-dim); font-size: 11px; line-height: 1.35; }
.qp-account-link-arrow { color: #71809a; font-size: 16px; transition: color .15s ease, transform .15s ease; }
.qp-account-link:hover .qp-account-link-arrow { color: #aab5ff; transform: translateX(2px); }

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: var(--qp-text);
  font-family: var(--qp-font) !important;
  font-weight: 690;
  letter-spacing: -.032em !important;
  line-height: 1.25;
  text-shadow: none !important;
}
main h1 { font-size: clamp(1.75rem, 2.5vw, 2.35rem); }
main h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); }
main h3 { font-size: 1.35rem; }
main p, main li, main dd { color: var(--qp-text-soft); }
.text-secondary, .text-muted { color: var(--qp-text-dim) !important; }
.small, small { letter-spacing: 0; }

.card,
.card.text-bg-dark {
  color: var(--qp-text);
  background: linear-gradient(155deg, rgba(26,36,59,.88), rgba(16,23,39,.94)) !important;
  border: 1px solid var(--qp-border) !important;
  border-radius: var(--qp-radius) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.13);
  overflow: clip;
}
.card-body { padding: clamp(18px, 2.4vw, 26px); }
.card-title { color: var(--qp-text); font-weight: 660; }
.card .display-6 {
  color: #aab5ff !important;
  font-weight: 690;
  letter-spacing: -.04em;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}

.table-responsive {
  overflow: hidden auto;
  border: 1px solid var(--qp-border);
  border-radius: var(--qp-radius);
  background: rgba(15,22,37,.7);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
}
.table { margin-bottom: 0; color: var(--qp-text-soft); vertical-align: middle; }
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.018);
  --bs-table-hover-bg: rgba(124,140,255,.055);
  --bs-table-color: var(--qp-text-soft);
  --bs-table-border-color: var(--qp-border);
  border-radius: 0 !important;
}
.table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: var(--qp-border); }
.table thead th,
.table-dark thead {
  color: var(--qp-text-dim) !important;
  background: rgba(255,255,255,.02);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table td { font-variant-numeric: tabular-nums; }

.form-label, label {
  margin-bottom: 6px;
  color: var(--qp-text-soft);
  font-size: 13px;
  font-weight: 570;
}
.form-control,
.form-select {
  min-height: var(--qp-control-height);
  color: var(--qp-text);
  background-color: rgba(7,11,21,.56);
  border: 1px solid var(--qp-border-strong);
  border-radius: var(--qp-radius-sm);
  font-family: var(--qp-font);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:hover, .form-select:hover { border-color: rgba(148,163,184,.34); }
.form-control:focus, .form-select:focus {
  color: #fff;
  background-color: rgba(9,14,27,.88);
  border-color: rgba(124,140,255,.72);
  box-shadow: 0 0 0 3px rgba(124,140,255,.14);
}
.form-control::placeholder { color: #657188; opacity: 1; }
.form-control:disabled, .form-control[readonly] { color: var(--qp-text-dim); background: rgba(255,255,255,.025); }
textarea.form-control { min-height: 110px; line-height: 1.55; }
input[type="file"].form-control { padding-block: 8px; }
/* Bootstrap's -sm variant only shrinks padding/font-size, so the fixed
   min-height above (42px) kept form-control-sm/form-select-sm rendering at full
   height -- 10px taller than the .btn-sm (32px) sitting next to them in every
   filter row (/Packs, /Jobs, /Market all had the ragged edge). Give the small
   variant the same height as the small button so the row lines up. */
.form-control-sm,
.form-select-sm { min-height: 32px; }
.form-check-input { background-color: #11192a; border-color: var(--qp-border-strong); }
.form-check-input:checked { background-color: var(--qp-primary); border-color: var(--qp-primary); }

.btn {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: var(--qp-radius-sm);
  font-family: var(--qp-font);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -.01em;
  transition: transform .12s ease, color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 32px; padding: 5px 10px; border-radius: 8px; font-size: 12px; }
.btn-primary {
  color: #fff !important;
  background: var(--qp-primary-strong) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 20px rgba(73,89,195,.2);
}
.btn-primary:hover { background: #7383f7 !important; box-shadow: 0 10px 25px rgba(73,89,195,.28); }
.btn-success { color: #071b14 !important; background: var(--qp-success) !important; border: 0 !important; box-shadow: none; }
.btn-secondary { color: var(--qp-text-soft); background: #253049; border-color: #303d58; }
.btn-outline-light,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
  color: var(--qp-text-soft);
  background: rgba(255,255,255,.025);
  border-color: var(--qp-border-strong);
}
.btn-outline-light:hover,
.btn-outline-secondary:hover { color: #fff; background: rgba(255,255,255,.07) !important; border-color: rgba(148,163,184,.38) !important; }
.btn-outline-info:hover { color: #071a22; background: var(--qp-info); border-color: var(--qp-info); }
.btn-outline-success:hover { color: #071b14; background: var(--qp-success); border-color: var(--qp-success); }
.btn-outline-warning:hover { color: #211706; background: var(--qp-warning); border-color: var(--qp-warning); }
.btn-outline-danger:hover { color: #fff; background: #c65364; border-color: #c65364; }
.btn-group { padding: 3px; gap: 3px; border: 1px solid var(--qp-border); border-radius: 11px; background: rgba(255,255,255,.025); }
.btn-group > .btn { border-radius: 7px !important; }

.badge {
  padding: .4em .62em;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
}
.badge.bg-success { color: #bff7df; background: rgba(69,200,149,.14) !important; border: 1px solid rgba(69,200,149,.2); }
.badge.bg-danger { color: #ffc1ca; background: rgba(239,115,133,.14) !important; border: 1px solid rgba(239,115,133,.2); }
.badge.bg-warning { color: #ffe0aa !important; background: rgba(243,183,95,.14) !important; border: 1px solid rgba(243,183,95,.2); }
.badge.bg-secondary { color: #c7d0df; background: rgba(148,163,184,.12) !important; border: 1px solid var(--qp-border); }

.alert {
  color: var(--qp-text-soft);
  background: rgba(25,35,58,.72);
  border: 1px solid var(--qp-border);
  border-radius: var(--qp-radius);
}
.alert-danger { color: #ffc6ce; background: rgba(117,38,53,.22); border-color: rgba(239,115,133,.25); }
.alert-success { color: #bdf4dc; background: rgba(34,104,78,.22); border-color: rgba(69,200,149,.25); }
.alert-warning { color: #ffe2b2; background: rgba(118,81,30,.22); border-color: rgba(243,183,95,.25); }
.validation-summary-errors { color: #ffc6ce !important; background: rgba(117,38,53,.22) !important; border-color: rgba(239,115,133,.25) !important; }

.modal-content,
.dropdown-menu {
  color: var(--qp-text);
  background: rgba(18,25,42,.97);
  border: 1px solid var(--qp-border-strong);
  border-radius: var(--qp-radius);
  box-shadow: var(--qp-shadow);
  backdrop-filter: blur(18px);
}
.modal-header, .modal-footer { border-color: var(--qp-border); }
.dropdown-item { color: var(--qp-text-soft); border-radius: 7px; }
.dropdown-item:hover { color: #fff; background: var(--qp-primary-soft); }
.pagination { gap: 5px; }
.page-link { color: var(--qp-text-soft); background: var(--qp-surface); border-color: var(--qp-border); border-radius: 8px !important; }
.page-link:hover { color: #fff; background: var(--qp-primary-soft); border-color: rgba(124,140,255,.3); }

code, pre, textarea[style*="monospace"] { font-family: var(--qp-mono) !important; }
hr { border-color: var(--qp-border); opacity: 1; }

@media (max-width: 991.98px) {
  .navbar.bg-black { position: relative; }
  .navbar-collapse { padding: 12px 0 6px; }
  .navbar-nav .nav-link { padding-inline: 8px !important; }
  .navbar-actions { padding-top: 10px; border-top: 1px solid var(--qp-border); }
  main.py-4 { padding-top: 26px !important; }
}

@media (max-width: 575.98px) {
  body.bg-dark { font-size: 14px; }
  main > .container, main > .container-fluid { padding-inline: 16px; }
  .table > :not(caption) > * > * { padding: 10px 11px; }
  .btn { min-height: 40px; }
  .qp-page-header { align-items: start; flex-direction: column; }
  .qp-auth-shell { min-height: auto; padding-inline: 0; }
  .qp-auth-card { padding: 27px 22px; border-radius: 16px; }
  .qp-account-links { grid-template-columns: 1fr; }
  .qp-account-link { min-height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Luxury Hall: editorial shell. Kept in the static stylesheet so CSP never
   drops the page presentation. */
.lh-page {
  --lh-ink: #090a0a;
  --lh-paper: #ebe8df;
  --lh-gold: #c7a65a;
  --lh-muted: #96958f;
  margin: -1.5rem 0 -1.5rem;
  min-height: calc(100vh - 70px);
  color: var(--lh-paper);
  background:
    radial-gradient(circle at 78% 10%, rgba(155,119,48,.13), transparent 30%),
    linear-gradient(180deg, #0c0d0d, #080909 72%);
  font-family: "Pretendard Variable", Pretendard, sans-serif;
}
.lh-container { max-width: 1320px; padding-top: 28px; padding-bottom: 32px; }
.lh-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(210,190,145,.2);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(140deg, #111312 0%, #15140f 62%, #211b0e 100%);
  background-size: 80px 80px, 80px 80px, auto;
}
.lh-hero::before, .lh-hero::after { content:""; position:absolute; border:1px solid rgba(199,166,90,.16); border-radius:50%; }
.lh-hero::before { width:570px; height:570px; }
.lh-hero::after { width:410px; height:410px; }
.lh-hero-glow { position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(199,166,90,.07); filter:blur(70px); }
.lh-hero-inner { position:relative; z-index:1; max-width:900px; padding:80px 30px; text-align:center; }
.lh-eyebrow, .lh-section-label { color:var(--lh-gold); font-size:11px; font-weight:650; letter-spacing:.28em; text-transform:uppercase; }
.lh-eyebrow { display:flex; align-items:center; justify-content:center; gap:16px; }
.lh-eyebrow span { width:44px; height:1px; background:var(--lh-gold); }
.lh-hero h1 { margin:30px 0 24px; color:#f2efe8; font-family:Georgia,"Times New Roman",serif; font-size:clamp(52px,7.2vw,96px); font-weight:400; line-height:.94; letter-spacing:-.055em; text-shadow:none; }
.lh-hero h1 em { color:var(--lh-gold); font-weight:400; }
.lh-hero p { color:#b1afa8; font-size:16px; line-height:1.8; }
.lh-hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:36px; }
.lh-button { display:inline-flex; align-items:center; justify-content:center; min-width:190px; padding:14px 22px; border:1px solid rgba(199,166,90,.48); color:#f4efe2; font-size:12px; font-weight:650; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; transition:.2s ease; }
.lh-button-primary { color:#13120e; background:var(--lh-gold); }
.lh-button-ghost { background:rgba(0,0,0,.12); }
.lh-button:hover { color:#111; background:#e0c47c; border-color:#e0c47c; transform:translateY(-2px); }
.lh-scroll-cue { position:absolute; bottom:24px; z-index:1; display:flex; align-items:center; gap:10px; color:#777873; font-size:9px; letter-spacing:.24em; text-transform:uppercase; }
.lh-scroll-cue span { display:block; width:32px; height:1px; background:#777873; }
.lh-notice { margin-top:28px; }
.lh-empty { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(360px,1.18fr); min-height:490px; margin-top:28px; border:1px solid rgba(255,255,255,.1); background:#0e1010; }
.lh-empty-mark { display:grid; place-items:center; overflow:hidden; color:rgba(199,166,90,.16); border-right:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg,#111312,#17150f); font-family:Georgia,serif; font-size:320px; line-height:1; }
.lh-empty-copy { align-self:center; max-width:610px; padding:64px clamp(36px,7vw,96px); }
.lh-empty h2, .lh-collection h2 { margin:18px 0 24px; color:#f0ede5; font-family:Georgia,"Times New Roman",serif; font-size:clamp(48px,5vw,72px); font-weight:400; line-height:.97; letter-spacing:-.04em; text-shadow:none; }
.lh-empty-copy > p { max-width:560px; color:#a4a39e; font-size:15px; line-height:1.8; }
.lh-text-link { display:inline-flex; align-items:center; gap:26px; margin-top:24px; padding-bottom:8px; color:#ddd7c8; border-bottom:1px solid rgba(199,166,90,.5); font-size:12px; font-weight:650; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.lh-text-link span { color:var(--lh-gold); font-size:20px; font-weight:300; }
.lh-text-link:hover { color:var(--lh-gold); }
.lh-principles { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(255,255,255,.1); border-top:0; }
.lh-principles article { padding:34px 38px; border-right:1px solid rgba(255,255,255,.1); }
.lh-principles article:last-child { border-right:0; }
.lh-principles span { color:var(--lh-gold); font-family:Georgia,serif; font-size:12px; }
.lh-principles h3 { margin:10px 0 8px; color:#e8e4da; font-family:Georgia,serif; font-size:25px; font-weight:400; text-shadow:none; }
.lh-principles p { margin:0; color:#868783; font-size:13px; }
.lh-collection { padding:90px 0 40px; }
.lh-section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:32px; }
.lh-section-heading h2 { margin-bottom:0; font-size:56px; }
.lh-section-heading > p { color:#858680; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.lh-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.lh-card { overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#111313; }
.lh-card-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.lh-card-media { position:relative; display:grid; place-items:center; height:300px; overflow:hidden; background:linear-gradient(145deg,#191a18,#282216); }
.lh-card-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.75); transition:transform .5s ease, filter .5s ease; }
.lh-card-monogram { color:rgba(226,207,158,.65); font-family:Georgia,serif; font-size:130px; }
.lh-featured { position:absolute; top:18px; left:18px; padding:7px 10px; color:#17130b; background:var(--lh-gold); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.lh-card-body { display:flex; flex:1; flex-direction:column; padding:27px; }
.lh-card-meta { color:var(--lh-gold); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.lh-card h3 { display:-webkit-box; min-height:74px; margin:10px 0 8px; overflow:hidden; color:#eeeae0; font-family:Georgia,serif; font-size:31px; font-weight:400; line-height:1.08; text-shadow:none; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.lh-card p { display:-webkit-box; min-height:44px; margin-bottom:0; overflow:hidden; color:#92938e; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.lh-enter { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:34px; color:#ccc7bb; border-top:0; background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.09)) 0 17px/100% 1px no-repeat; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.lh-enter b { color:var(--lh-gold); font-size:20px; font-weight:300; }
.lh-card-link:hover { color:inherit; }
.lh-card-link:hover img { transform:scale(1.035); filter:saturate(1); }
.lh-footer { display:flex; justify-content:space-between; margin-top:54px; padding-top:20px; color:#62635f; border-top:1px solid rgba(255,255,255,.08); font-size:9px; letter-spacing:.18em; text-transform:uppercase; }

.brand-hero { position:relative; min-height:470px; padding:5rem 2rem; overflow:hidden; border-radius:1.25rem; color:white; background:#151712; }
.brand-hero-image, .brand-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.brand-hero-image { object-fit:cover; }
.brand-hero-shade { background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.28)); }
.brand-hero-content { position:relative; z-index:1; }
.experience-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.brand-story { max-width:850px; color:#b9bdc8; font-size:16px; line-height:1.85; white-space:pre-line; }
.brand-section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }
.brand-section-heading small, .brand-pack-category { color:#d4af58; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.brand-section-heading h2 { margin:6px 0 0; }
.brand-section-heading > p { margin:0; color:#858c9d; font-size:13px; }
.brand-pack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px; }
.brand-pack-card { display:grid; grid-template-columns:118px 1fr; min-height:178px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:linear-gradient(145deg,rgba(29,35,55,.96),rgba(15,19,31,.98)); box-shadow:0 18px 40px rgba(0,0,0,.17); }
.brand-pack-art { display:grid; place-items:center; min-height:178px; padding:17px; background:radial-gradient(circle at 50% 35%,rgba(212,175,88,.18),transparent 62%),rgba(255,255,255,.025); }
.brand-pack-art img { width:86px; height:86px; object-fit:cover; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:#eee8d8; box-shadow:0 13px 30px rgba(0,0,0,.28); }
.brand-pack-art > span { color:#d9bd78; font-family:Georgia,serif; font-size:58px; }
.brand-pack-copy { display:flex; flex-direction:column; min-width:0; padding:21px 21px 17px; }
.brand-pack-copy h3 { margin:5px 0 6px; overflow:hidden; color:#f3f4f7; font-family:inherit; font-size:17px; font-weight:720; text-overflow:ellipsis; text-shadow:none; white-space:nowrap; }
.brand-pack-copy > p { display:-webkit-box; min-height:40px; margin:0; overflow:hidden; color:#9299aa; font-size:12px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.brand-pack-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; }
.brand-pack-price { color:#d4af58; font-size:12px; font-weight:750; }
.brand-pack-action { min-width:70px; padding:8px 15px; border:0; border-radius:999px; color:#07151c; background:linear-gradient(135deg,#65e6ff,#39aef2); font-size:12px; font-weight:800; text-align:center; text-decoration:none; transition:filter .15s ease,transform .15s ease; }
.brand-pack-action:hover { color:#07151c; filter:brightness(1.1); transform:translateY(-1px); }
.brand-pack-action:disabled { cursor:wait; filter:grayscale(.45); opacity:.68; }
.brand-pack-error { min-height:0; color:#ff9aa9; font-size:11px; }
.brand-pack-error:not(:empty) { padding-top:7px; }

@media (max-width: 767.98px) {
  .lh-page { margin-top:-1rem; }
  .lh-container { padding-inline:12px; }
  .lh-hero { min-height:520px; }
  .lh-hero::before { width:430px; height:430px; }
  .lh-hero::after { width:300px; height:300px; }
  .lh-empty { grid-template-columns:1fr; }
  .lh-empty-mark { display:none; }
  .lh-principles { grid-template-columns:1fr; }
  .lh-principles article { border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .lh-principles article:last-child { border-bottom:0; }
  .lh-section-heading, .lh-footer { align-items:start; flex-direction:column; gap:10px; }
  .brand-section-heading { align-items:start; flex-direction:column; gap:8px; }
  .brand-pack-card { grid-template-columns:94px 1fr; }
  .brand-pack-art { min-height:160px; padding:12px; }
  .brand-pack-art img { width:70px; height:70px; border-radius:16px; }
}

/* ---- TASKS_PACK_CATALOG.md Part C: /Packs 공개 카탈로그 카드 그리드 ----
 * 나머지 카드 레이아웃(그리드, 여백, 배지 등)은 Bootstrap 유틸리티 클래스만으로 충분해서
 * 여기서는 Bootstrap이 기본 제공하지 않는 두 가지만 보탠다: (1) 썸네일을 16:9로 고정하고
 * object-fit으로 잘라내는 것, (2) 설명 2줄 클램프. 둘 다 위 .lh-card-media/.brand-pack-copy>p와
 * 같은 감각(line-clamp + max-height 폴백)을 새 페이지에 맞게 재사용한 것뿐, 새 디자인 언어를
 * 들여오지 않았다. */
.pack-card-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(31, 38, 66, .6), rgba(10, 12, 22, .75));
}
.pack-card-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pack-card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 40px;
}
.pack-card-desc {
  display: -webkit-box;
  overflow: hidden;
  max-height: 2.9em; /* -webkit-line-clamp 미지원 브라우저용 폴백 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}