/* ================================================================
   기업백년연구소 — 공통 신(新) 디자인 셸 (site.css)
   BCG식 고정바+햄버거+풀블리드+Fluid 타이포 · 전 페이지 단일 SoT
   2026-06-17 Nova · site.js와 1세트 (헤더/오버레이/푸터는 site.js가 주입)
   본문 레이아웃은 건드리지 않음 — 바·메뉴·푸터·전역 타이포만 통일
   ================================================================ */
:root {
  --ci-bg:#FAFAF8; --ci-section:#E8E4DC; --ci-surface:#F2EEE6; --ci-inverse:#1A1A1A;
  --ci-ink:#1A1A1A; --ci-muted:#5A6072; --ci-ghost:#9AA0B0; --ci-ink-inverse:#FAFAF8;
  --ci-warm:#8B6F47; --ci-warm-light:#B89A70; --ci-warm-pale:#D4BFA0;
  --ci-rule:#D0C8BC; --ci-rule-light:#E8E4DC; --ci-corporate:#2E4576;
  --font-serif:'Noto Serif KR','Georgia',serif;
  --font-sans:'Noto Sans KR','Helvetica Neue',sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --maxw:1440px;
  --gutter:clamp(1.2rem, 5vw, 5rem);
  --bar-h:64px;
  /* ── 타이포 표준 스케일 (2026-06-17 Nova) — 화면 따라 유체 ──
     폰트: 제목=Noto Serif KR / 본문·라벨=Noto Sans KR
     작은=0.82~0.92 · 본문=1.0~1.08 · 중간(설명)=1.1~1.35
     소제목 H3=1.2~1.4 · H2=1.55~2.2 · 큰(헤더 제목)=2.3~3.4 */
  --fs-eyebrow: .82rem;
  --fs-small:   clamp(.82rem, .78rem + .25vw, .92rem);
  --fs-body:    clamp(1rem,  .95rem + .3vw,  1.08rem);
  --fs-lead:    clamp(1.1rem, 1rem + .6vw,   1.35rem);
  --fs-h3:      clamp(1.2rem, 1rem + .7vw,   1.4rem);
  --fs-h2:      clamp(1.55rem,1rem + 2vw,    2.2rem);
  --fs-display: clamp(2.3rem, 1.2rem + 3.2vw,3.4rem);
}
/* 전역 유체 타이포 (미디어쿼리 폰트조정 불필요) */
html.sitewide { scroll-behavior:smooth; }
body.sitewide { font-size: clamp(1rem, .6rem + .55vw, 1.16rem); -webkit-font-smoothing:antialiased; }
body.sitewide.has-fixed-bar { padding-top: var(--bar-h); }

/* 공통 유틸 */
.sw-wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.sw-bleed { width:100%; }

/* ── 상단 고정 바 ── */
#site-bar { position:fixed; top:0; left:0; right:0; z-index:500; height:var(--bar-h); display:flex; align-items:center; gap:clamp(.7rem,2vw,1.4rem); padding-inline:var(--gutter); transition:background .3s var(--ease), border-color .3s var(--ease); font-family:var(--font-sans); }
#site-bar.solid { background:rgba(250,250,248,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--ci-rule); }
#site-bar.over { background:transparent; border-bottom:1px solid transparent; }
#site-bar .sb-burger { background:none; border:none; cursor:pointer; display:flex; flex-direction:column; gap:4px; padding:6px; flex-shrink:0; color:var(--ci-ink); }
#site-bar.over .sb-burger, #site-bar.over .sb-brand, #site-bar.over .sb-tab, #site-bar.over .sb-login { color:#fff; }
#site-bar .sb-burger span { width:22px; height:2px; background:currentColor; transition:.3s var(--ease); }
#site-bar .sb-brand { font-family:var(--font-serif); font-size:clamp(1rem,1.4vw,1.2rem); font-weight:700; letter-spacing:-.01em; white-space:nowrap; flex-shrink:0; color:var(--ci-ink); text-decoration:none; }
#site-bar .sb-tabs { margin-left:clamp(.5rem,2.5vw,2rem); display:flex; gap:clamp(.6rem,1.5vw,1.6rem); align-items:center; }
#site-bar .sb-tab { font-size:clamp(.8rem,1vw,.92rem); font-weight:500; color:var(--ci-muted); white-space:nowrap; text-decoration:none; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
#site-bar .sb-tab:hover { color:var(--ci-warm); }
#site-bar .sb-tab.active { color:var(--ci-warm); border-bottom-color:var(--ci-warm); font-weight:600; }
#site-bar.over .sb-tab.active { color:#fff; border-bottom-color:#fff; }
#site-bar .sb-right { margin-left:auto; display:flex; align-items:center; gap:clamp(.6rem,1.5vw,1.1rem); flex-shrink:0; }
#site-bar .sb-login { font-size:clamp(.78rem,1vw,.88rem); font-weight:500; color:var(--ci-muted); white-space:nowrap; text-decoration:none; }
#site-bar .sb-login:hover { color:var(--ci-warm); }
#site-bar .sb-cta { padding:.5rem 1.1rem; border-radius:4px; background:var(--ci-warm); color:#fff; font-size:clamp(.78rem,1vw,.88rem); font-weight:600; white-space:nowrap; text-decoration:none; transition:background .2s; }
#site-bar .sb-cta:hover { background:var(--ci-inverse); color:#fff; }
@media (max-width:920px){ #site-bar .sb-tabs{ display:none; } }
@media (max-width:520px){ #site-bar .sb-login{ display:none; } }

/* ── 햄버거 전체메뉴 오버레이 ── */
#site-overlay { position:fixed; inset:0; z-index:600; background:var(--ci-inverse); opacity:0; visibility:hidden; transition:opacity .35s var(--ease),visibility .35s; overflow-y:auto; font-family:var(--font-sans); }
#site-overlay.open { opacity:1; visibility:visible; }
#site-overlay .so-bg { position:absolute; inset:0; background-image:url('/assets/welcome/menu-placeholder.jpg'),url('https://picsum.photos/seed/biz100menu/1600/1000'); background-size:cover; background-position:center; filter:brightness(.3) saturate(.7); }
#site-overlay .so-in { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:5.5rem var(--gutter) 3rem; }
#site-overlay .so-close { position:absolute; top:1rem; right:var(--gutter); background:none; border:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
#site-overlay .so-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:clamp(1.6rem,3vw,3rem); }
#site-overlay .so-group h4 { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ci-warm-pale); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid rgba(255,255,255,.16); }
#site-overlay .so-group a { display:block; font-size:clamp(1rem,1.1vw,1.15rem); color:#fff; padding:.42rem 0; text-decoration:none; transition:color .2s,padding-left .2s; }
#site-overlay .so-group a:hover { color:var(--ci-warm-light); padding-left:.4rem; }
#site-overlay .so-foot { margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; }
#site-overlay .so-foot a { color:rgba(255,255,255,.7); font-size:.85rem; text-decoration:none; }
#site-overlay .so-foot a:hover { color:#fff; }
#site-overlay .so-foot .so-cta { padding:.6rem 1.4rem; background:var(--ci-warm); color:#fff; border-radius:4px; font-weight:600; }

/* ── 공통 푸터 ── */
#site-footer { background:var(--ci-inverse); border-top:3px solid var(--ci-corporate); padding-block:clamp(2.4rem,4vw,3.4rem); font-family:var(--font-sans); font-size:clamp(.8rem,.9vw,.88rem); color:rgba(250,250,248,.72); line-height:2; }
#site-footer .sf-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,45%),1fr)); gap:1.4rem 1.2rem; margin-bottom:1.6rem; }
#site-footer .sf-cols h5 { font-family:var(--font-serif); font-size:.85rem; font-weight:600; color:var(--ci-ink-inverse); margin-bottom:.5rem; }
#site-footer .sf-cols a { display:block; font-size:.78rem; color:rgba(250,250,248,.62); padding:.16rem 0; text-decoration:none; }
#site-footer .sf-cols a:hover { color:var(--ci-warm-light); }
#site-footer .sf-brand { font-family:var(--font-serif); font-size:1.05rem; font-weight:700; color:var(--ci-ink-inverse); }
#site-footer .sf-law { font-size:.72rem; color:rgba(250,250,248,.42); margin-top:.8rem; line-height:1.7; max-width:68ch; }
#site-footer .sf-policy { margin-top:.7rem; font-size:.75rem; }
#site-footer .sf-policy a { color:var(--ci-warm-light); text-decoration:none; }

/* ── 일관 원칙: 본문 박스 해제 (화면 따라 넓게) ──────────────
   페이지 자체 좁은 .container(920~1100px)를 화면폭 따라 넓힘.
   본문 단락 가독폭은 페이지 자체 max-width(measure)가 유지하므로
   텍스트가 과도하게 늘어나지 않고 '레이아웃'만 시원해진다. */
/* 도구·일반 본문 = 넓게 / 글(posts) 본문 = 가독폭 */
body.sitewide .container { max-width: min(94vw, 1280px) !important; padding-inline: clamp(1.2rem,5vw,4rem); margin-inline:auto; }
body.sitewide .wrap { max-width: min(92vw, 940px) !important; padding-inline: clamp(1.2rem,4vw,2rem); margin-inline:auto; }

/* ── 헤더 표준: 위치·높이·정렬 균일 (배경색은 페이지 성격 유지) ── */
body.sitewide .hero,
body.sitewide .hd,
body.sitewide header.hd {
  min-height: auto !important;
  display: block !important;
  text-align: left !important;
  padding-top: calc(var(--bar-h) + clamp(1.8rem, 4vw, 3rem)) !important;
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem) !important;
}
/* 헤더 텍스트 표준 크기: 큰=display / 중간=lead / 작은=small */
body.sitewide .hero h1,
body.sitewide .hd h1,
body.sitewide header.hd h1,
body.sitewide .welcome-hero h1 { font-size: var(--fs-display) !important; line-height: 1.18; margin-bottom: .7rem; }
body.sitewide .hero-desc,
body.sitewide .hero-sub,
body.sitewide .lede { font-size: var(--fs-lead) !important; line-height: 1.7; }
body.sitewide .hero-label,
body.sitewide .sec-label,
body.sitewide .kicker,
body.sitewide .section-eyebrow,
body.sitewide .track-name,
body.sitewide .hero-tag { font-size: var(--fs-small) !important; }

/* ── 헤더 키워드: 박스 제거 → #해시 텍스트 (내부 F-코드 노출 정리와 1세트) ── */
body.sitewide .hero-fact-row { display:flex; flex-wrap:wrap; gap:clamp(.7rem,1.8vw,1.6rem); margin-top:1.5rem; }
body.sitewide .hero-fact {
  background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important;
  font-size:var(--fs-small) !important; font-weight:600; color:var(--ci-warm) !important;
}
body.sitewide .hero-fact::before { content:'#'; margin-right:.12em; color:var(--ci-warm-light); }

/* ── American Taboo 연재 커버 (요트사진) — webnovel 각 화 + blog 연재 섹션 ──
   url은 site.css(/assets/) 기준 상대 → 로컬·배포 양쪽 동작. 빈티지 톤 유지 + 어두운 오버레이로 텍스트 가독 */
body.sitewide .novel-head {
  position: relative;
  /* 얼굴이 보이도록 상단 오버레이는 옅게, 텍스트가 놓이는 하단만 진하게 */
  background: linear-gradient(180deg, rgba(18,16,13,.18) 0%, rgba(18,16,13,.26) 42%, rgba(18,16,13,.72) 100%), url('welcome/yacht.webp') center 40%/cover no-repeat;
  border-bottom: 3px solid var(--ci-warm);
  padding-block: clamp(2rem,5vw,3.4rem) clamp(2.6rem,5vw,4.2rem) !important;
}
body.sitewide .novel-head .container { position: relative; z-index: 1; }
body.sitewide .novel-head .ep-num,
body.sitewide .novel-head h1,
body.sitewide .novel-head .novel-byline,
body.sitewide .novel-head .novel-byline span { color:#fff !important; text-shadow:0 1px 10px rgba(0,0,0,.62); }
body.sitewide .novel-head .series-label a { color:var(--ci-warm-pale) !important; text-shadow:0 1px 8px rgba(0,0,0,.62); }
/* blog.html 웹소설(American Taboo) 연재 섹션 — 다크 위 요트 커버 */
body.sitewide .webnovel-section {
  background: linear-gradient(rgba(16,14,12,.74), rgba(16,14,12,.86)), url('welcome/yacht.webp') center/cover no-repeat !important;
}