/* ============================================================
   전자책 정본 쇼케이스 — 사이트 껍데기
   책 지면(ebook.css)에는 손대지 않는다. 이 파일은 랜딩과 헤더 토큰만 맡는다.
   ============================================================ */

@font-face{font-family:"A2Z";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/A2Z-4Regular.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/A2Z-6SemiBold.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/A2Z-7Bold.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:800 900;font-style:normal;font-display:swap;
  src:url("fonts/A2Z-9Black.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:45 920;font-style:normal;font-display:swap;
  src:url("fonts/PretendardVariable.woff2") format("woff2-variations")}

/* ── 헤더 정본이 읽어가는 페이지 토큰 ─────────────────────
   header.css 안의 색은 건드리지 않는다. 여기서 밝은 체계를 넘겨줄 뿐이다.  */
:root{
  --bg:            #FFFFFF;
  --panel-2:       #F4F7FD;
  --text:          #1C2331;
  --text-2:        #3A414D;
  --muted:         #5F6672;
  --primary:       #2563EB;
  --primary-bright:#1E4CBA;
  --accent-text:   #2563EB;
  --brass:         #C9D7F2;
  --brass-line:    #DAE4F6;
  --brass-soft:    #EAF0FB;
  --border:        #E4E7EC;
  --hairline:      #EEF1F5;
  --maxw:          1080px;

  --s-ink:  #1C2331;
  --s-body: #3A414D;
  --s-mute: #5F6672;
  --s-line: #E4E7EC;
  --s-tint: #F5F7FA;
  --s-blue: #2563EB;
  --s-gold: #FED75E;
}
.hd{ border-bottom:1px solid var(--border); background:#fff }

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:#fff; color:var(--s-body);
  font-family:Pretendard,"Malgun Gothic",sans-serif;
  font-size:15px; line-height:1.72; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* ── 머리 ────────────────────────────────────────────────── */
.top{padding:56px 0 34px}
.top h1{
  margin:0; font-family:A2Z,Pretendard,sans-serif; font-weight:800;
  font-size:clamp(30px,5vw,44px); line-height:1.22; letter-spacing:-.035em; color:var(--s-ink);
}
.top h1 b{color:var(--s-blue); font-weight:800}
.top p{margin:16px 0 0; max-width:60ch; color:var(--s-mute); font-size:15.5px}
.metaline{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--s-line);
  display:flex; flex-wrap:wrap; gap:8px 26px; font-size:13px; color:var(--s-mute);
}
.metaline b{color:var(--s-ink); font-weight:700}

/* ── 두 판 ───────────────────────────────────────────────── */
.shelf{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:26px; padding:6px 0 8px}
.ed{border:1px solid var(--s-line); border-radius:14px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column}
.ed .shot{display:block; background:var(--s-tint); border-bottom:1px solid var(--s-line);
  padding:26px 26px 0; text-align:center}
.ed .shot img{width:64%; max-width:210px; display:inline-block; vertical-align:bottom;
  border-radius:3px 3px 0 0; box-shadow:0 2px 6px rgba(16,24,40,.12), 0 16px 32px -14px rgba(16,24,40,.4)}
.ed .body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.ed .kick{font-family:A2Z,Pretendard,sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:.16em; color:var(--s-blue)}
.ed.y .kick{color:#B08A00}
.ed h2{margin:7px 0 0; font-family:A2Z,Pretendard,sans-serif; font-weight:800; font-size:21px;
  letter-spacing:-.03em; color:var(--s-ink)}
.ed p{margin:11px 0 0; font-size:14.2px; color:var(--s-body)}
.ed ul{margin:15px 0 0; padding:0; list-style:none; font-size:13.4px; color:var(--s-mute)}
.ed li{position:relative; padding-left:15px}
.ed li + li{margin-top:5px}
.ed li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:1px; background:var(--s-blue)}
.ed.y li::before{background:var(--s-gold)}
.ed .go{margin-top:auto; padding-top:20px; display:flex; gap:9px; flex-wrap:wrap}
.btn{display:inline-block; font-family:Pretendard,sans-serif; font-size:13.6px; font-weight:700;
  padding:10px 17px; border-radius:9px; border:1px solid var(--s-blue); background:var(--s-blue);
  color:#fff; transition:background .15s ease}
.btn:hover{background:var(--primary-bright); border-color:var(--primary-bright)}
.btn.ghost{background:#fff; color:var(--s-ink); border-color:var(--s-line)}
.btn.ghost:hover{background:var(--s-tint)}
a{text-decoration:none}

/* ── 무엇을 섞었나 ───────────────────────────────────────── */
.mix{margin-top:52px; padding-top:34px; border-top:1px solid var(--s-line)}
.mix h3{margin:0 0 4px; font-family:A2Z,Pretendard,sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.03em; color:var(--s-ink)}
.mix > p{margin:0 0 22px; color:var(--s-mute); font-size:14.4px; max-width:64ch}
.swap{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px;
  background:var(--s-line); border:1px solid var(--s-line); border-radius:12px; overflow:hidden}
.swap > div{background:#fff; padding:20px 20px 22px}
.swap .n{font-family:A2Z,Pretendard,sans-serif; font-weight:800; font-size:12px; color:var(--s-blue);
  letter-spacing:.08em}
.swap h4{margin:8px 0 0; font-size:15px; font-weight:700; color:var(--s-ink); letter-spacing:-.02em}
.swap p{margin:8px 0 0; font-size:13.4px; color:var(--s-mute)}
.swap .from{display:block; margin-top:10px; font-size:12.4px; color:var(--s-mute)}
.swap .from i{font-style:normal; color:var(--s-ink); font-weight:600}

/* ── 꼬리 ────────────────────────────────────────────────── */
.foot-site{margin-top:56px; padding:26px 0 66px; border-top:1px solid var(--s-line);
  font-size:12.8px; color:var(--s-mute)}
.foot-site b{color:var(--s-ink); font-weight:700}

/* ── 책 지면 위에 얹는 돌아가기 줄 (yellow/blue/gallery) ── */
.viewbar{
  position:sticky; top:64px; z-index:50; background:#fff; border-bottom:1px solid var(--border);
  font-family:Pretendard,sans-serif; font-size:13px; color:var(--s-mute);
}
.viewbar .wrap{display:flex; align-items:center; gap:14px; height:44px; justify-content:space-between}
.viewbar b{color:var(--s-ink); font-weight:700}
.viewbar .r{display:flex; gap:8px}
.viewbar a{color:var(--s-mute); border:1px solid var(--border); border-radius:7px; padding:5px 11px;
  font-size:12.6px; font-weight:600}
.viewbar a:hover{background:var(--s-tint); color:var(--s-ink)}
.viewbar a[aria-current]{background:var(--s-blue); border-color:var(--s-blue); color:#fff}

/* ── 좁은 화면 : 145mm 지면(548px)이 잘리지 않게 통째로 줄인다 ──
   지면 치수를 건드리면 조판이 달라지므로 zoom 으로 축소만 한다.  */
@media (max-width:600px){ .book{ zoom:.86 } .viewbar{ top:56px } }
@media (max-width:520px){ .book{ zoom:.72 } }
@media (max-width:420px){ .book{ zoom:.60 } }
@media (max-width:360px){ .book{ zoom:.52 } }
@media (max-width:600px){
  .viewbar .wrap{ height:40px; gap:8px }
  .viewbar span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}

@media print{ .hd, .viewbar{ display:none !important } .book{ zoom:1 !important } }