:root{ --paper:#f7f0e1; --paper-deep:#eee2c8; --card:#fbf7ec; --ink:#2b2a33; --mute:#6f6a5c; --navy:#14286b; --star:#1aa3e8; --gold:#a97f3d; --rule:#dccdab; --sans:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR",sans-serif; --serif:"Noto Serif KR","Batang","바탕","Nanum Myeongjo","Noto Serif CJK KR",serif; --wrap:2400px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-text-size-adjust:100%} a{color:inherit;text-decoration:none} img{max-width:100%} :focus-visible{outline:3px solid var(--star);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* 상단 메뉴바: 얇게, 로고는 크게(막대 아래로 살짝 걸침) */ .bar{position:relative;height:76px;background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden} .bar-in{max-width:var(--wrap);margin:0 auto;height:100%;padding:0 36px;display:flex;align-items:center;gap:24px} .logo{position:relative;align-self:center;margin-top:0;flex:none;display:block;overflow:hidden; height:60px;aspect-ratio:1250/404;mix-blend-mode:multiply; --lw:122.88%;--lx:-10.72%;--ly:-70.2970%} /* 원본 로고 파일(1536×1024)을 그대로 쓰고, 여백은 화면에서만 가린다. 흰 바탕은 multiply로 배경에 녹아든다 */ .logo img{position:absolute;display:block;max-width:none;width:var(--lw);left:var(--lx);top:var(--ly);height:auto;filter:brightness(1.012)} .nav{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:16px;font-weight:700;white-space:nowrap;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a,.nav button{font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;padding:8px 13px;border-bottom:2px solid transparent;letter-spacing:.01em} .nav a:hover,.nav button:hover{color:var(--navy)} .nav a.on{color:var(--navy);border-bottom-color:var(--navy)} .nav .sep{width:1px;height:18px;background:var(--rule);margin:0 8px;flex:none} .nav .auth{font-size:14.5px;font-weight:600;color:var(--mute)} .nav .who{font-size:14.5px;font-weight:700;color:var(--navy);padding:8px 6px} main{max-width:var(--wrap);margin:0 auto;padding:0 36px 56px} main.pad{padding-top:52px} /* 최종 확정 히어로: 원본 비율 그대로, 자르지 않고 실제 표시 크기 축소. */ .hero-wrap{position:relative;overflow:hidden;width:100%;height:450px;background:var(--paper);display:flex;align-items:center;justify-content:center} .hero-wrap::after{content:none} .hero{display:block;width:auto;height:100%;max-width:none;object-fit:contain;filter:none} /* 섹션 머리 */ .sec{margin-top:16px} .sec-h{display:flex;align-items:baseline;gap:14px;margin:0 0 12px} .sec-h h2{margin:0;font:700 26px/1.2 var(--serif);color:var(--navy);letter-spacing:-.01em} .sec-h .note{font-size:14px;color:var(--mute)} .sec-h .rule{flex:1;height:1px;background:var(--rule);align-self:center} .sec-h .more{font-size:14px;font-weight:700;color:var(--navy)} .sec-h .more:hover{text-decoration:underline} .sub-h{display:flex;align-items:baseline;gap:10px;margin:22px 0 8px} .sub-h h3{margin:0;font:700 20px/1.2 var(--serif);color:var(--ink)} .sub-h .cnt{font-size:13.5px;color:var(--mute)} .sub-h .rule{flex:1;height:1px;background:var(--rule);align-self:center} /* 책 표지: 신국판 152:225 고정 */ .cover{position:relative;display:block;width:100%;aspect-ratio:152/225;background:var(--paper-deep);overflow:hidden;border-radius:7px; box-shadow:0 0 0 1px rgba(60,40,10,.12),0 10px 20px -9px rgba(60,40,10,.5)} .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .cover.blank{display:flex;align-items:center;justify-content:center;padding:14%;text-align:center;font:700 clamp(13px,1.3vw,18px)/1.4 var(--serif);color:var(--navy);background:linear-gradient(160deg,#f3e8cf,#e6d6b3)} .card{display:block;transition:transform .15s ease} .card:hover{transform:translateY(-3px)} .cardwrap{position:relative;min-width:0} .cardwrap>.favmini{position:absolute;right:8px;top:8px;z-index:3} .favmini,.favbtn{border:1px solid rgba(20,40,107,.28);background:rgba(255,255,255,.92);color:#6f6a5c;cursor:pointer;box-shadow:0 2px 7px rgba(40,30,10,.18)} .favmini{width:34px;height:34px;border-radius:50%;font-size:21px;line-height:1;padding:0} .favmini.on,.favbtn.on{color:#b88913;background:#fff8da;border-color:#d7b85a} .favbtn{font:700 15px var(--sans);border-radius:3px;padding:10px 18px} .favbtn::after{content:' 즐겨찾기'} .card .t{margin-top:9px;font:700 15px/1.35 var(--serif);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card .a{font-size:13px;color:var(--mute);margin-top:2px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px 16px} .railbox{position:relative} .rail{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--rule) transparent} .rail .cardwrap{flex:none;width:148px;scroll-snap-align:start} .rail .card{width:100%} .rbtn{position:absolute;top:calc(50% - 40px);width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:rgba(251,247,236,.96);color:var(--navy);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(60,40,10,.2);z-index:2} .rbtn:hover{background:#fff} .rbtn.l{left:-12px}.rbtn.r{right:-12px} .empty{padding:40px 20px;text-align:center;color:var(--mute);background:var(--card);border:1px dashed var(--rule);border-radius:4px} /* 열람 안내 */ .gift{background:#fffaf0;border:1px solid var(--rule);border-left:5px solid var(--gold);border-radius:3px;padding:14px 20px;font-size:17px;line-height:1.7} .gift p{margin:0} .gift .g1{font:700 18.5px/1.6 var(--serif);color:var(--navy)} .gift .acct{margin-top:4px;font-weight:700;color:var(--ink);letter-spacing:.02em} .gift.slim{padding:9px 16px;font-size:15px;line-height:1.55} .gift.slim .g1{font-size:16px} /* 상세 */ .detail{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:40px;margin-top:8px;align-items:start} .detail .info h1{margin:6px 0 4px;font:700 clamp(26px,3vw,38px)/1.25 var(--serif);color:var(--navy);letter-spacing:-.01em} .pill{display:inline-block;font-size:13.5px;font-weight:700;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:1px 12px} .byline{font-size:17px;color:var(--mute);margin:0 0 12px} .oneline{font:italic 400 19px/1.65 var(--serif);color:var(--ink);margin:0 0 18px;max-width:52em} .acts{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px} .btn{font:700 16px var(--sans);cursor:pointer;border:1px solid var(--navy);color:var(--navy);background:transparent;padding:11px 24px;border-radius:3px;display:inline-block} .btn:hover{background:rgba(20,40,107,.07)} .btn.pri{background:var(--navy);color:#fff} .btn.pri:hover{background:#0f1f56} .btn[disabled],.btn.off{opacity:.45;cursor:not-allowed} .block{margin-top:26px} .block h2{font:700 21px var(--serif);color:var(--navy);margin:0 0 8px} .summary{white-space:pre-wrap;font:400 17px/1.95 var(--serif);max-width:44em;margin:0} .audio{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:14px 16px;max-width:640px} .audio audio{width:100%;display:block} .audio .none{color:var(--mute);font-size:15px} /* 읽기: 신국판 2페이지 펼침 열람기 — 화면 높이에 항상 맞춤(세로 스크롤 없음) */ main.wide{max-width:none;padding:0} .reader-spread{position:fixed;inset:0;z-index:50;background:#17181c;color:#eceaf0;display:flex;flex-direction:column;overflow:hidden} .reader-spread>audio{display:none} .titlebar{flex:none;display:flex;align-items:center;gap:14px;padding:0 20px;height:52px;background:#0f1014;border-bottom:1px solid #2a2b31} .titlebar h1{flex:1;min-width:0;margin:0;text-align:center;font:700 16px var(--sans);color:#f1efe6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .titlebar .home{font:700 13px var(--sans);color:#f1efe6;background:#2a2b31;border-radius:4px;padding:6px 12px;flex:none} .titlebar .home:hover{background:#3a3b42} .titlebar .infobtn{font:700 13px var(--sans);color:#f1efe6;background:#2a2b31;border:0;border-radius:4px;padding:6px 12px;cursor:pointer;flex:none} .titlebar .infobtn:hover{background:#3a3b42} .titlebar .pinfo{font:700 13px var(--sans);color:#cfcbd6;min-width:64px;text-align:right;flex:none} .stage{position:relative;flex:1 1 auto;min-height:0;display:flex;gap:18px;padding:14px 8px;box-sizing:border-box} .pages-row{flex:1 1 auto;min-width:0;display:flex;align-items:center;height:100%} .arrow{position:absolute;width:32px;height:64px;border-radius:4px;border:1px solid #3a3b42;background:#232429;color:#eceaf0;font-size:19px;line-height:1;cursor:pointer;z-index:2} .arrow:hover:not(:disabled){background:#2f3138} .arrow:disabled{opacity:.3;cursor:not-allowed} /* 논리 페이지(고정 신국판 규격, 152:225 = 608×900) : 여기서부터 아래 .page/.pin 규격은 화면 크기와 무관하게 항상 고정이다. 화면에 맞추는 일은 오직 .scaleport 안에서 .sheet에 적용하는 transform:scale 하나가 담당한다. */ .scaleport{flex:1 1 auto;min-width:0;height:100%;position:relative;overflow:visible} .sheet{position:absolute;top:50%;left:50%;width:1360px;height:1007px;transform-origin:center center;display:flex} .page{width:680px;height:1007px;flex:none;background:#fbf8ef;color:#1c1a22;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);position:relative} .page:first-child{box-shadow:-2px 0 0 #d8cfae inset,0 10px 30px rgba(0,0,0,.45)} .page.empty{background:#0f1014;box-shadow:none} @media (prefers-reduced-motion: no-preference){ .page.anim-next{animation:cjPgNext .22s cubic-bezier(.22,.61,.36,1)} .page.anim-prev{animation:cjPgPrev .22s cubic-bezier(.22,.61,.36,1)} @keyframes cjPgNext{from{transform:translateX(16px);opacity:.4}to{transform:translateX(0);opacity:1}} @keyframes cjPgPrev{from{transform:translateX(-16px);opacity:.4}to{transform:translateX(0);opacity:1}} } /* 논리 페이지 내부 서식 — 고정 pt 단위. 화면 크기·창 크기와 무관하게 항상 이 값 그대로다. 성인 단행본 밀도 목표: 17pt 본문에서 줄간격을 좁혀 한 페이지 22~26줄 안팎이 들어가게 한다. */ .pin{height:100%;box-sizing:border-box;padding:30px 42px 14px;overflow:hidden; font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans CJK KR","Noto Sans KR",sans-serif; font-size:17pt;font-weight:400;line-height:1.44;color:#1a1a1a;word-break:keep-all;overflow-wrap:anywhere} .pin .hd1{font-size:24pt;font-weight:700;color:#14286b;line-height:1.3} .pin .hd2{font-size:20pt;font-weight:700;color:#14286b;line-height:1.3} .pin .sn{display:block;margin:0} /* 장·절 제목과 본문 사이를 눈에 띄게 분리한다. 제목 자체의 margin-bottom을 사용해 실제 조판 높이에도 반영한다. */ .pin .sn.hd1{margin:0 0 18px !important;padding:0 !important} .pin .sn.hd2{margin:14px 0 18px !important;padding:0 !important} .pin .sn.hd1:first-child,.pin .sn.hd2:first-child{margin-top:0 !important} .pin .sn .t{padding:.02em .14em;margin:0 -.14em;border:0;outline:0;box-shadow:none;border-radius:0} .pfoot{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 13pt "Malgun Gothic","맑은 고딕",sans-serif;color:#6f6656;user-select:none} .pin .sn.booktitle .t{font-size:24pt;font-weight:700;color:#14286b;display:block;margin:.1em 0 .75em;line-height:1.3} .pin .sn.hl .t{background-color:#fff3a3} .reader-spread.synced .pin .sn.s{cursor:pointer} .ghost{position:fixed;left:-9999px;top:0;visibility:hidden;pointer-events:none} /* 측정용 요소는 화면용 .pin의 높이(100%)·overflow:hidden을 절대 물려받지 않는다 — 이 둘을 명시적으로 끊어서 실제 종이 분량(내용이 자라는 대로의 자연 높이)만 재도록 분리한다. 글꼴·줄간격·여백은 .pin과 그대로 공유한다. */ .pin.ghost{height:auto;min-height:0;max-height:none;overflow:visible} .spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8b8894;font:600 14px var(--sans);background:rgba(23,24,28,.5)} .startov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,16,20,.55);z-index:5} .startov[hidden]{display:none} .startbtn{font:700 18px var(--sans);padding:14px 30px;border-radius:8px;border:0;background:#c9a23e;color:#20180a;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)} .startbtn:hover{background:#dcb552} .panel{flex:none;width:216px;height:100%;overflow:auto;background:#1e1f24;border:1px solid #2c2d33;border-radius:8px;padding:14px 14px 16px;box-sizing:border-box} .panel h2{margin:0 0 8px;font:700 14px var(--serif);color:#f1efe6;line-height:1.4;max-height:2.8em;overflow:hidden} .panel .pnow{font-size:12px;color:#9c99a6;margin:0 0 10px} .pgrp{display:flex;gap:6px;margin:0 0 10px} .pgrp.v3{flex-wrap:wrap} .gbtn,.pbtn,.vbtn{flex:1;font:700 12.5px var(--sans);padding:7px 4px;border-radius:4px;border:1px solid #3a3b42;background:#2a2b31;color:#eceaf0;cursor:pointer;min-width:0} .gbtn:hover:not(:disabled),.pbtn:hover:not(:disabled),.vbtn:hover:not(:disabled){background:#35363d} .gbtn:disabled,.pbtn:disabled,.vbtn:disabled{opacity:.35;cursor:not-allowed} .pbtn{background:#c9a23e;color:#20180a;border-color:#c9a23e;font-weight:700} .pbtn:hover:not(:disabled){background:#dcb552} .pbtn:disabled{background:#5a4f2e;border-color:#5a4f2e;color:#a89a6a} .vbtn.on{background:#14286b;border-color:#14286b;color:#fff} .v3 .vbtn{flex:1 1 30%} .srow{display:grid;grid-template-columns:32px 1fr 40px;align-items:center;gap:6px;font-size:11.5px;color:#cfcbd6;margin:0 0 8px} .srow input[type=range]{width:100%} .follow{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#cfcbd6;margin-top:2px;cursor:pointer} .follow[hidden]{display:none} .follow input{width:14px;height:14px} .infodlg{border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);padding:0;max-width:min(680px,92vw);width:100%} .infodlg::backdrop{background:rgba(20,15,10,.55)} .idlg{padding:22px 26px 24px} .idlg h2{margin:0 0 4px;font:700 24px var(--serif);color:var(--navy)} .idlg .au{color:var(--mute);margin:0 0 12px} .idlg .desc{font-style:italic;margin:0 0 14px} .idlg .block{margin-top:16px} .idlg .block h3{font:700 17px var(--serif);color:var(--navy);margin:0 0 6px} .idlg .summary{white-space:pre-wrap;font:400 15.5px/1.8 var(--serif);max-height:32vh;overflow:auto;margin:0} .ifoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} @media (max-width:900px){ .stage{flex-direction:column;gap:10px;padding:8px} .pages-row{height:60%;flex:none} .panel{width:100%;flex:1 1 auto;height:auto;max-height:none} .pgrp.v3{flex-wrap:nowrap} } /* 로그인/가입 */ .authbox{max-width:460px;margin:8px auto 0;background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:26px 28px} .tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid var(--rule)} .tabs button{flex:1;font:700 16px var(--sans);background:none;border:0;border-bottom:3px solid transparent;padding:10px;cursor:pointer;color:var(--mute)} .tabs button.on{color:var(--navy);border-bottom-color:var(--navy)} .f{display:block;margin:0 0 13px} .f span{display:block;font-size:14px;font-weight:700;margin-bottom:4px} .f input,.f select,.f textarea{width:100%;font:400 16px var(--sans);padding:10px 12px;border:1px solid #cdbd98;border-radius:3px;background:#fff;color:var(--ink)} .f textarea{min-height:170px;resize:vertical;line-height:1.6} .msg{min-height:1.4em;font-size:14.5px;margin:6px 0 0;color:#a3321f} .msg.ok{color:#1b6a3c} .lock{background:#fff6e0;border:1px solid #e3cb8e;border-radius:3px;padding:12px 14px;font-size:15px;margin-bottom:14px} footer{border-top:1px solid var(--rule);background:var(--paper-deep);padding:18px 20px 24px;text-align:center;font-size:13.5px;color:var(--mute)} footer .fg{max-width:900px;margin:0 auto 6px} footer b{color:var(--ink)} @media (max-width:1100px){ .bar{height:auto} .bar-in{flex-wrap:wrap;gap:0;padding:8px 14px 0} .logo{align-self:center;margin:0} .logo{height:50px} .nav{margin:0;width:100%;order:3;font-size:15px} main.pad{padding-top:22px} } @media (max-width:760px){ .detail{grid-template-columns:1fr;gap:22px} .detail .cv{max-width:240px} .sec-h .note{display:none} .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 12px} .rail .cardwrap{width:118px} .rail .card{width:100%} .rbtn{display:none} .pdfbox{height:calc(100vh - 160px)} } @media (max-width:1100px){ .rgrid.v-text,.rgrid.v-both{grid-template-columns:minmax(0,1fr)} .rgrid.v-both .pdfp{position:static} .toc{position:static;max-height:none} .toc ol{max-height:46vh;overflow:auto} .tx{padding:14px 18px 22px} .vsw{margin-left:0} } @media (max-width:760px){ .hero-wrap{height:225px} .reader-spread .sheet{width:680px} .reader-spread .page:first-child{box-shadow:0 10px 30px rgba(0,0,0,.45)} .titlebar{padding:0 8px;gap:8px} .titlebar .pinfo{min-width:46px;font-size:12px} .titlebar h1{font-size:14px} .stage{padding:8px 4px} .arrow{width:28px;height:56px} } @media(max-width:760px){ .reader-spread{padding-bottom:105px!important} .cj-mobile-player{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#f7f3e8;border-top:1px solid #bbb;padding:6px 8px 8px;color:#18233d} .cj-mobile-player .cj-buttons{display:flex;gap:6px;margin-bottom:5px} .cj-mobile-player button{flex:1;height:34px;border:1px solid #243d72;border-radius:5px;background:#fff;color:#243d72;font-weight:700} .cj-mobile-player .cj-play{background:#243d72;color:#fff} .cj-mobile-player .cj-sliders{display:flex;gap:10px} .cj-mobile-player label{flex:1;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700} .cj-mobile-player input{width:100%} } @media(max-width:760px){ .reader-spread .arrow{ top:auto!important; bottom:6px!important; width:34px!important; height:34px!important; z-index:30!important; } .reader-spread .arrow.l{ left:calc(50% - 72px)!important; right:auto!important; } .reader-spread .arrow.r{ left:calc(50% + 38px)!important; right:auto!important; } } @media(max-width:760px){ .reader-spread .arrow{ bottom:-22px!important; width:32px!important; height:32px!important; } .reader-spread .arrow.l{ left:calc(50% - 58px)!important; } .reader-spread .arrow.r{ left:calc(50% + 26px)!important; } } @media(max-width:760px){ .reader-spread .arrow{ height:26px!important; min-height:26px!important; line-height:24px!important; } } @media(max-width:760px){ .reader-spread .arrow{ height:24px!important; min-height:24px!important; line-height:22px!important; bottom:-9px!important; } .reader-spread .arrow.l{ left:calc(50% - 48px)!important; } .reader-spread .arrow.r{ left:calc(50% + 16px)!important; } } .book-card .star, .book-card .favorite, .book-card .fav, .recommend-card .star, .recommend-card .favorite, .recommend-card .fav{ display:none!important; } .favbtn{display:none!important} .favbtn,.favmini{display:none!important} /* 문화지평 작품 오프닝 */ .book-intro{ position:fixed; inset:0; z-index:9999; background:#f7f1df; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:24px; box-sizing:border-box; } .book-intro img{ max-height:72vh; max-width:82vw; width:auto; height:auto; object-fit:contain; box-shadow:0 8px 28px rgba(0,0,0,.18); } .book-intro-title{ margin-top:18px; font-size:24px; font-weight:700; text-align:center; color:#142b69; } /* FIRST_SPREAD_INTRO_FINAL */ .cj-intro-left-page{ position:relative; overflow:hidden; display:flex !important; align-items:center; justify-content:center; padding:0 !important; } .cj-intro-left-image{ width:100%; height:100%; object-fit:contain; display:block; } .book-intro, .intro-box, .intro-modal, .intro-overlay, .startov .intro, button.introbtn, .introbtn{ display:none !important; } /* HOME_HERO_110 */ .home-hero img, .hero img, .hero-image, .hero-banner img { width: 110% !important; max-width: 110% !important; height: auto !important; } /* HOME_HERO_110 */ .hero img, .hero-image, .hero-banner img, .home-hero img{ width:110% !important; max-width:110% !important; height:auto !important; position:relative; left:50%; transform:translateX(-50%); } /* MJ_RECNOTE_CLEAN_FINAL */ @keyframes mjRecNoteBlinkFinal{0%,100%{opacity:1}50%{opacity:.5}} #rec .sec-h .note{ font-size:26px!important; font-weight:700!important; color:#8f3b3b!important; line-height:1.2!important; margin-left:14px!important; animation:mjRecNoteBlinkFinal 1.5s ease-in-out infinite!important; } /* MJ_REC_META_HIDE */ #rec .grid > * .title,#rec .grid > * .author,#rec .grid > * .meta{display:none!important;} /* MJ_REC_META_HIDE2 */ #rec .cardwrap .t,#rec .cardwrap .a{display:none!important;} /* MJ_REC_META_HIDE2 */ #rec .cardwrap .t,#rec .cardwrap .a{display:none!important;} /* MJ_MOBILE_GUIDE_ONE_COLUMN_20261009 */ @media (max-width: 760px) { /* 안내페이지 전체 */ #mjGuideFullScreen { align-items: flex-start !important; justify-content: center !important; padding: 12px 0 24px !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* 핵심: PC용 2열을 모바일 1열로 변경 */ #mjGuideFullScreen > div, #mjGuideFullScreen .mj-guide-box { width: 94vw !important; max-width: 94vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; overflow: visible !important; border-radius: 7px !important; } /* 위쪽 표지 영역 */ #mjGuideFullScreen > div > div:first-child, #mjGuideFullScreen .mj-guide-left { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #05070a !important; overflow: hidden !important; } #mjGuideFullScreen > div > div:first-child img, #mjGuideFullScreen .mj-guide-left img { width: 100% !important; height: auto !important; max-height: 50vh !important; object-fit: contain !important; display: block !important; background: #05070a !important; } /* 아래쪽 안내문 영역 */ #mjGuideFullScreen > div > div:nth-child(2), #mjGuideFullScreen .mj-guide-right { width: 100% !important; box-sizing: border-box !important; padding: 22px 20px 26px !important; display: block !important; overflow: visible !important; background: #fbf7ec !important; } #mjGuideFullScreen h1 { font-size: 28px !important; line-height: 1.25 !important; margin: 0 0 16px !important; word-break: keep-all !important; } #mjGuideFullScreen div { word-break: keep-all !important; } #mjGuideFullScreen button, #mjGuideStartBtn { width: 100% !important; font-size: 20px !important; padding: 15px 14px !important; box-sizing: border-box !important; } } /* MJ_MOBILE_GUIDE_ONE_COLUMN_20261009 */ @media (max-width: 760px) { /* 안내페이지 전체 */ #mjGuideFullScreen { align-items: flex-start !important; justify-content: center !important; padding: 12px 0 24px !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* 핵심: PC용 2열을 모바일 1열로 변경 */ #mjGuideFullScreen > div, #mjGuideFullScreen .mj-guide-box { width: 94vw !important; max-width: 94vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; overflow: visible !important; border-radius: 7px !important; } /* 위쪽 표지 영역 */ #mjGuideFullScreen > div > div:first-child, #mjGuideFullScreen .mj-guide-left { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #05070a !important; overflow: hidden !important; } #mjGuideFullScreen > div > div:first-child img, #mjGuideFullScreen .mj-guide-left img { width: 100% !important; height: auto !important; max-height: 50vh !important; object-fit: contain !important; display: block !important; background: #05070a !important; } /* 아래쪽 안내문 영역 */ #mjGuideFullScreen > div > div:nth-child(2), #mjGuideFullScreen .mj-guide-right { width: 100% !important; box-sizing: border-box !important; padding: 22px 20px 26px !important; display: block !important; overflow: visible !important; background: #fbf7ec !important; } #mjGuideFullScreen h1 { font-size: 28px !important; line-height: 1.25 !important; margin: 0 0 16px !important; word-break: keep-all !important; } #mjGuideFullScreen div { word-break: keep-all !important; } #mjGuideFullScreen button, #mjGuideStartBtn { width: 100% !important; font-size: 20px !important; padding: 15px 14px !important; box-sizing: border-box !important; } } /* MJ_MOBILE_GUIDE_SIMPLE_20261009 */ @media (max-width: 760px) { #mjGuideFullScreen { align-items: flex-start !important; justify-content: center !important; padding: 12px 0 24px !important; overflow-y: auto !important; overflow-x: hidden !important; } #mjGuideFullScreen > div { width: 94vw !important; max-width: 94vw !important; height: auto !important; max-height: none !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; overflow: visible !important; } #mjGuideFullScreen > div > div:first-child { width: 100% !important; height: auto !important; min-height: 0 !important; } #mjGuideFullScreen > div > div:first-child img { width: 100% !important; height: auto !important; max-height: 48vh !important; object-fit: contain !important; } #mjGuideFullScreen > div > div:nth-child(2) { width: 100% !important; padding: 22px 20px 26px !important; display: block !important; overflow: visible !important; box-sizing: border-box !important; } #mjGuideFullScreen h1 { font-size: 28px !important; line-height: 1.25 !important; } #mjGuideFullScreen button { width: 100% !important; font-size: 20px !important; padding: 15px 14px !important; } } /* MJ_MOBILE_GUIDE_COMPACT_20261009 */ @media (max-width: 760px) { #mjGuideFullScreen { align-items: flex-start !important; justify-content: center !important; padding: 6px 0 10px !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } #mjGuideFullScreen > div, #mjGuideFullScreen .mj-guide-box { width: 96vw !important; max-width: 96vw !important; height: auto !important; max-height: none !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; overflow: visible !important; margin: 0 auto 10px !important; } #mjGuideFullScreen > div > div:first-child, #mjGuideFullScreen .mj-guide-left { height: auto !important; min-height: 0 !important; padding: 0 !important; } #mjGuideFullScreen > div > div:first-child img, #mjGuideFullScreen .mj-guide-left img { width: 100% !important; height: auto !important; max-height: 32vh !important; object-fit: contain !important; display: block !important; } #mjGuideFullScreen > div > div:nth-child(2), #mjGuideFullScreen .mj-guide-right { padding: 10px 14px 12px !important; display: block !important; overflow: visible !important; box-sizing: border-box !important; } #mjGuideFullScreen h1 { font-size: 22px !important; line-height: 1.15 !important; margin: 0 0 7px !important; } #mjGuideFullScreen > div > div:nth-child(2) > div, #mjGuideFullScreen .mj-guide-right > div { font-size: 14px !important; line-height: 1.32 !important; margin-bottom: 8px !important; } #mjGuideFullScreen > div > div:nth-child(2) > div[style*="background"], #mjGuideFullScreen .mj-guide-right > div[style*="background"] { padding: 8px 10px !important; margin-bottom: 9px !important; border-radius: 6px !important; } #mjGuideFullScreen b { line-height: 1.25 !important; } #mjGuideFullScreen button, #mjGuideStartBtn { width: 100% !important; font-size: 17px !important; line-height: 1.2 !important; padding: 10px 12px !important; margin: 0 !important; min-height: 0 !important; box-sizing: border-box !important; } } /* MJ_MOBILE_GUIDE_FIT_HEIGHT_20261009 */ @media (max-width: 760px) { #mjGuideFullScreen { width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; padding: 4px 0 !important; margin: 0 !important; overflow: hidden !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } #mjGuideFullScreen > div, #mjGuideFullScreen .mj-guide-box { width: 96vw !important; max-width: 96vw !important; height: calc(100dvh - 8px) !important; max-height: calc(100dvh - 8px) !important; min-height: 0 !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 36% 64% !important; overflow: hidden !important; border-radius: 6px !important; box-sizing: border-box !important; } #mjGuideFullScreen > div > div:first-child, #mjGuideFullScreen .mj-guide-left { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } #mjGuideFullScreen > div > div:first-child img, #mjGuideFullScreen .mj-guide-left img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; display: block !important; } #mjGuideFullScreen > div > div:nth-child(2), #mjGuideFullScreen .mj-guide-right { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 9px 13px 10px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; overflow: hidden !important; box-sizing: border-box !important; } #mjGuideFullScreen h1 { font-size: 20px !important; line-height: 1.12 !important; margin: 0 0 5px !important; padding: 0 !important; } #mjGuideFullScreen > div > div:nth-child(2) > div, #mjGuideFullScreen .mj-guide-right > div { font-size: 13px !important; line-height: 1.25 !important; margin: 0 0 6px !important; padding: 0 !important; } #mjGuideFullScreen > div > div:nth-child(2) > div[style*="background"], #mjGuideFullScreen .mj-guide-right > div[style*="background"] { font-size: 13px !important; line-height: 1.24 !important; padding: 6px 8px !important; margin: 0 0 7px !important; border-radius: 5px !important; } #mjGuideFullScreen br { display: none !important; } #mjGuideFullScreen button, #mjGuideStartBtn { width: 100% !important; flex: 0 0 auto !important; font-size: 16px !important; line-height: 1.15 !important; padding: 9px 10px !important; margin: 0 !important; min-height: 0 !important; box-sizing: border-box !important; } } /* MJ_MOBILE_GUIDE_IMAGE_BIG_20261009 */ @media (max-width: 760px) { #mjGuideFullScreen > div, #mjGuideFullScreen .mj-guide-box { grid-template-rows: 56% 44% !important; } #mjGuideFullScreen > div > div:first-child img, #mjGuideFullScreen .mj-guide-left img { width: 100% !important; height: 100% !important; object-fit: contain !important; } #mjGuideFullScreen > div > div:nth-child(2), #mjGuideFullScreen .mj-guide-right { padding: 7px 12px 5px !important; justify-content: flex-start !important; gap: 4px !important; } #mjGuideFullScreen h1 { font-size: 20px !important; line-height: 1.1 !important; margin: 0 0 4px !important; } #mjGuideFullScreen > div > div:nth-child(2) > div, #mjGuideFullScreen .mj-guide-right > div { font-size: 13px !important; line-height: 1.22 !important; margin: 0 0 4px !important; } #mjGuideFullScreen > div > div:nth-child(2) > div[style*="background"], #mjGuideFullScreen .mj-guide-right > div[style*="background"] { padding: 5px 8px !important; margin: 0 0 5px !important; line-height: 1.2 !important; } #mjGuideFullScreen button, #mjGuideStartBtn { margin: 0 !important; padding: 8px 10px !important; font-size: 16px !important; } } /* MJ_MOBILE_HOME_FIXED_HERO_20261009 */ @media (max-width: 900px) { body.mj-mobile-fixed-hero-on { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; background: #f4ecd8 !important; } body.mj-mobile-fixed-hero-on > *:not(#mjCleanMobileHome):not(script):not(style) { display: none !important; } #mjCleanMobileHome { display: block !important; width: 100vw !important; max-width: 100vw !important; min-height: 100vh !important; margin: 0 !important; padding: 2px 6px 8px !important; box-sizing: border-box !important; background: #f4ecd8 !important; overflow-x: hidden !important; font-family: inherit !important; } #mjCleanMobileHome * { box-sizing: border-box !important; } .mj-clean-logo { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .mj-clean-logo img { display: block !important; max-width: 145px !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .mj-clean-login { display: flex !important; gap: 3px !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .mj-clean-login-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 20px !important; min-width: 46px !important; padding: 0 6px !important; margin: 0 !important; border: 1px solid #8d7a48 !important; border-radius: 4px !important; background: #fff7df !important; color: #111 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; text-decoration: none !important; white-space: nowrap !important; } .mj-clean-menu { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 1px 9px !important; margin: 0 !important; padding: 1px 0 !important; line-height: 1.05 !important; } .mj-clean-menu-item { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #111 !important; font-size: 11.5px !important; line-height: 1.05 !important; font-weight: 900 !important; text-decoration: none !important; white-space: nowrap !important; } .mj-clean-hero { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; overflow: visible !important; } .mj-clean-hero img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; vertical-align: top !important; } .mj-clean-rec { display: block !important; width: 100% !important; margin: 0 0 3px !important; padding: 0 !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: visible !important; } .mj-clean-rec b { color: #06356d !important; font-size: 14px !important; font-weight: 900 !important; } .mj-clean-rec span { color: #8a2f23 !important; font-size: 10.2px !important; font-weight: 900 !important; } .mj-clean-books { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 8px !important; margin: 0 !important; padding: 0 !important; } .mj-clean-book, .mj-clean-book img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; text-decoration: none !important; } } /* MJ_LOGO_LIFT_GAP_ONLY_20261009 */ @media (max-width: 900px) { #mjCleanMobileHome .mj-clean-logo { margin-top: -3px !important; margin-bottom: -3px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 0 !important; } #mjCleanMobileHome .mj-clean-logo a { display: inline-block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } #mjCleanMobileHome .mj-clean-logo img { display: block !important; max-width: 145px !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: translateY(-2px) !important; } #mjCleanMobileHome .mj-clean-login { margin-top: -2px !important; padding-top: 0 !important; } } /* MJ_MOBILE_LIFT_BLINK_ONLY_20261009 */ @media (max-width: 900px) { /* 즐겨찾기 행 이하만 살짝 위로 */ #mjCleanMobileHome .mj-clean-login, #mjCleanMobileHome .mj-clean-menu, #mjCleanMobileHome .mj-clean-hero, #mjCleanMobileHome .mj-clean-rec, #mjCleanMobileHome .mj-clean-books { transform: translateY(-4px) !important; } /* 흐름상 남는 간격도 같이 줄임 */ #mjCleanMobileHome .mj-clean-logo { margin-bottom: -3px !important; } #mjCleanMobileHome .mj-clean-login { margin-bottom: -1px !important; } #mjCleanMobileHome .mj-clean-menu { margin-bottom: -1px !important; } /* “책을 터치...” 문구만 부드럽게 점멸 */ #mjCleanMobileHome .mj-clean-rec span { animation: mjSoftBlink 2.8s ease-in-out infinite !important; } @keyframes mjSoftBlink { 0% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 1; } } } /* MJ_LOGO_CENTER_RESTORE_20261009 */ @media (max-width: 900px) { /* 로고만 중앙에 부활 */ #mjCleanMobileHome .mj-clean-logo { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; text-align: center !important; margin: 0 auto 0 !important; padding: 0 !important; line-height: 0 !important; opacity: 1 !important; visibility: visible !important; } #mjCleanMobileHome .mj-clean-logo a { display: inline-block !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 auto !important; padding: 0 !important; line-height: 0 !important; opacity: 1 !important; visibility: visible !important; } #mjCleanMobileHome .mj-clean-logo img { display: block !important; max-width: 145px !important; width: auto !important; height: auto !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; } } /* MJ_LOGO_CROP_FINAL_20261009 */ @media (max-width: 900px) { #mjCleanMobileHome .mj-clean-logo { display: block !important; width: fit-content !important; margin: 0 auto 1px !important; padding: 0 5px 2px !important; line-height: 0 !important; text-align: center !important; background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(218,199,154,0.22) 78%, rgba(164,132,70,0.36) 100% ) !important; border-radius: 0 0 6px 6px !important; box-shadow: none !important; } #mjCleanMobileHome .mj-clean-logo a { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; border: 0 !important; } #mjCleanMobileHome .mj-clean-logo img { display: block !important; max-width: 145px !important; width: auto !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; } #mjCleanMobileHome .mj-clean-login { margin-top: 1px !important; padding-top: 0 !important; } #mjLogoGroundBar { display: none !important; } } /* MJ_LOGOFIX */ body .mj-clean-logo{display:flex!important;align-items:center!important;align-self:center!important;overflow:visible!important;clip-path:none!important;height:auto!important;max-height:none!important;margin-top:auto!important;margin-bottom:auto!important} body .mj-clean-logo a{display:flex!important;align-items:center!important;overflow:visible!important} body .mj-clean-logo img{width:auto!important;max-width:none!important;height:58px!important;max-height:none!important;object-fit:contain!important;object-position:center!important;clip-path:none!important;transform:none!important} /* CULTURE_HERO_75_FINAL_START */ @media screen and (min-width: 769px) { html body .mj-clean-hero { width: 75% !important; max-width: 75% !important; height: auto !important; min-height: 0 !important; margin-left: auto !important; margin-right: auto !important; display: flex !important; justify-content: center !important; overflow: visible !important; } html body .mj-clean-hero > img, html body .mj-clean-hero img.hero { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 auto !important; } } /* CULTURE_HERO_75_FINAL_END */