/* ───────────────────────────────────────────────
   솜니움 인스타 디자인을 홈피에 (2026-10-24 확정판)
   기준: ~/작업/솜니움_인스타_올릴것/홈피적용/솜니움_인스타_디자인_홈피적용.md
   - 바탕은 종이(--paper), 순백 쓰지 않음. 구역은 쪽빛·종이를 번갈아.
   - 형광(--lime)은 쪽빛 위 도형(점·원·밑줄)에만. 글자에 쓰지 않음.
   - 분홍은 한 화면(카드)에 한 낱말만. 밝은 파랑은 쓰지 않음.
   ─────────────────────────────────────────────── */
:root{
  --paper:#F1F0E9;
  --ink:#1B1D22;
  --navy:#23407A;
  --feat:#F6F5EF;
  --line:#C9C8BF;
  --sub:#5D6168;
  --navy-sub:#C9D3EA;
  --lime:#D9F546;
  --pink-light:#F4A3C4;
  --pink-hot:#E2366F;
  --font-hand:'East Sea Dokdo', 'Black Han Sans', sans-serif;
  --font-num:'Archivo Black', sans-serif;
  --font-body:Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display:var(--font-hand);
}
:root,.theme-b{
  --bg:var(--paper);--muted:var(--sub);--rule:var(--ink);--accent:var(--navy);
  --feature:var(--navy);--feature-ink:var(--feat);
  --now-bg:var(--navy);--now-ink:var(--feat);--now-muted:var(--navy-sub);--now-line:rgba(246,245,239,.22);
  --band-bg:var(--navy);--band-ink:var(--feat);--band-muted:var(--navy-sub);--band-line:rgba(246,245,239,.25);
}
/* 어둡게: 먹 바탕 + 미색 글자. 밝은 파랑 대신 쪽빛 보조색 */
.theme-a{
  --paper:#15171B;--ink:#ECEBE4;--line:#3A3D43;--sub:#A9ABA6;
  --bg:#15171B;--muted:#B4B4AD;--rule:#ECEBE4;--accent:var(--navy-sub);
  --feature:var(--navy);--feature-ink:var(--feat);--now-bg:var(--navy);--now-ink:var(--feat);--now-muted:var(--navy-sub);--now-line:rgba(246,245,239,.22);
  --band-bg:var(--navy);--band-ink:var(--feat);--band-muted:var(--navy-sub);--band-line:rgba(246,245,239,.25);
}
/* 어둡게: 종이 자리를 먹색으로 바꿔 종이·쪽빛 번갈이를 먹·쪽빛으로 */
.theme-a .logo img{content:url(somnium_wordmark_on_navy.svg)}
.theme-a .pc{background:#1F2228;border-color:#3A3D43}
.theme-a .pc-badge{color:#1B1D22}
.theme-a .pc-facts dt{color:#A9ABA6}
.theme-a .pc-more{color:var(--navy-sub)}
.theme-a .pc-btn{background:var(--feat);color:#1B1D22}
.theme-a .pz-intro .intro-l{border-color:var(--feat)}
html,body{background:var(--bg)}
body{font-family:var(--font-body);color:var(--ink)}

/* 손글씨 제목: 굵기 보정(글자크기/60) */
h1,h2,.pz-display,.page-intro h1,.reading-body h2,.content-section h2,.resources-section h2,
.yt-section h2,.social-strip h2,.news-head h2,.pay-bar h2,.pz-month h2,.vid-group h2,.yt-series strong,.band-h,.pc-title,.brand-hand{
  font-family:var(--font-hand);font-weight:400;letter-spacing:0;-webkit-text-stroke:calc(1em / 60) currentColor;paint-order:stroke fill}
.num,.pz-day,.acct-num strong,.pay-num strong{font-family:var(--font-num);-webkit-text-stroke:0}

/* 머리말: 조립 글자 로고 */
.site-header{background:var(--paper);border-bottom:2px solid var(--ink)}
.theme-a .site-header{background:var(--bg)}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:38px;width:auto;display:block}
.logo span{font-size:12.5px;font-weight:800;color:var(--sub);line-height:1.35}
.site-nav a[href$="/participate/"]{background:var(--navy);color:var(--feat)}

/* 쪽빛 띠: 화면 끝까지(본문 폭 안의 구역을 그대로 늘림) */
.band-navy{background:var(--navy);color:var(--feat);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax)}
.band-paper{background:var(--paper);color:var(--ink);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.band-navy a{color:var(--feat)}
.band-h{position:relative;margin:0 0 28px;font-size:clamp(38px,5vw,64px);line-height:1.05;padding-left:30px}
.band-h::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--lime)}
.band-paper .band-h::before,.pz-sec:not(.band-navy) .band-h::before{background:var(--navy)}

/* 첫 화면: 쪽빛 한 띠에 로고(왼쪽)와 공식 소개(오른쪽). 빈 공간 줄임 */
.pz-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 56px;align-items:center;padding:36px 0 38px}
.pz-hero .brand-mark{display:block;width:min(250px,100%);height:auto}
.brand-hand{margin:14px 0 0;font-size:clamp(30px,3.4vw,46px);line-height:1.05;color:var(--feat)}
.brand-hand .pk{color:var(--pink-light)}
.hero-r{border-left:2px solid rgba(246,245,239,.35);padding-left:40px}
.hero-name{margin:0;font-size:16px;color:var(--navy-sub)}
.hero-name b{font-family:var(--font-num);font-weight:400;font-size:26px;color:var(--feat);margin-right:8px;letter-spacing:-.01em}
.hero-about{margin:14px 0 0;font-size:19px;line-height:1.7;font-weight:600;color:var(--feat)}
.hero-meta{margin:14px 0 0;font-size:15px;color:var(--navy-sub)}
@media (max-width:760px){
  .pz-hero{grid-template-columns:1fr;padding:30px 0 32px;gap:20px}
  .pz-hero .brand-mark{width:200px}
  .hero-r{border-left:0;border-top:2px solid rgba(246,245,239,.35);padding:18px 0 0}
  .hero-about{font-size:17px}
}

/* 계좌 띠(쪽빛) */
.pay-bar{background:var(--navy);color:var(--feat);margin-top:0}
.pz-progs + .pay-bar,.pz-hero + .pz-progs{margin-top:0}
.pay-bar .pay-copy{border-color:var(--feat);color:var(--feat)}
.pay-bar .pay-copy:hover,.pay-bar .pay-copy:focus-visible{background:var(--feat);color:var(--navy)}

/* 이달 프로그램: 인스타 색·손글씨 제목만 가져온 가로 카드 (정보 글씨는 읽기 크기로) */
.pz-progs{padding:48px 0 56px}
.pz-progs .band-h{margin-bottom:22px}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:20px}
.pc{display:grid;grid-template-columns:minmax(150px,38%) minmax(0,1fr);background:var(--feat);border:2px solid var(--ink);color:var(--ink);min-width:0}
.pc-head{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;background:var(--pc-bg,var(--navy));color:var(--feat);text-decoration:none;overflow:hidden}
.pc-badge{margin:0;align-self:flex-start;background:var(--feat);color:var(--ink);font-weight:800;font-size:12.5px;line-height:1;padding:6px 8px;white-space:nowrap}
.pc-title{margin:0;font-size:clamp(30px,3vw,40px);line-height:1.1;color:var(--feat);word-break:keep-all}
.pc-pink{color:var(--pink-light)}
.pc-cover{display:block;margin-top:auto;width:58%;max-width:120px;aspect-ratio:2/3;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.pc-head:hover .pc-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pc-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 18px;min-width:0}
.pc-date{margin:auto 0 0;font-family:var(--font-num);font-size:clamp(24px,2.3vw,30px);line-height:1;letter-spacing:-.02em;color:var(--feat);white-space:nowrap}
.pc-lead{margin:0;font-size:15px;line-height:1.6;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-facts{margin:0;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 10px;font-size:14.5px;line-height:1.5}
.pc-facts dt{color:var(--sub)}
.pc-facts dd{margin:0;font-weight:700}
.pc-acts{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pc-btn{display:inline-block;background:var(--navy);color:var(--feat);font-weight:800;font-size:15px;padding:10px 16px;text-decoration:none}
.pc-btn:hover,.pc-btn:focus-visible{background:var(--ink)}
.pc-more{color:var(--navy);font-weight:700;font-size:14.5px}
.pc-qr{margin-left:auto;display:block;width:56px;height:56px}
.pc-qr-svg{width:56px;height:56px;display:block}
@media (max-width:760px){
  .pc{grid-template-columns:1fr}
  .pc-head{flex-direction:row;flex-wrap:wrap;align-items:flex-end;padding:16px}
  .pc-title{flex:1 1 100%;font-size:30px}
  .pc-date{flex-basis:100%;margin-top:4px}
  .pc-qr{display:none}
}

/* 종이 구역 간격 */
.pz-cal-wrap{padding-top:44px}
.news-strip{margin-top:56px}
.pz-month h2{font-size:36px}
.pz-month.is-now h2{color:var(--feat)}
.news-kind,.yt-kicker,.yt-series-tag,.pz-kicker{color:var(--navy)}

/* 영상: 쪽빛 띠 */
main.container>.yt-section.band-navy{padding:72px 0 80px;margin-top:80px}
.yt-section.band-navy .yt-card strong,.yt-section.band-navy time{color:var(--feat)}
.yt-section.band-navy .yt-kicker,.yt-section.band-navy .yt-series-tag,.yt-section.band-navy .yt-series-go{color:var(--navy-sub)}
.yt-section.band-navy .yt-series{border-color:var(--feat)}
.yt-section.band-navy .yt-series-desc{color:var(--navy-sub)}
.yt-section.band-navy .yt-button{background:var(--feat);color:var(--navy)}
.yt-section.band-navy .yt-more{color:var(--feat)}
.yt-section.band-navy .yt-bundle .yt-stack img{box-shadow:6px -6px 0 -1px var(--navy),6px -6px 0 0 var(--feat),12px -12px 0 -1px var(--navy),12px -12px 0 0 var(--feat)}

/* 꼬리말: 쪽빛 + 조립 글자 */
.site-footer{background:var(--navy);color:var(--feat)}
.site-footer a{color:var(--feat)}
.footer-mark{display:block;width:min(260px,60%);height:auto;margin-bottom:18px}
.footer-about{margin:0 0 24px;max-width:46ch;font-size:15.5px;line-height:1.75;color:var(--navy-sub)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pc .pc-apply{color:var(--ink);flex-wrap:nowrap}
.pc-apply span{white-space:nowrap}
.pc-side{min-width:0}

/* 폰 머리말: 로고 한 줄 + 메뉴 한 줄(옆으로 밀기). 세 줄로 접히던 것 줄임 */
@media (max-width:760px){
  .site-header .header-inner{position:relative;padding:14px 0 6px;min-height:0}
  .logo img{height:32px}
  .site-header .header-actions{display:block;min-width:0;width:100%}
  .site-header .site-nav{flex-wrap:nowrap;overflow-x:auto;gap:0 18px;margin-top:8px;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:0 0 auto;min-height:40px}
  .site-nav a[href$="/participate/"]{padding:4px 12px;order:-1}
  .theme-switch{position:absolute;top:14px;right:0;margin:0}
}

/* 어둡게: QR은 밝은 바탕 위에 */
.theme-a .pc-qr{background:var(--feat);padding:3px;box-sizing:content-box}
/* 홈 영상 칸의 솜니움 1기 강좌 4편 */
.yt-firstgen{margin-top:44px}
.yt-firstgen-h{margin:0;font-weight:800;font-size:16px;color:var(--feat)}
.yt-firstgen-h a{margin-left:10px;font-weight:700;color:var(--navy-sub)}
.yt-grid.yt-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:18px}
.yt-grid-4 .yt-card strong{font-size:15px}
@media (max-width:760px){.yt-grid.yt-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}