/* Customer reading view: soft, hamster-themed, mobile first. */
.cute-reader{--ink:#4a3a33;--soft:#8a776c;--peach:#ffe7dc;--mint:#e3f4ea;--butter:#fff3cf;--lilac:#efe7fb;--sky:#e2f0fb;--rose:#ffe4ea;--accent:#e9826c;font-family:"Saju Round","Apple SD Gothic Neo",sans-serif;color:var(--ink);max-width:560px;margin:0 auto}
.cute-hero{position:relative;margin:4px 0 18px;padding:22px 20px 20px;border-radius:28px;background:linear-gradient(160deg,#fff 0,#fff4ea 55%,#ffe2d4 100%);border:2px solid #ffd9c7;box-shadow:0 10px 26px rgba(233,130,108,.14);overflow:hidden}
.cute-hero .kicker{display:inline-block;padding:4px 11px;border-radius:999px;background:#fff;border:1.5px solid #ffcdb8;color:#d0705a;font-family:"Saju Display","Saju Round",sans-serif;font-size:13px}
.cute-hero h2{margin:12px 92px 0 0;font-family:"Saju Display","Saju Round",sans-serif;font-weight:400;font-size:25px;line-height:1.35;letter-spacing:-.01em;word-break:keep-all}
.cute-hero img{position:absolute;right:12px;top:14px;width:86px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}
.cute-bubble{position:relative;margin:16px 0 0;padding:14px 16px;border-radius:20px;background:#fff;border:1.5px solid #f3dccf;font-size:15px;line-height:1.85}
.cute-bubble:before{content:"";position:absolute;left:26px;top:-9px;width:16px;height:16px;background:#fff;border-left:1.5px solid #f3dccf;border-top:1.5px solid #f3dccf;transform:rotate(45deg)}
.cute-chips{position:sticky;top:0;z-index:3;display:flex;gap:6px;overflow-x:auto;margin:0 -4px 14px;padding:10px 4px;background:linear-gradient(#faf5ef 70%,rgba(250,245,239,0));scrollbar-width:none}
.cute-chips::-webkit-scrollbar{display:none}
.cute-chips a{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:#fff;border:1.5px solid #eadbd0;color:var(--ink);font-family:"Saju Display","Saju Round",sans-serif;font-size:13px;text-decoration:none;white-space:nowrap}
.cute-chips a:active{transform:scale(.96)}
.cute-card{position:relative;margin:0 0 16px;padding:20px 18px 16px;border-radius:26px;background:var(--bg,#fff);border:2px solid rgba(0,0,0,.035);scroll-margin-top:62px}
.cute-card:nth-of-type(6n+1){--bg:var(--peach)}.cute-card:nth-of-type(6n+2){--bg:var(--mint)}.cute-card:nth-of-type(6n+3){--bg:var(--butter)}.cute-card:nth-of-type(6n+4){--bg:var(--lilac)}.cute-card:nth-of-type(6n+5){--bg:var(--sky)}.cute-card:nth-of-type(6n){--bg:var(--rose)}
.cute-card header{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-right:62px;min-height:40px}
.cute-card .num{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--accent);font-family:"Saju Display","Saju Round",sans-serif;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.05)}
.cute-card h3{margin:0;font-family:"Saju Display","Saju Round",sans-serif;font-weight:400;font-size:20px;line-height:1.35;word-break:keep-all}
.cute-card .sticker{position:absolute;right:10px;top:-16px;width:56px;max-height:64px;object-fit:contain;pointer-events:none;height:auto;transform:rotate(6deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.08))}
.cute-card:nth-of-type(even) .sticker{transform:rotate(-7deg)}
.cute-oneline{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.85)}
.cute-oneline b{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff;font-family:"Saju Display","Saju Round",sans-serif;font-size:12px;font-weight:400;line-height:1.7}
.cute-oneline span{font-family:"Saju Display","Saju Round",sans-serif;font-size:16px;line-height:1.55;color:#6a4a3e;word-break:keep-all}
.cute-body p{margin:0 0 12px;font-size:15.5px;line-height:1.95;letter-spacing:-.005em;word-break:keep-all}
.cute-body p:last-child{margin-bottom:4px}
.cute-reader mark{padding:0 2px;border-radius:4px;background:linear-gradient(transparent 55%,rgba(255,200,120,.7) 55%);color:inherit}
.cute-note{margin-top:10px;border-radius:16px;background:rgba(255,255,255,.6);border:1.5px dashed rgba(106,75,55,.25)}
.cute-note summary{padding:10px 14px;cursor:pointer;font-family:"Saju Display","Saju Round",sans-serif;font-size:14px;color:var(--soft);list-style:none}
.cute-note summary::-webkit-details-marker{display:none}
.cute-note summary:before{content:"🐹 ";}
.cute-note p{margin:0;padding:0 14px 12px;font-size:13.5px;line-height:1.8;color:#6c5a50}
.cute-chart{margin:0 0 16px;border-radius:22px;background:#fff;border:2px solid #efe3d8}
.cute-chart>summary{padding:14px 16px;cursor:pointer;font-family:"Saju Display","Saju Round",sans-serif;font-size:16px;list-style:none}
.cute-chart>summary::-webkit-details-marker{display:none}
.cute-chart>summary:after{content:"펼치기 ›";float:right;color:var(--soft);font-size:13px}
.cute-chart[open]>summary:after{content:"접기 ‹"}
.cute-chart>div{padding:0 12px 12px}
.cute-end{margin:22px 0 8px;padding:20px;border-radius:26px;background:#fff;border:2px dashed #f0cdbd;text-align:center}
.cute-end img{width:84px;height:auto}
.cute-end h3{margin:6px 0 6px;font-family:"Saju Display","Saju Round",sans-serif;font-weight:400;font-size:19px}
.cute-end p{margin:0;color:var(--soft);font-size:13px;line-height:1.7}
.cute-operator{margin-top:12px;color:#a09080;font-size:11px;text-align:center}

.cute-card{scroll-margin-top:124px}.cute-chips a{min-height:36px;display:inline-flex;align-items:center}
/* 44px hit areas without bulk: invisible padding around the visual chip */
.cute-chips a{position:relative}
.cute-chips a::after{content:"";position:absolute;inset:-4px -3px}
.cute-note summary,.cute-chart summary{min-height:44px;display:flex;align-items:center}
.cute-chart>summary,.cute-note>summary{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cute-chart>summary:after,.cute-note>summary:after{float:none;margin-left:auto;flex:0 0 auto;white-space:nowrap}

.term-btn{all:unset;cursor:pointer;display:inline;border-radius:4px}.term-btn mark{border-bottom:1.5px dotted #c0785f}.term-btn:focus-visible{outline:2px solid #ef816c;outline-offset:1px}
.term-pop{position:absolute;z-index:60;background:#fff;border:1px solid #ecdcd0;border-radius:14px;box-shadow:0 10px 28px rgba(63,53,49,.18);padding:12px 14px 10px;font-size:14px;line-height:1.55;color:#3f3531}
.term-pop strong{display:block;font-size:14px;margin-bottom:4px;color:#b45e50}.term-pop p{margin:0}.term-pop-close{margin-top:8px;border:0;background:#f6efe9;border-radius:999px;padding:4px 12px;font-size:12px;color:#7a6c64;cursor:pointer}
/* 진호 10/1: 명식·풀이 노트가 '박스 안에 박스'로 보이던 것 정리. 바깥 박스 하나만 두고 안쪽 제목 줄은 테두리 없이. */
.cute-reader details.cute-chart>summary,.cute-reader details.cute-note>summary{margin:0!important;border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}
.cute-chart{border:1.5px solid #ecdccd;background:#fffdf9;overflow:hidden}
.cute-chart>summary{padding:16px 18px!important;min-height:56px}
.cute-chart[open]>summary{border-bottom:1px solid #f1e6db!important}
.cute-chart>div{padding:14px 12px 14px}
.cute-note{margin-top:14px;border:1.5px solid rgba(106,75,55,.12);background:rgba(255,255,255,.72)}
.cute-note>summary{padding:12px 16px!important;min-height:50px}
.cute-note[open]>summary{padding-bottom:6px!important}
.cute-note p{padding:0 16px 14px}
/* 진호 10/1 가독성: 본문은 흰 바탕에 진한 글자, 파스텔은 번호·한 줄 요약에만. 문단 사이 여유. */
.cute-card{background:#fff;border:1.5px solid #f0e6dc;box-shadow:0 4px 14px rgba(106,75,55,.05);padding:22px 20px 18px}
.cute-card .num{background:var(--bg,#fff3e8);box-shadow:none}
.cute-oneline{background:var(--bg,#fff3e8);margin-bottom:18px}
.cute-body p{margin:0 0 16px;font-size:16px;line-height:1.85;color:#3b2f2a;letter-spacing:-.01em}
.cute-body p:last-child{margin-bottom:6px}
/* 명식 박스: 접기 줄 제목과 같은 '나의 사주 명식' 제목은 숨기고, 오행 색 안내는 표와 띄운다 */
.cute-chart .chart-heading{display:none}
.cute-chart .element-key{margin-top:14px}
.cute-chart>div{padding-top:16px}