/* 예산표 앱 스타일 — assets/base.css 다음에 읽습니다 */
body{padding-bottom:64px}
body{--wrap:1240px}  /* 1열도 2열과 같은 폭 */
body[data-cols="4"]{--wrap:1640px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:20px 20px 0;scroll-margin-top:12px}

/* 파일 줄 — 내 책상 / 파일이름 ∨ */
.file-bar{display:flex;align-items:center;gap:6px;margin-bottom:14px;font-size:14px}
.back-desk{
  display:inline-flex;align-items:center;gap:3px;color:var(--muted);text-decoration:none;
  padding:5px 9px 5px 5px;border-radius:var(--radius);flex:none;
}
.back-desk svg{width:15px;height:15px}
.back-desk:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.file-bar-sep{color:var(--line)}
.file-switch{min-width:0}
.file-switch-btn{
  display:inline-flex;align-items:center;gap:7px;min-width:0;
  padding:5px 9px;border-radius:var(--radius);color:var(--ink);font-weight:600;
}
.file-switch-btn span:not(.file-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-switch-btn:hover,.file-switch[open] .file-switch-btn{background:var(--hover)}
.file-switch-btn .chev{width:11px;height:11px;color:var(--muted);flex:none}
.file-switch .menu-pop{left:0;right:auto;min-width:220px;max-height:60vh;overflow:auto}
.file-switch .menu-pop button{display:flex;align-items:center;gap:9px}
.file-dot{width:9px;height:9px;border-radius:50%;background:var(--swatch, var(--accent-fill));flex:none}

/* Header */
.plan-title{
  display:block;width:100%;
  font-weight:700;letter-spacing:-0.02em;
  font-size:clamp(24px,4vw,32px);line-height:1.2;
  border:0;background:transparent;padding:2px 0;margin:0;
  border-bottom:1px solid transparent;
}
/* 제목 줄: 이름 오른쪽에 완료 개수 */
.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;position:relative;margin-bottom:14px}
.title-row .plan-title{flex:0 1 auto;width:auto;max-width:100%;min-width:2ch}
/* 제목 글자 폭을 재는 보이지 않는 자 (plan-title 과 같은 글꼴) */
.plan-title-probe{
  position:absolute;visibility:hidden;white-space:pre;left:0;top:0;pointer-events:none;
  font-weight:700;letter-spacing:-0.02em;font-size:clamp(24px,4vw,32px);line-height:1.2;
}
/* 제목 왼쪽 이모지. 없을 때는 흐린 웃는 얼굴 단추만 */
/* 카테고리 이모지 고르기 상자 (자바스크립트가 누른 단추 아래에 놓아요) */
.emoji-pop{position:absolute;top:0;left:0;right:auto;z-index:30;width:min(316px, calc(100vw - 16px));padding:8px}
.emoji-pop[hidden]{display:none}
.emoji-grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:2px}
.menu-pop .emoji-opt{
  aspect-ratio:1;width:auto;border:0;border-radius:8px;background:none;padding:0;
  font-size:22px;line-height:1;display:grid;place-items:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.menu-pop .emoji-opt:hover{background:var(--hover)}
.menu-pop .emoji-opt[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-fill)}
.menu-pop .emoji-clear{margin-top:6px;width:100%;color:var(--muted);font-size:13px;text-align:center}
.emoji-clear[hidden]{display:none}
/* 요약 카드: [이모지 이름 ✎ · D-day] / 진행 막대 · 완료 / 예산·지출 합계 · 저장 · 내보내기 */
/* 버짓보드의 판과 같은 옅은 유리판 (색 없음) */
.plan-card{
  position:relative;z-index:5;margin-bottom:14px;padding:16px 20px;  /* 말풍선이 툴바 위에 오도록 */
  border-radius:22px;
  border:1px solid rgba(64,62,58,.08);
  background:linear-gradient(162deg, rgba(96,94,88,.045) 0%, rgba(96,94,88,.075) 52%, rgba(96,94,88,.05) 100%);
  box-shadow:
    0 1px 2px rgba(40,36,32,.07),
    0 5px 12px -5px rgba(40,36,32,.15),
    0 14px 26px -16px rgba(40,36,32,.2),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(64,62,58,.05),
    inset 0 0 14px -5px rgba(255,255,255,.95),
    inset 0 0 44px rgba(255,255,255,.22);
}
.plan-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 10%, transparent 24%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .plan-card{
    background:rgba(40,40,42,.44);border-color:rgba(255,255,255,.1);
    box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  }
  :root:not([data-theme="light"]) .plan-card::after{display:none}
}
.pc-top.title-row{flex-wrap:nowrap;align-items:center;margin-bottom:10px}
.pc-title{position:relative;min-width:0;flex:0 1 auto;display:flex;align-items:center;gap:6px}
.pc-title .plan-title{flex:0 1 auto;width:auto;max-width:100%;min-width:2ch}
/* 이름은 눌러서 고쳐요. 연필은 올렸을 때만 */
.pc-pen{flex:none;width:15px;height:15px;color:var(--muted);opacity:0;transition:opacity .15s;pointer-events:none}
.pc-title:hover .pc-pen,.plan-title:focus + .pc-pen{opacity:.8}
.plan-card .dday-chip{margin-left:auto;font-size:13.5px;padding:5px 12px}
.pc-top .title-done{align-self:center}
/* 카테고리 목록 자리. 목록이 위 막대로 옮겨 가도 높이는 그대로 둡니다 */
.pc-cats-slot{margin:0 0 22px}
.pc-nums{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 32px}
/* 카드 바닥에 붙도록 '약 n만 원'은 숫자 옆에 둡니다 (아래 줄을 따로 두면 바닥 여백이 커 보여요) */
.pc-nums .t-main{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:8px}
.pc-nums .t-main .t-label{grid-column:1 / -1}
.pc-nums .t-export{align-self:flex-end}
@media (max-width:640px){
  .plan-card{padding:12px 14px;border-radius:18px}
  .pc-nums{gap:10px 22px}
}
.title-done{flex:none;color:var(--muted);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.title-done:empty{display:none}
.title-done b{color:var(--ink);font-weight:700}
.plan-title:focus{outline:none;border-bottom-color:var(--accent)}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.view-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.opt-toggle{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;cursor:pointer}
.opt-toggle:hover{color:var(--ink)}
/* 체크박스는 자리만 지키고(읽어 주는 기계와 키보드를 위해), 보이는 것은 아래 유리 토글입니다 */
.opt-toggle input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.opt-toggle .switch{
  position:relative;flex:none;width:38px;height:22px;border-radius:99px;
  background:rgba(46,43,38,.1);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 3px rgba(46,43,38,.16),
    inset 0 0 0 1px rgba(46,43,38,.05),
    0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  backdrop-filter:blur(8px) saturate(150%);
  transition:background .18s ease;
}
.opt-toggle .switch::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(160deg,#fff,#f2f1ee);
  box-shadow:0 1px 3px rgba(46,43,38,.3), 0 0 0 .5px rgba(46,43,38,.07);
  transition:transform .18s ease;
}
.opt-toggle input:checked + .switch{
  background:color-mix(in srgb, var(--swatch, var(--accent-fill)) 60%, transparent);
}
.opt-toggle input:checked + .switch::after{transform:translateX(16px)}
.opt-toggle input:focus-visible + .switch{outline:2px solid var(--ink);outline-offset:2px}
body.kind-guestbook .opt-toggle{display:none}
/* 색상은 파일 줄 오른쪽, 날짜 칩 왼쪽. 날짜 칩과 같은 점선 알약입니다. */
.color-pick{display:flex;align-items:center;flex:none;margin-left:auto}
.color-menu{position:relative}
.color-btn{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:6px;
  border:1px dashed var(--line);border-radius:99px;
  padding:4px 9px 4px 11px;  /* '색상' 글자 다음에 색 점 */
  font-size:12.5px;color:var(--muted);white-space:nowrap;
  transition:background-color .15s, color .15s;
}
.color-btn::-webkit-details-marker{display:none}
.color-btn:hover,.color-menu[open] .color-btn{background:var(--hover);color:var(--ink)}
.color-btn:active{background:var(--hover-strong)}
.color-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.color-dot,.swatch::before{
  content:"";width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--swatch, var(--accent-fill));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.color-menu .menu-pop{
  left:auto;right:0;min-width:0;padding:6px;
  display:grid;grid-template-columns:repeat(3, 34px);gap:2px;
}
.menu-pop .swatch{
  width:34px;height:34px;padding:0;border-radius:50%;
  display:grid;place-items:center;
}
.menu-pop .swatch::before{width:20px;height:20px}
.menu-pop .swatch[aria-pressed="true"]::before{
  /* 고른 색은 바탕색 틈을 두고 같은 색 고리를 두릅니다 */
  box-shadow:0 0 0 2px var(--sheet), 0 0 0 3.5px var(--swatch, var(--accent-fill));
}
.view-toggle{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;background:var(--sheet);padding:2px}
.seg button{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:none;color:var(--muted);font-size:13.5px;
  padding:6px 11px;border-radius:6px;
}
.seg button svg{width:16px;height:12px;flex:none}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--hover-strong);color:var(--ink);font-weight:600}

/* Template dropdown */
.tool-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tpl-menu{position:relative}
/* 예산 구성이 있는 템플릿: 커서를 올리면 오른쪽에 구성이 펼쳐져요 (터치 화면에서는 바로 아래에 늘 보여요) */
.tpl-sub{position:relative}
.tpl-sub > button{position:relative;padding-right:28px}
.tpl-more{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px}
.tpl-sub:hover > button,.tpl-sub:focus-within > button{background:var(--hover)}
.tpl-tiers{
  display:none;position:absolute;left:100%;top:-6px;z-index:21;min-width:190px;padding:6px;margin-left:2px;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 10px 28px rgba(15,15,14,.13);
}
.tpl-tiers::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:8px} /* 비스듬히 옮겨 가도 닫히지 않게 */
.tpl-sub:hover .tpl-tiers,.tpl-sub:focus-within .tpl-tiers{display:block}
@media (hover:none){
  .tpl-more{display:none}
  .tpl-sub > button{padding-right:12px}
  .tpl-tiers{display:block;position:static;margin:0 0 4px 12px;padding:0;border:0;box-shadow:none;background:none;min-width:0}
  .tpl-tiers::before{display:none}
}
.tpl-btn,.tool-btn{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--sheet);color:var(--ink);
  padding:8px 12px 8px 14px;border-radius:8px;font-size:14px;font-weight:500;
  transition:background-color .15s, border-color .15s;
}
.tpl-btn::-webkit-details-marker{display:none}
.tpl-btn svg,.tool-btn svg{width:16px;height:16px;flex:none;color:var(--muted)}
.tpl-btn .chev{width:12px;height:12px;transition:transform .15s}
.tpl-menu[open] .chev{transform:rotate(180deg)}
.tpl-btn:hover,.tool-btn:hover,.tpl-menu[open] .tpl-btn{background:color-mix(in srgb, var(--ink) 5%, var(--sheet));border-color:color-mix(in srgb, var(--ink) 16%, var(--sheet))}
.tpl-btn:active,.tool-btn:active{background:color-mix(in srgb, var(--ink) 11%, var(--sheet));border-color:color-mix(in srgb, var(--ink) 24%, var(--sheet))}
.tpl-menu .menu-pop{left:0;right:auto;min-width:260px}
.menu-note{color:var(--muted);font-size:12px;padding:6px 12px 4px}

/* Category grid: 1 / 2 / 4 columns */
#cats{
  /* <main> 이라 site.css 의 랜딩용 main{max-width;padding} 규칙을 맞습니다.
     여기서는 제목·도구 모음과 왼쪽 끝을 맞춰야 하므로 되돌립니다. */
  max-width:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));
  gap:12px;align-items:start;
}
body[data-cols="2"] #cats{--cols:2}
body[data-cols="4"] #cats{--cols:4}
#cats .empty{grid-column:1 / -1}

/* Category */
.cat{
  container-type:inline-size;
  position:relative;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 16px 6px;
}
.cat:has(.cat-menu[open]){z-index:3}
.toolbar{position:relative;z-index:4}
/* 메뉴를 펼친 동안은 합계 바(5)와 떠 있는 단추(6) 위로 올려, 템플릿 목록 끝의 '엑셀 불러오기'가 가려지지 않게 합니다 */
.toolbar:has(details[open]){z-index:7}
/* 1줄: 이모지 · 이름 · ⋯ 메뉴   2줄: 예산/완료 · 접기 */
.cat-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"emo name menu" "sum sum fold";
  align-items:center;column-gap:6px;margin-bottom:2px;
}
.cat-head .cat-emoji{grid-area:emo}
.cat-head .cat-name{grid-area:name}
/* 카테고리 이모지 단추. 비어 있으면 흐린 웃는 얼굴 (올렸을 때 더 또렷하게) */
.cat-emoji{
  width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;
  display:grid;place-items:center;color:var(--muted);
  font-size:20px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
/* 빈 자리의 웃는 얼굴은 파일 색으로 */
.cat-emoji svg{width:19px;height:19px;color:var(--swatch, var(--accent-fill));opacity:.75;transition:opacity .15s}
.cat-head:hover .cat-emoji svg,.cat-emoji:focus-visible svg{opacity:1}
.cat-emoji:hover{background:var(--accent-soft)}
.cat-head .fold-btn{grid-area:fold}
.cat-head .cat-sum{grid-area:sum}
.cat-head .cat-menu{grid-area:menu}
.item-grip{
  width:18px;height:28px;padding:0;border:0;border-radius:5px;background:none;color:var(--muted);
  display:grid;place-items:center;cursor:grab;opacity:.55;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.item-grip svg{width:8px;height:14px}
.row:hover .item-grip,.item-grip:focus-visible{opacity:1}
.item-grip:hover{background:var(--hover);color:var(--ink)}
@media (hover:none){.item-grip{opacity:1}}
.row.dragging-row{
  z-index:30;background:var(--sheet);border-radius:8px;border-bottom:0;padding-left:0;padding-right:8px;
  box-shadow:0 12px 28px rgba(15,20,30,.2);outline:2px solid var(--accent-fill);outline-offset:-1px;pointer-events:none;
}
.row-slot{
  border:2px dashed color-mix(in srgb, var(--accent-fill) 70%, transparent);border-radius:8px;
  background:color-mix(in srgb, var(--accent-soft) 60%, transparent);margin:2px 0;
}
body.is-sorting,body.is-sorting *,body.nav-sorting,body.nav-sorting *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}
.cat-name{
  flex:1 1 160px;min-width:0;
  font-weight:700;letter-spacing:-0.02em;font-size:18px;
  border:0;background:transparent;padding:2px 0;
  border-bottom:1px dashed transparent;
}
.cat-name:hover{border-bottom-color:var(--line)}
.cat-name:focus{outline:none;border-bottom-color:var(--accent)}
.cat-sum{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-sum b{color:var(--ink);font-weight:600}
.cat-done{margin-left:12px}
.cat-sum .over{color:var(--warn)}

/* Category menu */
.cat-menu{position:relative}
.cat-menu summary{
  list-style:none;cursor:pointer;
  width:28px;height:28px;border-radius:6px;
  display:grid;place-items:center;color:var(--muted);
}
.cat-menu summary::-webkit-details-marker{display:none}
.cat-menu summary:hover,.cat-menu[open] summary{background:var(--hover);color:var(--ink)}
.cat-menu summary svg{width:18px;height:18px}

/* 손잡이 · 체크 · 항목 · 메모 · 선택지 · 수량 · 금액 · [지출] · × */
.cols,.row{
  display:grid;
  grid-template-columns:18px 24px minmax(0,.75fr) minmax(0,1.2fr) minmax(0,1fr) 84px 104px 28px;
  gap:6px;align-items:center;
}
body.show-spend .cols:not(.guest),body.show-spend .row:not(.guest){
  grid-template-columns:18px 24px minmax(0,.75fr) minmax(0,1.2fr) minmax(0,1fr) 84px 104px 104px 28px;
}
/* 지출 칸은 '지출 칸 보기'를 켰을 때만 */
body:not(.show-spend) .row .actual,body:not(.show-spend) .cols:not(.guest) span:nth-child(8){display:none}
.cols{font-size:12px;color:var(--muted);padding:3px 0 2px;border-bottom:1px solid var(--line)}
.cols .r{text-align:right;padding-right:8px}
.cols .c{text-align:center}
.row{padding:1px 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:0}
.row input[type="text"],.row textarea{
  width:100%;min-width:0;
  border:1px solid transparent;background:transparent;
  padding:3px 8px;border-radius:6px;line-height:1.35;
}
.row input[type="text"]:hover,.row textarea:hover{border-color:var(--line)}
.row input[type="text"]:focus,.row textarea:focus{outline:none;border-color:var(--muted);background:var(--paper)}
/* 메모: 한 줄로 시작해서 길어지면 줄을 바꿔 늘어나요 */
.row textarea.memo{
  display:block;font:inherit;font-size:13.5px;line-height:1.35;resize:none;overflow:hidden;
  word-break:keep-all;overflow-wrap:anywhere;
}
.row .money{text-align:right;font-variant-numeric:tabular-nums}
.row .memo{color:var(--muted);font-size:13.5px}
.row .memo:focus{color:var(--ink)}
/* 끝낸 항목: 빗금 대신 이름을 더 진하고 굵게 */
.row.done .name{color:var(--ink-strong, var(--ink));font-weight:600}
/* 빈 금액·지출 칸의 칸 이름은 줄이 둘로 접혀 칸 이름 줄이 없을 때만 흐리게 보여요 (아래 @container) */
.row input.money::placeholder{color:transparent;font-size:13.5px}

/* 수량 */
/* 수량: − 숫자 + (수량 칸에서 ↑/↓ 키도 돼요) */
.qty{display:flex;align-items:center;justify-content:center;gap:1px;min-width:0;border:1px solid transparent;border-radius:6px;padding:0 1px;cursor:text}
.qty:hover{border-color:var(--line)}
.qty:focus-within{border-color:var(--muted);background:var(--paper)}
.row .qty input[type="text"]{flex:1 1 auto;width:0;min-width:1.6ch;border:0;background:transparent;padding:3px 1px;text-align:center;font-variant-numeric:tabular-nums}
.row .qty input[type="text"]:focus{background:transparent}
.qty button{
  flex:none;width:18px;height:20px;padding:0;border:0;border-radius:4px;background:none;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;opacity:.5;
}
.qty button svg{width:10px;height:10px}
.row:hover .qty button,.qty:focus-within button{opacity:1}
.qty button:hover{background:var(--hover-strong);color:var(--ink)}
.qty button:disabled{opacity:.2;cursor:default;background:none}
@media (hover:none){.qty button{opacity:1;width:22px;height:24px}}

/* Guestbook tabs: 이름 · 축의금 only */
.cols.guest,.row.guest{grid-template-columns:18px minmax(0,1fr) 160px 32px}
.row.guest .name{padding-left:10px}
.cols.guest span:nth-child(2){padding-left:10px}
/* 합계 바: 예산표는 예산·지출 합계, 방명록은 축의금 합계와 인원 */
body.kind-guestbook .t-spend,body:not(.show-spend) .t-spend{display:none}
body:not(.kind-guestbook) .t-people{display:none}


/* Fold a category's items */
.fold-btn{
  flex:none;width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--muted);
  display:grid;place-items:center;
}
.fold-btn:hover{background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--ink)}
.fold-btn:active{background:color-mix(in srgb, var(--ink) 11%, transparent)}
.fold-btn svg{width:14px;height:14px;transition:transform .15s}
.cat.collapsed .fold-btn svg{transform:rotate(180deg)}
.cat.collapsed .cols,.cat.collapsed .rows,.cat.collapsed .add-item{display:none}
.cat.collapsed .cat-head{margin-bottom:0}
.cat.collapsed{padding-bottom:10px}

/* 선택지 button in each row */
.pick{
  display:flex;align-items:center;gap:6px;width:100%;min-width:0;height:28px;padding:0 9px;
  border:1px dashed var(--line);border-radius:6px;background:none;color:var(--muted);
  font-size:13.5px;text-align:left;
}
.pick:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.pick:active{background:color-mix(in srgb, var(--ink) 11%, transparent)}
.pick.has-options{border-style:solid}
.pick.chosen{border-style:solid;border-color:color-mix(in srgb, var(--accent-fill) 40%, var(--line));background:var(--accent-soft);color:var(--ink)}
.pick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-count{flex:none;font-size:11.5px;line-height:18px;padding:0 6px;border-radius:999px;background:var(--hover);color:var(--muted);font-variant-numeric:tabular-nums}
.pick.chosen .pick-count{background:var(--sheet)}

/* 선택지 모두 보기: 후보를 세로로 늘어놓고 고른 것에 색을 둡니다 */
.picks{display:flex;flex-direction:column;gap:3px;min-width:0;padding:2px 0}
.pick-opt{
  display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:26px;padding:3px 9px;
  border:1px solid var(--line);border-radius:6px;background:none;color:var(--muted);
  font-size:13px;text-align:left;
}
.pick-opt:hover{background:color-mix(in srgb, var(--ink) 5%, transparent);color:var(--ink)}
.pick-opt.on{border-color:color-mix(in srgb, var(--accent-fill) 40%, var(--line));background:var(--accent-soft);color:var(--ink);font-weight:600}
.pick-opt.on::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-fill);
}
.pick-opt-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-opt-price{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:400}
.pick-opt.on .pick-opt-price{color:var(--ink)}
.picks .pick-edit{
  height:auto;border:0;padding:2px 2px 0;width:auto;align-self:flex-start;
  font-size:12px;color:var(--muted);background:none;text-decoration:underline;text-underline-offset:2px;
}
.picks .pick-edit:hover{background:none;color:var(--ink)}

/* 선택지 dialog */
.opt-dialog{
  border:0;padding:0;border-radius:14px;background:var(--sheet);color:var(--ink);
  width:min(560px, calc(100vw - 32px));max-height:min(84vh, 760px);
  box-shadow:0 24px 64px rgba(15,20,30,.28);
}
.opt-dialog::backdrop{background:rgba(15,20,30,.45)}
.opt-inner{display:flex;flex-direction:column;max-height:inherit}
.opt-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 12px}
.opt-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-0.02em}
.opt-head p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.opt-x{
  margin-left:auto;flex:none;width:32px;height:32px;border:0;border-radius:6px;background:none;
  color:var(--muted);font-size:20px;line-height:1;
}
.opt-x:hover{background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--ink)}
.opt-list{overflow-y:auto;padding:4px 20px 8px;display:flex;flex-direction:column;gap:8px;min-height:0}
/* '선택 안 함': 늘 맨 위에 있는 빈 선택 */
.opt-none:not(.selected) .opt-name,.pick-none:not(.on) .pick-opt-name{color:var(--muted)}
.opt-empty{color:var(--muted);font-size:14px;text-align:center;padding:22px 12px;border:1.5px dashed var(--line);border-radius:10px}
.opt{border:1px solid var(--line);border-radius:10px;padding:4px}
.opt-top{display:flex;align-items:center;gap:2px}
/* 고른 선택지: 머리줄이 [● 이름 칸 | 가격 칸], 아래 한 줄에 [링크 | 비고] */
.opt-head-edit{
  flex:1;min-width:0;display:grid;grid-template-columns:18px minmax(0,1fr) 130px;gap:6px;align-items:center;
  padding:4px 4px 4px 10px;
}
.opt-edit-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:0 8px 6px 38px}
/* 칸 대신 점선 밑줄만. 고치는 중에는 밑줄이 실선으로 */
.opt-head-edit input,.opt-edit-form input{
  width:100%;min-width:0;border:0;border-bottom:1px dashed color-mix(in srgb, var(--ink) 35%, transparent);border-radius:0;
  background:transparent;padding:6px 4px;font-size:14px;line-height:1.35;  /* 두 줄의 칸 높이를 같게 */
}
.opt-head-edit .opt-radio{margin-right:4px}
.opt-head-edit input[data-f="name"]{font-weight:600}
.opt-head-edit input:focus,.opt-edit-form input:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--accent)}
.opt-head-edit .money{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .opt-head-edit{grid-template-columns:18px minmax(0,1fr) 104px;padding-left:8px}
  .opt-edit-form{grid-template-columns:1fr;padding-left:8px}
}

.opt.selected{border-color:var(--accent-fill);background:var(--accent-soft)}
.opt-main{
  flex:1;min-width:0;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:2px 12px;align-items:center;
  border:0;background:none;text-align:left;padding:9px 10px;border-radius:7px;
}
.opt-main:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.opt-main:active{background:color-mix(in srgb, var(--ink) 11%, transparent)}
.opt-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid color-mix(in srgb, var(--ink) 30%, var(--sheet));display:grid;place-items:center}
.opt.selected .opt-radio{border-color:var(--accent-fill)}
.opt.selected .opt-radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent-fill)}
.opt-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.opt-price.none{color:var(--muted);font-weight:400}
.opt-tier{display:inline-block;vertical-align:1px;margin-left:6px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:500;line-height:17px;
  background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--muted)}
.opt-note{grid-column:2 / -1;color:var(--ink);opacity:.75;font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.opt-host{grid-column:2 / -1;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-tool{
  flex:none;width:32px;height:32px;border:0;border-radius:6px;background:none;color:var(--muted);
  display:grid;place-items:center;text-decoration:none;
}
.opt-tool svg{width:16px;height:16px}
.opt-tool:hover{background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--ink)}
.opt-tool.danger:hover{color:var(--warn)}
/* 링크 열기는 색을 넣어 눈에 띄게 */
a.opt-tool{background:var(--accent-fill);color:#fff}
a.opt-tool:hover{background:var(--accent-fill);color:#fff;filter:brightness(.9)}
.opt-form{border-top:1px solid var(--line);padding:14px 20px 18px;display:grid;gap:8px}
.opt-form-title{font-size:13.5px;font-weight:600}
.opt-form input{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--sheet);
  padding:9px 12px;
}
.opt-form input:focus{outline:none;border-color:var(--accent)}
.opt-form .money{text-align:right;font-variant-numeric:tabular-nums}
.opt-form-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px}
.opt-form-foot{display:flex;align-items:center;gap:8px}
.opt-form-foot small{color:var(--muted);font-size:12.5px;margin-right:auto}
.btn-ghost,.btn-primary{border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600}
.btn-ghost{border:1px solid var(--line);background:var(--sheet)}
.btn-ghost:hover{background:color-mix(in srgb, var(--ink) 5%, var(--sheet))}
.btn-primary{border:0;background:var(--ink);color:var(--sheet)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{filter:brightness(.94)}
@media (max-width:640px){
  .opt-dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:16px 16px 0 0;max-height:88vh}
  .opt-form-row{grid-template-columns:1fr}
  .opt-name{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
}
.check{display:flex;justify-content:center}
.check input{width:18px;height:18px;accent-color:var(--accent);margin:0;opacity:.45;transition:opacity .15s}
.check input:checked{opacity:.75}
.row:hover .check input,.check input:focus-visible{opacity:.9}
.del-item{
  border:0;background:none;color:var(--muted);font-size:18px;line-height:1;
  width:28px;height:28px;border-radius:6px;
}
.del-item:hover{color:var(--warn);background:var(--paper)}
.add-item{
  margin-top:2px;border:0;background:none;color:var(--accent);
  font-weight:500;font-size:14px;padding:4px 4px;
}
.add-item:hover{text-decoration:underline}

.add-cat{
  width:100%;padding:12px;margin-top:12px;border:1.5px dashed var(--line);border-radius:10px;
  background:transparent;color:var(--muted);font-weight:500;
}
.add-cat:hover{border-color:var(--accent);color:var(--accent)}

/* 카테고리가 없을 때의 안내 상자. #cats 안으로 좁혀 둡니다 —
   날짜 칩의 .empty 에도 걸려서 아래 여백 18px 이 파일 줄을 밀어냈어요. */
#cats .empty{
  text-align:center;color:var(--muted);padding:40px 20px;
  border:1.5px dashed var(--line);border-radius:10px;margin-bottom:18px;
}

/* 체크리스트 아래 안내. site.css 의 .foot-note(푸터 쿠팡 고지)와 이름이 겹쳐 좌우 여백 20px 이 붙었기에 따로 둡니다. */
.save-note{color:var(--muted);font-size:13.5px;margin:22px 0 0}
/* 쿠팡 파트너스 고지 (링크가 보이는 곳마다 표시) */
.aff-note{color:var(--muted);font-size:12px;line-height:1.6;margin:8px 0 0;word-break:keep-all}
.opt-inner .aff-note{margin:2px 0 0;padding:0 20px 2px}
.aff-note[hidden]{display:none}
.foot-actions{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:13.5px}
.foot-actions button{border:0;background:none;color:var(--muted);text-decoration:underline;padding:0;font-size:inherit}
.foot-actions button:hover{color:var(--warn)}

.t-main .t-label,.t-small .t-label{font-size:12.5px;color:var(--muted)}
.t-main .t-num{
  font-weight:700;
  font-size:clamp(20px,3.2vw,25px);line-height:1.15;   /* 1억 단위(123,456,789원)까지 두 개가 나란히 들어가게 */
  font-variant-numeric:tabular-nums;letter-spacing:-0.025em;
}
.t-main .t-man{font-size:13px;color:var(--muted)}
.t-small .t-num{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.t-small .t-num.over{color:var(--warn)}
.export{
  border:0;border-radius:var(--radius);padding:7px 14px;font-size:14px;font-weight:600;
  background:var(--ink);color:var(--sheet);white-space:nowrap;
}
.export{cursor:pointer;display:inline-block;text-align:center;user-select:none}
.export:hover{filter:brightness(1.35)}
.export[aria-disabled="true"]{opacity:.6;cursor:wait}
.t-export{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.saved-at{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.saved-at:empty{display:none}


/* Narrow category card (2/4 columns, or phone): 이름 · 메모가 첫 줄, 선택지 · 금액 · 수량이 둘째 줄.
   지출 칸을 켜면 금액과 지출이 셋째 줄로 내려갑니다. 칸 이름 줄은 보이지 않아요 (금액·지출은 빈칸 안내로). */
@container (max-width:620px){
  .cols:not(.guest){display:none}   /* 줄이 둘로 접히면 칸 이름은 맞출 자리가 없어서 뺍니다 */
  .cols.guest,.row.guest{grid-template-columns:18px minmax(0,1fr) 120px 28px}
  .row:not(.guest),body.show-spend .row:not(.guest){
    /* 마지막 두 칸(56+28)은 첫 줄에선 메모·삭제가, 둘째 줄에선 수량(− 1개 +)이 함께 써요 */
    grid-template-columns:18px 24px minmax(0,1fr) minmax(0,1fr) 56px 28px;
    grid-template-areas:"g c n m m d" ". . o b q q";
    row-gap:1px;
  }
  body.show-spend .row:not(.guest){grid-template-areas:"g c n m m d" ". . o o q q" ". . b a a ."}
  .row:not(.guest) .item-grip{grid-area:g}
  .row:not(.guest) .check{grid-area:c}
  .row:not(.guest) .name{grid-area:n}
  .row:not(.guest) .memo{grid-area:m}
  .row:not(.guest) .del-item{grid-area:d;justify-self:end}
  .row:not(.guest) .budget{grid-area:b}
  .row:not(.guest) .actual{grid-area:a}
  .row:not(.guest) .pick{grid-area:o;height:28px}
  .row:not(.guest) .picks{grid-area:o}
  .row:not(.guest) .picks .pick{height:auto}
  .row:not(.guest) .qty{grid-area:q}
  .row{padding:3px 0}
  .row input.money::placeholder{color:color-mix(in srgb, var(--muted) 50%, transparent)}
}

@media (max-width:1100px){
  body[data-cols="4"]{--wrap:1240px}
  body[data-cols="4"] #cats{--cols:2}
  .seg button[data-cols="4"]{display:none}
  body[data-cols="4"] .seg button[data-cols="2"]{background:var(--hover-strong);color:var(--ink);font-weight:600}
}
@media (max-width:700px){
  body[data-cols] #cats{--cols:1}
  .view-toggle{display:none}
}
@media (max-width:640px){
  .wrap{padding-top:12px}
  .file-switch-btn{max-width:56vw}
  .cat{padding:8px 12px 6px}
  /* 좁은 화면에서는 엑셀 내보내기를 빼고, 저장 시각만 오른쪽에 둡니다 */
  .t-export{flex:none;margin-left:auto}
  .export{display:none}
}
@media (prefers-reduced-motion:reduce){.toast,.tpl-btn,.tool-btn,.tpl-btn .chev{transition:none}}

/* 위에 붙는 막대: 카테고리 가로 목록과 +. 스크롤해서 붙으면 한 줄 요약이 같이 나와요. */
/* 화면 위에 나타나는 막대. 자리를 차지하지 않고, 카드의 목록이 지나간 뒤에만 보여요 */
.plan-bar{
  position:fixed;top:0;left:0;right:0;z-index:6;
  padding:8px max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  background:color-mix(in srgb, var(--page) 86%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 var(--line), 0 10px 24px -14px rgba(40,36,32,.35);
  transform:translateY(-110%);visibility:hidden;
  transition:transform .2s ease, visibility 0s linear .2s;
}
.plan-bar.stuck{transform:none;visibility:visible;transition:transform .2s ease}
.pb-mini{display:flex;align-items:center;gap:6px 12px;min-width:0;font-size:13.5px;color:var(--muted)}
.pb-title{color:var(--ink);font-size:14.5px;font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-chip{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--ink);color:var(--sheet);white-space:nowrap}
.pb-chip.soon{background:#C2603F}
.pb-chip.past{background:color-mix(in srgb, var(--ink) 45%, transparent)}
.pb-chip:empty{display:none}
.pb-stat{white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-stat b{color:var(--ink);font-weight:700}
body:not(.show-spend) .pb-spend,body.kind-guestbook .pb-spend{display:none}
.pb-cats{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:6px}
.cat-strip{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;position:relative;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px;
  /* 양 끝을 흐리게 해서 옆으로 더 있다는 걸 알려요 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent);
          mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent);
}
.cat-strip::-webkit-scrollbar{display:none}
.cat-nav-item{
  flex:none;display:flex;align-items:center;position:relative;
  border:1px solid var(--line);border-radius:99px;background:var(--sheet);
  transition:background-color .15s, border-color .15s;
}
.cat-nav-item:has(.cat-nav-go[aria-current="true"]){
  background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent-fill) 45%, var(--line));
}
.cat-nav-item.dragging{z-index:2;box-shadow:0 6px 16px rgba(15,20,30,.18);outline:2px solid var(--accent-fill);outline-offset:-1px}
.cat-nav-grip{
  flex:none;width:18px;height:30px;padding:0 0 0 4px;border:0;border-radius:99px 0 0 99px;background:none;
  display:grid;place-items:center;color:var(--muted);cursor:grab;opacity:.5;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.cat-nav-grip svg{width:7px;height:12px}
.cat-nav-item:hover .cat-nav-grip,.cat-nav-grip:focus-visible{opacity:1}
@media (hover:none){.cat-nav-grip{opacity:.8}}
.cat-nav-go{
  display:flex;align-items:center;gap:6px;
  border:0;background:none;color:var(--ink);
  padding:4px 12px 4px 3px;border-radius:0 99px 99px 0;font-size:13.5px;white-space:nowrap;
}
.cat-nav-go[aria-current="true"]{font-weight:600}
.cat-nav-name{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.cat-nav-emoji{font-size:14px;line-height:1;margin-right:-2px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* 요약 카드 안에서는 줄을 바꿔 한 번에 다 보이고, 위 막대에 붙었을 때만 옆으로 넘겨요 */
.pc-cats-slot .cat-strip{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.pc-cats-slot .pb-cats{align-items:flex-start}
.cat-nav-meta{color:var(--muted);font-size:11.5px;font-weight:400;font-variant-numeric:tabular-nums}
.cat-nav-item:hover{border-color:color-mix(in srgb, var(--ink) 20%, var(--line))}
.cat-nav-item.naming{border-color:var(--accent-fill)}
.cat-nav-input{
  width:170px;font-size:13.5px;font-weight:600;
  border:0;border-radius:99px;background:transparent;color:var(--ink);padding:5px 12px;
}
.cat-nav-input:focus{outline:none}
.cat-nav-item.naming:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-fill) 25%, transparent)}
.cat-nav-empty{color:var(--muted);font-size:13px;padding:4px 6px;white-space:nowrap}
.cat-strip-add{
  flex:none;width:32px;height:32px;padding:0;border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--ink) 25%, var(--line));background:var(--sheet);color:var(--ink);
  display:grid;place-items:center;
}
.cat-strip-add svg{width:15px;height:15px}
.cat-strip-add:hover{border-style:solid;border-color:var(--accent-fill);background:var(--accent-soft)}
/* 맨 위로: 위 막대에 붙었을 때만 */
.cat-strip-top{
  flex:none;width:32px;height:32px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:var(--sheet);color:var(--ink);
  display:grid;place-items:center;
}
.cat-strip-top svg{width:16px;height:16px}
.cat-strip-top:hover{background:var(--hover-strong, var(--hover))}
.pc-cats-slot .cat-strip-top{display:none}
@media (max-width:640px){
  .plan-bar{padding:6px 12px}
  .pb-mini{flex-basis:100%}
  .pb-title{max-width:40vw}
}
/* 내려앉은 카테고리를 잠깐 표시합니다 */
.cat.cat-flash{animation:cat-flash 1.4s ease}
@keyframes cat-flash{
  0%,35%{box-shadow:0 0 0 3px color-mix(in srgb, var(--swatch, var(--accent-fill)) 45%, transparent)}
  100%{box-shadow:0 0 0 3px transparent}
}
/* 설명 말풍선: 요약 카드 오른쪽 아래에 걸쳐 떠 있는 캐릭터, 말풍선은 왼쪽으로 뻗어요.
   자리를 차지하지 않고 위에 얹혀서, 닫아도 아래 내용이 움직이지 않아요. */
.hello{
  position:absolute;z-index:8;right:14px;top:calc(100% - 14px);
  display:flex;align-items:center;gap:12px;
  width:min(460px, calc(100% - 28px));
  animation:hello-in .28s cubic-bezier(.2,.8,.2,1);
}
.hello[hidden]{display:none}
/* 툴바 메뉴를 열면 툴바가 카드 위로 올라와 말풍선과 겹쳐요. 메뉴가 열려 있는 동안만 말풍선을 감춥니다 */
.hello{transition:opacity .15s}
body:has(.toolbar details[open]) .hello{opacity:0;pointer-events:none}
@keyframes hello-in{from{opacity:0;translate:8px 0;scale:.97}}
.hello-bubble{
  position:relative;flex:1;min-width:0;
  background:var(--sheet);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 3px 8px -3px rgba(40,36,32,.18), 0 1px 2px rgba(40,36,32,.06);
  padding:9px 30px 9px 13px;
}
/* 꼬리: 오른쪽의 캐릭터 쪽으로 */
.hello-bubble::after{
  content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:var(--sheet);border-top:1px solid var(--line);border-right:1px solid var(--line);
  transform:rotate(45deg);
}
.hello-bubble p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere}
.hello-x{
  position:absolute;top:5px;right:5px;width:22px;height:22px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--muted);display:grid;place-items:center;
}
.hello-x svg{width:13px;height:13px}
.hello-x:hover{background:var(--hover);color:var(--ink)}
.hello-char{flex:none;width:52px;height:52px;border-radius:14px;display:block}
/* 좁은 화면에서는 제목 바로 아래에 겹쳐 띄웁니다 */
@media (max-width:820px){.hello-char{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.hello,.cat.cat-flash{animation:none}.plan-bar{transition:none}}

/* 파일 줄 오른쪽의 남은 날. 눌러서 정하고 고칩니다. */
.dday-chip{
  flex:none;
  font-size:12.5px;font-weight:700;letter-spacing:-0.01em;
  padding:4px 10px;border-radius:99px;
  /* 옆 색상 알약의 1px 점선과 맞춰, 색은 테두리 안쪽까지만 칠합니다 */
  border:1px solid transparent;background-clip:padding-box;
  background-color:var(--ink);color:var(--sheet);white-space:nowrap;
}
.dday-chip:hover{filter:brightness(1.35)}
.dday-chip.soon{background-color:#C2603F}
.dday-chip.past{background-color:color-mix(in srgb, var(--ink) 45%, transparent)}
.dday-chip.empty{
  background:none;color:var(--muted);font-weight:400;
  border:1px dashed var(--line);padding:4px 10px;
}
.dday-chip.empty:hover{filter:none;background:var(--hover);color:var(--ink)}
@media (max-width:640px){
  .dday-chip.empty{display:none}   /* 좁은 화면에서는 날짜가 있을 때만 */
}