/* =========================================================
   무테이토 사주 · 잉크 화풍 UI (2026-10-28 확정, artstyle.html v2)
   - 그림(캐릭터)만 어긋난 채색·두꺼운 아래 먹선. UI는 깔끔하게:
     고른 갈색 먹선 + 안쪽 위 밝은 선 + 안쪽 아래 진한 띠(두께) + 부드러운 그림자
   - 버튼은 게임 버튼처럼 바닥 두께가 있고, 누르면 내려앉는다
   - 화면 위아래 바는 나무 판(결무늬), 바탕은 황토색 + 연한 감자 무늬
   - 한 가지 밝은 화풍으로 고정(다크 모드 없음: 레퍼런스의 따뜻한 종이 느낌 유지)
   ========================================================= */
:root {
  --paper: #e9d4ad; --bg: var(--paper); --bg2: #dfc597; --card: #fff6e2; --bot: #fffaf0; --me: #ffe48a;
  --line: #3a2417; --ink: #2f1d12; --muted: #7a5a3e; --soft: #ead3a9; --hair: #d6b98a;
  --tomato: #ff6d4d; --tomato-sh: #d9452a; --lemon: #ffd65c; --lemon-sh: #e2a62a; --mint: #8fd9b6; --pink: #ffb7c5; --sky: #9fd3f7; --potato: #d2a167;
  --wood: #8a5a35; --wood2: #6e4426;
  --hi: inset 0 2px 0 rgba(255,255,255,.6);
  --drop: 0 6px 12px -6px rgba(58,36,23,.45);
  --grain: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 9px, rgba(58,36,23,.18) 9px 10px, rgba(0,0,0,0) 10px 19px, rgba(255,255,255,.06) 19px 20px);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ddc396' stroke-width='2.5'%3E%3Cpath d='M28 18c14-1 24 6 26 17 2 12-6 22-18 23-13 1-22-7-22-19 0-11 4-20 14-21z'/%3E%3Cpath d='M92 74c12 0 20 7 20 17s-9 18-20 18-19-8-18-18 7-17 18-17z'/%3E%3Cpath d='M34 34q5-3 9 0M88 86q4-3 8 0'/%3E%3C/g%3E%3C/svg%3E");
  --head: 'Jua', system-ui, sans-serif; --body: 'Gowun Dodum', 'Apple SD Gothic Neo', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--paper); background-image: var(--pattern); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all; }
h1, h2, h3, .head { font-family: var(--head); font-weight: 400; letter-spacing: -.01em; line-height: 1.3; }
a { color: inherit; }
.muted { color: var(--muted); }
.back { display: inline-block; text-decoration: none; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
button { font: inherit; color: inherit; cursor: pointer; }
.ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: 0 0 auto; }

/* ---------- 공통: 액자(카드)와 버튼 ---------- */
.card, .rich, .friend, .sheetbox, .opt, .row, .review, .share-card, .bub, .concept, .subs .sub {
  border: 3px solid var(--line);
  box-shadow: var(--hi), inset 0 -5px 0 var(--sh, var(--soft)), 0 3px 0 var(--line), var(--drop);
}
.btn, .quick button, .send, .chips-count, .picker button, .mth, .hero .tag, .card .p, .idcard .tags span, .timer {
  border: 3px solid var(--line);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 var(--sh, var(--soft)), 0 3px 0 var(--line);
  transition: transform .08s, box-shadow .08s;
}
.btn:active, .quick button:active, .send:active, .picker button:active, .mth:active {
  transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -2px 0 var(--sh, var(--soft)), 0 1px 0 var(--line);
}

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--head); font-size: 19px; padding: 13px 22px 15px; border-radius: 999px; background: var(--lemon); --sh: var(--lemon-sh); color: var(--ink); text-decoration: none; }
.btn.hot { background: var(--tomato); --sh: var(--tomato-sh); color: #fff; text-shadow: 0 2px 0 rgba(120,30,14,.55); }
.btn.ghost { background: var(--card); --sh: var(--soft); color: var(--ink); }
.btn.block { width: 100%; }
.btn small { font-family: var(--body); font-size: 13px; opacity: .85; text-shadow: none; }
.btn:disabled { opacity: .6; }
.strike { text-decoration: line-through; opacity: .6; font-size: .8em; }

/* ---------- 나무 판(상단 바·입력 영역) ---------- */
.topbar, .chat-head { color: #fff4dc; background-color: var(--wood); background-image: var(--grain); border-bottom: 3px solid var(--line); box-shadow: inset 0 -4px 0 rgba(58,36,23,.35), 0 3px 6px -2px rgba(58,36,23,.35); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 12px; }
.logo { font-family: var(--head); font-size: 21px; text-decoration: none; display: flex; align-items: center; gap: 8px; color: #fff4dc; text-shadow: 0 2px 0 rgba(58,36,23,.6); }
.logo svg { width: 38px; height: 38px; background: var(--card); border-radius: 50%; border: 3px solid var(--line); }
.chips-count { font-family: var(--head); background: var(--card); color: var(--ink); border-radius: 999px; padding: 3px 12px 5px 6px; font-size: 22px; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; }
/* 감자(재화)는 돈 쓰는 아이템이라 크게: 아이콘 30px · 숫자 22px · 오른쪽에 + (충전) 표시 */
.chips-count .ic { width: 30px; height: 30px; vertical-align: 0; }
.chips-count::after { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; border-radius: 50%; background: var(--tomato); color: #fff; font-size: 18px; line-height: 1; border: 2px solid var(--line); text-shadow: 0 1px 0 rgba(120,30,14,.5); }

/* ---------- 홈 ---------- */
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.hero { text-align: center; padding: 26px 0 8px; position: relative; }
.hero .tag { display: inline-block; background: var(--line); --sh: #24150d; color: #fff4dc; font-family: var(--head); padding: 3px 14px 5px; border-radius: 999px; font-size: 14px; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 2px 0 rgba(0,0,0,.25); }
.hero h1 { font-size: clamp(32px, 9.5vw, 42px); margin: 14px 0 6px; }
.hero h1 em, .price-pill b, .big-num { font-style: normal; color: var(--tomato); -webkit-text-stroke: 1.5px var(--line); paint-order: stroke fill; }
.hero .sub { font-size: 17px; color: var(--muted); margin: 0 0 14px; }
.hero .stage { position: relative; height: 230px; display: flex; align-items: flex-end; justify-content: center; }
.hero .stage .main { animation: wobble 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.hero .bubble { position: absolute; top: 4px; right: 4%; background: var(--bot); border: 3px solid var(--line); box-shadow: var(--hi), inset 0 -4px 0 var(--soft), 0 3px 0 var(--line); border-radius: 18px; padding: 8px 12px 10px; font-family: var(--head); font-size: 16px; max-width: 170px; transform: rotate(4deg); }
.hero .bubble::after { content: ''; position: absolute; left: 18px; bottom: -15px; border: 8px solid transparent; border-top-color: var(--line); }
.hero .bubble.l { left: 2%; right: auto; top: 54px; transform: rotate(-5deg); }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
.price-pill { display: inline-flex; align-items: baseline; gap: 8px; margin: 6px 0 12px; font-family: var(--head); }
.price-pill b { font-size: 38px; font-weight: 400; }
.cta-stack { display: grid; gap: 12px; margin: 6px 0 4px; }
.marquee { overflow: hidden; white-space: nowrap; border-block: 3px solid var(--line); background: var(--lemon); color: var(--ink); font-family: var(--head); padding: 8px 0; margin: 22px -16px; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 var(--lemon-sh); }
.marquee span { display: inline-block; padding-left: 100%; animation: mq 22s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }

.sec { margin: 34px 0; }
.sec h2 { font-size: 26px; margin: 0 0 4px; }
.sec > p { margin: 0 0 14px; color: var(--muted); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card { background: var(--card); border-radius: 18px; padding: 14px 14px 16px; text-decoration: none; display: block; }
.card .emo { font-size: 26px; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ffe7c2; border: 2.5px solid var(--line); box-shadow: inset 0 -3px 0 rgba(58,36,23,.15); }
.card .emo .ic { width: 26px; height: 26px; vertical-align: 0; }
.card b { display: block; font-family: var(--head); font-size: 18px; font-weight: 400; margin-top: 6px; }
.card span { display: block; font-size: 13px; color: var(--muted); }
.card .p { display: inline-block; margin-top: 8px; font-family: var(--head); background: var(--lemon); --sh: var(--lemon-sh); color: var(--ink); border-radius: 999px; padding: 1px 10px 3px; font-size: 14px; border-width: 2.5px; }
.card.wide { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }
.card.hot { background: var(--tomato); --sh: var(--tomato-sh); color: #fff; } .card.hot b { text-shadow: 0 2px 0 rgba(120,30,14,.5); } .card.hot span { color: #ffe9e3; } .card.hot .p { background: #fff6e2; --sh: var(--soft); color: #c2381f; }
.card.hot .emo { background: #fff6e2; }

.friends { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 2px 6px; }   /* 2026-10-29 가로 스크롤 대신 전부 나열 */
.friend { background: var(--card); border-radius: 18px; padding: 10px 10px 14px; text-align: center; }
.friend b { font-family: var(--head); font-weight: 400; font-size: 17px; display: block; }
.friend small { color: var(--muted); display: block; font-size: 12px; }
.friend p { font-size: 13px; margin: 6px 0 0; line-height: 1.45; }

.reviews { display: grid; gap: 10px; }
.review { background: var(--card); border-radius: 16px; padding: 12px 14px; font-size: 15px; }
.review small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }

.price-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.price-table td { background: var(--card); padding: 12px; border-top: 3px solid var(--line); border-bottom: 3px solid var(--line); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 var(--soft); }
.price-table td:first-child { border-left: 3px solid var(--line); border-radius: 14px 0 0 14px; }
.price-table td:last-child { border-right: 3px solid var(--line); border-radius: 0 14px 14px 0; text-align: right; font-family: var(--head); font-size: 18px; white-space: nowrap; }
.price-table small { display: block; color: var(--muted); font-size: 12px; }

.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 30px 16px 10px; line-height: 1.7; }
.sticky-cta { transition: transform .25s; }
.sticky-cta.hide { transform: translateY(130%); }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(233,212,173,0), var(--paper) 40%); z-index: 30; }
.sticky-cta .btn { max-width: 528px; margin: 0 auto; display: flex; }

/* ---------- 채팅 ---------- */
body.chat-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; position: relative; z-index: 2; }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .who b { font-family: var(--head); font-weight: 400; font-size: 18px; display: block; text-shadow: 0 2px 0 rgba(58,36,23,.6); }
.chat-head .who small { color: #f2dcb6; font-size: 12px; }
.chat-head .av, .msg .av { border-radius: 50%; background: var(--card); border: 3px solid var(--line); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 -3px 0 var(--soft), 0 2px 0 var(--line); }
.chat-head .av { width: 46px; height: 46px; }
.chat-head .av svg { width: 46px; height: 46px; }
.icon-btn { background: none; border: 0; font-size: 22px; padding: 4px 6px; text-decoration: none; color: #fff4dc; text-shadow: 0 2px 0 rgba(58,36,23,.6); }
#log { flex: 1; overflow-y: auto; padding: 16px 12px 24px; scroll-behavior: smooth; }
.log-in { max-width: 600px; margin: 0 auto; }
.msg { display: flex; gap: 8px; margin: 12px 0; align-items: flex-end; animation: pop .22s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.msg .av { flex: 0 0 42px; width: 42px; height: 42px; align-self: flex-start; }
.msg .av svg { width: 44px; height: 44px; }
.msg .col { max-width: 82%; min-width: 0; }
.msg .name { font-size: 12px; color: var(--muted); margin: 0 0 3px 4px; font-family: var(--head); }
.bub { background: var(--bot); --sh: #efdcbb; border-radius: 4px 18px 18px 18px; padding: 10px 13px 12px; font-size: 15.5px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.bub b, .bub strong { color: #d64a2c; }
.bub p { margin: 0 0 6px; } .bub p:last-child { margin: 0; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: var(--me); --sh: #ecc154; border-radius: 18px 4px 18px 18px; }
.msg.sys { justify-content: center; }
.msg.sys .bub { background: rgba(58,36,23,.08); border: 0; box-shadow: none; color: var(--muted); font-size: 13px; text-align: center; border-radius: 999px; padding: 4px 14px; }
.typing .bub { display: inline-flex; gap: 4px; padding: 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; transform: translateY(-3px); } }

/* 채팅 안 카드 */
.rich { background: var(--card); border-radius: 18px; padding: 14px 14px 16px; margin-top: 6px; }
.rich h3 { margin: 0 0 8px; font-size: 19px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.pillars .pl small { display: block; font-size: 11px; color: var(--muted); }
.pillars .pl .hj { font-family: serif; font-size: 26px; line-height: 1.15; border-radius: 12px; padding: 4px 0 6px; border: 2.5px solid var(--line); background: #fffaf0; margin-bottom: 4px; box-shadow: inset 0 -3px 0 var(--soft); }
.pillars .pl.me .hj { background: var(--lemon); box-shadow: inset 0 -3px 0 var(--lemon-sh); }
.pillars .pl .god { font-size: 11px; color: var(--muted); }
.e0 { color: #2f9e44; } .e1 { color: #e03131; } .e2 { color: #a8701a; } .e3 { color: #6e7780; } .e4 { color: #1c7ed6; }
.bars { display: grid; gap: 6px; margin-top: 8px; }
.bar { display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; gap: 6px; font-size: 13px; }
.bar .t { height: 14px; border-radius: 999px; background: #fffaf0; overflow: hidden; border: 2.5px solid var(--line); box-shadow: inset 0 2px 0 rgba(58,36,23,.14); }
.bar .t i { display: block; height: 100%; border-radius: 999px; border-right: 2px solid rgba(58,36,23,.35); }
.meter { position: relative; height: 20px; border-radius: 999px; border: 3px solid var(--line); background: linear-gradient(90deg, var(--mint), var(--lemon), var(--tomato)); margin: 10px 0 4px; box-shadow: inset 0 3px 0 rgba(58,36,23,.18); }
.meter b { position: absolute; top: -8px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); box-shadow: inset 0 -3px 0 var(--soft), 0 2px 0 var(--line); }
.big-num { font-family: var(--head); font-size: 46px; line-height: 1; }
.idcard { text-align: center; background: var(--lemon); --sh: var(--lemon-sh); color: var(--ink); }
.idcard .k { font-family: var(--head); font-size: 26px; margin: 4px 0; }
.idcard .tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.idcard .tags span { background: var(--card); border-radius: 999px; padding: 0 10px 2px; font-size: 13px; border-width: 2.5px; box-shadow: inset 0 -3px 0 var(--soft), 0 2px 0 var(--line); }
.lock { position: relative; overflow: hidden; }
.lock .blur { filter: blur(5px); user-select: none; pointer-events: none; }
.lock .over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,246,226,.6); text-align: center; padding: 12px; }
.paycard { background: var(--tomato); --sh: var(--tomato-sh); color: #fff; }
.paycard h3 { color: #fff; text-shadow: 0 2px 0 rgba(120,30,14,.5); }
.paycard ul { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; }
.paycard .btn { background: var(--lemon); --sh: var(--lemon-sh); color: var(--ink); text-shadow: none; }
.paycard .strike { color: #ffe1d8; }
.timer { font-family: var(--head); background: var(--card); color: #c2381f; border-radius: 999px; padding: 0 10px 2px; font-size: 14px; display: inline-block; border-width: 2px; }

/* 입력 영역(나무 선반) */
.dock { color: #fff4dc; background-color: var(--wood2); background-image: var(--grain); border-top: 3px solid var(--line); box-shadow: inset 0 3px 0 rgba(255,255,255,.12); padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
.dock-in { max-width: 600px; margin: 0 auto; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: 0 0 auto; background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 13px 8px; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.quick button.pri { background: var(--lemon); --sh: var(--lemon-sh); font-family: var(--head); font-size: 15px; }
.quick button .cost { font-family: var(--head); font-size: 14px; color: #8a3a1f; margin-left: 6px; display: inline-flex; align-items: center; gap: 2px; background: #ffe7c2; border: 2px solid var(--line); border-radius: 999px; padding: 0 7px 1px 3px; line-height: 1.3; }
.quick button .cost .ic { width: 20px; height: 20px; vertical-align: 0; }
.inrow { display: flex; gap: 8px; align-items: center; }
.inrow input, .inrow select { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 999px; border: 3px solid var(--line); background: #fff8ea; color: var(--ink); box-shadow: inset 0 3px 0 rgba(58,36,23,.14); outline: none; }
.inrow input:focus { box-shadow: inset 0 3px 0 rgba(58,36,23,.14), 0 0 0 3px rgba(255,214,92,.7); }
.send { flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--tomato); --sh: var(--tomato-sh); color: #fff; font-size: 20px; display: grid; place-items: center; }
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.picker button { background: var(--card); color: var(--ink); border-radius: 12px; padding: 7px 2px 9px; font-size: 13px; line-height: 1.25; }
.picker button small { display: block; color: var(--muted); font-size: 11px; }

/* 모달(결제) */
.modal { position: fixed; inset: 0; background: rgba(40, 25, 10, .55); display: none; align-items: flex-end; justify-content: center; z-index: 50; }
.modal.on { display: flex; }
.sheetbox { width: 100%; max-width: 560px; background-color: var(--paper); background-image: var(--pattern); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88dvh; overflow-y: auto; animation: up .25s ease-out; box-shadow: var(--hi), 0 -6px 18px rgba(40,25,10,.3); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheetbox h3 { margin: 0 0 4px; font-size: 22px; }
.opt { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 12px 12px 14px; margin: 10px 0; cursor: pointer; background: var(--card); }
.opt.on { background: var(--lemon); --sh: var(--lemon-sh); color: var(--ink); }
.opt .t { flex: 1; } .opt .t b { font-family: var(--head); font-weight: 400; font-size: 17px; display: block; } .opt .t small { font-size: 12px; opacity: .8; }
.opt .pr { font-family: var(--head); font-size: 19px; text-align: right; } .opt .pr s { display: block; font-size: 12px; opacity: .55; }
.badge { display: inline-block; background: var(--tomato); color: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 0 6px; font-size: 11px; font-family: var(--body); vertical-align: 2px; margin-left: 4px; }
.demo-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }

/* 공유 카드 */
.share-card { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--lemon); --sh: var(--lemon-sh); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; position: relative; overflow: hidden; }
.share-card .top { font-family: var(--head); font-size: 15px; background: var(--line); color: var(--lemon); border-radius: 999px; padding: 2px 12px 4px; }
.share-card .nm { font-family: var(--head); font-size: 30px; margin: 6px 0 0; }
.share-card .ln { font-size: 15px; margin: 4px 0; }
.share-card .url { position: absolute; bottom: 12px; font-size: 12px; opacity: .75; }

.toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); background: var(--line); color: #fff4dc; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.toast.on { opacity: 1; }

/* 마이·상점 */
.list { display: grid; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 16px; padding: 12px 12px 14px; text-decoration: none; }
.row .t { flex: 1; } .row b { font-family: var(--head); font-weight: 400; font-size: 17px; }
.row small { color: var(--muted); display: block; font-size: 12px; }
.empty { text-align: center; color: var(--muted); padding: 30px 0; }

/* 결제 시트: 결제수단 · 동의 · 사업자 정보 */
.methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.mth { flex: 1 1 auto; background: var(--card); color: var(--ink); border-radius: 12px; padding: 7px 10px 9px; font-size: 14px; }
.mth.on { background: var(--lemon); --sh: var(--lemon-sh); }
.agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 12px 0 4px; }
.agree input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--tomato); }
.agree a { color: #c2381f; }
.biz { font-size: 11px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
/* 약관·마이 같은 글 페이지 */
.doc { max-width: 720px; margin: 0 auto; padding: 20px 16px 80px; }
.doc h1 { font-size: 30px; margin: 6px 0 4px; }
.doc h2 { font-size: 20px; margin: 28px 0 8px; }
.doc p, .doc li { font-size: 15px; }
.doc table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--card); border: 3px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 3px 0 var(--line); }
.doc th, .doc td { border-bottom: 1.5px solid var(--hair); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc tr:last-child th, .doc tr:last-child td { border-bottom: 0; }
.doc th { background: #f5e3c2; font-weight: 400; font-family: var(--head); }
.doc .tbl { overflow-x: auto; padding-bottom: 4px; }
.bizfoot { font-size: 12px; color: var(--muted); line-height: 1.7; text-align: center; }
.bizfoot a { color: inherit; }

/* 오픈 전 체험판 안내 띠 */
.preview-bar { background: var(--line); color: #ffe7b8; font-size: 12px; text-align: center; padding: 6px 16px; line-height: 1.4; }

/* ---------- 메신저 느낌 (2026-10-28): 내 말풍선 시간·읽음 · 억울이 반응 · 수정 버튼 · 다음 말 보기 ---------- */
.msg.me .brow { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.msg.me .meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; line-height: 1.25; color: var(--muted); white-space: nowrap; padding-bottom: 2px; }
.msg.me .meta .rd { color: #d9452a; font-weight: 700; }
.msg.me.read .meta .rd { color: var(--muted); font-weight: 400; }
.msg.me .bub { position: relative; }
.msg.me .react { position: absolute; left: -12px; bottom: -12px; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 999px; background: var(--card); border: 2.5px solid var(--line); box-shadow: 0 2px 0 var(--line); display: none; place-items: center; font-size: 15px; line-height: 1; }
.msg.me .react.on { display: grid; animation: reactPop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes reactPop { from { transform: scale(0) rotate(-20deg); } }
.msg.me.read { margin-bottom: 18px; }
.msg.me .edit { flex: 0 0 auto; font-family: var(--head); font-size: 12px; padding: 2px 9px 3px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 2px 0 var(--line); align-self: center; }
.msg.me .edit:active { transform: translateY(2px); box-shadow: none; }
.msg.me.edited .bub { opacity: .45; text-decoration: line-through; }
.more-pill { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%) translateY(20px); z-index: 25; font-family: var(--head); font-size: 14px; padding: 6px 16px 8px; border-radius: 999px; border: 3px solid var(--line); background: var(--lemon); color: var(--ink); box-shadow: inset 0 -3px 0 var(--lemon-sh), 0 3px 0 var(--line), 0 6px 12px -4px rgba(58,36,23,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.more-pill.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(-50%) translateY(3px); } }

/* ---------- 캐릭터 살아 움직이기 (2026-10-29): .alive 안의 감자·친구들만. 팔은 어깨, 다리는 엉덩이 축으로 흔든다 ---------- */
.alive .potato-ink { overflow: visible; animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.alive .potato-ink .arm-l { animation: armL 1.8s ease-in-out infinite; }
.alive .potato-ink .arm-r { animation: armR 1.8s ease-in-out infinite .25s; }
.alive .potato-ink .leg-l { animation: legL 1.2s ease-in-out infinite; }
.alive .potato-ink .leg-r { animation: legR 1.2s ease-in-out infinite .6s; }
.alive > :nth-child(2n) .potato-ink, .alive > :nth-child(2n) .potato-ink * { animation-delay: -.7s; }
.alive > :nth-child(3n) .potato-ink, .alive > :nth-child(3n) .potato-ink * { animation-duration: 2s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes armL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(16deg); } }
@keyframes armR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes legL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes legR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
.friend:hover .potato-ink, .friend:active .potato-ink { animation-duration: .7s; }
@media (prefers-reduced-motion: reduce) { .alive .potato-ink, .alive .potato-ink * { animation: none !important; } }

/* ---------- 캐릭터 콕 찌르기 (2026-10-29, poke.js): 폴짝 · 부들부들 · 시무룩 · 빙글 + 말풍선 ---------- */
svg.potato-ink[data-char] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a svg.potato-ink[data-char] { cursor: inherit; }
.potato-ink.poke-jump { animation: pokeJump .9s cubic-bezier(.3, .7, .4, 1) !important; transform-origin: 50% 100%; }
.potato-ink.poke-shake { animation: pokeShake .7s linear !important; transform-origin: 50% 90%; }
.potato-ink.poke-droop { animation: pokeDroop .9s ease-in-out !important; transform-origin: 50% 100%; }
.potato-ink.poke-spin { animation: pokeSpin .8s cubic-bezier(.5, 0, .3, 1.3) !important; transform-origin: 50% 60%; }
@keyframes pokeJump { 0% { transform: scale(1, 1); } 15% { transform: scale(1.12, .86); } 45% { transform: translateY(-28%) scale(.94, 1.08); } 70% { transform: translateY(0) scale(1.1, .9); } 85% { transform: scale(.97, 1.03); } 100% { transform: none; } }
@keyframes pokeShake { 0%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: translateX(-6%) rotate(-8deg); } 20%, 40%, 60%, 80% { transform: translateX(6%) rotate(8deg); } }
@keyframes pokeDroop { 0% { transform: none; } 35% { transform: translateY(8%) scale(1.06, .82); } 70% { transform: translateY(8%) scale(1.06, .82) rotate(-4deg); } 100% { transform: none; } }
@keyframes pokeSpin { 0% { transform: none; } 60% { transform: rotate(380deg) scale(1.05); } 100% { transform: rotate(360deg); } }
.potato-ink.poke-jump .arm-l, .potato-ink.poke-spin .arm-l { animation: armUpL .45s ease-in-out 2 !important; }
.potato-ink.poke-jump .arm-r, .potato-ink.poke-spin .arm-r { animation: armUpR .45s ease-in-out 2 !important; }
.potato-ink.poke-shake .arm-l { animation: armL .14s linear 5 !important; }
.potato-ink.poke-shake .arm-r { animation: armR .14s linear 5 !important; }
@keyframes armUpL { 50% { transform: rotate(70deg); } }
@keyframes armUpR { 50% { transform: rotate(-70deg); } }
.poke-say { position: fixed; z-index: 70; max-width: 230px; padding: 8px 12px 10px; border-radius: 16px; background: var(--bot); color: var(--ink); border: 3px solid var(--line); box-shadow: inset 0 -4px 0 var(--soft), 0 3px 0 var(--line), 0 8px 16px -6px rgba(58,36,23,.5); font-family: var(--head); font-size: 15px; line-height: 1.35; text-align: center; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .18s, transform .22s cubic-bezier(.3, 1.6, .5, 1); word-break: keep-all; }
.poke-say.on { opacity: 1; transform: none; }
.poke-say::after { content: ''; position: absolute; left: calc(var(--tail, 50%) - 8px); bottom: -15px; border: 8px solid transparent; border-top-color: var(--line); }
.poke-say.below::after { bottom: auto; top: -15px; border-top-color: transparent; border-bottom-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .potato-ink[class*="poke-"] { animation: none !important; } }

/* ---------- 결제 완료 축하 연출 (2026-10-29 시안, fx.js) ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 80; pointer-events: none; }
.fx-layer { position: fixed; inset: 0; z-index: 81; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: auto; background: radial-gradient(rgba(255,240,200,.35), rgba(58,36,23,.18)); animation: fxIn .25s ease-out both; }
.fx-layer.out { opacity: 0; transition: opacity .35s; }
@keyframes fxIn { from { opacity: 0; } }
.fx-banner { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--lemon); border: 3px solid var(--line); border-radius: 22px; padding: 12px 22px 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -6px 0 var(--lemon-sh), 0 4px 0 var(--line), 0 14px 24px -8px rgba(58,36,23,.55); animation: fxPop .55s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
.fx-banner.late { animation-delay: .55s; }
.fx-banner b { font-family: var(--head); font-weight: 400; font-size: 26px; color: var(--tomato); -webkit-text-stroke: 1.5px var(--line); paint-order: stroke fill; }
.fx-banner small { font-family: var(--head); font-size: 14px; color: var(--ink); }
.fx-pot .ic { width: 46px; height: 46px; animation: fxSpinPot 1.2s ease-in-out .5s 2; }
@keyframes fxPop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes fxSpinPot { 50% { transform: rotate(20deg) scale(1.2); } }
.fx-hero { animation: fxHero 1.4s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
.fx-hero .arm-l { animation: armUpL .4s ease-in-out infinite; } .fx-hero .arm-r { animation: armUpR .4s ease-in-out infinite; }
@keyframes fxHero { 0% { transform: translateY(70vh); } 45% { transform: translateY(-30px) scale(1.05, .95); } 60% { transform: translateY(0) scale(1.08, .92); } 75% { transform: translateY(-14px); } 100% { transform: none; } }
.fx-stamp { width: 170px; height: 170px; border-radius: 50%; border: 9px double #d9452a; display: grid; place-items: center; color: #d9452a; font-family: var(--head); font-size: 40px; line-height: 1.05; text-align: center; transform: rotate(-14deg); background: rgba(255,246,226,.85); box-shadow: 0 0 0 3px rgba(217,69,42,.25); animation: fxStamp .45s cubic-bezier(.5, 0, .7, 1.4) both; }
.fx-stamp span { text-shadow: 1px 1px 0 rgba(217,69,42,.35); letter-spacing: 2px; }
@keyframes fxStamp { 0% { transform: rotate(-30deg) scale(3); opacity: 0; } 55% { opacity: 1; } 75% { transform: rotate(-14deg) scale(.92); } 100% { transform: rotate(-14deg) scale(1); } }
.fx-shake { animation: fxShake .35s linear .22s; }
@keyframes fxShake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
@media (prefers-reduced-motion: reduce) { .fx-canvas { display: none; } .fx-layer * { animation: none !important; } }

/* ---------- 상단 둥근 나무 버튼(뒤로·처음부터) · 감자 충전 · 보내기 (2026-10-29 다듬기) ---------- */
.icon-btn { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 50%; color: #fff4dc; font-size: 20px;
  background: #6b4429; background-image: radial-gradient(circle at 35% 28%, rgba(255,236,200,.28), transparent 60%); border: 3px solid var(--line);
  box-shadow: inset 0 2px 0 rgba(255,236,200,.35), inset 0 -4px 0 rgba(36,21,13,.45), 0 3px 0 var(--line); text-shadow: none; transition: transform .08s, box-shadow .08s; }
.icon-btn svg { width: 24px; height: 24px; display: block; }
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,236,200,.35), inset 0 -2px 0 rgba(36,21,13,.45), 0 1px 0 var(--line); }
#resetBtn:active svg { transform: rotate(-60deg); transition: transform .15s; }

.chips-count { padding: 3px 4px 3px 6px; gap: 4px; min-height: 44px; }
.chips-count::after { content: ''; width: 30px; height: 30px; margin-left: 4px; border-radius: 50%; border: 3px solid var(--line);
  background: var(--tomato) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%233a2417' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 var(--tomato-sh); }
.chips-count:active { transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -2px 0 var(--soft), 0 1px 0 var(--line); }
.chips-count.empty::after { animation: plusPulse 1.6s ease-in-out infinite; }
@keyframes plusPulse { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18) rotate(90deg); } 90% { transform: scale(.95) rotate(90deg); } }

.send { flex: 0 0 52px; width: 52px; height: 52px; padding: 0; background-image: radial-gradient(circle at 34% 28%, rgba(255,255,255,.35), transparent 55%); }
.send .ic { width: 28px; height: 28px; transform: translate(-1px, 1px); transition: transform .18s; }
.send:active .ic { transform: translate(4px, -4px) scale(.9); }
.inrow input:placeholder-shown + .send { filter: saturate(.75); }
@media (prefers-reduced-motion: reduce) { .chips-count.empty::after { animation: none; } }
.chat-head .who small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }