:root{--bg:#f8f6fa;--card:#fff;--tx:#231a2b;--sub:#786e80;--pri:#5c068c;--pri2:#4a0571;--bd:#e6dfec;--dg:#c23b3b;--ok:#3f7d2c;--soft:#f2eaf7;--soft2:#e6d6f0;--hd:#5c068c;--sh:0 1px 4px rgba(40,10,60,.08)}
/* v0.18: Pretendard(OFL-1.1, app/lib/fonts) — 파일이 없으면 시스템 글꼴 */
@font-face{font-family:'Pretendard';src:url('lib/fonts/Pretendard-Regular.woff2') format('woff2');font-weight:100 500;font-display:swap}
@font-face{font-family:'Pretendard';src:url('lib/fonts/Pretendard-Bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 "Pretendard",-apple-system,"Malgun Gothic","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased}
header{padding:14px max(16px,calc((100% - 608px)/2)) 12px;background:var(--hd);color:#fff}
header h1{color:#fff}header h1 small{color:rgba(255,255,255,.7)}
h1{margin:0;font-size:22px;letter-spacing:-.3px} h1 small{font-size:12px;color:var(--sub);font-weight:400}
.sub{margin:2px 0 0;color:var(--sub)}
main{max-width:640px;margin:0 auto;padding:8px 16px 96px}
.day{margin:16px 0 6px;font-weight:700;color:var(--pri)}
.item{display:flex;gap:12px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:12px;margin-bottom:8px;cursor:pointer}
.item:active{background:var(--soft)}
.time{min-width:48px;color:var(--sub);font-variant-numeric:tabular-nums}
.body{flex:1;min-width:0}
.title{font-weight:600;word-break:break-word}
.place,.memo{color:var(--sub);font-size:14px;word-break:break-word;white-space:pre-wrap}
.empty{text-align:center;color:var(--sub);margin:48px 0}
.tools{display:flex;gap:8px;margin-top:24px}
.msg{color:var(--sub);font-size:14px;min-height:20px}
button,.btnlike{font:inherit;border:0;border-radius:12px;font-weight:600;padding:10px 16px;background:var(--pri);color:#fff;cursor:pointer;min-height:44px}
.ghost{background:#fff;color:var(--tx);border:1px solid var(--bd);display:inline-flex;align-items:center}
.danger{background:var(--dg)}
.fab{box-shadow:0 6px 16px rgba(40,10,60,.28)!important;position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:calc(100% - 32px);max-width:608px;box-shadow:0 4px 14px rgba(0,0,0,.2);font-weight:600}
dialog{border:0;border-radius:14px;padding:16px;width:min(92vw,420px)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog h2{margin:0 0 8px;font-size:18px}
dialog label{display:block;margin:10px 0;font-size:14px;color:var(--sub)}
dialog input,dialog textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;color:var(--tx)}
.row{display:flex;gap:8px;margin-top:12px}.grow{flex:1}
.tabs{display:flex;gap:8px;margin:8px 0 0}
.tab{flex:1;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);font-weight:500}
.tab.on{background:#fff;color:var(--pri);border-color:#fff;font-weight:700}
.packform{display:flex;gap:6px;margin:8px 0 12px}
.packform select,.packform input{padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;min-height:44px;background:#fff;color:var(--tx)}
.packform input{flex:1;min-width:0}
.pitem{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:4px 8px 4px 12px;margin-bottom:6px}
.pitem label{flex:1;display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;word-break:break-word}
.pitem input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--pri)}
.pitem.done label span{color:var(--sub)}
.x{background:transparent;color:var(--sub);padding:0;width:44px;min-height:44px;font-size:18px}
h3{margin:20px 0 6px;font-size:16px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:12px;margin:12px 0}
.sumrow{display:flex;justify-content:space-between;padding:2px 0}
.sumrow.ok b{color:var(--ok)}.sumrow.bad b{color:var(--dg)}
.bycur{margin-top:6px;padding-top:6px;border-top:1px solid var(--bd);color:var(--sub);font-size:14px}
.warn{margin-top:8px;color:var(--dg);font-size:14px}
.blabel{display:block;font-size:14px;color:var(--sub)}
.blabel input{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;color:var(--tx);min-height:44px}
.raterow{display:flex;align-items:center;gap:8px;margin-bottom:6px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:4px 4px 4px 12px}
.rlabel{min-width:88px}
.raterow input{flex:1;min-width:0;padding:8px;border:1px solid var(--bd);border-radius:8px;font:inherit;min-height:40px}
.amt{text-align:right}
dialog select{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;color:var(--tx);background:#fff}
#btnFx{margin-top:4px}
.daytabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;margin:8px 0 4px;-webkit-overflow-scrolling:touch}
.dtab{flex:none;white-space:nowrap;background:#fff;color:var(--tx);border:1px solid var(--bd);border-radius:20px;padding:8px 14px;min-height:40px;font-size:14px;font-weight:500}
.dtab.wrote{background:var(--soft2);border-color:#c9a8de}
.dtab.on{background:var(--pri);color:#fff;border-color:var(--pri);font-weight:600}
.dtab.warnTab{border-color:var(--dg);color:var(--dg)}.dtab.warnTab.on{background:var(--dg);color:#fff}
.tripbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 0;font-weight:600}
.small{padding:6px 12px;min-height:36px;font-size:14px;font-weight:400}
.tripform label{display:block;margin:10px 0;font-size:14px;color:var(--sub)}
.tripform input,.item.editing input,.item.editing textarea{display:block;width:100%;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;color:var(--tx);min-height:44px}
.addform{display:grid;grid-template-columns:96px 1fr auto;gap:6px;margin-top:12px}
.addform input{padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;min-height:44px;min-width:0;color:var(--tx)}
.addform #aPlace{grid-column:2/4}
.addform #aTitle{grid-column:1/3}
.addform button{grid-column:3/4}
.item.editing{display:block;cursor:default}
.item.editing .egrid{display:grid;grid-template-columns:96px 1fr;gap:6px;margin-bottom:6px}
.item.editing .egrid input:nth-child(3){grid-column:1/3}
.item.editing textarea{margin-top:6px}
.item.editing .row{margin-top:8px}
.item.editing label{display:block;margin:6px 0;font-size:14px;color:var(--sub)}
[hidden]{display:none!important}
.small{white-space:nowrap}.tripbar span{font-size:15px}
.budbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;gap:8px;padding:8px 12px;margin:0 -16px;background:var(--bg);border-bottom:1px solid var(--bd);font-weight:600}
.bok{color:var(--ok)}.bbad{color:var(--dg)}
.fold{background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:0 12px 8px;margin:12px 0}
.fold summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.expadd{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:6px;margin:8px 0 0}
.expadd[hidden]{display:none}.xaddbar{margin:8px 0 0;display:flex;justify-content:space-between;align-items:center;gap:8px}.xaddbar .packtools{margin:0}.dtab .dtd{font-weight:800}.dtab.hasd.on{font-weight:400}#expMsg{margin:4px 0}#expMsg:empty{display:none}
.expadd input,.expadd select{padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;min-height:44px;min-width:0;background:#fff;color:var(--tx)}
.expadd #xName{grid-column:1/-1}
.dayhead{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:10px 0 6px;padding:10px 12px;background:#fff;border-radius:12px;color:var(--tx);border:1px solid var(--bd);font-weight:700;text-align:left}
.dayhead span:first-child{color:var(--pri)}
.dayhead span:last-child{font-weight:400;font-size:14px;color:var(--sub)}
.subtabs{display:flex;gap:3px;margin:8px 0 4px;background:var(--soft2);border-radius:12px;padding:3px}
.stab{flex:1;background:transparent;color:#5e4f6b;border:0;border-radius:9px;min-height:38px;padding:7px 12px;font-size:15px;font-weight:500}
.stab.on{background:#fff;color:var(--pri);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}

.tabicon{flex:none;width:56px;padding:0;font-size:18px}
.sh{margin:0 0 8px;font-size:16px}
#paneSet .sub{font-size:14px;margin:10px 0 6px}
#paneSet .tools{margin-top:0;flex-wrap:wrap}

.tab{min-width:0;padding:10px 2px;font-size:15px}
.tabicon{width:44px;padding:0;font-size:18px}
.dfield{display:block;width:100%;box-sizing:border-box;margin-bottom:8px;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;color:var(--tx);background:#fff}
textarea.dfield{resize:vertical;min-height:160px;line-height:1.5}
.row.nomt{margin-top:0;align-items:center}
.dq select{padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;min-height:44px;background:#fff;color:var(--tx);min-width:0;max-width:60%}
.dq .btnlike{justify-content:center}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.thumb{padding:0;aspect-ratio:1;min-height:0;overflow:hidden;background:var(--soft);border:1px solid var(--bd)}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.empty.sm{margin:16px 0 4px}
#dlgPhoto img{display:block;max-width:100%;max-height:60vh;margin:0 auto;border-radius:8px}

.pcell{position:relative;min-width:0}
.pcell .thumb{width:100%}
.pno{position:absolute;left:4px;top:4px;min-width:20px;padding:1px 6px;border-radius:10px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;line-height:18px;text-align:center;pointer-events:none}
.pdel{position:absolute;right:4px;top:4px;width:30px;min-height:30px;height:30px;padding:0;border-radius:15px;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1}
.pins{width:100%;margin-top:4px;padding:4px 2px;min-height:36px;font-size:12px;justify-content:center}
.dpreview{margin-bottom:8px;padding:4px 2px;line-height:1.6}
.pvt{margin:4px 0 10px;font-size:18px}
.pvp{margin:0 0 10px;white-space:pre-wrap;word-break:break-word}
.pvf{margin:0 0 12px;text-align:center}
.pvf img{display:block;max-width:100%;margin:0 auto;border-radius:8px}
.pvf figcaption{margin-top:4px;font-size:12px;color:var(--sub)}
.pvf .pvmiss{color:var(--dg)}
.dfield[hidden],.dpreview[hidden]{display:none}

.packform input#pQty{flex:none;width:64px;text-align:center}
.packtools{margin:0 0 4px;text-align:right}
.packbody[hidden]{display:none}
.pitem .qty,.pitem.done label span.qty{flex:none;margin-left:4px;color:var(--tx);font-size:inherit}
.pe{background:transparent;color:var(--sub);padding:0;width:44px;min-height:44px;font-size:18px}
.pitem.editing{flex-wrap:wrap;gap:6px;padding:8px}
.pitem.editing select,.pitem.editing input{padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;min-height:44px;background:#fff;color:var(--tx);min-width:0}
.pitem.editing input[data-f=ptext]{flex:1 1 120px}
.pitem.editing input[data-f=pqty]{flex:none;width:64px;text-align:center}
.pitem .dayhead{margin:0}
.dayhead.pcat span{color:var(--pri);font-weight:700;font-size:inherit}
#packMsg{min-height:0;margin:0 0 8px}
#packMsg:empty{display:none}

.chart .ch{margin:0 0 8px;font-size:16px}
.donutwrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.donutwrap svg{flex:none}
.legend{list-style:none;margin:0;padding:0;flex:1;min-width:150px;font-size:14px}
.legend li{display:flex;align-items:center;gap:6px;padding:2px 0}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.legend .lt{font-weight:600}
.legend .lv{margin-left:auto;color:var(--sub);text-align:right}
.sub.sm{font-size:13px;margin-top:6px}

.impbox{margin-top:10px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--soft);font-size:14px}
.impbox h4{margin:8px 0 2px;font-size:15px;word-break:break-all}
.impbox h4:first-child{margin-top:0}
.imperr{margin:4px 0 0;padding-left:18px;color:var(--dg);font-size:13px}
.impbox button:disabled{opacity:.5;cursor:default}

.hrow{display:flex;align-items:center;gap:10px}.hrow h1{flex:none}.concept{flex:1;min-width:0;padding:7px 12px;font:inherit;font-size:15px;color:var(--tx);background:#fff;border:0;border-radius:10px}
.concept:disabled{background:rgba(255,255,255,.55)}

#paneSet .subtabs{margin:0 0 8px}
.destnow{font-size:16px;margin:0 0 8px}.destnow b{font-weight:700}
.cand{display:block;width:100%;text-align:left;background:#fff;color:var(--tx);border:1px solid var(--bd);margin:6px 0 0;padding:10px 12px;min-height:44px;font-size:15px}
.cand small{color:var(--sub);display:block}
.wxrow{display:grid;grid-template-columns:5.2em 1.6em 1fr auto;gap:6px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--bd);font-size:15px}
.wxrow:last-child{border-bottom:0}.wxrow .wd{font-weight:700}.wxrow .wt{color:var(--sub);font-size:13px}.wxrow .wp{color:var(--sub);font-size:13px;text-align:right}
.fxrow{display:flex;justify-content:space-between;padding:5px 2px;font-size:15px}

/* v0.15a: 디지털 시계·가로 날씨 */
.clocks{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.clk{flex:none;min-width:0;background:#181b20;color:#f3f5f8;border-radius:10px;padding:10px 12px;text-align:center}
.clk .cl{font-size:12px;color:#9aa3ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clk .cd{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;letter-spacing:1px;line-height:1.3}
.clk .cs{font-size:12px;color:#9aa3ad}
.wxstrip{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.wxcell{flex:none;width:76px;text-align:center;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:8px 4px}
.wxcell .wd{font-size:13px;font-weight:700}.wxcell .wi{font-size:38px;line-height:1.25}
.wxcell .wt{font-size:13px}.wxcell .wm{font-size:13px;color:var(--sub)}.wxcell .wp{font-size:12px;color:var(--sub)}

/* v0.16: 다이어리 날씨 */
.dwx{margin:0 0 8px;font-size:15px}.dwx .wi{font-size:22px;vertical-align:middle;margin-right:4px}.dwx small{color:var(--sub)}
/* v0.17 일정 지도 */
#paneSch .subtabs{margin:8px 0 4px}
.mapview{height:52vh;min-height:280px;border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:var(--soft);margin-top:8px}
#mapWrap[hidden],#mapBox[hidden]{display:none}
.mtools{margin-top:0}
.mnum{background:var(--pri);color:#fff;border-radius:50%;width:26px;height:26px;line-height:22px;text-align:center;font-weight:700;font-size:14px;border:2px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.6);cursor:pointer}
.mrow{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:8px 10px;margin:6px 0}
.mrow .mbadge{flex:none;width:24px;height:24px;line-height:24px;border-radius:50%;background:var(--pri);color:#fff;text-align:center;font-weight:700;font-size:13px}
.mrow .mbadge.none{background:#cdc3d6}
.mrow .mtxt{flex:1;min-width:0;cursor:pointer}
.mrow .mtxt .t{font-size:15px;overflow-wrap:anywhere}
.mrow .mtxt .p{font-size:13px;color:var(--sub);overflow-wrap:anywhere}
.mrow .mbtns{display:flex;gap:6px;flex:none}
.mpick{background:#fff;border:1px dashed var(--bd);border-radius:10px;padding:8px 10px;margin:-2px 0 8px}
.mpick .packform{margin:0 0 6px}
.mcand{display:block;width:100%;text-align:left;background:#fff;color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;margin:4px 0;font-weight:400;font-size:14px;min-height:40px;overflow-wrap:anywhere}
.mrow.picking{border-color:var(--pri)}

/* v0.18 공통 테마(v0.18b부터 보라 PMS 2597): 입력칸 둥글기·포커스, 버튼 눌림 */
input,select,textarea{border-radius:10px!important;accent-color:var(--pri)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(92,6,140,.35);outline-offset:0;border-color:var(--pri)!important}
.concept:focus{outline:2px solid rgba(255,255,255,.6)}
button:not(:disabled):active,.btnlike:active{filter:brightness(.92)}
.ghost{border-radius:12px}
.tabicon{color:#fff}
.tab.on.tabicon{color:var(--pri)}

/* v0.18a 피드백 */
.hrow .concept{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0!important;color:#fff;text-align:right;font-style:italic;font-weight:700;font-size:26px;letter-spacing:-.3px;padding:2px 0}
.hrow .concept::placeholder{color:rgba(255,255,255,.6);font-size:16px;font-weight:400}
.hrow .concept:disabled{background:transparent}
.hrow .concept:focus{outline:0!important;border-bottom-color:rgba(255,255,255,.7)!important}
.hpen{flex:none;background:transparent;color:rgba(255,255,255,.85);padding:0;width:28px;min-height:28px;height:28px;font-size:16px;font-weight:400}
.hpen:disabled{opacity:.4}
.pen{display:inline-block;transform:scaleX(-1)}
.tbtns{display:flex;gap:6px;align-items:center;flex:none}
.iconbtn{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;justify-content:center}
.iconbtn .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.cntb{display:inline-block;min-width:19px;height:19px;line-height:19px;margin-left:5px;padding:0 5px;border-radius:10px;background:#e8820c;color:#fff;font-size:12px;font-weight:700;text-align:center;vertical-align:1px}
.subtabs{display:inline-flex;width:auto}
.stab{flex:none;padding:7px 16px}
.clk.dayt{background:#cfe9fb;color:#12324a}.clk.dayt .cl,.clk.dayt .cs{color:#3d6380}
.clk.night{background:#181b20;color:#f3f5f8}.clk.night .cl,.clk.night .cs{color:#9aa3ad}
.hrow{flex-wrap:wrap;row-gap:2px}
.tline{flex:1 1 230px;min-width:0;display:flex;align-items:center;gap:4px}
.tripbar span:first-child{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbtns .small{padding:6px 10px}

/* v0.18b: 보라 테마(PMS 2597 #5C068C)·시계 폭·제목 표시 */
.tline{position:relative;justify-content:flex-end;min-height:38px}
.cview{flex:1;min-width:0;display:block;text-align:right;padding-right:8px;color:#fff;font-style:italic;font-weight:700;font-size:26px;letter-spacing:-.3px;line-height:1.3;overflow-wrap:anywhere;pointer-events:none}
.cview .ccity{font-size:23px}
.hrow .tline .concept{position:absolute;left:0;top:0;bottom:0;right:32px;width:auto;color:transparent;caret-color:#fff;padding:2px 8px 2px 0}
.hrow .tline.editing .concept{color:#fff}
.tline.editing .cview{visibility:hidden}
.clk .cd{letter-spacing:.5px}
@media (max-width:380px){.clk .cd{font-size:22px}.clk{padding:8px 10px}}
/* v0.18c: 아이콘 버튼 보라·스크롤바 자리 고정(탭·화면 전환 시 좌우 흔들림 방지)·시계 가운데 정렬 */
html{scrollbar-gutter:stable;overflow-y:scroll}
.iconbtn{color:var(--pri);border-color:#cdb3e0}
.iconbtn.on{color:#fff;border-color:var(--pri)}
.clocks{justify-content:center;gap:24px}
@media (max-width:420px){.clocks{gap:16px}.clk{padding:10px}}
@media (max-width:380px){.clk{padding:8px 10px}}
/* v0.18d: 날짜 탭 스크롤바 숨김·끌어 넘기기, 시계 좌·중·우 여백 같게 */
.daytabs{scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x pan-y}
.daytabs::-webkit-scrollbar{display:none}
@media (pointer:fine){.daytabs{cursor:grab}}
.daytabs.dragging{cursor:grabbing;user-select:none}
.daytabs.dragging .dtab{pointer-events:none}
.clocks,.clocks[class]{justify-content:space-evenly;gap:0}
@media (max-width:420px){.clocks{gap:0}}
@media (max-width:420px){.clk .cd{font-size:23px}}
@media (max-width:380px){.clk .cd{font-size:20px}}
/* v0.19: 하단 탭바(아이콘+글자)·헤더는 제목만 */
header{padding-bottom:14px}
main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
nav.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;display:block;background:#fff;border-top:1px solid var(--bd);box-shadow:0 -2px 10px rgba(40,10,60,.06);padding:0 0 env(safe-area-inset-bottom)}
.tabbar .tbin{display:flex;max-width:640px;margin:0 auto}
.tabbar .tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:60px;min-height:60px;padding:6px 0 4px;background:transparent;border:0;border-radius:0;color:#9b93a3;font-size:11.5px;font-weight:500;box-shadow:none;filter:none}
.tabbar .tab .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar .tab.on{color:var(--pri);font-weight:700;background:transparent;border:0}
.tabbar .tab.on .ic{stroke-width:2.2}
.tabbar .tab:active{filter:none;background:var(--soft)}

/* v0.20: 일정 목록·지도 목록 — 번호 원 + 세로 점선 + 카드(타임라인). 번호는 지도 마커와 동일(위치 있는 일정만) */
.it{display:flex;gap:10px;align-items:stretch}
.it .nc{flex:none;width:28px;display:flex;flex-direction:column;align-items:center;padding-top:2px}
.it .n{flex:none;width:28px;height:28px;line-height:28px;border-radius:50%;background:var(--pri);color:#fff;text-align:center;font-weight:700;font-size:14px;position:relative;z-index:1}
.it .n.no,.it .mbadge.none{background:#fff;color:var(--sub);border:1.5px dashed #b9a6c6;line-height:25px;width:28px;height:28px}
.it .ln{flex:1;border-left:2px dashed #cdb3e0;margin-top:2px;min-height:10px}
.it:last-child .ln{display:none}
.it>.item,.it>.mrow{flex:1;min-width:0;margin:0 0 10px}
.item.tcard{display:block;padding:10px 12px}
.item.tcard .time{min-width:0;font-size:12px;font-weight:600;color:var(--pri)}
.item.tcard .title{font-size:15px;font-weight:700;margin:1px 0}
.item.tcard .memo{border-top:1px dashed var(--bd);margin-top:6px;padding-top:6px}
.it>.mrow{padding:10px 12px;border-radius:14px;box-shadow:var(--sh);align-items:center}

/* v0.20a: 지도 아이콘 버튼도 목록 아이콘처럼 보라 바탕·흰 아이콘(두 상태 색 통일, 구분은 아이콘 모양) */
.ghost.iconbtn,.ghost.iconbtn.on{background:var(--pri);color:#fff;border-color:var(--pri)}

/* v0.20b: 준비물 — 분류 하나 = 카드 하나(머리글 + 항목 줄, 줄 사이 구분선), 머리글 배지(완료/전체, 모두 끝나면 초록 ✓) */
.pgroup{background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);margin:0 0 10px;overflow:hidden}
.pgroup .dayhead.pcat{margin:0;border:0;border-radius:0;background:transparent;padding:12px 14px;min-height:48px}
.pgroup .dayhead.pcat .pcn{color:var(--pri);font-weight:700;font-size:16px}
.pgroup .dayhead.pcat .pmeta{display:flex;align-items:center;gap:10px;margin-left:auto}
.pgroup .dayhead.pcat .pcnt{font-size:12px;font-weight:700;line-height:1.5;background:var(--soft);color:var(--pri);border-radius:10px;padding:1px 8px}
.pgroup .dayhead.pcat .pcnt.all{background:#e3f0dc;color:var(--ok)}
.pgroup .dayhead.pcat .pcar{font-size:14px;font-weight:400;color:var(--sub)}
.pgroup .pitem{border:0;border-top:1px solid var(--bd);border-radius:0;box-shadow:none;margin:0}

/* v0.20d: 예산 — 일자별 날짜 묶음 카드(머리글 + 지출 줄, 구분선), 상단 합계 줄 카드(고정 유지), (v0.20e: 예산 설정 카드 대신 예산 총액·통화·환율 접기 2개) */
.egroup{background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);margin:0 0 10px;overflow:hidden}
.egroup .dayhead{margin:0;border:0;border-radius:0;background:transparent;padding:12px 14px;min-height:48px}
.egroup .dayhead .edl{color:var(--pri);font-weight:500}
.egroup .dayhead .edl .dtd{font-weight:800;color:var(--pri);font-size:inherit}   /* 일자 탭처럼 날짜만 굵게(.dayhead span:last-child 회색 규칙 덮어씀) */
.egroup .dayhead .etag{margin-left:6px;font-size:12px;font-weight:600;color:var(--sub);background:var(--soft);border-radius:10px;padding:1px 7px;vertical-align:1px}
.egroup .daybody .item{border:0;border-top:1px solid var(--bd);border-radius:0;box-shadow:none;margin:0}
.budbar{margin:0 0 8px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:10px 14px}

/* v0.21: 그래프 — 도넛 2개 좌우 나란히(도넛 위·범례 아래), 범례 % 강조·금액 작게, 일자별은 실제 폭으로 그림 */
.pies{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.pies .card.chart{margin:0;padding:12px 10px}
.pies svg{display:block;width:100%;max-width:120px;height:auto;margin:0 auto 8px}
.pies .legend{min-width:0;font-size:inherit}
.pies .legend li{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:5px;padding:3px 0;line-height:1.3}
.pies .legend .sw{align-self:center}
.pies .legend .lt{font-size:13px;font-weight:600}
.pies .legend .lp{font-size:15px;font-weight:800;color:var(--tx)}
.pies .legend .la{font-size:11px;color:var(--sub);flex-basis:100%;padding-left:17px}
@media (min-width:560px){.pies .legend .la{flex-basis:auto;padding-left:0}}
.chart:not(.pie) svg{display:block;max-width:100%}

/* v0.21a: PC에서 도넛 2배(120→240px), 접힌 접기 상자의 아래 여백 제거(글자 위쪽 쏠림 해결) */
@media (min-width:560px){.pies svg{max-width:240px}}
.fold:not([open]){padding-bottom:0}

/* v0.21b: 도넛 조각 위 표시·가운데 표시·누르면 해당 항목 강조(나머지 흐림) */
.pies svg .seg{cursor:pointer;transition:opacity .15s}
.pies svg.sel .seg{opacity:.25}.pies svg.sel .seg.on{opacity:1}
.pies svg .sl{pointer-events:none;font-weight:800;fill:#fff}
.pies svg.sel .sl{opacity:.35}.pies svg.sel .sl.on{opacity:1}
.pies svg .pc{pointer-events:none}
.pies .legend li{cursor:pointer;border-radius:6px;padding:3px 4px}
.pies .legend li.on{background:#f1f0f3}

/* v0.22: 다이어리 — 날씨 줄 오른쪽 정렬(작은 회색), 제목·본문 상자 없음(제목 크게·아래 선, 본문 메모지, 입력 중 아래 보라 선), 아래 줄 자동 저장 시각+작은 버튼, 사진 카드 버튼 작게 */
#paneDia .dwx{text-align:right;font-size:13px;color:var(--sub);margin:0 0 4px}
#paneDia .dwx .wi{font-size:16px;margin-right:2px}
#paneDia .dfield{border:0;border-radius:0;padding:8px 2px;margin:0;background:transparent}
#paneDia input.dfield{font-size:20px;font-weight:700;border-bottom:1px solid var(--bd)}
#paneDia textarea.dfield{min-height:220px;line-height:1.7;resize:none;padding-top:10px}
#paneDia .dfield:focus{outline:none;border-bottom-color:var(--pri)}
#paneDia textarea.dfield:focus{box-shadow:inset 0 -2px 0 var(--pri)}
#paneDia .dfield:focus-visible{outline:none}
#paneDia .dpreview{padding:10px 2px}
#paneDia .dfoot{align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
#paneDia .dfoot #dSaved{font-size:12px}
#paneDia .dfoot button{min-height:34px;padding:6px 12px;font-size:14px}
#paneDia .row.nomt button{min-height:32px;padding:4px 10px;font-size:13px}
#paneDia .dq{align-items:center;gap:6px;margin-top:8px}
#paneDia .dq select{min-height:36px;padding:6px 8px;font-size:13px;max-width:none}
#paneDia .dq .btnlike{min-height:36px;padding:6px 12px;font-size:14px;display:inline-flex;align-items:center}
#paneDia .pins{min-height:28px;margin-top:2px;padding:2px;border:0;background:transparent;color:var(--pri);font-size:12px;font-weight:600}

/* v0.23: 설정 탭 — 카드 제목 줄(왼쪽 제목·오른쪽 작은 버튼), 백업·내보내기·가져오기 카드 3개, 버튼 격자, 설명 작은 회색, 시계 시:분 */
#paneSet .shd{display:flex;align-items:center;gap:8px;margin:0 0 8px}
#paneSet .shd .sh{flex:1;margin:0}
#paneSet .ghost.mini{min-height:32px;padding:4px 10px;font-size:13px;flex:none}
#paneSet .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#paneSet .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#paneSet .g2 .ghost,#paneSet .g4 .ghost,#paneSet .wide{display:inline-flex;align-items:center;justify-content:center;width:100%;text-align:center}
#paneSet .g4 .ghost{padding:10px 4px;font-size:14px;white-space:nowrap}
#paneSet .slbl{font-size:12px;color:var(--sub);font-weight:600;margin:12px 0 6px}
#paneSet .snote{font-size:12px;line-height:1.5;margin:10px 0 0}
#paneSet .ghost:disabled{opacity:.55;cursor:default}
#paneSet .dnrow{display:flex;align-items:center;gap:8px}
#paneSet .dnrow .destnow{flex:1;min-width:0;margin:0}
#paneSet #destForm{margin-bottom:0}
#paneSet .msg:empty{display:none}
#paneSet .ssrc{font-size:12px}

/* v0.23a: 시계 상자 폭을 v0.22(초 표시 때)와 같게 유지하고 숫자를 키움(1000px 153px·40px / 420px 이하 135px·35px / 380px 이하 120px·31px) */
.clk{min-width:153px}.clk .cd{font-size:40px;line-height:1.2}
@media (max-width:420px){.clk{min-width:135px}.clk .cd{font-size:35px}}
@media (max-width:380px){.clk{min-width:120px}.clk .cd{font-size:31px}}

/* v0.24: 이미지 저장 선택 상자(배치·크기 라디오, 안내, 저장/취소) */
#paneSet .imgbox{margin-top:10px;padding:10px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--soft)}
#paneSet .isel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:2px 0 6px;font-size:14px}
#paneSet .isel .ilbl{font-size:12px;font-weight:700;color:var(--sub);min-width:28px}
#paneSet .isel label{display:inline-flex;align-items:center;gap:5px;min-height:32px;cursor:pointer}
#paneSet .isel input{accent-color:var(--pri);width:18px;height:18px;margin:0}
#paneSet .isel[hidden]{display:none}
#paneSet .imgbox .row{margin-top:6px}
#paneSet .imgbox .row button{min-height:36px;padding:6px 14px}
#paneSet .g2 .ghost.on{border-color:var(--pri);color:var(--pri);background:#fff}

/* v0.24a: 제목을 입력하는 동안에는 가운데 정렬(오른쪽 정렬로 잘려 보이던 문제), 표시할 때는 기존대로 오른쪽 */
.hrow .tline.editing .concept{text-align:center;padding-left:8px}
/* v0.25: 다이어리 하위 메뉴·여행 보관함 */
#paneDia .subtabs{margin:8px 0 4px}
#dSubArc .shd{display:flex;align-items:center;gap:8px;margin:0 0 8px}
#dSubArc .shd .sh{flex:1;margin:0}
#dSubArc .ghost.mini{min-height:32px;padding:4px 10px;font-size:13px;flex:none}
#dSubArc .snote{font-size:12px;line-height:1.5;margin:10px 0 0}
#dSubArc .sub{font-size:14px}
#dSubArc .sub.sm{font-size:13px;margin-top:4px}
.arcitem{min-width:0;flex:1}
.arcttl{overflow-wrap:anywhere}
#arcCur .arcitem{border-left:4px solid var(--pri);padding-left:10px}
.arcrow{align-items:center;margin-top:0;padding:10px 0;border-top:1px solid var(--bd)}
.arcrow:first-child{border-top:0;padding-top:0}
.arcrow>button{flex:none}
#arcSpace .sub{margin:4px 0 0}
/* v0.26: 지난 여행 삭제 버튼·주인 없는 사진 정리 */
.arcbtns{display:flex;flex-direction:column;gap:6px;flex:none}
.arcbtns>button{min-width:64px}
#dSubArc .danger.small{color:#fff}
.arcorph{align-items:center;margin-top:8px}
/* v0.27a: 통화 국기 */
.flag{width:18px;height:13.5px;vertical-align:-2px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);margin-right:4px;object-fit:cover}
.fcode{white-space:nowrap}
.fxrow{align-items:center}
.fxrow>span:first-child{flex:1}
.fxrow .fxflag{width:16px;height:12px;margin:0 0 0 8px;flex:none}
#curSum .fcode .flag{margin-left:2px}
/* v0.27b: 준비물 길게 눌러 순서 바꾸기 */
.packtools{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.phint{font-size:12px;color:var(--sub);flex:1;text-align:left}
#packList .pitem{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#packList .pitem.dragging{position:relative;z-index:5;background:#fff;box-shadow:0 8px 20px rgba(60,10,90,.25);border-radius:12px;outline:2px solid var(--pri);transition:none}
body.pdrag{-webkit-user-select:none;user-select:none;cursor:grabbing}