/* =========================================================
   H.S.N.S — app.css
   Tailwind CDN을 대체하는 단일 스타일시트.
   원본의 'ink' / 'gold' 팔레트와 Fraunces / Pretendard 타이포를 유지하되
   재사용 가능한 시멘틱 클래스로 정리.

   사용처: c:/hsns_web/app/static/css/app.css
   ========================================================= */

/* -----------------------------
   1. 디자인 토큰
   ----------------------------- */
:root {
  /* Ink (warm neutral) */
  --ink-50:  #f8f7f4;
  --ink-100: #eeece5;
  --ink-200: #d8d4c5;
  --ink-300: #b8b3a0;
  --ink-500: #6b6557;
  --ink-700: #3d3a32;
  --ink-900: #1a1916;
  --ink-950: #0e0d0b;

  /* Gold accent */
  --gold-400: #d4a84b;
  --gold-500: #b8902f;
  --gold-600: #9a7320;

  /* Status (구독 해지 영역에서만 사용) */
  --red-50:  #fef2f2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-900: #7f1d1d;

  /* Type */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 72rem;       /* max-w-6xl */
  --container-narrow: 48rem;/* max-w-3xl */

  /* Radii */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-pill: 9999px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
}

/* -----------------------------
   2. 리셋 + 베이스
   ----------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { padding: 0; margin: 0; list-style: none; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* -----------------------------
   3. 레이아웃
   ----------------------------- */
.site-main { flex: 1; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}
.container--narrow { max-width: var(--container-narrow); }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px){ .container { padding-inline: 2rem; } }

/* -----------------------------
   4. 사이트 크롬 (마키 / 네비 / 푸터)
   ----------------------------- */
.marquee {
  background: var(--ink-950);
  color: var(--ink-100);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.marquee__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marquee__est { opacity: 0.6; }
.marquee__brand {
  color: var(--gold-400);
  font-family: var(--font-mono);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(248,247,244,0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-200);
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.brand__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.brand__logo .dot { color: var(--gold-500); }
.brand__sub {
  font-size: 0.75rem;
  color: var(--ink-500);
  letter-spacing: 0.025em;
  display: none;
}
@media (min-width: 640px){ .brand__sub { display: inline; } }

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
@media (min-width: 640px){ .nav__links { gap: 1.5rem; } }
.nav__link { transition: color var(--t-base); }
.nav__link:hover { color: var(--gold-600); }

.footer {
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
  margin-top: 6rem;
}
.footer__inner { padding: 3rem 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  font-size: 0.875rem;
}
@media (min-width: 768px){ .footer__grid { grid-template-columns: repeat(3, 1fr); } }
.footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.footer__lede {
  color: var(--ink-500);
  line-height: 1.65;
}
.footer__heading {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.75rem;
}
.footer__list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__list a:hover { color: var(--gold-600); }
.footer__legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-500);
}
@media (min-width: 640px){
  .footer__legal { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer__location { font-family: var(--font-mono); }

/* -----------------------------
   5. 타이포 유틸
   ----------------------------- */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1rem;
}
.eyebrow--light { color: var(--gold-400); }

.display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw + 1rem, 6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.5vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.display-4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
}
.display-5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
}

.lede {
  color: var(--ink-500);
  font-size: 1.125rem;
  line-height: 1.65;
}
.lede--light { color: var(--ink-200); }

/* 색상 */
.text-muted { color: var(--ink-500); }
.text-gold  { color: var(--gold-500); }
.text-gold-light { color: var(--gold-400); }
.text-gold-dark  { color: var(--gold-600); }
.text-light { color: var(--ink-50); }

/* -----------------------------
   6. 버튼
   ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.btn__arrow {
  display: inline-block;
  transition: transform var(--t-base);
}
.btn:hover .btn__arrow { transform: translateX(0.25rem); }

.btn--primary {
  background: var(--ink-900);
  color: var(--ink-50);
}
.btn--primary:hover { background: var(--gold-600); }

.btn--gold {
  background: var(--gold-500);
  color: var(--ink-950);
}
.btn--gold:hover { background: var(--gold-400); }

.btn--ghost {
  color: var(--ink-200);
  padding: 1rem;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
}
.btn--ghost:hover { color: var(--gold-400); }

.btn--pill-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--ink-900);
  color: var(--ink-50);
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.btn--pill-sm:hover { background: var(--gold-600); }

.btn--block { width: 100%; }

.btn--danger {
  background: var(--red-600);
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.btn--danger:hover { background: var(--red-700); }

/* -----------------------------
   7. 섹션 / 면 처리
   ----------------------------- */
.section { padding-block: 6rem; }
.section--tight { padding-block: 4rem; }
.section--hero { padding-block: clamp(6rem, 10vw, 8rem); }

.surface-paper { background: var(--ink-50); }
.surface-dark  { background: var(--ink-950); color: var(--ink-50); }
.surface-card  { background: #fff; }

/* HERO 그리드 텍스처 */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(212,168,75,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,75,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 48rem; }

/* 좌·우 레이아웃 (텍스트 + 스카이라인) */
.hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px){
  .hero__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.hero__art {
  display: none;
  position: relative;
}
@media (min-width: 1024px){ .hero__art { display: block; } }
.hero__art-svg {
  width: 100%;
  height: auto;
  max-height: 640px;
  filter: drop-shadow(0 0 60px rgba(212,168,75,0.15));
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 2rem;
}
.hero__eyebrow .rule { width: 2rem; height: 1px; background: var(--gold-400); }

.hero__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw + 1rem, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
  color: inherit;
}
.hero__h1 em {
  color: var(--gold-400);
  font-style: normal;
}

.hero__lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-200);
  margin-bottom: 2.5rem;
  max-width: 42rem;
}
@media (min-width: 640px){ .hero__lede { font-size: 1.25rem; } }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 42rem;
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink-700);
}
.hero__stat-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--gold-400);
  line-height: 1;
}
.hero__stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 0.5rem;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  transform: rotate(90deg);
  transform-origin: right;
}
.hero__scroll .rule { width: 3rem; height: 1px; background: var(--ink-500); }
@media (min-width: 1024px){ .hero__scroll { display: inline-flex; } }

/* 섹션 헤딩 */
.section-head { margin-bottom: 4rem; max-width: 42rem; }
.section-head--row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 640px){
  .section-head--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* 3-step grid (process) */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-200);
}
@media (min-width: 768px){ .process { grid-template-columns: repeat(3, 1fr); } }
.process__step {
  background: var(--ink-50);
  padding: 2rem;
  transition: background-color var(--t-base);
}
.process__step:hover { background: #fff; }
.process__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-600);
  margin-bottom: 1.5rem;
}
.process__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.process__desc { color: var(--ink-500); line-height: 1.65; }

/* 카테고리 그리드 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px){ .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-cell {
  border: 1px solid var(--ink-700);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  transition: border-color var(--t-base), color var(--t-base);
  cursor: default;
}
.cat-cell:hover { border-color: var(--gold-400); color: var(--gold-400); }

.section-link {
  font-size: 0.875rem;
  color: var(--gold-400);
  letter-spacing: 0.025em;
  transition: color var(--t-base);
}
.section-link:hover { color: var(--gold-500); }

/* ============================================
   PAPER BAND (옵션 C — 신문/리포트 섹션)
   ============================================ */
.paper-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px){
  .paper-band__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 4rem;
  }
}
.paper-band__copy .display-2 em {
  font-style: italic;
  color: var(--gold-600);
}
.paper-band__lede { margin-top: 1.5rem; max-width: 36rem; }
.paper-band__list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.paper-band__list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.paper-band__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
  margin-top: 0.6rem;
}
.paper-band__list-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}
.paper-band__list-desc {
  font-size: 0.95rem;
  color: var(--ink-500);
  line-height: 1.6;
}

/* 신문 목업 */
.paper-band__visual {
  position: relative;
  perspective: 1400px;
}
.paper-mock {
  position: relative;
  background: #fdfaf2;
  border: 1px solid var(--ink-200);
  padding: 2rem 1.75rem;
  box-shadow:
    0 1px 0 var(--ink-200),
    0 24px 40px -20px rgba(26,25,22,0.35),
    0 60px 80px -40px rgba(26,25,22,0.25);
  font-family: var(--font-display);
  color: var(--ink-900);
  transform: rotate(-1.2deg);
  transition: transform 0.4s ease;
}
.paper-mock:hover { transform: rotate(0deg) translateY(-4px); }
.paper-mock--back {
  position: absolute;
  inset: auto -1.5rem -2rem auto;
  width: 70%;
  z-index: -1;
  transform: rotate(4deg);
  background: var(--ink-50);
  opacity: 0.85;
}
.paper-mock__masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 2px solid var(--ink-900);
  border-top: 2px solid var(--ink-900);
  padding: 0.5rem 0;
  margin-bottom: 1.25rem;
}
.paper-mock__name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-900);
}
.paper-mock__lead { margin-bottom: 1rem; }
.paper-mock__kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.5rem;
}
.paper-mock__kicker--mut { color: var(--ink-500); }
.paper-mock__h {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
  color: var(--ink-900);
}
.paper-mock__h-sm {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--ink-900);
}
.paper-mock__deck {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-700);
  line-height: 1.55;
}
.paper-mock__rule {
  border: 0;
  border-top: 1px solid var(--ink-200);
  margin: 1rem 0;
}
.paper-mock__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  border-top: 1px dotted var(--ink-300);
  padding-top: 1rem;
}
.paper-mock__lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.paper-mock__lines--lg { gap: 0.7rem; margin-top: 1rem; }
.paper-mock__lines .line {
  display: block;
  height: 4px;
  background: var(--ink-200);
  border-radius: 2px;
}
.paper-mock__lines--lg .line { height: 6px; }
.line--90 { width: 90%; }
.line--80 { width: 80%; }
.line--95 { width: 95%; }
.line--85 { width: 85%; }
.line--70 { width: 70%; }
.line--60 { width: 60%; }
.line--50 { width: 50%; }
.paper-mock__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-200);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.paper-mock__page { color: var(--gold-600); }

/* CTA 섹션 (홈 하단) */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-band__glow {
  position: absolute;
  top: -5rem; right: -5rem;
  width: 24rem; height: 24rem;
  border-radius: 9999px;
  background: rgba(184,144,47,0.10);
  filter: blur(48px);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.05;
}
.cta-band__lede {
  color: var(--ink-500);
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
  max-width: 32rem;
  margin-inline: auto;
}
.cta-band__sub {
  color: var(--ink-500);
  font-size: 0.875rem;
  margin-top: 1.25rem;
}
.cta-band__link {
  color: var(--ink-700);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-band__link:hover { color: var(--ink-900); }

/* 공지 카드 (홈) */
.notice-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem 2rem 2.25rem;
  max-width: 56rem;
  margin-inline: auto;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  overflow: hidden;
}
.notice-card::before {
  content: "";
  position: absolute;
  left: 0; top: 1.75rem; bottom: 1.75rem;
  width: 3px;
  background: var(--gold-400);
  border-radius: 0 2px 2px 0;
}
.notice-card::after {
  content: "";
  position: absolute;
  top: -3rem; right: -3rem;
  width: 12rem; height: 12rem;
  border-radius: 9999px;
  background: rgba(212,168,75,0.08);
  filter: blur(28px);
  pointer-events: none;
}
@media (min-width: 640px){
  .notice-card { padding: 2.5rem 2.75rem 2.5rem 3rem; }
}
.notice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.notice-card__date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.notice-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin-bottom: 1.75rem;
}
.notice-card__title em {
  font-style: italic;
  color: var(--gold-600);
}
.notice-list {
  display: flex;
  flex-direction: column;
}
.notice-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--ink-200);
}
.notice-list li:first-child { border-top: 0; padding-top: 0; }
.notice-list li:last-child  { padding-bottom: 0; }
.notice-list__icon {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--gold-400);
  border-radius: 9999px;
  background: rgba(212,168,75,0.08);
  color: var(--gold-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.05rem;
  transition: background-color var(--t-base);
}
.notice-list li:hover .notice-list__icon {
  background: rgba(212,168,75,0.16);
}
.notice-list__icon svg {
  width: 0.7rem;
  height: 0.7rem;
  stroke-width: 1.7;
}
.notice-list__title {
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.3rem;
  font-size: 1rem;
}
.notice-list__desc {
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.65;
}
.notice-list__desc strong { color: var(--ink-900); font-weight: 600; }

/* 가이드 링크 (notice 항목 내부) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold-600);
  border-bottom: 1px solid var(--gold-400);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base), gap var(--t-base);
}
.link-arrow:hover {
  color: var(--ink-900);
  border-color: var(--ink-900);
  gap: 0.6rem;
}
.link-arrow--back {
  margin-top: 0;
  font-size: 0.8rem;
  color: var(--ink-500);
  border-color: transparent;
}
.link-arrow--back:hover { color: var(--ink-900); border-color: transparent; }

/* -----------------------------
   문서 모달 (BotFather 가이드 등)
   ----------------------------- */
dialog.doc-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 42rem;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 4rem);
  overflow: visible;
  color: var(--ink-900);
}
dialog.doc-modal::backdrop {
  background: rgba(14,13,11,0.55);
  backdrop-filter: blur(2px);
}
.doc-modal__inner {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
}
.doc-modal__inner::before {
  content: "";
  position: absolute;
  left: 0; top: 1.5rem; bottom: 1.5rem;
  width: 3px;
  background: var(--gold-400);
}
.doc-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1rem 2rem;
  border-bottom: 1px solid var(--ink-100);
}
.doc-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-900);
}
.doc-modal__close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--ink-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  background: #fff;
  flex-shrink: 0;
  transition: color var(--t-base), border-color var(--t-base);
}
.doc-modal__close svg { width: 1rem; height: 1rem; }
.doc-modal__close:hover { color: var(--ink-900); border-color: var(--ink-700); }
.doc-modal__body {
  padding: 1.25rem 2rem 1.5rem;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
}
.doc-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem 2rem;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50);
  flex-wrap: wrap;
}

/* 문서 본문 공용 (모달 + 어드민 미리보기) */
.doc-modal__body .doc-steps,
.admin-preview__box .doc-steps {
  list-style: none;
  counter-reset: docstep;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.doc-modal__body .doc-steps li,
.admin-preview__box .doc-steps li {
  position: relative;
  counter-increment: docstep;
  padding-left: 2.5rem;
}
.doc-modal__body .doc-steps li::before,
.admin-preview__box .doc-steps li::before {
  content: counter(docstep, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.05rem;
  width: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--gold-600);
}
.doc-modal__body .doc-steps b,
.admin-preview__box .doc-steps b {
  display: block;
  color: var(--ink-900);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.doc-modal__body .doc-steps p,
.admin-preview__box .doc-steps p {
  color: var(--ink-500);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0.25rem 0 0;
}
.doc-modal__body code,
.admin-preview__box code {
  background: var(--ink-100);
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  color: var(--ink-900);
}
.doc-modal__body .doc-note,
.admin-preview__box .doc-note {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--gold-400);
  background: var(--ink-50);
  font-size: 0.85rem;
  color: var(--ink-500);
}

/* -----------------------------
   어드민 폼 (사이트 문서 편집)
   ----------------------------- */
.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.admin-head__h {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  margin-top: 0.25rem;
}
.admin-head__h .font-mono {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--gold-600);
  letter-spacing: 0.05em;
}
.admin-form .field + .field { margin-top: 1.5rem; }
.admin-form .field__label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.5rem;
}
.admin-form .field__hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-300);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}
.input-text--code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}
.admin-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-100);
  flex-wrap: wrap;
}
.admin-form__meta {
  font-size: 0.8rem;
  color: var(--ink-500);
}
.admin-form__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.flash {
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.flash--ok {
  background: rgba(212,168,75,0.12);
  border: 1px solid rgba(212,168,75,0.4);
  color: var(--gold-600);
}
.admin-preview {
  margin-top: 2rem;
}
.admin-preview .eyebrow { margin-bottom: 0.75rem; }
.admin-preview__box {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xl);
  padding: 1.75rem 2rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* -----------------------------
   8. 폼 (subscribe / me)
   ----------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}
@media (min-width: 640px){ .form-card { padding: 2.5rem; } }
.form-stack > * + * { margin-top: 2.5rem; }

.field-set__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.field-set__num {
  font-family: var(--font-mono);
  color: var(--gold-600);
  font-size: 0.875rem;
}
.field-set__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.field-set__hint {
  font-size: 0.75rem;
  color: var(--ink-500);
}

.field-label {
  display: block;
}
.field-label__text {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 0.5rem;
}

.input-line {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--ink-200);
  padding: 0.5rem 0.25rem;
  background: transparent;
  outline: none;
  transition: border-color var(--t-base);
}
.input-line:focus { border-color: var(--gold-500); }

.input-text {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--t-base);
  background: #fff;
}
.input-text:focus { border-color: var(--gold-500); }

/* 채널 선택 카드 */
.choice-list { display: flex; flex-direction: column; gap: 0.75rem; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--t-base), border-color var(--t-base);
}
.choice:hover { border-color: var(--gold-400); }
.choice:has(input:checked) {
  border-color: var(--gold-500);
  background: rgba(184,144,47,0.05);
}
.choice__check {
  margin-top: 0.25rem;
  accent-color: var(--gold-600);
  width: 1rem; height: 1rem;
}
.choice__body { flex: 1; }
.choice__title { font-weight: 500; }
.choice__desc {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin-top: 0.25rem;
}
.choice__field { display: none; margin-top: 0.75rem; }
.choice:has(input:checked) .choice__field { display: block; }
.choice__hint {
  font-size: 0.75rem;
  color: var(--ink-500);
  line-height: 1.65;
  margin-top: 0.5rem;
}
.choice__hint code {
  background: var(--ink-100);
  padding: 0.1rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
.choice__hint a { color: var(--gold-600); text-decoration: underline; }

/* 카테고리 칩 */
.cat-tier__head {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.75rem;
}
.cat-tier__head--muted { color: var(--ink-500); }
.cat-tier { margin-bottom: 1.5rem; }
.cat-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 640px){ .cat-chips { grid-template-columns: repeat(3, 1fr); } }
.cat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--t-base), border-color var(--t-base);
}
.cat-chip:hover { border-color: var(--gold-400); }
.cat-chip:has(input:checked) {
  border-color: var(--gold-500);
  background: rgba(184,144,47,0.10);
}
.cat-chip input {
  accent-color: var(--gold-600);
  width: 1rem; height: 1rem;
}

/* 약관 동의 */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--ink-100);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--ink-700);
  line-height: 1.65;
}
.consent input {
  margin-top: 0.25rem;
  accent-color: var(--gold-600);
  width: 1rem; height: 1rem;
}
.consent a { color: var(--gold-600); text-decoration: underline; }

/* 페이지 헤더 (서브페이지 공통) */
.page-head { margin-bottom: 3rem; }
.page-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3vw + 1rem, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.page-head__lede {
  color: var(--ink-500);
  font-size: 1.125rem;
  line-height: 1.65;
}

/* HTMX spinner */
.htmx-indicator { opacity: 0; transition: opacity var(--t-base); }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* -----------------------------
   9. 마이페이지 / 위험 영역
   ----------------------------- */
.me__meta {
  font-size: 0.875rem;
  color: var(--ink-500);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.danger-zone {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--red-200);
  border-radius: var(--radius-md);
  background: var(--red-50);
}
.danger-zone__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--red-900);
  margin-bottom: 0.5rem;
}
.danger-zone__lede {
  font-size: 0.875rem;
  color: var(--red-700);
  margin-bottom: 1rem;
}

/* -----------------------------
   10. 상태 페이지 (404 / 인증 / 해지)
   ----------------------------- */
.status {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
}
.status__big {
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--gold-500);
  line-height: 1;
  margin-bottom: 1rem;
}
.status__icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}
.status__icon--error { color: var(--red-500); }
.status__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2vw + 1rem, 2.5rem);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.status__lede {
  color: var(--ink-500);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.status__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.status__hint {
  color: var(--ink-500);
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}

/* -----------------------------
   11. 본문(prose) — 정책 / 약관
   ----------------------------- */
.prose {
  color: var(--ink-700);
  line-height: 1.75;
}
.prose > * + * { margin-top: 2rem; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}
.prose ul li + li { margin-top: 0.25rem; }
.prose .meta {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin-top: 2rem;
}

/* -----------------------------
   12. 헬퍼 / 마진
   ----------------------------- */
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12{ margin-top: 3rem; }
.hidden { display: none !important; }