:root {
  --navy: #17324d;
  --navy2: #234d6f;
  --sky: #eaf5fb;
  --sea: #d9f0ed;
  --sand: #fff5dc;
  --coral: #f5c9b6;
  --ink: #243b53;
  --muted: #73808f;
  --line: #e4eaf0;
  --bg: #f5f8fb;
  --white: #fff;
  --danger: #b42318;
  --green: #1d7a5a;
  --shadow: 0 10px 26px rgba(23,50,77,.08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #edf7fb 0, var(--bg) 280px);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  background: rgba(23,50,77,.96); color: white;
  backdrop-filter: blur(16px);
}
.app-header h1 { margin: 2px 0 0; font-size: 20px; }
.eyebrow { font-size: 10px; letter-spacing: .17em; opacity: .7; }
.container { width: min(760px, 100%); margin: 0 auto; padding: 16px 14px calc(90px + env(safe-area-inset-bottom)); }
.card {
  background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.8);
  border-radius: 20px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.hero-card { background: linear-gradient(145deg, var(--navy), var(--navy2)); color: white; overflow: hidden; position: relative; }
.hero-card:after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.06); right:-60px; top:-80px; }
.hero-top, .section-title-row, .calendar-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-top h2, .section-title-row h3, .calendar-head h3 { margin: 2px 0; }
.muted { margin:0; color:var(--muted); font-size:12px; }
.hero-card .muted, .hero-card .subtle { color: rgba(255,255,255,.7); }
.subtle { margin: 4px 0 0; font-size: 13px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.stats div { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); padding:12px 8px; border-radius:14px; }
.stats span { display:block; font-size:11px; opacity:.75; }
.stats strong { display:block; margin-top:5px; font-size:15px; }
.pill { display:inline-flex; align-items:center; justify-content:center; min-width:56px; padding:8px 10px; border-radius:999px; background:var(--sky); color:var(--navy); font-weight:800; font-size:12px; }
.hero-card .pill { background:rgba(255,255,255,.13); color:white; }
.budget-bar, .progress-track { height:8px; background:rgba(255,255,255,.16); border-radius:99px; overflow:hidden; margin-top:14px; }
.budget-bar span, .progress-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,#7ee0c0,#fff0a3); transition:width .25s ease; }
.progress-track { background:#edf1f5; margin-bottom:12px; }
.progress-track span { background:linear-gradient(90deg,#49a782,#83d0b2); }
.tabs { position:sticky; top:73px; z-index:15; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:6px; margin-bottom:14px; border-radius:16px; background:rgba(255,255,255,.93); box-shadow:0 8px 20px rgba(23,50,77,.08); backdrop-filter:blur(10px); }
.tab { border:0; background:transparent; padding:10px 4px; border-radius:12px; color:var(--muted); font-weight:700; font-size:12px; }
.tab.active { background:var(--navy); color:white; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.calendar-head { margin-bottom:12px; }
.icon-btn { width:40px; height:40px; border:0; border-radius:12px; background:var(--sky); color:var(--navy); font-size:26px; line-height:1; }
.weekdays, .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.weekdays { margin-bottom:6px; color:var(--muted); font-size:11px; text-align:center; font-weight:800; }
.day-cell { min-height:68px; border:1px solid var(--line); border-radius:12px; padding:7px 5px; background:#fff; text-align:left; position:relative; overflow:hidden; }
.day-cell.outside { opacity:.35; background:#f7f8fa; }
.day-cell.outtrip { opacity:.52; }
.day-cell.selected { border:2px solid var(--navy); padding:6px 4px; background:var(--sky); }
.day-cell.today .day-num { background:var(--coral); color:var(--navy); }
.day-num { display:inline-flex; min-width:22px; height:22px; align-items:center; justify-content:center; border-radius:8px; font-weight:800; font-size:12px; }
.day-total { display:block; margin-top:8px; font-size:10px; line-height:1.2; font-weight:800; color:var(--green); word-break:keep-all; }
.daily-total { font-weight:900; color:var(--green); white-space:nowrap; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:800; color:var(--ink); }
input, select { width:100%; min-height:44px; border:1px solid #dce3ea; border-radius:12px; padding:10px 11px; background:#fff; color:var(--ink); outline:none; }
input:focus, select:focus { border-color:#7fb1d1; box-shadow:0 0 0 3px rgba(127,177,209,.18); }
.full { grid-column:1/-1; }
.primary, .ghost { min-height:42px; border-radius:12px; border:0; padding:10px 14px; font-weight:800; }
.primary { background:var(--navy); color:#fff; }
.ghost { background:#eef3f7; color:var(--ink); }
.danger { color:#ffd7d2; background:rgba(255,255,255,.08); }
.ghost.danger { color:#ffd7d2; }
.hint { color:var(--muted); font-size:11px; line-height:1.5; margin:12px 0 0; }
.compact { margin-top:7px; color:rgba(255,255,255,.74); }
.form-actions { display:flex; gap:8px; }
.form-actions .primary { flex:1; }
.hidden { display:none !important; }
.filter-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.records-list { display:flex; flex-direction:column; gap:9px; }
.record { border:1px solid var(--line); border-radius:15px; padding:12px; background:#fff; }
.record-top, .record-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.record-title { font-weight:900; }
.record-date { color:var(--muted); font-size:11px; }
.record-meta { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.45; }
.record-amount { font-weight:900; color:var(--green); white-space:nowrap; }
.record-actions { display:flex; gap:6px; margin-top:10px; }
.mini-btn { border:0; border-radius:9px; padding:7px 9px; font-size:11px; font-weight:800; background:#edf3f7; color:var(--ink); }
.mini-btn.delete { color:var(--danger); background:#fff0ee; }
.empty { text-align:center; padding:32px 10px; color:var(--muted); }
.checklist-list { display:flex; flex-direction:column; gap:9px; }
.check-group-title { margin:18px 0 8px; font-weight:900; color:var(--navy); font-size:13px; }
.check-item { display:flex; align-items:flex-start; gap:10px; padding:11px; border-radius:13px; background:#fafcfd; border:1px solid var(--line); }
.check-item input { width:20px; min-height:20px; height:20px; margin-top:1px; accent-color:var(--green); }
.check-item.done .check-text { text-decoration:line-through; color:#87939e; }
.check-text { font-size:13px; line-height:1.45; }
.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); background:#152536; color:white; border-radius:999px; padding:11px 16px; font-size:12px; font-weight:800; opacity:0; pointer-events:none; transition:.2s ease; z-index:50; box-shadow:0 8px 28px rgba(0,0,0,.22); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:540px) {
  .container { padding-left:10px; padding-right:10px; }
  .card { border-radius:17px; padding:13px; }
  .app-header { padding-left:14px; padding-right:14px; }
  .tabs { top:70px; }
  .form-grid { grid-template-columns:1fr; }
  .full { grid-column:1; }
  .stats strong { font-size:13px; }
  .day-cell { min-height:60px; padding:6px 4px; }
  .day-total { font-size:9px; }
}

/* v2.2 customization + share */
:root { --accent:#3d8fb0; --app-bg:#f5f8fb; --hero1:#17324d; --hero2:#28516f; --card-radius:18px; }
body { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,white) 0,var(--app-bg) 280px); }
body.font-rounded { font-family: ui-rounded, "SF Pro Rounded", "Apple SD Gothic Neo", system-ui, sans-serif; }
body.font-serif { font-family: Georgia, "Noto Serif KR", serif; }
.header-actions{display:flex;gap:6px;align-items:center}.header-btn{color:white;background:rgba(255,255,255,.1);font-size:12px;padding:9px 10px}.app-header h1{font-size:19px}.hero-card{background:linear-gradient(145deg,var(--hero1),var(--hero2));min-height:214px}.hero-card>*:not(.hero-photo):not(.sticker-layer){position:relative;z-index:2}.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;z-index:0;transition:.2s}.hero-card.has-photo .hero-photo{opacity:.38}.hero-card.has-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,26,42,.82),rgba(10,26,42,.35));z-index:1}.sticker-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.hero-sticker{position:absolute;font-size:31px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.16));transform:rotate(var(--rot,0deg))}.hero-sticker:nth-child(1){right:18px;top:17px;--rot:8deg}.hero-sticker:nth-child(2){right:60px;bottom:19px;--rot:-8deg}.hero-sticker:nth-child(3){left:18px;bottom:16px;--rot:5deg}.hero-sticker:nth-child(4){right:18px;top:76px;--rot:-6deg}.hero-sticker:nth-child(5){left:46%;top:15px;--rot:9deg}.hero-sticker:nth-child(6){left:54%;bottom:18px;--rot:-4deg}
.customize-drawer,.share-sheet{position:fixed;z-index:80;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,680px);max-height:86vh;overflow:auto;background:white;border-radius:24px 24px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -15px 45px rgba(23,50,77,.24)}.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.customize-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.customize-grid .full{grid-column:1/-1}.field-title{font-size:12px;font-weight:800;margin-bottom:8px}.photo-picker input{background:#f7fafc}.sticker-choices{display:flex;flex-wrap:wrap;gap:8px}.sticker-chip{width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:24px}.sticker-chip.active{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,white)}.share-sheet canvas{width:100%;height:auto;border-radius:18px;background:#f2f4f7;box-shadow:0 8px 24px rgba(23,50,77,.12)}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.share-actions button{min-height:48px}.tab.active,.primary{background:var(--accent)}.day-cell.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,white)}.pill{background:color-mix(in srgb,var(--accent) 14%,white)}
@media(max-width:560px){.header-actions{gap:3px}.header-btn{padding:8px 7px;font-size:11px}.app-header{padding-left:14px;padding-right:10px}.customize-grid{grid-template-columns:1fr}.customize-grid .full{grid-column:1}.share-actions{grid-template-columns:1fr}}

/* v2.3 backup */
.backup-box{
  margin-top:24px;
  padding-top:22px;
  border-top:1px dashed rgba(36,59,83,.22);
}
.backup-actions{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.backup-actions button{min-height:46px}
@media (max-width:520px){
  .backup-actions{grid-template-columns:1fr}
}


/* Trip꾸 v3.1 - 이용권 관리 */
.license-management-box{
  margin-top:24px;
  padding-top:22px;
  border-top:1px dashed rgba(36,59,83,.22);
}
.license-management-box .danger{
  min-height:46px;
  margin-top:10px;
}


/* Trip꾸 v3.3 - 예약형 여행 일정 달력 */
.tabs{grid-template-columns:repeat(5,1fr)}
.calendar-card{overflow:visible}
.calendar-grid{gap:6px;overflow:visible}
.day-cell{min-height:104px;overflow:visible;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.day-top{display:flex;align-items:flex-start;justify-content:space-between;gap:3px;min-height:23px}
.day-total{margin-top:2px;text-align:right;font-size:9px;max-width:64px}
.calendar-events{display:flex;flex-direction:column;gap:3px;margin-top:2px;position:relative;z-index:2}
.calendar-event{height:20px;display:flex;align-items:center;min-width:0;margin-left:-1px;margin-right:-1px;padding:0 5px;border-radius:4px;font-size:9px;font-weight:900;line-height:1;white-space:nowrap;overflow:hidden;position:relative;z-index:3;box-shadow:0 1px 3px rgba(23,50,77,.07)}
.calendar-event:not(.segment-start){margin-left:-7px;padding-left:7px;border-top-left-radius:0;border-bottom-left-radius:0}
.calendar-event:not(.segment-end){margin-right:-7px;padding-right:7px;border-top-right-radius:0;border-bottom-right-radius:0}
.calendar-event.segment-start{border-top-left-radius:8px;border-bottom-left-radius:8px}
.calendar-event.segment-end{border-top-right-radius:8px;border-bottom-right-radius:8px}
.event-label{overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}.event-label.continuation{opacity:0}
.event-more{font-size:9px;color:var(--muted);font-weight:900;padding-left:4px}
.event-sky{--ev:#7fc5e8;--ev-bg:#dff3ff;--ev-ink:#164968}.event-mint{--ev:#68c7a2;--ev-bg:#dcf7ec;--ev-ink:#135d47}.event-peach{--ev:#f18d80;--ev-bg:#ffe7e2;--ev-ink:#7a3028}.event-lavender{--ev:#a895e6;--ev-bg:#eee9ff;--ev-ink:#4f3a8c}.event-navy{--ev:#294c6d;--ev-bg:#dce8f2;--ev-ink:#fff}.event-yellow{--ev:#e6b844;--ev-bg:#fff2bd;--ev-ink:#6c5210}
.calendar-event.style-soft{background:var(--ev-bg);color:var(--ev-ink);border:1px solid color-mix(in srgb,var(--ev) 50%,white)}
.calendar-event.style-solid{background:var(--ev);color:var(--ev-ink);border:1px solid var(--ev)}
.calendar-event.event-navy.style-solid{color:white}
.calendar-event.style-outline{background:white;color:var(--ev-ink);border:1.5px dashed var(--ev)}
.itinerary-count{font-size:12px;font-weight:900;background:var(--sky);color:var(--navy);border-radius:999px;padding:7px 10px}
.schedule-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.schedule-item{border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:15px;padding:12px;background:#fff;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.schedule-sky{border-left-color:#7fc5e8}.schedule-mint{border-left-color:#68c7a2}.schedule-peach{border-left-color:#f18d80}.schedule-lavender{border-left-color:#a895e6}.schedule-navy{border-left-color:#294c6d}.schedule-yellow{border-left-color:#e6b844}
.schedule-item-main{min-width:0}.schedule-item-title{font-weight:900;font-size:14px}.schedule-item-date,.schedule-item-memo{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45}.trip-band-card{background:linear-gradient(160deg,#fff,#f8fbfd)}
@media(max-width:540px){.tabs{grid-template-columns:repeat(5,1fr)}.tab{font-size:10px;padding:9px 2px}.day-cell{min-height:92px;padding:5px 3px}.calendar-grid,.weekdays{gap:4px}.calendar-event{height:18px;font-size:8px;padding-left:3px;padding-right:3px}.calendar-event:not(.segment-start){margin-left:-5px}.calendar-event:not(.segment-end){margin-right:-5px}.day-total{font-size:8px}.schedule-item{display:block}.schedule-item .record-actions{margin-top:9px}}


/* =========================================================
   Trip꾸 v3.3.1 - 모바일 달력 폭 고정 / 오른쪽 잘림 수정
   ========================================================= */
.calendar-card{
  overflow:hidden !important;
  min-width:0;
  width:100%;
}
.weekdays,
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden !important;
}
.weekdays > *,
.calendar-grid > *{
  min-width:0;
  max-width:100%;
}
.day-cell{
  min-width:0 !important;
  width:auto !important;
  max-width:100%;
  overflow:hidden !important;
}
.day-top{
  min-width:0;
  width:100%;
}
.day-num{
  flex:0 0 auto;
}
.day-total{
  flex:1 1 auto;
  min-width:0;
  max-width:100% !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:normal;
}
.calendar-events{
  min-width:0;
  width:100%;
  overflow:visible;
}
/* 이어지는 예약 띠는 셀 경계까지만 살짝 연결 */
.calendar-event{
  max-width:calc(100% + 2px);
  min-width:0;
}
.calendar-event:not(.segment-start){
  margin-left:-4px !important;
  padding-left:4px !important;
}
.calendar-event:not(.segment-end){
  margin-right:-4px !important;
  padding-right:4px !important;
}
.event-label{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 휴대폰 */
@media(max-width:560px){
  .container{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    padding-left:8px;
    padding-right:8px;
  }
  .calendar-card{
    padding-left:9px;
    padding-right:9px;
  }
  .calendar-grid,
  .weekdays{
    gap:3px !important;
  }
  .day-cell{
    min-height:88px !important;
    padding:5px 2px !important;
    border-radius:10px;
  }
  .day-cell.selected{
    padding:4px 1px !important;
  }
  .day-top{
    gap:1px;
    align-items:flex-start;
  }
  .day-num{
    min-width:19px;
    width:19px;
    height:19px;
    font-size:10px;
    border-radius:7px;
  }
  .day-total{
    margin-top:2px;
    font-size:7.5px !important;
    letter-spacing:-.04em;
    text-align:right;
  }
  .calendar-event{
    height:17px !important;
    font-size:7.5px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }
  .calendar-event:not(.segment-start){
    margin-left:-3px !important;
    padding-left:3px !important;
  }
  .calendar-event:not(.segment-end){
    margin-right:-3px !important;
    padding-right:3px !important;
  }
}

/* 휴대폰 가로모드 */
@media(max-height:560px) and (orientation:landscape){
  .container{
    width:100%;
    max-width:100%;
    padding-left:8px;
    padding-right:8px;
    overflow-x:hidden;
  }
  .calendar-grid,
  .weekdays{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  .day-cell{
    min-height:72px !important;
    padding:4px 3px !important;
  }
  .day-total{
    font-size:8px !important;
  }
}


/* v3.4 날짜별 사진 앨범 */
.photo-date-box{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;margin:14px 0;border-radius:15px;background:#f6f9fb;border:1px solid var(--line);font-size:13px}.photo-date-box strong{font-size:14px}.photo-upload-box{display:flex;min-height:126px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:2px dashed color-mix(in srgb,var(--accent) 45%,#ccd6dd);border-radius:20px;background:color-mix(in srgb,var(--accent) 5%,white);cursor:pointer;text-align:center}.photo-upload-box input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.photo-upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;font-size:28px;line-height:1}.photo-upload-box b{font-size:15px}.photo-upload-box small{color:#77838d}.photo-album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.photo-item{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 4px 14px rgba(23,50,77,.06)}.photo-open{display:block;width:100%;padding:0;border:0;background:#edf2f5;aspect-ratio:1/1;overflow:hidden}.photo-open img{width:100%;height:100%;display:block;object-fit:cover}.photo-caption{padding:9px}.photo-caption input{width:100%;min-width:0;padding:9px 10px;font-size:12px;border-radius:10px;margin-bottom:7px}.photo-delete{width:100%;padding:8px;border:0;border-radius:10px;background:#fff1f1;color:#b42318;font-weight:700}.photo-empty{grid-column:1/-1;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#84919a;text-align:center}.photo-empty:first-letter{font-size:30px}.photo-empty b{color:#4c5962}.photo-empty span{font-size:12px}.photo-storage-hint{margin-top:14px}.day-photo-badge{font-size:9px;white-space:nowrap;color:#667784;background:#f0f5f7;border-radius:8px;padding:2px 4px}
@media(max-width:560px){.tabs{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}.tabs .tab{flex:0 0 auto;white-space:nowrap}.photo-album-grid{gap:9px}.photo-caption{padding:7px}.day-top{gap:2px;flex-wrap:wrap}.day-photo-badge{font-size:8px;padding:1px 3px}}