/* 새벽 공부 마켓 화면 꾸밈 — '새벽 책상 플래너' (2026-10-27 지시서 015)
   해 뜨기 전 조용한 책상, 공부 계획표. 새벽 하늘 연보라 → 따뜻한 미색 바탕, 새벽 보라 주색, 햇살색은 아주 조금만.
   글꼴은 가게 안(static/fonts)의 IBM Plex Sans KR 하나(사용 허가 문서: IBMPlexSansKR-LICENSE.txt). 바깥 주소 글꼴 없음. */
@font-face { font-family: 'PlexKR'; font-weight: 400; font-display: swap; src: url('/static/fonts/PlexKR.woff2') format('woff2'); }
@font-face { font-family: 'PlexKR'; font-weight: 500 800; font-display: swap; src: url('/static/fonts/PlexKR-SemiBold.woff2') format('woff2'); }
:root {
  --bg: #FBF7F0; --outer: #E4E2EF; --surface: #FFFFFF; --surface2: #F3F1FB;
  --text: #2D2844; --sub: #6E6A85; --line: #E4E2EF;
  --dawn: #5B50D6; --dawn-deep: #4A40C0; --dawn-soft: #EEF0FB; --sun: #FFB56B;
  --point: #5B50D6; --point-deep: #5B50D6; --on-point: #FFFFFF; --primary: #5B50D6; --on-primary: #FFFFFF;
  --accent: #5B50D6; --logo-drop: #5B50D6;
  --r-card: 16px; --r-btn: 12px; --r-chip: 999px; --r-thumb: 12px; --r-input: 12px; --r-badge: 999px;
  --font: 'PlexKR', 'Malgun Gothic', sans-serif;
  --font-head: 'PlexKR', 'Malgun Gothic', sans-serif; --head-weight: 600;
  --shadow: 0 2px 12px rgba(45, 40, 68, .06);
  --btn-h: 52px;
  --chip-on: #5B50D6; --chip-on-text: #FFFFFF;
  --notice-bg: #EEF0FB; --notice-text: #2D2844;
  --top-bg: rgba(255, 255, 255, .88); --top-line: #E4E2EF; --brand-text: #2D2844;
  --coupon-bg: #5B50D6; --coupon-text: #FFFFFF;
  --side-bg: #2D2844; --side-text: #E4E2EF; --side-on-bg: #5B50D6; --side-on-text: #FFFFFF; --bar: #E4E2EF;
  --total: #5B50D6;
  --tab-bg: #FFFFFF; --tab-on: #FFFFFF; --tab-on-icon: #FFFFFF;
}
html body { font-family: var(--font); color: var(--text); font-variant-numeric: tabular-nums; background: #FBF7F0; }
html body #app.shop { background: linear-gradient(180deg, #EEF0FB 0, #FBF7F0 560px) no-repeat, #FBF7F0; padding-bottom: 96px; }
h1, h2, h3, .detail-name, .sec-title { font-family: var(--font-head); font-weight: 600; }
.btn { font-weight: 600; border-radius: 12px; }
.btn-primary { background: #5B50D6; color: #fff; }
.btn-primary:active, .btn-primary:hover { background: #4A40C0; filter: none; }
.btn-ghost { background: #fff; color: #2D2844; border: 1.5px solid #E4E2EF; }
.btn-bag { color: #5B50D6; border-color: #5B50D6; }
.toast { background: #2D2844; color: #fff; border-radius: 12px; }
input, select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #5B50D6; outline-offset: 1px; border-color: #5B50D6; }
input[type=checkbox], input[type=radio] { accent-color: #5B50D6; }
.notice-bar { background: #EEF0FB; color: #2D2844; font-weight: 500; }

/* 머리줄: 흰 반투명 · 왼쪽 로고 · 오른쪽 가방 */
html body .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 12px 0 16px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #E4E2EF; color: #2D2844; }
html body .top:has(> .icon-btn:first-child) { padding-left: 4px; }
.top .icon-btn { color: #2D2844; }
.top-title { flex: 1; margin: 0; font-size: 17px; font-weight: 600; text-align: left; color: #2D2844; }
.top-right { margin-left: auto; display: flex; }
.top .bag-btn { position: relative; }
.top .bag-btn .dot, .tabbar .dot { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #5B50D6; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: #2D2844; }
.brand b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.logo-sun { display: inline-flex; align-items: center; gap: 8px; color: #2D2844; }
.logo-sun b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sun-mark { width: 34px; height: 21px; flex: none; }
.side .logo-sun, .chat-head .logo-sun { color: #fff; }
.side .logo-sun b { color: #fff; }

/* 첫 화면: 새벽 시계 + 슬로건 */
.hero { background: transparent; color: #2D2844; padding: 0; }
.dawn-hero { padding: 30px 20px 26px; }
.clock { margin: 0; font-size: 84px; line-height: 1; font-weight: 400; letter-spacing: -2px; color: #5B50D6; }
.clock .colon { display: inline-block; animation: colonBlink 1.6s steps(1, end) infinite; position: relative; top: -4px; }
.clock-sun { display: inline-block; width: 14px; height: 14px; margin-left: 8px; border-radius: 50%; background: #FFB56B; vertical-align: top; position: relative; top: 8px; }
.dawn-hero .hero-h { margin: 14px 0 8px; font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: #2D2844; }
.dawn-hero .hero-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #6E6A85; }
.dawn-hero .hero-btn { height: 46px; padding: 0 22px; border-radius: 12px; background: #5B50D6; color: #fff; font-size: 15px; }
.dawn-hero .hero-btn:active { background: #4A40C0; }
.dawn-bar { height: 4px; margin: 22px 0 0; border-radius: 999px; background: #E4E2EF; position: relative; overflow: visible; }
.dawn-bar i { position: absolute; left: 0; top: 0; height: 100%; width: 38%; border-radius: 999px; background: #5B50D6; }
.dawn-bar i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #FFB56B; }
@keyframes colonBlink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .clock .colon { animation: none; } }

/* 섹션 제목 */
.sec-title { font-size: 18px; letter-spacing: -.01em; }
.sec-head a { font-size: 13px; color: #5B50D6; font-weight: 500; }

/* 상품 목록: 공부 계획표 같은 가로 한 줄 카드 */
.plist-rows { display: block; }
.prow { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; margin: 0 0 10px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
.prow-img { display: block; }
.prow .thumb.sm, .plist-rows .prow-img .thumb.sm { --tw: 84px; width: 84px; height: 84px; aspect-ratio: 1; border-radius: 12px; }
.prow-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prow .pcard-name { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pill-period { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #EEF0FB; color: #5B50D6; font-size: 12px; font-weight: 500; }
.prow .price strong { font-size: 16px; font-weight: 600; }
.prow-buy { display: none; }
.price-off, .prow .price-off { color: #FFB56B; font-size: 12px; font-weight: 600; background: none; padding: 0; margin-right: 4px; }
.price del { color: #8F8CA3; font-size: 12px; }
.price strong { font-weight: 600; }
.badge { border-radius: 999px; background: #EEF0FB; color: #5B50D6; }

/* 사진 없는 상품 그림 */
.thumb { background: linear-gradient(150deg, #EEF0FB, #F3E8E4); color: #2D2844; border-radius: 12px; }
.thumb-brand { font-weight: 600; letter-spacing: 0; color: #5B50D6; white-space: nowrap; }
.thumb.sm .thumb-brand { display: none; }
.thumb-big { font-weight: 600; }
.thumb-sold { background: rgba(45, 40, 68, .55); }
.thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 아래 탭: 떠 있는 흰 알약 4칸 */
html body .tabbar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: calc(100% - 24px); max-width: 456px; height: 60px; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #fff; border: 1px solid #E4E2EF; border-radius: 999px; box-shadow: 0 6px 24px rgba(45, 40, 68, .14); z-index: 30; }
html body .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 999px; color: #6E6A85; font-size: 11.5px; font-weight: 500; }
html body .tabbar .ico { width: 20px; height: 20px; }
html body .tabbar a.on { background: #5B50D6; color: #fff; }
html body .tabbar a.on .ico { color: #fff; }
.tabbar a em { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #FFB56B; color: #2D2844; font-style: normal; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* 상담 단추: 오른쪽 아래 둥근 보라 단추 */
html body #chat .chat-fab { right: max(16px, calc(50vw - 240px + 16px)); bottom: calc(86px + env(safe-area-inset-bottom)); width: 52px; height: 52px; background: #5B50D6; color: #fff; box-shadow: 0 6px 18px rgba(91, 80, 214, .35); }
html body:has(.buybar) #chat .chat-fab { bottom: calc(92px + env(safe-area-inset-bottom)); }
html body #chat .chat-dot { background: #FFB56B; color: #2D2844; }

/* 상담 창: 흰 카드, 내 말 보라, 가게 말 연보라 */
html body .chat-win { background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(45, 40, 68, .18); }
html body .chat-head { background: #fff; color: #2D2844; border-bottom: 1px solid #E4E2EF; }
html body .chat-head .chat-x { color: #2D2844; }
html body .chat-body { background: #FBF7F0; }
html body .cm-customer .cm-bubble { background: #5B50D6; color: #fff; border-bottom-right-radius: 6px; }
html body .cm-admin .cm-bubble, html body .cm-system .cm-bubble { background: #EEF0FB; color: #2D2844; border-bottom-left-radius: 6px; }
html body .chat-send, html body .chat-go { background: #5B50D6; color: #fff; border-color: transparent; }
html body .chat-composer { background: #fff; border-top: 1px solid #E4E2EF; }

/* 상품 화면 '오늘의 플래너 한 장' (2026-10-27 지시서 016): 그림 카드 + 겹친 가격 딱지 · 이름 블록 · 받는 순서 타임라인 · 쿠폰 · 가로 넘기는 기간 카드 · 몇 명 알약 · 알약 전환 탭 · 접는 정보 카드 · 아래 둥근 가방 단추 */
.pd3-card { position: relative; margin: 12px 16px 28px; }
.pd3-pic .thumb.lg { width: 100%; border-radius: 20px; overflow: hidden; --tw: 360px; box-shadow: 0 4px 18px rgba(45, 40, 68, .1); }
.pd3-pic .thumb-img img { border-radius: 20px; }
.pd3-share { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #2D2844; box-shadow: 0 2px 10px rgba(45, 40, 68, .18); display: inline-flex; align-items: center; justify-content: center; }
.pd3-tag { position: absolute; left: 12px; bottom: -20px; padding: 8px 16px; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(45, 40, 68, .16); }
.pd3-tag .price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pd3-tag .price-off { color: #FFB56B; font-size: 14px; font-weight: 700; background: none; padding: 0; margin: 0; }
.pd3-tag .price strong { font-size: 22px; font-weight: 700; }
.pd3-tag .price del, .pd3-tag .vat { display: none; }
.pd3-info { padding: 14px 20px 4px; }
.pd3-kicker { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: #5B50D6; }
.pd3-name { margin: 0 0 8px; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
.pd3-marks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; color: #6E6A85; }
.pd3-marks li::before { content: "•"; margin-right: 5px; color: #5B50D6; }
.pd3-marks .gray::before { color: #8F8CA3; }
.pd3-list { margin: 0 0 6px; font-size: 13px; color: #8F8CA3; }
.pd3-meta { margin: 0 0 6px; font-size: 13px; color: #6E6A85; }
.pd3-meta .ico { width: 14px; height: 14px; color: #FFB56B; fill: #FFB56B; vertical-align: -2px; }
.pd3-summary { margin: 8px 0 14px; font-size: 14px; line-height: 1.6; color: #6E6A85; }
.pd3-flow { position: relative; margin: 16px 0 14px; padding: 0; list-style: none; }
.pd3-flow li { position: relative; padding: 0 0 16px 30px; }
.pd3-flow li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #5B50D6; background: #fff; box-sizing: border-box; }
.pd3-flow li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 2px; width: 2px; background: #C9C7DA; }
.pd3-flow li:last-child { padding-bottom: 0; }
.pd3-flow li:last-child::after { display: none; }
.pd3-flow b { display: block; font-size: 14.5px; font-weight: 600; }
.pd3-flow span { font-size: 13px; color: #6E6A85; }
.pd2-coupon { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 10px 12px 10px 18px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); font-size: 13.5px; }
.pd2-coupon::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #FFB56B; }
.pd2-cp-label { color: #6E6A85; white-space: nowrap; }
.pd2-coupon strong { color: #5B50D6; font-weight: 600; white-space: nowrap; }
.pd2-cp-help { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #EEF0FB; color: #6E6A85; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.pd2-cp-btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: #5B50D6; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pd2-cp-btn .ico { width: 16px; height: 16px; flex: none; }
.pd2-cp-btn.done { background: #EEF0FB; color: #5B50D6; }
.opt-sec { padding: 6px 0 8px; }
.opt-sec .sec-title { margin: 0 20px 10px; }
html body .opts { display: flex; gap: 10px; overflow-x: auto; padding: 4px 20px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
html body .opts .opt { position: relative; flex: 0 0 120px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 150px; padding: 18px 8px 14px; border-radius: 18px; background: #fff; border: 1.5px solid #D9D6F0; color: #2D2844; text-align: center; box-shadow: none; }
.opt-big { font-size: 44px; line-height: 1; font-weight: 400; letter-spacing: -1px; color: #5B50D6; }
.opt-unit { font-size: 13px; color: #6E6A85; }
.opt-word { padding: 14px 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.opt-line { width: 60%; height: 1px; margin: 10px 0 8px; background: #E4E2EF; }
html body .opts .opt .opt-price { font-size: 13px; font-weight: 600; white-space: nowrap; }
html body .opts .opt .opt-off { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: #FFB56B; background: none; padding: 0; border-radius: 0; }
.opt-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: #FFB56B; color: #2D2844; display: none; align-items: center; justify-content: center; }
.opt-check .ico { width: 12px; height: 12px; }
html body .opts .opt.on, html body .opts .opt:has(input:checked) { background: #5B50D6; border-color: #5B50D6; color: #fff; box-shadow: 0 4px 14px rgba(91, 80, 214, .3); }
.opt.on .opt-big, .opt.on .opt-unit, .opt:has(input:checked) .opt-big, .opt:has(input:checked) .opt-unit { color: #fff; }
.opt.on .opt-line, .opt:has(input:checked) .opt-line { background: rgba(255, 255, 255, .4); }
.opt.on .opt-check, .opt:has(input:checked) .opt-check { display: flex; }
.opt.off { opacity: .45; }
.pd3-qty { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0; }
.pd3-qty .qty-label { font-size: 15px; font-weight: 600; }
html body .pd3-step { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px; border: 0; border-radius: 999px; background: #EEF0FB; }
html body .pd3-step button { width: 36px; height: 36px; border-radius: 50%; background: #5B50D6; color: #fff; display: flex; align-items: center; justify-content: center; }
html body .pd3-step button:disabled { background: #C9C7DA; }
html body .pd3-step span { min-width: 36px; text-align: center; font-size: 22px; font-weight: 600; }
.pd3-step .ico { width: 16px; height: 16px; }
.pd3-qty-note { margin: 4px 20px 0; font-size: 12px; color: #8F8CA3; text-align: right; }
.pd3-tabwrap { position: sticky; top: 58px; z-index: 10; margin-top: 12px; padding: 10px 16px 8px; background: linear-gradient(180deg, #FBF7F0 72%, rgba(251, 247, 240, 0)); }
html body .pd3-tabs { position: static; display: flex; gap: 0; padding: 4px; border: 0; border-radius: 999px; background: #EEF0FB; }
html body .pd3-tabs button { flex: 1; height: 40px; border: 0; border-radius: 999px; background: transparent; color: #6E6A85; font-size: 14px; font-weight: 600; }
html body .pd3-tabs button.on { background: #fff; color: #5B50D6; box-shadow: 0 2px 8px rgba(45, 40, 68, .1); }
.desc-html { margin: 0 16px; border-radius: 16px; overflow: hidden; }
.pd3-more { margin: 12px 16px 0; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
.pd3-more summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 14.5px; font-weight: 600; list-style: none; cursor: pointer; }
.pd3-more summary::-webkit-details-marker { display: none; }
.pd3-more summary .ico { width: 20px; height: 20px; color: #5B50D6; flex: none; }
.pd3-more summary .ico:last-child { margin-left: auto; color: #6E6A85; transition: transform .2s; }
.pd3-more[open] summary .ico:last-child { transform: rotate(180deg); }
.pd3-kv { margin: 0; padding: 0 16px 8px; list-style: none; }
.pd3-kv li { padding: 10px 0; border-top: 1px solid #E4E2EF; }
.pd3-kv small { display: block; font-size: 12px; color: #6E6A85; }
.pd3-kv span { font-size: 14px; line-height: 1.5; }
.pd3-refund { padding: 0 16px 16px; }
html body .pd3-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid #E4E2EF; box-shadow: 0 -4px 16px rgba(45, 40, 68, .06); }
.bag-circle { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid #5B50D6; color: #5B50D6; display: flex; align-items: center; justify-content: center; }
.bag-circle .ico { width: 24px; height: 24px; }
.bag-dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #FFB56B; border: 2px solid #fff; }
html body .pd3-go { flex: 1; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.15; border-radius: 14px; }
.pd3-go small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.pd3-go b { font-size: 18px; font-weight: 700; }

/* 가방(장바구니): 체크리스트 줄 + 합계 카드 */
.cart .citem { grid-template-columns: 28px 64px 1fr 32px; position: relative; }
.cart .citem.no-check { grid-template-columns: 28px 64px 1fr 32px; }
.citem::before { content: ""; grid-column: 1; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #5B50D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cart-note { background: #EEF0FB; color: #2D2844; border-radius: 12px; }
.summary { background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
.summary > div { border-bottom: 1px solid #E4E2EF; }
.summary > div:last-child { border-bottom: 0; }
.summary .total strong { color: #5B50D6; font-weight: 600; }
.summary .minus { color: #5B50D6; }

/* 주문·결제: 오늘 할 일 체크리스트 + 진행 막대 */
.progress { display: flex; gap: 8px; margin: 6px 0 18px; }
.progress span { position: relative; flex: 1; padding: 22px 0 0; border: 0; background: none; text-align: left; font-size: 12.5px; font-weight: 500; color: #6E6A85; }
.progress span::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C9C7DA; background: #fff; box-sizing: border-box; }
.progress span::after { content: ""; position: absolute; left: 22px; right: 4px; top: 7px; height: 2px; border-radius: 2px; background: #E4E2EF; }
.progress span.on { color: #2D2844; }
.progress span.on::before { border-color: #5B50D6; background: #5B50D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.progress span.on::after { background: #5B50D6; }
.progress span.on + span:not(.on)::before { box-shadow: 0 0 0 3px rgba(255, 181, 107, .45); border-color: #FFB56B; }
.box { background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
.box-title .ico { color: #5B50D6; }
.box-title em { color: #5B50D6; border-color: #5B50D6; border-radius: 999px; }
.agree label { border-radius: 12px; }
.sheet { border-radius: 24px 24px 0 0; background: #fff; }
.sheet-email { background: #EEF0FB; border-radius: 12px; }
.sheet-order dt { color: #6E6A85; }
.join-offer, .join-how, .join-gift { background: #EEF0FB; border: 1px solid #E4E2EF; border-radius: 16px; }
.typo-tip { background: #F3F1FB; border-radius: 12px; }

/* 완료·주문 확인: 둥근 카드 + 큰 체크 */
.done-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); padding: 30px 20px 24px; }
.done-card > .ico { width: 64px; height: 64px; padding: 16px; background: #5B50D6; color: #fff; }
.done-card.fail > .ico { background: #EEF0FB; color: #5B50D6; }
.done-card.refunded > .ico, .done-card.canceled > .ico { background: #E4E2EF; color: #6E6A85; }
.pill { border-radius: 999px; }

/* 환불 안내 */
.rf-step.ok { background: #EEF0FB; color: #5B50D6; }
.rf-step.no { background: #F3F1FB; color: #2D2844; }
.flow-ico { background: #EEF0FB; color: #5B50D6; border-radius: 12px; }
.flow-tip { border-radius: 16px; background: #fff; }

/* 바닥글 '하루를 마치는 페이지' (2026-10-27 지시서 016): 지평선 · 마무리 한 줄 · 문의 카드 · 사업자 정보 2열 타일 · 약관 알약 · 해 + © */
html body .foot2.foot-soft { margin-top: 28px; padding: 0 0 118px; border: 0; background: linear-gradient(0deg, #EEF0FB 0, #FBF7F0 72%); color: #2D2844; box-shadow: 0 160px 0 #EEF0FB; }  /* 바닥 아래 여백까지 같은 연보라로 이어 이음선이 안 보이게 */
.ft-horizon { display: block; width: 100%; height: 22px; }
.ft-done { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 18px; font-size: 15px; font-weight: 600; text-align: center; }
.ft-done .sun-mark { width: 38px; height: 24px; }
.ft-help { display: flex; align-items: center; gap: 12px; margin: 0 16px 22px; padding: 14px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
.ft-help-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #5B50D6; color: #fff; display: flex; align-items: center; justify-content: center; }
.ft-help-ico .ico { width: 22px; height: 22px; }
.ft-help-text { flex: 1; min-width: 0; }
.ft-help-text b { display: block; font-size: 14px; font-weight: 600; }
.ft-cs { margin-top: 2px; }
.ft-hours { margin: 0; font-size: 13px; color: #2D2844; }
.ft-mail { display: block; font-size: 12px; color: #6E6A85; word-break: break-all; }
.ft-ask { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #5B50D6; color: #fff; font-size: 13.5px; font-weight: 600; }
body:not(:has(#chat)) .ft-ask { display: none; }
html body .foot2.foot-soft .ft-h { margin: 0 16px 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #2D2844; }
.ft-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 16px 22px; min-height: 180px; }
.ft-tiles .tile { min-width: 0; padding: 10px 12px; background: #EEF0FB; border-radius: 14px; }
.ft-tiles .tile.wide { grid-column: 1 / -1; }
.ft-tiles .tile small { display: block; font-size: 11.5px; color: #6E6A85; }
.ft-tiles .tile b { display: block; font-size: 13.5px; font-weight: 500; color: #2D2844; word-break: break-all; }
.ft-tiles .ft-biz { display: inline-block; margin-top: 4px; font-size: 11.5px; color: #5B50D6; text-decoration: underline; }
html body .foot2.foot-soft .ft-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 16px 22px; }
html body .foot2.foot-soft .ft-links a, html body .foot2.foot-soft .ft-links a + a { margin: 0; padding: 9px 16px; border: 1.5px solid #5B50D6; border-radius: 999px; background: #fff; color: #5B50D6; font-size: 13px; font-weight: 500; }
.foot2.foot-soft .ft-links b { font-weight: 700; }
html body .foot2.foot-soft .ft-copy { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; font-size: 12px; color: #6E6A85; }
.ft-copy .sun-mark { width: 22px; height: 14px; }

/* 진행 막대: 알약 바탕이 아니라 둥근 체크 동그라미 + 가는 막대로(공용 모양 파일의 칸 바탕을 지운다) */
html body .progress span, html body .progress span.on { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 22px 0 0; text-align: left; }
html body .progress span.on { color: #2D2844; }
html body .cart .citem, html body .cart .citem.no-check { grid-template-columns: 28px 64px minmax(0, 1fr) 32px; }
html body .citem-body { min-width: 0; }

/* ==========================================================================
   2026-10-27 지시서 017: 숨은 화면(가방·주문서·완료·주문함·빈 화면·오류·상담·메일 틀)을
   다른 가게들과 겹치지 않는 '새벽 책상' 모양으로 새로 꾸밈. 점선은 쓰지 않음.
   ========================================================================== */

/* ---- 주문서: 번호 동그라미가 이어진 단계 표시 + 칸 제목 앞 번호 */
html body .ck-steps { display: flex; justify-content: space-between; margin: 4px 4px 16px; padding: 0; list-style: none; counter-reset: none; }
html body .ck-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #8F8CA3; text-align: center; }
html body .ck-steps li::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #D9D6F0; }
html body .ck-steps li:last-child::after { display: none; }
html body .ck-steps li.on::after { background: #5B50D6; }
html body .ck-steps li:nth-child(2)::after { background: #D9D6F0; }
html body .ck-steps i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 700; background: #fff; color: #8F8CA3; border: 2px solid #D9D6F0; box-sizing: border-box; }
html body .ck-steps li.on i { background: #5B50D6; color: #fff; border-color: #5B50D6; }
html body .ck-steps li.on { color: #2D2844; }
html body #orderForm { counter-reset: ckn; }
html body #orderForm .box-title { counter-increment: ckn; }
html body #orderForm .box-title .ico { display: none; }
html body #orderForm .box-title::before { content: counter(ckn); flex: none; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: #EEF0FB; color: #5B50D6; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
html body #orderForm .box-title { display: flex; align-items: center; }
html body #orderForm .box-title em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: #5B50D6; background: #EEF0FB; border-radius: 999px; padding: 2px 9px; }

/* ---- 결제 전 확인 창: 오늘 할 일 확인 카드 */
html body .ck-card h2 { margin: 4px 0 14px; font-size: 18px; font-weight: 700; text-align: left; }
html body .ck-list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
html body .ck-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #EEF0FB; border-radius: 14px; }
html body .ck-list li > i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #5B50D6; color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
html body .ck-list li > i .ico { width: 14px; height: 14px; }
html body .ck-list small { display: block; font-size: 12px; color: #6E6A85; margin-bottom: 2px; }
html body .ck-list b { display: block; font-size: 15px; font-weight: 600; line-height: 1.45; word-break: break-all; color: #2D2844; }
html body .ck-list span { display: block; margin-top: 3px; font-size: 12.5px; color: #6E6A85; }
html body .ck-card .sheet-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }

/* ---- 빈 화면(공책 + 연필) · 오류 화면(해 진 하늘) */
html body .empty3 { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 28px 16px; padding: 28px 18px; background: #fff; border-radius: 20px; text-align: center; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
html body .empty3 h2 { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
html body .empty3 p { margin: 0 0 6px; font-size: 14px; color: #6E6A85; }
html body .empty3.small { margin: 8px 0; padding: 14px; }
html body .empty3.small .art3 { width: 84px; }
html body .art3 { width: 132px; height: auto; display: block; }
html body .err3-card { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 24px 4px; padding: 22px 18px 26px; background: #fff; border-radius: 22px; text-align: center; box-shadow: 0 4px 18px rgba(45, 40, 68, .08); }
html body .err3-card .art3.dusk { width: 100%; max-width: 280px; }
html body .err3-card h2 { margin: 6px 0 0; font-size: 18px; font-weight: 700; line-height: 1.5; color: #2D2844; }
html body .err3-card .err3-sub { margin: 0; font-size: 14px; color: #6E6A85; }
html body .err3-card .btn { margin-top: 6px; }

/* ---- 가방: 담은 것 머리줄 + 결제 전 계산서 */
html body .c3-head { display: flex; align-items: center; gap: 8px; margin: 14px 4px 8px; font-size: 15px; font-weight: 700; }
html body .c3-head em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #5B50D6; border-radius: 999px; padding: 1px 9px; }
html body .sum3 { margin: 14px 0 0; padding: 16px 16px 14px; background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
html body .sum3 h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #6E6A85; }
html body .s3-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid #EEF0FB; }
html body .s3-row small { color: #8F8CA3; }
html body .s3-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; font-size: 14px; font-weight: 600; }
html body .s3-total strong { font-size: 22px; font-weight: 700; color: #5B50D6; }
html body .s3-total small { font-weight: 400; color: #8F8CA3; }

/* ---- 결제 뒤 화면: 확인 도장 카드 + 이제 할 일 */
html body .stamp-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px 22px; background: #fff; border-radius: 22px; text-align: center; box-shadow: 0 4px 18px rgba(45, 40, 68, .08); }
html body .stamp-card .ico { display: none; }
html body .stamp { position: relative; width: 88px; height: 88px; border-radius: 50%; background: #5B50D6; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transform: rotate(-7deg); box-shadow: 0 0 0 5px #fff, 0 0 0 7px #5B50D6; margin-bottom: 8px; }
html body .stamp svg { width: 30px; height: 30px; display: block; }
html body .stamp em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
html body .stamp-card.fail .stamp { background: #FFB56B; color: #2D2844; box-shadow: 0 0 0 5px #fff, 0 0 0 7px #FFB56B; }
html body .stamp-card.refunded .stamp, html body .stamp-card.canceled .stamp, html body .stamp-card.canceling .stamp { background: #8F8CA3; box-shadow: 0 0 0 5px #fff, 0 0 0 7px #8F8CA3; }
html body .stamp-card.pending .stamp { background: #EEF0FB; color: #5B50D6; box-shadow: 0 0 0 5px #fff, 0 0 0 7px #C9C7DA; }
html body .stamp-time { margin: 0; font-size: 12.5px; color: #8F8CA3; letter-spacing: .3px; }
html body .stamp-card h2 { margin: 4px 0 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: #2D2844; }
html body .stamp-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #6E6A85; }
html body .todo3 .todo-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
html body .todo-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
html body .todo-list li i { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; border: 2px solid #5B50D6; box-sizing: border-box; }
html body .todo-list a { color: #5B50D6; font-weight: 600; word-break: break-all; }

/* ---- 주문 카드·주문 상세: 세로 타임라인 */
html body .ord-line { position: relative; margin: 14px 0 10px; padding: 0; list-style: none; }
html body .ord-line li { position: relative; padding: 0 0 14px 28px; min-height: 18px; }
html body .ord-line li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #D9D6F0; background: #fff; box-sizing: border-box; }
html body .ord-line li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 2px; width: 2px; background: #E4E2EF; }
html body .ord-line li:last-child { padding-bottom: 0; }
html body .ord-line li:last-child::after { display: none; }
html body .ord-line li.on::before { border-color: #5B50D6; background: #5B50D6; }
html body .ord-line li.on::after { background: #5B50D6; }
html body .ord-line li.on:last-child::before { box-shadow: 0 0 0 4px rgba(91, 80, 214, .18); }
html body .ord-line li.end.on::before { border-color: #8F8CA3; background: #8F8CA3; box-shadow: none; }
html body .ord-line li.warn::before { border-color: #FFB56B; background: #FFB56B; }
html body .ord-line b { display: block; font-size: 14px; font-weight: 600; color: #8F8CA3; }
html body .ord-line li.on b, html body .ord-line li.warn b { color: #2D2844; }
html body .ord-line small { display: block; font-size: 12px; color: #8F8CA3; }
html body .ord-card .my-order-top { align-items: center; }

/* ---- 상담 창: '공부 도우미' 카드(떠 있는 둥근 창 · 보라 머리 · 해 아바타) */
html body .chat-win { left: 10px; right: 10px; bottom: 10px; top: auto; height: min(560px, calc(100vh - 80px)); border-radius: 26px; background: #fff; box-shadow: 0 10px 40px rgba(45, 40, 68, .28); }
html body .chat-head { background: linear-gradient(135deg, #5B50D6, #7A70EA); color: #fff; border-bottom: 0; padding: 16px 16px 18px; border-radius: 26px 26px 0 0; }
html body .chat-head .chat-logo { display: flex; align-items: center; gap: 10px; }
html body .chat-head .chat-logo .sun-mark { width: 38px; height: 38px; padding: 7px 5px; box-sizing: border-box; border-radius: 50%; background: #fff; }
html body .chat-head .chat-logo b { font-size: 16px; font-weight: 700; color: #fff; }
html body .chat-head small { margin: 4px 0 0 48px; color: rgba(255, 255, 255, .85); opacity: 1; }
html body .chat-head .chat-x { color: #fff; background: rgba(255, 255, 255, .18); }
html body .chat-body { background: #FBF7F0; padding: 16px 14px; }
html body .chat-hello { background: #fff; border-radius: 4px 18px 18px 18px; border-left: 4px solid #FFB56B; box-shadow: 0 2px 10px rgba(45, 40, 68, .06); }
html body .chat-faq { grid-template-columns: 1fr; gap: 8px; }
html body .chat-faq button { justify-content: flex-start; text-align: left; border: 0; background: #EEF0FB; color: #5B50D6; border-radius: 999px; padding: 10px 16px; font-weight: 600; }
html body .chat-go { border-radius: 999px; }
html body .chat-form { border-radius: 18px; box-shadow: 0 2px 10px rgba(45, 40, 68, .06); }
html body .cm-customer .cm-bubble { border-radius: 18px 18px 4px 18px; }
html body .cm-admin .cm-bubble { background: #fff; border: 0; border-left: 4px solid #FFB56B; border-radius: 4px 18px 18px 18px; box-shadow: 0 2px 8px rgba(45, 40, 68, .06); }
html body .cm-system .cm-bubble { background: transparent; color: #8F8CA3; }
html body .chat-composer { border-top: 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(45, 40, 68, .05); }
html body .chat-composer textarea { border-radius: 999px; background: #EEF0FB; border-color: transparent; padding: 10px 16px; }
@media (min-width: 700px) { html body .chat-win { left: auto; right: 24px; bottom: 24px; width: 380px; height: min(600px, calc(100vh - 48px)); } }
html body .ck-list li div { flex: 1; min-width: 0; text-align: left; }
html body .art3.dusk { border-radius: 18px; overflow: hidden; }
html body .ck-card .sheet-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); box-sizing: border-box; }
html body .ck-card .sheet-btns .btn { min-width: 0; padding-left: 8px; padding-right: 8px; }

/* 2026-10-27 감독 검수: 가운데 안내 줄(p.hint.center) 안의 링크가 따로 칸으로 갈라지던 것 — 한 문장으로 흐르게 */
p.hint.center { display: block; }

/* 2026-10-27 대표님 요청: 환불 안내 새 짜임(다른 가게와 겹치지 않게) — 하루 시간표 막대 + 번호 규칙 노트 2×2 + 한 줄 바로가기 */
.sb-rf { display: flex; flex-direction: column; gap: 14px; }
.sb-rf-cap { margin: 0; font-size: 13px; color: var(--sub); }
.sb-rf-bar { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 999px; overflow: visible; height: 64px; }
.sb-rf-bar > div:not(.sb-rf-sun) { display: flex; flex-direction: column; justify-content: center; padding: 0 22px; }
.sb-rf-am { background: linear-gradient(90deg, #5B50D6, #7A70E6); color: #fff; border-radius: 999px 0 0 999px; }
.sb-rf-pm { background: #ECEAF6; color: #2D2844; border-radius: 0 999px 999px 0; text-align: right; align-items: flex-end; }
.sb-rf-bar small { font-size: 11px; font-weight: 600; opacity: .85; }
.sb-rf-bar b { font-size: 14.5px; font-weight: 600; }
.sb-rf-sun { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb-rf-sun svg { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(45, 40, 68, .15); box-sizing: content-box; }
.sb-rf-sun svg circle { fill: #FFB56B; }
.sb-rf-sun em { position: absolute; top: 46px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #5B50D6; white-space: nowrap; }
.sb-rf-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-rf-notes li { background: #fff; border: 1px solid #E4E2EF; border-radius: 16px; padding: 14px 14px 12px; }
.sb-rf-notes i { display: block; font-style: normal; font-size: 20px; font-weight: 600; color: #FFB56B; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 8px; }
.sb-rf-notes b { display: block; font-size: 14px; font-weight: 600; color: #2D2844; }
.sb-rf-notes p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #6E6A85; }
.sb-rf-go { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #5B50D6; color: #fff; text-decoration: none; }
.sb-rf-go span { flex: 1; display: flex; flex-direction: column; font-size: 12.5px; opacity: .95; }
.sb-rf-go b { font-size: 14.5px; font-weight: 600; }
.sb-rf-go svg { width: 18px; height: 18px; stroke: #fff; flex: none; }
.sb-rf-all { align-self: center; padding: 8px 16px; border-radius: 999px; border: 1px solid #5B50D6; color: #5B50D6; font-size: 13px; font-weight: 600; text-decoration: none; }
@media (max-width: 340px) { .sb-rf-notes { grid-template-columns: 1fr; } }

/* 2026-10-27 대표님 요청: 주문서 메일 주소 주의 상자 새 짜임 — 세 칸 '주소 점검 노트'(테두리 상자·경고 삼각형 쓰지 않음) */
.sb-mailcheck { margin-top: 10px; padding: 12px 14px 14px; border-radius: 16px; background: linear-gradient(180deg, #F4F3FC, #FBF7F0); }
.sb-mc-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: #2D2844; }
.sb-mc-dot { width: 10px; height: 10px; border-radius: 50%; background: #FFB56B; box-shadow: 0 0 0 4px rgba(255, 181, 107, .25); flex: none; }
.sb-mc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sb-mc-steps li { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(45, 40, 68, .05); }
.sb-mc-steps i { width: 22px; height: 22px; border-radius: 50%; background: #5B50D6; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sb-mc-steps span { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; line-height: 1.45; color: #6E6A85; }
.sb-mc-steps b { font-size: 13px; font-weight: 600; color: #2D2844; }
.sb-mc-steps em { display: inline-block; width: fit-content; font-style: normal; font-size: 11px; font-weight: 600; color: #5B50D6; background: #EEF0FB; border-radius: 999px; padding: 1px 7px; margin-top: 2px; }
@media (max-width: 350px) { .sb-mc-steps { grid-template-columns: 1fr; } }

/* 2026-10-27 대표님 요청: 가입 화면 새 짜임 — 입학 선물 쿠폰 티켓 · 학생증 카드(번호 붙은 밑줄 칸) · 스위치 모양 동의 */
.sb-gift { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px 16px; border-radius: 18px; background: #2D2844; color: #fff; position: relative; overflow: hidden; }
.sb-gift::before { content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFB56B 0 30%, rgba(255, 181, 107, .25) 31% 60%, transparent 61%); }
.sb-gift-pct { flex: none; font-size: 34px; font-weight: 600; color: #FFB56B; font-variant-numeric: tabular-nums; line-height: 1; padding-right: 14px; box-shadow: 1px 0 0 rgba(255, 255, 255, .25); }
.sb-gift-pct small { font-size: 16px; }
.sb-gift-txt { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.sb-gift-txt small { font-size: 11px; font-weight: 600; color: #C9C4F2; }
.sb-gift-txt b { font-size: 15px; font-weight: 600; color: #fff; }
.sb-gift-txt em { font-style: normal; font-size: 12px; color: #DAD7F0; }
.sb-card { counter-reset: sbf; border-top: 6px solid #5B50D6; }
.sb-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #5B50D6; }
.sb-card-sun { width: 12px; height: 12px; border-radius: 50%; background: #FFB56B; }
.sb-card .field { counter-increment: sbf; }
.sb-card .field > span::before { content: counter(sbf, decimal-leading-zero) "  "; color: #FFB56B; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-card .field input { border: 0; border-bottom: 2px solid #E4E2EF; border-radius: 0; background: transparent; padding-left: 2px; }
.sb-card .field input:focus { border-bottom-color: #5B50D6; box-shadow: none; outline: none; }
.sb-switches label { display: flex; align-items: center; gap: 10px; padding: 10px 2px; }
.sb-switches input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: #E4E2EF; position: relative; cursor: pointer; transition: background .2s; }
.sb-switches input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(45, 40, 68, .25); transition: left .2s; }
.sb-switches input[type=checkbox]:checked { background: #5B50D6; }
.sb-switches input[type=checkbox]:checked::after { left: 19px; }
.sb-switches input[type=checkbox]:focus-visible { outline: 2px solid #FFB56B; outline-offset: 2px; }
.sb-switches label > span { flex: 1; }
.sb-switches em { font-style: normal; font-size: 11px; font-weight: 600; color: #5B50D6; background: #EEF0FB; border-radius: 999px; padding: 1px 7px; margin-right: 4px; }
.sb-switches em.opt { color: #8A6A3A; background: #FFF1E0; }
.sb-switches .agree-all { border-bottom: 1px solid #E4E2EF; padding-bottom: 12px; margin-bottom: 2px; }
.sb-join-btn { border-radius: 999px; }
/* 같은 날 감독 검수: 기존 체크박스 크기 규칙(app.css .agree input)이 스위치를 눌러 찌그러뜨려 — 스위치 칸만 크기·여백을 다시 정함 */
.agree.sb-switches label { align-items: center; padding: 10px 2px; font-size: 13.5px; line-height: 1.45; }
.agree.sb-switches input[type=checkbox] { width: 40px; height: 24px; min-width: 40px; margin: 0; }
.agree.sb-switches label > span { display: block; }
.agree.sb-switches em { display: inline-block; margin: 0 6px 0 0; color: #5B50D6; }
.agree.sb-switches em.opt { color: #8A6A3A; }
.agree.sb-switches .agree-all { font-size: 14px !important; }

/* ==========================================================================
   2026-10-27 지시서 018: '새벽 책상 위 공부 도구' 부품 — 다른 가게와 짜임이 겹치지 않게
   책갈피 카드(.sb-sheet) · 공책 밑줄 칸(.sb-line) · 포스트잇(.sb-postit/.sb-memo) · 서랍(.sb-drawer)
   · 오늘의 계산(.sb-calc) · 해 뜨는 단계(.sb-dawn) · 아래 독(.sb-dock) · 도장 표(.sb-state)
   · 학생증/대출증(.sb-id) · 공책 한 장(.sb-paper) · 내려오는 메모(.sb-toast) · 상담 도우미(.sb-helper)
   ========================================================================== */

/* ---- 책갈피 카드 */
html body .sb-count { counter-reset: sbn; }
html body .sb-sheet { position: relative; margin: 32px 0 14px; padding: 30px 16px 14px; background: #fff; border-radius: 4px 18px 18px 18px; box-shadow: 0 2px 14px rgba(45, 40, 68, .07); }
html body .sb-tab { position: absolute; left: 14px; top: -14px; margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 14px 16px 10px; background: #5B50D6; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; border-radius: 6px 6px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); }
html body .sb-count .sb-tab { counter-increment: sbn; }
html body .sb-count .sb-tab::before { content: counter(sbn); width: 20px; height: 20px; border-radius: 50%; background: #FFB56B; color: #2D2844; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
html body .sb-need { position: absolute; right: 14px; top: 12px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #5B50D6; background: #EEF0FB; border-radius: 999px; padding: 2px 9px; }
html body .sb-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #6E6A85; }

/* ---- 공책 밑줄 칸 */
html body .sb-line { display: block; margin: 0 0 14px; }
html body .sb-line > span { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: #6E6A85; }
html body .sb-line > span small { font-weight: 400; color: #8F8CA3; }
html body .sb-line input, html body .sb-line select { width: 100%; box-sizing: border-box; height: auto; padding: 8px 2px; border: 0; border-bottom: 2px solid #E4E2EF; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 16px; color: #2D2844; outline: none; }
html body .sb-line input:focus { border-bottom-color: #5B50D6; }
html body .sb-line[hidden] { display: none; }

/* ---- 포스트잇 · 메모 · 알림 */
html body .sb-memo { margin: 10px 0 0; padding: 10px 12px 10px 14px; background: #FFF6EA; border-left: 5px solid #FFB56B; border-radius: 4px 12px 12px 4px; font-size: 12.5px; line-height: 1.55; color: #6B5A3F; }
html body .sb-memo .ico { width: 14px; height: 14px; vertical-align: -2px; }
html body .sb-alert { margin: 0 0 12px; padding: 12px 14px 12px 16px; background: #FFF6EA; border-left: 6px solid #FFB56B; border-radius: 4px 14px 14px 4px; font-size: 14px; font-weight: 600; line-height: 1.5; color: #2D2844; }
html body .sb-postit { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 18px 14px 14px; border: 0; border-radius: 3px 3px 18px 3px; background: #FFF1E0; color: #2D2844; text-align: left; font: inherit; font-size: 14px; box-shadow: 0 4px 10px rgba(255, 181, 107, .3); cursor: pointer; text-decoration: none; }
html body .sb-postit::before { content: ""; position: absolute; left: 50%; top: -6px; width: 44px; height: 12px; margin-left: -22px; background: rgba(91, 80, 214, .22); border-radius: 3px; }
html body .sb-postit > span { flex: 1; min-width: 0; }
html body .sb-postit b { color: #5B50D6; font-weight: 700; }
html body .sb-postit small { display: block; color: #8A6A3A; font-size: 12px; }
html body .sb-postit .cp-on { display: none; }
html body .sb-postit.on { background: #FFE2BE; }
html body .sb-postit.on .cp-on { display: block; }
html body .sb-stamp-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #5B50D6; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
html body .sb-stamp-ico .ico { width: 14px; height: 14px; }

/* ---- 서랍(접는 칸) */
html body .sb-drawer { margin: 16px 0; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); overflow: hidden; }
html body .sb-drawer > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 600; }
html body .sb-drawer > summary::-webkit-details-marker { display: none; }
html body .sb-drawer > summary::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #FFB56B; flex: none; }
html body .sb-drawer > summary > span { flex: 1; }
html body .sb-drawer > summary > b { font-size: 14px; color: #5B50D6; }
html body .sb-drawer > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #8F8CA3; border-bottom: 2px solid #8F8CA3; transform: rotate(45deg); transition: transform .2s; margin: -3px 4px 0 0; }
html body .sb-drawer[open] > summary { background: #EEF0FB; }
html body .sb-drawer[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
html body .sb-drawer > .sb-drawer-in { padding: 6px 16px 14px; }
html body .sb-drawer > .sb-sub, html body .sb-drawer > .sb-memo, html body .sb-drawer > form { margin-left: 16px; margin-right: 16px; }
html body .sb-drawer > form:last-child { margin-bottom: 14px; }
html body .sb-drawer > .sb-memo:first-of-type { margin-top: 12px; }
html body .sb-drawer.sb-leave > summary::before { background: #8F8CA3; }

/* ---- 상품 줄(주문서·주문 카드) */
html body .sb-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF0FB; }
html body .sb-item:last-child { border-bottom: 0; }
html body .sb-item > span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
html body .sb-item > span small { display: block; color: #8F8CA3; font-size: 12px; }
html body .sb-item > b { flex: none; font-size: 14px; }
html body .sb-item .sb-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #EEF0FB; color: #6E6A85; display: inline-flex; align-items: center; justify-content: center; }
html body .sb-item .sb-x .ico { width: 14px; height: 14px; }
html body .sb-item .thumb.xs { flex: none; width: 44px; height: 44px; border-radius: 10px; }

/* ---- 오늘의 계산 */
html body .sb-calc { margin: 16px 0 0; padding: 14px 16px 16px; background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
html body .sb-calc-cap { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: #8F8CA3; }
html body .sb-calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #EEF0FB; }
html body .sb-calc-row small { color: #8F8CA3; }
html body .sb-calc-row .minus { color: #C2661F; }
html body .sb-calc-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 18px; border-radius: 999px; background: linear-gradient(90deg, #5B50D6, #7A70E6); color: #fff; font-size: 13.5px; font-weight: 600; }
html body .sb-calc-total small { color: rgba(255, 255, 255, .8); font-weight: 400; }
html body .sb-calc-total strong { font-size: 20px; font-weight: 700; color: #fff; }

/* ---- 큰 알약 하나(결제 방법) */
html body .sb-pay { display: flex; }
html body .sb-pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 2px solid #5B50D6; border-radius: 999px; background: #EEF0FB; color: #2D2844; font: inherit; font-size: 15px; font-weight: 600; }
html body .sb-pill::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #FFB56B; box-shadow: 0 0 0 4px rgba(255, 181, 107, .3); }

/* ---- 해 뜨는 단계 표시 */
html body .sb-dawn { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 4px 6px; padding: 0; list-style: none; border-bottom: 2px solid #5B50D6; }
html body .sb-dawn li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; color: #8F8CA3; font-size: 12px; font-weight: 600; text-align: center; padding-bottom: 8px; }
html body .sb-dawn li s { display: block; width: 30px; overflow: hidden; margin-bottom: 2px; }
html body .sb-dawn li s::before { content: ""; display: block; width: 30px; height: 30px; border-radius: 50%; background: #D9D6F0; }
html body .sb-dawn li:nth-child(1) s { height: 8px; }
html body .sb-dawn li:nth-child(2) s { height: 16px; }
html body .sb-dawn li:nth-child(3) s { height: 26px; }
html body .sb-dawn li.on { color: #2D2844; }
html body .sb-dawn li.on s::before { background: #FFB56B; }
html body .sb-dawn li.on span::after { content: ""; display: block; width: 0; }

/* ---- 아래 독 */
html body .sb-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; width: min(448px, calc(100% - 24px)); box-sizing: border-box; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 6px; background: rgba(255, 255, 255, .97); border-radius: 22px; box-shadow: 0 6px 24px rgba(45, 40, 68, .16); }
html body .sb-dock-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 4px; color: #6E6A85; text-decoration: none; font-size: 11.5px; font-weight: 600; }
html body .sb-dock-i .ico { width: 22px; height: 22px; }
html body .sb-dock-i.on { color: #5B50D6; }
html body .sb-dock-i.on::before { content: ""; position: absolute; top: 0; left: 50%; width: 18px; height: 9px; margin-left: -9px; border-radius: 18px 18px 0 0; background: #FFB56B; }
html body .sb-dock-i .sb-dock-n { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #5B50D6; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* ---- 바닥글 링크(책갈피 줄) */
html body .sb-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 16px 22px; padding: 0; list-style: none; }
html body .sb-marks a { display: block; padding: 9px 16px 11px; background: #fff; color: #5B50D6; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 0 0 12px 12px; border-top: 4px solid #5B50D6; box-shadow: 0 2px 8px rgba(45, 40, 68, .08); }
html body .sb-marks li:last-child a { border-top-color: #FFB56B; }

/* ---- 도장 표(주문 상태) */
html body .sb-state { display: inline-block; padding: 3px 10px; border: 2px solid #5B50D6; border-radius: 8px; color: #5B50D6; font-size: 12px; font-weight: 700; transform: rotate(-3deg); background: #fff; }
html body .sb-state.sent { border-color: #2F8F5B; color: #2F8F5B; }
html body .sb-state.fail { border-color: #FFB56B; color: #C2661F; }
html body .sb-state.refund { border-color: #8F8CA3; color: #6E6A85; }

/* ---- 학생증 · 대출증 */
html body .sb-id { position: relative; margin: 14px 0; padding: 22px 16px 16px; background: #fff; border-radius: 18px; border-top: 8px solid #5B50D6; box-shadow: 0 4px 16px rgba(45, 40, 68, .1); overflow: hidden; }
html body .sb-id::after { content: ""; position: absolute; right: -26px; top: 14px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, #FFB56B 0 34%, rgba(255, 181, 107, .22) 35% 62%, transparent 63%); }
html body .sb-id-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #5B50D6; position: relative; z-index: 1; }
html body .sb-id-head i { width: 12px; height: 12px; border-radius: 50%; background: #FFB56B; }
html body .sb-id-name { display: block; margin: 0 0 2px; font-size: 20px; font-weight: 700; color: #2D2844; position: relative; z-index: 1; }
html body .sb-id-sub { display: block; margin: 0 0 8px; font-size: 13px; color: #6E6A85; position: relative; z-index: 1; }
html body .sb-id-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #EEF0FB; color: #5B50D6; font-size: 12.5px; font-weight: 600; position: relative; z-index: 1; }
html body .sb-id .sb-line { position: relative; z-index: 1; }
html body .sb-id-alt { display: flex; justify-content: center; gap: 18px; margin-top: 6px; font-size: 13.5px; font-weight: 600; position: relative; z-index: 1; }
html body .sb-id-alt a { color: #5B50D6; text-decoration: none; padding: 4px 0; border-bottom: 2px solid #FFB56B; }

/* ---- 공책 한 장(약관·방침·문서 창) */
html body .sb-paper { position: relative; margin: 20px 0 14px; padding: 46px 18px 20px; background: #fff; border-radius: 6px 6px 18px 18px; box-shadow: 0 3px 16px rgba(45, 40, 68, .09); background-image: radial-gradient(circle at 18% 18px, #FBF7F0 0 7px, transparent 8px), radial-gradient(circle at 50% 18px, #FBF7F0 0 7px, transparent 8px), radial-gradient(circle at 82% 18px, #FBF7F0 0 7px, transparent 8px); background-repeat: no-repeat; }
html body .sb-paper::after { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 1px; background: #E4E2EF; }
html body .sb-paper h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 700; color: #2D2844; }
html body .sb-paper p, html body .sb-paper li { font-size: 13.5px; line-height: 1.75; color: #3F3A5A; }
html body .sb-paper ul, html body .sb-paper ol { margin: 4px 0 8px; padding-left: 20px; }
html body .sb-paper-date { margin: 18px 0 0; font-size: 12.5px; color: #8F8CA3; text-align: right; }

/* ---- 내려오는 메모(알림) */
html body .sb-toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -140%); z-index: 90; width: min(420px, calc(100% - 32px)); box-sizing: border-box; padding: 16px 16px 14px 18px; background: #FFF1E0; color: #2D2844; border-radius: 3px 3px 16px 3px; box-shadow: 0 8px 22px rgba(255, 181, 107, .45); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; opacity: 1; animation: sb-drop 3.2s ease forwards; }
html body .sb-toast::before { content: ""; position: absolute; left: 50%; top: -6px; width: 44px; height: 12px; margin-left: -22px; background: rgba(91, 80, 214, .25); border-radius: 3px; }
@keyframes sb-drop { 0% { transform: translate(-50%, -140%); } 10%, 82% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -140%); } }

/* ---- 결제 뒤 화면 등에서 쓰는 큰 단추 · 학생증 한 줄 */
html body .btn.sb-cta { border-radius: 999px; box-shadow: 0 4px 14px rgba(91, 80, 214, .28); }

/* ---- 책가방 줄(포스트잇 한 장씩) */
html body .sb-bag { margin: 0 0 12px; padding: 12px 12px 12px 14px; display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 4px 16px 16px 16px; border-left: 6px solid #FFB56B; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
html body .sb-bag .thumb.xs { flex: none; width: 56px; height: 56px; border-radius: 12px; }
html body .sb-bag-body { flex: 1; min-width: 0; }
html body .sb-bag-name { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
html body .sb-bag-opt { margin: 0 0 8px; font-size: 12.5px; color: #8F8CA3; }
html body .sb-bag-opt .ico { width: 12px; height: 12px; vertical-align: -1px; }
html body .sb-bag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body .sb-bag-row strong { font-size: 15px; }
html body .sb-count-pill { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: #EEF0FB; }
html body .sb-count-pill button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; color: #5B50D6; display: inline-flex; align-items: center; justify-content: center; }
html body .sb-count-pill button .ico { width: 14px; height: 14px; }
html body .sb-count-pill span { min-width: 26px; text-align: center; font-weight: 700; }
html body .sb-bag-x { flex: none; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #EEF0FB; color: #6E6A85; display: inline-flex; align-items: center; justify-content: center; }
html body .sb-bag-x .ico { width: 14px; height: 14px; }

/* ---- 정보 한 줄 띠(책가방 위 안내 · 공지) */
html body .sb-ribbon { display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 14px; background: #EEF0FB; border-radius: 999px; color: #5B50D6; font-size: 13px; font-weight: 600; }
html body .sb-ribbon .ico { width: 16px; height: 16px; flex: none; }

/* ---- 주문 카드 · 학생 기록 */
html body .sb-rec { margin: 14px 0; padding: 14px 16px 14px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .07); }
html body .sb-rec-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
html body .sb-rec-top small { font-size: 12px; color: #8F8CA3; }
html body .sb-rec-btns { display: grid; gap: 8px; margin-top: 12px; }
html body .sb-rec-btns .btn { border-radius: 999px; }
html body .sb-pairs { margin: 10px 0 0; padding: 0; }
html body .sb-pairs div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #EEF0FB; font-size: 13.5px; }
html body .sb-pairs dt { color: #8F8CA3; }
html body .sb-pairs dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- 머리줄 · 홈 머리 */
html body .sb-head-row { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 16px 10px; }
html body .sb-head-row h2 { margin: 0; font-size: 18px; font-weight: 700; }
html body .sb-head-row a { font-size: 13px; font-weight: 600; color: #5B50D6; text-decoration: none; }

/* ---- 가입 제안 포스트잇(주문서 맨 위) */
html body .sb-offer { margin: 6px 0 12px; }
html body .sb-offer > label { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 14px 14px; background: #FFF1E0; border-radius: 3px 3px 18px 3px; box-shadow: 0 4px 10px rgba(255, 181, 107, .3); cursor: pointer; }
html body .sb-offer > label::before { content: ""; position: absolute; left: 50%; top: -6px; width: 44px; height: 12px; margin-left: -22px; background: rgba(91, 80, 214, .22); border-radius: 3px; }
html body .sb-offer span { flex: 1; min-width: 0; }
html body .sb-offer span b { display: block; font-size: 14.5px; font-weight: 700; color: #2D2844; }
html body .sb-offer span small { display: block; margin-top: 2px; font-size: 12px; color: #8A6A3A; }
html body .sb-offer input[type=checkbox], html body .sb-mk-sw-box { appearance: none; -webkit-appearance: none; flex: none; order: 2; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #E4E2EF; position: relative; cursor: pointer; transition: background .2s; }
html body .sb-offer input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(45, 40, 68, .25); transition: left .2s; }
html body .sb-offer input[type=checkbox]:checked { background: #5B50D6; }
html body .sb-offer input[type=checkbox]:checked::after { left: 21px; }
html body .sb-inner { margin-top: 10px; }
html body .sb-inner .sb-memo { margin-top: 0; margin-bottom: 8px; }
html body .sb-inner > label:not(.sb-line) { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 0; }

/* ---- 내 책상: 새 소식 메일 스위치 한 줄 */
html body .sb-mk { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 14px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(45, 40, 68, .06); }
html body .sb-mk-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #EEF0FB; color: #5B50D6; display: flex; align-items: center; justify-content: center; }
html body .sb-mk-ico .ico { width: 18px; height: 18px; }
html body .sb-mk-text { flex: 1; min-width: 0; }
html body .sb-mk-text b { display: block; font-size: 14.5px; font-weight: 600; }
html body .sb-mk-text small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #6E6A85; }
html body .sb-mk-sw { flex: none; width: 46px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: #E4E2EF; position: relative; cursor: pointer; transition: background .2s; }
html body .sb-mk-sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(45, 40, 68, .25); transition: left .2s; }
html body .sb-mk-sw.on { background: #5B50D6; }
html body .sb-mk-sw.on i { left: 21px; }
html body .sb-dev { padding: 8px 0; }
html body .sb-dev .btn { flex: none; border-radius: 999px; }

/* ---- 체크표 · 도움 창구 */
html body .sb-todo { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
html body .sb-todo li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #FBF7F0; }
html body .sb-todo li i { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; border: 2px solid #5B50D6; box-sizing: border-box; }
html body .sb-todo li.done { background: #FFF1E0; }
html body .sb-todo li.done i { background: #FFB56B; border-color: #FFB56B; }
html body .sb-todo b { display: block; font-size: 14px; font-weight: 600; }
html body .sb-todo small { display: block; margin-top: 1px; font-size: 12.5px; color: #6E6A85; }
html body .sb-ticks { position: relative; z-index: 1; margin: 8px 0 12px; padding: 0; list-style: none; }
html body .sb-ticks li { position: relative; padding: 5px 0 5px 22px; font-size: 13.5px; line-height: 1.5; color: #3F3A5A; }
html body .sb-ticks li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: #FFB56B; }
html body .sb-help .sb-id-tag { margin-bottom: 12px; }
html body .sb-help .btn, html body .sb-lend .btn { position: relative; z-index: 1; }
html body .sb-id .sb-sub, html body .sb-id .sb-memo, html body .sb-id .sb-pairs { position: relative; z-index: 1; }
html body .sb-id form .btn + .btn { margin-top: 8px; }
html body .sb-pairs .sb-big { font-size: 20px; color: #5B50D6; }

/* ---- 자잘한 맞춤 */
html body .sb-calc.flat { margin-top: 10px; padding: 0; box-shadow: none; background: transparent; }
html body .sb-calc-row[hidden] { display: none; }
html body .sb-toast.hide { display: none; }
html body .sb-rec .sb-item .thumb.xs { width: 44px; height: 44px; }
html body .sb-rec .ord-line { margin-top: 12px; }

/* ---- 문서 보기 창: 아래에서 올라오는 공책 한 장 */
html body .sb-notebook { position: relative; width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; padding-top: 30px; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 -8px 30px rgba(45, 40, 68, .28); animation: sb-rise .25s ease-out; }
html body .sb-rings { position: absolute; top: -8px; left: 0; right: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
html body .sb-rings i { width: 16px; height: 30px; border-radius: 8px; background: linear-gradient(180deg, #8F8CA3, #E4E2EF); box-shadow: inset 0 -3px 0 rgba(45, 40, 68, .15); }
html body .sb-nb-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px 20px; border-bottom: 1px solid #E4E2EF; }
html body .sb-nb-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
html body .sb-nb-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #EEF0FB; color: #5B50D6; font-size: 20px; line-height: 1; }
html body .sb-nb-body { overflow-y: auto; padding: 8px 20px 16px; font-size: 13.5px; line-height: 1.75; }
html body .sb-nb-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #E4E2EF; }
@keyframes sb-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) { html body .sb-notebook { border-radius: 6px; } }

/* ---- 상담 도우미: 말풍선 모양 단추 · 해 아바타 머리 · 알약 입력 줄 */
html body:has(.sb-dock) #chat .chat-fab { bottom: calc(96px + env(safe-area-inset-bottom)); }
html body:has(.buybar) #chat .chat-fab { bottom: calc(100px + env(safe-area-inset-bottom)); }
html body #chat .sb-helper-fab { width: 58px; height: 58px; border-radius: 50% 50% 50% 10px; background: #5B50D6; box-shadow: 0 6px 18px rgba(91, 80, 214, .38); }
html body #chat .sb-helper-face { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
html body #chat .sb-helper-face .sun-mark { width: 27px; height: 17px; }
html body .sb-helper-head { gap: 12px; justify-content: flex-start; }
html body .sb-helper-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
html body .sb-helper-av .sun-mark { width: 28px; height: 18px; }
html body .sb-helper-who { flex: 1; min-width: 0; }
html body .sb-helper-who b { display: block; font-size: 16px; font-weight: 700; color: #fff; }
html body .sb-helper-head .sb-helper-who small { margin: 2px 0 0; color: rgba(255, 255, 255, .85); }
html body .sb-helper-bar { gap: 6px; align-items: center; }
html body .sb-helper-bar textarea { order: 1; }
html body .sb-helper-bar .chat-attach { order: 2; background: #EEF0FB; color: #5B50D6; }
html body .sb-helper-bar .chat-send { order: 3; }
html body .sb-helper-light { z-index: 95; }
html body .sb-how { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 14px 16px; border-radius: 16px; background: #EEF0FB; }
html body .sb-how-sun { flex: none; width: 30px; height: 15px; border-radius: 30px 30px 0 0; background: #FFB56B; box-shadow: 0 3px 0 #5B50D6; }
html body .sb-how h2 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
html body .sb-how p { margin: 0; font-size: 13px; color: #6E6A85; }
html body .sb-card .sb-line { counter-increment: sbf; }
html body .sb-card .sb-line > span::before { content: counter(sbf, decimal-leading-zero) "  "; color: #FFB56B; font-weight: 600; font-variant-numeric: tabular-nums; }
html body .sb-line input, html body .sb-line select { min-height: 38px; padding: 6px 2px; }
html body .chat-form input[type=text], html body .chat-form input[type=email] { height: 38px; padding: 4px 2px; border: 0; border-bottom: 2px solid #E4E2EF; border-radius: 0; background: transparent; }
html body .chat-form input[type=text]:focus, html body .chat-form input[type=email]:focus { border-bottom-color: #5B50D6; outline: none; }
html body .chat-form .chat-check input { accent-color: #5B50D6; }
html body .sb-zipbook { position: relative; padding-top: 26px; }
html body .sb-zipbook .sb-nb-head { padding-left: 14px; }
html body .sb-pairs div { align-items: center; }
html body .sb-id .sb-pairs { margin-bottom: 14px; }