:root {
  --ink:#211c16; --charcoal:#4a4038; --muted:#8c8271;
  --paper:#efe7d8; --paper-deep:#e3d8c2; --paper-card:#f8f3e8;
  --line:rgba(33,28,22,.15); --white-wash:#fbf8f1;
  --gold:#b4894f; --gold-dark:#8f6a3a;
  --cinnabar:#a33a2b; --cinnabar-dark:#812d22;
  --pine:#3e7856; --pine-dark:#2c5b40; --sky:#3f86ac; --sky-dark:#2e6786;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Serif KR","KoPub Batang","Batang",serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid rgba(180,137,79,.4); outline-offset:3px; }
main { min-height:100vh; background:radial-gradient(circle at 18% 8%,rgba(255,255,255,.8),transparent 31%),linear-gradient(rgba(92,76,58,.035) 1px,transparent 1px); background-size:auto,100% 6px; }

.site-header { height:74px; padding:0 max(32px,calc((100vw - 1200px)/2)); display:flex; align-items:center; border-bottom:1px solid var(--line); background:rgba(239,231,216,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.series-mark { color:var(--ink); text-decoration:none; font-size:17px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:12px; }
.series-mark img { width:28px; height:28px; border-radius:50%; }
.series-mark span { width:2px; height:24px; background:linear-gradient(180deg,var(--cinnabar),var(--pine)); }

.wrap { max-width:1200px; margin:0 auto; padding:0 32px; }

.hero { padding:80px 0 50px; text-align:center; }
.eyebrow { color:var(--gold-dark); font-family:"Noto Sans KR",sans-serif; font-size:13px; letter-spacing:.16em; margin:0 0 22px; display:flex; align-items:center; justify-content:center; gap:10px; }
.eyebrow::before,.eyebrow::after { content:""; width:26px; height:1px; background:var(--gold-dark); }
.hero h2 { font-family:"Noto Sans KR",sans-serif; font-weight:400; font-size:15px; letter-spacing:.14em; color:var(--gold-dark); margin:0 0 14px; display:flex; align-items:center; justify-content:center; gap:10px; }
.hero h2::before,.hero h2::after { content:""; width:22px; height:1px; background:var(--gold-dark); }
.hero h1 { font-size:clamp(32px,4.6vw,46px); letter-spacing:-.02em; margin:0 auto; max-width:640px; text-wrap:balance; color:var(--ink); font-weight:400; }
.hero h1 strong { font-weight:700; }
.hero h1 em { font-style:normal; color:var(--gold-dark); }

.hero-science,.hero-history { padding-top:56px; border-top:1px solid var(--line); margin-top:6px; }

.slipcase { padding:36px; background:var(--paper-deep); border:1px solid var(--line); border-radius:8px; margin-bottom:70px; }
.slipcase-label { font-family:"Noto Sans KR",sans-serif; font-size:11px; color:var(--muted); letter-spacing:.1em; margin:0 0 22px; display:flex; justify-content:space-between; }
.volumes { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.volumes.science { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.volumes.science .volume-card { width:100%; max-width:none; min-height:0; height:492px; }
.volumes.science .volume-art { flex:0 0 170px; min-height:170px; }
.volumes.science .volume-body { flex:1; padding:19px 22px 21px; }
.volumes.science .volume-body h2 { font-size:21px; line-height:1.32; margin-bottom:8px; }
.volumes.science .volume-body h2 em { display:block; font-size:14px; }
.volumes.science .volume-body p { font-size:13px; line-height:1.62; margin-bottom:13px; }
.volumes.science .volume-stats { gap:13px; margin-bottom:13px; }
.volumes.science .volume-stats strong { font-size:17px; }
.volumes.history { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.volumes.history .volume-card { width:100%; max-width:none; }
.volumes.history .volume-body { padding:19px 22px 21px; }
.volumes.history .volume-body h2 { font-size:21px; line-height:1.32; margin-bottom:8px; }
.volumes.history .volume-body p { font-size:13px; line-height:1.62; margin-bottom:13px; }
.volume-card.myeongri .volume-art { background:#071523; }
.volume-card.myeongri .volume-art img { width:100%; height:100%; object-fit:contain; }
.volume-card.myeongri .volume-eyebrow,.volume-card.myeongri .volume-cta { color:#9a7526; }
.volume-card { position:relative; border-radius:6px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; height:492px; min-height:492px; border:1px solid var(--line); box-shadow:0 8px 20px rgba(20,16,10,.1); transition:transform .22s ease, box-shadow .22s ease; }
.volume-card:hover { transform:translateY(-8px); box-shadow:0 22px 40px rgba(20,16,10,.18); }
.volume-art { position:relative; flex:0 0 170px; min-height:170px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.volume-card.seolwon .volume-art { background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.5),transparent 45%),linear-gradient(155deg,#d9c8ab,#a3392b 120%); }
.volume-card.samgukji .volume-art { background:radial-gradient(circle at 75% 15%,rgba(255,255,255,.45),transparent 45%),linear-gradient(155deg,#cfe0d3,#2c5b40 65%,#2e6786 130%); }
.volume-card.two-masters .volume-art,.volume-card.balzac .volume-art { min-height:170px; background:#182536; }
.volume-card.two-masters .volume-art img,.volume-card.balzac .volume-art img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.04); transition:transform .4s ease; }
.volume-card.two-masters:hover .volume-art img,.volume-card.balzac:hover .volume-art img { transform:scale(1.025); }
.volume-card.einstein .volume-art { min-height:170px; background:#071523; }
.volume-card.einstein .volume-art img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 40%; filter:saturate(.84) contrast(1.06); transition:transform .5s ease,filter .5s ease; }
.volume-card.einstein:hover .volume-art img { transform:scale(1.025); filter:saturate(.94) contrast(1.08); }
.einstein-orbit { position:absolute; width:46%; aspect-ratio:2.3; left:8%; top:19%; border:1px solid rgba(232,205,131,.62); border-radius:50%; transform:rotate(-13deg); box-shadow:0 0 18px rgba(232,205,131,.12); animation:einsteinOrbit 6s ease-in-out infinite; }
@keyframes einsteinOrbit { 50% { opacity:.4; transform:rotate(-10deg) scale(1.04); } }
.volume-card.principia .volume-art {
  background:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 38% 68%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 62% 20%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 82% 55%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 52% 82%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 88% 78%, rgba(232,205,131,.6), transparent),
    radial-gradient(circle at 70% 20%, rgba(201,162,75,.16), transparent 50%),
    linear-gradient(160deg, #141d3d, #060a17 75%);
}
.volume-card.aiwalk .volume-art {
  background:
    radial-gradient(circle at 22% 20%,rgba(255,255,255,.72),transparent 38%),
    linear-gradient(145deg,#dff3fb,#acdcef);
}
.volume-card.democracy .volume-art {
  background:
    radial-gradient(circle at 72% 18%,rgba(255,255,255,.72),transparent 42%),
    linear-gradient(145deg,#fffdf1,#eee5c9);
}
.volume-card.semiconductors .volume-art {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(79,216,176,.55), transparent),
    radial-gradient(1px 1px at 42% 68%, rgba(79,216,176,.4), transparent),
    radial-gradient(1.5px 1.5px at 66% 22%, rgba(79,216,176,.45), transparent),
    radial-gradient(1px 1px at 84% 58%, rgba(79,216,176,.35), transparent),
    radial-gradient(1.5px 1.5px at 54% 84%, rgba(79,216,176,.3), transparent),
    radial-gradient(circle at 75% 20%, rgba(79,216,176,.14), transparent 50%),
    linear-gradient(155deg, #16241f, #0b1512 75%);
}
.volume-seal { font-size:16px; letter-spacing:.22em; writing-mode:vertical-rl; color:rgba(255,255,255,.9); font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.volume-card.principia .volume-seal { writing-mode:horizontal-tb; font-family:"EB Garamond","Cormorant Garamond",serif; font-style:italic; font-size:19px; letter-spacing:.16em; color:#e8cd83; }
.volume-card.aiwalk .volume-seal,.volume-card.democracy .volume-seal,.volume-card.semiconductors .volume-seal { writing-mode:horizontal-tb; text-shadow:none; text-align:center; }
.volume-card.aiwalk .volume-seal { color:#287fa9; font-size:25px; letter-spacing:.04em; }
.volume-card.aiwalk .volume-seal em { display:block; margin-top:8px; font-size:15px; font-weight:400; letter-spacing:.16em; font-style:normal; }
.volume-card.democracy .volume-seal { color:#3485b2; font-family:"EB Garamond","Cormorant Garamond",serif; font-size:29px; letter-spacing:.12em; }
.volume-card.semiconductors .volume-seal { color:#4fd8b0; font-family:"Noto Sans KR",sans-serif; font-weight:700; font-size:23px; letter-spacing:.03em; }
.volume-body { flex:1; min-height:0; padding:22px 26px 24px; background:var(--paper-card); }
.volume-eyebrow { font-family:"Noto Sans KR",sans-serif; font-size:11.5px; letter-spacing:.08em; margin:0 0 8px; }
.volume-card.seolwon .volume-eyebrow { color:var(--cinnabar); }
.volume-card.samgukji .volume-eyebrow { color:var(--pine-dark); }
.volume-card.principia .volume-eyebrow { color:#9a7526; }
.volume-card.einstein .volume-eyebrow { color:#9a7526; }
.volume-card.balzac .volume-eyebrow { color:#7a263a; }
.volume-card.two-masters .volume-eyebrow { color:#8a613a; }
.volume-card.aiwalk .volume-eyebrow { color:#287fa9; }
.volume-card.democracy .volume-eyebrow { color:#3485b2; }
.volume-card.semiconductors .volume-eyebrow { color:#1a9b74; }
.volume-body h2 { font-size:27px; margin:0 0 10px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:10px; }
.volume-body h2 em { font-style:normal; font-size:16px; color:var(--muted); font-weight:400; }
.volume-body p { font-size:14.5px; color:var(--charcoal); line-height:1.8; margin:0 0 20px; word-break:keep-all; font-family:"Noto Sans KR",sans-serif; }
.volume-stats { display:flex; gap:22px; font-family:"Noto Sans KR",sans-serif; margin-bottom:22px; }
.volume-stats div { display:flex; flex-direction:column; gap:2px; }
.volume-stats strong { font-size:19px; font-family:"Noto Serif KR",serif; }
.volume-card.seolwon .volume-stats strong { color:var(--cinnabar); }
.volume-card.samgukji .volume-stats strong { color:var(--pine-dark); }
.volume-card.principia .volume-stats strong { color:#9a7526; }
.volume-card.einstein .volume-stats strong { color:#9a7526; }
.volume-card.balzac .volume-stats strong { color:#7a263a; }
.volume-card.two-masters .volume-stats strong { color:#8a613a; }
.volume-stats span { font-size:10.5px; color:var(--muted); }
.volume-cta { display:inline-flex; align-items:center; gap:10px; font-family:"Noto Sans KR",sans-serif; font-size:14px; font-weight:600; }
.volume-card.seolwon .volume-cta { color:var(--cinnabar); }
.volume-card.samgukji .volume-cta { color:var(--pine-dark); }
.volume-card.principia .volume-cta { color:#9a7526; }
.volume-card.einstein .volume-cta { color:#9a7526; }
.volume-card.balzac .volume-cta { color:#7a263a; }
.volume-card.two-masters .volume-cta { color:#8a613a; }
.volume-card.aiwalk .volume-cta { color:#287fa9; }
.volume-card.democracy .volume-cta { color:#3485b2; }
.volume-card.semiconductors .volume-cta { color:#1a9b74; }
.volume-cta span { transition:transform .18s; }
.volume-card:hover .volume-cta span { transform:translateX(4px); }

.about-section { max-width:900px; margin:0 auto 90px; padding:60px 70px; display:grid; grid-template-columns:100px 1fr; gap:44px; align-items:center; background:var(--paper-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:8px; }
.about-seal { border:2px solid var(--gold-dark); color:var(--gold-dark); width:76px; height:76px; display:grid; place-items:center; font-size:13px; line-height:1.4; text-align:center; margin:0; font-family:"Noto Serif KR",serif; }
.about-section h2 { font-size:26px; line-height:1.5; margin:0 0 14px; }
.about-section p { color:var(--charcoal); line-height:1.9; margin:0; word-break:keep-all; font-family:"Noto Sans KR",sans-serif; font-size:14.5px; }

footer { min-height:120px; padding:32px max(30px,calc((100vw - 1200px)/2)); display:flex; align-items:center; gap:16px; background:var(--ink); color:var(--paper-deep); flex-wrap:wrap; }
footer img { width:38px; height:38px; border-radius:50%; }
footer strong { font-weight:700; }
footer small { display:block; color:#a89d8e; margin-top:2px; font-family:"Noto Sans KR",sans-serif; font-size:12px; }

.site-header { justify-content:space-between; }

.fairy-tales-link {
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Jua","Noto Sans KR",sans-serif;
  font-size:17px; font-weight:400; line-height:1; letter-spacing:-.01em;
  color:#1d7d70; background:none; border:none; padding:0;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:color .18s ease, transform .18s ease;
}
.fairy-tales-link:hover { color:#e0824a; transform:translateY(-1px); }
.fairy-tales-link .fairy-tales-sep {
  font-size:21px; display:inline-block;
  filter:drop-shadow(0 1px 2px rgba(29,125,112,.25));
  transition:transform .3s ease;
}
.fairy-tales-link:hover .fairy-tales-sep { transform:rotate(-12deg) scale(1.12); }
.fairy-tales-link em { font-style:normal; font-size:13px; color:#5a9c93; margin-left:2px; }
.fairy-tales-link:hover em { color:#e0a479; }
.fairy-tales-link.active { color:#e0824a; }
.fairy-tales-link.active .fairy-tales-sep { transform:rotate(-12deg) scale(1.12); }

.recommend-link {
  gap:8px;
  font-family:"Gowun Dodum","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:17px; letter-spacing:.005em;
  color:var(--cinnabar);
  text-decoration:none;
}
.recommend-link:hover { color:var(--gold-dark); }
.recommend-link .recommend-sep {
  font-size:21px; display:inline-block;
  filter:drop-shadow(0 1px 2px rgba(163,58,43,.25));
  transition:transform .3s ease;
}
.recommend-link:hover .recommend-sep { transform:rotate(-8deg) scale(1.12); }

.fairy-tales-overlay {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#faf7f0;
}
.fairy-tales-overlay iframe { display:block; width:100%; height:100%; border:none; }
.fairy-tales-overlay-close {
  position:absolute; top:14px; right:16px; z-index:41;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(29,125,112,.3);
  background:#fff; color:#1d7d70; font-size:15px; line-height:1; cursor:pointer;
  box-shadow:0 4px 12px rgba(20,16,10,.18);
  transition:transform .15s ease, background .15s ease;
}
.fairy-tales-overlay-close:hover { transform:scale(1.08); background:#f3ecdd; }

@media(max-width:820px) {
  .wrap { padding:0 20px; }
  .volumes { grid-template-columns:1fr; }
  .volume-card { height:492px; min-height:492px; }
  .volume-art { flex-basis:170px; min-height:170px; }
  .volumes.science { grid-template-columns:1fr; }
  .volumes.history { grid-template-columns:1fr; }
  .volumes.history .volume-card { height:auto; min-height:492px; }
  .volumes.history .volume-body { min-width:0; }
  .volumes.history .volume-body p { overflow-wrap:anywhere; }
  .volumes.science .volume-card { height:auto; min-height:492px; }
  .volumes.science .volume-art { flex-basis:190px; min-height:190px; }
  .about-section { grid-template-columns:1fr; text-align:center; padding:40px 28px; }
  .about-seal { margin:0 auto; }
  .site-header { padding:0 20px; flex-wrap:wrap; gap:8px; height:auto; min-height:74px; }
  footer { padding:28px 20px; flex-wrap:wrap; }
  .fairy-tales-link em { display:none; }
}

@media(prefers-reduced-motion:reduce) {
  .einstein-orbit { animation:none; }
}

/* crime-publication */
.volume-card.two-masters .volume-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}

/* crime-card-height */
.volume-card.two-masters{height:auto}.volume-card.two-masters .volume-body{flex:none}

/* direct-reading */
.two-masters-entry{min-width:0}.crime-direct{display:block;text-align:center;margin-top:12px;padding:14px 18px;border-radius:6px;background:#6e2a2f;color:white;font-weight:700;text-decoration:none}.crime-direct:hover{background:#4e1e22}.crime-direct:focus-visible{outline:3px solid #b58a36;outline-offset:3px}

/* anna-card-fit — 두 문호 카드에 안나 카레니나를 더하면서
   글자 크기와 간격을 줄여 카드 높이를 다른 카드(발자크)와 같은 492px 로 맞춘다. */
.volume-card.two-masters { height:492px; min-height:492px; }
.volume-card.two-masters .volume-body { flex:1; min-height:0; }
.volume-card.two-masters .volume-body h2 { font-size:25px; margin-bottom:8px; }
.volume-card.two-masters .volume-body p { font-size:13.5px; line-height:1.72; margin-bottom:16px; }
.volume-card.two-masters .volume-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px; margin-bottom:0; }
.volume-card.two-masters .volume-stats strong { font-size:17px; }
.volume-card.two-masters .volume-stats span { font-size:10px; line-height:1.4; }


/* 고전 예술 시리즈 */
.volume-card.museum .museum-art{background:#e7e4d6;display:flex;gap:16px;padding:14px;}
.volume-card.museum .museum-art img{width:calc(50% - 8px);height:142px;object-fit:contain;}
.volume-card.museum .volume-eyebrow{color:#355f4b;}
.volume-card.museum .volume-body h2{font-size:25px;}
.volume-card.museum .volume-body p{font-size:13.5px;line-height:1.72;}
.hero-arts { padding-top:56px; border-top:1px solid var(--line); margin-top:6px; }
.volume-card.maestros .volume-art {
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(232,205,131,.18) 13px 14px) center 58px / 78% 70px no-repeat,
    radial-gradient(circle at 72% 18%, rgba(232,205,131,.18), transparent 46%),
    linear-gradient(155deg, #2a1c14, #120c08 78%);
}
.volume-card.maestros .volume-seal { writing-mode:horizontal-tb; font-family:"EB Garamond","Cormorant Garamond",serif; font-style:italic; font-size:25px; letter-spacing:.06em; color:#e8cd83; text-align:center; }
.volume-card.maestros .volume-seal em { display:block; font-size:17px; margin:2px 0; color:rgba(232,205,131,.7); }
.volume-card.maestros .volume-eyebrow,.volume-card.maestros .volume-cta { color:#8a613a; }
.volume-card.maestros .volume-body h2 { font-size:25px; margin-bottom:8px; }
.volume-card.maestros .volume-body p { font-size:13.5px; line-height:1.72; margin-bottom:16px; }
.volume-card.maestros .volume-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; margin-bottom:0; }
.volume-card.maestros .volume-stats strong { font-size:17px; color:#8a613a; }
.volume-card.maestros .volume-stats span { font-size:10px; line-height:1.4; }

/* 두 문호 카드 — 안나 카레니나 이미지 교차 (2026-09) */
.volume-card.two-masters .volume-art{background:#1a1310}
.volume-card.two-masters .tm-art-slide{opacity:0;transition:opacity 1.4s ease,transform .4s ease}
.volume-card.two-masters .tm-art-slide.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.volume-card.two-masters .tm-art-slide{transition:none}}

.volume-card.museum .museum-art{position:relative;height:170px;display:block;padding:0}.museum-slide{position:absolute;inset:0;display:flex;gap:16px;padding:14px;opacity:0;transition:opacity 1.4s ease}.museum-slide.is-active{opacity:1}.volume-card.museum .museum-slide img{width:calc(50% - 8px);height:142px;object-fit:contain}@media(prefers-reduced-motion:reduce){.museum-slide{transition:none}}