/* ===== 조각조각 · 정돈 레이어 =====
   원칙: 정돈된 생활 정보 위에 작은 다꾸 흔적 하나.
   - 바탕은 따뜻한 종이색(무채색), 기능 색은 한 곳에만 (탭 선택 · 작은 점 · 테이프)
   - 카드는 반듯하게: 흰 종이 · 얇은 선 · 둥근 모서리 12px. 찢어진 종이는 강조 카드에만
   - 모서리: 카드 12 · 입력/버튼 8 · 칩 둥글게
   - 손글씨는 로고 · 화면 제목 · 메모 제목 · 도장에만. 기울기는 장식(테이프·도장)에만
   다크 모드는 원래 색 그대로 두고, 모양만 같이 정리해요. */

/* ---- 1. 바탕 · 색 (밝은 화면) ---- */
@media not (prefers-color-scheme: dark){
  :root{
    --bg:#F8F7F2; --surface:#FFFFFF; --line:#E6E3D9; --muted:#6A6A72;
    --grain:linear-gradient(transparent,transparent);
    --dotc:rgba(40,40,50,.07);
  }
  body.pg-home{ --pale:#F1EFE8; --ink:#27293A; }
  body.pg-dd{ --pale:#F3F1EC; --ink:#2A2836; --tape:rgba(221,214,244,.95); }
  body.pg-fair{ --pale:#F1F1EC; --ink:#26303A; --booth:#EEF0EC; --surface:#FFFFFF; }
}
body{background:radial-gradient(circle at 1px 1px, var(--dotc) 1px, transparent 1.4px) 0 0/20px 20px, var(--bg)}
header,.stick{background:var(--bg)}

/* ---- 2. 카드: 반듯하게 ---- */
.paper,.land,.card,.tile,.rows,.hc,.step,.tabs,.item,.pcard,.bgroup,.stat,.ddexp,.whoami,.locbar,.scroller,.cycle,.frow,
.sec,.finder,.lr,.qrcard,.sheet,.hpop,.dash .dnote{
  -webkit-mask:none!important;mask:none!important;transform:none!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(30,30,40,.03)!important;
  border:0;
}
.paper,.land,.card,.hc,.sec,.finder,.step,.ddexp,.pcard,.bgroup{padding-bottom:16px}
.tile,.stat{padding-bottom:14px}
.tabs{padding:4px!important}
.land{overflow:hidden}
/* 강조 카드만 찢어진 종이: 내 할 일 메모 · 다음 부스 */
.memo{transform:none!important}
.next{border-radius:12px}
/* 안쪽 칸은 옅은 종이색 */
.parts,.lsum,.pact,.mock,.hl,.pg-fair .dd,.ef,.pastbar,.lsbar{background:var(--pale)!important}
.parts{border-radius:10px!important}
.lsbar{border-top:1px solid var(--line)}
/* 색 테두리는 빼고 무채색 선으로 */
.hc,.sec,.inbox,.lr{border-left:0!important}
.hc{box-shadow:0 0 0 1px var(--line)!important}
.inbox{box-shadow:0 0 0 1px var(--line)!important;background:var(--surface)!important}
.item.pri{box-shadow:0 0 0 1.5px var(--accent)!important}
.item.walk{background:var(--pale)!important}
.pcard.me,.frow.on{box-shadow:0 0 0 1.5px var(--accent)!important}
.whoami.join{background:var(--surface)!important}
.sheet{border-radius:16px 16px 0 0!important;padding-top:20px}
.hpop{border-top:0!important;box-shadow:0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.12)!important}

/* ---- 3. 모서리 · 버튼 · 칩 ---- */
input,select,textarea,.btn,.acts button,.ddexp-b button,.addbuy button,.ddform button,.bctl button,.edt,.got,.paid,.ctl button,.stseg,.qbtn,.edbtn,.foot button,.mv button,.buyadd,.filters button,.rb,.mact,.joinbtn,.seg,.seg button,.lseg,.lseg button,.pe input,.pe .add{border-radius:8px!important}
.tabs button{border-radius:9px!important}
.chip,.zz,.dd2,.pc,.tag,.st,.sumln .pc{border-radius:999px!important}
.chip{box-shadow:none!important}
.chip:not(.acc):not(.alert):not(.done):not(.b):not(.walk):not(.add){background:var(--pale)!important;color:var(--ink)!important}
.buyadd{background:var(--surface)!important;border:1.5px dashed var(--line)!important;color:var(--ink)!important}
.qbtn{border-radius:50%!important}

/* ---- 4. 손글씨는 줄이고, 제목은 또렷하게 ---- */
.owner{font-family:var(--body)!important;font-weight:700!important;letter-spacing:-.02em!important;word-spacing:0!important;font-size:17px!important}
.owner .tape{padding:3px 10px 2px!important;transform:rotate(-1deg)}
.sec h2{font-family:var(--body)!important;font-weight:700!important;letter-spacing:-.02em!important;word-spacing:0!important}

/* ---- 5. 홈 카드: 이름 → 설명 → 지금 상태 ---- */
.pg-home .sec{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:16px 18px!important;min-height:0!important}
.pg-home .sec:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 25%, var(--line)), 0 2px 8px rgba(30,30,40,.06)!important}
.pg-home .sec .kind,.pg-home .sec .cd{display:none}
.pg-home .sec h2{grid-row:1;font-size:18px!important;display:flex;align-items:center;gap:8px}
.pg-home .sec h2 .tape{background:none!important;padding:0!important;clip-path:none!important;transform:none!important;color:var(--ink)!important;border:0!important}
.pg-home .sec h2::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.pg-home .sec.dd h2::before{background:var(--d-main)}
.pg-home .sec.fair h2::before{background:var(--f-main)}
.pg-home .sec .go{grid-row:1 / 3;width:34px;height:34px;font-size:18px;background:var(--pale)!important;color:var(--ink)!important}
.pg-home .sec .desc{grid-column:1;font-size:13px}
.pg-home .sec .stats{grid-column:1 / -1;gap:0;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.pg-home .sec .stats .chip{background:none!important;box-shadow:none!important;padding:0!important;font-size:12.5px;font-weight:600;color:var(--ink)!important;transform:none!important}
.pg-home .sec .stats .chip + .chip::before{content:"·";margin:0 7px;color:var(--muted);font-weight:400}
.pg-home .sec .stats .chip.alert{color:#C0473A!important}



.pg-home header .tape{border-bottom-width:0}

/* ---- 6. 조각마켓: 도장이 주인공, 나머지는 조용히 ---- */
.pg-dd .land .lh{padding-bottom:10px}
.pg-dd .good + .good{border-top:1px solid var(--line)}
.pg-dd .hc .hch b{font-size:15px}
.pg-dd .tabs button[aria-selected="true"]{box-shadow:none}
.pg-dd .lfoot{border-top:1px solid var(--line)}

/* ---- 7. 페어플랜: 체크 · 메모가 주인공 ---- */
.pg-fair #fairTitle{font-size:28px}
.pg-fair .cell{border-radius:6px}
.pg-fair .stat b{letter-spacing:-.01em}

/* ---- 다크 모드: 모양만 같이 ---- */
@media (prefers-color-scheme: dark){
  .paper,.land,.card,.tile,.rows,.hc,.step,.tabs,.item,.pcard,.bgroup,.stat,.ddexp,.whoami,.locbar,.scroller,.cycle,.frow,.sec,.finder,.lr,.qrcard,.sheet,.hpop{box-shadow:0 0 0 1px var(--line)!important}
}
@media (min-width: 1100px){ body.pg-dd .sheet, body.pg-fair .sheet{border-radius:12px!important} }

/* ================================================================
   조각조각 테마 · 알록달록 다꾸 (크림 바탕 + 파스텔 판 + 그림 아이콘 + 작은 다꾸템)
   ================================================================ */
:root{
  --display:"Sunflower","Pretendard Variable","Pretendard",system-ui,sans-serif;
  --body:"Pretendard Variable","Pretendard","IBM Plex Sans KR",system-ui,-apple-system,sans-serif;
  --hand:"Nanum Pen Script","Gaegu",cursive;
  --cream:#FBF7F0; --card:#FFFFFF; --ink:#2B2830; --muted:#8A8590; --line:#EFE7DC;
  --pink:#FBE4E3; --pink2:#F6C9CC; --rose:#E8546B;
  --mint:#DDF1E7; --mint2:#9ED6BC; --green:#4FB286;
  --lav:#E9E3F8; --lav2:#C9BCEE; --purple:#7C68C9;
  --butter:#FFF3CF; --butter2:#FFE08A;
  --sky:#DDEBF7; --sky2:#B5D3EE;
  --r-card:18px; --r-tile:14px; --r-in:10px;
}
@media not (prefers-color-scheme: dark){
  :root{ --bg:var(--cream); --surface:#FFFFFF; --line:#EFE7DC; --muted:#8A8590; --pale:#F6F1E9; --dotc:transparent; }
  body.pg-home{ --ink:#2B2830; --main:#4FB286; --main-ink:#2F8A62; }
  body.pg-dd{ --ink:#2B2830; --main:#7C68C9; --main-ink:#5E4BAE; --logo:#5E4BAE; --accent:#7C68C9; --tape:#E9E3F8; --tape-ink:#5E4BAE; --stamp:#D0506A; }
  body.pg-fair{ --ink:#2B2830; --accent:#3FA58F; --logo:#2F8A76; --accent-soft:#DDF1E7; --tape:#DDF1E7; --stamp:#2F8A76; --booth:#F4F0E8; }
}
@media (prefers-color-scheme: dark){
  :root{ --cream:#1F1D24; --card:#29262F; --pink:#3A2A30; --mint:#233329; --lav:#2E2940; --butter:#3A3424; --sky:#23303D; }
  /* 어두운 화면: 글씨는 밝게 (홈·조각마켓 제목이 안 보이던 문제) */
  :root, body.pg-home, body.pg-dd{ --ink:#F3EFF6; --on-ink:#1F1D24; }
}
html,body{background:var(--bg)!important}
body{font-family:var(--body)!important;letter-spacing:-.01em}
header,.stick{background:var(--bg)!important}
.doodles{display:none}

/* ---- 제목 ---- */
h1{font-family:var(--display)!important;font-weight:400!important;letter-spacing:-.02em!important;word-spacing:0!important;font-size:34px!important;display:flex;align-items:center;gap:6px}
h1 .tape,#fairTitle,.pg-home .tape{background:none!important;clip-path:none!important;transform:none!important;padding:0!important;border:0!important;color:var(--ink)!important}
.logo-pieces{display:inline-block;width:32px;height:28px;margin-top:-10px}
.logo-pieces svg{width:100%;height:100%}
#fairTitle{font-family:var(--display)!important;font-weight:400!important;font-size:27px!important;letter-spacing:-.02em!important}
.motto{margin-top:6px!important}
.motto .ml{font-family:var(--body)!important;font-weight:500!important;font-size:14px!important;letter-spacing:-.01em!important;background:none!important;color:#5D5864!important;padding:0!important}
.shd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 2px 10px}
.shd h2{margin:0;font-family:var(--body)!important;font-weight:800!important;font-size:20px;letter-spacing:-.03em;display:flex;align-items:center;gap:6px}
.shd h2 .n{font-size:12px;font-weight:700;color:#fff;background:var(--rose);border-radius:999px;padding:1px 8px}
.shd a,.shd button{font-size:13px;color:var(--muted);text-decoration:none;background:none;border:0;font-weight:600;cursor:pointer}

/* ---- 카드 공통 ---- */
.paper,.land,.card,.tile,.rows,.hc,.step,.tabs,.item,.pcard,.bgroup,.stat,.ddexp,.whoami,.locbar,.scroller,.cycle,.frow,
.lr,.qrcard,.hpop,.dash .dnote,.buyadd,.finder{border-radius:var(--r-card)!important;background:var(--card)!important;box-shadow:0 1px 2px rgba(60,40,30,.04), 0 6px 18px -8px rgba(60,40,30,.14)!important;border:0}
.sheet{border-radius:22px 22px 0 0!important}
.tabs{border-radius:14px!important;padding:5px!important}
.tabs button{border-radius:10px!important;font-weight:700}
.tabs button[aria-selected="true"]{background:var(--ink)!important;color:var(--on-ink,#fff)!important}
input,select,textarea{border-radius:var(--r-in)!important}
.btn,.acts button,.ddexp-b button,.addbuy button,.ddform button,.bctl button,.edt,.got,.paid,.ctl button,.qbtn,.foot button,.mv button,.rb,.mact,.joinbtn,.filters button,.seg,.seg button,.lseg,.lseg button{border-radius:12px!important}
.chip,.zz,.dd2,.pc,.tag,.st,.sumln .pc{border-radius:999px!important}
.btn.acc,.seg button[aria-pressed="true"],.lseg button[aria-pressed="true"]{background:var(--ink)!important;color:var(--on-ink,#fff)!important;border-color:var(--ink)!important}
.fab,.fabs button{background:var(--ink)!important;color:var(--on-ink,#fff)!important}



/* ================= 홈 ================= */
.pg-home header{padding-top:22px!important;position:relative}
.hfind{position:absolute;right:2px;top:26px;width:42px;height:42px;border-radius:50%;border:0;background:var(--card);box-shadow:0 2px 10px -4px rgba(0,0,0,.18);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.hfind svg{width:21px;height:21px}
.roomline{margin-top:12px!important;font-size:12.5px}
.roomline .rname{font-size:14px!important}
.nick{margin-top:12px!important}
/* 찾기: 헤더 돋보기로 열기 */
.pg-home .finder{display:none;margin-top:14px;padding:14px!important}
.pg-home .finder.open{display:grid}
.pg-home .finder .ft{font-family:var(--body)!important;font-weight:800;color:var(--ink)!important}
/* 오늘 준비할 것: 분홍 판 */
.today{background:var(--pink);border-radius:24px;padding:4px 14px 14px;position:relative}
.today > .shd{margin:14px 4px 10px}
.fcard{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 92px;gap:2px 12px;align-items:center;background:var(--card);border-radius:var(--r-card);padding:16px 16px 14px;text-decoration:none;color:var(--ink);box-shadow:0 6px 16px -10px rgba(120,60,60,.35)}
.fcard .fic{grid-row:1 / 3;width:40px;height:40px;align-self:start}
.fcard .fic svg,.mini2 i svg,.sico svg,.fbooth svg,.cat svg,.none i svg{width:100%;height:100%;display:block}
.fcard .fn{display:flex;align-items:baseline;gap:8px;min-width:0}
.fcard .fn b{font-size:18px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .fn em{font-style:normal;font-weight:800;font-size:19px;color:var(--rose);white-space:nowrap}
.fcard .fs{grid-column:2;font-size:12.5px;color:var(--muted)}
.fcard .fbooth{grid-column:3;grid-row:1 / 3;width:92px;height:70px;margin:-6px -4px -4px 0}
.fcard .sticker{position:absolute;right:-6px;top:-12px;width:54px;height:54px;border-radius:50%;background:var(--pink2);color:#B03850;font-family:var(--hand);font-size:14px;line-height:1;display:grid;place-items:center;text-align:center;transform:rotate(12deg);box-shadow:0 0 0 3px #fff, 0 3px 8px rgba(0,0,0,.15)}
.fcard .fp{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:12px}
.fcard .fpl{font-size:13px;color:var(--muted)} .fcard .fpl b{color:var(--ink);font-weight:800;margin-right:4px}
.fcard .bar{height:9px;border-radius:9px;background:#EEE9E1;overflow:hidden} .fcard .bar i{display:block;height:100%;border-radius:9px;background:var(--green)}
.fcard .pc{font-size:12.5px;color:var(--muted);font-weight:700}
.fcard .fsteps{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.fcard .fsteps span{font-size:12px;padding:3px 9px;border-radius:999px;background:#F4EFE8;color:var(--muted);font-weight:600}
.fcard .fsteps span.ok{background:var(--mint);color:#2F8A62}
.fcard.empty{grid-template-columns:40px 1fr}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mini2{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border-radius:var(--r-tile);text-decoration:none;color:var(--ink);background:#FFF8F4}
.mini2:nth-child(2){background:#F2FAF6}
.mini2 i{width:34px;height:34px}
.mini2 small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.mini2 b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.mini2 .ar,.fcard .ar,.tcard .ar,.sec .go{color:var(--muted)}
/* 내 공간: 민트 · 라벤더 타일 */
.pg-home #spaceH{margin-top:26px}
.pg-home .sections{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:0!important}
.pg-home .sec{position:relative;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;grid-template-rows:auto auto;gap:6px 10px!important;align-items:start;padding:16px 14px 14px!important;border-radius:var(--r-card)!important;box-shadow:none!important;border:0!important;min-height:0!important;text-decoration:none;color:var(--ink)}
.pg-home .sec.dd{background:var(--mint)!important} .pg-home .sec.fair{background:var(--lav)!important}
.pg-home .sec .sico{grid-row:1 / 3;width:44px;height:44px}
.pg-home .sec .kind,.pg-home .sec .desc,.pg-home .sec .cd{display:none!important}
.pg-home .sec h2{grid-column:2;margin:0;font-family:var(--body)!important;font-weight:800!important;font-size:17px!important;letter-spacing:-.03em!important}
.pg-home .sec h2 .tape{font:inherit!important}
.pg-home .sec h2::before{display:none!important}
.pg-home .sec .go{position:absolute;right:10px;top:16px;width:auto!important;height:auto!important;background:none!important;font-size:20px}
.pg-home .sec .stats{grid-column:2;display:grid!important;gap:2px!important;margin:0!important;padding:0!important;border:0!important}
.pg-home .sec .st1{font-size:12.5px;color:#4E4A55}
.pg-home .sec .st1 b{font-weight:800;color:var(--ink)}
.pg-home .sec .st1.dday{color:var(--rose);font-weight:700}
.pg-home .sec .st1.alert{color:var(--rose)}
.pg-home .sec::after{content:"";position:absolute;right:26px;top:-6px;width:40px;height:14px;transform:rotate(18deg);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, transparent 2px 6px), var(--w, #F6C9CC);clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%,4% 75%,0 50%,4% 25%);opacity:.95}
.pg-home .sec.dd::after{--w:#FFE08A} .pg-home .sec.fair::after{--w:#F6C9CC;transform:rotate(-14deg)}
/* 내 할 일: 흰 카드 체크리스트 */
.todo2 .tcard{background:var(--card);border-radius:var(--r-card);box-shadow:0 1px 2px rgba(60,40,30,.04), 0 6px 18px -8px rgba(60,40,30,.14);padding:4px 16px}
.todo2 ul{list-style:none;margin:0;padding:0}
.todo2 li + li{border-top:1px solid var(--line)}
.todo2 .tgrp + .tgrp{border-top:1px solid var(--line);margin-top:2px}
.todo2 .tgh{display:flex;align-items:center;gap:8px;padding:12px 0 2px;font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.todo2 .tgh .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--line);color:var(--ink);display:inline-grid;place-items:center;font-size:11.5px}
.todo2 .tgh .n.hot{background:var(--rose);color:#fff}
.todo2 .tgrp li a{padding:10px 0}
.todo2 .tgm{border:0;background:none;padding:0 0 10px 34px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.todo2 li a{display:grid;grid-template-columns:22px minmax(0,1fr) auto 12px;gap:12px;align-items:center;padding:13px 0;text-decoration:none;color:var(--ink)}
.todo2 .cb{width:20px;height:20px;border:2px solid #CFC7D4;border-radius:6px;background:#fff}
.todo2 li.fr .cb{border-radius:50%}
.todo2 .tx{font-size:15px;font-weight:600;min-width:0}
.todo2 .tx small{display:block;font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo2 .due{font-size:12.5px;color:var(--muted);white-space:nowrap}
.todo2 .due.hot{color:#fff;background:var(--rose);border-radius:999px;padding:2px 8px;font-weight:700}
.todo2 .wait{display:block;border-top:1px dashed var(--line);padding:11px 0;font-size:12.5px;color:var(--muted);text-decoration:none}
.todo2 .none{display:flex;align-items:center;gap:10px;padding:16px 0;color:var(--muted);font-size:14px}
.todo2 .none i{width:32px;height:32px}
/* 마무리 한 줄: 마테 위 손글씨 + 고양이 */
.closing{position:relative;margin:26px 4px 4px;display:flex;align-items:center;justify-content:center;gap:4px}
.closing .wt{font-family:var(--hand);font-size:21px;color:#5B4E3C;padding:4px 14px;transform:rotate(-2deg);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, transparent 2px 6px), #FFE9A8;clip-path:polygon(0 0,100% 0,98% 25%,100% 50%,98% 75%,100% 100%,0 100%,2% 75%,0 50%,2% 25%)}
.closing .cat{width:74px;height:42px;flex:none;margin-left:-6px}
.pg-home .dash{margin-top:14px!important}
.pg-home .foot{margin-top:18px}
/* 로비 */
.lobbyhd b{font-family:var(--body)!important;font-weight:800!important}
.setup h2,.rooms h2{font-weight:800!important}

/* ================= 아래 탭 바 ================= */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.tabbar a{display:grid;justify-items:center;gap:2px;text-decoration:none;color:#857F8C;font-size:12px;font-weight:600;padding:4px 0}
.tabbar a svg{width:23px;height:23px}
/* 가운데 두 개가 메인: 칸을 넓게, 아이콘·글자를 크게. 양옆(홈·찾기)은 작게 */
.tabbar{grid-template-columns:.8fr 1.2fr 1.2fr .8fr}
.tabbar a:not(.main){font-size:11px} .tabbar a:not(.main) svg{width:20px;height:20px}
.tabbar a.main{font-size:13px;font-weight:700} .tabbar a.main:not([aria-current="page"]){color:var(--ink,#283047)} .tabbar a.main svg{width:26px;height:26px}
.tabbar a[aria-current="page"]{color:var(--green)}
.pg-dd .tabbar a[aria-current="page"]{color:var(--purple)}
.pg-fair .tabbar a[aria-current="page"]{color:#2F8A76}
body.has-tabbar{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
body.has-tabbar .fabs,body.has-tabbar .fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
body.has-tabbar .undo{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
body.has-tabbar .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
body.has-tabbar .sheet{z-index:30}
@media (min-width: 1000px){ .tabbar{display:none} body.has-tabbar{padding-bottom:0!important} body.has-tabbar .fabs,body.has-tabbar .fab{bottom:28px!important} }

/* ================= 조각마켓 ================= */
.pg-dd header h1{font-size:30px!important}
.pg-dd .land{position:relative;overflow:visible!important}
.pg-dd .land::before{content:"";position:absolute;top:-7px;left:22px;width:44px;height:14px;transform:rotate(-8deg);z-index:2;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, transparent 2px 6px), var(--w,#C9BCEE);clip-path:polygon(0 0,100% 0,96% 25%,100% 50%,96% 75%,100% 100%,0 100%,4% 75%,0 50%,4% 25%)}
.pg-dd .land:nth-of-type(3n+2)::before{--w:#F6C9CC;left:auto;right:60px;transform:rotate(6deg)}
.pg-dd .land:nth-of-type(3n)::before{--w:#FFE08A}
.pg-dd .owner{font-family:var(--body)!important;font-weight:800!important;font-size:18px!important;letter-spacing:-.03em!important}
.pg-dd .owner .tape{background:none!important;clip-path:none!important;padding:0!important;color:var(--ink)!important;transform:none!important}
.pg-dd .parts{background:#F7F4FC!important;border-radius:12px!important}
.pg-dd .lsbar{background:#FAF8F4!important}
.pg-dd .sec > h3{font-family:var(--body);font-size:16px!important;font-weight:800!important;color:var(--ink)!important;margin:18px 2px 10px!important}
.pg-dd .sec > h3 > span:first-child::before{display:none}
.pg-dd .tile{border-radius:16px!important}
.pg-dd .tile.pay{background:var(--pink)!important} .pg-dd .tile.recv{background:var(--mint)!important}
.pg-dd .hc{border-left:0!important}
.pg-dd .hc:nth-child(3n+1){background:#FFFFFF!important}
.pg-dd .chip.acc{background:var(--lav)!important;color:#5E4BAE!important}
.pg-dd .sumln .pc{background:#F4F1EC!important}
.pg-dd .sumln .pc.rest{background:var(--lav)!important;box-shadow:none!important;color:#5E4BAE!important}
.pg-dd .joinbtn{background:var(--lav)!important;border:0!important;color:#5E4BAE!important}
.pg-dd .filters button[aria-pressed="true"]{background:var(--ink)!important;color:var(--on-ink,#fff)!important}

/* ================= 페어플랜 ================= */
.pg-fair .whoami.join{background:var(--mint)!important;box-shadow:none!important}
.pg-fair .next{border-radius:20px!important;-webkit-mask:none!important;mask:none!important;background:linear-gradient(135deg,#2F8A76,#3FA58F)!important;color:#fff}
.pg-fair .phase h2{font-family:var(--body)!important;font-weight:800!important;color:var(--ink)!important}
.pg-fair .stat:nth-child(1){background:var(--butter)!important} .pg-fair .stat:nth-child(2){background:var(--mint)!important} .pg-fair .stat:nth-child(3){background:var(--pink)!important}
.pg-fair .buyadd{background:var(--mint)!important;border:0!important;color:#2F8A76!important;font-weight:800}
.pg-fair .ddexp h3{font-weight:800}
.pg-fair .cell{border-radius:8px}

@media (min-width: 1000px){
  .pg-home .sections{grid-template-columns:1fr 1fr!important}
  #home > .bdcard{grid-column:2;grid-row:2;margin-top:14px}
  #home > .shd#spaceH{grid-column:2;grid-row:3}
  #home > #dash{grid-column:1;grid-row:2 / span 4}
  #home > .sections{grid-column:2;grid-row:4}
  #home > #todo{grid-column:2;grid-row:5}
  #home > .closing{grid-column:1 / -1}
  #home > .finder{grid-column:1 / -1}
}
/* 다듬기 */
.pg-dd .sec{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.closing .wt{white-space:nowrap;font-size:18px;max-width:calc(100% - 70px);overflow:hidden;text-overflow:ellipsis}
.pg-fair .item.pri{box-shadow:0 0 0 1.5px var(--mint2)!important}
.pg-fair .item{box-shadow:0 1px 2px rgba(60,40,30,.04), 0 4px 12px -8px rgba(60,40,30,.16)!important}
.pg-dd h1::after{content:"";display:inline-block;width:30px;height:26px;margin:-8px 0 0 4px;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Crect x='3' y='4' width='10' height='10' rx='2' fill='%23C9BCEE' transform='rotate(-12 8 9)'/%3E%3Crect x='16' y='1' width='9' height='9' rx='2' fill='%23F4A3AE' transform='rotate(10 20 5)'/%3E%3Crect x='12' y='15' width='9' height='9' rx='2' fill='%23FFD66B' transform='rotate(-6 16 19)'/%3E%3C/svg%3E") center/contain no-repeat}
.paid.on,.got.on,.donebtn.on,.chip.done,.item.done::after{font-family:var(--display)!important;font-weight:400!important;letter-spacing:0!important}

/* 해바라기: 굵고 통통한 동글 고딕 */
h1,#fairTitle,.paid.on,.got.on,.donebtn.on,.chip.done,.item.done::after{font-family:var(--display)!important;font-weight:700!important;-webkit-text-stroke:0!important}
h1{font-size:35px!important;letter-spacing:-.02em!important}
.pg-dd header h1{font-size:31px!important}
#fairTitle{font-size:28px!important}
.paid.on,.got.on,.donebtn.on,.chip.done,.item.done::after{font-size:13.5px!important;letter-spacing:-.01em!important}

/* 줄 바꿈: 한국어는 단어 중간에서 끊지 않아요. 너무 긴 낱말만 넘칠 때 끊어요 */
body{word-break:keep-all;overflow-wrap:break-word}
input,textarea,select{word-break:normal}
a.ibtn{text-decoration:none;display:inline-block}
.ibtn{border:0;border-radius:999px;padding:3px 10px;background:#F3EFFC;color:#5B4BB5;font:inherit;font-size:12px;font-weight:700;cursor:pointer}

/* 아래 알림 + 버튼 */
.actbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;width:min(440px,calc(100vw - 24px));background:#2B2830;color:#fff;padding:10px 10px 10px 14px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:13.5px;line-height:1.4}
.actbar[hidden]{display:none}
.actbar span{flex:1;min-width:0}
.actbar button{flex:none;border:0;border-radius:999px;padding:7px 14px;background:#E2794B;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.actbar .x{background:none;padding:4px 6px;color:#bbb;font-weight:400}
body.has-tabbar .actbar{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* 페어 띵방: 원래 방으로 돌아가기 · 예/아니오 창 · 바로 가기 */
.backbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 14px;background:#FFF1D6;color:#5A4A35;font-size:13px;border-bottom:1px solid #EED9B0}
.backbar a{font-weight:800;color:#7A5200;text-decoration:none;white-space:nowrap}
.askov{position:fixed;inset:0;z-index:90;background:rgba(20,18,24,.45);display:grid;place-items:center;padding:20px}
.askbox{width:min(340px,100%);background:var(--surface,#fff);border-radius:18px;padding:20px 18px 14px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.askbox p{margin:0 0 16px;font-size:15px;line-height:1.55;text-align:center}
.askbox div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.askbox button{height:44px;border:0;border-radius:12px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.askbox .y{background:#E2794B;color:#fff} .askbox .n{background:var(--bg,#f4f1ea);color:var(--muted,#777)}
.mktgo{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 14px;border-radius:999px;background:#2B2830;color:#fff;font-size:13px;font-weight:800;text-decoration:none;border:0;font-family:inherit;cursor:pointer}

/* 화면마다 같은 자리: 도움말(?)은 늘 오른쪽 위, 찾기는 아래 탭, 뒤로는 왼쪽 위 '‹ 조각조각' */
body.pg-dd header, body.pg-fair header{position:relative}
body.pg-dd header{position:sticky}
body.pg-dd #qbtn, body.pg-fair #helpBtn{position:absolute;top:12px;right:0;z-index:16;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;font-size:17px;font-weight:700;box-shadow:0 2px 10px -4px rgba(0,0,0,.18)}
body.pg-dd #qbtn[aria-expanded="true"], body.pg-fair #helpBtn[aria-expanded="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body.pg-dd .homel, body.pg-fair .homel{display:block;width:max-content;min-height:20px}
.todo2 li.ed{display:flex;align-items:center;gap:8px}
.todo2 li.ed a{flex:1;min-width:0;grid-template-columns:22px minmax(0,1fr) 12px}
.todo2 li.ed .ar{display:none}
.todo2 .edd{flex:none;border:1px solid var(--line);background:var(--surface,#fff);border-radius:999px;padding:4px 9px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.todo2 .edd.hot{border-color:var(--rose)}
.duebox{display:grid;gap:10px}
.duebox p{margin:0!important} .duebox small{text-align:center;font-size:12.5px;color:var(--muted)}
.duebox input{width:100%;height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:16px;background:var(--bg,#faf7f2)}
.duebox .dv{height:40px!important;background:none!important;border:1px dashed var(--line)!important;color:var(--muted)!important;font-size:13.5px!important}
/* 알림함 🔔: 도움말(?) 왼쪽 / 홈에서는 오른쪽 위 */
.bell{position:absolute;top:12px;right:44px;z-index:16;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface,#fff);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 10px -4px rgba(0,0,0,.18)}
.bell svg{width:19px;height:19px}
.bell i{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E2546B;color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}
body.pg-home header{position:relative}
body.pg-home .bell{top:26px;right:2px;width:42px;height:42px;border:0;background:var(--card,#fff)}
.bell.has{animation:bwig 1.2s ease 1}
@keyframes bwig{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}}
.bellov{position:fixed;inset:0;z-index:85;background:rgba(30,24,34,0);display:flex;justify-content:center;align-items:flex-start;padding:58px 12px 12px;transition:background .18s}
.bellov.on{background:rgba(30,24,34,.32)}
.bellbox{width:min(400px,100%);max-height:78vh;background:var(--cream,#FBF7F0);border-radius:24px;display:grid;grid-template-rows:auto 1fr;overflow:hidden;box-shadow:0 18px 50px -10px rgba(40,25,30,.35),0 0 0 1px var(--line);transform:translateY(-10px) scale(.97);opacity:0;transition:transform .2s cubic-bezier(.2,1.2,.4,1),opacity .18s;transform-origin:top right}
.bellov.on .bellbox{transform:none;opacity:1}
@media (min-width:700px){ .bellov{justify-content:flex-end;padding-right:max(16px,calc(50vw - 380px))} }
.bellbox .bh{display:flex;align-items:center;gap:8px;padding:16px 14px 10px 18px}
.bellbox .bh>b{color:var(--bink,#2B2830);font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.03em;margin-right:auto}
.bellbox .bh .tape{background:linear-gradient(transparent 55%,var(--butter2,#FFE08A) 55%);padding:0 3px}
.bellbox .bcnt{font-size:12px;font-weight:800;color:#fff;background:var(--rose,#E8546B);border-radius:999px;padding:3px 9px}
.bellbox .bh button{width:32px;height:32px;border-radius:50%;border:0;background:var(--card,#fff);color:var(--muted);font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.bellbox .bl{overflow:auto;padding:0 12px 14px;display:grid;gap:12px;align-content:start;overscroll-behavior:contain}
.bellbox .bg{display:grid;gap:6px}
.bellbox h4{margin:2px 6px 0;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.bellbox .bn{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px 10px 10px;border-radius:16px;background:var(--card,#fff);text-decoration:none;color:var(--bink,#2B2830);box-shadow:0 1px 2px rgba(60,40,30,.05);word-break:keep-all}
.bellbox .bn:not(.new){background:transparent;box-shadow:none}
.bellbox .bn:not(.new) .bi{filter:saturate(.6);opacity:.85}
.bellbox .bn.new::after{content:"";position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--rose,#E8546B)}
.bellbox .bi{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1}
.bellbox .bt{display:grid;gap:2px;min-width:0}
.bellbox .bt b{font-size:14px;font-weight:700;line-height:1.35}
.bellbox .bt small{font-size:12.5px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bellbox time{align-self:start;font-size:12px;color:var(--muted);white-space:nowrap;padding:2px 10px 0 0}
.bellbox .bnone{display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 10px 30px}
.bellbox .bnone span{font-size:34px} .bellbox .bnone b{font-size:15px} .bellbox .bnone small{font-size:12.5px;color:var(--muted);line-height:1.6}
.askbox .newsl{text-align:left;margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.55;display:grid;gap:4px}
body.pg-fair header h1, body.pg-dd header h1{padding-right:84px}
@media (prefers-color-scheme: dark){ .bellbox{--bink:#F3EFF6} .bellbox .bh .tape{background:linear-gradient(transparent 55%,rgba(255,224,138,.35) 55%)} .bellbox .bn:not(.new) .bi{filter:none;opacity:.7} }
.bellbox .bh .tape{color:inherit!important;font:inherit}
/* 관리자로 로그인 중 표시 */
.admchip{position:absolute;top:18px;right:88px;z-index:16;font-size:12px;font-weight:800;color:#fff;background:#2B2830;border-radius:999px;padding:4px 9px;text-decoration:none;letter-spacing:.02em}
body.pg-home .admchip{top:36px;right:52px}
.bellbox .ball{width:auto!important;height:30px!important;border-radius:999px!important;padding:0 11px;font-size:12px!important;font-weight:800;color:var(--bink,#2B2830)!important;background:var(--card,#fff)}
html.is-admin body.pg-fair header h1, html.is-admin body.pg-dd header h1{padding-right:150px}
.askbox .noticeb{display:block;margin-top:10px;text-align:left;white-space:pre-wrap;font-size:14px;line-height:1.6}
/* 홈: 요청 게시판 바로가기 */
.bdcard{width:100%;margin-top:12px;display:grid;grid-template-columns:40px minmax(0,1fr) 12px;gap:12px;align-items:center;text-align:left;border:0;border-radius:var(--r-card,18px);padding:12px 16px;background:var(--lav,#E9E3F8);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(60,40,30,.04)}
.bdcard .bdic{width:40px;height:40px;border-radius:50%;background:var(--card,#fff);display:grid;place-items:center;font-size:20px}
.bdcard .bdtx{display:grid;gap:1px} .bdcard b{font-size:15px} .bdcard small{font-size:12.5px;color:var(--muted)}
.bdcard .ar{color:var(--muted)}
/* 저장 상태 */
.savechip{position:fixed;left:50%;top:10px;transform:translate(-50%,-60px);z-index:70;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--card,#fff);color:var(--ink,#2B2830);box-shadow:0 4px 14px -4px rgba(0,0,0,.25);transition:transform .25s;pointer-events:none;white-space:nowrap}
.savechip.on{transform:translate(-50%,calc(env(safe-area-inset-top,0px)))}
.savechip.off{background:#FFF3CF;color:#6B5200} .savechip.done{color:#2F7A57}
@media (prefers-color-scheme: dark){
  .mini2{background:var(--pink)!important} .mini2:nth-child(2){background:var(--mint)!important}
  .tabbar{background:rgba(31,29,36,.96)!important}
}
.askbox .reccode{display:block;margin:12px auto 8px;font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:800;letter-spacing:.08em;background:var(--butter,#FFF3CF);border-radius:12px;padding:10px 0}
.askbox .recn{display:block;font-size:13px;color:var(--muted);line-height:1.55}
/* 홈 고정 공지 */
.pinbar{display:grid;grid-template-columns:30px minmax(0,1fr) 28px;gap:8px;align-items:center;margin:12px 0 4px;padding:10px 10px 10px 12px;border-radius:16px;background:var(--pink,#FBE4E3);box-shadow:0 1px 2px rgba(60,40,30,.05)}
.pinbar .pi{font-size:20px;text-align:center} .pinbar .pt{display:grid;gap:1px} .pinbar b{font-size:14.5px} .pinbar small{font-size:12.5px;color:var(--muted);white-space:pre-wrap}
.pinbar button{width:28px;height:28px;border-radius:50%;border:0;background:var(--card,#fff);color:var(--muted);font-weight:800;cursor:pointer}
/* ===== 어두운 화면 보정: 밝은 화면용으로 고정된 색을 어두운 값으로 ===== */
@media (prefers-color-scheme: dark){
  :root, body.pg-home, body.pg-dd{ --surface:#29262F; --card:#29262F; --line:#3A3542; --muted:#ABA5B4; --pale:#332F3B; }
  body.pg-dd{ --main-ink:#B9A9F2; --tape:#3A3352; --tape-ink:#CFC3FA; --logo:#B9A9F2; }
  body.pg-home{ --main-ink:#8FD3AE; }
  .pg-dd .sumln .pc{background:#332F3B!important}
  .pg-dd .lsbar{background:#2A2731!important}
  .motto .ml{color:#ABA5B4!important}
  .pg-home .sec .st1{color:#D2CCDA}
  .chip.acc,.pc.rest{color:#CFC3FA!important}
  .btn.main{color:#1F1D24!important}
  .pg-dd .hc:nth-child(3n+1){background:var(--card)!important}
  .pg-dd .chip.acc,.pg-dd .sumln .pc.rest,.pg-dd .joinbtn{color:#CFC3FA!important}
  .fcard .fsteps span{background:#332F3B}
  .todo2 .cb{background:transparent;border-color:#5A5462}
  .pg-fair .fri{background:rgba(255,255,255,.07)}
  .pg-fair .infobox .ibtn,.pg-fair .iebtns button,.pg-fair .ieact select,.pg-fair .ibmove select,.pg-fair .iai.edit{background:var(--surface)}
  .st.new{color:#1B2030!important}
}
@media not (prefers-color-scheme: dark){ .pg-fair .whoami.join button{color:#24705F!important} }
/* ===== 세세한 UI·UX ===== */
/* 1) 누르는 영역: 보이는 크기는 그대로, 손가락이 닿는 범위만 넓혀요 */
:where(.homel,.link,#fairBtn,.foldall button,.got,.more,.gtt,.ctl button,.filters button,.pc,.ibtn,.rlk,.edbtn,.tmore,.tgm,.x,.edd,.lk,.rpt,.bdf button,.bdcats button,#nkEdit,#nkRec,.mini){position:relative}
:where(.homel,.link,#fairBtn,.foldall button,.got,.more,.gtt,.edbtn,.tmore,.tgm,.edd,#nkEdit,#nkRec,.rpt)::before{content:"";position:absolute;inset:-10px -6px}
.ctl button{min-width:36px!important;min-height:36px!important}
.myq .ctl button{width:36px!important;height:36px!important;font-size:18px}
/* 3) 눌렀을 때 살짝 들어가요 */
button:not(:disabled):active,a.btn:active,.mact:active,.tdi:active,.bn:active,.mini2:active,.sec:active,.fcard:active{transform:scale(.97);transition:transform .06s}
/* 11) 토스트: 아래 탭·＋버튼·창 위로 */
.toast,#toast{z-index:96!important;box-shadow:0 6px 20px -6px rgba(0,0,0,.35)}
/* 13) 간격 규칙: 카드 안 16 · 카드 사이 12 */
.pg-dd .pcard,.pg-dd .hc,.todo2 .tcard,.whoami,.pg-fair .phase{scroll-margin-top:80px}
/* 17) 글자 크게 보기: 버튼 높이를 고정하지 않고 글자에 맞춰 늘어나요 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.btn,.joinbtn,.mact,.tdi,.edbtn,.got{height:auto!important;min-height:40px}
.btn.sm{min-height:32px}
.wonh{display:block;margin-top:3px;font-size:12px;font-weight:700;color:var(--muted)}
.wonh[hidden]{display:none}
/* 9) 불러오는 동안 카드 모양 자리표시 */
.skel{display:grid;gap:10px;padding:4px 0}
.skel i{display:block;height:64px;border-radius:16px;background:linear-gradient(90deg,var(--pale,#F1EDE6) 25%,rgba(255,255,255,.55) 50%,var(--pale,#F1EDE6) 75%);background-size:300% 100%;animation:skel 1.3s ease-in-out infinite}
.skel i.s{height:36px;width:60%}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-color-scheme: dark){ .skel i{background:linear-gradient(90deg,#2A2731 25%,#36323F 50%,#2A2731 75%);background-size:300% 100%} }
@media (prefers-reduced-motion: reduce){ .skel i{animation:none} }
/* 10) 빈 화면: 다음에 할 일 버튼 */
.empty .emptygo{display:block;margin:10px auto 0;border:0;border-radius:999px;padding:10px 18px;min-height:40px;font:inherit;font-size:14px;font-weight:800;background:var(--ink);color:var(--on-ink,#fff);cursor:pointer}
.empty .emptygo + .emptygo{margin-top:6px;background:var(--pale);color:var(--ink)}
.gi{width:18px;height:18px;display:inline-block;vertical-align:middle}
.bellbox .bh button .gi,.bdh .x .gi,.pinbar button .gi{width:14px;height:14px}
.gloss{display:block;background:var(--pale);border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.6}
/* 15) 처음 안내 */
.obov{position:fixed;inset:0;z-index:97;background:rgba(30,24,34,.45);display:grid;place-items:center;padding:20px}
.obbox{width:min(380px,100%);background:var(--cream,#FBF7F0);border-radius:26px;overflow:hidden;box-shadow:0 20px 50px -10px rgba(0,0,0,.35);color:var(--ink)}
.obs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.obs::-webkit-scrollbar{display:none}
.obc{flex:0 0 100%;scroll-snap-align:start;padding:30px 24px 10px;display:grid;gap:10px;justify-items:center;text-align:center}
.obi{width:76px;height:76px;border-radius:50%;background:var(--butter,#FFF3CF);display:grid;place-items:center;font-size:38px}
.obc > b{font-family:var(--display);font-size:22px;letter-spacing:-.03em}
.obc p b{font-weight:800;color:#C2563A}
.obc p{margin:0;font-size:14.5px;line-height:1.65;word-break:keep-all}
.obdots{display:flex;justify-content:center;gap:6px;padding:10px 0 4px}
.obdots i{width:7px;height:7px;border-radius:999px;background:var(--line);transition:width .2s} .obdots i.on{width:20px;background:#E2794B}
.obact{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:12px 16px 18px}
.obact button{min-height:48px;border:0;border-radius:14px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.obact .skip{background:none;color:var(--muted);padding:0 14px} .obact .next{background:#E2794B;color:#fff}
.obagain{text-align:center;margin:10px 0 0}
/* 인포 글 모아보기: 링크 있는 줄 어두운 화면 */
@media (prefers-color-scheme: dark){ .pg-fair .lkr.on,.pg-fair .spall{background:var(--lav,#2E2940)!important} .pg-fair .lkr.on b{color:var(--ink)} }

/* ================= 말랑 스티커 (v89) =================
   카드를 흰 테두리 스티커처럼 · 아이콘에 볼터치 · 아래 메뉴 둥근 위판 + 가운데 이름 라벨 · 빈 할 일엔 고양이 */
.pg-home .sec,.pg-home .bdcard,.pg-home .today,.pg-home .todo2 .tcard{border:3px solid var(--card,#fff)!important;box-shadow:0 0 0 1px rgba(60,40,30,.05),0 6px 14px -6px rgba(60,40,30,.18)!important}
.pg-home .sec{border-radius:26px!important;-webkit-mask:none!important;mask:none!important}
.pg-home .bdcard,.pg-home .todo2 .tcard{border-radius:26px!important}
.pg-home .sec .sico{position:relative;width:50px!important;height:50px!important;background:var(--card,#fff);border-radius:50%;padding:7px;box-sizing:border-box}
.pg-home .sec .sico::after{content:"";position:absolute;left:4px;right:4px;bottom:13px;height:6px;background:radial-gradient(circle at 15% 50%,#FF8FA8 0 3px,transparent 3.5px),radial-gradient(circle at 85% 50%,#FF8FA8 0 3px,transparent 3.5px);opacity:.6;pointer-events:none}
.pg-home .bdcard .bdic{box-shadow:inset 0 0 0 3px var(--lav2,#C9BCEE)}
.pg-home .todo2 .none i{width:40px!important;height:40px!important;background:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%2028%2014%208%2028%2017Z%20M52%2028%2050%208%2036%2017Z%22%20fill%3D%22%23F6C9A8%22/%3E%3Cpath%20d%3D%22M16%2022%2017%2013%2024%2018Z%20M48%2022%2047%2013%2040%2018Z%22%20fill%3D%22%23F4A3A8%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2236%22%20r%3D%2222%22%20fill%3D%22%23F6C9A8%22/%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2234%22%20r%3D%222.8%22%20fill%3D%22%23283047%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2234%22%20r%3D%222.8%22%20fill%3D%22%23283047%22/%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2233%22%20r%3D%221%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2241%22%20cy%3D%2233%22%20r%3D%221%22%20fill%3D%22%23fff%22/%3E%3Cellipse%20cx%3D%2218.5%22%20cy%3D%2241%22%20rx%3D%224%22%20ry%3D%222.6%22%20fill%3D%22%23FF8FA8%22%20opacity%3D%22.55%22/%3E%3Cellipse%20cx%3D%2245.5%22%20cy%3D%2241%22%20rx%3D%224%22%20ry%3D%222.6%22%20fill%3D%22%23FF8FA8%22%20opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M29%2041q3%203%206%200%22%20fill%3D%22none%22%20stroke%3D%22%23283047%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M8%2038h7M8%2043h7M49%2038h7M49%2043h7%22%20stroke%3D%22%23C9A58A%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat}
.pg-home .todo2 .none i svg{display:none}
.pg-home .shd h2::after{content:"";display:inline-block;width:18px;height:18px;margin-left:6px;vertical-align:-2px;background:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%23F2B9A4%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2215.5%22%20rx%3D%225%22%20ry%3D%224.2%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2210%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226.5%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%226.5%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2210%22%20r%3D%222.2%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.tabbar{border-top:0!important;box-shadow:0 -4px 16px -6px rgba(60,40,30,.15);border-radius:22px 22px 0 0}
.tabbar a.main svg{width:28px!important;height:28px!important}
.tabbar a.main span{background:var(--butter,#FFF3CF);border-radius:999px;padding:1px 10px;color:var(--ink)}
.tabbar a.main[aria-current="page"] span{background:var(--butter2,#FFE08A)}
@media (prefers-color-scheme: dark){ .tabbar{box-shadow:0 -4px 16px -6px rgba(0,0,0,.5)} .tabbar a.main span{background:var(--butter,#3A3424)} .pg-home .sec,.pg-home .bdcard,.pg-home .today,.pg-home .todo2 .tcard{box-shadow:0 6px 14px -6px rgba(0,0,0,.5)!important} }