/* SURFY 웹 — 앱 값 그대로 (색 · 크기 · 그림자) */
@font-face{font-family:Pretendard;src:url(../font/Pretendard-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url(../font/Pretendard-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Pretendard;src:url(../font/Pretendard-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Pretendard;src:url(../font/Pretendard-Bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#22282F; --t2:#454E57; --t3:#707C88;
  --primary:#1A6FD1; --soft:#DFEBF9; --chip:#E0E6EC; --divider:#E7E7E8;
  --tileFace:#FAFBFC; --cardShadow:0 3px 14px rgba(16,35,58,.13);
  --nav:224px; --z:1;
}
/* 모니터에서는 넉넉하게 — 글 · 카드 · 간격을 같은 비율로 키움 (2026-09-23) */
@media (min-width:1440px){html{zoom:1.15}:root{--z:1.15}}
@media (min-width:1700px){html{zoom:1.25}:root{--z:1.25}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Pretendard,system-ui,-apple-system,'Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── 왼쪽 메뉴 ── */
.nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav);background:#fff;border-right:1px solid var(--divider);
  padding:22px 14px 86px;overflow-y:auto}
.nav .logo{display:flex;align-items:center;gap:9px;padding:0 8px 22px}
.nav .logo img{width:34px}
.nav .logo b{font-size:17px;font-weight:700;letter-spacing:.5px}
.nav .tab{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:14px;font-size:14px;font-weight:500;margin-bottom:2px}
.nav .tab img{width:22px;opacity:.72}
.nav .tab:hover{background:rgba(26,111,209,.05)}
.nav .tab.on{background:rgba(26,111,209,.10);color:var(--primary);font-weight:700}
.nav .tab.on img{opacity:1;filter:invert(29%) sepia(90%) saturate(1800%) hue-rotate(200deg) brightness(92%)}
.subs{margin:2px 0 8px 23px;padding-left:14px;border-left:1.5px solid var(--divider);display:flex;flex-direction:column;gap:2px}
.subs a{height:36px;display:flex;align-items:center;padding:0 12px;border-radius:12px;font-size:13.5px;font-weight:500;color:var(--t2)}
.subs a:hover{background:rgba(26,111,209,.04)}
.subs a.on{color:var(--primary);font-weight:700;background:rgba(26,111,209,.06)}
.subs a svg{margin-left:4px}
.subs.tight{gap:1px;margin-bottom:4px}.subs.tight a{height:29px}
.nav .add{position:fixed;left:14px;width:calc(var(--nav) - 28px);bottom:22px;height:48px;border-radius:16px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;box-shadow:0 6px 16px rgba(26,111,209,.35)}
.nav .add img{width:18px;filter:invert(1)}

/* ── 본문 ── */
.main{position:fixed;left:var(--nav);right:0;top:0;bottom:0;overflow-y:auto;padding:18px 36px 40px}
.page{max-width:none}
.tbar{display:flex;align-items:center;padding:0 0 4px 6px;height:52px}
.tbar h2{font-size:22px;font-weight:600;flex:1}
.tbar .i{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.tbar .i:hover{background:rgba(34,40,47,.05)}
.seg{display:flex;width:460px;max-width:100%;padding:4px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 18px rgba(16,35,58,.13);margin:2px 0 16px}
.seg a{flex:1;text-align:center;padding:10px 0;font-size:14.5px;font-weight:500;color:var(--t2);border-radius:99px;line-height:1.25;white-space:nowrap}
.seg a.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(16,42,58,.13)}
.seg a svg{margin-left:3px;vertical-align:-2px}

/* 타일 — 앱 kTileFace · 0.32 둥글기 · 볼록 그림자 */
.tile{display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--tileFace)}

/* ── 홈 ── */
.greet{display:flex;align-items:flex-start;gap:10px;padding:14px 0 12px 4px}
.greet .lines{flex:1}
.greet p{font-size:13.5px;font-weight:500;line-height:1.52;letter-spacing:-.5px;animation:rise .56s cubic-bezier(.33,1,.68,1) both}
.greet p+p{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.greet p{animation:none}}
.avatar{width:36px;height:36px;border-radius:99px;margin:2px 4px 0 0;box-shadow:0 2px 8px rgba(16,35,58,.16);flex:none}
.avatar img{width:36px;height:36px;border-radius:99px;object-fit:cover;display:block}
.hgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:stretch}
.hgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;align-items:start}

.card{background:var(--surface);border-radius:18px;padding:13px 14px;box-shadow:var(--cardShadow)}
.ctitle{display:flex;align-items:center;padding-bottom:9px}
.ctitle b{font-size:13.5px;font-weight:700;flex:1}
.ctitle s{text-decoration:none;font-size:11.5px;font-weight:500;color:var(--t3)}
.ctitle svg{margin-left:3px}
.empty{text-align:center;padding:12px 0 10px}
.empty b{display:block;font-size:13.5px;font-weight:600;color:var(--t2)}
.empty span{display:block;margin-top:5px;font-size:11.5px;color:var(--t3)}
a.card,a.hc{display:block}

/* 날씨 카드 — 앱 home_tab_screen 값 */
.wx{position:relative;border-radius:24px;overflow:hidden;color:#fff;background:#2F5F94 center/cover no-repeat;
  box-shadow:0 6px 14px rgba(6,18,38,.35)}
.wx video.sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wx .veil{position:absolute;inset:0}
.wx .glass{position:absolute;inset:0;background:rgba(255,255,255,.10)}
.wx .edge{position:absolute;inset:0;border-radius:24px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.wx .body{position:relative;padding:15px 16px 13px;text-shadow:0 2px 10px rgba(6,18,38,.55)}
.wx .wait{position:relative;width:100%;height:96px;display:flex;align-items:center;justify-content:center;font-size:13px;text-shadow:0 2px 10px rgba(6,18,38,.55)}
.wx .top{display:flex;align-items:flex-start}
.wx .top .l{flex:1}
.wx .place{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:rgba(255,255,255,.9)}
.wx .cond{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:13.5px;font-weight:600}
.wx .cond img{width:17px;height:17px}
.wx .top .r{text-align:right}
.wx .clock{font-size:15px;font-weight:600}
.wx .date{margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.85)}
.wx .mid{display:flex;align-items:center;margin-top:4px}
.wx .temp{flex:1;line-height:1.05;letter-spacing:-1px;font-weight:700}
.wx .temp b{font-size:46px;font-weight:700}.wx .temp i{font-style:normal;font-size:26px}
.wx .mid img{width:96px;height:96px}
.wx .sum{margin-top:4px;font-size:11.5px;color:rgba(255,255,255,.9)}
.wx .hrs{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.22);display:flex;gap:6px;height:83px;
  overflow-x:auto;scrollbar-width:none}
.wx .hrs::-webkit-scrollbar{display:none}
.wx .hr{flex:0 0 56px;height:74px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.40);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.wx .hr span{font-size:11.5px}
.wx .hr img{width:22px;height:22px;margin:4px 0}
.wx .hr b{font-size:12.5px;font-weight:700}

.wk{display:flex}
.wk div{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.wk div>span{font-size:12px;font-weight:600;color:var(--t2)}
.wk img{width:28px;height:28px;margin:6px 0}
.wk p{font-size:12px;color:var(--t2)}.wk p b{font-weight:700;color:var(--ink)}

/* ── 계산기 홈 — 앱 home_screen 값 ── */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.hc{background:var(--surface);border-radius:20px;margin-bottom:8px;box-shadow:var(--cardShadow);overflow:hidden}
.hh{display:flex;align-items:center;padding:12px 18px 6px}
.hh b{font-size:13px;font-weight:600;flex:1}
.hh .act{font-size:13px;font-weight:500;color:var(--t3);padding:2px 6px;border-radius:8px}
.hh .act.ic{padding:4px;display:flex}
.hint{font-size:11.5px;color:var(--t3);padding:0 18px 6px}
.pins{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:6px 10px 2px}
.pt{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:14px}
.pt:hover{background:rgba(34,40,47,.03)}
.pt span{font-size:11.5px;font-weight:500;line-height:1.2}
.fx{display:flex;align-items:center;gap:12px;padding:11px 14px 11px 18px}
.fx .fl{width:34px;height:34px;border-radius:10.9px;background:var(--tileFace);display:flex;align-items:center;justify-content:center;
  box-shadow:3px 3px 7.3px rgba(150,164,186,.40),-2.4px -2.4px 6.1px #fff}
.fx .fl img{width:22.4px;height:16.8px;border-radius:6px;object-fit:cover;box-shadow:0 .7px 2px rgba(0,0,0,.18)}
.fx .tx{flex:1;min-width:0}
.fx .tx b{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx .tx span{display:block;margin-top:1px;font-size:12.5px;color:var(--t3)}
.fx .ch{margin-left:10px;font-size:12.5px;font-weight:500;color:var(--t2);background:var(--chip);border-radius:10px;padding:7px 12px}
.hc .empty2{text-align:center;font-size:12.5px;color:var(--t3);line-height:1.6;padding:4px 18px 20px}
.cr{display:flex;align-items:center;padding:9px 18px}
.cr:hover{background:rgba(34,40,47,.025)}
.cr b{width:58px;margin-left:12px;font-size:15px;font-weight:500}
.cr .sb{flex:1;margin-left:8px;font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr .ct{font-size:11.5px;font-weight:500;color:var(--t3);background:#F0F2F4;border-radius:99px;padding:2px 8px;margin-right:6px}
.ln{height:1px;background:var(--divider);margin:0 18px}
.foot{display:block;padding:11px 18px;font-size:12.5px;font-weight:500;color:var(--primary)}

/* ── 독바 — 앱 glass_dock.dart 값 (폰 모양에서만 보임) ── */
.dock,.pop{display:none}
.ico{display:block;width:26px;height:26px;background:var(--ink);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.dock{position:fixed;left:22px;right:22px;bottom:23px;gap:10px;z-index:10}
.dock .bar{flex:1;height:62px;border-radius:31px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 6px 18px rgba(22,35,58,.13);position:relative;padding:0 2px;display:flex}
.dock .bar a{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.dock .pill{position:absolute;top:8px;width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.95);
  left:calc(2px + (100% - 4px) * (var(--at) + .5) / var(--n) - 22px);
  box-shadow:0 1px 3px rgba(16,42,58,.13),inset 0 3px 22px rgba(0,0,0,.05),inset 2px -1px 5px rgba(255,255,255,.95),inset 3px 5px 14px rgba(255,255,255,.80);
  transition:left .22s cubic-bezier(.33,1,.68,1)}
.dock .pill.go{animation:stretch .22s linear}
@keyframes stretch{50%{transform:scale(1.12,.94)}}
.dock .pill.none{display:none}
.dock .fab{width:62px;height:62px;display:flex;align-items:center;justify-content:center}
.dock .fab b{width:56px;height:56px;border-radius:28px;background:var(--primary);border:1px solid rgba(255,255,255,.55);box-shadow:0 6px 18px rgba(22,35,58,.13);
  display:flex;align-items:center;justify-content:center}
.dock .fab .ico{width:23px;height:23px;background:#fff;transition:transform .22s ease-out}
.dock .fab.open .ico{transform:rotate(45deg)}
.pop{position:fixed;right:22px;bottom:101px;width:62px;padding:5px;border-radius:31px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 6px 18px rgba(22,35,58,.13);z-index:10;
  transform-origin:50% 100%;transform:scale(.7);opacity:0;pointer-events:none;
  transition:transform .16s ease-in,opacity .16s ease-in}
.pop.open{transform:none;opacity:1;pointer-events:auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .22s}
.pop a{height:52px;display:flex;align-items:center;justify-content:center}

/* ── ㉮ 폰 브라우저 — 창 폭 600 보다 좁을 때 ── */
@media (max-width:599px){
  .nav{display:none}
  .main{left:0;padding:0 16px 97px}
  .page{max-width:none}
  .hgrid,.hgrid3,.cols{display:block}
  .hgrid>*,.hgrid3>*{margin-bottom:9px}
  .hgrid3{margin-top:0}
  .tbar{padding-left:4px}
  .seg{width:100%}
  .dock{display:flex}
  .pop{display:block}
}
@media (prefers-reduced-motion:reduce){.dock .pill,.pop,.dock .fab .ico{transition:none}.dock .pill.go{animation:none}}

/* ── 판 (PC 가운데 · 폰 아래) ── */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding-top:70px}
.sheet-wrap.phone{align-items:flex-end;padding-top:0}
.sheet-veil{position:absolute;inset:0;background:rgba(0,0,0,var(--veil));opacity:0;transition:opacity .2s}
.sheet-wrap.open .sheet-veil{opacity:1}
.sheet{position:relative;width:420px;max-width:calc(100vw / var(--z) - 32px);max-height:calc(100vh / var(--z) - 110px);display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s ease-out}
.sheet-wrap.open .sheet{opacity:1;transform:none}
.sheet.glass{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(0,0,0,.08);
  border-radius:30px;box-shadow:0 6px 18px rgba(22,35,58,.13)}
.sheet.plain{background:#fff;border-radius:24px}
.sheet-wrap.phone .sheet{width:100%;max-width:none;max-height:88vh;transform:translateY(40px)}
.sheet-wrap.phone.open .sheet{transform:none}
.sheet-wrap.phone .sheet.glass{border-radius:30px 30px 0 0}
.sheet-wrap.phone .sheet.plain{border-radius:24px 24px 0 0}
.sheet .grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--divider);margin:12px auto 0;flex:none}
.sheet .scroll{overflow-y:auto;min-height:0}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-veil{transition:none}}

/* 앱 showSurfyAsk */
.ask-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:0 26px}
.ask-veil{position:absolute;inset:0;background:rgba(0,0,0,.54);opacity:0;transition:opacity .18s}
.ask-wrap.open .ask-veil{opacity:1}
.ask,.alert{position:relative;opacity:0;transform:scale(.96);transition:opacity .18s,transform .18s}
.ask-wrap.open .ask,.ask-wrap.open .alert{opacity:1;transform:none}
.ask{width:340px;max-width:100%;padding:24px 22px 16px;border-radius:30px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.9);text-align:center}
.ask>b{display:block;font-size:13px;font-weight:600}
.ask>p{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--t2)}
.ask-btns{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.ask-btn{height:52px;border-radius:26px;font-size:15px;font-weight:500}
.ask-btn.primary{color:#fff;background:linear-gradient(180deg,#2C7CDA,#1966C2);box-shadow:0 6px 16px rgba(26,111,209,.34)}
.ask-btn.danger{background:#FDECEC;color:#D43B3B}
.ask-btn.grey{background:var(--chip);color:var(--t2)}
.ask-cancel{height:46px;border-radius:26px;font-size:15px;font-weight:500;color:var(--t3);margin-top:-9px}
/* 앱 AlertDialog (위치 허락) */
.alert{width:400px;max-width:100%;background:#fff;border-radius:20px;padding:24px 24px 12px}
.alert>b{display:block;font-size:15px;font-weight:700}
.alert>p{margin-top:14px;font-size:13px;line-height:1.7;color:var(--t2)}
.alert-btns{display:flex;justify-content:flex-end;gap:4px;margin-top:14px}
.alert-btns button{padding:10px 12px;font-size:14px;font-weight:500;color:var(--primary);border-radius:10px}

/* 앱 showSurfyToast */
.toast{position:fixed;left:50%;bottom:96px;z-index:70;display:flex;align-items:center;gap:11px;padding:11px 20px 11px 12px;border-radius:999px;
  background:rgba(58,62,68,.94);box-shadow:0 10px 26px rgba(10,20,35,.28);color:#fff;font-size:15px;font-weight:600;
  transform:translate(-50%,10px);opacity:0;transition:opacity .18s,transform .18s}
.toast.open{opacity:1;transform:translate(-50%,0)}
.toast i{width:28px;height:28px;border-radius:99px;background:var(--primary);display:flex;align-items:center;justify-content:center}
@media (min-width:600px){.toast{left:calc(50% + var(--nav) / 2)}}

/* ── 들어간 화면 윗줄 (계산기 하나 연 화면과 같음) ── */
.bar2{display:flex;align-items:center;height:56px;margin:0 0 6px}
.bar2 .bk{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-left:-8px;border-radius:12px}
.bar2 .bk:hover{background:rgba(34,40,47,.05)}
.bar2 h2{font-size:17px;font-weight:600;flex:1;margin-left:4px}
.bar2 .sv{font-size:14px;font-weight:600;padding:8px 12px;color:var(--t3);border-radius:10px}
.bar2 .sv.on{color:var(--primary)}
.pc2{display:grid;grid-template-columns:minmax(380px,1fr) 1.3fr;gap:28px;align-items:start}

/* 프로필 — 앱 profile_screen.dart */
.gc{position:relative;border-radius:26px;border:1px solid rgba(255,255,255,.96);overflow:hidden;padding:20px;text-align:center;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4FAFE 46%,#BADEF0 100%);box-shadow:0 12px 30px rgba(16,35,58,.13)}
.gc .glow{position:absolute;left:-60px;right:-60px;top:-120px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}
.gc>*{position:relative}
.gc .av{width:82px;height:82px;border-radius:99px;box-shadow:0 6px 18px rgba(16,35,58,.16);display:block;margin:0 auto;object-fit:cover}
.gc .nm{margin-top:13px;font-size:19px;font-weight:700;letter-spacing:-.55px}
.gc .cl{margin-top:5px;font-size:11.5px;color:var(--t2)}
.gc .st{display:flex;align-items:center;margin-top:17px}
.gc .st div{flex:1}.gc .st i{width:1px;height:24px;background:rgba(16,35,58,.12)}
.gc .st b{display:block;font-size:17px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.gc .st span{display:block;margin-top:3px;font-size:10.5px;color:var(--t2)}
.gc .ed{display:flex;margin-top:18px;height:46px;border-radius:23px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.96);
  box-shadow:0 4px 14px rgba(16,35,58,.12);align-items:center;justify-content:center;font-size:13.5px;font-weight:600;letter-spacing:-.3px}
.sec{font-size:13px;font-weight:700;letter-spacing:-.3px;margin:4px 0 10px}
.sr{height:58px;padding:0 16px;background:#fff;border-radius:16px;box-shadow:var(--cardShadow);margin-bottom:10px;display:flex;align-items:center}
.sr .tx{flex:1;margin-left:11px}.sr .tx b{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.3px}
.sr .tx span{display:block;margin-top:2px;font-size:11.5px;color:var(--t3)}
/* 프로필 고치기 */
.bav{position:relative;width:112px;height:112px;margin:0 auto;display:block}
.bav img{width:112px;height:112px;border-radius:99px;object-fit:cover}
.bav .cam{position:absolute;right:-4px;bottom:-2px;width:34px;height:34px;border-radius:99px;background:var(--primary);border:3px solid #fff;
  box-shadow:0 5px 12px rgba(26,111,209,.38);display:flex;align-items:center;justify-content:center}
.cen{text-align:center}.l12{margin-top:14px;font-size:12px;color:var(--t3)}
.tg{display:inline-block;margin-top:10px;padding:4px 8px;font-size:12px;font-weight:600;color:var(--primary)}
.ag{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:12px}
.ag button{padding:0;border-radius:99px}.ag img{width:100%;display:block;border-radius:99px}
.ag button.on{box-shadow:0 0 0 2.4px var(--primary)}
.nf{display:block;padding:13px 16px 14px;background:#fff;border-radius:16px;border:1px solid var(--divider)}
.nf.has{border-color:var(--primary)}
.nf span{display:block;font-size:11.5px;color:var(--t3)}
.nf input{display:block;width:100%;border:0;outline:0;padding-top:6px;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.4px;color:var(--ink);background:none}
.nf input::placeholder{font-size:13.5px;font-weight:500;color:var(--t3)}
.ex{margin-top:9px;font-size:11.5px;color:var(--t3)}
.h13{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:-.3px}.h13+p{margin-top:5px;font-size:11.5px;color:var(--t3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips button{padding:10px 16px 11px;border-radius:19px;border:1px solid var(--divider);background:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.3px}
.chips button.on{background:var(--primary);border-color:var(--primary);color:#fff}
/* 사진 판 */
.photo{padding:18px 17px 18px;display:flex;flex-direction:column;gap:10px}
.sheet-wrap.phone .photo{padding-top:14px}
.photo button{height:58px;border-radius:29px;padding:0 18px;background:#fff;border:1px solid rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(16,35,58,.13);
  display:flex;align-items:center;gap:12px;font-size:14px;text-align:left}
.photo button.q{background:rgba(255,255,255,.55);color:var(--t3);font-weight:600}
.photo button:disabled{opacity:.45;cursor:default}

/* 도시 고르기 — 앱 _CityPicker */
.cp{padding:18px 0 4px}
.sheet-wrap.phone .cp{padding-top:12px}
.cp .hd{display:flex;align-items:baseline;padding:0 20px 10px}.cp .hd b{flex:1;font-size:15px;font-weight:700}.cp .hd span{font-size:12px;color:var(--t3)}
.cp .gps{margin:0 12px 4px;padding:8px 12px;border-radius:12px;display:flex;align-items:center;width:calc(100% - 24px);text-align:left}
.cp .gps.on{background:var(--soft)}
.cp .gps .tx{flex:1;margin-left:16px}.cp .gps b{display:block;font-size:15px;font-weight:400}.cp .gps.on b{font-weight:700;color:var(--primary)}
.cp .gps .tx span{display:block;font-size:11.5px;color:var(--t3)}.cp .gps .tx span.bad{color:#D43B3B}
.cp .gps .spin{width:20px;height:20px;border:2px solid var(--soft);border-top-color:var(--primary);border-radius:99px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cp .dvd{height:1px;background:var(--divider);margin:4px 0}
.cp .ls{padding:0 12px 8px}
.cp .ls button{width:100%;height:40px;padding:0 12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;font-size:15px;text-align:left}
.cp .ls button:hover{background:rgba(34,40,47,.04)}
.cp .ls button.on{font-weight:700;color:var(--primary)}
.wx .place{cursor:pointer}
@media (max-width:599px){.pc2{display:block}.pc2>*+*{margin-top:22px}}
.sheet>.cp{display:flex;flex-direction:column;min-height:0;flex:1}
.cp .ls{flex:1;min-height:0;overflow-y:auto}

/* ── 가계부 달력 (W37) ── */
.tbar .pl{font-size:11.5px;font-weight:600;background:var(--chip);border-radius:99px;padding:5px 11px;margin-right:4px}
.lg{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.lgc{display:block;background:#fff;border-radius:18px;box-shadow:var(--cardShadow)}
.lgcal{background:#fff;border-radius:18px;box-shadow:var(--cardShadow);padding:10px 2px 0}
.mh{display:flex;align-items:center;padding:10px 12px 12px}
.mh .td{font-size:12.5px;font-weight:500;color:var(--t2);background:var(--chip);border-radius:99px;padding:5px 12px}
.mh .m{flex:1;display:flex;align-items:center;justify-content:center;gap:18px;font-size:18px;font-weight:700}
.mh .mv{display:flex;padding:4px;border-radius:10px}.mh .mv:hover{background:rgba(34,40,47,.05)}
.mh .f{width:36px;display:flex;justify-content:center}
.wkh{display:grid;grid-template-columns:repeat(7,1fr);height:24px;font-size:12.5px;font-weight:500;text-align:center;padding:0 6px}
.gr{display:grid;grid-template-columns:repeat(7,1fr);padding:0 6px 8px;row-gap:4px}
.gr .c{height:84px;display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:2px;border-radius:12px}
.gr .c:not(:disabled):hover{background:rgba(26,111,209,.04)}
.gr .c:disabled{cursor:default}
.gr.small .c{height:44px}
.dn{width:26px;height:26px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.dn.sel{background:var(--primary)}
.nt{font-size:10.5px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tb{padding:13px 14px}
.tb .l{font-size:12.5px;color:var(--t3)}.tb .l b{font-weight:600;color:var(--t2);margin-left:5px}
.tb .v{margin-top:5px;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.tb .v i{font-style:normal;font-size:13px;font-weight:600}
.wb{display:block;margin-top:9px;background:var(--primary);color:#fff;border-radius:18px;text-align:center;padding:16px 0;font-size:15px;font-weight:700}
.qb{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.qb a{padding:16px 0;text-align:center;font-size:15px;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:center;gap:6px}
.dl{display:flex;align-items:baseline;padding:14px 2px 2px;font-size:15px;font-weight:600}
.dl b{flex:1;font-weight:600}.dl em{font-style:normal;font-weight:600}.dl i{font-style:normal;font-size:12.5px;color:var(--t3);margin-left:5px;font-weight:400}
.dh{font-size:11.5px;color:var(--t3);padding:0 2px 8px}
.lgc.rows{padding:4px 0;margin-top:8px}.dh+.lgc.rows{margin-top:0}
.lgc.rows .none{padding:20px 0;text-align:center;font-size:12.5px;color:var(--t3)}
.er{display:flex;align-items:center;padding:9px 18px}
.er .tx{flex:1;margin-left:12px;min-width:0}.er .tx b{display:block;font-size:15px;font-weight:500}.er .tx span{font-size:12.5px;color:var(--t2)}
.er em{font-style:normal;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ln2{height:1px;background:var(--divider);margin:0 18px}

/* ── 가계부 입력 (W52) ── */
.wtop{display:flex;align-items:center;padding:8px 0 10px}
.wtop .bk{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-left:-8px;border-radius:12px}
.wtop h2{margin-left:6px;flex:1;font-size:22px;font-weight:600}
.wtop .pb{padding:6px 11px;border-radius:99px;font-size:12.5px;font-weight:500;margin-left:6px}
.wtop .pb.no{background:#fff;color:var(--t2);box-shadow:0 2px 8px rgba(16,35,58,.10)}
.wtop .pb.yes{background:var(--primary);color:#fff}
.wgrid{display:grid;grid-template-columns:minmax(380px,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.sg3{display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(16,35,58,.13);margin:2px 0 10px}
.sg3 button{flex:1;text-align:center;padding:10px 0;font-size:14.5px;line-height:1.25;font-weight:500;color:var(--t2);border-radius:99px;border:1px solid transparent}
.sg3 button.on{font-weight:700;color:var(--ink);background:rgba(255,255,255,.46);border-color:rgba(255,255,255,.95);
  box-shadow:0 1px 3px rgba(16,42,58,.13),inset 0 3px 22px rgba(0,0,0,.05),inset 2px -1px 5px rgba(255,255,255,.95),inset 3px 5px 14px rgba(255,255,255,.8)}
.wc{display:block;background:#fff;border-radius:18px;box-shadow:var(--cardShadow);margin-bottom:10px}
.am{padding:14px 16px 16px;cursor:text}.am>span{font-size:11.5px;color:var(--t3)}
.am p{display:flex;align-items:baseline;justify-content:flex-end;margin-top:4px}
.am input{flex:1;min-width:0;border:0;outline:0;background:none;text-align:right;font:inherit;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;caret-color:var(--primary)}
.am input::placeholder{color:inherit;opacity:1}
.am p i{font-style:normal;font-size:19px;font-weight:600;white-space:pre}
.fl{padding:0 4px}
.fr{display:flex;align-items:center;padding:14px 18px;width:100%;text-align:left}
.fr span{width:100px;flex:none;font-size:15px;color:var(--t3)}.fr b{flex:1;font-size:15px;font-weight:500}.fr b.dim{font-weight:400;color:var(--t3)}
.fr i{font-style:normal;font-size:12px;color:#C3C8CE}
.fr.memo input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink);border-bottom:1.5px solid transparent;padding-bottom:2px}
.fr.memo input:focus{border-bottom-color:var(--primary)}
.fr.memo input::placeholder{font-weight:400;color:var(--t3)}
.sidehd{padding:4px 4px 10px;font-size:15px;font-weight:500}
.side .lgc{padding:4px 0}
.lr{display:flex;align-items:center;padding:9px 18px;width:100%;text-align:left}
.lr b{flex:1;margin-left:12px;font-size:15px;font-weight:500}
.lr:hover{background:rgba(34,40,47,.025)}
.bd{width:24px;height:24px;border-radius:99px;display:inline-block;flex:none;margin:4px}
.side .add{margin-top:8px;width:100%;padding:14px 0;text-align:center;font-size:15px;font-weight:500;color:var(--primary)}
/* 고르는 판 (lgPick) */
.lgp{display:flex;flex-direction:column;min-height:0}
.lgp-hd{padding:18px 14px 10px 20px;font-size:15px;font-weight:500}
.lgp-hint{padding:0 20px 8px;font-size:11.5px;line-height:1.5;color:var(--t3)}
.lgp .scroll{padding:0 0 10px}
.lgp-list{margin:0 14px;padding:4px 0}
.lgp-add{margin:0 14px 10px;padding:14px 0;text-align:center;font-size:15px;font-weight:500;color:var(--primary)}
.lgp-ok{margin:0 14px 22px;height:54px;border-radius:16px;background:var(--primary);color:#fff;font-size:16px;font-weight:500;flex:none}
.dp{margin:0 14px 10px;padding:6px 2px 0}
@media (max-width:599px){
  .lg,.wgrid{display:block}
  .lg>*+*{margin-top:9px}
  .wgrid .side{display:none}
  .gr .c{height:58px}
}

@media (max-width:599px){body.pushed .dock,body.pushed .pop{display:none}body.pushed .main{padding-bottom:24px}}
.toast.two{border-radius:22px;align-items:flex-start}.toast span small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;line-height:1.35;color:rgba(255,255,255,.72)}

/* ── 빠른입력 — 앱 ledger_quick_screen.dart ── */
.qgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.qc{background:#fff;border-radius:18px;box-shadow:var(--cardShadow);padding:14px 15px;margin-bottom:10px;overflow:hidden}
.qh{font-size:15px;font-weight:700}
.qhint{margin-top:3px;font-size:11.5px;color:var(--t3)}
.qempty{padding:14px 0 6px;font-size:12.5px;color:var(--t3)}
.qswipe{position:relative;margin:0 -15px;overflow:hidden}
.qdel{position:absolute;inset:0;background:#FDECEC;color:#D43B3B;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:flex-end;padding-right:20px}
.qrow{position:relative;background:#fff;display:flex;align-items:center;gap:8px;padding:9px 15px;touch-action:pan-y}
.qmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left}
.qtx{flex:1;min-width:0}.qtx b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtx>span{display:block;font-size:12.5px;color:var(--t3);margin-top:1px}
.qamt{width:118px;flex:none;background:var(--chip);border-radius:12px;padding:9px 11px;display:flex;align-items:baseline;gap:2px;cursor:text}
.qamt input{flex:1;min-width:0;border:0;outline:0;background:none;text-align:right;font:inherit;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.qamt input::placeholder{color:var(--t3)}
.qamt i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--t3)}
.qput{width:53px;flex:none;padding:10px 0;border-radius:12px;background:var(--primary);color:#fff;font-size:12.5px;font-weight:700}
.qput:disabled{background:var(--chip);color:var(--t3);cursor:default}
.qadd{display:block;width:calc(100% + 30px);margin:6px -15px -14px;padding:13px 0;border-top:1px solid var(--divider);font-size:15px;font-weight:700;color:var(--primary)}
.lrow{display:flex;align-items:center;gap:10px;padding:10px 0}
.qlike{flex:none;padding:8px 14px;border-radius:99px;background:var(--soft);color:var(--primary);font-size:12.5px;font-weight:700}
.qdirect{display:block;margin-bottom:10px;background:var(--primary);color:#fff;border-radius:18px;text-align:center;padding:17px 0;font-size:15px;font-weight:700}
.qtip{background:var(--soft);border-radius:18px;padding:14px 15px 15px}
.qtip b{display:block;font-size:15px;font-weight:700;color:var(--primary)}.qtip span{display:block;margin-top:3px;font-size:12.5px;color:var(--t2)}
.fav .fr.in input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.fav .fr.in input::placeholder{font-weight:400;color:var(--t3)}
.lgp-ok:disabled{background:rgba(26,111,209,.31);cursor:default}

/* ── 문자 붙여넣기 — 앱 ledger_sms_screen.dart ── */
.sgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.smsc{padding:14px 18px 16px}
.smsc .st{display:block;font-size:15px;font-weight:500}
.smsc .sd{margin-top:6px;font-size:12.5px;line-height:1.5;color:#9AA3AD}
.smsc .ta{display:block;width:100%;height:200px;margin-top:12px;border:0;outline:0;resize:vertical;background:var(--chip);border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.5;color:var(--ink)}
.smsc .ta::placeholder{color:var(--t3)}
.smsc .cnt{margin-top:8px;font-size:11.5px;color:var(--t3)}
.smsc .warn{margin-top:8px;background:#FFF4DC;border:1px solid #F0DFB8;color:#8A4A18;border-radius:12px;padding:11px 13px;font-size:11.5px;line-height:1.6}
.sbtns{display:flex;gap:8px;margin-top:12px}
.sbtns .sb,.sb.file{flex:1;height:44px;border-radius:12px;font-size:15px;font-weight:600}
.sbtns .sb.g,.sb.file.g{background:var(--chip);color:var(--t2)}.sbtns .sb.f{background:var(--primary);color:#fff}.sb.f:disabled{background:rgba(26,111,209,.31);cursor:default}
.sb.file{display:block;width:100%;margin-top:8px}
.smsc .fh{margin-top:10px}
.rnote{background:#E7F1E9;color:#175E36;border-radius:12px;padding:11px 13px;font-size:11.5px;line-height:1.65;margin-bottom:8px}
.rhead{display:flex;align-items:baseline;padding:4px 6px 8px;font-size:11.5px;color:var(--t3)}.rhead span{flex:1}
.rhead .all{font-size:11.5px;font-weight:600;color:#D43B3B;padding-left:10px}
.rlist{padding:4px 0;margin-bottom:10px}
.srow{display:flex;align-items:center;gap:12px;padding:9px 18px;cursor:pointer}
.srow em{font-style:normal;font-size:15px;font-weight:700;margin-left:12px;white-space:nowrap}
.srow .ckb{width:22px;height:22px;flex:none;border-radius:7px;background:var(--primary);display:flex;align-items:center;justify-content:center}
.srow.off .ckb{background:var(--chip);border:1.5px solid #C9CFD6}
.srow .drop{display:flex;padding:4px 0 4px 4px}
.sres .putall{display:block;width:100%;margin:0}
@media (max-width:599px){.qgrid,.sgrid{display:block}.sres{margin-top:10px}}

/* ── 비밀번호 화면 (PinView) ── */
.pinpage{position:fixed;inset:0;z-index:80;background:#fff;display:flex;flex-direction:column}
.pin-bar{display:flex;align-items:center;height:56px;padding:0 12px}
.pin-bar .pin-back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.pin-bar h2{margin-left:6px;font-size:17px;font-weight:600}
.pin-head{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px}
.pin-t{font-size:19px;font-weight:600}.pin-t.bad{color:#D43B3B}
.pin-s{padding-top:8px;font-size:12.5px;color:var(--t3)}
.pin-dots{display:flex;margin-top:20px}.pin-dots i{width:13px;height:13px;border-radius:99px;margin:0 7px;background:var(--divider)}
.pin-dots i.on{background:var(--primary)}.pin-dots i.bad{background:#D43B3B}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);padding:0 26px 26px;width:100%;max-width:440px;align-self:center}
.pin-pad button{height:56px;border-radius:16px;font-size:25px;font-weight:500;color:var(--ink)}
.pin-pad button.sm{font-size:13.5px;color:var(--t3)}
.pin-pad button:not(:disabled):hover{background:rgba(34,40,47,.04)}
.pin-text{width:100%;max-width:360px;padding:20px 20px 0;display:flex;flex-direction:column;gap:14px}
.pin-text input{height:52px;border:1px solid var(--divider);border-radius:16px;text-align:center;font:inherit;font-size:24px;font-weight:500;outline:0}
.pin-text input:focus{border:1.6px solid var(--primary)}
.pin-ok{height:52px;border-radius:16px;background:var(--primary);color:#fff;font-size:15px;font-weight:600}.pin-ok:disabled{background:rgba(26,111,209,.35)}

/* ── 나의 지갑 — 앱 wallet_screen.dart · wallet_card.dart ── */
.sg3.w4{max-width:560px}
.lockbar{display:flex;align-items:center;gap:8px;width:100%;max-width:560px;margin:0 0 12px;padding:11px 14px;border-radius:15px;background:#FFF4DC;color:#8A4A18;font-size:12.5px;text-align:left}
.wgrid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.deckcard{display:block}
.wcard{position:relative;aspect-ratio:1.586;border-radius:16px;overflow:hidden;padding:16px 18px;display:flex;flex-direction:column;
  box-shadow:0 6px 14px rgba(0,0,0,.18);text-align:left}
.wcard .sheen{position:absolute;left:-60px;top:-80px;bottom:-80px;width:150px;transform:rotate(17.8deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.10),rgba(255,255,255,0));pointer-events:none}
.wcard>*{position:relative}
.wcard .wt{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chiprow{display:flex;align-items:center;gap:10px;margin-top:14px}
.chip{display:block;width:34px;height:26px;border-radius:5.1px;background:linear-gradient(135deg,#F2DFA8,#D8B65E 38%,#B8912F 60%,#EBD79C)}
.chip svg{width:100%;height:100%;display:block}
.chip.s{width:13px;height:10px;border-radius:2px}
.wave{transform:rotate(90deg)}
.wcard .sp{flex:1}
.wcard .wn{font-size:17px;font-weight:700;letter-spacing:4.2px;white-space:nowrap}
.wd{display:flex;align-items:flex-end;gap:18px;margin-top:9px}.wd .sp{flex:1}
.wd .sm span{display:block;font-size:11.5px}.wd .sm b{display:block;margin-top:2px;font-size:12.5px;font-weight:600}
.nm{font-size:17px;font-weight:800;letter-spacing:.4px}.nm.visa{font-style:italic;letter-spacing:-.5px}
.wcard.back .stripe{position:absolute;left:0;right:0;top:20px;height:44px;background:#16181B}
.wcard.back .sig{position:absolute;left:18px;right:90px;top:84px;height:30px;border-radius:5px;background:#F1F2F3;padding:0 10px;display:flex;align-items:center}
.wcard.back .sig span{font-size:11.5px;font-style:italic;color:var(--t3)}
.wcard.back .cvcbox{position:absolute;right:18px;top:84px;width:62px;height:30px;border-radius:5px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;justify-content:center}
.wcard.back .cvl{position:absolute;left:18px;top:118px;font-size:11.5px}
.wcard.back .bnum{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between}
.wcard.back .bnum span{display:block;font-size:11.5px}.wcard.back .bnum b{display:block;margin-top:2px;font-size:15px;font-weight:700;letter-spacing:1.1px}
.addcard{aspect-ratio:1.586;border-radius:16px;border:1.4px solid var(--divider);background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--primary)}
.whead{display:flex;align-items:baseline;padding:0 4px 8px}.whead b{flex:1;font-size:13px;font-weight:600}.whead span{font-size:12.5px;color:var(--t3)}
.wlist{padding:4px 0}
.wrow{display:flex;align-items:center;gap:13px;padding:12px 13px}
.wrow:hover{background:rgba(34,40,47,.025)}
.wrow .qtx b{font-weight:600}.wrow .qtx .dots{letter-spacing:1.6px}
.wmini{position:relative;width:72px;height:46px;flex:none;border-radius:7px;overflow:hidden;display:flex;align-items:flex-start;gap:4px;padding:9px 0 0 7px}
.wmini .wave{margin-top:-1px}
.wnet{font-style:normal;font-size:12.5px;color:var(--t3);padding-left:6px;white-space:nowrap}
.setnote{margin-top:12px;font-size:11.5px;line-height:1.7;color:var(--t3)}
.wedit{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:28px;align-items:start}
.flip{display:block;width:100%;position:relative;perspective:1200px;padding:0}
.flip .f1,.flip .f2{display:block;backface-visibility:hidden;transition:transform .35s ease-in-out}
.flip .f2{position:absolute;inset:0;transform:rotateY(180deg)}
.flip.on .f1{transform:rotateY(180deg)}.flip.on .f2{transform:rotateY(360deg)}
.flip:disabled{cursor:default}
.wbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.wbtns button{height:52px;border-radius:16px;font-size:15px;font-weight:600}
.wb1{background:var(--primary);color:#fff}.wb2{background:var(--chip);color:var(--t2)}
.wf .fr.in input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.wf .fr.in input::placeholder{font-weight:400;color:var(--t3)}
.wf .fr.unl svg{margin-left:6px}
.swatch{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.swatch button{width:34px;height:34px;border-radius:99px}.swatch button.on{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--primary)}
.savebtn{display:block;width:100%;height:52px;margin-top:14px;border-radius:16px;background:var(--primary);color:#fff;font-size:15px;font-weight:600}
.delbtn{display:block;width:100%;height:46px;margin-top:8px;border-radius:16px;color:#D43B3B;font-size:15px;font-weight:600}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding:8px 14px 10px}
.bgrid button{display:flex;align-items:center;gap:10px;padding:8px 4px;border-radius:12px;text-align:left;min-width:0}
.bgrid button img{width:30px;height:30px;border-radius:99px;object-fit:cover;flex:none}
.bgrid button b{flex:1;min-width:0;font-size:15px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgrid button.on b{font-weight:600}
@media (max-width:599px){.wgrid2,.wedit{display:block}.wgrid2>*+*,.wedit>*+*{margin-top:16px}.deck{grid-template-columns:1fr}}
/* PC 는 왼쪽 메뉴를 두고 본문 자리에만 덮습니다 (들어간 화면과 같은 구성) */
@media (min-width:600px){.pinpage{left:var(--nav)}}

/* ── 내 정보 · 명함 ── */
.nmrow{display:flex;align-items:center;padding:14px 18px;margin-bottom:6px}
.nmrow .nmt{flex:1;min-width:0}.nmrow .nmt b{display:block;font-size:15px;font-weight:500}.nmrow .nmt small{display:block;margin-top:2px;font-size:11.5px;color:var(--t3)}
.nmrow em{font-style:normal;font-size:15px;color:var(--t3);margin-right:8px}.nmrow i{font-style:normal;font-size:12px;color:#C3C8CE}
.pc2 .sec{margin-top:18px}.pc2 .sec:first-child{margin-top:4px}
.wf input[type=date]{color:var(--ink)}
.mi-sub{margin:-4px 0 14px;font-size:11.5px;color:var(--t3)}
.mi-card{display:flex;justify-content:center;background:#E7F0F3;border-radius:16px;padding:28px 0}
.ncard{background:#F7F7F4;display:flex;flex-direction:column}
.ncard{color:#1246D6}
.nc-top{display:flex;align-items:flex-start;justify-content:space-between}.nc-top span{color:#22282F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-mark{border-top:solid #1246D6;line-height:1;font-weight:600}
.nc-sp{flex:1}
.nc-name{font-weight:700;letter-spacing:-.2px}
.nc-role{font-weight:400}
.nc-bot{display:flex;align-items:flex-end}
.nc-lines{flex:1;min-width:0}
.nc-lines div{display:flex;align-items:baseline;line-height:1.5}.nc-lines span{flex:none;color:#8B939C}
.nc-lines b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-qr{display:block;background:#fff;flex:none}.nc-qr svg{display:block;width:100%;height:100%}
.mi-fields{padding:4px 0}
.swrow{display:flex;align-items:center;padding:13px 18px;cursor:pointer}
.swrow span{flex:1;font-size:15px}
.swrow input{position:absolute;opacity:0;pointer-events:none}
.swrow .sw{position:relative;width:44px;height:26px;border-radius:99px;background:var(--chip);transition:background .18s}
.swrow .sw::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s}
.swrow input:checked+.sw{background:var(--primary)}.swrow input:checked+.sw::after{transform:translateX(18px)}
.swrow input:focus-visible+.sw{outline:2px solid var(--primary);outline-offset:2px}

/* 홈 오늘 카드 — 앱 home_tab_screen.dart 값 */
.hm-line{display:flex;align-items:center;gap:11px;padding:5px 0}
.hm-line span{width:62px;flex:none;font-size:12.5px;font-weight:700;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-line b,.hm-todo b{flex:1;min-width:0;font-size:13.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-todo{display:flex;align-items:center;gap:10px;padding:4px 0}
.hm-todo i{width:19px;height:19px;flex:none;border-radius:6px;border:1.6px solid var(--divider);display:flex;align-items:center;justify-content:center}
.hm-todo.done i{background:var(--primary);border-color:var(--primary)}
.hm-todo.done b{color:var(--t3);text-decoration:line-through}
.hm-spent{display:flex;align-items:flex-end;letter-spacing:-.5px}
.hm-spent b{font-size:24px;font-weight:700}.hm-spent b i{font-style:normal;font-size:14px;font-weight:600}
.hm-spent span{margin-left:auto;padding-bottom:4px;font-size:11.5px;color:var(--t3);letter-spacing:0}
.hm-bar{margin-top:9px;height:8px;border-radius:4px;background:var(--chip);overflow:hidden}.hm-bar i{display:block;height:8px;border-radius:4px}
.hm-rest{display:flex;margin-top:6px;font-size:11.5px;color:var(--t3)}.hm-rest b{margin-left:auto;font-weight:700}
.hm-div{height:1px;background:var(--divider);margin:10px 0 8px}
.hm-yest{font-size:11.5px;color:var(--t2)}

/* ── 비밀번호 바꾸기 · 방식 · 패턴 (lock.js — 앱 pin_flows.dart · pin_view.dart PatternPad) ── */
.pin-t{white-space:pre-line;line-height:1.4}
.pinpage.pat .pin-head{padding-bottom:8px}
.pin-patwrap{display:flex;flex-direction:column;align-items:center;padding:0 26px 22px}
.pin-pat{width:min(300px,100%);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none}
.pin-pat svg{display:block;width:100%;height:100%;cursor:pointer}
.pin-short{min-height:22px;padding-top:6px;font-size:12.5px;color:#D43B3B}
.pin-link{padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:500;color:var(--primary)}
.lk-row{display:flex;align-items:center;width:100%;padding:14px 18px;text-align:left}
.lk-row b{flex:1;font-size:15px;font-weight:500}
.lk-row em{font-style:normal;font-size:12.5px;color:var(--t3);margin-left:12px}
.lk-row i{font-style:normal;font-size:12px;color:#C3C8CE;margin-left:10px}
.lk-row:hover{background:rgba(34,40,47,.025)}
.lk-row:disabled{cursor:default}.lk-row:disabled:hover{background:none}.lk-row:disabled b{color:var(--t3)}
.pk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.pk-list{padding:4px 0}
.pk-row{display:flex;align-items:center;width:100%;padding:14px 18px;text-align:left}
.pk-row:hover{background:rgba(34,40,47,.025)}
.pk-row .rd{width:20px;height:20px;flex:none;margin-right:12px;border-radius:99px;border:1.8px solid var(--divider);box-sizing:border-box}
.pk-row.on .rd{border:6px solid var(--primary)}
.pk-row b{display:block;font-size:15px;font-weight:500}
.pk-row small,.pk-sw small,.wimp-sw small{display:block;margin-top:3px;font-size:11.5px;color:var(--t3)}
.pk-sec{margin-top:4px}
.pk .setnote{margin:12px 6px 0}
/* 나의 지갑 — 비밀번호 줄 · 가져오기 (wallet_screen.dart _importRow · WalletImportScreen) */
.wpin-sec{margin-top:22px}
.wpin{padding:4px 0}
.wimp-row{display:flex;align-items:center;gap:10px;margin-top:12px;padding:13px 14px}
.wimp-row b{flex:1;min-width:0;font-size:15px;font-weight:600}
.wimp-row:hover{background:#FAFBFC}
.wimp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:start}
.wimp-list{padding:4px 0}
.wimp-sw span{min-width:0}
.wimp-none{padding:22px 18px;text-align:center;font-size:12.5px;color:var(--t3)}
.wimp-save:disabled{background:rgba(26,111,209,.35)}
.wimp-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
@media (max-width:599px){.pk-grid,.wimp-grid{display:block}.pk-grid>*+*{margin-top:16px}.wimp-side{display:none}}

/* ══ PC 새 틀 (W61 · 2026-09-23 승인) — 폭 600 이상만. 폰 모양은 위 규칙 그대로 ══ */
.canvas,.topbar{display:none}
.addmenu{position:fixed;z-index:60;background:#fff;border-radius:16px;padding:6px;box-shadow:0 12px 32px rgba(20,40,70,.16);border:1px solid #EDF0F3;display:flex;flex-direction:column}
.addmenu button{height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:11px;font-size:14px;font-weight:600;text-align:left}
.addmenu button:hover,.addmenu button:focus-visible{background:#F5F7FA;outline:none}
@media (min-width:600px){
  :root{--nav:228px;--line:#EDF0F3;--fill:#F5F7FA;--t4:#9AA4AE;--red:#D9534F}
  body{background:radial-gradient(900px 620px at 0 0,#D9E6F5 0%,rgba(217,230,245,0) 70%),radial-gradient(700px 500px at 100% 100%,#E4E9F2 0%,rgba(228,233,242,0) 70%),#ECEFF3;background-attachment:fixed;min-height:100vh}
  /* 왼쪽 메뉴 */
  .nav{background:transparent;border:0;padding:24px 14px 18px 16px;display:flex;flex-direction:column}
  .nav .logo{padding:0 8px}
  .nav .add{position:static;width:auto;margin:22px 0 20px;height:44px;border-radius:14px;font-size:14.5px;box-shadow:0 6px 16px rgba(26,111,209,.28)}
  .navlab{font-size:12px;color:var(--t3);font-weight:500;padding:0 10px 8px}
  .nav .tab{height:42px;border-radius:13px;font-size:14.5px;color:#3A424B}
  .nav .tab:hover{background:rgba(255,255,255,.5)}
  .nav .tab.on{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(20,40,70,.07)}
  .nav .subs{display:none}
  .acc{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,.55)}
  .acc:hover{background:rgba(255,255,255,.8)}
  .acc .av{width:36px;height:36px;border-radius:50%;background:#fff;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.08);flex:none}
  .acc span{min-width:0}.acc b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acc small{display:block;font-size:12px;color:var(--t3);margin-top:1px}
  /* 흰 본문판 · 위 줄 */
  .canvas{display:block;position:fixed;left:var(--nav);top:12px;right:12px;bottom:12px;background:#fff;border-radius:26px;box-shadow:0 10px 40px rgba(25,45,80,.08)}
  .topbar{display:flex;align-items:center;gap:10px;position:fixed;left:var(--nav);right:12px;top:12px;height:62px;padding:0 22px 0 26px;border-bottom:1px solid var(--line);z-index:5;background:#fff;border-radius:26px 26px 0 0}
  .crumb{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--t3);min-width:0;white-space:nowrap}
  .crumb b{color:var(--ink);font-weight:600}.crumb .dim b,.crumb b:has(+ .crumb-x:not(:empty)){color:var(--t3);font-weight:500}
  .crumb-x{display:contents;font-style:normal}
  .gsb{margin-left:auto;width:270px;height:38px;border-radius:19px;background:var(--fill);display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;font-size:13.5px;color:var(--t4)}
  .gsb:hover{background:#EEF1F5}
  .gsb kbd{margin-left:auto;height:24px;padding:0 8px;border-radius:8px;background:#fff;border:1px solid #E3E7EC;font:600 11.5px Pretendard,sans-serif;color:var(--t3);display:flex;align-items:center}
  .main{left:var(--nav);top:74px;right:12px;bottom:12px;padding:20px 26px 26px;border-radius:0 0 26px 26px}
  /* 제목 줄 — 큰 제목 · 옆에 칸 알약 · 오른쪽 끝에 단추 */
  .page{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:8px;min-height:100%}
  .page>*{flex:0 0 100%;min-width:0;order:3}
  .page>.tbar{display:contents}
  .page>.tbar>*{order:2;flex:none}
  .page>.tbar>h2{order:0;flex:none;font-size:27px;font-weight:700;letter-spacing:-.8px;margin:0 10px 0 2px;height:52px;display:flex;align-items:center}
  .page>.tbar>h2+*{margin-left:auto}
  .page>.seg{order:1;flex:none}
  .page>.tbar~*:not(.seg){margin-top:14px}
  .page>.tbar~.seg~*:not(.seg){margin-top:14px}
  .seg{width:auto;padding:0;background:none;border:0;box-shadow:none;margin:0;gap:6px}
  .seg a{flex:none;height:34px;padding:0 15px;display:flex;align-items:center;border-radius:17px;background:var(--fill);font-size:13.5px;font-weight:600;color:var(--t2)}
  .seg a:hover{background:#EDF0F4}
  .seg a.on{background:var(--ink);color:#fff;box-shadow:none}
  .seg a.on svg{stroke:#fff}
  .tbar .i{width:38px;height:38px;border-radius:50%;border:1px solid #E3E7EC;margin-left:6px}
  .tbar .i:hover{background:var(--fill)}
  .tbar .pl{height:36px;padding:0 14px;border-radius:18px;border:1px solid #E3E7EC;background:#fff;font-size:13.5px;font-weight:600;color:var(--t2);display:flex;align-items:center;margin-right:0}
  .toast{left:calc(50% + var(--nav) / 2)}
}

/* ══ W61 PC — 프로필 · 프로필 고치기 · 내 정보 · 나의 지갑 (2026-09-23 · 폭 600 이상만, 폰 모양은 위 그대로) ══ */
@media (min-width:600px){
  /* 제목 줄 — 27 굵게 · 동그란 테두리 단추 */
  :is(.pf-page,.mi-page,.wl-page)>.bar2{height:52px;margin:0 0 14px}
  :is(.pf-page,.mi-page,.wl-page)>.bar2 h2{font-size:27px;font-weight:700;letter-spacing:-.8px;margin-left:12px}
  :is(.pf-page,.mi-page,.wl-page)>.bar2 .bk{width:38px;height:38px;margin-left:0;border-radius:50%;border:1px solid #E3E7EC;flex:none}
  :is(.pf-page,.mi-page,.wl-page)>.bar2 .bk+.bk,:is(.mi-page,.wl-page)>.bar2 h2+.bk{margin-left:6px}
  :is(.pf-page,.mi-page,.wl-page)>.bar2 .bk:hover{background:#F5F7FA}
  .pf-page>.bar2 .sv{height:38px;padding:0 17px;border-radius:19px;border:1px solid #E3E7EC;font-size:13.5px}
  .pf-page>.bar2 .sv.on{background:var(--primary);border-color:var(--primary);color:#fff}
  :is(.pf-page,.mi-page,.wl-page) .sec{font-size:16px;font-weight:700;letter-spacing:-.3px;margin:4px 2px 10px}
  :is(.pf-page,.mi-page,.wl-page) .lgc,:is(.pf-page,.mi-page,.wl-page) .sr{box-shadow:none;border:1px solid var(--line);border-radius:18px}
  :is(.pf-page,.mi-page,.wl-page) .ln2{background:var(--line)}
  :is(.pf-page,.mi-page,.wl-page) .setnote{margin:10px 2px 0}
  /* 두 칸 — 왼쪽 흰 카드 · 오른쪽 옅은 판, 화면 아래 끝까지 */
  :is(.pf-page,.mi-page)>.pc2,.wl-page>.wgrid2{gap:16px;align-items:stretch;min-height:calc(100vh / var(--z) - 198px)}
  .wl-page>.wgrid2{min-height:calc(100vh / var(--z) - 246px)}
  :is(.pf-page,.mi-page)>.pc2>div:last-child,.wl-page>.wgrid2>div:last-child{background:#F5F7FA;border-radius:22px;padding:18px 20px 20px;min-width:0}
  :is(.pf-page,.mi-page)>.pc2>div:last-child :is(.lgc,.sr),.wl-page>.wgrid2>div:last-child .lgc{border-color:#fff}
  /* 프로필 */
  .pf-page>.pc2{grid-template-columns:minmax(340px,5fr) minmax(0,7fr)}
  .pf-page .gc{border-radius:22px;box-shadow:none;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:28px 28px 26px}
  .pf-page .gc .av{width:104px;height:104px}
  .pf-page .gc .nm{font-size:22px}
  .pf-page .gc .ed{max-width:320px;width:100%;margin-left:auto;margin-right:auto}
  .pf-page .sr{height:66px;padding:0 18px;margin-bottom:10px}
  .pf-page .sr:hover{border-color:#E3E7EC}
  /* 프로필 고치기 — 사진 칸 (끌어다 놓기: S6 .dropov 값) */
  .pf-edit>.pc2{grid-template-columns:minmax(340px,5fr) minmax(0,7fr)}
  .pf-edit .left{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 26px 26px;transition:background .12s}
  .pf-edit .left.pf-over{background:rgba(236,244,253,.92);border:2px dashed #1A6FD1;padding:33px 25px 25px}
  .pf-edit .left.pf-over .bav::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px dashed #1A6FD1;background:rgba(26,111,209,.08);pointer-events:none}
  .pf-drop{margin-top:14px;text-align:center;font-size:12px;color:#9AA4AE}
  .pf-over .pf-drop{font-size:14px;font-weight:700;color:var(--primary)}
  .pf-edit .nf{border-radius:18px;border-color:#fff}
  .pf-edit .nf.has{border-color:var(--primary)}
  .pf-edit .chips button{border-color:#fff}
  .pf-edit .chips button.on{border-color:var(--primary)}
  /* 내 정보 */
  .mi-page>.pc2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mi-page>.pc2>div:first-child{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 20px 20px;min-width:0}
  .mi-page .pc2 .sec{margin-top:20px}.mi-page .pc2 .sec:first-child{margin-top:4px}
  .mi-page .mi-card{border-radius:18px;background:#E9EFF3}
  .mi-page .wbtns button{height:48px}
  .mi-page .wb2{background:#fff;border:1px solid #E3E7EC}
  .mi-page .savebtn{height:48px}
  /* 나의 지갑 — 칩 · 카드 격자 · 오른쪽 옅은 판 */
  .wl-page .sg3{max-width:none;padding:0;border:0;background:none;box-shadow:none;gap:6px;margin:0 0 14px}
  .wl-page .sg3 button{flex:none;height:34px;padding:0 15px;border-radius:17px;border:0;background:#F5F7FA;font-size:13.5px;font-weight:600;color:var(--t2)}
  .wl-page .sg3 button:hover{background:#EDF0F4}
  .wl-page .sg3 button.on{background:var(--ink);color:#fff;box-shadow:none}
  .wl-page .lockbar{max-width:none;border-radius:17px}
  .wl-page>.wgrid2{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr)}
  .wl-page .deck{align-content:start;gap:16px}
  .wl-page .addcard{border:1.5px dashed #C9D6E6;border-radius:16px;background:#FAFCFE}
  .wl-page .addcard:hover{background:#F2F7FD}
  .wl-page .whead{padding:0 2px 10px}.wl-page .whead b{font-size:16px;font-weight:700}
  .wl-page .wrow:hover{background:#FAFBFC}
  .wl-page .wimp-row{border-color:#fff}
  .wl-page>.wedit{gap:24px}
  .wl-page>.wedit>div:last-child .lgc{border-color:var(--line)}
  .wl-page .savebtn{height:48px}
}