/* ─────────────────────────────────────────────────────────────
   site.css — 캐시브 하위 정적 페이지 공용 스타일
   (공지사항 / 자주하는 질문 / 이용약관 / 개인정보처리방침)

   index.html(번들 산출물)의 Triggers 디자인 시스템 토큰을 재사용하되,
   이 페이지들은 dc-runtime/React 없이 서빙되므로 필요한 토큰만 1벌로 추출.
   라이트 모드 기준(홈이 흰 배경 고정, data-theme 미사용).
   브랜드 시드는 홈과 동일한 캐시브 오렌지(--brand-600:#FF8A3D).
   ───────────────────────────────────────────────────────────── */

/* ── Pretendard (홈과 동일 CDN) ── */
@font-face { font-family:"Pretendard"; font-weight:400; font-style:normal; font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family:"Pretendard"; font-weight:500; font-style:normal; font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family:"Pretendard"; font-weight:600; font-style:normal; font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Pretendard"; font-weight:700; font-style:normal; font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2") format("woff2"); }

:root {
  /* ── Brand ramp (캐시브 오렌지) ── */
  --brand-100:#FFF1E6; --brand-450:#FFB477; --brand-600:#FF8A3D; --brand-700:#F5761F; --brand-800:#E5670F;

  /* ── Surfaces / Text / Border ── */
  --surface-default:#FFFFFF;
  --surface-subtle:#F5F6F8;
  --text-primary:#0A1014;
  --text-secondary:#3F4447;
  --text-tertiary:#808696;
  --border-default:#E6E8EC;
  --border-strong:#D3D7DD;

  /* ── Brand-derived semantics ── */
  --primary:var(--brand-600);
  --primary-hover:var(--brand-700);
  --text-brand:var(--brand-700);
  --primary-subtle:var(--brand-100);

  /* ── Type ── */
  --font-sans:"Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* ── Radius / Spacing ── */
  --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;
  --gutter:20px;
  --wrap:1160px;
  --measure:820px;   /* 본문 읽기 폭 */

  --footer-bg:#14171C;
  --header-h:66px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--surface-default); color:var(--text-primary);
  font-family:var(--font-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  word-break:keep-all; overflow-wrap:anywhere;
}
a{ color:var(--text-brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }

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

/* ── Skip link (a11y) ── */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--primary); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-md) 0;
  font-weight:600;
}
.skip-link:focus{ left:0; text-decoration:none; }

/* ── Header (홈과 동일한 스티키 흰색 블러) ── */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #F0EEF0;
}
.site-header .bar{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-header .brand{ display:flex; align-items:center; gap:9px; color:var(--text-primary); }
.site-header .brand:hover{ text-decoration:none; }
.site-header .brand .symbol{ height:32px; width:auto; display:block; }
.site-header .brand .wordmark{ height:21px; width:auto; display:block; }
.site-header .home-link{
  font:600 15px/1 var(--font-sans); color:var(--text-secondary);
  display:inline-flex; align-items:center; gap:6px;
}
.site-header .home-link:hover{ color:var(--text-primary); text-decoration:none; }

/* ── Page shell ── */
main{ display:block; min-height:calc(100vh - var(--header-h) - 240px); }
.page{ max-width:var(--measure); margin:0 auto; padding:clamp(32px,5vw,56px) var(--gutter) clamp(56px,8vw,88px); }
.page-wide{ max-width:var(--wrap); }

.page-head{ margin:0 0 clamp(24px,4vw,36px); }
.page-head .eyebrow{ display:block; font:700 13px/1 var(--font-sans); color:var(--primary); margin-bottom:12px; }
.page-head h1{ margin:0; font:800 clamp(28px,4.4vw,40px)/1.25 var(--font-sans); letter-spacing:0; }
.page-head .lead{ margin:14px 0 0; color:var(--text-secondary); font-size:clamp(16px,1.9vw,18px); }
.page-head .meta{ margin:10px 0 0; color:var(--text-tertiary); font-size:15px; }

/* ── Breadcrumb / back ── */
.crumb{ margin:0 0 20px; font-size:15px; color:var(--text-tertiary); }
.crumb a{ color:var(--text-tertiary); }
.crumb a:hover{ color:var(--text-primary); }
.back-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:40px;
  font-weight:600; color:var(--text-brand);
}

/* ── Prose (약관/방침/공지 본문) ── */
.prose{ color:var(--text-secondary); font-size:17px; line-height:1.75; }
.prose > :first-child{ margin-top:0; }
.prose h2{ margin:2.2em 0 .7em; font:800 clamp(20px,2.6vw,24px)/1.35 var(--font-sans); color:var(--text-primary); letter-spacing:0; }
.prose h3{ margin:1.8em 0 .5em; font:700 clamp(17px,2.1vw,19px)/1.4 var(--font-sans); color:var(--text-primary); }
.prose h4{ margin:1.4em 0 .4em; font:700 16px/1.4 var(--font-sans); color:var(--text-primary); }
.prose p{ margin:.7em 0; }
.prose strong,.prose b{ color:var(--text-primary); font-weight:700; }
.prose ul,.prose ol{ margin:.6em 0; padding-left:1.4em; }
.prose li{ margin:.35em 0; }
.prose li::marker{ color:var(--text-tertiary); }
.prose hr{ border:0; border-top:1px solid var(--border-default); margin:2em 0; }
.prose a{ color:var(--text-brand); font-weight:600; text-decoration:underline; }

/* ── 표 (개인정보처리방침) ── */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1em 0; }
.prose table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15px; }
.prose th,.prose td{
  border:1px solid var(--border-default); padding:10px 12px; text-align:left; vertical-align:top; line-height:1.55;
}
.prose thead th, .prose tr:first-child th{ background:var(--surface-subtle); font-weight:700; color:var(--text-primary); }
.prose td strong{ font-weight:700; }

/* ── Accordion (FAQ) ── */
.faq-group{ margin:0 0 clamp(28px,4vw,40px); }
.faq-group > h2{ margin:0 0 14px; font:800 clamp(19px,2.4vw,22px)/1.35 var(--font-sans); color:var(--text-primary); }
.faq{ border:1px solid var(--border-default); border-radius:var(--radius-xl); overflow:hidden; background:var(--surface-default); }
.faq details{ border-top:1px solid var(--border-default); }
.faq details:first-child{ border-top:0; }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font:600 17px/1.5 var(--font-sans); color:var(--text-primary);
  transition:background .15s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:var(--surface-subtle); }
.faq summary::before{ content:"Q"; color:var(--primary); font-weight:800; margin-right:10px; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:24px; width:10px; height:10px;
  border-right:2px solid var(--text-tertiary); border-bottom:2px solid var(--text-tertiary);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .answer{ padding:0 20px 20px; color:var(--text-secondary); line-height:1.75; }
.faq .answer > :first-child{ margin-top:0; }
.faq .answer p{ margin:.5em 0; }
.faq .answer ul{ margin:.5em 0; padding-left:1.3em; }
.faq .answer li{ margin:.3em 0; }
.faq .answer strong{ color:var(--text-primary); font-weight:700; }
.faq .answer code{
  background:var(--surface-subtle); border:1px solid var(--border-default);
  border-radius:6px; padding:1px 6px; font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── 공지 목록 ── */
.notice-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border-default); }
.notice-list li{ border-bottom:1px solid var(--border-default); }
.notice-list a{
  display:flex; align-items:baseline; gap:16px; padding:20px 4px;
  color:var(--text-primary); text-decoration:none;
}
.notice-list a:hover{ text-decoration:none; }
.notice-list a:hover .n-title{ color:var(--text-brand); }
.notice-list .n-badge{
  flex:0 0 auto; align-self:center; font:700 12px/1 var(--font-sans); color:var(--text-brand);
  background:var(--primary-subtle); padding:6px 10px; border-radius:var(--radius-full);
}
.notice-list .n-title{ flex:1 1 auto; font:600 17px/1.5 var(--font-sans); transition:color .15s ease; }
.notice-list .n-date{ flex:0 0 auto; color:var(--text-tertiary); font-size:14px; white-space:nowrap; }
.notice-empty{ padding:56px 0; text-align:center; color:var(--text-tertiary); }

/* ── 공지 상세 ── */
.article .article-head{ border-bottom:1px solid var(--border-default); padding-bottom:22px; margin-bottom:28px; }
.article .article-head h1{ margin:12px 0 0; font:800 clamp(24px,3.4vw,32px)/1.35 var(--font-sans); }
.article .article-head .meta{ margin:14px 0 0; color:var(--text-tertiary); font-size:15px; display:flex; gap:12px; align-items:center; }

/* ── Footer (홈과 동일한 다크 푸터) ── */
.site-footer{ background:var(--footer-bg); color:#A9B2BF; margin-top:64px; }
.site-footer .inner{ max-width:var(--wrap); margin:0 auto; padding:56px var(--gutter) 40px; }
.site-footer .cols{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.site-footer .biz{ font:500 14px/1.9 var(--font-sans); color:#7E8593; }
.site-footer .biz .co{ color:#A9B2BF; font-weight:700; margin-bottom:8px; }
.site-footer .biz a{ color:#7E8593; }
.site-footer .links{ display:flex; gap:16px; font:600 14px/1 var(--font-sans); }
.site-footer .links a{ color:#A9B2BF; }
.site-footer .links a:hover{ color:#fff; text-decoration:none; }
.site-footer .copy{
  margin-top:36px; padding-top:22px; border-top:1px solid #262B32;
  font:500 13px/1.6 var(--font-sans); color:#646D7A;
}

@media (max-width:720px){
  body{ font-size:16px; }
  .site-footer .cols{ flex-direction:column; gap:28px; }
  .notice-list a{ flex-wrap:wrap; gap:6px 12px; }
  .notice-list .n-title{ flex-basis:100%; order:2; }
  .notice-list .n-date{ order:3; }
}