/* ==========================================================================
   studycafe.buchupork.com — Design System
   스터디카페 창업 비용 매거진 · Pearl White × Slate · Editorial Serif
   ========================================================================== */

:root{
  /* --- Color: pearl white + slate neutrals, deep teal accent --- */
  --sc-pearl:        #FDFDFB;
  --sc-pearl-soft:   #F6F5F1;
  --sc-pearl-deep:   #EFEDE6;
  --sc-ink:          #1E2530;   /* slate-900 headings */
  --sc-slate-700:    #3F4759;
  --sc-slate-500:    #64748B;
  --sc-slate-300:    #CBD5E1;
  --sc-slate-100:    #E7E9EE;
  --sc-border:       #E4E2D9;
  --sc-accent:       #0F766E;   /* deep teal */
  --sc-accent-600:   #0B5C56;
  --sc-accent-100:   #E4F1EF;
  --sc-white:        #FFFFFF;

  /* --- Spacing (8pt scale) --- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-7: 64px; --sp-8: 80px;
  --sp-9: 96px; --sp-10: 120px; --sp-11: 140px;

  /* --- Radius / Shadow (tokens) --- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --sh-sm: 0 1px 3px rgba(30,37,48,.06), 0 1px 2px rgba(30,37,48,.04);
  --sh-md: 0 8px 24px rgba(30,37,48,.08);
  --sh-lg: 0 24px 60px rgba(30,37,48,.16);
  --sh-hover: 0 20px 40px rgba(30,37,48,.16);

  /* --- Type --- */
  --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-serif: 'Noto Serif KR', serif;

  --transition-fast: 180ms cubic-bezier(.4,0,.2,1);
  --transition-med: 260ms cubic-bezier(.4,0,.2,1);
}

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

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-base); color:var(--sc-slate-700);
  background:var(--sc-pearl); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:3px solid var(--sc-accent); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4{ color:var(--sc-ink); font-family:var(--font-serif); font-weight:800; line-height:1.3; letter-spacing:-0.01em; margin:0 0 var(--sp-2); }
h1{ font-size:clamp(34px,5.2vw,58px); line-height:1.2; letter-spacing:-0.02em; }
h2{ font-size:clamp(24px,3.2vw,32px); }
h3{ font-size:clamp(19px,2.2vw,22px); }
.eyebrow{ font-family:var(--font-base); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--sc-accent); }

.container{ max-width:1220px; margin:0 auto; padding:0 24px; }
.prose-width{ max-width:760px; margin:0 auto; }

/* ---------------- Sticky preview bar (히어로 연출: 상단 고정 프리뷰 존) ---------------- */
.sc-previewbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  background:rgba(253,253,251,.92); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--sc-border);
  padding:10px 24px; transform:translateY(-100%);
  transition:transform var(--transition-med);
}
.sc-previewbar.is-visible{ transform:translateY(0); }
.sc-previewbar__thumb{ width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; box-shadow:var(--sh-sm); flex:none; }
.sc-previewbar__meta{ flex:1; min-width:0; }
.sc-previewbar__title{ font-family:var(--font-serif); font-weight:700; font-size:14px; color:var(--sc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-previewbar__track{ height:3px; background:var(--sc-slate-100); border-radius:var(--r-pill); margin-top:5px; overflow:hidden; }
.sc-previewbar__fill{ height:100%; width:0%; background:var(--sc-accent); transition:width 120ms linear; }
.sc-previewbar__cta{ flex:none; font-size:13px; font-weight:700; color:var(--sc-accent); border:1px solid var(--sc-accent); padding:8px 14px; border-radius:var(--r-pill); }

/* ---------------- Header / nav ---------------- */
.sc-header{ background:var(--sc-pearl); border-bottom:1px solid var(--sc-border); position:relative; z-index:50; }
.sc-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; gap:24px; }
.sc-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:800; font-size:20px; color:var(--sc-ink); }
.sc-logo img{ width:34px; height:34px; border-radius:8px; }
.sc-nav{ display:flex; align-items:center; gap:6px; }
.sc-nav > li{ position:relative; list-style:none; }
.sc-nav > li > a{ display:block; padding:10px 16px; font-weight:600; font-size:15px; color:var(--sc-slate-700); border-radius:var(--r-pill); transition:background var(--transition-fast), color var(--transition-fast); }
.sc-nav > li > a:hover, .sc-nav > li.has-panel:hover > a{ background:var(--sc-pearl-soft); color:var(--sc-ink); }

/* ---- Mega catalog dropdown (글 카드/그리드 패턴) + Hub nav panel (카테고리 내비게이션) ---- */
.sc-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  width:min(760px,90vw); background:var(--sc-white); border:1px solid var(--sc-border); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:28px; display:grid; grid-template-columns:220px 1fr; gap:28px;
  opacity:0; visibility:hidden; transition:opacity var(--transition-med), transform var(--transition-med);
}
.sc-nav > li.has-panel:hover .sc-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sc-panel__cats{ display:flex; flex-direction:column; gap:4px; border-right:1px solid var(--sc-border); padding-right:20px; }
.sc-panel__cats a{ padding:10px 12px; border-radius:var(--r-sm); font-weight:700; color:var(--sc-ink); font-size:15px; }
.sc-panel__cats a:hover{ background:var(--sc-accent-100); color:var(--sc-accent-600); }
.sc-panel__side h4{ font-family:var(--font-base); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--sc-slate-500); margin-bottom:12px; }
.sc-panel__post{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.sc-panel__post img{ width:64px; height:64px; border-radius:var(--r-sm); object-fit:cover; box-shadow:var(--sh-sm); flex:none; }
.sc-panel__post span{ font-size:14px; font-weight:600; color:var(--sc-slate-700); line-height:1.5; }

/* ---------------- Hero ---------------- */
.sc-hero{ position:relative; padding:var(--sp-9) 0 var(--sp-8); background:linear-gradient(180deg,var(--sc-pearl) 0%,var(--sc-pearl-soft) 100%); overflow:hidden; }
.sc-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.sc-hero__eyebrow{ margin-bottom:14px; }
.sc-hero__title{ margin-bottom:18px; }
.sc-hero__desc{ font-size:18px; line-height:1.8; color:var(--sc-slate-500); max-width:520px; margin-bottom:28px; }
.sc-hero__cta{ display:inline-flex; align-items:center; gap:10px; background:var(--sc-ink); color:var(--sc-pearl); font-weight:700; padding:15px 26px; border-radius:var(--r-pill); transition:transform var(--transition-fast), box-shadow var(--transition-fast); }
.sc-hero__cta:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.sc-hero__figure{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 15px -22px rgba(30,37,48,.18), var(--sh-lg); }
.sc-hero__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.sc-hero__figure::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,37,48,.55) 0%,rgba(30,37,48,0) 40%); }
.sc-hero__figcap{ position:absolute; left:20px; right:20px; bottom:18px; color:#fff; font-weight:700; font-size:15px; z-index:2; }

/* ---------------- Category tabs ---------------- */
.sc-tabs{ display:flex; gap:10px; flex-wrap:wrap; padding:var(--sp-6) 0 var(--sp-4); border-bottom:1px solid var(--sc-border); }
.sc-tabs a{ padding:10px 20px; border-radius:var(--r-pill); font-weight:700; font-size:14px; border:1px solid var(--sc-border); color:var(--sc-slate-700); transition:all var(--transition-fast); }
.sc-tabs a.is-active, .sc-tabs a:hover{ background:var(--sc-ink); border-color:var(--sc-ink); color:#fff; }

/* ---------------- Article grid + cards (얕은 그림자 크롭 + 호버 리프트) ---------------- */
.sc-layout{ display:grid; grid-template-columns:1fr 340px; gap:56px; padding:var(--sp-8) 0; }
.sc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.sc-card{ display:flex; flex-direction:column; background:var(--sc-white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform 180ms ease, box-shadow 180ms ease; }
.sc-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-hover); }
.sc-card__figure{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.sc-card__figure img{ width:100%; height:100%; object-fit:cover; filter:drop-shadow(0 10px 14px rgba(30,37,48,.10)); transition:transform 260ms ease; }
.sc-card:hover .sc-card__figure img{ transform:scale(1.04); }
.sc-card__cat{ position:absolute; top:14px; left:14px; background:rgba(253,253,251,.92); color:var(--sc-accent-600); font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); }
.sc-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sc-card__title{ font-family:var(--font-serif); font-weight:800; font-size:19px; line-height:1.4; color:var(--sc-ink); }
.sc-card__excerpt{ font-size:14.5px; color:var(--sc-slate-500); line-height:1.7; flex:1; }
.sc-card__meta{ font-size:12.5px; color:var(--sc-slate-300); font-weight:600; }

/* ---------------- Category highlight (편집형 추천: 대표1 + 보조3) ---------------- */
.sc-highlight{ padding:var(--sp-8) 0; border-top:1px solid var(--sc-border); }
.sc-highlight__chips{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.sc-highlight__chips span{ font-size:12.5px; font-weight:700; color:var(--sc-accent-600); background:var(--sc-accent-100); padding:6px 14px; border-radius:var(--r-pill); }
.sc-highlight__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; }
.sc-highlight__main{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); min-height:360px; }
.sc-highlight__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sc-highlight__main::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,37,48,.72) 0%,rgba(30,37,48,.1) 55%); }
.sc-highlight__main-body{ position:relative; z-index:2; color:#fff; padding:28px; align-self:flex-end; margin-top:auto; display:flex; flex-direction:column; height:100%; justify-content:flex-end; }
.sc-highlight__main-body h3{ color:#fff; font-size:24px; }
.sc-highlight__sub{ display:flex; flex-direction:column; gap:18px; }
.sc-highlight__sub-item{ display:flex; gap:14px; align-items:center; }
.sc-highlight__sub-item img{ width:88px; height:88px; border-radius:var(--r-md); object-fit:cover; box-shadow:var(--sh-sm); flex:none; }
.sc-highlight__sub-item h4{ font-size:15.5px; margin-bottom:4px; }
.sc-highlight__sub-item p{ font-size:13px; color:var(--sc-slate-500); margin:0; }

/* ---------------- Sidebar ---------------- */
.sc-sidebar{ display:flex; flex-direction:column; gap:32px; }
.sc-widget{ background:var(--sc-white); border:1px solid var(--sc-border); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); }
.sc-widget h4{ font-family:var(--font-serif); font-size:17px; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--sc-ink); }
.sc-widget__figure{ border-radius:var(--r-md); overflow:hidden; margin-bottom:14px; aspect-ratio:16/9; }
.sc-widget__figure img{ width:100%; height:100%; object-fit:cover; }
.sc-pop-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--sc-slate-100); align-items:flex-start; }
.sc-pop-item:last-child{ border-bottom:none; padding-bottom:0; }
.sc-pop-item__rank{ font-family:var(--font-serif); font-weight:800; font-size:20px; color:var(--sc-slate-300); flex:none; width:26px; }
.sc-pop-item__title{ font-size:14px; font-weight:600; color:var(--sc-ink); line-height:1.55; }

/* ---- 인기 검색어 (순위 + 카테고리 칩) ---- */
.sc-search-rank{ list-style:none; }
.sc-search-rank li{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--sc-slate-100); }
.sc-search-rank li:last-child{ border-bottom:none; }
.sc-search-rank .n{ font-family:var(--font-serif); font-weight:800; color:var(--sc-accent); width:20px; }
.sc-search-rank .kw{ flex:1; font-weight:600; font-size:14px; color:var(--sc-ink); }
.sc-search-rank .chip{ font-size:11px; font-weight:700; color:var(--sc-slate-500); background:var(--sc-pearl-soft); padding:4px 10px; border-radius:var(--r-pill); }

/* ---------------- Newsletter (연재 알림 폼) ---------------- */
.sc-newsletter{ padding:var(--sp-8) 0; }
.sc-newsletter__box{ background:var(--sc-ink); border-radius:var(--r-lg); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; overflow:hidden; position:relative; }
.sc-newsletter__box::before{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(15,118,110,.35),transparent 70%); }
.sc-newsletter__text h3{ color:#fff; margin-bottom:10px; }
.sc-newsletter__text p{ color:var(--sc-slate-300); font-size:14.5px; line-height:1.7; }
.sc-newsletter__form{ display:flex; flex-direction:column; gap:12px; position:relative; z-index:2; }
.sc-newsletter__row{ display:flex; gap:10px; }
.sc-newsletter__row input[type=email]{ flex:1; padding:14px 16px; border-radius:var(--r-md); border:none; font-size:14.5px; min-width:0; }
.sc-newsletter__row button{ background:var(--sc-accent); color:#fff; border:none; font-weight:700; padding:14px 22px; border-radius:var(--r-md); transition:background var(--transition-fast); white-space:nowrap; }
.sc-newsletter__row button:hover{ background:var(--sc-accent-600); }
.sc-newsletter__toggle{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--sc-slate-300); }
.sc-toggle{ width:38px; height:22px; border-radius:var(--r-pill); background:var(--sc-slate-500); position:relative; flex:none; }
.sc-toggle::after{ content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; left:3px; transition:left var(--transition-fast); }
.sc-toggle.is-on{ background:var(--sc-accent); }
.sc-toggle.is-on::after{ left:19px; }
.sc-newsletter__note{ font-size:12px; color:var(--sc-slate-500); }

/* ---------------- Tag cloud ---------------- */
.sc-tagcloud{ padding:var(--sp-8) 0; border-top:1px solid var(--sc-border); }
.sc-tagcloud__list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; }
.sc-tagcloud__list a{ padding:9px 18px; border-radius:var(--r-pill); background:var(--sc-pearl-soft); font-weight:600; font-size:13.5px; color:var(--sc-slate-700); border:1px solid var(--sc-border); transition:all var(--transition-fast); }
.sc-tagcloud__list a:hover{ background:var(--sc-ink); color:#fff; border-color:var(--sc-ink); }

/* ---------------- Related posts ---------------- */
.sc-related{ padding:var(--sp-8) 0; border-top:1px solid var(--sc-border); }

/* ---------------- Footer ---------------- */
.sc-footer{ background:var(--sc-ink); color:var(--sc-slate-300); padding:var(--sp-8) 0 var(--sp-5); margin-top:var(--sp-9); }
.sc-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1); }
.sc-footer__brand{ font-family:var(--font-serif); font-weight:800; font-size:19px; color:#fff; margin-bottom:12px; }
.sc-footer__desc{ font-size:13.5px; line-height:1.8; max-width:320px; }
.sc-footer h5{ color:#fff; font-size:13.5px; margin-bottom:14px; letter-spacing:.04em; }
.sc-footer ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.sc-footer a{ font-size:13.5px; color:var(--sc-slate-300); transition:color var(--transition-fast); }
.sc-footer a:hover{ color:#fff; }
.sc-footer__bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--sc-slate-500); }
.sc-footer__legal{ font-size:11.5px; color:var(--sc-slate-500); line-height:1.7; max-width:920px; margin-top:18px; }

/* ---------------- Post content typography (문단 호흡) ---------------- */
.sc-post-body{ font-size:18px; line-height:1.85; color:var(--sc-slate-700); }
.sc-post-body h2{ margin-top:56px; padding-top:8px; scroll-margin-top:90px; }
.sc-post-body h3{ margin-top:36px; scroll-margin-top:90px; }
.sc-post-body p{ margin:0 0 28px; }
.sc-post-body ul,.sc-post-body ol{ margin:0 0 28px; padding-left:1.4em; }
.sc-post-body li{ margin-bottom:10px; }
.sc-post-body blockquote{ margin:32px 0; padding:6px 0 6px 24px; border-left:3px solid var(--sc-accent); font-family:var(--font-serif); font-style:italic; font-size:19px; color:var(--sc-ink); }
.sc-post-body table{ width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; box-shadow:var(--sh-sm); border-radius:var(--r-md); overflow:hidden; }
.sc-post-body table th{ background:var(--sc-ink); color:#fff; text-align:left; padding:12px 16px; font-weight:700; }
.sc-post-body table td{ padding:12px 16px; border-bottom:1px solid var(--sc-slate-100); }
.sc-post-body table tr:nth-child(even) td{ background:var(--sc-pearl-soft); }
.sc-callout{ background:var(--sc-accent-100); border-radius:var(--r-md); padding:20px 24px; margin:28px 0; font-size:15.5px; color:var(--sc-accent-600); }
.sc-summary-box{ background:var(--sc-pearl-soft); border:1px solid var(--sc-border); border-radius:var(--r-lg); padding:22px 26px; margin-bottom:32px; }
.sc-summary-box h5{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--sc-accent-600); margin-bottom:10px; }
.sc-summary-box ul{ padding-left:1.2em; font-size:14.5px; }

/* ---- Inline bar chart (HTML/CSS, no JS lib) ---- */
.sc-barchart{ margin:28px 0; display:flex; flex-direction:column; gap:12px; }
.sc-barchart__row{ display:grid; grid-template-columns:130px 1fr 70px; align-items:center; gap:12px; font-size:13.5px; }
.sc-barchart__label{ color:var(--sc-slate-700); font-weight:600; }
.sc-barchart__track{ background:var(--sc-slate-100); border-radius:var(--r-pill); height:14px; overflow:hidden; }
.sc-barchart__fill{ height:100%; background:linear-gradient(90deg,var(--sc-accent),var(--sc-accent-600)); border-radius:var(--r-pill); }
.sc-barchart__val{ text-align:right; color:var(--sc-slate-500); font-weight:700; }

.legal-notice, .ai-notice, .affiliate-notice{ font-family:var(--font-base); }

/* ---------------- TOC (Easy Table of Contents override) ---------------- */
#ez-toc-container{ background:var(--sc-pearl-soft) !important; border:1px solid var(--sc-border) !important; border-radius:var(--r-lg) !important; padding:22px 26px !important; margin:0 0 40px !important; box-shadow:var(--sh-sm); }
#ez-toc-container .ez-toc-title{ font-family:var(--font-serif) !important; font-weight:800 !important; font-size:16px !important; color:var(--sc-ink) !important; }
.ez-toc-list a{ color:var(--sc-slate-700) !important; font-size:14.5px !important; }
.ez-toc-list a:hover{ color:var(--sc-accent) !important; }

/* ---------------- Utility: remove default WP chrome ---------------- */
.sc-page{ background:var(--sc-pearl); }
#wpadminbar{ display:none !important; }
html{ margin-top:0 !important; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .sc-hero__grid{ grid-template-columns:1fr; }
  .sc-layout{ grid-template-columns:1fr; }
  .sc-highlight__grid{ grid-template-columns:1fr; }
  .sc-footer__grid{ grid-template-columns:1fr; }
  .sc-newsletter__box{ grid-template-columns:1fr; }
  .sc-panel{ position:static; transform:none; width:100%; grid-template-columns:1fr; opacity:1; visibility:visible; display:none; box-shadow:none; border:none; padding:12px 0; }
  .sc-nav > li.has-panel:hover .sc-panel{ display:grid; }
}
@media (max-width: 640px){
  .sc-grid{ grid-template-columns:1fr; }
  .container{ padding:0 18px; }
  .sc-nav{ display:none; }
  h1{ font-size:32px; }
  .sc-newsletter__box, .sc-footer{ padding:28px 22px; }
  .sc-footer{ padding-left:18px; padding-right:18px; }
  .sc-highlight__sub-item img{ width:64px; height:64px; }
}
a, button, input[type=submit]{ min-height:0; }
.sc-nav > li > a, .sc-hero__cta, .sc-tabs a, .sc-newsletter__row button{ min-height:44px; display:inline-flex; align-items:center; }