/* ===== 아기자기 다꾸 장식 (세 화면 공통) =====
   - 다이어리 속지(도트) 배경 + 손글씨 제목(개구체) + 무늬 마스킹테이프
   - 도장(입금·주문·전달·정산·방문 완료) + 스티커 태그
   - 손그림 낙서(탭 아이콘, 빈 화면, 홈)
   숫자·금액·본문은 원래 글꼴 그대로 둬요. */
:root{
  --display:"Gaegu","IBM Plex Sans KR",system-ui,sans-serif;
  --dotc:color-mix(in srgb, var(--ink) 9%, transparent);
  --stamp:var(--accent);
  /* 손그림 낙서 (선으로 그린 모양, 색은 칠하는 쪽에서 정해요) */
  --i-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2.8l2.7 5.8 6.3.7-4.7 4.3 1.3 6.3L12 16.7l-5.6 3.2 1.3-6.3L3 9.3l6.3-.7z'/%3E%3C/svg%3E");
  --i-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 20.5s-7.2-4.3-8.9-8.6C1.8 8.4 3.9 5 7.2 5c2 0 3.7 1.2 4.8 3 1.1-1.8 2.8-3 4.8-3 3.3 0 5.4 3.4 4.1 6.9-1.7 4.3-8.9 8.6-8.9 8.6z'/%3E%3C/svg%3E");
  --i-clover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='6.8' r='3.6'/%3E%3Ccircle cx='6.8' cy='12' r='3.6'/%3E%3Ccircle cx='17.2' cy='12' r='3.6'/%3E%3Cpath d='M12 12.5v9M12 18c1.5-.5 2.6-.2 3.6.8'/%3E%3C/svg%3E");
  --i-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2.5c.7 5 2.5 7.1 7.5 7.8-5 .7-6.8 2.8-7.5 7.8-.7-5-2.5-7.1-7.5-7.8 5-.7 6.8-2.8 7.5-7.8zM19.5 16.5c.3 2 .9 2.7 2.8 3-1.9.3-2.5 1-2.8 3-.3-2-.9-2.7-2.8-3 1.9-.3 2.5-1 2.8-3z'/%3E%3C/svg%3E");
  --i-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cellipse cx='12' cy='8' rx='7.5' ry='3.5'/%3E%3Cpath d='M4.5 8v4c0 1.9 3.4 3.5 7.5 3.5s7.5-1.6 7.5-3.5V8M4.5 12v4c0 1.9 3.4 3.5 7.5 3.5s7.5-1.6 7.5-3.5v-4'/%3E%3C/svg%3E");
  --i-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 6.5l5.5-2.5 6 2.5 5.5-2.5v13.5L15 20l-6-2.5-5.5 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E");
  --i-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 8.5h14l-1.2 11.5H6.2z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E");
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.3 15.3l5.2 5.2M7.8 8.6c.6-1.1 1.6-1.7 2.8-1.8'/%3E%3C/svg%3E");
  --i-friends:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='9' r='3.3'/%3E%3Ccircle cx='16.5' cy='10' r='2.7'/%3E%3Cpath d='M2.8 19.5c.6-3.2 2.9-5 5.7-5s5.1 1.8 5.7 5M14.5 15.2c.6-.3 1.3-.4 2-.4 2.3 0 4 1.5 4.6 4.2'/%3E%3C/svg%3E");
  --i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8.3 10.5V7.8a3.7 3.7 0 0 1 7.4 0v2.7M12 14.5v2.3'/%3E%3C/svg%3E");
}
.pg-dd{ --stamp:#C23F87; }
.pg-fair{ --stamp:#2C7A72; }
.pg-home{ --stamp:#3E7A2A; }
@media (prefers-color-scheme: dark){
  .pg-dd{ --stamp:#F08BC0; } .pg-fair{ --stamp:#6FCBBF; } .pg-home{ --stamp:#A9D995; }
}

/* ---- 1. 다이어리 속지 + 손글씨 제목 + 무늬 테이프 ---- */
body{background:radial-gradient(circle at 1px 1px, var(--dotc) 1.1px, transparent 1.5px) 0 0/18px 18px, var(--grain), var(--bg)}
/* 손글씨는 큰 제목에만 (로고 · 화면 제목 · 띵팟 이름 · 홈 섹션). 작은 제목은 또렷한 본문 글꼴로 */
h1,.owner,#fairTitle,.sec h2{font-family:var(--display);font-weight:700;letter-spacing:-.07em;word-spacing:.12em}
.sheet h2,.sheet .h strong,.hph b,.ph b,.next strong,.phase h2,.pick button b,.step h2{font-family:var(--body);font-weight:700;letter-spacing:-.02em;word-spacing:0}
h1{font-size:38px}
.owner{font-size:26px}
.sheet h2,.sheet .h strong{font-size:20px;line-height:1.3}
.phase h2{font-size:17px}
.next strong{font-size:19px}
.ph b{font-size:16px}
.hph b{font-size:15.5px}
#fairTitle{font-size:31px}
/* 금액·숫자는 또렷하게 */
.tile b,.stat b,.ochip,.count b,.buysum b{font-family:var(--body);font-weight:600;letter-spacing:0}
.tile b{font-size:21px} .stat b{font-size:17px} .ochip{font-size:14px;padding:2px 9px}
/* 마스킹테이프 무늬: 줄무늬 / 도트 번갈아 */
h1 .tape,#fairTitle,.pg-home .tape{background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.42) 0 5px, transparent 5px 11px)}
.owner .tape{background-image:radial-gradient(circle, rgba(255,255,255,.62) 1.6px, transparent 2.1px);background-size:9px 9px}
.land:nth-child(3n+2) .owner .tape{background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 4px, transparent 4px 10px);background-size:auto}
@media (prefers-color-scheme: dark){
  h1 .tape,#fairTitle,.pg-home .tape{background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 5px, transparent 5px 11px)}
  .owner .tape{background-image:radial-gradient(circle, rgba(255,255,255,.14) 1.6px, transparent 2.1px)}
}

/* ---- 2. 도장 + 스티커 ---- */
.paid.on,.got.on,.donebtn.on{background:transparent!important;color:var(--stamp)!important;border:2px solid var(--stamp)!important;border-radius:999px!important;box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3.5px var(--stamp)!important;font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.06em;line-height:1;transform:rotate(-6deg);padding:6px 12px;opacity:.92}
.got.on{transform:rotate(-3deg)}
.chip.done{background:transparent!important;color:var(--stamp)!important;border:1.5px solid var(--stamp);border-radius:999px!important;font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.06em;line-height:1.1;padding:2px 9px;transform:rotate(-5deg);box-shadow:none!important}
/* 방문한 부스: '방문!' 도장 */
.item.done{position:relative}
.item.done::after{content:"방문!";position:absolute;right:48px;top:50%;transform:translateY(-50%) rotate(-9deg);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.06em;line-height:1;color:var(--stamp);border:2px solid var(--stamp);border-radius:999px;padding:3px 9px;opacity:.85;pointer-events:none;background:var(--surface)}
/* 스티커: 흰 테두리 + 살짝 기울기 */
.chip,.zz,.dd2{border-radius:6px!important;box-shadow:0 0 0 2px var(--surface), 0 1.5px 3px rgba(0,0,0,.14)}
/* 스티커 기울기는 빼서 줄이 가지런하게 */

/* ---- 3. 손그림 낙서 ---- */
.doo{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}
/* 탭 아이콘 */
.tabs button::before{content:"";display:inline-block;width:15px;height:15px;margin-right:5px;vertical-align:-2px;background:currentColor;-webkit-mask:var(--ic, var(--i-star)) center/contain no-repeat;mask:var(--ic, var(--i-star)) center/contain no-repeat}
#tSum{--ic:var(--i-spark)} #tList{--ic:var(--i-heart)} #tOpen{--ic:var(--i-clover)} #tSettle{--ic:var(--i-coin)}
#tabRoute{--ic:var(--i-star)} #tabMap{--ic:var(--i-map)} #tabBuy{--ic:var(--i-bag)} #tabAll{--ic:var(--i-friends)}
@media (max-width: 360px){ .tabs button::before{display:none} }
/* 빈 화면 */
.empty::before,.mapempty::before{content:"";display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-4px;background:var(--stamp);-webkit-mask:var(--i-spark) center/contain no-repeat;mask:var(--i-spark) center/contain no-repeat}
/* 제목 옆 작은 반짝이 */
.sec > h3 > span:first-child::before,.fsec h3::before,.sgrp h3::before{content:"";display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;background:var(--stamp);-webkit-mask:var(--i-spark) center/contain no-repeat;mask:var(--i-spark) center/contain no-repeat;opacity:.8}
/* 동물 얼굴 (페어플랜의 사람 표시) */
.face{display:inline-block;width:20px;height:20px;flex:none;vertical-align:-5px}
.face.s{width:16px;height:16px;vertical-align:-3px}
.face.l{width:26px;height:26px;vertical-align:-7px}
@media (prefers-reduced-motion: reduce){ .chip,.paid.on,.got.on{transform:none!important} }

/* ---- 넓은 화면(PC·태블릿 가로): 창은 오른쪽 서랍으로 ---- */
@media (min-width: 1100px){
  body.pg-dd .sheet, body.pg-fair .sheet{left:auto;right:24px;top:24px;bottom:24px;width:460px;max-width:none;max-height:none;margin:0;border-radius:12px;-webkit-mask:none;mask:none;padding:22px 20px 24px;box-shadow:0 14px 44px rgba(0,0,0,.28);overflow-y:auto;align-content:start;animation:dk-drawer .18s ease-out}
  body.pg-fair .scrim{background:rgba(10,14,20,.16)}
}
@keyframes dk-drawer{from{transform:translateX(28px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){ body .sheet{animation:none!important} }

/* ---- 가독성 다듬기 (세 화면 공통) ---- */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.note{line-height:1.55}
button,input,select,textarea{font-feature-settings:"tnum" 1}
.paid.on,.got.on,.donebtn.on{transform:rotate(-4deg)}
.chip.done{transform:rotate(-3deg)}