/* 번번이 뒤에 공방 배경을 깔아, 작업대 위에 서 있는 느낌으로 */
/* 이름 정하기 */
.bcard.art{background:linear-gradient(180deg,rgba(255,253,246,.0) 0,rgba(255,253,246,.0) 62%,rgba(255,250,235,.92) 86%),url(../images/bg-work.webp) center 42%/cover no-repeat}
.bcard.art:not(.big) img{top:auto;bottom:29%;height:50%;animation:none;filter:drop-shadow(0 18px 14px rgba(70,40,10,.38))}
.bcard.art:not(.big) h2{text-shadow:0 2px 0 rgba(255,255,255,.7)}
.bcard.art:not(.big) .chip{box-shadow:0 8px 14px -8px rgba(0,0,0,.5)}

/* 이야기 화면(번번이만 나오는 장면) */
.bcard.art.big:not(:has(img.cover)){background:linear-gradient(180deg,rgba(255,253,246,.12),rgba(255,253,246,0) 40%),url(../images/bg-work.webp) center 45%/cover no-repeat}
.bcard.art.big img.ctr{bottom:27%;max-height:400px;animation:none;filter:drop-shadow(0 18px 14px rgba(70,40,10,.4))}

/* 방 화면 왼쪽 번번이 카드 */
.bcard.bbi{background:linear-gradient(180deg,rgba(255,251,240,.30),rgba(255,251,240,0) 32%,rgba(255,251,240,.10) 70%,rgba(255,251,240,.55)),url(../images/bg-work.webp) 45% 46%/cover no-repeat}
.bcard.bbi img{animation:none;margin-bottom:2px;filter:drop-shadow(0 16px 12px rgba(70,40,10,.4))}
.bcard.bbi .gauge{background:rgba(255,253,246,.88);border-radius:99px;padding:8px 16px}

/* 문제 팝업의 번번이 */
.pic.soft{background:linear-gradient(180deg,rgba(255,251,240,.22),rgba(255,251,240,0) 40%),url(../images/bg-work.webp) center 50%/cover no-repeat}
.scene .pic.soft.bb .bi{bottom:22px;filter:drop-shadow(0 14px 10px rgba(70,40,10,.4))}

/* 증서 */
.bcard.bb3{background:linear-gradient(180deg,rgba(255,251,240,0),rgba(255,251,240,.1)),url(../images/bg-party.webp) center/cover no-repeat}
.bcard.bb3 img{animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 18px 12px rgba(70,40,10,.4))}

/* 쪽지 */
.note2{position:relative;background:#fffdf0;border-radius:10px 26px 26px 26px;padding:20px 32px 26px;box-shadow:0 14px 0 -8px #e8dcb4,0 22px 28px -14px rgba(90,60,10,.45);background-image:repeating-linear-gradient(180deg,transparent 0 41px,rgba(80,150,200,.18) 41px 43px);transform:rotate(-.6deg)}
.note2::before{content:"";position:absolute;left:-6px;top:22px;width:20px;height:44px;background:#f3d36a;border-radius:6px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.note2 small{display:inline-block;background:#1f7a78;color:#fff;border-radius:99px;padding:3px 16px;font-size:18px;font-weight:800;margin-bottom:10px}
.note2 p{font-size:32px;font-weight:700;line-height:1.55;color:#3a2f1c}

/* 강조는 색칠 대신 밑줄 */
mark{background:none!important;color:inherit;padding:0;border-radius:0;text-decoration:underline;text-decoration-thickness:5px;text-decoration-color:#e0492b;text-underline-offset:9px;text-decoration-skip-ink:none}
.bin.right{outline:6px solid #ffd54a;outline-offset:3px}.bin.dim{opacity:.45}.bin[disabled]{cursor:default}

/* 표지: 창 전체를 그림으로 꽉 채움(비율이 달라도 여백 없음) */
body.in-title{background:#c9955a url(../images/title.webp) center 28%/cover no-repeat!important}
body.in-title::before{display:none!important}
.in-title #stage{background:none!important}

/* 버튼 크기 통일 */
.btn,.btn.sm,.btn.line,.foot .btn{height:60px;min-width:150px;padding:0 34px;font-size:23px;border-radius:99px}
.foot .btn.line{box-shadow:0 0 0 2.5px var(--ink),0 7px 0 var(--ink)}
.btn.line:active{box-shadow:0 0 0 2.5px var(--ink),0 2px 0 var(--ink)}
.lockc .btn{min-width:0;width:100%}
.fld input{margin-top:0}

/* 자물쇠 그림 */
.ul .lkimg{width:230px;height:auto;margin:-6px auto 0;display:block;filter:drop-shadow(0 18px 14px rgba(70,40,10,.35))}
.lockc .lkc{position:absolute;right:18px;top:16px;width:72px;height:auto;filter:drop-shadow(0 6px 5px rgba(70,40,10,.25))}
.lockc.ok .lkc{animation:pop .5s both}

/* 이야기 읽기 화면 */
#reader{position:absolute;inset:0;z-index:80;background:rgba(29,24,16,.6);backdrop-filter:blur(6px);display:grid;place-items:center;animation:fade .25s both}
#reader .rd{display:flex;width:1640px;height:820px;border-radius:40px;background:var(--card);overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.7);animation:pop .45s both}
#reader .rimg{position:relative;width:760px;flex:none;background:#e9dfc9}
#reader .rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#reader .rpg{position:absolute;left:24px;top:24px;background:rgba(29,27,23,.8);color:#fff;border-radius:99px;padding:6px 18px;font-size:20px;font-weight:800}
#reader .rtx{flex:1;padding:50px 56px 44px;display:flex;flex-direction:column;gap:18px}
#reader .rtx .chip{align-self:flex-start}
#reader h3{font-size:42px}
#reader .rbody{font-size:38px;line-height:1.75;font-weight:600;color:var(--ink2);flex:1}
#reader .rbody span{display:block;margin-bottom:12px}
#reader .acts{justify-content:flex-end}

/* 이야기 문단(단서 고르기) */
.spara{background:#fbf6e8;border-radius:22px;padding:18px 24px;font-size:22px;font-weight:600;line-height:1.85;color:var(--ink2)}
.spara .sp{display:inline;border-radius:8px;padding:2px 4px}
.spara.pick .sp{cursor:pointer;text-align:left;font:inherit;line-height:1.85;color:inherit;background:none;transition:.15s}
.spara.pick .sp:hover{background:#fff2b8}
.spara.pick .sp.sel{background:#ffd54a;box-shadow:0 0 0 3px #e8b800;color:var(--ink)}
.spara.pick .sp.glow{box-shadow:0 0 0 5px rgba(100,190,255,.8);background:#e8f5ff}
.rereadb{display:flex;align-items:center;gap:14px;text-align:left;background:#f3ebff;border-radius:22px;padding:10px 16px 10px 10px;border:2.5px solid #d9c7f2;transition:.15s}
.rereadb:hover{transform:translateY(-3px);border-color:#8a4fb0}
.rereadb img{width:104px;height:72px;object-fit:cover;border-radius:14px;flex:none}
.rereadb b{display:block;font-size:22px;font-weight:800;color:#5b2d82}.rereadb small{display:block;font-size:18px;font-weight:600;color:var(--ink2);margin-top:2px}
.scene .rereadb{margin-top:0}

/* 쪽지: 기울기 없애고 질문과 간격 두기 */
.note2{transform:none!important;margin-bottom:26px}
.pbox,.chat,.ad,.poem{margin-bottom:12px}

/* 분류 문제 마무리 정리 */
.recap{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.recap .rt0{font-size:23px;font-weight:800;color:#5b2d82}
.rc2{display:grid;grid-template-columns:150px 1fr;gap:2px 14px;align-items:center;background:#f6efdd;border-radius:16px;padding:7px 14px 8px}
.rc2 .tag{grid-row:1/3;text-align:center;font-size:17px;font-weight:800;color:#fff;border-radius:99px;padding:4px 8px;line-height:1.3}
.rc2.k0 .tag{background:#2f7f7d}.rc2.k1 .tag{background:#cf4a2c}
.rc2 p{font-size:21px;font-weight:700;line-height:1.35}
.rc2 em{font-style:normal;font-size:18px;font-weight:600;color:var(--ink2);line-height:1.3}
.rc2 mark{text-underline-offset:6px;text-decoration-thickness:4px}

/* 분류 문제 '숨은 뜻' 단계가 들어가도 팝업 안에 */
.sortc{min-height:180px;padding:26px 40px}
.sortc p{font-size:34px}
.bin{height:104px;font-size:30px}
.pane .opts .opt{padding:10px 18px}

/* 상황 소개와 이어진 글 */
.intro{display:flex;gap:14px;align-items:center;background:#eaf3f2;border-radius:18px;padding:10px 18px;font-size:21px;font-weight:700;color:#1b5f5d;line-height:1.4}
.intro span{flex:none;background:#1f7a78;color:#fff;border-radius:99px;padding:2px 14px;font-size:17px;font-weight:800}
.spara.ctxp{font-size:25px;line-height:1.95;padding:22px 28px}
.spara.pick .sp.bad{background:#fbe2dd;box-shadow:0 0 0 3px #c0392b;animation:shake .4s}
.spara.pick .sp.good{background:#dcf1e6;box-shadow:0 0 0 3px #2f8a63}
.spara.pick .sp::after{content:"";}

/* 도움 구슬: 얼굴 없는 유리구슬 + 빛이 스치는 광택 */
.bcard.orb .stones{gap:12px;flex-wrap:wrap;justify-content:flex-start}
.orbw{position:relative;display:inline-block;width:76px;height:76px}
.orbw .orbi{width:76px;height:76px;object-fit:contain;display:block;filter:drop-shadow(0 8px 8px rgba(40,90,160,.35))}
.orbw.off .orbi{filter:drop-shadow(0 6px 6px rgba(70,40,10,.2));opacity:.85}
.orbw::after,.hintbtn .gl::after{content:"";position:absolute;inset:11% 11% 11% 11%;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:screen;
  animation:orbshine 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.orbw.off::after{display:none}
.tw{position:absolute;width:13px;height:13px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:orbtw 3.4s ease-in-out infinite;z-index:2}
.tw.t1{left:18%;top:20%;animation-delay:calc(var(--d,0s) + .9s)}.tw.t2{display:none}
.orbw.off .tw{display:none}
@keyframes orbshine{0%,35%{background-position:130% 0}70%,100%{background-position:-30% 0}}
@keyframes orbtw{0%,40%,100%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.2) rotate(40deg)}70%{opacity:0;transform:scale(.4)}}
.hintbtn{gap:10px;padding-left:12px}
.hintbtn .gl{position:relative;display:inline-block;width:46px;height:46px}
.hintbtn .gl .orbi.sm{width:46px;height:46px;object-fit:contain;display:block}
.hintbtn:hover .gl::after{animation-duration:1.2s}
.hintbtn:disabled .gl{opacity:.45;filter:grayscale(1)}.hintbtn:disabled .gl::after{display:none}

/* 빈칸 비유 완성하기 */
.fctx{display:flex;gap:12px;align-items:center;background:#eaf3f2;border-radius:18px;padding:10px 18px;font-size:21px;font-weight:700;color:#1b5f5d;line-height:1.45}
.fctx span{flex:none;background:#1f7a78;color:#fff;border-radius:99px;padding:2px 14px;font-size:17px;font-weight:800}
.blank{display:inline-block;min-width:200px;height:.9em;border-bottom:5px dashed #e0492b;vertical-align:-2px;margin:0 4px}
.opt.good{background:var(--okl);border-color:var(--ok)}
.opt[disabled]{cursor:default}

.spara.sm{font-size:21px;line-height:1.75;padding:14px 20px}
.spara.sm .sp{padding:0}
.spara.sm mark{text-decoration-thickness:4px;font-weight:800}

/* 방마다 자물쇠 5개 */
.locks.n5{grid-template-columns:repeat(5,1fr);gap:14px}
.locks.n5 .lockc{padding:18px 16px 20px}
.locks.n5 .lockc h4{font-size:23px}.locks.n5 .lockc .tz{font-size:17px;padding:10px 12px}.locks.n5 .lockc .tz small{font-size:15px}
.locks.n5 .lockc .kd{font-size:16px}.locks.n5 .lockc .btn{font-size:20px;height:52px;padding:0 10px}
.locks.n5 .lockc .lkc{width:52px}.locks.n5 .lockc .ln{width:46px;height:46px;font-size:22px}
.locks.n4{grid-template-columns:repeat(4,1fr)}

/* 단서 개수 강조 */
.cluecount{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,#fff1c2,#ffe08a);border:3px solid #e8b800;border-radius:24px;padding:10px 20px;box-shadow:0 8px 0 -4px #d9a800}
.cluecount .cbig{flex:none;width:64px;height:64px;border-radius:50%;background:#e0492b;color:#fff;display:grid;place-items:center;font-size:44px;font-weight:800;box-shadow:0 5px 0 #a82e15}
.cluecount .ctx2{flex:1;font-size:26px;font-weight:800;color:#5a3a00;line-height:1.3}
.cluecount .ctx2 b{color:#e0492b;font-size:32px;font-weight:800}
.cluecount .ctx2 small{display:block;font-size:19px;font-weight:700;color:#7a5a00}
.cluecount .cnow{flex:none;background:#fff;border-radius:99px;padding:8px 18px;font-size:22px;font-weight:800;color:var(--ink2)}
.cluecount .cnow.full{background:#2f8a63;color:#fff}

/* 이야기 선택: 끝낸 이야기 */
.story.dn{opacity:.6;filter:grayscale(.4);cursor:default}.story.dn:hover{transform:none;border-color:var(--line)}
.story.dn em{background:#2f8a63}

/* 방 화면 카드: 예시 대신 문제 개수 */
.lockc .qn{margin-top:6px;font-size:22px;font-weight:700;color:var(--ink2)}
.lockc .qn b{display:inline-block;min-width:44px;text-align:center;background:var(--rc);color:#fff;border-radius:99px;padding:2px 14px;font-size:26px;font-weight:800;margin-right:8px}
.locks.n5 .lockc .qn,.locks.n4 .lockc .qn{font-size:19px}

/* 자물쇠 카드 새 디자인 */
.lockc{position:relative;overflow:hidden;border:2px solid color-mix(in srgb,var(--rc) 25%,#e4d9c3);background:linear-gradient(165deg,#fff 55%,color-mix(in srgb,var(--rc) 9%,#fff));border-radius:30px;padding:26px 28px 24px;gap:6px;box-shadow:0 18px 28px -22px rgba(60,40,10,.5);transition:.2s}
.lockc:hover{transform:translateY(-4px);box-shadow:0 26px 34px -22px rgba(60,40,10,.6)}
.lockc::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:7px;border-radius:0 6px 6px 0;background:var(--rc)}
.lockc .bignum{position:absolute;right:18px;top:-6px;font-size:132px;font-weight:800;line-height:1;color:var(--rc);opacity:.14;pointer-events:none}
.lockc .ln,.lockc .lkc{display:none}
.lockc .kd{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:color-mix(in srgb,var(--rc) 14%,#fff);color:var(--rc);border-radius:99px;padding:5px 14px;font-size:18px;font-weight:800;margin:0 0 6px;position:relative}
.lockc .kd .ico{width:18px;height:18px;stroke-width:3.2}
.lockc h4{font-size:32px;line-height:1.28;font-weight:800;position:relative;margin-top:4px}
.lockc .qn{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:20px;font-weight:700;color:var(--ink3)}
.lockc .qn b{min-width:0;background:none;color:var(--rc);padding:0;margin:0;font-size:46px;line-height:1}
.lockc .btn{margin-top:auto}
.lockc.ok{background:linear-gradient(165deg,color-mix(in srgb,var(--rc) 12%,#fff),color-mix(in srgb,var(--rc) 22%,#fff));border-color:var(--rc)}
.lockc.ok .bignum{opacity:.2}
.locks.n4 .lockc h4{font-size:27px}.locks.n4 .lockc .bignum{font-size:108px}.locks.n4 .lockc .qn b{font-size:40px}
.locks.n5 .lockc h4{font-size:23px}
.testchip{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:80;background:#e0492b;color:#fff;border-radius:99px;padding:6px 20px;font-size:19px;font-weight:800;box-shadow:0 6px 12px -6px rgba(0,0,0,.5)}

/* 자물쇠 카드 v3: 위 색 머리 + 아래 내용 */
.lockc{padding:0;gap:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:2px solid color-mix(in srgb,var(--rc) 22%,#e4d9c3)}
.lockc::before{display:none}
.lockc .chead{position:relative;height:150px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:linear-gradient(135deg,var(--rc),color-mix(in srgb,var(--rc) 55%,#fff))}
.lockc .chead::after{content:"";position:absolute;right:-30px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.14)}
.lockc .cnum{width:78px;height:78px;border-radius:26px;background:#fff;color:var(--rc);display:grid;place-items:center;font-size:48px;font-weight:800;box-shadow:0 8px 0 rgba(0,0,0,.14);position:relative;z-index:1}
.lockc .cnum .ico{width:44px;height:44px;stroke-width:3.4}
.lockc .cico{position:relative;z-index:1;color:#fff}.lockc .cico .ico{width:84px;height:84px;stroke-width:1.6;opacity:.95}
.lockc .cbody{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px 24px 24px}
.lockc .kd{display:block;align-self:flex-start;background:none;padding:0;border-radius:0;color:var(--rc);font-size:19px;font-weight:800;margin:0;letter-spacing:.01em}
.lockc h4{font-size:30px;line-height:1.3;margin:0}
.lockc .qdots{display:flex;align-items:center;gap:8px;margin-top:6px}
.lockc .qdots i{width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--rc) 30%,#fff);border:3px solid var(--rc)}
.lockc .qdots span{margin-left:6px;font-size:20px;font-weight:700;color:var(--ink3)}.lockc .qdots b{font-size:34px;color:var(--rc);margin-right:4px}
.lockc .btn{margin-top:auto}
.lockc.ok{background:#fff}.lockc.ok .chead{background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 80%,#000),var(--rc))}
.lockc .stars{margin-top:auto}
.locks.n4 .lockc .chead{height:120px}.locks.n4 .lockc .cnum{width:64px;height:64px;font-size:38px;border-radius:22px}.locks.n4 .lockc .cico .ico{width:68px;height:68px}
.locks.n4 .lockc h4{font-size:26px}.locks.n4 .lockc .cbody{padding:16px 20px 20px}
.locks.n3 .lockc .chead{height:170px}

.locks .lockc,.locks.n3 .lockc,.locks.n4 .lockc,.locks.n5 .lockc{padding:0!important}
.lockc .chead{border-radius:0}

/* 자물쇠 카드 v4: 더 어울리게 다듬기 */
.lockc{border-radius:28px;border:2px solid color-mix(in srgb,var(--rc) 20%,#e8dfcb);box-shadow:0 16px 26px -22px rgba(60,40,10,.55)}
.lockc .chead{height:104px;padding:0 22px;background:linear-gradient(120deg,var(--rc),color-mix(in srgb,var(--rc) 62%,#fff))}
.lockc .chead::after{right:-22px;bottom:-60px;width:150px;height:150px;background:rgba(255,255,255,.13)}
.lockc .cnum{width:60px;height:60px;border-radius:50%;font-size:34px;box-shadow:0 5px 0 rgba(0,0,0,.14)}
.lockc .cnum .ico{width:32px;height:32px}
.lockc .cico{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.lockc .cico .ico{width:36px;height:36px;stroke-width:2.2}
.lockc .cbody{padding:18px 22px 22px;gap:6px}
.lockc .kd{background:color-mix(in srgb,var(--rc) 12%,#fff);color:var(--rc);padding:4px 14px;border-radius:99px;font-size:17px;margin-bottom:2px}
.lockc h4{font-size:29px;line-height:1.3;min-height:2.6em;display:flex;align-items:flex-start}
.lockc .qdots{margin-top:auto;margin-bottom:12px;padding:8px 14px;background:color-mix(in srgb,var(--rc) 8%,#fff);border-radius:16px}
.lockc .qdots i{width:14px;height:14px}
.lockc .qdots b{font-size:30px}
.lockc .btn{height:56px;font-size:22px}
.lockc.ok .stars{margin-top:auto;padding:8px 14px;background:color-mix(in srgb,var(--rc) 10%,#fff);border-radius:16px}
.locks.n4 .lockc .chead{height:92px}.locks.n4 .lockc .cnum{width:54px;height:54px;font-size:30px}.locks.n4 .lockc .cico{width:56px;height:56px}.locks.n4 .lockc .cico .ico{width:32px;height:32px}
.locks.n4 .lockc h4{font-size:25px}
.locks.n3 .lockc .chead{height:112px}

/* 제목 한 줄 */
.lockc h4{white-space:nowrap;min-height:0;display:block;overflow:hidden;text-overflow:ellipsis}
.locks.n4 .lockc h4{font-size:26px}

/* 이야기 페이지 전환 */
#reader .rimg{overflow:hidden}
#reader .rimg img{transition:none}
#reader .rimg img.out{animation:rout .65s ease both;z-index:1}
#reader .rimg img.inr{animation:rinr .65s cubic-bezier(.2,.8,.2,1) both;z-index:2}
#reader .rimg img.inl{animation:rinl .65s cubic-bezier(.2,.8,.2,1) both;z-index:2}
#reader .rimg img.cur:not(.inr):not(.inl){animation:kb 9s ease-out both}
@keyframes rinr{from{opacity:0;transform:translateX(60px) scale(1.08)}to{opacity:1;transform:none}}
@keyframes rinl{from{opacity:0;transform:translateX(-60px) scale(1.08)}to{opacity:1;transform:none}}
@keyframes rout{from{opacity:1}to{opacity:0;transform:scale(.96)}}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
#reader .rimg .rpg{z-index:5}
#reader .rtx{padding:0;display:flex;flex-direction:column;overflow:hidden}
#reader .rpane{flex:1;padding:50px 56px 0;display:flex;flex-direction:column;gap:18px}
#reader .rpane.fromr{animation:pslr .55s cubic-bezier(.2,.8,.2,1) both}
#reader .rpane.froml{animation:psll .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes pslr{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes psll{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
#reader .rbody span{animation:wup .6s ease both;animation-delay:calc(.25s + var(--k)*.25s)}
@keyframes wup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#reader .rfoot2{padding:0 56px 44px;display:flex;align-items:center;justify-content:space-between}
#reader .rfoot2 .dots{margin:0}
#reader .dots i.dn{background:#9bc9c6}
#reader .dots i{transition:.4s}

/* 스스로 확인하기 보완 */
.selfs .bento{grid-template-columns:1.05fr 1.15fr .95fr}
.bcard.notes,.bcard.rates,.bcard.graph{padding:30px 32px;gap:14px}
.nt{gap:8px}.nt>span{font-size:21px}
.nt textarea{border-radius:18px;background:#fffdf8}
.rrow{background:linear-gradient(160deg,#fbf3e0,#f6ebd0);border-radius:26px}
.rrow p b{background:#4b5f96}
.rt{border-radius:18px}.rt small{font-size:18px}
.rt .stv{filter:drop-shadow(0 4px 0 rgba(200,140,0,.18))}
.bcard.graph{justify-content:flex-start;background:linear-gradient(170deg,#f5fbf9,#d8eeea)}
#triwrap{flex:1;display:grid;place-items:center;width:100%;background:#fff;border-radius:28px;padding:10px;box-shadow:inset 0 0 0 2px #cfe6e2}
.tri{width:100%;max-height:none}
.tri text{font-size:30px}
.tri .vl{fill:rgba(31,122,120,.3)}
.srec{border:2px solid #cfe6e2;background:#fff}
#triwrap{flex:none;aspect-ratio:500/360;align-self:center}.tri text{font-size:27px}

/* 추론 넓히기 이름표 */
.t2chip{align-self:flex-start;display:inline-block;background:#8a4fb0;color:#fff;border-radius:99px;padding:4px 16px;font-size:19px;font-weight:800}
/* 이야기 읽기: 이전·다음 버튼이 잘리지 않게 */
#reader .rd{height:860px}
#reader .rtx{min-height:0}
#reader .rpane{min-height:0;overflow:auto;padding-bottom:10px}
#reader .rbody{font-size:34px;line-height:1.6}
#reader .rbody span{margin-bottom:8px}
#reader .rfoot2{flex:none;padding-top:10px}
/* 별 점수: 기울기 없이 반짝이는 확대 효과 */
.rate button:hover,.rt:hover{transform:none!important}
.rt{position:relative;transition:background .2s,box-shadow .2s}
.rt:hover{background:#fffdf4;box-shadow:0 0 0 3px #ffd54a,0 12px 20px -12px rgba(220,160,0,.7)}
.rt:hover .stv{animation:starpop .5s ease both}
@keyframes starpop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1.14)}}
.rt:hover .stv polygon{filter:brightness(1.12)}
.rt:focus-visible{outline:none;box-shadow:0 0 0 3px #1f7a78}
/* 쓰기 문제: 내 글과 예시 글을 넓게 */
.mine{font-size:30px;line-height:1.6;padding:20px 26px}
.pane .fb.info{font-size:27px;line-height:1.6;padding:20px 26px}
.pane .fb.info small{font-size:21px}
.chk{font-size:26px;gap:16px}.chk i{width:40px;height:40px}
.chks{gap:14px;margin-top:6px}

/* 긴 이야기가 들어가도 팝업 안에 */
.spara.sm{font-size:19px;line-height:1.6;padding:12px 18px}
.pane .fb{padding:10px 18px;font-size:21px}
.pane .fb.ok b{margin-right:4px}
.t2chip{font-size:17px;padding:2px 14px}
.pane{gap:8px}

/* 위 바 고정: 화면 왼쪽·오른쪽 끝에 붙이고 그라데이션도 왼쪽에서 시작 */
#top{position:fixed!important;left:0!important;right:0!important;top:0!important;height:calc(72px*var(--k,1))!important;padding:0!important;z-index:200;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,rgba(255,253,248,.92) 0,rgba(255,253,248,.55) 38%,rgba(255,253,248,0) 80%);pointer-events:none}
#top>*{pointer-events:auto}
#top .brand{transform:scale(var(--k,1));transform-origin:left center;margin-left:calc(18px*var(--k,1))}
#top .top-r{transform:scale(var(--k,1));transform-origin:right center;margin-right:calc(18px*var(--k,1))}
body.in-title #top{background:none}
body.in-title #top .top-r{margin-right:calc(18px*var(--k,1))}