/* 피디언 전국 시책 리포트 — 웹진 리더 (책 넘김) */
:root{
  --ground:#E9EEF3;
  --surface:#FFFFFF;
  --paper:#F6F8FA;
  --ink:#14213A;
  --ink-2:#26344C;
  --muted:#4E5D70;
  --faint:#77869A;
  --line:#D9E1E9;
  --line-soft:#EBF0F5;
  --data:#2E5EAA;
  --data-soft:rgba(46,94,170,.13);
  --seal:#B3322A;
  --seal-soft:rgba(179,50,42,.10);
  /* 홈페이지와 동일한 글자체 */
  --serif:'Noto Serif KR','Apple SD Gothic Neo','Malgun Gothic',serif;
  --sans:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --pagew:min(94vw,1020px);
  --pageh:640px;   /* JS가 뷰포트에 맞춰 설정 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);color-scheme:light;
  font-family:var(--sans);font-weight:400;font-size:17.5px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;
}

/* ── 상단 바 ── */
.bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:10px clamp(12px,3vw,24px);flex-wrap:wrap}
.bar .bname{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.bar .bno{font-family:var(--mono);font-size:11.5px;color:var(--seal);
  border:1px solid var(--seal);padding:2px 7px;white-space:nowrap}
.bar .sp{flex:1}
.bar a.btn,.bar button.btn{font:inherit;font-size:12.5px;font-family:var(--mono);
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  padding:5px 11px;cursor:pointer;text-decoration:none;white-space:nowrap;border-radius:4px}
.bar a.btn:hover,.bar button.btn:hover{border-color:var(--data);color:var(--data)}
.bar .pgno{font-family:var(--mono);font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 책 ── */
.reader{padding:clamp(12px,2vw,22px) 12px 4px;perspective:2600px;perspective-origin:50% 42%}
.book{position:relative;margin:0 auto;transform-style:preserve-3d;
  width:var(--pagew);height:var(--pageh)}
/* 책등(왼쪽 접힘선) */
.book::before{content:"";position:absolute;left:-2px;top:-6px;bottom:-6px;width:22px;
  background:linear-gradient(90deg,rgba(20,33,58,.26),rgba(20,33,58,.06) 45%,rgba(20,33,58,0));
  border-radius:3px 0 0 3px;pointer-events:none;z-index:50}
/* 책 두께 */
.book::after{content:"";position:absolute;right:-5px;top:6px;bottom:6px;width:5px;z-index:-1;
  background:linear-gradient(90deg,#D3DCE5,#EDF1F5);border-radius:0 3px 3px 0;
  box-shadow:2px 2px 10px rgba(20,33,58,.10)}

.leaf{position:absolute;inset:0;transform-origin:left center;transform:rotateY(0deg);
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.42,.02,.24,1);
  will-change:transform}
.leaf.flipped{transform:rotateY(-179.9deg)}
/* 넘어가는 동안 종이가 살짝 들리는 느낌 */
.leaf.turning{z-index:40!important}
.leaf.turning .leaf-face{box-shadow:0 14px 48px rgba(20,33,58,.30)}

.leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--surface);border:1px solid var(--line-soft);
  box-shadow:0 3px 26px rgba(20,33,58,.10);overflow:hidden}
.leaf-inner{position:absolute;inset:0;padding:clamp(26px,3.6vw,42px) clamp(24px,3.8vw,46px);
  display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.leaf-inner.cover{justify-content:space-between}
.leaf-back{transform:rotateY(180deg);background:var(--paper)}

/* 책등 쪽 상시 음영 (제본 느낌) */
.leaf-face .shade{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,rgba(20,33,58,.13) 0,rgba(20,33,58,.045) 5%,rgba(20,33,58,0) 14%)}
.leaf-back .shade{background:linear-gradient(270deg,rgba(20,33,58,.10) 0,rgba(20,33,58,0) 16%)}
/* 넘어가는 동안 훑고 지나가는 그림자 */
.leaf-face .sweep{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;
  background:linear-gradient(90deg,rgba(20,33,58,.42),rgba(20,33,58,.10) 45%,rgba(255,255,255,.22) 75%,rgba(255,255,255,0))}
.leaf.turning .leaf-face .sweep{animation:pdSweep 1.05s cubic-bezier(.42,.02,.24,1)}
@keyframes pdSweep{0%{opacity:0}42%{opacity:.85}72%{opacity:.45}100%{opacity:0}}
.leaf-back::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(20,33,58,.07),rgba(20,33,58,0) 22%)}

.pfoot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.05em}

/* ── 활자 ── */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--seal);margin:0 0 11px}
h1.title{font-family:var(--serif);font-weight:900;letter-spacing:-.02em;
  font-size:54px;line-height:1.08;margin:0}
.subtitle{font-family:var(--serif);font-weight:600;color:var(--muted);font-size:15px;
  margin:12px 0 0;max-width:52ch;text-wrap:pretty}
h2.head{font-family:var(--serif);font-weight:900;font-size:35px;
  line-height:1.3;letter-spacing:-.015em;margin:0 0 13px;text-wrap:balance}
h3.bt{font-family:var(--serif);font-weight:700;font-size:28px;
  line-height:1.32;margin:0 0 4px;letter-spacing:-.01em}
.bmeta{font-family:var(--mono);font-size:13px;color:var(--faint);margin:0 0 13px;
  font-variant-numeric:tabular-nums}
.lede{font-size:20px;line-height:1.76;color:var(--ink-2);margin:0 0 18px;font-weight:400}
.lede b{font-weight:600;color:var(--ink)}
p{margin:0 0 13px;max-width:62ch;line-height:1.76}
.leaf-inner p{color:var(--ink-2);font-weight:400}
b,strong{color:var(--ink);font-weight:600}

.seal{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border:1.5px solid var(--seal);color:var(--seal);
  font-family:var(--mono);font-size:11px;line-height:1.25}
.seal b{font-size:18px;font-weight:500;color:var(--seal)}
.meta-strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:26px}
.meta-strip div{flex:1 1 120px;padding:11px 0;border-right:1px solid var(--line-soft)}
.meta-strip div:last-child{border-right:0}
.meta-strip dt{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  color:var(--faint);text-transform:uppercase;margin:0 0 3px}
.meta-strip dd{margin:0;font-family:var(--mono);font-size:17px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.meta-strip dd small{font-family:var(--sans);font-size:12px;color:var(--muted)}

.callout{border-left:2px solid var(--seal);background:var(--seal-soft);
  padding:14px 18px;margin:18px 0;font-size:16px;line-height:1.72;color:var(--ink-2)}
.facts{list-style:none;padding:0;margin:15px 0 0;border-top:1px solid var(--line-soft)}
.facts li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);
  font-size:15.5px;line-height:1.6}
.facts .k{flex:0 0 76px;color:var(--faint);font-family:var(--mono);font-size:11px;padding-top:3px}
.facts .v{color:var(--ink-2)}
.src{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:16px 0 0}
.src a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.src a:hover{color:var(--data);border-color:var(--data)}

/* ── 차트 ── */
.fig{margin:15px 0 4px}
.fig-cap{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--faint);margin:0 0 6px;text-transform:uppercase}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart svg text{font-family:var(--mono);font-variant-numeric:tabular-nums}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .tick{fill:var(--faint)}
.chart .area{fill:var(--data-soft);stroke:none}
.chart .ln{stroke:var(--data);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--data);stroke:var(--surface);stroke-width:2}
.chart .val{fill:var(--data);font-weight:500}
.chart .anno{stroke:var(--seal);stroke-width:1;stroke-dasharray:3 3;opacity:.75}
.chart .annotxt{fill:var(--seal)}

/* ── 표 ── */
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:390px}
caption{text-align:left;font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.65}
th,td{padding:8px 10px 8px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;border-bottom:1px solid var(--line);font-weight:400}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;padding-right:0}
.bar-mini{display:block;height:3px;background:var(--data);margin-top:4px}

.colophon h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--seal);margin:0 0 12px}
.colophon p,.colophon li{font-size:15px;line-height:1.74;color:var(--ink-2)}
.colophon ul{margin:0 0 14px;padding-left:17px}

/* ── 넘김 버튼 ── */
.nav{position:fixed;top:50%;transform:translateY(-50%);z-index:55;
  width:44px;height:70px;border:1px solid var(--line);background:rgba(255,255,255,.95);
  color:var(--ink-2);cursor:pointer;font-size:20px;line-height:1;border-radius:4px;
  display:flex;align-items:center;justify-content:center}
.nav:hover{border-color:var(--data);color:var(--data)}
.nav[disabled]{opacity:.3;cursor:default}
.nav.prev{left:max(6px,calc((100vw - var(--pagew))/2 - 56px))}
.nav.next{right:max(6px,calc((100vw - var(--pagew))/2 - 56px))}
@media (max-width:860px){.nav{width:38px;height:58px;font-size:17px}
  .nav.prev{left:4px}.nav.next{right:4px}}
.hint{text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);padding:8px 0 14px}

@media (prefers-reduced-motion:reduce){.leaf{transition:none}.leaf.turning .leaf-face .sweep{animation:none}}
:focus-visible{outline:2px solid var(--data);outline-offset:2px}

/* ── 인쇄 / PDF ── */
@page{size:A4;margin:14mm}
@media print{
  body{background:#fff;font-size:10.5pt}
  .bar,.nav,.hint{display:none!important}
  .reader{padding:0;perspective:none}
  .book{position:static;width:100%;height:auto;transform-style:flat}
  .book::before{display:none}
  .leaf{position:static;transform:none!important;transition:none;
    break-after:page;page-break-after:always;width:100%;height:252mm}
  .leaf:last-child{break-after:auto;page-break-after:auto}
  .leaf-face{position:static;border:0;box-shadow:none;height:100%;backface-visibility:visible}
  .leaf-back{display:none}
  .leaf-face .shade,.leaf-face .sweep{display:none}
  .leaf-inner{position:static;padding:0;height:100%;overflow:visible;
    display:flex;flex-direction:column}
  .leaf-inner .pfoot{margin-top:auto}
  a{color:inherit;text-decoration:none}
  .src a{border:0}
}

/* 내용이 더 있을 때 하단 페이드 */
.leaf-face.has-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96));pointer-events:none}
.leaf-face.has-more .scroll-hint{position:absolute;right:14px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.05em}


/* ── 좁은 화면: 세로 스크롤 읽기 ── */
@media (max-width:860px),(max-height:620px){
  .reader{perspective:none;padding:14px 10px 0}
  .book{width:100%!important;height:auto!important;transform-style:flat}
  .book::before{display:none}
  .leaf{position:static;transform:none!important;transition:none;margin:0 0 14px}
  .leaf-face{position:static;width:100%!important;height:auto!important;transform:none!important;
    backface-visibility:visible}
  .leaf-inner{position:static;padding:22px 20px;overflow:visible}
  .leaf-back{display:none}
  .leaf-face .shade,.leaf-face .sweep{display:none}
  .nav{display:none}
  .book.flow .leaf[aria-hidden="true"]{display:block}
}

/* ── 2단 조판 ── */
.cols{column-count:2;column-gap:34px;column-rule:1px solid var(--line-soft)}
.cols figure.fig{break-inside:avoid;margin:0 0 14px}
.cols p{max-width:none}
.cols .facts,.cols .callout,.cols .src{break-inside:avoid}
.cols .facts{margin-top:12px}
@media (max-width:1000px){.cols{column-count:1;column-rule:none}}

/* ── 커버 스토리: 리드문 + 차트 좌우 ── */
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:start;margin-top:4px}
.hero-grid .lede{margin:0}
.hero-grid figure.fig{margin:0}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:16px}}

/* ── 화면이 낮을 때 한 단계 축소 ── */
@media (max-height:830px){
  body{font-size:16px;line-height:1.76}
  .lede{font-size:18px;line-height:1.72}
  h2.head{font-size:31px}
  h3.bt{font-size:25px}
  .facts li{font-size:14.5px}
  .leaf-inner{padding:clamp(22px,3vw,34px) clamp(22px,3.2vw,38px)}
  .cols{column-gap:28px}
}

@media (max-height:750px){
  body{font-size:15.5px;line-height:1.72}
  .lede{font-size:17px}
  h2.head{font-size:28px}
  h3.bt{font-size:23px}
  .facts li{font-size:14px;padding:5px 0}
  .leaf-inner{padding:20px 26px}
}