/* LEARN9 가게·서재 공통 모양(2026-09-10, 오너 3379~3390 승인) — K · Ink Violet. 크기 숫자는 ui.css 토큰만 쓴다.
   .phone(고정 틀) > .scroll(구르는 안) + .l9tab(하단 바, store.js 가 붙임) + .foot(바닥 큰 버튼 띠). iOS 홈 화면 앱 함정은 store.js 의 fit() 이 --frame-h · --tab-pad 로 막는다. */
:root{--bg:#f8f7fb;--card:#fff;--txt:#17142a;--sub:#66627a;--muted:#9a96ab;--line:#e6e3ef;--acc:#4b3fa3;--acc2:#6b5bc4;--acc3:#a99cdf;--tint:#ebe7f7;--gold:#c9a227;--rose:#d76a8c;--teal:#3a9a8f;--sky:#4a86c5;--amber:#d9902d;--ink:#4b3fa3}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* iOS 홈 화면 앱 함정 3겹(docs/IOS_WEBVIEW_PITFALLS.md): ① standalone 은 높이를 ~47px 짧게 보고 → store.js fit() 이 --frame-h 를 screen.height 로 ② 그때 safe-area 도 0 → 하단 여백은 --tab-pad 로 직접
   ③ 루트(html,body)가 짧은 height:100% + overflow:hidden 이면 그 아래가 잘린다(오너 3395 스샷: 하단 바 반 잘림) → 루트 높이도 --frame-h. 셋 다 있어야 한다. 금지: innerHeight 로 프레임을 내려 맞추기 */
html,body{margin:0;height:100vh;height:100dvh;height:var(--frame-h,100dvh);overflow:hidden;overscroll-behavior:none}
/* 구매 내역·서재 진행 카드 */
.rec .more{margin-left:auto;font-family:"Plus Jakarta Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:12px;color:var(--acc);text-decoration:none;font-weight:700}.rec{display:flex;align-items:baseline}
.order{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px}.order .k{font-size:11px;color:var(--acc);background:var(--tint);border-radius:99px;padding:3px 8px;display:inline-block;margin-bottom:6px}.order b{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-weight:400;font-size:16px;display:block}.order .m{font-size:12px;color:var(--sub);margin-top:3px}.order .bar{height:6px;border-radius:99px;background:var(--line);margin:8px 0 6px;overflow:hidden}.order .bar i{display:block;height:100%;background:var(--acc)}.order .st{font-size:12.5px;color:var(--txt)}.order .btns{display:flex;gap:8px;margin-top:10px}.order .btns .ui-btn{flex:1;width:auto}
body{background:var(--bg);color:var(--txt);font-family:"Plus Jakarta Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;-webkit-font-smoothing:antialiased}
.phone{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;height:var(--frame-h,100dvh);overflow:hidden;display:flex;flex-direction:column;--tabbar-h:58px;--foot-h:0px}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(10px + env(safe-area-inset-top)) 16px calc(24px + var(--foot-h) + var(--tab-pad,0px))}
.phone.tabbed .scroll{padding-bottom:calc(var(--tabbar-h) + 24px + var(--tab-pad,0px))}
.hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:var(--ui-icon)}.hdr .t{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-size:22px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hdr .r{margin-left:auto}
h2{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-weight:400;font-size:24px;line-height:1.3;margin:0 0 6px}.sub{font-size:13.5px;color:var(--sub);line-height:1.5;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;height:var(--ui-tap);padding:0 12px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--sub);font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-size:14px;text-decoration:none;white-space:nowrap;cursor:pointer}.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}.chip.acc{background:var(--tint);border-color:var(--tint);color:var(--acc)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}.chips::-webkit-scrollbar{display:none}
.tag{display:inline-block;font-size:11px;color:var(--acc);background:var(--tint);border-radius:99px;padding:3px 8px;margin-right:4px;vertical-align:1px}.tag.ok{color:var(--teal);background:#e3f3f0}.tag.rec{color:#fff;background:var(--rose)}.tag.dim{color:var(--muted);background:#f1f0f6}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px}
.rec{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-size:15px;margin:14px 0 8px}.rec small{font-family:"Plus Jakarta Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:12px;color:var(--muted);margin-left:6px}
.ui-btn.p{background:var(--acc);color:#fff;width:100%}.ui-btn.s{background:#fff;border:1px solid var(--line);color:var(--txt);width:100%}.ui-btn.g{background:var(--gold);color:#fff;width:100%}.ui-btn.dis{opacity:.45;pointer-events:none}.ui-btn small{font-family:"Plus Jakarta Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:11px;opacity:.8}
.foot{position:absolute;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(transparent,var(--bg) 30%);padding:18px 16px calc(14px + var(--tab-pad, env(safe-area-inset-bottom,0px)));display:flex;flex-direction:column;gap:8px}.foot .two{display:flex;gap:8px}.foot .two .ui-btn{flex:1;width:auto}
.art{border-radius:10px;flex:0 0 auto;background:linear-gradient(160deg,#d9d2f2,#6b5bc4);position:relative;overflow:hidden}.art.romance{background:linear-gradient(160deg,#f3c1cf,#d76a8c)}.art.detective{background:linear-gradient(160deg,#b9c7dd,#3d4f6b)}.art.fantasy{background:linear-gradient(160deg,#b7e0d8,#3a9a8f)}.art.school{background:linear-gradient(160deg,#f7dca8,#d9902d)}.art.startup{background:linear-gradient(160deg,#cfd8ea,#4a86c5)}
.art i{position:absolute;left:0;right:0;bottom:0;padding:6px;font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-size:12px;color:#fff;font-style:normal;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* 이야기 카드(가게·서재 공용) */
.story{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;text-decoration:none;color:inherit}.story .art{width:74px;height:98px}.story .body{flex:1;min-width:0}.story b{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-weight:400;font-size:16px;display:block}.story .m{font-size:12px;color:var(--sub);margin:3px 0 6px;line-height:1.45}.story .act{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.story .act .pr{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-size:15px;color:var(--acc)}.story .act .pr.own{color:var(--teal)}.story .act .free{font-size:11.5px;color:var(--teal);border:1px solid var(--teal);border-radius:99px;padding:3px 8px}.story .act .buy{margin-left:auto;font-size:12.5px;color:#fff;background:var(--acc);border-radius:99px;padding:6px 12px;min-height:28px;display:inline-flex;align-items:center}
.bundle{background:linear-gradient(135deg,#2b2350,#4b3fa3);color:#fff;border-radius:16px;padding:14px;margin:4px 0 12px}.bundle b{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-weight:400;font-size:17px;display:block}.bundle span{font-size:12.5px;opacity:.9;display:block;margin-top:3px}.bundle .pr{margin-top:8px;display:flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-size:18px}.bundle .pr s{font-size:13px;opacity:.7;font-family:"Plus Jakarta Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif}.bundle .pr i{font-style:normal;font-size:11px;background:var(--gold);color:#fff;border-radius:99px;padding:2px 8px}.bundle .ui-btn{margin-top:10px;background:#fff;color:var(--acc)}.bundle.own{background:linear-gradient(135deg,#1f4d47,#3a9a8f)}
/* 하단 바(홈·이야기·어휘·구조) — vocab-tab 의 .tabbar 와 같은 치수 */
.l9tab{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;padding:7px 6px calc(6px + var(--tab-pad, env(safe-area-inset-bottom,0px)));background:#fff;border-top:1px solid var(--line)}
.l9tab a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#9aa0bd;font-size:11px;font-weight:700}.l9tab a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.l9tab a.on{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:#17142a;color:#fff;border-radius:12px;padding:10px 16px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:80;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%)}
/* 결제 시트 */
.sheet-bg{position:fixed;inset:0;background:rgba(23,20,42,.45);z-index:70;opacity:0;pointer-events:none;transition:.25s}.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:#fff;border-radius:22px 22px 0 0;padding:14px 18px calc(18px + var(--tab-pad, env(safe-area-inset-bottom,0px)));transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.sheet.on{transform:none}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}.sheet h2{font-size:22px}.sheet p{font-size:13.5px;color:var(--sub);line-height:1.5;margin:0 0 12px}
.sheet .line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px}.sheet .line b{font-family:"Plus Jakarta Sans","Do Hyeon",sans-serif;font-weight:400;font-size:18px;color:var(--acc)}.sheet .btns{display:flex;flex-direction:column;gap:8px;margin-top:12px}.sheet .test{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px}