/* 우리 가족 — 제목 고운바탕, 본문 IBM Plex Sans KR, 따뜻한 종이색, 청록 강조 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&display=swap');

:root{
  --paper:#F8F5EF; --paper2:#F2EEE5; --surface:#FFFDFA; --raised:#FFFFFF;
  --line:#EBE4D6; --line2:#DED5C3;
  --ink:#1F1C16; --ink2:#6B6355; --ink3:#9C947F;
  --teal:#12756A; --teal2:#2E9B8C; --teal-soft:#E6F1EE; --teal-line:#BDDCD6;
  --red:#B23A2E; --red-soft:#FBEEEC; --red-line:#E9C7C1;
  --orange:#BE7415; --orange-soft:#FBF2E4; --orange-line:#EBD8B7;
  --green:#357A4C; --green-soft:#EDF4EF; --green-line:#C6DDCD;
  --gold:#B8912F;
  --r:16px; --r-lg:22px;
  --sh:0 1px 2px rgba(31,28,22,.04), 0 4px 14px rgba(31,28,22,.05);
  --sh-lg:0 2px 6px rgba(31,28,22,.05), 0 16px 40px rgba(31,28,22,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14130F; --paper2:#1A1814; --surface:#1E1C17; --raised:#242119;
    --line:#302C24; --line2:#3C372D;
    --ink:#F2EDE2; --ink2:#B2AA99; --ink3:#7E7768;
    --teal:#57C9B5; --teal2:#7FDCCB; --teal-soft:#16302C; --teal-line:#255049;
    --red:#E8887A; --red-soft:#33201D; --red-line:#573531;
    --orange:#E0A951; --orange-soft:#332818; --orange-line:#57432A;
    --green:#79C494; --green-soft:#1B2E22; --green-line:#2F4C3A;
    --gold:#D8B45E;
    --sh:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --sh-lg:0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#14130F; --paper2:#1A1814; --surface:#1E1C17; --raised:#242119;
  --line:#302C24; --line2:#3C372D;
  --ink:#F2EDE2; --ink2:#B2AA99; --ink3:#7E7768;
  --teal:#57C9B5; --teal2:#7FDCCB; --teal-soft:#16302C; --teal-line:#255049;
  --red:#E8887A; --red-soft:#33201D; --red-line:#573531;
  --orange:#E0A951; --orange-soft:#332818; --orange-line:#57432A;
  --green:#79C494; --green-soft:#1B2E22; --green-line:#2F4C3A;
  --gold:#D8B45E;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --sh-lg:0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:15px; line-height:1.68; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Gowun Batang',serif; font-weight:700; letter-spacing:-.02em; margin:0; line-height:1.35}
a{color:var(--teal); text-underline-offset:3px}
::selection{background:var(--teal-soft); color:var(--ink)}

/* ── 로그인 ───────────────────────────────────────────── */
body.login{
  display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:24px;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--teal-soft) 0%, transparent 62%),
    var(--paper);
}
body.login .card{
  background:var(--surface); border:1px solid var(--line); border-radius:26px;
  padding:40px 30px 32px; width:100%; max-width:350px; text-align:center; box-shadow:var(--sh-lg);
}
body.login .mark{font-size:40px; line-height:1}
body.login h1{font-size:29px; margin:12px 0 6px}
body.login .sub{color:var(--ink2); margin:0 0 22px; font-size:13.5px}
body.login .err{color:var(--red); font-size:13px; margin:0 0 14px}
body.login input{
  width:100%; padding:15px 14px; border:1px solid var(--line2); border-radius:14px;
  background:var(--paper2); color:var(--ink); font:inherit; font-size:19px;
  text-align:center; letter-spacing:.34em; text-indent:.34em;
  font-family:'Gowun Batang',serif; transition:border-color .15s, box-shadow .15s;
}
body.login input::placeholder{font-size:14px; letter-spacing:.1em; font-family:inherit}
body.login input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-soft)}
body.login button{
  width:100%; margin-top:12px; padding:15px; border:0; border-radius:14px;
  background:linear-gradient(180deg, var(--teal2), var(--teal));
  color:#fff; font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  box-shadow:0 6px 18px -8px var(--teal); transition:transform .1s, filter .15s;
}
body.login button:active{transform:translateY(1px)}

/* ── 뼈대 ─────────────────────────────────────────────── */
header.top{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.top .row{max-width:940px; margin:0 auto; padding:14px 18px 2px; display:flex; align-items:center; gap:10px}
.top h1{font-size:20px}
.top .today{margin-left:auto; color:var(--ink3); font-size:11.5px; text-align:right; line-height:1.4}
.themebtn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink2);
  width:32px; height:32px; border-radius:11px; cursor:pointer; font-size:14px; line-height:1;
  display:grid; place-items:center; flex:none; transition:background .15s, border-color .15s;
}
.themebtn:hover{border-color:var(--line2)}
nav{max-width:940px; margin:0 auto; padding:10px 12px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{
  border:1px solid transparent; background:none; font:inherit; font-size:13px; color:var(--ink2);
  padding:7px 11px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s;
}
nav button:hover{color:var(--ink)}
nav button[aria-selected="true"]{
  color:var(--teal); font-weight:600; background:var(--teal-soft); border-color:var(--teal-line);
}
main{max-width:940px; margin:0 auto; padding:20px 18px 72px}
section[hidden]{display:none}
section{animation:fade .28s ease both}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ── 카드 ─────────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--sh);
}
.card + .card{margin-top:14px}
.card h2{font-size:18px}
.card h3{font-size:14.5px; margin:18px 0 7px; color:var(--ink)}
.card > h2 + .tiny{margin-top:2px}
.muted{color:var(--ink2)}
.small{font-size:13.5px}
.tiny{font-size:11.5px; color:var(--ink3); letter-spacing:0}
.sectionhead{margin:26px 4px 12px; display:flex; align-items:baseline; gap:10px}
.sectionhead h2{font-size:16px}
.sectionhead .tiny{margin-left:auto}
ul{margin:6px 0; padding-left:18px}
li{margin:2px 0}

/* ── 히어로 ───────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--teal-line); box-shadow:var(--sh-lg);
  background:
    radial-gradient(600px 260px at 88% -30%, var(--teal-soft) 0%, transparent 70%),
    linear-gradient(165deg, var(--raised) 0%, var(--surface) 55%, var(--paper2) 100%);
  padding:26px 24px; margin-bottom:14px;
}
.hero .eyebrow{font-size:11.5px; color:var(--ink3); letter-spacing:.06em}
.hero .big{
  font-family:'Gowun Batang',serif; font-weight:700; font-size:clamp(38px,10vw,54px);
  line-height:1.05; margin:6px 0 2px; color:var(--ink);
}
.hero .big em{font-style:normal; color:var(--teal)}
.hero .big small{font-size:.36em; font-weight:400; color:var(--ink2); margin-left:4px}
.hero .sub{color:var(--ink2); font-size:13.5px}
.hero .strip{display:flex; gap:20px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap}
.hero .strip div{min-width:78px}
.hero .strip .k{font-size:11px; color:var(--ink3)}
.hero .strip .v{font-family:'Gowun Batang',serif; font-weight:700; font-size:19px; line-height:1.3}
.hero .strip .v small{font-size:12px; font-weight:400; color:var(--ink2)}

/* ── 타일 ─────────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:11px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 16px 15px; box-shadow:var(--sh); position:relative; overflow:hidden;
}
.tile:before{
  content:''; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg, var(--teal2), transparent);
  opacity:.75;
}
.tile .k{font-size:11.5px; color:var(--ink3)}
.tile .v{font-family:'Gowun Batang',serif; font-size:27px; font-weight:700; line-height:1.2; margin-top:3px; letter-spacing:-.02em}
.tile .v small{font-size:13px; font-weight:400; color:var(--ink2); letter-spacing:0}
.tile .n{font-size:11.5px; color:var(--ink2); margin-top:4px; line-height:1.5}

/* ── 배지 ─────────────────────────────────────────────── */
.badge{
  display:inline-block; padding:1.5px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; border:1px solid; letter-spacing:0; white-space:nowrap;
}
.b-red{color:var(--red); border-color:var(--red-line); background:var(--red-soft)}
.b-orange{color:var(--orange); border-color:var(--orange-line); background:var(--orange-soft)}
.b-green{color:var(--green); border-color:var(--green-line); background:var(--green-soft)}
.b-teal{color:var(--teal); border-color:var(--teal-line); background:var(--teal-soft)}
.b-gray{color:var(--ink2); border-color:var(--line2); background:var(--paper2)}

/* ── 할 일 줄 ─────────────────────────────────────────── */
.row-item{padding:11px 0; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-start}
.row-item:first-of-type{border-top:0}
.row-item .body{flex:1; min-width:0}
.row-item .t{font-size:14px}

/* ── 표 ───────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{color:var(--ink3); font-weight:600; font-size:11px; letter-spacing:.04em; white-space:nowrap;
   border-bottom:1px solid var(--line2)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto; margin:0 -4px; padding:0 4px}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--paper2)}

/* ── 그래프 ───────────────────────────────────────────── */
svg.chart{width:100%; height:auto; display:block; margin-top:12px; overflow:visible}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--ink2); margin-top:12px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:0}

/* ── 연대기 ───────────────────────────────────────────── */
.tl{position:relative; padding-left:22px; margin-top:14px}
.tl:before{
  content:''; position:absolute; left:4px; top:8px; bottom:8px; width:1.5px;
  background:linear-gradient(180deg, var(--line2), var(--line));
}
.tl .it{position:relative; padding:0 0 17px}
.tl .it:last-child{padding-bottom:2px}
.tl .it:before{
  content:''; position:absolute; left:-22px; top:8px; width:9px; height:9px; border-radius:50%;
  background:var(--line2); box-shadow:0 0 0 3.5px var(--surface);
}
.tl .it.big:before{background:var(--teal); box-shadow:0 0 0 3.5px var(--surface), 0 0 0 5px var(--teal-soft)}
.tl .d{font-size:11px; color:var(--ink3); letter-spacing:.03em}
.tl .t{font-size:14px; margin-top:1px}
.tl .it.big .t{font-weight:600; font-size:14.5px}

/* ── 이야기 ───────────────────────────────────────────── */
.story h3{font-family:'Gowun Batang',serif; font-size:19px; margin-top:0}
.story .when{font-size:11.5px; color:var(--ink3); margin:12px 0 0}
blockquote{
  margin:12px 0 0; padding:14px 16px; border-radius:4px 14px 14px 4px;
  border-left:3px solid var(--teal); background:var(--teal-soft);
  font-size:14px; line-height:1.85;
}
blockquote b{color:var(--teal); font-weight:600; margin-right:3px}

/* ── 사진 ─────────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:7px}
.grid a{
  display:block; aspect-ratio:1; border-radius:13px; overflow:hidden; background:var(--paper2);
  border:1px solid var(--line); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.grid a:hover{transform:translateY(-2px) scale(1.012); box-shadow:var(--sh-lg)}
.grid img{width:100%; height:100%; object-fit:cover; display:block}
.strip-photos{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.strip-photos::-webkit-scrollbar{display:none}
.strip-photos a{flex:none; width:104px; aspect-ratio:1; border-radius:13px; overflow:hidden; border:1px solid var(--line)}
.strip-photos img{width:100%; height:100%; object-fit:cover; display:block}
.empty{text-align:center; color:var(--ink2); padding:34px 18px; font-size:14px; line-height:1.9}
.empty code{background:var(--paper2); border:1px solid var(--line); border-radius:7px; padding:2px 7px; font-size:12px}
dialog{border:0; padding:0; background:transparent; max-width:96vw; max-height:96dvh}
dialog::backdrop{background:rgba(12,11,8,.9); backdrop-filter:blur(3px)}
dialog img,dialog video{max-width:96vw; max-height:86dvh; border-radius:14px; display:block}
dialog .cap{color:#EDE7DB; font-size:11.5px; text-align:center; padding:10px}

/* ── 달력 ─────────────────────────────────────────────── */
.calhead{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.calhead button{
  border:1px solid var(--line); background:var(--surface); border-radius:11px;
  width:32px; height:32px; font:inherit; cursor:pointer; color:var(--ink2); line-height:1;
}
.calhead button:hover{border-color:var(--line2); color:var(--ink)}
.calhead .m{font-family:'Gowun Batang',serif; font-weight:700; font-size:17px}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal .dow{font-size:10.5px; color:var(--ink3); text-align:center; padding-bottom:4px}
.cal .c{
  aspect-ratio:1; border-radius:11px; background:var(--paper2); border:1px solid transparent;
  padding:5px 6px; font-size:12px; position:relative; color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
.cal .c.out{opacity:.3}
.cal .c.has{background:var(--surface); border-color:var(--line); color:var(--ink)}
.cal .c.today{border-color:var(--teal); background:var(--teal-soft); font-weight:700; color:var(--teal)}
.cal .c .dot{position:absolute; left:0; right:0; bottom:6px; text-align:center; font-size:7px; line-height:1}

footer{max-width:940px; margin:0 auto; padding:0 18px 44px; color:var(--ink3); font-size:11.5px; text-align:center}
footer a{color:var(--ink3)}
details summary{cursor:pointer; color:var(--teal); font-size:13.5px; padding:8px 0; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:'▸ '; font-size:11px}
details[open] summary:before{content:'▾ '}