/* ===================================================================
   CLAZ 공통 테마 — claz.kr 전체 페이지의 색·글꼴·기본 부품 (2026-10-17)
   - 기준: index.html + story/ 의 디자인 언어
   - claz-nav.css 다음에 불러온다. (푸터·내비 다크모드 보정이 여기 있다)
   - 모든 클래스는 cz- 접두사. 도구 페이지의 자체 CSS와 충돌하지 않게 한다.
   - 다크모드: prefers-color-scheme 토큰 전환. 페이지는 색을 직접 쓰지 말고
     아래 토큰(--cz-*)만 쓰면 자동으로 다크모드가 된다.
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  /* 브랜드 */
  --cz-deep:#14274D;  --cz-navy:#1E3260;  --cz-blue:#2B4C8C;  --cz-blue-light:#3A5DA8;
  --cz-sky:#E9EEF9;   --cz-coral:#FF6B6B; --cz-coral-soft:#FFECEC;
  --cz-mint:#10b981;  --cz-mint-soft:#e7f7f0;
  --cz-amber:#f59e0b; --cz-amber-soft:#fdf0dd;
  --cz-purple:#8b5cf6;--cz-purple-soft:#f1ecfe;
  --cz-red:#dc2626;   --cz-red-soft:#fee2e2;
  /* 표면 */
  --cz-bg:#ffffff;    --cz-bg-soft:#f8fafc;  --cz-card:#ffffff;
  --cz-text:#1e293b;  --cz-muted:#475569;    --cz-faint:#94a3b8;
  --cz-border:#e6eaf1;--cz-border-strong:#cdd6ea;
  --cz-head:#14274D;  /* 제목 색 (다크에서는 밝게) */
  --cz-accent:#2B4C8C;--cz-accent-d:#22407a; --cz-on-accent:#ffffff;
  --cz-hero-grad:linear-gradient(180deg,#E9EEF9 0%,#ffffff 100%);
  --cz-radius:18px;   --cz-radius-sm:12px;
  --cz-shadow-sm:0 1px 3px rgba(20,39,77,.05);
  --cz-shadow-md:0 6px 24px rgba(20,39,77,.07);
  --cz-shadow-lg:0 10px 40px rgba(20,39,77,.09);
  --cz-font:'IBM Plex Sans KR','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --cz-font-head:'Gowun Dodum','Noto Sans KR',sans-serif;
  --cz-font-eng:'Outfit',sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --cz-deep:#0c1424;  --cz-navy:#121d36;  --cz-blue:#6f9be6;  --cz-blue-light:#8fb2ef;
  --cz-sky:#1a2740;   --cz-coral:#ff8585; --cz-coral-soft:#2a1f24;
  --cz-mint-soft:#132a22; --cz-amber-soft:#2a2113; --cz-purple-soft:#211b36; --cz-red-soft:#2d1717;
  --cz-bg:#0f1522;    --cz-bg-soft:#131b2c;  --cz-card:#16213a;
  --cz-text:#e6ecf5;  --cz-muted:#9fb0c9;    --cz-faint:#6b7a95;
  --cz-border:#233150;--cz-border-strong:#2f4068;
  --cz-head:#e6ecf5;
  --cz-accent:#6f9be6;--cz-accent-d:#8fb2ef; --cz-on-accent:#0f1522;
  --cz-hero-grad:linear-gradient(180deg,#1a2740 0%,#0f1522 100%);
  --cz-shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --cz-shadow-md:0 6px 24px rgba(0,0,0,.35);
  --cz-shadow-lg:0 10px 40px rgba(0,0,0,.4);
}}

/* ===== 기본 ===== */
.cz-body{margin:0;background:var(--cz-bg);color:var(--cz-text);font-family:var(--cz-font);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
.cz-eng{font-family:var(--cz-font-eng);}
.cz-head-font{font-family:var(--cz-font-head);font-weight:400;letter-spacing:-.5px;}

/* ===== 내비 다크모드 보정 (claz-nav.css는 라이트 전용) ===== */
@media (prefers-color-scheme:dark){
  .cz-nav{background:rgba(15,21,34,.94);border-bottom-color:var(--cz-border);}
  .cz-logo{color:#cfe0ff;}
  .cz-links a{color:var(--cz-muted);}
  .cz-links a:hover{color:var(--cz-blue-light);}
  .cz-links a.cz-tools{border-color:var(--cz-border-strong);color:var(--cz-blue-light);}
  .cz-links a.cz-tools::before{filter:invert(.85) hue-rotate(180deg);}
  .cz-links a.cz-tools:hover{background:var(--cz-sky);}
  .cz-links a.cz-cta{background:var(--cz-blue);color:var(--cz-on-accent);}
  .cz-links a.cz-cta:hover{background:var(--cz-blue-light);color:var(--cz-on-accent);}
  .cz-toggle span{background:var(--cz-text);}
  @media (max-width:960px){.cz-links{background:rgba(15,21,34,.99);border-bottom-color:var(--cz-border);}}
}

/* ===== 레이아웃 ===== */
.cz-wrap{max-width:1100px;margin:0 auto;padding:0 20px;}
.cz-wrap-narrow{max-width:820px;margin:0 auto;padding:0 18px;}
.cz-wrap-mid{max-width:1000px;margin:0 auto;padding:0 18px;}

/* ===== 페이지 머리 (story/index 의 .page-header) ===== */
.cz-page-header{background:var(--cz-hero-grad);text-align:center;padding:36px 20px 34px;}
.cz-page-header-in{max-width:720px;margin:0 auto;}
.cz-crumb{font-size:12.5px;color:var(--cz-faint);margin-bottom:14px;word-break:keep-all;}
.cz-crumb a{color:var(--cz-faint);text-decoration:none;}
.cz-crumb a:hover{color:var(--cz-blue);}
.cz-label{font-family:var(--cz-font-eng);font-size:12.5px;font-weight:600;color:var(--cz-coral);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;}
.cz-page-header h1{font-family:var(--cz-font-head);font-weight:400;letter-spacing:-.5px;
  font-size:clamp(26px,4.5vw,38px);line-height:1.32;color:var(--cz-head);margin:0 0 12px;word-break:keep-all;}
.cz-page-header h1 em{font-style:normal;color:var(--cz-blue);position:relative;white-space:nowrap;}
.cz-page-header h1 em::after{content:'';position:absolute;left:-2px;right:-2px;bottom:3px;height:9px;
  background:var(--cz-coral-soft);z-index:-1;border-radius:4px;}
.cz-page-header p{font-size:16px;color:var(--cz-muted);margin:0;word-break:keep-all;line-height:1.75;}
.cz-page-header .cz-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px;}
.cz-chip{display:inline-flex;align-items:center;gap:6px;background:var(--cz-card);border:1px solid var(--cz-border);
  border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--cz-muted);box-shadow:var(--cz-shadow-sm);}
.cz-chip b{font-family:var(--cz-font-eng);color:var(--cz-blue);font-size:14px;}
.cz-chip.cz-chip-coral{background:var(--cz-coral-soft);border-color:transparent;color:var(--cz-coral);font-weight:600;}
.cz-chip.cz-chip-mint{background:var(--cz-mint-soft);border-color:transparent;color:var(--cz-mint);font-weight:600;}
@media (max-width:640px){.cz-page-header{padding:28px 16px 26px;}}

/* ===== 섹션 머리 (본문 안) ===== */
.cz-sec-label{font-family:var(--cz-font-eng);font-size:12.5px;font-weight:600;color:var(--cz-coral);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;}
.cz-sec-title{font-family:var(--cz-font-head);font-weight:400;letter-spacing:-.5px;color:var(--cz-head);
  font-size:clamp(22px,3.6vw,30px);line-height:1.35;margin:0 0 10px;word-break:keep-all;}
.cz-sec-desc{font-size:15px;color:var(--cz-muted);line-height:1.8;margin:0 0 28px;word-break:keep-all;}

/* ===== 버튼 ===== */
.cz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:14px;
  font-family:var(--cz-font);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:all .22s;line-height:1.2;-webkit-tap-highlight-color:transparent;}
.cz-btn-primary{background:var(--cz-accent);color:var(--cz-on-accent);}
.cz-btn-primary:hover{background:var(--cz-accent-d);transform:translateY(-2px);box-shadow:0 10px 26px rgba(43,76,140,.28);}
.cz-btn-secondary{background:var(--cz-card);border-color:var(--cz-border-strong);color:var(--cz-blue);}
.cz-btn-secondary:hover{border-color:var(--cz-blue);transform:translateY(-2px);}
.cz-btn-coral{background:var(--cz-coral);color:#fff;}
.cz-btn-coral:hover{filter:brightness(.95);transform:translateY(-2px);}
.cz-btn-ghost{background:transparent;color:var(--cz-muted);border-color:var(--cz-border);}
.cz-btn-ghost:hover{color:var(--cz-blue);border-color:var(--cz-blue);}
.cz-btn:disabled,.cz-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;}
.cz-btn-sm{padding:9px 16px;font-size:13.5px;border-radius:10px;}
.cz-btn-block{width:100%;}

/* ===== 카드 ===== */
.cz-card{background:var(--cz-card);border:1px solid var(--cz-border);border-radius:var(--cz-radius);padding:22px;
  box-shadow:var(--cz-shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;}
a.cz-card{display:block;text-decoration:none;color:inherit;}
a.cz-card:hover,.cz-card.cz-hover:hover{transform:translateY(-3px);box-shadow:var(--cz-shadow-md);border-color:var(--cz-blue-light);}
.cz-card h3{font-size:16px;font-weight:700;color:var(--cz-head);margin:0 0 8px;line-height:1.45;word-break:keep-all;}
.cz-card p{font-size:14.5px;color:var(--cz-muted);line-height:1.65;margin:0;word-break:keep-all;}
.cz-card .cz-cat{font-size:11.5px;font-weight:700;color:var(--cz-blue);margin-bottom:8px;letter-spacing:.3px;}
.cz-card .cz-go{font-size:12.5px;color:var(--cz-faint);margin-top:12px;font-weight:600;}
a.cz-card:hover .cz-go{color:var(--cz-blue);}
.cz-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.cz-grid-2{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
.cz-grid-3{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){.cz-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.cz-grid-2,.cz-grid-3{grid-template-columns:1fr;}}

/* 아이콘(icons/*.svg)을 카드·버튼 앞에 쓸 때 */
.cz-ico{width:36px;height:36px;border-radius:10px;background:var(--cz-sky);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.cz-ico img{width:20px;height:20px;}
.cz-ico.cz-ico-coral{background:var(--cz-coral-soft);}
.cz-ico.cz-ico-mint{background:var(--cz-mint-soft);}
.cz-ico.cz-ico-amber{background:var(--cz-amber-soft);}
.cz-ico.cz-ico-purple{background:var(--cz-purple-soft);}
@media (prefers-color-scheme:dark){.cz-ico img{filter:invert(.85) hue-rotate(180deg) saturate(.8);}}

/* ===== 노트·강조 박스 (story 의 .note) ===== */
.cz-note{background:var(--cz-card);border:1px solid var(--cz-border);border-left:4px solid var(--cz-accent);
  border-radius:12px;padding:16px 18px;margin:20px 0;font-size:14.5px;line-height:1.7;word-break:keep-all;}
.cz-note .cz-k{display:block;font-weight:800;color:var(--cz-accent);margin-bottom:6px;font-size:13.5px;}
.cz-note.cz-note-coral{border-left-color:var(--cz-coral);} .cz-note.cz-note-coral .cz-k{color:var(--cz-coral);}
.cz-note.cz-note-amber{border-left-color:var(--cz-amber);} .cz-note.cz-note-amber .cz-k{color:var(--cz-amber);}
.cz-note.cz-note-mint{border-left-color:var(--cz-mint);}   .cz-note.cz-note-mint .cz-k{color:var(--cz-mint);}
.cz-note.cz-note-red{border-left-color:var(--cz-red);background:var(--cz-red-soft);} .cz-note.cz-note-red .cz-k{color:var(--cz-red);}

/* ===== 배지 ===== */
.cz-badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--cz-sky);color:var(--cz-blue);letter-spacing:.2px;}
.cz-badge-coral{background:var(--cz-coral-soft);color:var(--cz-coral);}
.cz-badge-mint{background:var(--cz-mint-soft);color:var(--cz-mint);}
.cz-badge-amber{background:var(--cz-amber-soft);color:var(--cz-amber);}
.cz-badge-purple{background:var(--cz-purple-soft);color:var(--cz-purple);}
.cz-badge-red{background:var(--cz-red-soft);color:var(--cz-red);}

/* ===== 폼 요소 ===== */
.cz-input,.cz-select,.cz-textarea{width:100%;padding:12px 14px;border:1.5px solid var(--cz-border);border-radius:10px;
  font-family:var(--cz-font);font-size:15px;color:var(--cz-text);background:var(--cz-card);transition:border-color .2s,box-shadow .2s;}
.cz-input:focus,.cz-select:focus,.cz-textarea:focus{outline:none;border-color:var(--cz-blue);box-shadow:0 0 0 3px rgba(43,76,140,.12);}
.cz-input::placeholder,.cz-textarea::placeholder{color:var(--cz-faint);}
.cz-field label{display:block;font-size:13px;font-weight:600;color:var(--cz-muted);margin-bottom:6px;}

/* ===== 표 ===== */
.cz-table{width:100%;border-collapse:collapse;font-size:14px;}
.cz-table th{background:var(--cz-sky);color:var(--cz-head);font-weight:700;text-align:center;padding:10px 8px;border:1px solid var(--cz-border);}
.cz-table td{padding:10px 8px;border:1px solid var(--cz-border);text-align:center;vertical-align:middle;word-break:keep-all;}

/* ===== CTA 박스 (story 의 .cta-box) ===== */
.cz-cta-box{background:var(--cz-deep);border-radius:18px;padding:28px 22px;margin:36px 0 8px;text-align:center;}
.cz-cta-box h3{margin:0 0 8px;color:#fff;font-size:19px;font-weight:800;word-break:keep-all;line-height:1.4;}
.cz-cta-box p{color:#c7d2e6;font-size:14px;margin:0 0 16px;word-break:keep-all;}
.cz-cta-box .cz-btn{background:#fff;color:#14274D;font-weight:800;}
.cz-cta-box .cz-btn:hover{background:#E9EEF9;color:#14274D;}
.cz-cta-box .cz-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.cz-cta-box .cz-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;}
@media (prefers-color-scheme:dark){.cz-cta-box{background:#1a2740;border:1px solid var(--cz-border);}}

/* ===== 공통 푸터 (claz-nav.css 의 라이트 푸터를 덮어쓴다) ===== */
.cz-foot{max-width:none;margin:48px 0 0;padding:34px 20px 40px;border-top:none;text-align:center;
  background:var(--cz-deep);color:#8b98b0;font-family:var(--cz-font);font-size:12.5px;line-height:1.85;}
.cz-foot-in{max-width:820px;margin:0 auto;}
.cz-foot .cz-fh{font-family:var(--cz-font-eng);font-weight:800;font-size:18px;color:#cbd5e1;text-decoration:none;letter-spacing:-.5px;}
.cz-foot .cz-fh span{color:#FF6B6B;}
.cz-foot p{margin:8px 0 0;font-size:12.5px;color:#8b98b0;}
.cz-foot p.cz-ftag{color:#9fb0c9;margin-top:4px;}
.cz-foot p.cz-flinks{margin-top:12px;color:#5f6d87;}
.cz-foot p.cz-flinks a{color:#9fb0c9;font-weight:600;margin:0 4px;}
.cz-foot p.cz-dim{color:#5f6d87;font-size:12px;margin-top:12px;}
.cz-foot a{color:#9fb0c9;text-decoration:none;font-weight:500;}
.cz-foot a:hover{color:#fff;text-decoration:none;}
@media (prefers-color-scheme:dark){.cz-foot{background:#0a1020;border-top:1px solid var(--cz-border);}}
@media print{.cz-foot{display:none!important;}}

/* 글 페이지(story) 안에서 본문 폭에 맞춘 둥근 푸터 */
.cz-foot.cz-foot-card{max-width:820px;margin:44px auto 0;border-radius:18px;padding:28px 22px;}

/* ===== 유틸 ===== */
.cz-hide-mobile{display:initial;} .cz-only-mobile{display:none;}
@media (max-width:640px){.cz-hide-mobile{display:none;} .cz-only-mobile{display:initial;}}
.cz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}