/* 전역 여백 리듬 + 높이 토큰 */
:root {
  --brand: #0D9488;
  --brand-2: #14b8a6;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  /* 섹션/카드 높이 제어 */
  --hero-min-h: 38vh;   /* 히어로 최소 높이 (뷰포트 기준) */
  --card-min-h: 220px;  /* 카드 최소 높이 */

  /* 새: 섀도/테두리 토큰 */
  --ring: 0 10px 26px rgba(13,148,136,.10);
  --border-grad: linear-gradient(120deg, #e9eef3, rgba(20,184,166,.35));
}

/* 배경 패턴 히어로 (정중앙 정렬 + 글래스 톤) */
.est-hero {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 20px;
  min-height: var(--hero-min-h);
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 50% -220px, #0D94881a, transparent 60%),
    linear-gradient(180deg, #f8fafc, #ffffff 55%);
}
.est-hero-pattern {
  position: absolute; inset: 0;
  background:
    radial-gradient(150px 40px at 12% 18%, #0D948812, transparent 60%),
    radial-gradient(220px 60px at 88% 12%, #0D948810, transparent 65%),
    radial-gradient(200px 40px at 30% 100%, #0D94880d, transparent 70%);
  pointer-events: none;
  filter: saturate(.95);
}
.est-hero-inner {
  position: relative;
  max-width: 1100px;
  width: 100%;
  text-align: center;
  backdrop-filter: saturate(120%) blur(2px);
  will-change: transform; /* 파랄렉스 부드럽게 */
}
.est-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4.8vw, 52px);
  font-weight: 900;
  letter-spacing: .2px;
  color: #0f2749;
}
.est-sub{
  margin-top: 8px;
  color: #4b5563;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.7;
}

/* 메인 */
.est-main { background: #fff; padding: var(--space-6) 20px var(--space-7); }
.est-inner { max-width: 1100px; margin: 0 auto; }

/* 채널 카드 그리드 */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: stretch;
  grid-auto-rows: 1fr;
}
@media (max-width: 980px) { .channel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .channel-grid { grid-template-columns: 1fr; } }

/* 카드 (그라디언트 보더 + 글래스) */
.channel-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: var(--space-5);
  background:
    linear-gradient(180deg, #ffffff, #fbfdff) padding-box,
    var(--border-grad) border-box;
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--card-min-h);
  min-block-size: var(--card-min-h);
}
.channel-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  pointer-events:none;
}
.channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(16,24,40,.12);
}

/* 카드 헤더 */
.ch-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.ch-head h2 {
  font-size: 18px;
  font-weight: 900;
  color: #1f2937;
}
.ch-icon {
  inline-size: 40px;
  block-size: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: #0D948814;
  box-shadow: 0 4px 14px rgba(13,148,136,.15);
}
.ch-icon.kakao { background: #FEE50033; color: #3C1E1E; }
.ch-icon.mail  { background: #EEF2FF; color: #4F46E5; }
.ch-icon.phone { background: #ECFDF5; color: #0D9488; }

.ch-desc {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: var(--space-3);
}

/* 버튼 */
.ch-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:focus-visible { outline: 3px solid #0D94884d; outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 6px 14px rgba(2,12,28,.10);
}
.btn-primary:hover { transform: translateY(-1px); opacity: .96; }

/* 메타 텍스트 (카드 하단 정렬) */
.ch-meta {
  list-style: none; padding: 0; margin: 0;
  color: #6b7280; font-size: 13px; display: grid; gap: var(--space-1);
  margin-top: auto;
}
.ch-only-text { margin-top: var(--space-2); }

/* ✅ 복사 가능한 코드도 본문과 동일한 글꼴/두께로 */
.ch-meta code,
.ch-meta code.copy{
  font-family: inherit;   /* 모노스페이스 → 상속 */
  font-size: inherit;     /* 주변 텍스트와 동일 크기 */
  font-weight: inherit;   /* '채널명'과 동일 두께(보통) */
  letter-spacing: -0.01em;
  line-height: inherit;
}

/* 복사 태그 베이스 UI */
code.copy {
  position: relative;
  padding: 2px 8px;
  border-radius: 8px;
  background: #f3f5f7;
  color: #111827;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
code.copy::after{
  content: "복사";
  position: absolute;
  right: -42px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: #6b7280;
  opacity: .0; pointer-events: none; transition: opacity .15s ease;
}
code.copy:hover { background:#eef2f6; box-shadow: inset 0 1px 0 #fff; }
code.copy:hover::after{ opacity: .9; }

/* 문의 가능 항목 */
.est-scope {
  padding: var(--space-5);
  border: 1px dashed #e5e7eb;
  border-radius: 16px;
  background:
    radial-gradient(420px 130px at 12% -34%, #0D94880b, transparent 60%),
    #fafafa;
}
.est-scope h3 {
  font-size: 16px;
  font-weight: 900;
  color: #0f2749;
  margin-bottom: var(--space-2);
}
.scope-list {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-5);
  color: #374151;
  line-height: 1.9;
  font-size: 14px;
}
.scope-note { color: #6b7280; font-size: 13px; }

/* 토스트 */
.toast{
  position: fixed;
  left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  background: #0f172a;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(2,12,28,.25);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2000;
}
.toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 접근성/선호 설정 */
@media (prefers-reduced-motion: reduce) {
  .channel-card, .btn, .toast { transition: none; }
}
@media (prefers-color-scheme: dark) {
  .est-hero {
    background:
      radial-gradient(1200px 500px at 50% -220px, #0D948833, transparent 60%),
      linear-gradient(180deg, #0b1220, #0f172a 55%);
  }
  .est-hero h1 { color: #e6edf7; }
  .est-sub { color: #b9c1cc; }
  .est-main { background: #0b1220; }

  .channel-card {
    background: linear-gradient(180deg,#0e1526,#0c1322) padding-box,
                linear-gradient(120deg, #1f2b3f, rgba(20,184,166,.35)) border-box;
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  .ch-head h2 { color: #e6edf7; }
  .ch-desc { color: #c6cfda; }
  .ch-meta { color: #9aa6b2; }

  code.copy { background:#121a2b; color:#e6edf7; }
  code.copy:hover { background:#152038; }

  .est-scope { background: #0e1526; border-color: #23304a; }
  .est-scope h3 { color: #e6edf7; }
  .scope-list { color: #c6cfda; }
  .scope-note { color: #9aa6b2; }

  .toast{ background:#0d1426; }
}

/* ===============================
   TYPO FIX (카드/섹션 폰트·크기 조정)
   =============================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.est-hero, .est-main {
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}

/* 카드/섹션 타이포 고도화 */
.ch-head h2{
  font-weight: 800;
  font-size: clamp(16px, 1.55vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color:#111;
}
.ch-desc{
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.7;
  color:#374151;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.ch-meta{
  font-size: clamp(12px, 1.05vw, 13px);
  line-height: 1.65;
  color:#6b7280;
}
.est-scope h3{
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color:#0f2749;
  margin-bottom: var(--space-2);
}
.scope-list{
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.85;
  color:#374151;
  letter-spacing: -0.005em;
}
.scope-list strong{ font-weight: 700; }
.scope-note{
  font-size: clamp(12px, .95vw, 13px);
  color:#6b7280;
  line-height: 1.6;
}

/* =========================
   Reveal (data-reveal 기준으로 통일)
   ========================= */
[data-reveal]{
  opacity:0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .45s ease, transform .45s ease;
}
.is-revealed{ opacity:1; transform: none; }
[data-reveal="fade-up"]{ transform: translate3d(0, 14px, 0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================
   푸터 (모션 없음)
   ========================= */
.site-footer{
  background:#111;
  color:#ccc;
  padding:48px 20px 28px;
  font-size:15px;
  line-height:1.8;
}
.footer-inner{ max-width:1200px; margin:0 auto; }
.footer-top{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.footer-logo{ height:32px; width:auto; display:block; }
.footer-info{ color:#aaa; margin-bottom:22px; }
.footer-info a{ color:#aaa; text-decoration:none; }
.footer-info a:hover{ text-decoration:underline; }
.site-footer hr{ border:none; border-top:1px solid #333; margin:22px 0; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#777; }
.footer-links a{ color:#aaa; text-decoration:none; margin:0 4px; }
.footer-links a:hover{ text-decoration:underline; }
.footer-copy{ font-size:14px; }