/* ===== 기본 토큰 ===== */
:root{
  --bg:#fbf7f2; --bg2:#fffdfb; --card:#ffffff; --line:#ecdfd2;
  --ink:#2f2822; --ink2:#6c6157; --ink3:#9a8f84;
  --accent:#d2694a; --accent-ink:#fff; --accent-soft:#fbeae3;
  --shadow:0 1px 2px rgba(64,44,30,.05), 0 8px 24px -12px rgba(64,44,30,.18);
  --r:16px; --r-sm:10px;
  --c-약속:#e0679a; --c-기념일:#e0a13a; --c-할일:#7b74d8; --c-공부:#3f8fd0; --c-건강:#3fa87a;
  --sun:#d9534f; --sat:#4a7fd2;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#18150f; --bg2:#1f1b15; --card:#221e18; --line:#3a332a;
    --ink:#f0e9df; --ink2:#b6aa9b; --ink3:#857a6d;
    --accent:#e58b6b; --accent-ink:#2a1a12; --accent-soft:#3a2a22;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.7);
    --sun:#ef8b87; --sat:#8fb3ec;
  }
}
:root[data-theme="light"]{
  --bg:#fbf7f2; --bg2:#fffdfb; --card:#fff; --line:#ecdfd2;
  --ink:#2f2822; --ink2:#6c6157; --ink3:#9a8f84;
  --accent:#d2694a; --accent-ink:#fff; --accent-soft:#fbeae3;
  --shadow:0 1px 2px rgba(64,44,30,.05), 0 8px 24px -12px rgba(64,44,30,.18);
  --sun:#d9534f; --sat:#4a7fd2;
}
:root[data-theme="dark"]{
  --bg:#18150f; --bg2:#1f1b15; --card:#221e18; --line:#3a332a;
  --ink:#f0e9df; --ink2:#b6aa9b; --ink3:#857a6d;
  --accent:#e58b6b; --accent-ink:#2a1a12; --accent-soft:#3a2a22;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.7);
  --sun:#ef8b87; --sat:#8fb3ec;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.5; -webkit-text-size-adjust:100%;
}
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:360px; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 120% at 12% -10%, var(--accent-soft) 0%, transparent 62%);
}
img{max-width:100%; display:block}
h1,h2,h3{line-height:1.22; margin:0; letter-spacing:-.02em}
p{margin:0}
ul,ol,menu{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--accent-soft); padding:.1em .4em; border-radius:5px}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--card); padding:8px 14px; border-radius:8px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ===== 버튼 ===== */
.btn{
  --pad:7px 16px;
  display:inline-flex; align-items:center; gap:6px; padding:var(--pad);
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; cursor:pointer; font-size:.92rem; font-weight:600;
  text-decoration:none; white-space:nowrap; transition:.15s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.btn--primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn--primary:hover{color:var(--accent-ink); filter:brightness(1.07)}
.btn--ghost{background:transparent}
.btn--danger{color:#c8503f; border-color:#e7b4ab}
.btn--danger:hover{background:#c8503f; border-color:#c8503f; color:#fff}
.btn--sm{--pad:6px 13px; font-size:.86rem}
.btn--xs{--pad:4px 10px; font-size:.78rem}
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center; font-size:1.05rem;
  background:var(--card); border:1px solid var(--line); border-radius:50%; cursor:pointer; transition:.15s;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.link{background:none; border:0; padding:0; color:var(--accent); font-weight:600; cursor:pointer; text-decoration:underline}

/* ===== 헤더 ===== */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter:blur(12px);
  background:var(--bg); border-bottom:1px solid var(--line)}
@supports (background:color-mix(in srgb,red,blue)){
  .topbar{background:color-mix(in srgb, var(--bg) 82%, transparent)}
}
.topbar__inner{display:flex; align-items:center; gap:18px; height:52px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; text-decoration:none; color:var(--ink); letter-spacing:-.02em}
.brand__mark{font-size:1.2rem}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{padding:6px 11px; border-radius:999px; text-decoration:none; color:var(--ink2); font-size:.9rem; font-weight:600}
.nav a:hover{background:var(--accent-soft); color:var(--accent)}
.topbar__tools{display:flex; gap:8px; align-items:center}

/* ===== 아바타 ===== */
.avatar{
  position:relative; border-radius:50%; overflow:hidden; flex:none;
  background:linear-gradient(140deg, var(--accent-soft), var(--line));
  display:grid; place-items:center; border:1px solid var(--line);
}
@supports (background:color-mix(in srgb,red,blue)){
  .avatar{background:linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent) 32%, var(--card)))}
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar__fallback{font-weight:800; color:var(--accent); letter-spacing:-.03em}
.avatar--xl{width:172px; height:172px; box-shadow:var(--shadow)}
.avatar--xl .avatar__fallback{font-size:3rem}
.avatar--md{width:74px; height:74px}
.avatar--md .avatar__fallback{font-size:1.5rem}
.avatar--sm{width:52px; height:52px}
.avatar--sm .avatar__fallback{font-size:1.1rem}
.avatar[data-has="0"]::after{
  content:attr(data-empty); position:absolute; inset:auto 0 12%; text-align:center;
  font-size:.7rem; color:var(--ink3); font-weight:600;
}
.avatar--sm[data-has="0"]::after, .avatar--md[data-has="0"]::after{content:none}
.photo-pick{display:block; text-align:center; margin-top:6px; cursor:pointer}
.photo-pick span{font-size:.83rem; color:var(--ink2); border-bottom:1px dashed var(--ink3); padding-bottom:1px}
.photo-pick:hover span{color:var(--accent); border-color:var(--accent)}

/* ===== 히어로 ===== */
.hero{display:grid; grid-template-columns:auto 1fr 280px; gap:32px; align-items:start; padding:26px 20px 22px}
.hero__eyebrow{color:var(--accent); font-weight:700; font-size:.9rem; margin-bottom:4px}
.hero__name{font-size:clamp(2rem,5vw,2.9rem)}
.hero__tagline{color:var(--ink2); font-size:1.05rem; margin-top:5px}
.hero__bio{color:var(--ink2); margin-top:9px; white-space:pre-wrap; font-size:.95rem}
.hero__actions{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px}
.chips a, .chips li{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); font-size:.83rem; color:var(--ink2); text-decoration:none}
.chips a:hover{border-color:var(--accent); color:var(--accent)}

/* 오늘 카드 */
.today-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; box-shadow:var(--shadow); text-align:center}
.today-card__head{font-size:.8rem; letter-spacing:.14em; color:var(--ink3); text-transform:uppercase}
.today-card__date{font-weight:700; margin-top:2px}
.ring{
  --pct:0; width:112px; height:112px; margin:10px auto 8px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--line) 0);
  transition:background .4s ease;
}
.ring::before{content:""; position:absolute; width:88px; height:88px; border-radius:50%; background:var(--card)}
.ring{position:relative}
.ring__label{position:relative; font-size:1.5rem; font-weight:800}
.ring__label small{font-size:.8rem; color:var(--ink3); margin-left:1px}
.today-card__sum{font-size:.9rem; color:var(--ink2)}
.today-card__next{font-size:.85rem; color:var(--accent); margin-top:6px; font-weight:600}

/* ===== 섹션 ===== */
.section{padding:18px 20px}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap}
.section__head h2{font-size:1.4rem}
.section__sub{display:block; font-size:.87rem; font-weight:500; color:var(--ink3); margin-top:4px; letter-spacing:0}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.empty{color:var(--ink3); font-size:.92rem; padding:18px; text-align:center; border:1px dashed var(--line); border-radius:var(--r)}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}

/* 디데이 */
.dday-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:8px 14px}
.dday{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 18px; box-shadow:var(--shadow); overflow:hidden; cursor:pointer; text-align:left; width:100%; transition:.18s}
.dday:hover{transform:translateY(-2px); border-color:var(--accent)}
.dday::after{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent)}
.dday.is-today::after{background:var(--c-약속)}
.dday__emoji,.dday__title,.dday__num,.dday__date{display:block}
.dday__emoji{font-size:1.35rem}
.dday__title{font-weight:700; margin-top:5px; font-size:.98rem}
.dday__num{font-size:1.75rem; font-weight:800; letter-spacing:-.04em; margin-top:4px; color:var(--accent)}
.dday.is-past .dday__num{color:var(--ink3)}
.dday.is-today .dday__num{color:var(--c-약속)}
.dday__date{font-size:.8rem; color:var(--ink3); margin-top:2px}

/* 관계 */
.people-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px 14px}
.person{display:flex; gap:14px; align-items:center; text-align:left; width:100%; padding:12px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); cursor:pointer; transition:.18s}
.person:hover{transform:translateY(-2px); border-color:var(--accent)}
.person__body{flex:1; min-width:0}
.person__name,.person__memo,.person__days{display:block}
.person__name{font-weight:700}
.person__rel{display:inline-block; font-size:.74rem; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:1px 8px; border-radius:999px; margin-left:6px}
.person__memo{font-size:.86rem; color:var(--ink2); margin-top:3px}
.person__days{font-size:.8rem; color:var(--ink3); margin-top:4px}
.person__days b{color:var(--accent)}

/* ===== 일정 레이아웃 ===== */
.plan{display:grid; grid-template-columns:1.15fr 1fr; gap:16px; align-items:start}

/* 달력 */
.calendar{padding:8px}
.calendar__bar{display:flex; align-items:center; gap:4px; margin-bottom:6px}
.calendar__title{font-size:.88rem; flex:1; text-align:center}
.calendar__dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px}
.calendar__dow span{text-align:center; font-size:.63rem; font-weight:700; color:var(--ink3)}
.calendar__dow .sun{color:var(--sun)} .calendar__dow .sat{color:var(--sat)}
.calendar__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.day{
  position:relative; height:30px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; padding:2px; background:transparent; border:1px solid transparent;
  border-radius:6px; cursor:pointer; font-size:.72rem; font-weight:600; transition:.13s;
}
.day:hover{background:var(--accent-soft)}
.day--out{color:var(--ink3); opacity:.45}
.day--sun{color:var(--sun)} .day--sat{color:var(--sat)}
.day--today{border-color:var(--accent); color:var(--accent)}
.day--sel{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.day--sel.day--sun,.day--sel.day--sat,.day--sel.day--out{color:var(--accent-ink); opacity:1}
.day__dots{display:flex; gap:2px; flex-wrap:wrap; justify-content:center; height:4px}
.day__dots i{width:3px; height:3px; border-radius:50%; background:var(--ink3)}
.day--sel .day__dots i{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-ink) 60%,transparent)}
.day--done .day__num{text-decoration:line-through; text-decoration-thickness:1.5px; opacity:.6}
.d-약속{background:var(--c-약속)!important} .d-기념일{background:var(--c-기념일)!important}
.d-할일{background:var(--c-할일)!important} .d-공부{background:var(--c-공부)!important}
.d-건강{background:var(--c-건강)!important}
.calendar__legend{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:6px;
  padding-top:6px; border-top:1px solid var(--line)}
.lg{font-size:.68rem; color:var(--ink3); display:inline-flex; align-items:center; gap:3px}
.lg::before{content:""; width:6px; height:6px; border-radius:50%}
.lg--약속::before{background:var(--c-약속)} .lg--기념일::before{background:var(--c-기념일)}
.lg--할일::before{background:var(--c-할일)} .lg--공부::before{background:var(--c-공부)}
.lg--건강::before{background:var(--c-건강)}

/* 체크리스트 */
.checklist{padding:14px 18px; display:flex; flex-direction:column}
.checklist__head{display:flex; flex-direction:column; gap:8px; margin-bottom:9px}
.checklist__head h3{font-size:1.05rem}
.seg{display:flex; gap:3px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px; align-self:flex-start}
.seg__btn{padding:4px 12px; border:0; background:transparent; border-radius:999px; cursor:pointer;
  font-size:.8rem; font-weight:600; color:var(--ink2)}
.seg__btn.is-on{background:var(--accent); color:var(--accent-ink)}
.bar{height:6px; background:var(--line); border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .35s ease}
.checklist__meta{font-size:.8rem; color:var(--ink3); margin-top:5px}

.todo{margin-top:9px; display:flex; flex-direction:column; gap:6px; max-height:400px; overflow-y:auto}
.todo__item{display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--bg2); position:relative}
.todo__item.is-done{opacity:.55}
.todo__item.is-over{border-color:#e0a4a4}
.todo__check{appearance:none; width:19px; height:19px; flex:none; margin-top:2px; border:2px solid var(--ink3);
  border-radius:6px; cursor:pointer; display:grid; place-items:center; transition:.15s}
.todo__check:checked{background:var(--accent); border-color:var(--accent)}
.todo__check:checked::after{content:"✓"; color:var(--accent-ink); font-size:.75rem; font-weight:900}
.todo__body{flex:1; min-width:0}
.todo__title{font-weight:600; font-size:.94rem; word-break:break-word}
.is-done .todo__title{text-decoration:line-through}
.todo__sub{font-size:.78rem; color:var(--ink3); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tag{font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:999px; color:#fff}
.tag-약속{background:var(--c-약속)} .tag-기념일{background:var(--c-기념일)}
.tag-할일{background:var(--c-할일)} .tag-공부{background:var(--c-공부)} .tag-건강{background:var(--c-건강)}
.todo__over{color:#c8503f; font-weight:700}
.todo__acts{display:flex; gap:2px; flex:none}
.mini{width:27px; height:27px; display:grid; place-items:center; background:transparent; border:0;
  border-radius:8px; cursor:pointer; color:var(--ink3); font-size:.86rem}
.mini:hover{background:var(--accent-soft); color:var(--accent)}
.todo__note{font-size:.8rem; color:var(--ink2); margin-top:4px; white-space:pre-wrap}
.todo__fixed{font-size:.72rem; color:var(--ink3); background:var(--accent-soft); padding:1px 7px; border-radius:999px}

.quick{display:flex; gap:7px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.quick input{flex:1; min-width:0; padding:8px 13px; background:var(--bg); border:1px solid var(--line); border-radius:999px}
.quick input:focus{outline:none; border-color:var(--accent)}

/* 연동 */
.sync-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px 16px}
.sync-card{padding:16px 20px}
.sync-card h3{font-size:1.02rem; margin-bottom:6px}
.sync-card p{font-size:.9rem; color:var(--ink2)}
.steps{margin-top:10px; padding-left:20px; list-style:decimal; font-size:.84rem; color:var(--ink3)}
.steps li{margin-bottom:2px}
.note{font-size:.83rem; color:var(--ink3); margin-top:9px; padding-top:9px; border-top:1px solid var(--line)}

/* 푸터 */
.footer{margin-top:24px; padding:18px 0 26px; border-top:1px solid var(--line); text-align:center}
.footer p{font-weight:700}
.footer__note{font-weight:400!important; font-size:.83rem; color:var(--ink3); margin-top:4px}

/* ===== 다이얼로그 ===== */
.dlg{border:0; padding:0; background:transparent; max-width:min(94vw,470px); width:100%}
.dlg::backdrop{background:rgba(30,20,12,.5); backdrop-filter:blur(3px)}
.dlg__form{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 24px; display:flex; flex-direction:column; gap:10px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.dlg__title{font-size:1.15rem; margin-bottom:2px}
.dlg__form label{display:flex; flex-direction:column; gap:5px; font-size:.84rem; font-weight:700; color:var(--ink2)}
.dlg__form input:not([type=checkbox]), .dlg__form select, .dlg__form textarea{
  padding:8px 12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  font-weight:500; color:var(--ink); width:100%;
}
.dlg__form input:focus, .dlg__form select:focus, .dlg__form textarea:focus{outline:none; border-color:var(--accent)}
.dlg__form textarea{resize:vertical; font-family:inherit}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.hint{font-weight:500; color:var(--ink3); font-size:.78rem}
.check{flex-direction:row!important; align-items:center; gap:8px!important; font-weight:600}
.check input{width:auto!important; accent-color:var(--accent)}
.pick-row{display:flex; align-items:center; gap:14px}
.pick-row .photo-pick{margin:0; text-align:left}
.dlg__menu{display:flex; gap:8px; margin-top:6px; align-items:center}
.spacer{flex:1}

/* 토스트 */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,140%); z-index:60;
  background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:999px;
  font-size:.88rem; font-weight:600; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  max-width:88vw; text-align:center;
}
.toast.is-on{transform:translate(-50%,0)}

/* ===== 반응형 ===== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; padding-top:20px}
  .hero__actions,.chips{justify-content:center}
  .today-card{width:100%; max-width:340px}
  .plan{grid-template-columns:1fr}
  .nav{display:none}
}
@media (max-width:520px){
  .grid2{grid-template-columns:1fr}
  .avatar--xl{width:136px; height:136px}
  .dday-grid{grid-template-columns:1fr 1fr; gap:8px}
  .dday{padding:10px 14px}
  .dday__num{font-size:1.45rem}
  .people-grid{grid-template-columns:1fr}
  .section{padding:14px 16px}
  .wrap{padding:0 16px}
  .day{height:28px; font-size:.7rem}
  .todo{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}