/* 디자이너 시안 assets/kx.css 위에 얹음. pick·branch·map.html 값 그대로 */
.sheet{background:#fff;border:3px solid #E6C9A8;border-radius:22px;box-shadow:0 6px 0 #E6C9A8;padding:10px}
.scene{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px}
.scene .ph,.scene .bgimg{position:absolute;inset:0}.scene .bgimg{background-size:cover;background-position:center}
.bgimg.night{filter:brightness(.75) saturate(.8)}.ph.night{background:#BDB8C6}
.scene img{position:absolute;bottom:0;width:34%;aspect-ratio:1;object-fit:contain;object-position:center bottom} /* 투명 컷 512 캔버스째 contain, 아래 끝에 붙임 */
.scene .pos-left{left:6%}.scene .pos-right{right:6%}.scene .pos-center{left:33%}.scene .kg{width:24%}.scene .ot{width:30%;left:35%}
.txt{font-size:19px;line-height:1.6;margin:10px 4px}.txt .ln{margin:0 0 4px}.txt b{color:#B5552A}
.road{position:relative;height:40px;margin:4px 0}.road svg{width:100%;height:100%;display:block}
.road path{fill:none;stroke:#E6C9A8;stroke-width:12;stroke-linecap:round;transition:stroke .3s,opacity .3s}.road path.on{stroke:#B5552A}.road path.off{opacity:.25}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{min-height:132px;border:3px solid #E6C9A8;border-radius:18px;background:#FFFDF8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;transition:opacity .3s,transform .3s}
.card .e{font-size:48px;line-height:1}.card .w{font-size:18px;font-weight:700}
.card[aria-pressed=true]{border-color:#B5552A;background:#FFF1DE;transform:translateY(-4px)}.card.off{opacity:.4;filter:grayscale(.6)}
.next,.go{display:block;width:100%;min-height:56px;margin-top:14px;border:none;border-radius:28px;background:#B5552A;color:#fff;font-size:20px;font-weight:700}
.next[hidden]{display:none}.go:disabled{background:#E6C9A8;color:#6B5A4A}
.lnk{display:block;margin:10px auto;min-height:44px;background:none;border:0;color:#B5552A;font-size:16px;text-decoration:underline}
.book{display:grid;grid-template-columns:1fr 64px 1fr;background:#fff;border:3px solid #E6C9A8;border-radius:22px;box-shadow:0 6px 0 #E6C9A8;overflow:hidden;min-height:300px}
.page{border:none;background:#FFFDF8;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:12px 6px;min-height:300px;transition:background .2s}
.page img{width:100%;max-width:200px;aspect-ratio:1;object-fit:contain;transform-origin:50% 90%}
.page .nm{font-size:20px;font-weight:700;min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:22px;border:2px solid #E6C9A8;background:#fff}
.page[aria-pressed=true]{background:#FFF1DE}.page[aria-pressed=true] .nm{background:#B5552A;color:#fff;border-color:#B5552A}
.page[aria-pressed=true] img{animation:wave .5s ease-in-out 3}.page.dim{opacity:.45}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.spine{background:linear-gradient(90deg,#E6C9A8,#F6E3CB 50%,#E6C9A8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px}
.spine img{width:54px;height:54px;object-fit:contain}.spine p{margin:0;font-size:14px;font-weight:700;text-align:center;line-height:1.3}
.map{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;background:#fff;border:3px solid #E6C9A8;border-radius:22px;box-shadow:0 6px 0 #E6C9A8;overflow:hidden}
.map .ph{position:absolute;inset:8px;align-items:flex-start;padding-top:8px}
.st{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:3px dashed #B5552A;background:#FFFDF8;display:flex;align-items:center;justify-content:center;font-size:34px;opacity:.35}
.st.got{opacity:1;border-style:solid;background:#FFF1DE;box-shadow:0 3px 0 #E6C9A8}.st.new{animation:stp .6s}
@keyframes stp{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.s1{left:22%;top:28%}.s2{left:78%;top:28%}.s3{left:22%;top:76%}.s4{left:78%;top:76%}
.rb{position:absolute;left:50%;top:14%;transform:translateX(-50%);font-size:30px}
.door{overflow:hidden;position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:120px;min-height:150px;border-radius:60px 60px 12px 12px;border:3px solid #B5552A;background:#FBF3E6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:8px;font-size:15px;font-weight:700}
.door img{width:64px;height:64px;object-fit:contain}.door:disabled{border-style:dashed;color:#6B5A4A;filter:grayscale(.5);cursor:default}
.door.open{background:#FFE7B0;animation:pop .6s}@keyframes pop{50%{transform:translate(-50%,-50%) scale(1.08)}}
.teaser{margin:14px auto 0;max-width:520px}.teaser .ph{height:90px}.teaser p{text-align:center;margin:6px 0;color:#6B5A4A}
.parent{margin:18px 0 6px;padding:10px 12px;border-top:2px dashed #E6C9A8;font-size:13px;color:#6B5A4A}.parent b{font-size:12px}
.novoice .kx-read{visibility:hidden}
.badge{margin:14px auto 0;max-width:320px;text-align:center;background:#FFF1DE;border:3px solid #B5552A;border-radius:22px;padding:12px;animation:pop2 .6s}
.badge .bi{display:block;font-size:56px}.badge b{display:block;font-size:20px}.badge small{color:#6B5A4A}.badge[hidden]{display:none}
@keyframes pop2{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.card{position:relative}.card.heard{background:#FFF1DE;box-shadow:inset 0 0 0 1px #B5552A}
.card .ck{position:absolute;top:6px;right:8px;width:28px;height:28px;border-radius:50%;background:#B5552A;color:#fff;font-size:17px;display:none;align-items:center;justify-content:center}.card[aria-pressed=true] .ck{display:flex}
.road path.on{stroke-dasharray:200;animation:grow .8s}@keyframes grow{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.next:disabled{background:#E6C9A8;color:#6B5A4A}
.door .cloud{position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,#fff 30%,transparent 31%),radial-gradient(circle at 70% 45%,#fff 32%,transparent 33%),radial-gradient(circle at 50% 70%,#fff 38%,transparent 39%);opacity:.92;transition:opacity .8s,transform .8s;pointer-events:none}
.door.open .cloud{opacity:0;transform:translateY(-30px)}.door img{border-radius:50%}
.stk{display:flex;gap:10px;align-items:center;max-width:520px;margin:14px auto 0;background:#FFF1DE;border:2px solid #E6C9A8;border-radius:18px;padding:8px}
.stk img{width:96px;height:96px;flex:none}.stk b{display:block;font-size:17px}.stk small{color:#6B5A4A;font-size:14px}
.badge img.bi{width:96px;height:96px}
.kx-map .go{min-height:52px}
@media (max-width:359px){.st{width:64px;height:64px;margin:-32px 0 0 -32px;font-size:28px}.door{width:96px;min-height:128px}.page img{max-width:120px}}

/* 디자이너 10/15: fx.js 음소거 버튼(화면 아래 고정)이 맨 아래 버튼·카드를 가리지 않게 버튼 높이만큼 여백 */
/* 고정(fixed)으로 띄우면 첫 화면에서 '이 길로 갈래!'를 가려서, 내용 맨 아래 오른쪽에 둠(흐름 안, 가리지 않음) */
.mute{display:block;margin:0 16px calc(16px + env(safe-area-inset-bottom)) auto;width:52px;height:52px;border-radius:50%;border:3px solid #E6C9A8;background:#fff;font-size:24px;box-shadow:0 4px 0 #E6C9A8;cursor:pointer}
.mute:focus-visible{outline:3px solid #6B8F5E;outline-offset:3px}.mute:active{transform:translateY(3px);box-shadow:0 1px 0 #E6C9A8}
main.kx-scene,main.kx-map,main.kx-pick,main.kx-short{padding-bottom:24px}
/* N4 시안 무지개 아치 */
.door.open{background:radial-gradient(circle at 50% 100%,#FBF3E6 32%,#C9E2F2 33% 41%,#CFE6B8 42% 50%,#FFE7A0 51% 59%,#F6C9A0 60% 68%,#F2B2B2 69% 77%,#FBF3E6 78%)}
.teaser p,.teaser .ph{text-align:center}
/* 항목6 지름길 화면 */
.kx-short .bb{margin:28px 0 20px}.kx-short .go{min-height:52px}
.kx-short .sfull{display:block;width:100%;min-height:48px;margin-top:12px;background:#fff;border:1px solid #E6C9A8;border-radius:999px;color:#B5552A;font:inherit;font-weight:700;font-size:17px;cursor:pointer}
.kx-short .sfull:focus-visible,.kx-short .go:focus-visible{outline:3px solid #6B8F5E;outline-offset:3px}
.kx-short .heard{box-shadow:0 0 0 4px #6B8F5E}
/* 디자인 검토 10/15 r2: 지도 바탕 CSS(그림 0원), 문 안 콩이 선명하게 */
.map{background:#FBF3E6;border-color:#E6C9A8}
.map .mapbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 14% at 20% 14%,rgba(255,255,255,.95) 60%,transparent 62%),radial-gradient(ellipse 30% 12% at 82% 10%,rgba(255,255,255,.9) 60%,transparent 62%),radial-gradient(ellipse 36% 14% at 76% 92%,rgba(255,255,255,.85) 60%,transparent 62%),radial-gradient(ellipse 30% 12% at 18% 94%,rgba(255,255,255,.85) 60%,transparent 62%),radial-gradient(circle at 50% 50%,#FFF8EE 0,#FBF3E6 70%)}
.door:disabled{filter:none}.door:disabled span{color:#6B5A4A}
.door img,.door span{position:relative;z-index:1}.door .cloud{z-index:0}

/* ① 누르는 놀이(tap) · ② 길 힌트 · ③ 도장판 (10/15) */
.scene .tap{position:absolute;transform:translate(-50%,-50%);min-width:56px;min-height:56px;padding:4px;border:3px dashed #E6C9A8;border-radius:50%;background:rgba(255,255,255,.75);font-size:34px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
.scene .tap img{position:static;width:48px;height:48px;aspect-ratio:auto}
.scene .tap:focus-visible{outline:3px solid #6B8F5E;outline-offset:3px}
.scene .tap:disabled{border-style:solid;cursor:default}
@media (prefers-reduced-motion:no-preference){.scene .tap:not(:disabled){animation:kxwig 1.6s ease-in-out infinite}
 .scene .tap.fx-bounce{animation:kxbn .35s ease}.scene .tap.fx-pop{animation:kxpop .45s ease forwards}
 .board .slot.now.got{animation:kxpop2 .6s ease .3s both}}
@keyframes kxwig{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes kxbn{0%,100%{transform:translate(-50%,-50%)}40%{transform:translate(-50%,-80%)}}
@keyframes kxpop{0%{transform:translate(-50%,-50%) scale(1)}60%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(.6);opacity:.25}}
@keyframes kxpop2{0%{transform:scale(.3)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.tapsay{margin:14px 0}
.board{display:flex;justify-content:center;gap:12px;margin:14px 0}
.board .slot{width:52px;height:52px;border-radius:50%;border:2px dashed #E6C9A8;display:flex;align-items:center;justify-content:center;font-size:28px;color:#C9B49A;background:#FFF8EE}
.board .slot.got{border-style:solid;background:#fff;color:inherit}
.board .slot.now{box-shadow:0 0 0 3px #6B8F5E}

/* 10/15 그림 붙이기: 그림 tap · 여러 대상 · 그림 도장판 */
.scene .tap.timg{--tsz:64px;width:var(--tsz);height:var(--tsz);background:rgba(255,255,255,.35)}
.scene .tap.timg img{width:100%;height:100%;object-fit:contain}
.scene .tap.open img{transform:scale(1.18,1.25);transition:transform .2s ease}
@media (prefers-reduced-motion:reduce){.scene .tap.open img{transition:none}}
.board.bimg{position:relative;display:block;width:min(100%,400px);aspect-ratio:400/128;margin:14px auto;background-size:100% 100%;gap:0}
.board.bimg .slot{position:absolute;top:50%;width:15%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:none;border-radius:50%}
.board.bimg .slot img{width:100%;height:100%}
.board.bimg .slot.now{box-shadow:0 0 0 3px #6B8F5E}
@media (prefers-reduced-motion:no-preference){.board.bimg .slot.now.got{animation:kxpop3 .6s ease .3s both}}
@keyframes kxpop3{0%{transform:translate(-50%,-50%) scale(.3)}70%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}
.tapsay[hidden],.bb[hidden]{display:none!important}

/* 10/15 유료 그림: 소품 레이어·그림 문·카드 그림·장면 폭 기준 tap */
.scene{container-type:inline-size}
.scene img.prop{position:absolute;bottom:auto;aspect-ratio:auto;height:auto;transform:translate(-50%,-50%);pointer-events:none;object-fit:contain}
.scene .me,.scene .kg,.scene .ot{z-index:1}
.card .e img{width:64px;height:64px;object-fit:contain;border-radius:50%}
.door.dimg img{border-radius:0;width:72px;height:72px}
.scene .tap.timg{box-sizing:border-box}

/* 10/15 탐험지 고르기(index.html) */
.kx-choose{max-width:720px;margin:0 auto;padding:20px 16px}
.kx-choose h1{text-align:center;font-size:24px;margin:8px 0 18px}
.kx-stories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){.kx-stories{grid-template-columns:1fr 1fr}}
.kx-story{display:flex;flex-direction:column;gap:6px;min-height:48px;padding:10px 10px 14px;border:3px solid #E6C9A8;border-radius:18px;background:#FFFDF8;color:#3E2E22;text-decoration:none}
.kx-story:focus-visible{outline:3px solid #6B8F5E;outline-offset:3px}
.kx-story .ki{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;background-size:cover;background-position:center}
.kx-story .kd{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;background:#FBF3E6;border:2px solid #B5552A;display:flex;align-items:center;justify-content:center;font-size:24px}
.kx-story b{font-size:20px}.kx-story small{font-size:15px;color:#6B5A4A}
@media (prefers-reduced-motion:no-preference){.kx-story{transition:transform .15s}.kx-story:active{transform:scale(.98)}}

/* 디자인 검토 반영: 덮는 소품·흐름·반짝임 */
@media (prefers-reduced-motion:no-preference){.scene img.prop.a-flow{animation:kxflow 5s linear infinite alternate}.scene img.prop.a-twinkle{animation:kxtw 2.4s ease-in-out infinite}.scene img.prop.a-twinkle:nth-of-type(2n){animation-delay:.8s}.scene img.prop.a-twinkle:nth-of-type(3n){animation-delay:1.6s}}
@media (prefers-reduced-motion:reduce){.scene img.prop.a-twinkle{opacity:.8}}
@keyframes kxflow{from{transform:translateX(0)}to{transform:translateX(-4%)}}
@keyframes kxtw{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.85)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}