@charset "utf-8";
/* 책고리 독서논술 — 59 학원 ③
   HOW: Ron Clark Academy (https://www.ronclarkacademy.com/) — 화면 전체를 두른 금속 액자 · 네 모서리 메달 · 가운데 위 깃발 워드마크 ·
   사진 콜라주 위 가운데 문 · 아래 청중별 명판 버튼. 소개 페이지의 금박 액자 사진 · 양피지 · 트레이딩 카드 · 원형 초상 격자.
   색: 레퍼런스 남색+금 → 우리 적갈(옥스블러드)+놋쇠. 양피지는 따뜻한 미색. */
:root{
  --bg:#35141A; --bg2:#4A1C24; --deep:#22090D; --brass:#C9A45C; --brass-d:#8E6D2F; --brass-l:#E8D29A;
  --parch:#F1E4C8; --parch-d:#D9C49C; --ink:#2A1A12; --wt:#F7EFE0; --mut:#D3BFA5;
  --teal:#2E7C78; --ochre:#C5862B; --plum:#6D3B6E; --navy:#2A3F66;
  --en:"Metamorphous","Gowun Batang",Georgia,serif;
  --ko:"Gowun Batang","Pretendard Variable",serif;
  --ui:"Pretendard Variable",system-ui,sans-serif;
  --mm-top:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--wt);font-family:var(--ui);font-size:15px;line-height:1.75;letter-spacing:-.015em;word-break:keep-all;overflow-wrap:break-word;
  background-color:var(--bg);
  background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%);
  background-size:36px 36px;background-position:0 0,18px 18px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brass-l);outline-offset:3px}
.js .pop{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js .pop.go{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .pop{opacity:1!important;transform:none!important;transition:none!important}.door .pg{transition:none!important}}
html.reduce .js .pop{opacity:1!important;transform:none!important}

/* 액자 테두리 — 화면에 고정 (레퍼런스 서명 틀) */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;border:14px solid var(--bg);box-shadow:inset 0 0 0 3px var(--brass),inset 0 0 0 5px var(--brass-d),inset 0 0 0 7px var(--brass-l)}
.hd{position:fixed;inset:0 0 auto 0;z-index:90;pointer-events:none;height:0}
.brand{pointer-events:auto;position:fixed;top:0;left:50%;transform:translateX(-50%);width:196px;padding:12px 0 34px;text-align:center;background:linear-gradient(var(--parch),var(--parch-d));color:var(--bg);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);font-family:var(--en);font-size:30px;line-height:1;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 3px 0 var(--brass-d))}
.brand small{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;color:var(--brass-d)}
.md{pointer-events:auto;position:fixed;width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,var(--bg2),var(--deep));border:4px solid var(--brass);box-shadow:0 0 0 2px var(--brass-d),0 8px 20px rgba(0,0,0,.45);color:var(--brass-l);transition:transform .25s}
.md b{font-family:var(--en);font-weight:400;font-size:17px;line-height:1}
.md span{font-size:11px;color:var(--wt);margin-top:4px}
.md:hover{transform:scale(1.06)}
.md[aria-current]{border-color:var(--brass-l)}
.md.tl{top:10px;left:10px}.md.tr{top:10px;right:10px}.md.bl{bottom:10px;left:10px}.md.br{bottom:10px;right:10px}
.burger{display:none}
.mobile-nav{position:fixed;top:var(--mm-top);left:0;right:0;bottom:0;z-index:1000;background:var(--deep);padding:20px 24px 120px;display:none;flex-direction:column;overflow:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--en);font-size:28px;color:var(--brass-l);padding:14px 0;border-bottom:1px solid rgba(201,164,92,.3);display:flex;justify-content:space-between;align-items:baseline}
.mobile-nav a span{font-family:var(--ui);font-size:13px;color:var(--mut)}
.mobile-nav .mn-call{font-family:var(--ui);font-size:17px;font-weight:700;justify-content:center;align-items:center;gap:8px;margin-top:24px;background:var(--brass);color:var(--deep);border:0;border-radius:6px;min-height:52px}
.mn-call svg{width:18px}
body.mm-open{overflow:hidden}

/* 첫 화면 — 사진 콜라주 위에 가운데 '펼친 책' 문 · 아래 네 개의 명판 */
.stage{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;background:var(--deep)}
.collage{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1.2fr;grid-template-rows:1fr 1fr;gap:14px;padding:30px;transform:rotate(-2deg) scale(1.08)}
.collage img{width:100%;height:100%;object-fit:cover;border:3px solid var(--brass-d);filter:sepia(.2) saturate(.95) brightness(.9)}
.collage img:nth-child(2){grid-row:span 2}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(34,9,13,.1) 0%,rgba(34,9,13,.6) 75%)}
.door{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);z-index:2;display:flex;perspective:1400px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.door .pg{width:min(300px,34vw);height:min(400px,56vh);background:linear-gradient(90deg,var(--parch-d),var(--parch) 18%,var(--parch));color:var(--ink);padding:44px 30px;display:flex;flex-direction:column;justify-content:center;border:3px solid var(--brass-d);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.door .pg.l{border-radius:10px 2px 2px 10px;transform-origin:right center;text-align:right;background:linear-gradient(270deg,var(--parch-d),var(--parch) 18%,var(--parch))}
.door .pg.r{border-radius:2px 10px 10px 2px;transform-origin:left center}
.js .door .pg.l{transform:rotateY(18deg)}.js .door .pg.r{transform:rotateY(-18deg)}
.js .stage.pop{opacity:1;transform:none}
.js .stage.go .door .pg{transform:none}
.door h1{font-family:var(--en);font-weight:400;font-size:clamp(38px,4vw,58px);line-height:1.02;color:var(--bg)}
.door .pg.r p{font-family:var(--ko);font-size:18px;line-height:1.55}
.door .pg.r small{display:block;margin-top:16px;font-family:var(--ui);font-size:12.5px;color:#6B5540;line-height:1.6}
.door .orn{font-family:var(--en);color:var(--brass-d);font-size:13px;letter-spacing:.2em;margin-top:18px}
.plaques{position:absolute;left:0;right:0;bottom:62px;z-index:3;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:0 140px}
.plq{min-width:170px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:8px 22px;font-family:var(--en);font-size:17px;color:var(--wt);border:2px solid var(--brass-l);box-shadow:0 0 0 3px var(--deep),0 0 0 5px var(--brass-d),0 10px 20px rgba(0,0,0,.4);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);transition:transform .2s}
.plq span{font-family:var(--ui);font-size:12px;margin-left:8px;opacity:.9}
.plq:hover{transform:translateY(-3px)}
.plq.a{background:var(--teal)}.plq.b{background:var(--ochre)}.plq.c{background:var(--plum)}.plq.d{background:var(--navy)}

/* 소개 본문 — 왼쪽 세로 탭 + 금박 액자 사진 */
.book{position:relative;display:grid;grid-template-columns:150px 1fr;gap:40px;padding:120px 150px 80px 60px}
.tabs{position:sticky;top:140px;align-self:start;display:flex;flex-direction:column;gap:8px}
.tabs a{font-family:var(--en);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-l);border:1px solid rgba(201,164,92,.5);background:rgba(34,9,13,.55);padding:8px 12px;clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);min-height:36px;display:flex;align-items:center}
.tabs a:hover{background:var(--brass);color:var(--deep)}
.chap{padding:70px 0;border-bottom:1px solid rgba(201,164,92,.18)}
.chap:last-child{border-bottom:0}
.chap h2{font-family:var(--en);font-weight:400;font-size:clamp(38px,4vw,58px);line-height:1.05;color:var(--brass-l)}
.chap .ko{font-family:var(--ko);font-size:19px;color:var(--wt);margin-top:10px;line-height:1.55}
.chap p.b{margin-top:16px;color:var(--mut);max-width:34em}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pair.rev>figure{order:-1}
.gild{position:relative;padding:12px;background:linear-gradient(135deg,var(--brass-l),var(--brass-d) 40%,var(--brass) 60%,var(--brass-d));box-shadow:0 20px 40px rgba(0,0,0,.5)}
.gild img{width:100%;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--deep)}
.gild .tag{position:absolute;right:-14px;bottom:-14px;width:92px;height:92px;border-radius:50%;background:var(--bg2);border:3px solid var(--brass);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--en);font-size:13px;line-height:1.15;color:var(--brass-l)}

/* 도서관 카드 — 레퍼런스 양피지 두루마리를 줄 쳐진 대출 카드로 */
.card{position:relative;max-width:760px;margin:40px auto 0;background:var(--parch);color:var(--ink);padding:40px 44px 36px 88px;border-radius:4px;box-shadow:0 24px 50px rgba(0,0,0,.5);background-image:linear-gradient(transparent 38px,rgba(142,109,47,.3) 38px,rgba(142,109,47,.3) 39px);background-size:100% 40px;background-position:0 30px;transform:rotate(-1deg)}
.card::before{content:"";position:absolute;left:62px;top:0;bottom:0;width:1px;background:#B8483E;opacity:.5}
.card h3{font-family:var(--en);font-weight:400;font-size:26px;color:var(--bg);line-height:40px}
.card ol{counter-reset:r}
.card li{font-family:var(--ko);font-size:16.5px;line-height:40px;position:relative}
.card li::before{counter-increment:r;content:counter(r);position:absolute;left:-44px;font-family:var(--en);color:var(--brass-d)}
.card .stamp{position:absolute;right:28px;top:26px;border:3px double #B8483E;color:#B8483E;font-family:var(--en);font-size:13px;padding:6px 10px;transform:rotate(8deg);opacity:.8;line-height:1.2;text-align:center}

/* 독서 모둠 트레이딩 카드 */
.houses{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.hc{position:relative;border-radius:14px;padding:10px;background:linear-gradient(160deg,var(--brass-l),var(--brass-d));box-shadow:0 18px 36px rgba(0,0,0,.5);transform:rotate(-2deg);transition:transform .3s}
.hc:nth-child(even){transform:rotate(2deg) translateY(18px)}
.hc:hover{transform:rotate(0) translateY(-4px)}
.hc .in{border-radius:8px;overflow:hidden;height:100%;display:flex;flex-direction:column;color:var(--wt)}
.hc.t .in{background:var(--teal)}.hc.o .in{background:var(--ochre)}.hc.p .in{background:var(--plum)}.hc.n .in{background:var(--navy)}
.hc img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.9)}
.hc .nm{font-family:var(--en);font-size:24px;padding:14px 16px 0;line-height:1.1}
.hc .ko2{font-family:var(--ko);font-size:15px;padding:2px 16px 0;opacity:.95}
.hc .meta{margin:12px 16px 16px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.4);font-size:12.5px;line-height:1.6}

/* 이번 학기 책 메달 */
.medals-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:34px 20px;margin-top:44px;text-align:center}
.bm .disc{width:124px;height:124px;margin:0 auto;border-radius:50%;border:4px solid var(--brass);box-shadow:0 0 0 3px var(--deep),0 0 0 5px var(--brass-d);display:flex;align-items:center;justify-content:center;padding:14px;font-family:var(--ko);font-weight:700;font-size:16px;line-height:1.3;color:var(--wt)}
.bm:nth-child(4n+1) .disc{background:var(--teal)}.bm:nth-child(4n+2) .disc{background:var(--ochre)}.bm:nth-child(4n+3) .disc{background:var(--plum)}.bm:nth-child(4n) .disc{background:var(--navy)}
.bm b{display:block;margin-top:14px;font-family:var(--en);font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--brass-l);text-transform:uppercase}
.bm span{display:block;font-size:12.5px;color:var(--mut)}

/* 90분 수업 띠 */
.hour{margin-top:44px;display:grid;grid-template-columns:2fr 3fr 3fr 1fr;outline:3px solid var(--brass);box-shadow:0 0 0 6px var(--deep),0 0 0 8px var(--brass-d)}
.hour li{padding:22px 20px;min-width:0;background:rgba(34,9,13,.6)}
.hour li+li{border-left:1px solid rgba(201,164,92,.4)}
.hour .m{font-family:var(--en);font-size:30px;color:var(--brass-l);line-height:1}
.hour h3{font-family:var(--ko);font-size:18px;margin:10px 0 4px}
.hour p{font-size:13px;color:var(--mut)}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:26px;padding:0 22px;font-family:var(--en);font-size:14px;color:var(--deep);background:var(--brass);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}

/* 하위 페이지 */
.sub-top{padding:170px 150px 40px 150px;text-align:center}
.sub-top h1{font-family:var(--en);font-weight:400;font-size:clamp(46px,5.4vw,80px);line-height:1.02;color:var(--brass-l)}
.sub-top p{font-family:var(--ko);font-size:19px;margin-top:12px}
.page{padding:40px 150px 100px}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.shelf section{background:var(--parch);color:var(--ink);border-radius:4px;padding:28px 28px 22px;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.shelf h2{font-family:var(--en);font-weight:400;font-size:26px;color:var(--bg);line-height:1.1}
.shelf h2 small{display:block;font-family:var(--ko);font-size:15px;color:#6B5540;margin-top:4px}
.shelf li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(142,109,47,.45);font-family:var(--ko);font-size:15.5px}
.shelf li span{font-family:var(--ui);font-size:12px;color:#6B5540;white-space:nowrap}
.fee{width:100%;border-collapse:collapse;margin-top:30px;font-size:14.5px}
.fee th{font-family:var(--en);font-weight:400;font-size:13px;letter-spacing:.08em;color:var(--brass-l);text-align:left;padding:0 14px 12px;border-bottom:2px solid var(--brass)}
.fee td{padding:16px 14px;border-bottom:1px solid rgba(201,164,92,.25)}
.fee td.p{font-family:var(--en);font-size:20px;color:var(--brass-l);white-space:nowrap}
.fine{margin-top:14px;font-size:13px;color:var(--mut)}
.proof{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.sheet{background:var(--parch);color:var(--ink);padding:30px 30px 26px;border-radius:4px;font-family:var(--ko);font-size:16px;line-height:2;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.sheet del{color:#B8483E;text-decoration-thickness:2px}
.sheet ins{text-decoration:none;color:var(--teal);font-weight:700}
.sheet .memo{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(142,109,47,.5);font-family:var(--ui);font-size:13.5px;line-height:1.7;color:#6B5540}
.faq{margin-top:30px;border-top:2px solid var(--brass)}
.faq details{border-bottom:1px solid rgba(201,164,92,.3)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--ko);font-size:17px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-family:var(--en);font-size:26px;color:var(--brass-l)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--mut);max-width:46em}
.map{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.map dl{margin:0}
.map dl div{display:grid;grid-template-columns:90px 1fr;padding:14px 0;border-bottom:1px solid rgba(201,164,92,.25)}
.map dt{font-family:var(--en);font-size:13px;color:var(--brass-l)}
.map dd{margin:0}

/* 푸터 — 구름 띠 + 인장 */
.ft{position:relative;margin-top:40px;background:var(--deep);padding:90px 150px 110px;border-top:3px solid var(--brass)}
.ft::before{content:"";position:absolute;left:0;right:0;top:-60px;height:60px;background:radial-gradient(circle at 10% 100%,var(--parch) 0 40px,transparent 41px),radial-gradient(circle at 24% 100%,var(--parch) 0 56px,transparent 57px),radial-gradient(circle at 42% 100%,var(--parch) 0 36px,transparent 37px),radial-gradient(circle at 60% 100%,var(--parch) 0 60px,transparent 61px),radial-gradient(circle at 80% 100%,var(--parch) 0 44px,transparent 45px),radial-gradient(circle at 94% 100%,var(--parch) 0 54px,transparent 55px);opacity:.14}
.ft-in{display:flex;gap:60px;align-items:center;flex-wrap:wrap}
.ft-seal{width:170px;height:170px;border-radius:50%;border:4px double var(--brass);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:none}
.ft-seal b{font-family:var(--en);font-weight:400;font-size:26px;color:var(--brass-l)}
.ft-seal span{font-family:var(--ko);font-size:12px;color:var(--mut);margin-top:4px}
.ft-cols{display:flex;gap:60px;flex-wrap:wrap}
.ft-cols .h{font-family:var(--en);color:var(--brass-l);font-size:14px;margin-bottom:6px}
.ft-cols a{display:flex;align-items:center;min-height:36px;font-size:14px}
.ft-legal{margin-top:40px;font-size:12px;color:var(--mut);line-height:1.8}
.mbar{display:none}

@media (max-width:1100px){
  .book{grid-template-columns:1fr;padding:90px 60px 60px}
  .tabs{position:static;flex-direction:row;flex-wrap:wrap}
  .houses{grid-template-columns:1fr 1fr}
  .medals-grid{grid-template-columns:repeat(3,1fr)}
  .shelf{grid-template-columns:1fr 1fr}
  .page,.sub-top{padding-left:60px;padding-right:60px}
  .ft{padding:80px 60px 100px}
}
@media (max-width:760px){
  body::after,.md{display:none}
  .fee-wrap{overflow-x:auto}
  .fee{min-width:520px;font-size:13.5px}
  .hd{position:sticky;top:0;height:auto;pointer-events:auto;background:var(--deep);border-bottom:2px solid var(--brass);display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;min-height:64px}
  .brand{position:static;transform:none;width:auto;padding:0;background:none;clip-path:none;filter:none;color:var(--brass-l);font-size:24px;align-items:flex-start;min-height:44px;justify-content:center}
  .brand small{color:var(--mut);font-size:9.5px}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:7px;width:46px;height:46px;border:0;background:transparent;padding:0 10px;cursor:pointer}
  .burger i{display:block;height:2px;background:var(--brass-l)}
  .stage{height:auto;min-height:0;padding:40px 16px 40px}
  .collage{grid-template-columns:1fr 1fr;padding:10px;gap:8px}
  .collage img:nth-child(n+5){display:none}
  .door{position:relative;left:auto;top:auto;transform:none;justify-content:center}
  .door .pg{width:50%;height:auto;min-height:280px;padding:26px 16px}
  .door h1{font-size:30px}
  .door .pg.r p{font-size:15px}
  .plaques{position:relative;bottom:auto;padding:26px 0 0;gap:14px}
  .plq{min-width:0;flex:1 1 40%;font-size:15px}
  .book{padding:50px 20px 30px}
  .chap{padding:50px 0}
  .pair{grid-template-columns:1fr;gap:30px}
  .pair.rev>figure{order:0}
  .gild .tag{right:-4px;bottom:-10px;width:78px;height:78px;font-size:11px}
  .card{padding:30px 20px 26px 56px;transform:none}
  .card::before{left:40px}
  .card li::before{left:-32px}
  .card .stamp{position:static;display:inline-block;margin-top:10px}
  .houses{gap:18px}
  .hc,.hc:nth-child(even){transform:none}
  .hc .nm{font-size:19px;padding:10px 12px 0}
  .hc .ko2,.hc .meta{padding-left:12px;padding-right:12px;margin-left:0;margin-right:0}
  .medals-grid{grid-template-columns:1fr 1fr}
  .bm .disc{width:110px;height:110px;font-size:15px}
  .hour{grid-template-columns:1fr 1fr}
  .hour li+li{border-left:0}
  .hour li{border-top:1px solid rgba(201,164,92,.3)}
  .sub-top{padding:60px 20px 20px}
  .page{padding:20px 20px 70px}
  .shelf,.proof,.map{grid-template-columns:1fr}
  .map dl div{grid-template-columns:70px 1fr}
  .ft{padding:70px 20px 40px}
  .ft-cols a{min-height:44px}
  .mbar{display:grid;grid-template-columns:1.3fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--deep);border-top:2px solid var(--brass)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;font-size:14px;font-weight:600;color:var(--wt)}
  .mbar a.tel{background:var(--brass);color:var(--deep)}
  .mbar svg{width:17px}
  body{padding-bottom:56px}
  .tabs a{min-height:44px}
}