/* 주형(동만)이 가족 홈페이지 — "가족 서랍장" : 분류는 서랍 탭, 항목은 색인 카드, 마감은 도장.
   토큰: 먹 #1C2B2A · 연한 종이 #F3F5F2 · 카드 #FFFFFF · 서랍 초록 #1E6B57 · 색인 노랑 #F2C14E · 경고 #B42318 */
:root {
  --ink: #1C2B2A; --ink-soft: #4E5E5B; --paper: #F3F5F2; --card: #FFFFFF; --line: #DCE3DE;
  --accent: #1E6B57; --accent-ink: #FFFFFF; --accent-soft: #E3EFEA; --tab: #F2C14E; --warn: #B42318;
  --d-bid: #1E6B57; --d-job: #2F5D9E; --d-stay: #7E4E93; --d-flight: #1F7F8F; --d-restaurant: #A85A26;
  --serif: "Gowun Batang", "Nanum Myeongjo", serif;
  --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --r: 6px; --tap: 44px;
}
@media all {
  :root { --ink: #E8EEEC; --ink-soft: #AEBBB7; --paper: #1E2629; --card: #2A3438; --line: #3A474B; color-scheme: dark;
          --accent: #7FC4A6; --accent-ink: #0E1513; --accent-soft: #24393A; --warn: #FF8A7A;
          --d-bid: #5FBF9F; --d-job: #7FA8E8; --d-stay: #C49AD8; --d-flight: #6CC6D4; --d-restaurant: #E39A64; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16.5px/1.6 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tab); outline-offset: 2px; border-radius: 3px; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; line-height: 1.3; margin: .2em 0 .5em; }
h2 { font-size: 1.2rem; margin: 0 0 .6em; }
h2 small { font-family: var(--sans); font-weight: 400; font-size: .85rem; color: var(--ink-soft); margin-left: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }
.muted, small { color: var(--ink-soft); }
.small { font-size: .9rem; margin: 4px 0 10px; }
.notice { color: var(--accent); } .error { color: var(--warn); }
.pre { white-space: pre-wrap; }

/* ---------- 머리: 상호 + 서랍 탭 ---------- */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.bar { max-width: 1180px; margin: 0 auto; padding: 10px 16px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.who { display: flex; align-items: center; gap: 4px; font-size: .95rem; }
.who a, .who button { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 8px; }
.drawers { max-width: 1180px; margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.drawers::-webkit-scrollbar { display: none; }
@media (max-width: 720px) { .drawers { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); } }
.drawer { flex: none; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 12px;
          color: var(--ink-soft); text-decoration: none; border-bottom: 4px solid transparent; font-weight: 500; }
.drawer:hover { color: var(--ink); }
.drawer[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tab); font-weight: 700; }
.drawer[class*="d-"]::before { content: ""; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; background: var(--stripe); }
.sep { flex: none; width: 1px; margin: 12px 6px; background: var(--line); }

/* 분류 색 띠 */
.d-bid { --stripe: var(--d-bid); } .d-job { --stripe: var(--d-job); } .d-stay { --stripe: var(--d-stay); }
.d-flight { --stripe: var(--d-flight); } .d-restaurant { --stripe: var(--d-restaurant); } .d-manual { --stripe: var(--ink-soft); }

/* ---------- 입력 요소 ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { min-height: var(--tap); background: var(--card); border: 1px solid #B9C5BF; border-radius: var(--r); padding: 8px 12px; }
textarea { width: 100%; min-height: 0; }
button, .btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px;
               background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--r);
               font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { filter: brightness(1.08); }
.ghost, button.ghost { background: transparent; color: var(--accent); }
button.link { background: none; border: 0; color: var(--accent); padding: 0 8px; font-weight: 500; min-height: 0; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.check input { min-height: 0; width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- 홈 ---------- */
.finder { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-bottom: 24px; }
.finder h1 { margin-top: 0; }
.finder-row { display: flex; gap: 8px; flex-wrap: wrap; }
.finder-row input { flex: 1 1 220px; font-size: 1.05rem; }
.due { margin-bottom: 28px; }
.due-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.due-list li { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: center; padding: 10px 14px; border-left: 4px solid var(--stripe); }
.due-list li + li { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .due-list { display: grid; grid-template-columns: 1fr 1fr; }
  .due-list li { border-top: 1px solid var(--line); }
  .due-list li:nth-child(-n+2) { border-top: 0; }
}
.due-list .stamp { grid-row: span 2; justify-self: start; }
.due-list a { font-weight: 600; }
.due-list .sub { color: var(--ink-soft); font-size: .9rem; }
.index-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 28px; }
.index-card { display: flex; flex-direction: column; padding: 12px 14px 14px; background: var(--card); color: var(--ink); text-decoration: none;
              border: 1px solid var(--line); border-top: 5px solid var(--stripe, var(--tab)); border-radius: var(--r); }
.index-card:hover { border-color: var(--stripe, var(--tab)); }
.index-card .label { font-weight: 600; }
.index-card .num { font-family: var(--serif); font-size: 2rem; line-height: 1.2; }
.index-card .sub { font-size: .85rem; color: var(--ink-soft); }
.comment-line { margin: 6px 0; }

/* ---------- 마감 도장 ---------- */
.stamp { display: inline-block; min-width: 52px; text-align: center; padding: 2px 8px; border: 2px solid var(--ink-soft); border-radius: 4px;
         font-weight: 800; font-size: .9rem; color: var(--ink-soft); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stamp.soon { border-color: #9A7413; color: #6B5009; background: #FCF1D0; }
.stamp.urgent { border-color: var(--warn); color: var(--warn); transform: rotate(-3deg); background: transparent; }
.stamp.past { opacity: .55; border-style: dashed; }
@media all { .stamp.soon { background: #3A3015; color: var(--tab); border-color: var(--tab); } }

/* ---------- 목록 ---------- */
.page-head { display: flex; align-items: baseline; gap: 12px; border-left: 6px solid var(--stripe); padding-left: 12px; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.page-head .count { margin: 0; color: var(--ink-soft); }
.search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.search input[name=q] { flex: 1 1 240px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 18px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; background: var(--card); }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: .88rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.tbl.list { border: 1px solid var(--line); }
.tbl.list td { white-space: nowrap; }
.tbl.list td.wrap { white-space: normal; min-width: 7em; max-width: 14em; }
.tbl.list td:has(a[href^="/item/"]) { white-space: normal; min-width: 260px; font-weight: 500; }
.tbl.list tbody tr:hover { background: var(--accent-soft); }
.star { background: none; border: 0; padding: 0; min-width: var(--tap); min-height: var(--tap); font-size: 1.3rem; color: #B9C5BF; }
.star.on { color: #D99A0B; }
span.star { min-width: 0; min-height: 0; font-size: 1.1rem; }
.cards { list-style: none; margin: 0; padding: 0; }
.card-item { display: flex; gap: 8px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--stripe); border-radius: var(--r); padding: 12px 6px 12px 14px; margin-bottom: 8px; }
.card-main { flex: 1; min-width: 0; }
.card-title { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
.card-meta { margin: 4px 0 0; font-size: .9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.card-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.narrow-only { display: none; }
.pager { display: flex; gap: 16px; justify-content: center; align-items: center; margin: 20px 0; }
.pager a { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; }

/* ---------- 상세 ---------- */
.item-head { border-left: 6px solid var(--stripe); padding-left: 14px; margin-bottom: 14px; }
.kicker { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.kicker a { color: inherit; }
.item-head h1 { margin: .15em 0 .5em; }
.item-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.item-actions form { display: contents; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.chip { display: inline-flex; align-items: center; gap: 2px; background: var(--accent-soft); border-radius: 999px; padding: 4px 6px 4px 12px; }
.chip a { text-decoration: none; font-weight: 500; }
.kv { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px 14px; margin: 0; }
.kv dt { color: var(--ink-soft); font-size: .92rem; padding-top: 1px; }
.kv dd { margin: 0; }
a.url { word-break: break-all; }
.override { color: var(--warn); font-size: .9em; }
.comment { border-bottom: 1px solid var(--line); padding: 8px 0; }
details > summary { cursor: pointer; color: var(--accent); min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }
.narrow { max-width: 440px; margin: 40px auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-bottom: 16px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 휴대폰 ---------- */
@media (max-width: 720px) {
  body { font-size: 17px; }
  main { padding: 14px 12px 40px; }
  h1 { font-size: 1.5rem; }
  .wide-only { display: none; }
  .narrow-only { display: block; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: 10px; }
  .search > * { flex: 1 1 auto; }
  .search input[name=q] { flex-basis: 100%; }
  .finder { padding: 16px; }
  .finder-row > * { flex: 1 1 100%; }
  .cols { grid-template-columns: 1fr; }
  .panel { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .stamp.urgent { transform: none; } }

/* ---------- NAS ---------- */
.meter { height: 14px; background: var(--accent-soft); border-radius: 7px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }
.meter-text { margin: 8px 0 0; font-weight: 600; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0 12px; font-size: 1.05rem; }
.crumbs a { font-weight: 600; }
.crumbs span { color: var(--ink-soft); }
.files { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.file { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 6px; min-height: 52px; }
.file + .file { border-top: 1px solid var(--line); }
.file > a:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; color: var(--ink); }
.file.dir > a:first-child { font-weight: 600; }
.file .ico { width: 28px; text-align: center; font-size: 1.2rem; }
.fname { overflow-wrap: anywhere; }
.fpath { display: block; font-size: .82rem; }
.fmeta { color: var(--ink-soft); font-size: .88rem; white-space: nowrap; }
.btn.dl { min-height: 36px; padding: 0 12px; font-size: .9rem; }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; font-size: .92em; }
@media (max-width: 720px) { .fmeta { display: none; } }

/* ---------- NAS 사진·문서 ---------- */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 24px; }
.quick-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--card); color: var(--ink); text-decoration: none;
              border: 1px solid var(--line); border-radius: var(--r); border-left: 6px solid var(--tab); min-height: 88px; }
.quick-card.docs { border-left-color: var(--accent); }
.quick-card:hover { border-color: var(--accent); }
.quick-card b { display: block; font-family: var(--serif); font-size: 1.35rem; }
.quick-card small { display: block; }
.quick-ico { font-size: 2rem; }
.album { margin-bottom: 22px; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gallery a { display: block; position: relative; aspect-ratio: 1; background: var(--accent-soft); border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .vthumb { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: var(--accent); }
.gallery .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: .75rem; color: #fff;
                background: linear-gradient(transparent, rgba(0,0,0,.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.gallery a:hover .cap, .gallery a:focus-visible .cap { opacity: 1; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kinds a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
           background: var(--card); color: var(--ink); text-decoration: none; }
.kinds a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ico.kind { width: auto; min-width: 44px; padding: 2px 6px; font-size: .75rem; font-weight: 700; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-soft); }
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 4px; } }

/* ---------- 보기 창 ---------- */
dialog.viewer { width: min(1100px, 96vw); height: min(92vh, 1000px); max-width: none; max-height: none; padding: 0; border: 0;
                border-radius: 10px; background: #111614; color: #EEF2EF; display: none; flex-direction: column; overflow: hidden; }
dialog.viewer[open] { display: flex; }
dialog.viewer::backdrop { background: rgba(10, 14, 12, .82); }
.vw-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; background: #1A211E; }
.vw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vw-pos { color: #A9B6B1; font-size: .9rem; font-variant-numeric: tabular-nums; }
.vw-bar .btn.ghost { color: #CFE7DD; border-color: #3B4A44; min-height: 38px; padding: 0 12px; }
.vw-close { background: transparent; border: 0; color: #EEF2EF; font-size: 1.3rem; min-width: var(--tap); }
.vw-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.vw-body img, .vw-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
.vw-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.vw-body.k-docx, .vw-body.k-sheet, .vw-body.k-text, .vw-body.k-slides { align-items: stretch; justify-content: stretch; }
.vw-doc { flex: 1; overflow: auto; background: var(--card); color: var(--ink); padding: 24px clamp(16px, 5vw, 56px); }
.pv-doc { max-width: 46em; margin: 0 auto; line-height: 1.75; }
.pv-doc h2 { font-size: 1.5rem; } .pv-doc h3 { font-size: 1.15rem; margin-top: 1.4em; }
.pv-slides { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pv-slides img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.35); background: #fff; }
.vw-body.k-slides .vw-doc { padding: 16px clamp(8px, 3vw, 40px); }
.pv-text { white-space: pre-wrap; font: .92rem/1.6 ui-monospace, Consolas, monospace; margin: 0; }
.pv-scroll { overflow: auto; margin: 10px 0; } .pv-scroll .tbl td { white-space: nowrap; font-size: .9rem; }
.vw-none { padding: 24px; text-align: center; color: #CFD8D4; }
.vw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; min-height: 0; padding: 0;
          background: rgba(0,0,0,.35); border: 0; color: #fff; font-size: 2.2rem; border-radius: 6px; }
.vw-prev { left: 8px; } .vw-next { right: 8px; }
dialog.viewer .vw-nav[hidden] { display: none; }
@media (max-width: 720px) {
  dialog.viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .vw-open, .vw-pos { display: none; }
  .vw-nav { width: 40px; height: 60px; background: rgba(0,0,0,.25); }
}

/* ---------- 올리기 ---------- */
.upload { background: var(--card); border: 2px dashed #B9C5BF; border-radius: var(--r); padding: 10px 14px; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.upload.over { border-color: var(--accent); background: var(--accent-soft); }
.upload.busy { opacity: .85; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.drop p { margin: 0; }
.drop label.btn { cursor: pointer; }
.drop label.btn:focus-within { outline: 3px solid var(--tab); outline-offset: 2px; }
.up-status { display: flex; align-items: center; gap: 10px; order: 3; flex: 1 0 100%; }
.up-status progress { flex: 0 0 180px; height: 10px; accent-color: var(--accent); }
.up-mkdir { margin: 0 0 0 auto; flex-wrap: nowrap; }
.up-mkdir input { width: 220px; flex: 0 1 220px; }
.up-mkdir button { white-space: nowrap; flex: none; }
@media (max-width: 720px) { .hint { display: none; } .up-status progress { flex-basis: 120px; }
  .up-mkdir { margin-left: 0; flex: 1 1 100%; } .up-mkdir input { flex: 1 1 auto; width: auto; min-width: 0; } }

.up-status[hidden] { display: none; }
.files li.empty { padding: 14px 16px; }

/* ---------- 여행 묶음 ---------- */
:root { --d-travel: #1F7F8F; }
@media all { :root { --d-travel: #6CC6D4; } }
.d-travel { --stripe: var(--d-travel); }
.subtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; }
.subtabs a { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
             border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 500; }
.subtabs a[class*="d-"]::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--stripe); }
.subtabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.subtabs .chev { color: var(--ink-soft); padding: 0 2px; }
.travel-panel { border-top: 5px solid var(--stripe); }
.travel-panel h2 .small { font-family: var(--sans); font-size: .85rem; font-weight: 500; margin-left: 8px; }
.travel-panel .due-list { border: 0; display: block; }
.travel-panel .due-list li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
.travel-panel .due-list li:first-child { border-top: 0; }

/* 곧 마감: 입찰·구인 두 칸 */
.due-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .due-cols { grid-template-columns: 1fr 1fr; } }
.due-col h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 8px; padding-left: 10px; border-left: 5px solid var(--stripe); }
.due-col h3 small { font-family: var(--sans); font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.due-col h3 .small { font-family: var(--sans); font-size: .85rem; font-weight: 500; margin-left: 8px; }
.due-cols .due-list { display: block; }
.due-cols .due-list li { border-top: 0; }
.due-cols .due-list li + li { border-top: 1px solid var(--line); }
.due-col p.panel { margin: 0; }

/* ---------- 가족 게시판 ---------- */
.board-head { align-items: center; }
.board-head .btn { margin-left: auto; }
.posts { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.post { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px; }
.post + .post { border-top: 1px solid var(--line); }
.post > a { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--ink); text-decoration: none; font-weight: 600; }
.post > a:hover .ptitle { text-decoration: underline; }
.post.pinned { background: #FCF8EA; }
@media all { .post.pinned { background: #2A2614; } }
.pin { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--tab); color: #3A2C00; font-size: .8rem; font-weight: 800; }
.ncm { min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .82rem; text-align: center; }
.pmeta { color: var(--ink-soft); font-size: .88rem; }
.posts li.empty { padding: 16px; }
.board-post h1 { margin: .2em 0 .2em; }
.board-post .pbody { margin: 18px 0; line-height: 1.8; min-height: 3em; }
.board-post .btn-row form { display: inline; }
button.danger { color: var(--warn); border-color: var(--warn); }

/* ---------- 오른쪽 위 이름 메뉴(관리 기능) ---------- */
.who-menu { position: relative; }
.who-menu > summary { list-style: none; cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center; gap: 4px;
                      padding: 0 10px; border-radius: var(--r); color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.who-menu > summary::-webkit-details-marker { display: none; }
.who-menu > summary.current, .who-menu[open] > summary { background: var(--accent-soft); }
.who-pop { position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px; background: var(--card); border: 1px solid var(--line);
           border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; z-index: 30; display: flex; flex-direction: column; }
.who-pop a, .who-pop button.link { min-height: var(--tap); display: flex; align-items: center; padding: 0 12px; border-radius: 4px;
                                   color: var(--ink); text-decoration: none; font-weight: 500; width: 100%; text-align: left; }
.who-pop a:hover, .who-pop button.link:hover { background: var(--accent-soft); }
.who-pop a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--tab); }
.who-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.who-pop form { margin: 0; }
.who-pop button.link { justify-content: flex-start; }

@media (max-width: 720px) { .brand { font-size: 1.12rem; } .bar { padding-right: 8px; } .who-menu > summary { padding: 0 6px; } }

/* ---------- 가입 신청 ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errlist { margin: 0; padding-left: 1.2em; }
.signup-link { text-align: center; margin: 4px 0 0; }
.stack label small { font-weight: 400; color: var(--ink-soft); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: #fff;
         font-size: .78rem; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.6; }
.waiting h2 small { font-family: var(--sans); }
.wait-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.wait-row:first-of-type { border-top: 0; }
.wait-info { flex: 1 1 260px; }
.wait-row form { margin: 0; }

a.phone { white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0 6px; }

/* 가족 계정: 고치기·지우기 대신 표시만 */
.btn.static { cursor: default; }
.star.static { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); cursor: default; }
.memo-view { background: var(--accent-soft); border-radius: var(--r); padding: 10px 12px; }

/* ---------- 파일 옮기기(관리자) ---------- */
.file .pick { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); margin-right: -6px; cursor: pointer; }
.file .pick input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }
.file:has(.pick input:checked) { background: var(--accent-soft); }
.movebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
           margin-top: 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
           box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.movebar select { flex: 1 1 220px; }
.movebar button:disabled { opacity: .45; cursor: not-allowed; }
/* 체크칸이 앞에 와도 이름 칸이 늘어나게 */
.file > a:not(.btn) { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; color: var(--ink); }
.file.dir > a:not(.btn) { font-weight: 600; }

/* .stack 안의 체크칸 이름표는 한 줄로 */
.stack label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.pin-check small { color: var(--ink-soft); font-weight: 400; }

/* ---------- 계정 관리: 차단·삭제·추가 ---------- */
.tbl.users td.acts { white-space: nowrap; }
.tbl.users td.acts form { display: inline; }
.small-btn { min-height: 34px; padding: 0 10px; font-size: .88rem; }
.tbl.users tr.blocked td { color: var(--ink-soft); }
.state-blocked { color: var(--warn); font-weight: 700; }
.add-user h2 small { font-family: var(--sans); font-weight: 400; font-size: .85rem; color: var(--ink-soft); display: block; }

/* ---------- 홈: 최근 등록 ---------- */
:root { --d-docs: #5B6B2E; --d-nas: #8A6D1F; --d-board: #9E3D5B; }
.d-docs { --stripe: var(--d-docs); } .d-nas { --stripe: var(--d-nas); } .d-board { --stripe: var(--d-board); } .d-fav { --stripe: var(--tab); }
.recent { margin-bottom: 28px; }
.recent-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .recent-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .recent-cols { grid-template-columns: 1fr 1fr 1fr; } }
.recent-col h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; margin: 0 0 10px; padding-left: 10px; border-left: 6px solid var(--stripe); }
.recent-col h3 .small { font-family: var(--sans); font-size: .95rem; font-weight: 700; margin-left: 10px; }
.recent-col p.panel { margin: 0; }
.recent-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.recent-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 9px 12px; }
.recent-list li + li { border-top: 1px solid var(--line); }
.recent-list a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.recent-list .sub { grid-column: 1; color: var(--ink-soft); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list .at { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-soft); font-size: .8rem; white-space: nowrap; }

/* ---------- 위치(지도) ---------- */
.map-head { display: block; --stripe: var(--accent); }
.map-head h1 { margin-bottom: 0; }
.map-head p { margin-top: 2px; }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.map { height: calc(100vh - 230px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--r); z-index: 0; }
.map-side { max-height: calc(100vh - 230px); overflow-y: auto; }
.map-side h2 small { margin-left: 4px; }
.map-side label { display: grid; gap: 4px; }
@media (max-width: 860px) { .map-wrap { grid-template-columns: 1fr; } .map { height: 58vh; min-height: 320px; } .map-side { max-height: none; } }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; padding: 6px 0; }
.people li + li { border-top: 1px solid var(--line); }
.people button.link { min-height: var(--tap); padding: 0 4px; font-weight: 700; }
.people button.link:disabled { color: var(--ink-soft); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nb-list { margin: 0; padding-left: 1.4em; }
.nb-list li { padding: 4px 0; }
.nb-list small { display: block; }
.map-settings { max-width: 640px; margin: 0 auto; }
.map-settings fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px 12px; }
.viewer-list[hidden] { display: none; }
.viewer-list { display: flex; flex-wrap: wrap; gap: 0 18px; padding-left: 26px; }
button.danger, .btn.danger { color: var(--warn); border-color: var(--warn); }
.leaflet-container { font: inherit; }
.leaflet-tooltip { font-weight: 700; }
.people .gmap { flex-basis: 100%; padding-left: 18px; }

/* ---------- 홈: PC = A형, 휴대폰(720px 이하) = C형 ---------- */
.app-tiles, .feed { display: none; }
@media (max-width: 720px) {
  .page-home .drawers, .page-home .recent, .page-home .cats { display: none; }
  .page-home .finder { padding: 12px; margin-bottom: 16px; }
  .page-home .finder h1 { display: none; }
  .app-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-bottom: 22px; }
  .tile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
  .tile-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--card);
              border: 1px solid var(--line); color: var(--stripe, var(--accent)); }
  .tile:active .tile-ico { background: var(--accent-soft); }
  .tile:focus-visible { outline: none; } .tile:focus-visible .tile-ico { outline: 3px solid var(--tab); outline-offset: 2px; }
  .tile-label { font-size: .85rem; font-weight: 600; }
  .tile-n { font-size: .75rem; color: var(--ink-soft); line-height: 1; }
  .t-bid { --stripe: var(--d-bid); } .t-job { --stripe: var(--d-job); } .t-travel { --stripe: var(--d-travel); }
  .t-docs { --stripe: var(--d-docs); } .t-nas { --stripe: var(--d-nas); } .t-manual { --stripe: var(--ink-soft); }
  .t-board { --stripe: var(--d-board); } .t-chat { --stripe: var(--d-job); } .t-fav { --stripe: #A07A1C; } .t-map { --stripe: var(--warn); }
  .feed { display: block; }
  .feed h2 { font-size: 1.1rem; margin: 0 0 8px; }
  .feed-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  .feed-list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: var(--tap); }
  .feed-list li + li { border-top: 1px solid var(--line); }
  .feed-list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); text-decoration: none; }
  .feed-menu { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--stripe, var(--ink-soft)); margin-right: 6px; }
  .feed-list time { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
}

/* ---------- 가족 대화 ---------- */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 170px); min-height: 420px; max-width: 820px; margin: 0 auto; }
.chat-head { display: flex; align-items: baseline; gap: 10px; }
.chat-head h1 { margin: 0 0 8px; }
.chat-log { flex: 1; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.chat-log #chat-more { align-self: center; }
.chat-empty { text-align: center; margin: auto; }
.chat-log .day { align-self: center; font-size: .78rem; color: var(--ink-soft); background: var(--paper); border-radius: 999px; padding: 2px 10px; margin: 8px 0 2px; }
.msg { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; column-gap: 6px; max-width: 82%; }
.msg .who { grid-column: 1 / -1; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin: 2px 0 1px 4px; }
.msg .bubble { background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg time { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.msg .del { grid-column: 1 / -1; justify-self: start; font-size: .75rem; color: var(--warn); min-height: 0; padding: 0 4px; }
.msg.mine { align-self: flex-end; justify-content: end; }
.msg.mine .bubble { grid-column: 2; grid-row: 1; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-radius: 14px 14px 4px 14px; }
.msg.mine time { grid-column: 1; grid-row: 1; }
.msg.mine .del { justify-self: end; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: none; min-height: var(--tap); max-height: 140px; line-height: 1.45; }
.chat-form button { min-height: var(--tap); white-space: nowrap; }
@media (max-width: 720px) { .chat { height: calc(100dvh - 150px); } .msg { max-width: 90%; } .page-chat footer { display: none; } }
.chat-log #chat-more[hidden], .chat-empty[hidden] { display: none; }
/* 대화 첨부 */
.chat.over .chat-log { outline: 3px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.chat-attach { min-height: var(--tap); min-width: var(--tap); padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.15rem; }
.chat-attach:focus-within { outline: 3px solid var(--tab); outline-offset: 2px; }
.chat-up { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .85rem; }
.chat-up[hidden] { display: none; }
.chat-up progress { flex: 0 0 160px; height: 10px; accent-color: var(--accent); }
.bubble.has-file { padding: 6px; }
.att img { display: block; max-width: min(260px, 60vw); max-height: 260px; border-radius: 10px; }
.att video { display: block; max-width: min(300px, 70vw); max-height: 300px; border-radius: 10px; background: #000; }
.att-meta { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; flex-wrap: wrap; }
.att-file .att-meta { padding: 6px 6px; }
.att-name { font-weight: 600; overflow-wrap: anywhere; }
.att-meta small { opacity: .8; }
.att-dl { font-weight: 600; color: inherit; }
.msg.mine .att-dl, .msg.mine .att-name { color: var(--accent-ink); }
.msg.mine .att-meta small { color: var(--accent-ink); opacity: .9; }
/* 접속 중 표시 */
.online-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--ink-soft); text-decoration: none; margin-right: 10px; white-space: nowrap; }
.online-badge b { color: var(--ink); }
.online-badge .dot, .chat-people .dot { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; display: inline-block; }
.chat-people { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-people li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .85rem; }
.chat-people li small { color: var(--ink-soft); font-size: .75rem; }
.chat-people li.off .dot { background: #B8C2BD; }
.chat-people li.off .nm { color: var(--ink-soft); }
.chat-people li.on { border-color: #2E9E5B; }
@media (max-width: 720px) { .online-badge { margin-right: 6px; font-size: .8rem; } }
@media (max-width: 720px) {
  .brand { white-space: nowrap; font-size: 1.05rem; }
  .who { gap: 2px; }
  .who summary, .who .link { white-space: nowrap; }
  .online-badge .ol-word { display: none; }
  .online-badge { margin-right: 4px; }
}
@media (max-width: 400px) { .brand { font-size: .95rem; } .who { font-size: .85rem; } }

/* ---------- 월별일정 ---------- */
:root { --k-family: #9E3D5B; }
.k-family { --k: var(--k-family); } .k-bid { --k: var(--d-bid); } .k-job { --k: var(--d-job); } .k-travel { --k: var(--d-travel); }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cal-head h1 { margin: 0; min-width: 7.5em; text-align: center; }
.cal-head .btn { min-width: var(--tap); font-size: 1.3rem; line-height: 1; padding: 6px 12px; }
.cal-tools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .85rem; cursor: pointer; min-height: 36px; }
.cal-chip input { margin: 0; accent-color: var(--k); }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--k); display: inline-block; flex: none; }
.cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-row + .cal-row { border-top: 1px solid var(--line); }
.cal-dow div { padding: 6px; text-align: center; font-size: .82rem; font-weight: 600; color: var(--ink-soft); background: var(--paper); }
.cal-dow .sun, .cal-day.sun .cal-dnum > :first-child { color: #B42318; }
.cal-dow .sat, .cal-day.sat .cal-dnum > :first-child { color: #2F5D9E; }
.cal-day { min-height: 104px; padding: 4px 5px 6px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day:first-child { border-left: 0; }
.cal-day.other { background: var(--paper); }
.cal-day.other .cal-dnum { opacity: .45; }
.cal-dnum { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; font-weight: 600; }
.cal-dnum a, .cal-dnum span { padding: 1px 6px; border-radius: 999px; text-decoration: none; color: var(--ink); }
.cal-day.today .cal-dnum > :first-child { background: var(--accent); color: var(--accent-ink) !important; }
.cal-plus { border: 0; background: none; color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 2px 6px; min-height: 0; opacity: 0; cursor: pointer; }
.cal-day:hover .cal-plus, .cal-plus:focus-visible { opacity: 1; }
.ev { display: block; font-size: .75rem; line-height: 1.35; padding: 1px 5px; border-radius: 4px; border-left: 3px solid var(--k); background: color-mix(in srgb, var(--k) 10%, transparent); color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ev b { font-weight: 600; }
.ev-more { font-size: .72rem; color: var(--ink-soft); padding-left: 4px; }
.cal .dots { display: none; }
.agenda { margin-top: 22px; }
.ag-day { scroll-margin-top: 120px; }
.ag-day h3 { font-size: 1rem; margin: 14px 0 6px; }
.ag-day.today h3 { color: var(--accent); }
.badge-today { font-size: .75rem; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.ag-day ul { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.ag-day li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; }
.ag-day li + li { border-top: 1px solid var(--line); }
.ag-day li .sw { margin-top: 6px; }
.ag-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
[data-kind][hidden] { display: none !important; }
@media (max-width: 720px) {
  .cal-day { min-height: 56px; padding: 3px 2px; align-items: center; }
  .cal-day .ev, .cal-day .ev-more, .cal-plus { display: none; }
  .cal .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 30px; }
  .cal .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); display: block; }
  .cal-dnum { justify-content: center; }
  .cal-head h1 { font-size: 1.3rem; min-width: 6.5em; }
  .cal-chip { font-size: .8rem; padding: 3px 8px; }
  .cal-tools { flex-direction: column; align-items: stretch; }
}
@media (max-width: 720px) { .app-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t-cal { --stripe: var(--k-family); } }
/* 월별일정: 날짜별 목록은 누른 날만 */
.ag-day { display: none; }
.ag-day.open { display: block; }
.ag-day h3 { display: flex; align-items: center; gap: 6px; }
.ag-close { margin-left: auto; font-size: .85rem; font-weight: 500; }
.agenda { margin-top: 12px; }
/* 월별일정: 일정 넣기 창(달력 위에 뜸) */
.cal-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; width: min(460px, calc(100vw - 32px)); background: var(--card); color: var(--ink); }
.cal-dialog::backdrop { background: rgba(20, 30, 28, .45); }
.cal-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.cal-dialog-head h2 { margin: 0; font-size: 1.2rem; }
.cal-dialog-x { font-size: 1.1rem; min-width: var(--tap); min-height: var(--tap); }
.cal-dialog label { display: grid; gap: 4px; }
.cal-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 720px) { .cal-add-btn { width: 100%; } .cal-dialog { margin: auto auto 0; border-radius: 16px 16px 0 0; width: 100vw; max-width: 100vw; } .cal-dialog .cols2 { grid-template-columns: 1fr; } }
/* 월별일정: 날씨(일정 넣기 앞) */
.cal-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.wx { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); min-height: var(--tap); }
.wx-now { display: inline-flex; align-items: center; gap: 4px; }
.wx-ico { font-size: 1.5rem; line-height: 1; }
.wx-now b { font-size: 1.25rem; font-weight: 700; }
.wx-txt { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.3; }
.wx-txt small, .wx-next small { color: var(--ink-soft); font-size: .75rem; }
.wx-next { display: flex; flex-direction: column; align-items: center; line-height: 1.2; padding-left: 10px; border-left: 1px solid var(--line); }
@media (max-width: 720px) { .cal-right { flex-direction: column; align-items: stretch; } .wx { justify-content: space-between; } }
/* 사이트 이름: 궁서체(윈도의 궁서, 없는 휴대폰 등은 비슷한 붓글씨 명조 Song Myung), 조금 크게 */
.brand { font-family: "Gungsuh", "궁서", "궁서체", "GungSeo", "Song Myung", var(--serif); font-weight: 400; font-size: 1.7rem; letter-spacing: -.01em; }
@media (max-width: 720px) { .brand { font-size: 1.22rem; letter-spacing: -.05em; } }
@media (max-width: 400px) { .brand { font-size: 1.08rem; } }
/* 날씨 칸 크게(사용자 지시) */
.wx { gap: 14px; padding: 8px 16px; }
.wx-ico { font-size: 2.2rem; }
.wx-now b { font-size: 1.75rem; }
.wx-txt { font-size: 1rem; }
.wx-txt small, .wx-next small { font-size: .85rem; }
.wx-next { padding-left: 14px; }
.wx-next > span[aria-hidden] { font-size: 1.6rem; line-height: 1.1; }
/* 날씨 칸 한 번 더 크게(사용자 지시) */
.wx { gap: 16px; padding: 10px 18px; }
.wx-ico { font-size: 2.8rem; }
.wx-now b { font-size: 2.2rem; }
.wx-txt { font-size: 1.15rem; }
.wx-txt small, .wx-next small { font-size: .95rem; }
.wx-next > span[aria-hidden] { font-size: 2rem; }
.wx-now, .wx-now b, .wx-txt small, .wx-next small { white-space: nowrap; }
.wx-txt { min-width: 0; }
@media (max-width: 720px) {
  .wx { gap: 10px; padding: 8px 12px; }
  .wx-ico { font-size: 2.4rem; } .wx-now b { font-size: 1.9rem; }
  .wx-txt { flex: 1; font-size: 1.05rem; } .wx-txt small, .wx-next small { font-size: .85rem; }
  .wx-next { padding-left: 10px; }
}

/* ---------- 통합 검색 ---------- */
.ext-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ext { min-height: var(--tap); padding: 0 16px; border-radius: var(--r); font-weight: 700; border: 1px solid transparent; cursor: pointer; }
.ext.naver { background: #03C75A; color: #fff; }
.ext.google { background: #fff; color: #1F1F1F; border-color: var(--line); }
.ext-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ext-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: .88rem; text-decoration: none; color: var(--ink); min-height: 36px; }
.ext-link.naver { border-color: #03C75A; }
.ext-link.google { border-color: #4285F4; }
.ures { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .ures { grid-template-columns: 1fr 1fr; } }
.ures-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.ures-group h2 { font-size: 1.05rem; margin: 0 0 6px; }
.ures-group h2 small { font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.ures-group h2 .small { margin-left: 8px; font-weight: 500; }
.ures-group ul { list-style: none; margin: 0; padding: 0; }
.ures-group li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--line); }
.ures-group li:first-child { border-top: 0; }
.ures-group li a { font-weight: 600; overflow-wrap: anywhere; }
a.ext { display: inline-flex; align-items: center; text-decoration: none; }
a.ext.naver:hover { background: #02B350; } a.ext.google:hover { background: var(--paper); }

/* ---------- 검색 메뉴: 네이버·구글로 가기 ---------- */
.go-search { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin: 24px auto; }
.go { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; border-radius: 14px; text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.go-mark { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; font-family: Arial, sans-serif; }
.go-name { font-size: 1.3rem; font-weight: 700; }
.go small { color: var(--ink-soft); }
.go.naver .go-mark { background: #03C75A; color: #fff; }
.go.google .go-mark { background: #fff; color: #4285F4; border: 1px solid var(--line); }
.go.naver:hover { border-color: #03C75A; } .go.google:hover { border-color: #4285F4; }
.go:focus-visible { outline: 3px solid var(--tab); outline-offset: 2px; }
.go-search { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; }
.go.perplexity .go-mark { background: #1F3A3D; color: #20B8CD; }
.go.perplexity:hover { border-color: #20B8CD; }
@media (max-width: 720px) { .go-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .go.perplexity { grid-column: 1 / -1; } }
.go-search { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
.go.youtube .go-mark { background: #FF0000; color: #fff; font-size: 1.7rem; }
.go.youtube:hover { border-color: #FF0000; }
@media (max-width: 720px) { .go-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .go.perplexity { grid-column: auto; } }
.go-search { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; }
.go.gemini .go-mark { background: #EEF3FE; color: #4E7CF6; border: 1px solid var(--line); }
.go.gemini:hover { border-color: #4E7CF6; }
.go.chatgpt .go-mark { background: #0D0D0D; color: #fff; }
.go.chatgpt:hover { border-color: #0D0D0D; }
@media (max-width: 720px) { .go-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 홈 서랍별 자료: PC는 7개 한 줄(사용자 지시) */
@media (min-width: 1000px) {
  .cats .index-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .cats .index-card { padding: 10px 10px 12px; min-width: 0; }
  .cats .index-card .num { font-size: 1.7rem; }
  .cats .index-card .sub { font-size: .75rem; overflow-wrap: anywhere; }
}

/* 홈 큰 제목(최근 등록·서랍별 자료) — 사용자 지시: 크게·진하게 */
.recent > h2, .cats > h2 { font-size: 1.75rem; font-weight: 800; color: var(--ink); margin-bottom: .55em; }

/* ---------- 어두운 화면(2026-10-04 사용자 지시: 바탕 6번 짙은 밤색) ----------
   위 :root 다크 토큰을 항상 쓰고(@media all), 따로 색을 박은 곳만 여기서 밝게 맞춘다.
   예전 밝은 화면으로 되돌리려면 @media all 4곳을 @media (prefers-color-scheme: dark)로 바꾸고 이 묶음을 지운다. */
:root { --d-docs: #A9BC6E; --d-nas: #D9B45A; --d-board: #E08AA6; --k-family: #E08AA6; }
.t-fav { --stripe: #D9B45A; }
.cal-dow .sun, .cal-day.sun .cal-dnum > :first-child { color: #FF8A7A; }
.cal-dow .sat, .cal-day.sat .cal-dnum > :first-child { color: #8FB4F0; }
.star { color: #5E6E6A; }
.go.chatgpt .go-mark { border: 1px solid var(--line); }
.go.chatgpt:hover { border-color: #AEBBB7; }
.who-menu .menu, .menu { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* ---------- 가족 메신저 새 메시지 알림(2026-10-04 사용자 지시) ---------- */
.chat-alert { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; padding: 2px 10px; border-radius: 999px;
              background: var(--warn); color: #1E2629; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
              animation: chat-pulse 1.6s ease-in-out 3; }
.chat-alert[hidden], .chat-badge[hidden], .chat-toast[hidden] { display: none; }
.chat-alert b { font-weight: 800; }
@keyframes chat-pulse { 50% { transform: scale(1.12); } }
.drawer .chat-badge { margin-left: 4px; font-size: .75rem; vertical-align: 1px; }
.tile { position: relative; }
.tile-badge { position: absolute; top: 2px; right: calc(50% - 30px); font-size: .75rem; line-height: 20px; }
.chat-toast { position: fixed; z-index: 60; right: 16px; bottom: 16px; max-width: min(420px, calc(100vw - 32px));
              display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-radius: 10px;
              background: var(--card); color: var(--ink); border: 1px solid var(--accent); text-decoration: none;
              box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ct-ico { font-size: 1.5rem; }
.ct-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ct-text { color: var(--ink-soft); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-go { color: var(--accent); font-weight: 700; white-space: nowrap; }
.ct-x { background: none; border: 0; color: var(--ink-soft); font-size: 1rem; min-width: 36px; min-height: 36px; cursor: pointer; }
@media (max-width: 720px) {
  .chat-alert { margin-right: 4px; padding: 2px 8px; font-size: .8rem; }
  .chat-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 720px) { .chat-alert .ol-word { display: none; } }
@media (max-width: 720px) {
  .chat-alert { padding: 1px 7px; gap: 2px; margin-right: 2px; }
  .who:has(.chat-alert:not([hidden])) .online-badge { display: none; }  /* 새 메시지가 있으면 좁은 위 막대에서 접속 수 대신 알림 */
}

/* ---------- 휴대폰: 가족자료공유 폴더 화면(2026-10-05 사용자 지적) ---------- */
@media (max-width: 720px) {
  /* 새 폴더 줄이 올리기 상자 밖으로 넘치던 것: 입력칸이 기본 최소 너비 아래로 안 줄어서 */
  .upload { padding: 10px 12px; }
  .up-mkdir { display: flex; width: 100%; min-width: 0; }
  .up-mkdir input { flex: 1 1 0; width: 0; min-width: 0; }
  /* 긴 파일 이름은 줄을 꽉 채워 접고(마침표 앞에서 어색하게 끊기지 않게) 조금 작게 */
  .fname { word-break: break-all; font-size: .95rem; line-height: 1.35; }
  .file { gap: 8px; padding: 4px 8px 4px 4px; }
  .file .ico { width: 24px; font-size: 1.1rem; }
  .btn.dl { padding: 0 10px; }
  /* 아래 선택 막대가 휴대폰 버튼 줄 위로(브라우저의 안전 영역) */
  .movebar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  /* 선택 막대: 아무것도 안 골랐으면 목록 끝에 그대로(목록을 가리지 않게), 고르면 아래에 붙음. 두 줄로 */
  .movebar { position: static; gap: 8px; }
  .movebar.picking { position: sticky; }
  .movebar .check { order: 0; } #pickcount { order: 1; } #delbtn { order: 2; margin-left: auto; }
  .movebar select { order: 3; flex: 1 1 0; min-width: 0; } #movebtn { order: 4; }
}
@media (max-width: 720px) {
  .movebar select { flex: 1 1 200px; }  /* 첫 줄(전체 선택·개수·삭제)에 끼지 않고 둘째 줄에 '옮기기'와 함께 */
  .file { gap: 6px; } .file > a:first-child { gap: 6px; } .file .ico { width: 20px; font-size: 1rem; }
  .fname { font-size: .9rem; }
}
@media (max-width: 380px) {  /* 좁은 휴대폰(360px 등): 파일 그림은 빼고(폴더 📁는 남김) 이름 한 줄에 */
  .file:not(.dir) .ico { display: none; }
  .fname { font-size: .86rem; }
}

/* ---------- 휴대폰 화면 끝 영역(상태 표시줄·버튼 줄)만큼 띄우기(2026-10-05 사용자 지적) ----------
   홈페이지 앱(안드로이드 15, 화면 끝까지 그리기)이나 노치 휴대폰에서 위 글자가 시계·배터리와 겹쳤다.
   viewport-fit=cover + env(safe-area-inset-*): 가려지는 영역이 없으면 0이라 PC·일반 브라우저·새 앱(1.0.1, 앱이 직접 띄움)에선 변화 없음. */
.top { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) { .chat-toast { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
body:not(:has(header.top)) { padding-top: env(safe-area-inset-top, 0px); }  /* 위 막대가 없는 화면(로그인·가입) */
@media (max-width: 720px) {
  .movebar { padding-bottom: 8px; }  /* 목록 끝에 있을 땐 빈칸 없이 */
  .movebar.picking { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }  /* 아래에 붙을 때만 버튼 줄만큼 */
}

/* 항공권 아래 국내·국외(2026-10-05 사용자 지시): 여행 탭 바로 밑 한 단계 작은 탭 */
.area-tabs { margin: -4px 0 12px; padding-left: 14px; border-left: 3px solid var(--stripe, var(--d-flight)); }
.area-tabs a { min-height: 36px; padding: 0 12px; font-size: .92rem; }
.area-tabs a::before { display: none; }
.area-tabs small { color: inherit; opacity: .75; font-size: .8rem; }

/* ---------- 보기 창: 휴대폰은 화면 전체 + 상태 표시줄·버튼 줄 피하기, 사진 받는 동안 안내(2026-10-05 사용자 지적) ---------- */
.vw-body.loading::before { content: "불러오는 중…"; position: absolute; color: #A9B6B1; font-size: .95rem; }
@media (max-width: 720px) {
  dialog.viewer { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; inset: 0; }
  .vw-bar { padding: calc(6px + env(safe-area-inset-top, 0px)) calc(6px + env(safe-area-inset-right, 0px)) 6px calc(12px + env(safe-area-inset-left, 0px)); gap: 6px; }
  .vw-body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .vw-bar .btn.ghost { min-height: 36px; padding: 0 10px; font-size: .9rem; }
  .vw-pos { font-size: .8rem; }
}
.vw-body img.vw-ph { width: 100%; height: 100%; object-fit: contain; filter: blur(6px); transform: scale(1.01); }  /* 선명한 사진 오기 전 작은 사진 */
/* 날씨 그림 낮·밤 표시(2026-10-05 사용자 지시) */
.wx-ico { position: relative; display: inline-block; }
.wx-dn { position: absolute; right: -6px; bottom: -2px; font-size: .62rem; line-height: 1; font-weight: 800; padding: 2px 4px; border-radius: 999px; font-family: var(--sans); }
.wx-dn.day { background: #F2C14E; color: #3A2C00; }
.wx-dn.night { background: #3B4A7A; color: #E6ECFF; }
/* 맛집 국내 → 도시별: 국내·국외 줄 밑에 한 칸 더 들여서(2026-10-05 사용자 지시) */
.city-tabs { margin: -6px 0 12px 18px; }
.city-tabs a { min-height: 32px; padding: 0 10px; font-size: .86rem; }
/* 가족위치GPS 주변 맛집·숙소 핀(2026-10-05 사용자 지시: 목록 대신 지도) */
.place-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 16px; line-height: 1;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.place-pin span { transform: rotate(45deg); }  /* 핀은 기울였지만 그림은 똑바로 */
.place-pin.restaurant { background: #E39A64; } .place-pin.stay { background: #9B6FB8; }
.place-pin.focus { width: 34px; height: 34px; font-size: 18px; background: #E5322D; border-color: #fff; box-shadow: 0 0 0 4px rgba(229,50,45,.35), 0 3px 8px rgba(0,0,0,.5); }  /* '위치GPS'로 연 가게: 붉은 핀 */

/* ---------- 상세 화면 가족 평점(2026-10-05 사용자 지시) ---------- */
.rating h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.stars { letter-spacing: 1px; white-space: nowrap; }
.stars span { color: #4A5A5E; } .stars span.on { color: #F2C14E; }
.rating-avg { font-family: var(--sans); font-size: 1.05rem; } .rating-avg b { margin-left: 4px; }
.star-pick { border: 0; padding: 0; margin: 0; }
.star-pick legend { padding: 0; margin-bottom: 4px; font-weight: 700; }
.star-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; }  /* 별 1→5 왼쪽부터 */
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { font-size: 2rem; line-height: 1; color: #4A5A5E; cursor: pointer; padding: 2px; min-width: 40px; text-align: center; }
.star-pick input:checked ~ label, .star-pick label:hover, .star-pick label:hover ~ label { color: #F2C14E; }
.star-pick input:focus-visible + label { outline: 3px solid var(--tab); border-radius: 4px; }
.review { border-top: 1px solid var(--line); padding: 12px 0 8px; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.replies { margin: 8px 0 0 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.reply { padding: 4px 0; font-size: .95rem; }
.reply-form { display: flex; gap: 6px; margin-top: 6px; }
.reply-form input { flex: 1; min-width: 0; min-height: 38px; }
.reply-form button { min-height: 38px; padding: 0 14px; white-space: nowrap; }
.rate-form textarea { min-height: var(--tap); line-height: 1.45; }  /* 평가 글 칸 1줄(2026-10-05 사용자 지시: 2칸 줄임) — 길게 쓰면 모서리를 끌어 늘림 */
/* 이름이 "주형(동만)이 가족 홈페이지"로 길어져(2026-10-05) 휴대폰 위 막대에서 로그아웃이 밀려남 → 좁은 화면은 이름 글자를 조금 줄이고 자간을 좁힌다 */
@media (max-width: 480px) { .brand { font-size: .95rem; letter-spacing: -.03em; } .top .bar { gap: 6px; } .who { gap: 6px; } }
@media (max-width: 380px) { .brand { font-size: .86rem; letter-spacing: -.06em; } .who { gap: 4px; } .online-badge, .chat-alert { margin-right: 0; } .top .bar { padding-left: 12px; padding-right: 12px; } }

/* ---------- 보기 창 문서 확대(2026-10-05 사용자 지적: 휴대폰에서 확대 안 됨) — 두 손가락·두 번 누르기·+/− ---------- */
.vw-zoom-btns { display: none; align-items: center; gap: 2px; }
dialog.viewer.zoomable .vw-zoom-btns { display: inline-flex; }
.vw-z { background: transparent; border: 1px solid #3B4A44; color: #CFE7DD; min-height: 36px; min-width: 36px; padding: 0 8px; border-radius: 6px; font-size: 1.1rem; }
.vw-zv { font-size: .8rem; min-width: 52px; font-variant-numeric: tabular-nums; }
.vw-doc { touch-action: pan-x pan-y; }  /* 두 손가락 확대는 화면이 직접 처리 */
@media (max-width: 720px) { .vw-zv { min-width: 46px; padding: 0 4px; } .vw-z { min-width: 34px; } }
dialog.viewer.zoomed .vw-nav { display: none; }

/* ---------- 가족 메신저 이모티콘(2026-10-05 사용자 지시) ---------- */
.chat-emoji { min-height: var(--tap); min-width: var(--tap); padding: 0 8px; font-size: 1.3rem; line-height: 1; background: transparent; }
.chat-emoji[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.emoji-pane { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.emoji-pane[hidden] { display: none; }
.emoji-tabs { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.emoji-tabs button { background: transparent; border: 0; border-radius: 8px; font-size: 1.25rem; min-height: 40px; min-width: 44px; padding: 0 6px; opacity: .55; }
.emoji-tabs button[aria-selected="true"] { opacity: 1; background: var(--accent-soft); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 210px; overflow-y: auto; padding: 6px; }
.emoji-grid button { background: transparent; border: 0; border-radius: 8px; font-size: 1.55rem; min-height: 44px; padding: 0; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--accent-soft); }
.msg .bubble.emoji-only { background: transparent !important; border-color: transparent !important; font-size: 2.4rem; line-height: 1.15; padding: 0 2px; }
@media (max-width: 720px) { .emoji-grid { max-height: 180px; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } .chat-form { gap: 6px; } .chat-emoji { min-width: 40px; padding: 0 4px; } }

/* 검색: Google Veo 3.1(Google Flow) 단추(2026-10-05 사용자 지시) — 7번째라 마지막 줄 전체 폭 */
.go.flow { grid-column: 1 / -1; }
.go.flow .go-mark { background: linear-gradient(135deg, #4285F4, #9B72CB 55%, #D96570); color: #fff; font-size: 2rem; }
.go.flow:hover { border-color: #9B72CB; }
.go-sub { font-weight: 500; font-size: .85em; color: var(--ink-soft); white-space: nowrap; }
/* 검색: Seedance 2.0(Dreamina) 추가로 단추 8개 → PC 4칸×2줄·휴대폰 2칸×4줄(2026-10-05) */
.go.flow { grid-column: auto; }
.go-search { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
@media (max-width: 720px) { .go-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.go.seedance .go-mark { background: linear-gradient(135deg, #1B1F3B, #3A5BFF 60%, #00C2FF); color: #fff; font-size: 2rem; }
.go.seedance:hover { border-color: #3A5BFF; }
.go .go-name { text-align: center; }