/* KOMA v4 — 글·그림=주황, 읽기방식 독, 히어로 툴팁, 모바일 탭바/미니독 */
:root{--c-text:#D4642F;--c-easy:#f9dd74}
/* ===== 읽기방식 독 (홈 외 페이지 = 오른쪽 세로, 스크롤 추종) ===== */
.modedock{position:fixed;z-index:120;display:flex;flex-direction:column;gap:14px;
right:16px;top:50%;transform:translateY(-50%)}
.modedock .mdot{position:relative;border:none;padding:0;cursor:pointer;border-radius:50%;
width:24px;height:24px;background:var(--dotc);outline-offset:3px}
.modedock .mdot .mlab{position:absolute;right:34px;top:50%;transform:translate(8px,-50%);
white-space:nowrap;background:#241B12;color:#fff;font-size:12px;font-weight:800;
padding:5px 10px;border-radius:3px;opacity:0;pointer-events:none;transition:.16s}
.modedock .mdot:hover .mlab,.modedock .mdot:focus-visible .mlab{opacity:1;transform:translate(0,-50%)}
/* 홈 데스크톱: 독 숨김(큰 히어로 사용) */
@media(min-width:768px){ body.koma-home .modedock{display:none} }
/* ===== 히어로 원 hover 툴팁(데스크톱) ===== */
.modetip{position:fixed;z-index:160;pointer-events:none;background:#241B12;color:#fff;
padding:7px 12px;border-radius:3px;font-size:13px;font-weight:800;opacity:0;transition:opacity .14s;line-height:1.3}
.modetip b{color:#F2C9B2;display:block;font-size:11px;font-weight:700;margin-top:2px}
/* ===== 모바일 하단 탭바 ===== */
.kmtab{display:none}
@media(max-width:767px){
.gnb2 nav a[href]{display:none}
body{padding-bottom:60px}
.kmtab{position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;
background:var(--paper);border-top:1.5px solid var(--ink)}
.kmtab a{flex:1;text-align:center;padding:8px 2px 7px;text-decoration:none;
font-size:11px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
display:flex;flex-direction:column;align-items:center;gap:3px}
.kmtab a .ic{width:21px;height:21px;display:block}
.kmtab a[aria-current="page"]{color:#D4642F}
/* 모바일: 독을 하단 가로 미니로, 큰 히어로 숨김 */
.modedock{flex-direction:row;gap:18px;right:auto;left:50%;top:auto;bottom:70px;transform:translateX(-50%)}
.modedock .mdot{width:28px;height:28px}
.modedock .mdot .mlab{right:auto;left:50%;top:-32px;transform:translateX(-50%);opacity:0}
.modedock .mdot.show .mlab{opacity:1}
.hero4{display:none}
}
/* ===== 방문자 환영 선언 (about) ===== */
.declwall{margin-top:34px;border-top:1.5px solid var(--ink);padding-top:24px}
.declwall-h{font-weight:900;font-size:1.05rem;color:var(--ink);margin:0 0 14px}
.declform input{width:100%;box-sizing:border-box;border:1.5px solid var(--ink);background:#fff;
font:inherit;font-weight:700;padding:12px 14px;border-radius:3px;margin-bottom:10px}
.declform .declrow{display:flex;gap:10px;align-items:stretch}
.declform .declrow input{margin-bottom:0;flex:1}
.declform .declrow .btn2{white-space:nowrap}
.decllist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.decllist .declitem{border-left:4px solid var(--orange);background:rgba(212,100,47,.06);
padding:11px 14px;font-weight:700;color:var(--ink);line-height:1.5;border-radius:0}
.decllist .declby{display:block;margin-top:4px;font-size:.8rem;font-weight:800;color:var(--orange)}
/* ===== 원 모션 (독, 데스크톱+모바일) ===== */
@media(prefers-reduced-motion:no-preference){
html:not([data-motion="off"]) .modedock .mdot{animation:kfloat 2.8s ease-in-out infinite}
html:not([data-motion="off"]) .modedock .mdot:nth-child(2){animation-delay:.34s}
html:not([data-motion="off"]) .modedock .mdot:nth-child(3){animation-delay:.68s}
html:not([data-motion="off"]) .modedock .mdot:nth-child(4){animation-delay:1.02s}
html:not([data-motion="off"]) .modedock .mdot:nth-child(5){animation-delay:1.36s}
}
@keyframes kfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* ===== 모바일 홈 히어로 상단 잘림 수정 ===== */
@media(max-width:767px){
.hero2{min-height:auto;justify-content:flex-start;padding-top:92px;padding-bottom:40px}
}
/* ===== 모바일 히어로 상단 잘림: overflow까지 해제 ===== */
@media(max-width:767px){ .hero2{overflow:visible} }
/* ===== 방문자 선언: 회색 안내 + 게시판 토글 ===== */
.declwall-h{color:var(--muted);font-weight:800}
.declmore{margin-top:12px;border:1.5px solid var(--ink);background:#fff;font:inherit;font-weight:800;
font-size:.82rem;padding:8px 14px;border-radius:3px;cursor:pointer}
.decllist.board{max-height:300px;overflow-y:auto;border:1.5px solid var(--ink);border-radius:3px;padding:12px}
/* ===== offline 레고 숫자 한 줄 ===== */
.legonums{flex-wrap:nowrap}
/* ===== 10번째 선언(방문자) 회색 안내 ===== */
.decl li.decl-you .declyou-ph{color:var(--muted);font-weight:800}
/* ===== 쉬운 글 = 브랜드 노랑 #f9dd74 (노랑 위 글씨는 어둡게) ===== */
.m-easy{color:#241B12}
.hero4 .hb2{box-shadow:inset 0 0 0 2px rgba(36,27,18,.26)}
.modedock .mdot-easy{box-shadow:inset 0 0 0 1.5px rgba(36,27,18,.30)}
.pbar.is-dev,.pbar.is-dev .ba2,.pbar.is-dev .pr,
.bigchip.is-dev,.bookcover2.is-dev,.bookcover2.is-dev span{color:#241B12 !important}
/* ===== 접근성: '화면 설명(.cap)'을 보조기기(스크린리더·점자)엔 읽히게 (시각적으론 숨김) ===== */
.cap{display:block !important;position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:normal;border:0;background:none !important;color:inherit !important}
/* ===== 점자 안내 원/카드 (보라 #7A4E96) ===== */
.m-braille{background:#7A4E96}
/* ===== 우리는: 꼬마의 네 가지 바람 ===== */
.wishes{list-style:none;margin:18px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.wishes li{border-bottom:1.5px solid rgba(36,27,18,.4);padding:24px 4px;display:grid;
grid-template-columns:minmax(120px,190px) 1fr;gap:14px 38px;align-items:baseline}
.wishes .wlab{font-weight:900;font-size:clamp(1.4rem,3.6vw,2.1rem);letter-spacing:-.03em;color:#D4642F}
.wishes li:nth-child(2) .wlab{color:#2E7D63}
.wishes li:nth-child(3) .wlab{color:#8A2E4D}
.wishes li:nth-child(4) .wlab{color:#7A4E96}
.wishes p{margin:0;font-weight:600;line-height:1.75;color:var(--ink);max-width:60ch}
@media(max-width:640px){.wishes li{grid-template-columns:1fr;gap:6px;padding:18px 2px}}
/* ===== 책방: 꼬마에는 이런 책이 있어요 ===== */
.bookkinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
.bookkinds .bk{border:1.5px solid var(--line);border-radius:14px;padding:20px 22px;border-left-width:7px}
.bookkinds .bk-text{border-left-color:#D4642F}
.bookkinds .bk-easy{border-left-color:#f9dd74}
.bookkinds .bk-wordless{border-left-color:#16100B}
.bookkinds .bk-braille{border-left-color:#7A4E96}
.bookkinds .bk-name{display:inline-block;font-weight:900;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:8px}
.bookkinds .bk-text .bk-name{color:#D4642F}
.bookkinds .bk-easy .bk-name{color:#A8431A}
.bookkinds .bk-wordless .bk-name{color:#16100B}
.bookkinds .bk-braille .bk-name{color:#7A4E96}
.bookkinds .bk p{margin:0;font-weight:600;line-height:1.7;color:var(--ink)}
/* ===== 오프라인: 책방 접근성 안내 ===== */
.accessmap{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.accessmap li{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.accessmap .am-no{flex:none;min-width:34px;height:34px;padding:0 8px;border-radius:50px;background:var(--ink);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;font-family:'IBM Plex Mono',monospace}
.accessmap b{display:block;font-weight:900;font-size:1.02rem;margin-bottom:4px;color:var(--ink)}
.accessmap p{margin:0;font-weight:600;font-size:.92rem;line-height:1.6;color:var(--muted)}
/* ===== 책방: 분류 설명 hover/포커스 시 노출 ===== */
.bookkinds .bk{cursor:default}
.bookkinds .bk p{max-height:0;opacity:0;overflow:hidden;margin:0;transition:max-height .3s var(--ease),opacity .25s,margin-top .3s}
.bookkinds .bk:hover p,.bookkinds .bk:focus p,.bookkinds .bk:focus-within p{max-height:20em;opacity:1;margin-top:8px}
@media(hover:none){.bookkinds .bk p{max-height:none;opacity:1;margin-top:8px}}
/* ===== 우리는: 당신의 바람 게시판 · 책방지기 연락처 ===== */
.wishbox{max-width:560px}
.kpcontact{font-weight:700}
.kpcontact a{text-decoration:underline;text-underline-offset:2px}
/* ===== 오프라인: 접근성 소제목 ===== */
.accesshd{margin:32px 0 6px;font-weight:900;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}
/* ===== 책방 분류: 대표색 표지 카드 + hover 부드럽게 (재디자인) ===== */
.bookkinds .bk{border:none;color:#fff;min-height:150px;display:flex;flex-direction:column;overflow:hidden;
border-radius:14px;padding:22px;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.bookkinds .bk-text{background:#D4642F}
.bookkinds .bk-easy{background:#f9dd74;color:#241B12}
.bookkinds .bk-wordless{background:#16100B}
.bookkinds .bk-braille{background:#7A4E96}
.bookkinds .bk-text .bk-name,.bookkinds .bk-wordless .bk-name,.bookkinds .bk-braille .bk-name{color:#fff}
.bookkinds .bk-easy .bk-name{color:#241B12}
.bookkinds .bk-name{font-size:1.3rem;margin:0}
.bookkinds .bk p{color:inherit;line-height:1.65;max-height:0;opacity:0;overflow:hidden;margin:0;
transition:max-height .5s var(--ease),opacity .45s var(--ease),margin-top .5s var(--ease)}
.bookkinds .bk:hover p,.bookkinds .bk:focus p,.bookkinds .bk:focus-within p{max-height:22em;opacity:.97;margin-top:14px}
.bookkinds .bk:hover{box-shadow:0 16px 34px rgba(22,16,11,.22);transform:translateY(-3px)}
@media(hover:none){.bookkinds .bk p{max-height:none;opacity:.97;margin-top:14px}}
/* ===== 우리는: 디자인된 연락처 ===== */
.contact2{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.contact2 .cbtn{display:flex;flex-direction:column;gap:3px;text-decoration:none;border:1.5px solid var(--ink);
border-radius:12px;padding:14px 22px;min-width:210px;transition:transform .15s var(--ease),background .15s,border-color .15s}
.contact2 .cbtn .cl{font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.contact2 .cbtn .cv{font-size:1.02rem;font-weight:800;color:var(--ink)}
.contact2 .cbtn:hover{transform:translateY(-3px)}
.contact2 .cbtn-ig:hover{background:#D4642F;border-color:#D4642F}
.contact2 .cbtn-mail:hover{background:var(--ink)}
.contact2 .cbtn:hover .cl,.contact2 .cbtn:hover .cv{color:#fff}
/* ===== 책방 분류: 클릭하면 뒤집히는 flip 카드 ===== */
.bookkinds .bk{appearance:none;-webkit-appearance:none;background:none;border:none;padding:0;margin:0;cursor:pointer;perspective:1100px;min-height:190px;text-align:left;font:inherit;display:block;width:100%}
.bookkinds .bk-inner{position:relative;width:100%;min-height:190px;transition:transform .6s var(--ease);transform-style:preserve-3d}
.bookkinds .bk.flipped .bk-inner{transform:rotateY(180deg)}
.bookkinds .bk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;padding:22px;display:flex;flex-direction:column;overflow:hidden}
.bookkinds .bk-front{justify-content:space-between}
.bookkinds .bk-back{transform:rotateY(180deg);justify-content:center}
.bookkinds .bk-name{font-weight:900;font-size:1.35rem;letter-spacing:-.02em;color:inherit!important}
.bookkinds .bk-flip{font-size:.74rem;font-weight:800;opacity:.85;margin-top:auto}
.bookkinds .bk-back p{margin:0!important;max-height:none!important;opacity:1!important;overflow:auto;font-weight:600;line-height:1.6;font-size:.95rem}
.bookkinds .bk-text .bk-face{background:#D4642F;color:#fff}
.bookkinds .bk-wordless .bk-face{background:#16100B;color:#fff}
.bookkinds .bk-braille .bk-face{background:#7A4E96;color:#fff}
.bookkinds .bk-easy .bk-face{background:#f9dd74;color:#241B12}
/* ===== 연락처: 이메일 복사 ===== */
.contact2 .cbtn{appearance:none;-webkit-appearance:none;font:inherit;background:none;cursor:pointer;text-align:left}
.contact2 .copymsg{font-size:.7rem;font-weight:800;color:#2E7D63;min-height:.9em;margin-top:2px}
.contact2 .cbtn-mail:hover .copymsg{color:#fff}
/* ===== 오프라인 접근성 목록: 색 입히기 ===== */
.accessmap li{border-left-width:6px;border-left-style:solid}
.accessmap li:nth-child(7n+1){border-left-color:#D4642F}.accessmap li:nth-child(7n+1) .am-no{background:#D4642F}
.accessmap li:nth-child(7n+2){border-left-color:#2E7D63}.accessmap li:nth-child(7n+2) .am-no{background:#2E7D63}
.accessmap li:nth-child(7n+3){border-left-color:#8A2E4D}.accessmap li:nth-child(7n+3) .am-no{background:#8A2E4D}
.accessmap li:nth-child(7n+4){border-left-color:#7A4E96}.accessmap li:nth-child(7n+4) .am-no{background:#7A4E96}
.accessmap li:nth-child(7n+5){border-left-color:#A8431A}.accessmap li:nth-child(7n+5) .am-no{background:#A8431A}
.accessmap li:nth-child(7n+6){border-left-color:#16100B}.accessmap li:nth-child(7n+6) .am-no{background:#16100B}
.accessmap li:nth-child(7n+7){border-left-color:#D4642F}.accessmap li:nth-child(7n+7) .am-no{background:#D4642F}
/* ===== 책방 분류 flip 최종 안정화 (그리드-스택, 절대배치 충돌 제거) ===== */
.bookkinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px;align-items:stretch}
.bookkinds .bk{all:unset;display:block;cursor:pointer;perspective:1100px;box-sizing:border-box}
.bookkinds .bk:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:14px}
.bookkinds .bk-inner{display:grid;transition:transform .55s var(--ease);transform-style:preserve-3d;min-height:175px}
.bookkinds .bk.flipped .bk-inner{transform:rotateY(180deg)}
.bookkinds .bk-face{position:static;grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;
border-radius:14px;padding:22px;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;inset:auto;max-height:none;opacity:1}
.bookkinds .bk-front{justify-content:space-between}
.bookkinds .bk-back{transform:rotateY(180deg);justify-content:center}
.bookkinds .bk-name{font-weight:900;font-size:1.3rem;letter-spacing:-.02em;margin:0;color:inherit}
.bookkinds .bk-flip{font-size:.74rem;font-weight:800;opacity:.85;margin-top:auto}
.bookkinds .bk-back p{margin:0;font-weight:600;line-height:1.55;font-size:.92rem;color:inherit;max-height:none;opacity:1}
.bookkinds .bk-text .bk-face{background:#D4642F;color:#fff}
.bookkinds .bk-wordless .bk-face{background:#16100B;color:#fff}
.bookkinds .bk-braille .bk-face{background:#7A4E96;color:#fff}
.bookkinds .bk-easy .bk-face{background:#f9dd74;color:#241B12}
/* ===== 단계별 오픈(런치 플래그) UI ===== */
.koma-soon{opacity:.5}
#komaSoon{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);z-index:400;
background:var(--ink,#241B12);color:#fff;padding:12px 22px;border-radius:6px;font-weight:800;font-size:.9rem;
opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;text-align:center}
#komaSoon.show{opacity:1;transform:translateX(-50%) translateY(0)}
.soonbanner{margin:18px 0;padding:24px;border:1.5px dashed var(--orange,#D4642F);border-radius:14px;
text-align:center;font-weight:800;color:var(--ink,#241B12);background:rgba(212,100,47,.06)}
.soonscreen{max-width:1100px;margin:0 auto;padding:160px 28px 90px;min-height:60vh}
.soonscreen .kick2{color:var(--deep,#A8431A)}
/* ===== 당신의 바람: 최신 문장 '새겨짐' + 홈메뉴식 hover 색 ===== */
.wy-featured{font-weight:800;font-size:clamp(1.05rem,2.3vw,1.45rem);line-height:1.5;color:var(--ink);margin:0 0 18px;padding:0 0 16px;border-bottom:2px solid var(--orange);min-height:1.5em}
.wy-featured .wy-by{display:inline-block;margin-left:10px;font-size:.78em;color:var(--orange);font-weight:800}
.wy-featured .wy-ph{color:var(--muted);font-weight:700;font-size:1rem}
.wishes li:not(.wish-you){position:relative;overflow:hidden;transition:color .25s;--dc:#D4642F}
.wishes li:nth-child(2){--dc:#2E7D63}
.wishes li:nth-child(3){--dc:#8A2E4D}
.wishes li:nth-child(4){--dc:#7A4E96}
.wishes li:not(.wish-you)::before{content:"";position:absolute;inset:0;background:var(--dc);transform:translateY(101%);transition:transform .3s var(--ease);z-index:0}
.wishes li:not(.wish-you):hover::before{transform:translateY(0)}
.wishes li:not(.wish-you):hover{color:#fff}
.wishes li:not(.wish-you):hover .wlab,.wishes li:not(.wish-you):hover p{color:#fff !important}
.wishes li>*{position:relative;z-index:1}
/* ===== 책방 flip 모션 부드럽게 ===== */
.bookkinds .bk-inner{transition:transform .72s cubic-bezier(.5,.05,.25,1) !important}
/* ===== 당신의 바람 아카이브: 작은 네모 타일(읽기방식 6색)·접기 ===== */
.wishbox .decllist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.wishbox .decllist .declitem{border:none;border-radius:12px;padding:14px;font-size:.86rem;font-weight:700;line-height:1.4;
aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff}
.wishbox .decllist .declitem:nth-child(6n+1){background:#D4642F}
.wishbox .decllist .declitem:nth-child(6n+2){background:#f9dd74;color:#241B12}
.wishbox .decllist .declitem:nth-child(6n+3){background:#16100B}
.wishbox .decllist .declitem:nth-child(6n+4){background:#8A2E4D}
.wishbox .decllist .declitem:nth-child(6n+5){background:#7A4E96}
.wishbox .decllist .declitem:nth-child(6n+6){background:#2E7D63}
.wishbox .decllist .declitem .declby{display:block;color:inherit;opacity:.85;font-size:.78em;margin-top:8px}
.wishbox.decllist .declitem.board,.wishbox .decllist.board{max-height:none;border:none;padding:0;overflow:visible}
/* ===== 책방 flip 앞면: 내용 중앙 정렬(허공에 뜨는 느낌 완화) ===== */
.bookkinds .bk-front{justify-content:center;align-items:flex-start;gap:10px}
.bookkinds .bk-flip{margin-top:0}
.bookkinds .bk-inner{min-height:160px}
/* ===== 오프라인: 접근성 평면도 + 핫스팟 ===== */
.accessfloor{position:relative;max-width:560px;margin:20px 0 4px;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.accessfloor img{display:block;width:100%;height:auto}
.afsp{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;border:2px solid #fff;
background:var(--orange);color:#fff;font-weight:900;font-size:.82rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
font-family:'IBM Plex Mono',monospace;box-shadow:0 2px 7px rgba(0,0,0,.35);z-index:2}
.afsp:hover,.afsp:focus-visible{background:var(--ink);transform:translate(-50%,-50%) scale(1.18);outline:none}
.aftip{position:absolute;z-index:5;transform:translateX(-50%);max-width:240px;width:max-content;background:var(--ink);color:#fff;
padding:10px 13px;border-radius:8px;font-size:.8rem;font-weight:600;line-height:1.45;pointer-events:none}
.aftip b{display:block;margin-bottom:4px;font-size:.86rem;color:#F2C9B2}
/* ===== 당신의 바람 아카이브: 동그라미 ===== */
.wishbox .decllist .declitem{border-radius:50%;justify-content:center;align-items:center;text-align:center;font-size:.8rem;padding:12px;word-break:keep-all}
.wishbox .decllist .declitem .declby{margin-top:5px;font-size:.72em}
/* ===== 책방 분류: 펼치기 (flip 폐기, 시안 A 채택) ===== */
.bookkinds .bk{all:unset;display:flex;flex-direction:column;cursor:pointer;box-sizing:border-box;border-radius:14px;padding:20px 22px;color:#fff;overflow:hidden;width:100%}
.bookkinds .bk-text{background:#D4642F}
.bookkinds .bk-easy{background:#f9dd74;color:#241B12}
.bookkinds .bk-wordless{background:#16100B}
.bookkinds .bk-braille{background:#7A4E96}
.bookkinds .bk-name{font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:inherit;display:block}
.bookkinds .bk-name::after{content:" ＋";opacity:.7;font-weight:800}
.bookkinds .bk.flipped .bk-name::after{content:" －"}
.bookkinds .bk p{margin:0;color:inherit;font-weight:600;line-height:1.6;font-size:.95rem;
max-height:0;opacity:0;overflow:hidden;transition:max-height .42s var(--ease),opacity .38s var(--ease),margin-top .42s var(--ease)}
.bookkinds .bk.flipped p{max-height:18em;opacity:1;margin-top:12px}
.bookkinds .bk:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* ===== 오시는 길: 실제 지도 + 세 걸음 (사이트 톤 정렬 — 2026-06-19) =====
사이트 코어 토큰(--paper/--ink/--line/--deep/--muted/--wood) 사용 → '또렷하게' 모드 자동 대응.
사이트에 없는 색(와인/노랑)만 .visit에 스코프. JS가 생성하는 .tab/.pace/.p-ad 등 클래스 유지.
타이포는 rem(사이트 스케일), 지도 프레임은 사이트 사진 프레임(우드)과 동일 결. */
.visit{--wine:#8A2E4D; --yellow:#F9DD74; --yellow-dk:#E6C24A;}
.visit .tabs{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.visit .tab{flex:1;min-width:96px;border:1.5px solid rgba(22,16,11,.18);background:var(--paper);border-radius:12px;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-weight:800;font-size:.92rem;color:var(--ink);}
.visit .tab svg{width:26px;height:22px;fill:currentColor;}
.visit .tab.on{background:var(--orange);border-color:var(--orange);color:#fff;}
.visit .mapwrap{margin-top:16px;position:relative;height:440px;border:6px solid var(--wood,#7A5A3A);border-radius:10px;box-shadow:inset 0 0 0 3px #FBF5E8;overflow:hidden;background:#eee;}
.visit #komap{position:absolute;inset:0;}
.visit .eta{position:absolute;left:14px;top:14px;z-index:600;background:#fff;border:1.5px solid rgba(22,16,11,.2);border-radius:12px;padding:9px 14px 8px;box-shadow:0 6px 16px rgba(0,0,0,.14);}
.visit .eta .f{display:block;font-size:.78rem;color:var(--muted);font-weight:700;}
.visit .eta .b{display:block;font-size:1.7rem;font-weight:900;line-height:1;margin-top:2px;}
.visit .eta .b small{font-size:.85rem;}
.visit .eta .note{display:block;font-size:.66rem;color:var(--muted);font-weight:600;margin-top:2px;}
.visit .maploading{position:absolute;inset:0;display:grid;place-items:center;z-index:500;color:var(--muted);font-weight:700;font-size:.9rem;background:#efeae2;}
.visit .pinwrap{position:relative;width:40px;height:50px;}
.visit .pind{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.35);}
.visit .ping{position:absolute;left:50%;top:18px;transform:translate(-50%,-50%);width:21px;height:21px;color:#fff;}
.visit .shoppin{width:54px;height:54px;border-radius:50%;background:#fff;border:4px solid var(--orange);box-shadow:0 5px 14px rgba(0,0,0,.3);display:grid;place-items:center;overflow:hidden;}
.visit .shoppin img{width:40px;height:40px;object-fit:contain;}
.visit .seclab{margin:22px 0 0;font-weight:900;font-size:1.05rem;letter-spacing:-.02em;}
.visit .seclab b{color:var(--deep);} .visit .seclab span{color:var(--muted);font-weight:600;font-size:.85rem;margin-left:6px;}
.visit .paces{display:flex;gap:10px;margin-top:12px;}
.visit .pace{flex:1;background:#fff;border:1.5px solid rgba(22,16,11,.15);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden;}
.visit .pace .tab-l{position:absolute;left:0;top:0;bottom:0;width:7px;}
.visit .pace .ph{display:flex;align-items:center;gap:9px;}
.visit .pace .chip{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;}
.visit .pace .chip svg{width:22px;height:22px;}
.visit .pace .nm{font-size:.95rem;font-weight:800;} .visit .pace .nm.sm{font-size:.82rem;}
.visit .pace .v{font-size:1.6rem;font-weight:900;margin-top:8px;letter-spacing:-.02em;}
.visit .pace .bar{height:8px;border-radius:5px;background:var(--paper);margin-top:10px;overflow:hidden;}
.visit .pace .bar i{display:block;height:100%;border-radius:5px;}
.visit .p-ad{border-color:var(--orange);} .visit .p-ad .tab-l,.visit .p-ad .chip,.visit .p-ad .bar i{background:var(--orange);} .visit .p-ad .v{color:var(--deep);}
.visit .p-ch{border-color:var(--yellow-dk);} .visit .p-ch .tab-l,.visit .p-ch .chip,.visit .p-ch .bar i{background:var(--yellow);} .visit .p-ch .v{color:#8a6a12;} .visit .p-ch .chip{color:#111;}
.visit .p-wh{border-color:var(--wine);} .visit .p-wh .tab-l,.visit .p-wh .chip,.visit .p-wh .bar i{background:var(--wine);} .visit .p-wh .v{color:var(--wine);}
.visit .barrier{margin-top:14px;background:var(--wine);color:#fff;border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.visit .barrier .chip{flex:none;color:#fff;}
.visit .barrier .t{font-size:1rem;font-weight:800;} .visit .barrier .d{font-size:.82rem;color:#e8cdd6;margin-top:2px;}
.visit .vcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
@media(max-width:760px){
.visit .paces{flex-direction:column;} .visit .mapwrap{height:360px;}
.visit .eta .b{font-size:1.5rem;}
}
@media(prefers-reduced-motion:reduce){ .visit .tab{transition:none;} }
/* 앵커 점프 시 고정 GNB에 가리지 않도록 (히어로 점프 버튼용) */
#advisors,#ramp,#tour,#visit{scroll-margin-top:84px;}
/* ===== 책방 둘러보기: 인터랙티브 평면도 (지도 번호 클릭 → 설명 모션, 콤팩트) ===== */
.roomtour{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-top:16px;align-items:start;}
.rt-map{position:relative;border:6px solid var(--wood,#7A5A3A);border-radius:10px;box-shadow:inset 0 0 0 3px #FBF5E8;overflow:hidden;background:#fff;}
.rt-map img{width:100%;display:block;}
/* 평면도에 번호가 인쇄돼 있어 마커는 투명 링(번호가 비쳐 보임), 호버·활성 시 진해짐 */
.rt-spot{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
background:rgba(212,100,47,.12);border:2.5px solid rgba(212,100,47,.7);cursor:pointer;}
.rt-spot:hover,.rt-spot:focus-visible{background:rgba(212,100,47,.35);border-color:var(--orange);outline:none;}
.rt-spot[aria-pressed="true"]{background:rgba(212,100,47,.45);border-color:var(--orange);transform:translate(-50%,-50%) scale(1.15);z-index:5;}
.roomtour.rt-ready .rt-spot{opacity:0;}
.roomtour.rt-ready.in .rt-spot{animation:rtPop .42s cubic-bezier(.2,.7,.3,1) forwards;}
.roomtour.rt-ready.in .rt-spot:nth-child(3){animation-delay:.07s}
.roomtour.rt-ready.in .rt-spot:nth-child(4){animation-delay:.14s}
.roomtour.rt-ready.in .rt-spot:nth-child(5){animation-delay:.21s}
.roomtour.rt-ready.in .rt-spot:nth-child(6){animation-delay:.28s}
.roomtour.rt-ready.in .rt-spot:nth-child(7){animation-delay:.35s}
.roomtour.rt-ready.in .rt-spot:nth-child(8){animation-delay:.42s}
.roomtour.rt-ready.in .rt-spot:nth-child(9){animation-delay:.49s}
@keyframes rtPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.rt-panel{background:#fff;border:1.5px solid rgba(22,16,11,.15);border-radius:14px;padding:20px 22px;min-height:170px;}
.rt-panel .rt-no{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:8px;background:var(--ink);color:#fff;font-weight:900;font-size:.85rem;}
.rt-panel h3{margin:12px 0 6px;font-size:1.15rem;font-weight:900;letter-spacing:-.02em;}
.rt-panel p{margin:0;font-weight:600;line-height:1.65;font-size:.92rem;}
.rt-panel .rt-hint{color:var(--muted);font-weight:700;}
.rt-panel .udi-act{color:var(--deep);font-weight:800;}
.rt-panel.rt-in{animation:rtIn .34s ease;}
@keyframes rtIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.rt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.rt-chip{min-width:34px;height:34px;padding:0 9px;border-radius:8px;border:1.5px solid rgba(22,16,11,.25);background:var(--paper);font-weight:900;font-size:.82rem;color:var(--ink);cursor:pointer;}
.rt-chip:hover,.rt-chip:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink);}
.rt-chip[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange);}
@media(max-width:760px){ .roomtour{grid-template-columns:1fr;} .rt-panel{min-height:0;} }
@media(prefers-reduced-motion:reduce){
.roomtour.rt-ready .rt-spot{opacity:1;}
.roomtour.rt-ready.in .rt-spot{animation:none;}
.rt-panel.rt-in{animation:none;}
}
/* ===== v7 (2026-07-04): GNB '책방' 드롭다운 — 직각·괘선·모노 (반클로드 원칙) ===== */
.navdrop{position:relative;display:inline-block}
.gnb2 nav .navdrop-btn .nd-ar{display:inline-block;margin-left:6px;font-size:.72em}
.navdrop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:176px;background:var(--cream);
border:1.5px solid var(--ink);border-radius:2px;padding:5px;z-index:140;
display:flex;flex-direction:column;gap:4px;box-shadow:3px 3px 0 var(--ink)}
.navdrop-menu[hidden]{display:none}
.gnb2 nav .navdrop-menu a{display:block;text-align:left;border:none;border-radius:2px}
.gnb2 nav .navdrop-menu a[aria-current="page"]{background:var(--ink);color:var(--cream)}
html[data-mode="clear"] .navdrop-menu{background:#fff;border:2px solid #000;box-shadow:none}
html[data-mode="clear"] .gnb2 nav .navdrop-menu a{border:none}
@media(max-width:767px){ .gnb2 .navdrop{display:none} }
/* v7: 대관 페이지·우리는 앵커 점프 시 GNB 가림 방지 */
#space,#use,#apply,#visitshop,#decl,#keepers{scroll-margin-top:84px;}
/* ===== v7 (2026-07-04): 온라인 책장 분류 개편 — 지식 그림책(초록)·인권·다양성 주제(와인) ===== */
.bookkinds .bk-know{background:#2E7D63}
.bookkinds .bk-rights{background:#8A2E4D}
/* 연령 칩 줄 — 분류 칩 아래 한 줄 띄워 배치 */
#achips{margin-top:8px}
/* ===== v7-R1 (2026-07-04 리뷰 핀1): 분류 = 전폭 가로 5줄, 설명 상시 노출 ===== */
.bookkinds{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.bookkinds .bk{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:20px;width:100%;
border-radius:2px;padding:16px 20px;color:#fff;cursor:default}
.bookkinds .bk-text{background:#D4642F}
.bookkinds .bk-wordless{background:#16100B}
.bookkinds .bk-know{background:#2E7D63}
.bookkinds .bk-braille{background:#7A4E96}
.bookkinds .bk-rights{background:#8A2E4D}
.bookkinds .bk-name{flex:none;min-width:9em;font-weight:900;font-size:1.15rem;letter-spacing:-.02em;color:inherit}
.bookkinds .bk-name::after{content:""}
.bookkinds .bk p{max-height:none;opacity:1;margin:0;flex:1;font-weight:600;line-height:1.6;font-size:.92rem;color:inherit;overflow:visible}
@media(max-width:640px){
.bookkinds .bk{flex-direction:column;gap:6px}
.bookkinds .bk-name{min-width:0}
}
/* ===== v7-R3 (2026-07-04 2R shop 핀1): 분류 설명 = 토글 — 기본 숨김, 누르면 펼침 ===== */
.bookkinds .bk{cursor:pointer}
.bookkinds .bk:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bookkinds .bk-name::after{content:" ＋";font-weight:800;opacity:.75}
.bookkinds .bk.flipped .bk-name::after{content:" －"}
.bookkinds .bk p{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .35s var(--ease)}
.bookkinds .bk.flipped p{max-height:16em;opacity:1}
/* 5R: 분류 소개 섹션 = 시안 A(삭제) 확정 — 스위처 CSS 제거됨. bookkinds 잔여 규칙은 미사용(마크업 삭제) */
/* ===== v7-R7 (7R 2026-07-06): 모바일 타이포 전면 축소 — PC 글자를 그대로 가져오지 않는다 ===== */
@media(max-width:767px){
.h-display{font-size:clamp(1.55rem,7vw,2rem)!important;line-height:1.18}
.kick2{font-size:.7rem}
.tlhead .sub2{font-size:.88rem;line-height:1.6}
.tlhead .phase2{font-size:.7rem;padding:7px 12px}
.sechead h2{font-size:1.2rem}
.sechead .sno{font-size:.8rem}
.secnote{font-size:.85rem}
.prose p{font-size:.9rem;line-height:1.65}
.drawer .ttl{font-size:1.5rem}
.drawer .no{font-size:.8rem}
.drawer .pict{font-size:.72rem}
.foot2 .wordmark{font-size:1.5rem}
.foot2 .finfo{font-size:.7rem;line-height:1.7}
.fchip{font-size:.72rem;padding:7px 12px}
.visitinfo .vrow dd{font-size:.85rem}
.visitinfo .vrow dd b{font-size:.92rem}
.wishes .wlab{font-size:1.2rem}
.usecard .ut{font-size:1rem}
.usecard p{font-size:.85rem}
.howbox{font-size:.82rem}
.btn2,.btn2.line{font-size:.74rem;padding:11px 16px}
.modecard .md2{font-size:.68rem}
}
/* ===== v7-R6 (6R 2026-07-06): 모바일 UI/UX 전면 보정 ===== */
@media(max-width:767px){
/* 공통: 히어로 소개문의 강제 줄바꿈 해제 — 좁은 화면에서 들쭉날쭉한 정렬 방지 */
.tlhead .sub2 br{display:none}
.tlhead .phases2{gap:8px}
.tlhead .phase2{flex:1 1 auto;text-align:center}
/* shop 핀4: 필터 칩 = 가로 스크롤 한 줄 (분류/연령 각 한 줄) */
#fchips,#achips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;
padding-bottom:6px;margin-bottom:10px;scrollbar-width:none}
#fchips::-webkit-scrollbar,#achips::-webkit-scrollbar{display:none}
#fchips .fchip,#achips .fchip{flex:none;white-space:nowrap}
/* shop 핀5: 책 그리드 = 가로 3권 (yes24식) */
.bgrid{grid-template-columns:repeat(3,1fr);gap:10px}
.bcard .phow{display:none}
.bcv{padding:10px}
.bcv .bt2{font-size:.72rem;line-height:1.25}
.bcard .bm .ba2,.bcard .bm .pr{font-size:.6rem}
/* about 핀7: 자문위원 그리드 정돈 */
.advgrid{grid-template-columns:repeat(3,1fr);gap:8px}
.adv{padding:10px 6px}
.adv .nm2{font-size:.8rem}
.adv .st2{display:none}
/* about 핀9: 이미지·영상 높이 제한 */
#ramp .ph2,#ramp video{max-height:300px}
#ramp .ph2 img{max-height:300px;object-fit:cover}
#keepers figure img{max-height:340px;object-fit:cover;object-position:top}
/* about 핀10: 긴 텍스트 가독성 — 모바일은 글자를 줄여 호흡 짧게 */
.wishes p{font-size:.88rem;line-height:1.65}
.wishes .wlab{font-size:1.35rem}
.names li{font-size:.72rem;padding:6px 12px}
/* rental: 표(dt/dd)를 세로 스택으로 — 좁은 화면 정렬 */
.visitinfo .vrow{grid-template-columns:1fr;gap:4px;padding:12px 0}
.visitinfo .vrow dt{font-size:.72rem;letter-spacing:.04em}
.usegrid{grid-template-columns:1fr}
.ps-cap{font-size:.74rem}
.calgrid .day{padding:7px 0;font-size:.78rem}
.slot{padding:8px 10px;font-size:.74rem}
}
/* ===== 27R-2 (rental): 다녀간 이야기 = 색 메모지 카드 =====
원형은 긴 글에서 밖으로 넘쳐서 교체. 카드는 긴 글이면 높이만 늘어나고 절대 넘치지 않음.
가로 그리드 유지 · 3줄(약 18개) 넘으면 '더 보기' → 스크롤 게시판으로 전환 */
#reviews .storywall{list-style:none;margin:18px 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-items:start}
#reviews .storywall .declitem{border-radius:2px;padding:16px 14px;font-size:.82rem;font-weight:700;
line-height:1.5;color:#fff;word-break:keep-all;overflow-wrap:anywhere;
box-shadow:3px 3px 0 rgba(22,16,11,.25)}
#reviews .storywall .declitem:nth-child(6n+1){background:#D4642F}
#reviews .storywall .declitem:nth-child(6n+2){background:#f9dd74;color:#241B12}
#reviews .storywall .declitem:nth-child(6n+3){background:#16100B}
#reviews .storywall .declitem:nth-child(6n+4){background:#8A2E4D}
#reviews .storywall .declitem:nth-child(6n+5){background:#7A4E96}
#reviews .storywall .declitem:nth-child(6n+6){background:#2E7D63}
#reviews .storywall .declitem .declby{display:block;color:inherit;opacity:.85;font-size:.72em;margin-top:5px}
#reviews .storywall.board{max-height:360px;overflow-y:auto;border:1.5px solid var(--ink);border-radius:3px;padding:12px}
/* ===== v7-R5 (5R about 핀1·2): 당신의 바람 — 꽃 그림 장식 (레고 캠페인의 꽃) ===== */
.wy-featured{position:relative;padding-left:46px}
.wy-featured::before{content:"";position:absolute;left:0;top:0;width:36px;height:36px;
background:url("../assets/flower.png") center/contain no-repeat}
.wishbox .decllist .declitem{position:relative;overflow:visible}
.wishbox .decllist .declitem::before{content:"";position:absolute;right:-4px;top:-8px;width:30px;height:30px;
background:url("../assets/flower.png") center/contain no-repeat;filter:drop-shadow(0 1px 0 rgba(36,27,18,.2))}
/* ===== v7-R2 (2026-07-04 홈 핀1): 푸터 줄을 홈 서랍 제목선에 정렬 =====
서랍 = .cabinet 28px + .drawer 좌패딩 30px + 보더 1.5px + 번호 배지(좌우 12px 패딩).
푸터 = .foot2 28px + 맨 글자 번호 → 배지 패딩·서랍 안쪽 여백만큼 왼쪽으로 어긋나던 것 보정. */
body.koma-home .foot2 .frow{padding-left:31.5px}
body.koma-home .foot2 .frow .no{padding:2px 12px}
/* ===== 27R: 상단 메뉴·하단 푸터 = 브랜드 주황 시안 =====
명암비 검증: 먹 #16100B ÷ 주황 #D4642F = 5.1:1 (AA 통과) → 작은 글씨는 전부 먹.
흰 글씨는 3.7:1로 본문 크기 기준 미달이라 쓰지 않음.
로고가 주황+먹 2도색이라 주황 바닥에 묻지 않도록 크림 명판 위에 올림. */
/* 27R(7/25 핀1): 상단 메뉴 = 본문과 같은 종이색 (주황 철회) */
.gnb2{background:var(--paper,#F3EBDC);border-bottom:1.5px solid var(--ink)}
/* 로고는 원본 그대로 사용 (색반전·명판 없음) */
/* 푸터 = 검정(잉크 #16100B) — 글씨는 크림 #F3EBDC (명암비 15:1 이상) */
.foot2{background:var(--ink,#16100B);border-top:1.5px solid var(--ink)}
.foot2 .finfo,.foot2 .finfo a,.foot2 .wordmark{color:var(--cream,#F3EBDC)}
.foot2 .no{-webkit-text-stroke:1.5px var(--cream,#F3EBDC)}
/* 또렷하게(고대비) 모드는 흑백 유지 — 주황·검정 커스텀 미적용 */
html[data-mode="clear"] .gnb2{background:#fff;border-bottom:2px solid #000}
html[data-mode="clear"] .foot2{background:#fff;border-top:2px solid #000}
html[data-mode="clear"] .foot2 .finfo,html[data-mode="clear"] .foot2 .finfo a,html[data-mode="clear"] .foot2 .wordmark{color:#000}
html[data-mode="clear"] .foot2 .no{-webkit-text-stroke:1.5px #000}
/* 27R(7/25 핀3): 검정 푸터에서 워드마크 호버 시 나오는 손글씨 BI가 안 보이던 문제 — 크림 받침 */
.foot2 .wordmark .wm-img{background:var(--cream,#F3EBDC);padding:5px 12px;border-radius:2px}
/* ===== 홈 메뉴 서랍마다 키비주얼 어린이 일러스트 =====
[31R · 2026-07-29] kv.png(6000×7500) 한 장을 CSS로 잘라 쓰던 스프라이트 방식 폐기.
· 4,500만 화소 이미지는 브라우저가 배경 디코딩을 포기해 "아무것도 안 보이는" 사고가 남
· 방문 1회당 800KB를 쓰던 것을 4장 합계 23KB로 축소 (약 97% 절감)
→ 아이별로 잘라낸 개별 PNG로 교체. 좁은 화면에서도 숨기지 않고 작게 보여준다.
01 책방=책 이고 걷는 아이 · 02 오프라인=휠체어에서 책 읽는 아이 · 03 축제=가방 멘 아이 · 04 우리는=나란한 두 아이 */
.drawer .kid{flex:none;align-self:center;margin-left:auto;pointer-events:none;
background-repeat:no-repeat;background-position:center bottom;background-size:contain;height:110px;
transition:filter .25s var(--ease)}
/* ⚠ align-self:center 삭제 금지 — 빼면 빈 span의 베이스라인이 박스 하단에 합성돼
그림 위쪽 약 46px이 .drawer{overflow:hidden}에 잘려 나간다 (검증팀 3번 지적) */
.drawer .kid+.peek{margin-left:18px}
/* [31R-2] 폭은 원본 그림의 실제 비율에서 계산한 값 — 임의로 바꾸면 여백이 생기거나 찌그러진다 */
.drawer .kid1{width:91px;background-image:url("../assets/kid1.png")} /* 905:1097 */
.drawer .kid2{width:101px;background-image:url("../assets/kid2.png")} /* 870:948 */
.drawer .kid3{width:79px;background-image:url("../assets/kid3.png")} /* 822:1145 */
/* ⚠ 이 아래에 .drawer .kid{height:…}를 추가하지 말 것 — kid4의 130px가 조용히 덮인다 */
.drawer .kid4{width:100px;height:130px;background-image:url("../assets/kid4.png")} /* 1478:1930 */
/* 어두운 바닥에서 검정 윤곽선이 묻히는 것 방지 (검증팀 1·4번 실측: 화소 40~46% 소실)
04 서랍(--dc:#16100B) 호버 · 또렷하게 모드 호버 시 크림색 테두리로 형태를 복원한다.
특히 휠체어 탄 어린이(kid2·kid4)가 사라지지 않게 하는 것이 핵심 */
.drawer.dk:hover .kid,.drawer.dk:focus-visible .kid{
filter:drop-shadow(0 0 1.5px #FBF5E8) drop-shadow(0 0 3px rgba(251,245,232,.95))}
html[data-mode="clear"] .drawer:hover .kid,
html[data-mode="clear"] .drawer:focus-visible .kid{
filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 6px #fff)}
/* 좁은 화면: 숨기던 것을 축소 노출로 변경.
축소 기준을 제목(.ttl)과 같은 767px로 맞춘다 — 640px로 두면 641~767px 구간에서
제목 27px 옆에 일러스트만 110px로 남아 장식이 링크 라벨보다 커진다 (검증팀 1·4번) */
@media(max-width:767px){
.drawer .kid{height:62px}
.drawer .kid1{width:51px}
.drawer .kid2{width:57px}
.drawer .kid3{width:45px}
.drawer .kid4{width:56px;height:73px}
}
/* 초소형 화면(360~430px): 일러스트를 한 단계 더 줄여 '오프라인 책방' 제목이
두 줄로 꺾이지 않게 한다 (검증팀 3번 계산: 임계 393px) */
@media(max-width:430px){
.drawer .kid{height:46px}
.drawer .kid1{width:38px}
.drawer .kid2{width:42px}
.drawer .kid3{width:33px}
.drawer .kid4{width:41px;height:54px}
}
/* 한국어 어절 보호 — 없으면 "오프라인 책 / 방"처럼 음절 중간에서 끊긴다 */
.drawer .ttl{word-break:keep-all;overflow-wrap:normal}
/* ===== 28R (7/25 3차) ===== */
/* 홈 히어로: 소개문 축소 후 배경이 과하게 길어짐 — 데스크톱 높이 축소 */
@media(min-width:768px){ .hero2{min-height:70svh} }
/* 온라인 책장: 가격이 흰 칩 위 흰 글자라 보이지 않던 버그 수정 (v3.css 750행 덮어쓰기) */
.bm.pbar .pr{color:var(--ink,#16100B)}
/* 책 서랍: 꼬마 큐레이터 손글씨 추천사 레이아웃 */
.recwrap{border:1.5px solid var(--ink);border-radius:2px;background:rgba(255,255,255,.5);padding:16px 18px;margin-top:10px}
.recwrap .rq{font-weight:800;margin:0 0 4px;line-height:1.6}
.recwrap .rby{font-size:.8rem;font-weight:700;color:var(--muted);margin:0 0 12px}
.recwrap img{width:100%;border-radius:2px;border:1px solid rgba(22,16,11,.12);display:block}
/* about: 책방지기 사진 슬라이더 (28R 4차: 프레임 고정 + 사진별 확대 크롭 지원) */
.kslide{position:relative;max-width:560px}
.kslide .ksframe{overflow:hidden;border:8px solid #8A5A36;box-shadow:inset 0 0 0 3px #FBF5E8;border-radius:2px}
.kslide img{width:100%;display:block;transform-origin:center}
.kslide .ksbar{display:flex;align-items:center;gap:10px;margin-top:8px}
.kslide .ksbtn{border:1.5px solid var(--ink);background:var(--cream,#F3EBDC);font:inherit;font-weight:900;width:44px;height:44px;border-radius:2px;cursor:pointer}
.kslide .ksbtn:hover{background:var(--ink);color:var(--cream,#F3EBDC)}
.kslide .ksno{font-family:'IBM Plex Mono','Pretendard',monospace;font-size:.75rem;font-weight:700;color:var(--muted)}
/* rental: 북스테이 영상 (세로 9:16) */
.movevid2{display:flex;justify-content:center;margin-top:18px}
.movevid2 video{width:100%;max-width:420px;aspect-ratio:9/16;border:1.5px solid var(--ink);border-radius:2px;background:#16100B;display:block}
/* award: 수상작 표지 — 주황 바탕 검정 물음표 */
.bookph.qmark{display:flex;align-items:center;justify-content:center;background:#D4642F;color:#16100B;font-weight:900;font-size:clamp(3rem,8vw,5rem)}
/* [v12] 수상작 자리 — 물음표 대신 별을 품은 그림책 (포스터 모티프에서 누끼)
[v12-3] 너무 크던 것을 62%로 줄이고, 잘려 있던 손 부분을 정리한 이미지로 교체 */
.bookph.qmark img{width:62%;max-height:62%;height:auto;object-fit:contain;display:block}
/* award: 06 KOMA 그림책 축제 — 포스터 자리 + 홍제유연 이미지 */
.festgrid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:18px;margin-top:18px}
@media(max-width:767px){.festgrid{grid-template-columns:1fr}}
.posterph{aspect-ratio:3/4;border:1.5px dashed var(--ink);border-radius:2px;background:rgba(255,255,255,.5);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-weight:800;color:var(--muted)}
.fpics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fpics figure{margin:0}
.fpics img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;border:1px solid rgba(22,16,11,.15);display:block}
.fpics figcaption{font-size:.78rem;font-weight:700;margin-top:6px}
/* 서랍 본문: 62ch 폭 제한 해제 — 모바일 한정 (28R 7차: 데스크톱 서랍은 62ch 유지 — 한 줄 98자 가독 붕괴 방지) */
@media(max-width:767px){ .ov .prose p{max-width:none} }
/* ===== 28R 5차: contest / festival 페이지 분리 ===== */
/* festival: 큰 포스터 자리 (포스터 이미지가 오면 ![]()
로 교체) */
.posterbig{aspect-ratio:3/4;width:100%;max-width:620px;border:1.5px dashed var(--ink);border-radius:2px;background:rgba(255,255,255,.5);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:800;color:var(--muted);margin:18px auto 0;overflow:hidden}
.posterbig b{font-size:1.25rem;color:var(--ink)}
/* 29R: 실제 포스터 이미지 (원본 비율 유지 — A4 세로) */
.posterimg{width:100%;max-width:620px;margin:20px auto 0;display:block;border:1.5px solid var(--ink);border-radius:2px}
/* 30R 핀2: 공모 콜투액션 버튼 — 기본(.92rem·15/28px)의 약 2배 면적. 알약 형태·브랜드 톤 유지 */
#submit .btn2{font-size:1.25rem;padding:24px 48px;gap:12px}
#submit .btn2.line{box-shadow:inset 0 0 0 3px var(--ink)}
/* [v12-2] 모바일에서는 2배 크기가 과했음 — 터치 타깃(44px)은 넉넉히 지키면서 축소 */
@media(max-width:767px){
#submit{padding-left:20px;padding-right:20px}
#submit .btn2{font-size:.95rem;padding:15px 26px;gap:8px}
#submit .btn2.line{box-shadow:inset 0 0 0 2px var(--ink)}
#submit > div{gap:8px !important}
}
@media(max-width:430px){
#submit .btn2{width:100%;justify-content:center;font-size:.92rem;padding:14px 18px}
}
.posterbig img{width:100%;height:100%;object-fit:cover;display:block}
/* festival: 현장 사진 그리드 */
.fpics.festwide{margin-top:18px}
@media(min-width:900px){.fpics.festwide{grid-template-columns:repeat(2,1fr);gap:16px}}
/* contest: 축제로 건너가는 배너 카드 */
.crossbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
border:1.5px solid var(--ink);border-radius:2px;padding:22px 24px;margin:34px auto 0;
width:min(1100px,calc(100% - 40px));box-sizing:border-box;background:var(--cream,#F3EBDC)}
.crossbanner p{margin:0;font-weight:800}
/* ===== 28R 6차: 또렷하게(clear) — 인라인 색 컴포넌트 고대비 오버라이드 (검증팀 발견) ===== */
html[data-mode="clear"] .ov .bigchip,
html[data-mode="clear"] .ov .chip{background:#000 !important;color:#fff !important}
html[data-mode="clear"] .bookph.qmark{background:#fff;color:#000;border:2px solid #000}
html[data-mode="clear"] .usecard .ut{color:#000 !important}
html[data-mode="clear"] .kslide .ksframe{border-color:#000}
/* ===== 28R 7차: 반응형 검증팀(6인+PM) 확정 수정 ===== */
/* 모바일 하단 색 점(28px)·접기 요약 — 터치 히트 영역 확장 (시각 크기 유지) */
.modedock .mdot::before{content:"";position:absolute;inset:-9px;border-radius:50%}
/* 모바일: 하단 탭바+독이 푸터·폼을 가리지 않게 여백 확대 (기존 60px → 탭 60 + 독 44 + 여유) */
@media(max-width:767px){
body{padding-bottom:132px}
/* 홈 히어로 소개문 — 강제 줄바꿈 해제·크기 축소 (tlhead와 동일 처리, 고아 줄 방지) */
.hero2 .sub2 br{display:none}
.hero2 .sub2{font-size:.92rem;line-height:1.7}
/* 책 카드 색 띠 — 좁은 카드에서 라벨·가격 세로 스택 */
.bm.pbar{flex-direction:column;align-items:flex-start;gap:2px}
}
/* 태블릿: 자문위원 카드 5열 급축소 완화 (768~1023px = 4열) */
@media(min-width:721px) and (max-width:1023px){ .advgrid{grid-template-columns:repeat(4,1fr)} }
/* 태블릿: 서랍 미리보기 문구(nowrap)가 제목을 밀치는 문제 — 숨김
[31R] 1024px → 1120px 상향. 서랍에 일러스트(최대 103px + 간격 49px)가 들어오면서
1025~1095px 구간에서 '오프라인 책방' 제목이 약 17px 밀려 꺾였다 (검증팀 1번 계산) */
@media(max-width:1120px){ .drawer .peek{display:none} }
/* ===== v12 (2026-07-29): 단계별 오픈 — '8월 중순 공개' 예고 =====
통신판매업 신고 전이라 온라인 책장·오프라인 책방을 닫아 둔 상태.
링크를 지우지 않고 예고로 남겨, 홈의 네 서랍 구조와 기다림의 설렘을 함께 지킨다. */
.soonchip{flex:none;align-self:center;
font-family:'IBM Plex Mono','Pretendard',monospace;font-size:.72rem;font-weight:800;
white-space:nowrap;border:1.5px solid var(--ink);border-radius:2px;padding:5px 10px;
background:var(--cream,#F3EBDC);color:var(--ink)}
/* 서랍은 통째로 흐려지면 일러스트까지 죽는다 — 제목·그림만 눌러 두고 예고 칩은 또렷하게 */
a.drawer.koma-soon{opacity:1;cursor:default}
a.drawer.koma-soon .ttl{opacity:.5}
a.drawer.koma-soon .kid{opacity:.45;filter:grayscale(.65)}
a.drawer.koma-soon .peek{color:var(--deep,#A8431A)}
/* 닫힌 서랍은 호버 색채움을 하지 않는다 (누를 수 없는 곳을 누를 수 있는 것처럼 보이지 않게) */
a.drawer.koma-soon:hover::before,a.drawer.koma-soon:focus-visible::before{transform:translateY(101%)}
a.drawer.koma-soon:hover,a.drawer.koma-soon:focus-visible{color:var(--ink)}
a.drawer.koma-soon:hover .no,a.drawer.koma-soon:focus-visible .no{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
@media(max-width:640px){ .soonchip{font-size:.64rem;padding:4px 8px} }
/* 또렷하게(고대비) 모드 */
html[data-mode="clear"] .soonchip{background:#fff;border:2px solid #000;color:#000}
html[data-mode="clear"] a.drawer.koma-soon .ttl{opacity:.62}
/* 안내 화면 — 브랜드 주황 강조 */
.soonscreen .h-display .or{color:var(--orange,#D4642F)}
.soonscreen .phases2{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.soonscreen .phase2{border:1.5px solid var(--ink);border-radius:2px;padding:10px 18px;
font-weight:700;font-size:.82rem;font-family:'IBM Plex Mono','Pretendard',monospace;text-decoration:none;color:var(--ink)}
.soonscreen a.phase2:hover,.soonscreen a.phase2:focus-visible{background:var(--ink);color:var(--cream,#F3EBDC)}
/* ===== v12 (2026-07-29): 모바일 — 강제 줄바꿈(
) 해제 =====
PC에서는
이 의도한 리듬을 만들지만, 좁은 화면에서는 그 줄이 다시 접히면서
"…같은 책 / 을" 처럼 한 음절만 남는 고아 줄이 생긴다.
→ 767px 이하에서는 본문·제목의
을 없애 자연스럽게 흐르게 한다.
⚠ 줄 나눔이 뜻을 가지는 곳(주소·연락처·표 항목명·약관·명단)은 그대로 둔다. */
@media(max-width:767px){
/* 제목 */
.h-display br,
.ov h2 br,
.sechead h2 br,
.drawer .ttl br,
h2[data-easy] br{display:none}
/* 본문 */
.prose p br,
.prose > br,
p.prose br,
.sub2 br,
.secnote br,
.tsum br,
.note br,
.bp-cap br,
.fact span br,
.usecard p br,
.wishes p br,
.soonbanner br{display:none}
/* 한 음절만 떨어지는 것 방지 — 어절 단위로만 접기 */
.h-display,.ov h2,.sechead h2,.prose p,.sub2,.secnote,.tsum,.fact span,.bp-cap{
word-break:keep-all;overflow-wrap:break-word}
}
/* 줄 나눔이 뜻을 가지는 문단은 .keepbr 을 붙여 예외 처리 (주소·영업시간 등) */
@media(max-width:767px){ .keepbr br{display:revert} }
/* ===== v12-2: '당신의 바람' 전송 결과 안내 ===== */
.wishmsg{margin:10px 0 0;font-weight:800;font-size:.85rem;min-height:1.2em;line-height:1.5}
.wishmsg.wait{color:var(--muted)}
.wishmsg.ok{color:#2E7D63}
.wishmsg.fail{color:#8A2E4D}
html[data-mode="clear"] .wishmsg{color:#000}
/* ===== v12-2: 모바일 체크박스 터치 크기 ===== */
/* 기본 체크박스가 13px로 작아 어린이·보호자가 누르기 어려웠음.
시각 크기를 키우고, 라벨까지 눌러도 체크되도록 히트 영역을 넓힌다. */
.chkrow input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--orange,#D4642F);cursor:pointer}
.chkrow label{cursor:pointer}
@media(max-width:767px){
.chkrow{gap:12px;margin:6px 0 16px;font-size:.86rem;align-items:flex-start}
.chkrow input[type="checkbox"]{width:26px;height:26px;margin-top:1px}
/* 터치 권장 44px 확보 — 시각 크기는 26px, 실제 누를 수 있는 범위는 44px */
.chkrow{position:relative}
.chkrow input[type="checkbox"]::before{content:"";position:absolute;inset:-9px}
.privfold > summary{padding:12px 14px;font-size:.86rem}
}
html[data-mode="clear"] .chkrow input[type="checkbox"]{accent-color:#000;outline:2px solid #000;outline-offset:1px}
/* ===== v12-4 (2026-07-30): 공모전 자주 묻는 질문 — 괘선 아코디언 =====
반클로드 원칙: 직각(2px) · 1.5px 실선 괘선 · 하드 오프셋 · 그라데이션·블러 없음.
기계식 토글처럼 즉시 열리고, 표시는 ＋/－ 네모 하나로만 말한다.
를 써서 JS 없이 동작하고 키보드·스크린리더에서 그대로 읽힌다. */
/* [v12-4 수정] 답변만 64ch로 좁혀 오른쪽이 텅 비어 보였음.
→ 목록 전체를 읽기 좋은 한 단(740px)으로 묶어, 질문 줄의 ＋ 표시와
답변의 오른쪽 끝이 같은 선에서 끝나게 한다. */
.faqlist{border-top:1.5px solid var(--ink);margin-top:20px;max-width:740px}
.faq{border-bottom:1.5px solid var(--ink)}
.faq > summary{
display:flex;gap:clamp(12px,2.4vw,20px);align-items:flex-start;cursor:pointer;
list-style:none;padding:18px 6px;font-weight:800;
transition:background .15s var(--ease)}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::marker{content:""}
.faq .fno{flex:none;font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.74rem;font-weight:700;color:var(--deep);padding-top:5px;letter-spacing:.02em}
.faq .fq{flex:1;font-size:clamp(.98rem,2.2vw,1.14rem);letter-spacing:-.02em;
line-height:1.5;word-break:keep-all;overflow-wrap:normal}
/* ＋ / － 표시 — 네모 안의 선 두 개 */
.faq .fmk{flex:none;position:relative;width:24px;height:24px;margin-top:2px;
border:1.5px solid var(--ink);border-radius:2px}
.faq .fmk::before,.faq .fmk::after{content:"";position:absolute;background:var(--ink);
left:50%;top:50%;transform:translate(-50%,-50%)}
.faq .fmk::before{width:11px;height:1.5px}
.faq .fmk::after{width:1.5px;height:11px;transition:opacity .18s var(--ease)}
.faq[open] .fmk::after{opacity:0}
.faq > summary:hover,.faq > summary:focus-visible{background:var(--cream)}
.faq > summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.faq[open] > summary{background:var(--cream)}
.faq[open] .fq{color:var(--deep)}
/* 답변 */
.faq .fa{padding:2px 6px 24px calc(clamp(12px,2.4vw,20px) + 26px)}
.faq .fa p{margin:0 0 12px;font-weight:600;line-height:1.78;color:var(--ink)}
.faq .fa p:last-child{margin-bottom:0}
.faq .fa ul{list-style:none;margin:8px 0 14px;padding:0}
.faq .fa li{position:relative;padding-left:15px;font-weight:600;line-height:1.7;margin-bottom:6px}
.faq .fa li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--deep)}
.faq .fa b{font-weight:800;color:var(--deep)}
.faq .fa .fkey{display:inline-block;font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.8rem;font-weight:700;border:1.5px solid var(--ink);border-radius:2px;
padding:2px 8px;margin-right:6px;background:var(--paper)}
@media(max-width:640px){
.faq > summary{padding:16px 2px;gap:10px}
.faq .fa{padding-left:2px;padding-bottom:20px}
.faq .fa p,.faq .fa li{font-size:.92rem}
.faq .fmk{width:22px;height:22px}
}
/* 또렷하게(고대비) */
html[data-mode="clear"] .faqlist,html[data-mode="clear"] .faq{border-color:#000;border-width:2px}
html[data-mode="clear"] .faq .fmk{border:2px solid #000}
html[data-mode="clear"] .faq[open] > summary{background:#fff;text-decoration:underline}
html[data-mode="clear"] .faq[open] .fq{color:#000}
/* 그림 위주 모드: 질문만 남기고 답은 접힌 상태 유지 (긴 글 접기 원칙) */
html[data-mode="visual"] .faq[open] .fa{display:block}
/* v12-4 마무리: FAQ 정렬·모바일 안전장치 */
#faq .secnote{max-width:740px}
#faq{scroll-margin-top:84px}
/* 이메일·주소처럼 끊을 곳이 없는 긴 문자열이 화면을 밀지 않게 */
.faq .fa p,.faq .fa li{overflow-wrap:anywhere;word-break:keep-all}
.faq .fa .fkey{white-space:nowrap}
/* ============================================================
v12-5 (2026-07-30): 심사위원 페이지(judges.html)
------------------------------------------------------------
브랜드 원칙: 직각(border-radius:2px) · 1.5px 실선 괘선 · 하드 오프셋(3px 3px 0)
블러·그라데이션·글래스 없음 · 숫자와 라벨은 IBM Plex Mono
여섯 읽기방식 색(#D4642F/#f9dd74/#16100B/#8A2E4D/#7A4E96/#2E7D63)은
'읽는 방식'을 뜻하는 색이라 이 페이지에서 장식으로 쓰지 않는다.
본문 폭은 .faqlist(740px)와 같은 계열로 잡아 한 줄 40~45자를 유지한다.
============================================================ */
/* ---- 01 심사위원 6명 : 괘선 목록 ----------------------------
격자(카드) 대신 괘선 목록을 택한 이유
· 6명은 '초등 교사 2 · 작가 2 · 어린이 2'로 짝이 정해진 명단이다.
명단은 줄로 읽는 것이 빠르고, 어린이 두 자리가 비어 있다는 사실도
같은 줄 위에서 바로 비교된다. (.wishes / .visitinfo 와 같은 결)
· 카드 격자는 6개가 2×3으로 갈라져 '빈 자리' 두 칸이 오히려 흠처럼 보인다. */
.jpanel{list-style:none;margin:20px 0 0;padding:0;max-width:880px;
border-top:1.5px solid var(--ink)}
.jp{display:grid;grid-template-columns:clamp(96px,10vw,116px) 1fr;
column-gap:clamp(14px,2.2vw,24px);row-gap:3px;
padding:18px 6px;border-bottom:1.5px solid var(--ink)}
/* 마크업 순서에 의존하지 않게 — 역할 라벨만 1열, 나머지는 모두 2열 */
.jp > *{grid-column:2;min-width:0}
.jp-role{grid-column:1;grid-row:1;align-self:start;justify-self:start;
font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.7rem;font-weight:700;letter-spacing:.02em;line-height:1.35;
color:var(--ink);background:var(--cream,#FBF5E8);
border:1.5px solid var(--ink);border-radius:2px;padding:4px 9px;margin-top:4px;
word-break:keep-all;overflow-wrap:normal}
.jp-name{display:block;font-weight:900;font-size:1.1rem;letter-spacing:-.02em;
line-height:1.4;color:var(--ink);word-break:keep-all}
.jp-note{display:block;margin:0;font-weight:600;font-size:.92rem;line-height:1.7;
color:var(--muted);word-break:keep-all;overflow-wrap:break-word}
/* 어린이 심사위원 = 아직 비어 있는 자리.
테두리를 점선으로 '두르되' 괘선 목록의 줄맞춤은 건드리지 않아야 하므로
outline(점선 지원) + 음수 offset 을 쓴다. border 로 두르면 행 높이가 밀린다. */
.jp-open{outline:1.5px dashed var(--deep);outline-offset:-2px}
.jp-open .jp-role{border-style:dashed;border-color:var(--deep);color:var(--deep);background:none}
.jp-open .jp-name{color:var(--deep)}
.jp-open .jp-note{color:var(--deep)}
@media(max-width:640px){
.jp{grid-template-columns:1fr;row-gap:5px;padding:16px 2px}
.jp > *{grid-column:1}
.jp-role{grid-row:auto;margin-top:0;margin-bottom:3px}
.jp-name{font-size:1.02rem}
.jp-note{font-size:.88rem}
.jp-open{outline-offset:-1px}
}
/* ---- 02 축제 슬로건 「어린이의 힘을 믿어요」 -----------------
크기 계산: 히어로 제목(.h-display = clamp(2.4rem,8.5vw,6rem), 모바일 clamp(1.55rem,7vw,2rem))
보다 항상 작고, 본문(1rem=18px)보다는 크게 → clamp(1.35rem,4.3vw,2.6rem).
1280px에서 46.8px vs 히어로 108px · 767px에서 33px vs 히어로 36px.
인용의 느낌은 위·아래 괘선 두 줄로만 만든다 (따옴표 장식·이탤릭 없음 — 「」는 본문이 가진다). */
.jslogan{max-width:900px;margin:24px 0 0;
border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
padding:clamp(20px,3.6vw,34px) 0;
font-weight:900;font-size:clamp(1.35rem,4.3vw,2.6rem);line-height:1.28;
letter-spacing:-.035em;color:var(--ink);
word-break:keep-all;overflow-wrap:normal}
.jslogan .or{color:var(--orange)}
.jslogan small{display:block;margin-top:12px;
font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--deep)}
/* ---- 03 신청하는 세 걸음 (ol) -------------------------------
기본 마커를 끄고 counter 로 모노 번호 배지를 만든다.
번호를 CSS가 가지므로 마크업에 숫자가 없어도 01·02·03 이 붙는다. */
.jsteps{list-style:none;counter-reset:jstep;margin:20px 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,18px);
max-width:1000px}
.jsteps > li{counter-increment:jstep;
border:1.5px solid var(--ink);border-radius:2px;background:var(--cream,#FBF5E8);
box-shadow:3px 3px 0 var(--ink);padding:16px 18px 18px;
font-weight:600;font-size:.92rem;line-height:1.7;color:var(--ink);
word-break:keep-all;overflow-wrap:break-word}
.jsteps > li::marker{content:""}
.jsteps > li::before{content:counter(jstep,decimal-leading-zero);
display:block;width:max-content;margin-bottom:10px;
font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.72rem;font-weight:700;letter-spacing:.06em;
color:var(--cream,#FBF5E8);background:var(--ink);
border-radius:2px;padding:4px 9px}
/* 걸음의 이름은 — .faq .fa b 와 같은 규칙(깊은 주황·굵게)을 따른다.
마크업이 이름설명 형태라 첫 만 한 줄로 세운다.
쉬운 글·English 로 바꿔도 data-easy/data-en 이 같은 형태라 그대로 유지된다. */
.jsteps b{font-weight:900;color:var(--deep);letter-spacing:-.02em}
.jsteps > li > b:first-child{display:block;font-size:1.02rem;line-height:1.4;margin-bottom:5px}
.jsteps p{margin:6px 0 0;font-weight:600;color:var(--muted)}
@media(max-width:767px){
.jsteps{grid-template-columns:1fr;gap:10px}
.jsteps > li{font-size:.88rem;padding:14px 16px 16px;box-shadow:2px 2px 0 var(--ink)}
.jsteps > li > b:first-child{font-size:.98rem}
}
/* ---- 04 어린이가 고른 그림책·추천사 -------------------------
rental 의 #reviews .storywall(6색 메모지)을 참고하되 색으로 채우지 않는다.
여기서 할 일은 '추천사를 읽는 것'이고, 6색은 읽기방식을 뜻하는 색이라
추천사 위에 얹으면 뜻이 흐려진다. → 크림 카드 + 괘선 한 줄 + 하드 오프셋.
한 단(760px) 세로 쌓기: 길고 짧은 추천사가 섞여도 격자처럼 빈칸이 생기지 않고,
본문 한 줄이 40자를 넘는다 (760 - 좌우 22×2 - 테두리 3 = 713px ÷ 16.4px ≒ 43자). */
/* [2026-08-01 재설계] 추천사 카드 — 읽는 글이 주인공.
앞선 '펼친 책 표지' 안은 폐기했습니다. 표지 면이 카드 절반을 먹어
정작 어린이가 쓴 글이 좁아졌기 때문입니다.
지금 구조: 색 띠(책등) · 그림책 그림 · [제목·지은이 한 줄 + 추천사 + 이름]
그림책 그림은 SVG 로 직접 그렸습니다. 포스터에서 오려내면 손·팔이 딸려와
깨끗하게 떨어지지 않습니다. 선으로 그리면 어느 크기에서도 흐트러지지 않습니다. */
.jglist{list-style:none;margin:20px 0 0;padding:0;max-width:820px;
display:grid;grid-template-columns:1fr;gap:12px}
.jgcard{display:grid;grid-template-columns:6px 46px minmax(0,1fr);align-items:start;
border:1.5px solid var(--ink);border-radius:2px;background:#FDF9F0;
box-shadow:3px 3px 0 rgba(22,16,11,.2);overflow:hidden;min-width:0;
transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
/* 왼쪽 색 띠 = 책등. 네 권마다 색이 한 바퀴 돈다 (네 가지 바람과 같은 팔레트) */
.jgcard::before{content:"";grid-column:1;align-self:stretch;background:var(--cover,#A8431A)}
.jgcard:nth-child(4n+1){--cover:#A8431A} /* 테라코타 */
.jgcard:nth-child(4n+2){--cover:#2E7D63} /* 초록 */
.jgcard:nth-child(4n+3){--cover:#8A2E4D} /* 자두 */
.jgcard:nth-child(4n+4){--cover:#7A4E96} /* 보라 */
html[data-motion="on"] .jgcard:hover{transform:translate(-1px,-1px);
box-shadow:5px 5px 0 rgba(22,16,11,.24)}
/* 그림책 그림 */
.jg-ico{grid-column:2;padding:15px 0 0 12px;line-height:0}
.jg-ico svg{width:34px;height:25px;display:block}
.jg-body{grid-column:3;padding:14px 18px 14px 12px;min-width:0}
/* 제목·지은이 — 한 줄로 짧게 */
.jg-book{margin:0 0 5px;font-size:.86rem;line-height:1.45;color:var(--ink);
word-break:keep-all;overflow-wrap:anywhere}
.jg-book b{font-weight:900;letter-spacing:-.02em}
.jg-by{margin-left:8px;font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
/* 추천사 — 이 카드의 주인공 */
.jg-why{margin:0;font-weight:600;font-size:.97rem;line-height:1.8;color:var(--ink);
word-break:keep-all;overflow-wrap:break-word}
.jg-who{margin:8px 0 0;text-align:right;
font-family:'IBM Plex Mono','Pretendard',monospace;
font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--cover,#A8431A);
word-break:keep-all}
.jg-who::before{content:"— "}
/* 아직 아무도 보내지 않았을 때 */
.jgcard-empty{display:block;border:1.5px dashed var(--ink);background:none;box-shadow:none;
border-radius:2px;padding:28px 22px;text-align:center;
font-weight:700;font-size:.9rem;line-height:1.7;color:var(--muted)}
.jgcard-empty::before{display:none}
@media(max-width:640px){
/* 휴대폰 — 그림책 그림을 제목 줄 안으로 넣어 한 칸을 아낀다 */
.jgcard{grid-template-columns:5px minmax(0,1fr);box-shadow:2px 2px 0 rgba(22,16,11,.2)}
.jg-ico{display:none}
.jg-body{grid-column:2;padding:14px 15px}
.jg-book{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem}
.jg-book .jg-inico{flex:none;width:26px;height:19px;line-height:0}
.jg-book .jg-inico svg{width:26px;height:19px;display:block}
.jg-by{margin-left:0}
.jg-why{font-size:.92rem}
.jgcard-empty{padding:22px 15px}
}
@media(min-width:641px){ .jg-book .jg-inico{display:none} }
/* ---- 05 앵커 점프 시 고정 GNB 가림 방지 (같은 파일 342·396행 규칙과 동일) ---- */
#panel,#how,#picks{scroll-margin-top:84px}
/* ---- 06 또렷하게(고대비) 모드 -------------------------------
테두리 2px #000 · 하드 오프셋 제거(사이트 관례: navdrop-menu·faq와 동일) ·
회색 글씨(--muted)는 검정으로 올려 대비 확보. */
html[data-mode="clear"] .jpanel,
html[data-mode="clear"] .jp{border-color:#000;border-width:2px}
html[data-mode="clear"] .jp-role{border:2px solid #000;background:#fff;color:#000}
html[data-mode="clear"] .jp-name,
html[data-mode="clear"] .jp-note{color:#000}
html[data-mode="clear"] .jp-open{outline:2px dashed #000;outline-offset:-3px}
html[data-mode="clear"] .jp-open .jp-role{border:2px dashed #000;color:#000}
html[data-mode="clear"] .jslogan{border-color:#000;border-width:2px;color:#000}
html[data-mode="clear"] .jslogan .or,
html[data-mode="clear"] .jslogan small{color:#000}
html[data-mode="clear"] .jsteps > li{border:2px solid #000;background:#fff;box-shadow:none;color:#000}
html[data-mode="clear"] .jsteps > li::before{background:#000;color:#fff}
html[data-mode="clear"] .jsteps b,
html[data-mode="clear"] .jsteps p{color:#000}
html[data-mode="clear"] .jgcard{border:2px solid #000;background:#fff;box-shadow:none}
html[data-mode="clear"] .jgcard::before{background:#000} /* 색 띠 → 검정 */
html[data-mode="clear"] .jg-ico svg .p-l,
html[data-mode="clear"] .jg-ico svg .p-r,
html[data-mode="clear"] .jg-book .p-l,
html[data-mode="clear"] .jg-book .p-r{fill:#fff;stroke:#000}
html[data-mode="clear"] .jg-book,
html[data-mode="clear"] .jg-by,
html[data-mode="clear"] .jg-why,
html[data-mode="clear"] .jg-who{color:#000}
/* ---- 07 그림 위주 모드: 긴 글 접기 -------------------------
사이트 관례는 html[data-mode="visual"] .prose{display:none} (v3.css 44행)이지만,
FAQ 답변처럼(822행) 이 페이지의 추천사·소개는 '읽는 것이 목적'인 본문이라
통째로 지우지 않고 앞 몇 줄만 남겨 접는다. 전체는 모드를 바꿔 읽는다. */
html[data-mode="visual"] .jp-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
html[data-mode="visual"] .jg-why{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden}
/* ---- [2026-07-31] 마우스를 올리면 색이 차오른다 ----------------
'네 가지 바람'(.wishes 234행)과 같은 생각: 색이 채워지고 글자가 크림으로 뒤집힌다.
⚠ 다만 저쪽처럼 ::before 를 밀어 올리는 방식은 쓰지 않았습니다.
.jsteps 의 설명글은 요소로 감싸이지 않은 맨 텍스트라(읽기 방식이 innerHTML을
통째로 갈아끼우기 때문에 감쌀 수도 없다) z-index 를 줄 수 없어 덮개에 가립니다.
그래서 배경색 자체를 바꿉니다 — 보이는 결과는 같고 훨씬 튼튼합니다.
⚠ @media(hover:hover) — 손가락으로 만지는 화면에서는 색이 눌린 채 남습니다.
대비: 네 색 모두 크림 글씨 기준 AA(4.5:1) 이상. #D4642F(3.4:1)는 쓰지 않습니다. */
/* 색 지정은 미디어쿼리 밖에 둔다 — 안에 넣으면 손가락 화면에서 값 자체가 사라져
나중에 다른 규칙이 var(--dc) 를 쓸 때 조용히 깨진다. */
.jp{--dc:#A8431A}
.jp-teacher{--dc:#2E7D63}
.jp-author{--dc:#7A4E96}
.jsteps > li:nth-child(1){--dc:#A8431A}
.jsteps > li:nth-child(2){--dc:#2E7D63}
.jsteps > li:nth-child(3){--dc:#8A2E4D}
@media(hover:hover){
/* 01 심사위원 명단 — 역할끼리 같은 색 */
.jp:hover{background:var(--dc)}
.jp:hover .jp-name,.jp:hover .jp-note{color:#FBF5E8}
.jp:hover .jp-role{background:none;border-color:#FBF5E8;color:#FBF5E8}
.jp-open:hover{outline-color:#FBF5E8}
html[data-motion="on"] .jp{transition:background-color .22s var(--ease)}
html[data-motion="on"] .jp .jp-name,
html[data-motion="on"] .jp .jp-note,
html[data-motion="on"] .jp .jp-role{transition:color .22s var(--ease),border-color .22s var(--ease)}
/* 02 신청하는 세 걸음 — 걸음마다 다른 색 */
.jsteps > li:hover{background:var(--dc);color:#FBF5E8}
.jsteps > li:hover b{color:#FBF5E8}
.jsteps > li:hover p{color:#FBF5E8}
.jsteps > li:hover::before{background:#FBF5E8;color:var(--dc)}
html[data-motion="on"] .jsteps > li{transition:background-color .22s var(--ease),color .22s var(--ease)}
html[data-motion="on"] .jsteps > li::before{transition:background-color .22s var(--ease),color .22s var(--ease)}
/* 04 추천사 카드에는 색 채우기를 넣지 않았습니다.
읽는 도중 마우스가 지나가면 배경과 글자색이 바뀌어 읽기를 방해합니다.
카드는 지금처럼 살짝 들리는 효과(.jgcard:hover transform)만 둡니다. */
/* 또렷하게 모드에서는 색을 쓰지 않는다 — 검정/흰색 반전만 */
html[data-mode="clear"] .jp:hover{background:#000}
html[data-mode="clear"] .jp:hover .jp-name,
html[data-mode="clear"] .jp:hover .jp-note,
html[data-mode="clear"] .jp:hover .jp-role{color:#fff;border-color:#fff}
html[data-mode="clear"] .jsteps > li:hover{background:#000;color:#fff}
html[data-mode="clear"] .jsteps > li:hover b,
html[data-mode="clear"] .jsteps > li:hover p{color:#fff}
html[data-mode="clear"] .jsteps > li:hover::before{background:#fff;color:#000}
}
@media(prefers-reduced-motion:reduce){
.jp,.jp .jp-name,.jp .jp-note,.jp .jp-role,
.jsteps > li,.jsteps > li::before{transition:none !important}
}