:root{
  --bg:#F5F4F1; --surface:#FFFFFF; --raise:#ECEAE5; --ink:#1B1A17; --muted:#6B6860; --line:#E0DDD6;
  --accent:#B7791F; --accent-ink:#FFFFFF; --accent-soft:#F6EAD3; --ok:#2F8F5B; --danger:#C8443B; --holiday:#C8443B;
  --bar:rgba(245,244,241,.92); --sel:#1B1A17;
  --dad:#2F6FB3; --mom:#C2477A; --jiwoo:#D98A1E; --junseo:#3E9A5B;
  --c5:#6B5BB8; --c6:#1F8A8A; --c7:#8A5A3C; --c8:#56657A;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#111110; --surface:#1B1B19; --raise:#252522; --ink:#EDEBE6; --muted:#9E9A90; --line:#2E2D2A;
    --accent:#F2B84B; --accent-ink:#1A1400; --accent-soft:#3A2F17; --ok:#5BC98A; --danger:#F07B72; --holiday:#F07B72;
    --bar:rgba(17,17,16,.9); --sel:#F2B84B;
    --dad:#6EA6E6; --mom:#E77DA8; --jiwoo:#F0B056; --junseo:#6CC98A;
    --c5:#A395F0; --c6:#5CC6C6; --c7:#C99A7A; --c8:#9AA9BE;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111110; --surface:#1B1B19; --raise:#252522; --ink:#EDEBE6; --muted:#9E9A90; --line:#2E2D2A;
  --accent:#F2B84B; --accent-ink:#1A1400; --accent-soft:#3A2F17; --ok:#5BC98A; --danger:#F07B72; --holiday:#F07B72;
  --bar:rgba(17,17,16,.9); --sel:#F2B84B;
  --dad:#6EA6E6; --mom:#E77DA8; --jiwoo:#F0B056; --junseo:#6CC98A;
  --c5:#A395F0; --c6:#5CC6C6; --c7:#C99A7A; --c8:#9AA9BE;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.5}
[hidden]{display:none!important}
h1,h2,h3{font-family:"Do Hyeon","Noto Sans KR",sans-serif;font-weight:400;margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.app{max-width:520px;margin:0 auto;min-height:100vh;padding:0 16px calc(92px + env(safe-area-inset-bottom,0px))}
@media (min-width:560px){.app{border-inline:1px solid var(--line)}}

.top{position:sticky;top:0;z-index:10;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-inline:-16px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.top h1{font-size:24px;line-height:1.15}
.top .sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.top-btns{display:flex;gap:6px;align-items:center}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;min-height:34px}
.pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0}
.icon-btn svg,.search svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.screen{display:flex;flex-direction:column;gap:18px}
.demo-banner{background:var(--accent-soft);color:var(--ink);border-radius:12px;padding:8px 12px;font-size:12px}
.demo-banner a{color:var(--accent);font-weight:700}
.auth .demo-banner{font-size:13px}

/* 타임라인 */
.jump{display:flex;gap:6px;overflow-x:auto;margin-inline:-16px;padding:2px 16px;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump button{flex:none;border:0;background:var(--raise);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.month > h2{font-size:22px;margin:6px 0}
.dayh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 6px}
.dayh b{font-size:14px;font-weight:700}
.dayh span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:2px;margin-inline:-16px}
@media (min-width:430px){.grid{margin-inline:0}}
.tile{position:relative;aspect-ratio:1;padding:0;border:0;background:var(--raise);overflow:hidden;display:block}
.tile img{width:100%;height:100%;display:block;object-fit:cover}
.tile .chk{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.2);display:none}
.selecting .tile .chk{display:block}
.tile.picked{outline:3px solid var(--sel);outline-offset:-3px}
.tile.picked img{transform:scale(.88);border-radius:6px}
.tile.picked .chk{background:var(--sel);border-color:var(--sel)}
.tile.picked .chk::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tile .new{position:absolute;right:4px;bottom:4px;font-size:10px;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:5px;padding:0 5px}
.tile .vid{position:absolute;right:4px;top:4px;font-size:10px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;border-radius:5px;padding:0 5px}

/* 앨범 */
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:8px}
.sec-h h2{font-size:20px}
.sec-h small{font-size:12px;color:var(--muted)}
.albums{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.album{border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px}
.album .cover{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--raise);position:relative}
.album .cover img{width:100%;height:100%;display:block;object-fit:cover}
.album .cover .auto{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;border-radius:6px;padding:1px 6px}
.album b{font-size:14px;font-weight:700;line-height:1.3}
.album span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.people{display:flex;gap:14px;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.people::-webkit-scrollbar{display:none}
.face{flex:none;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:70px}
.face .ring{width:66px;height:66px;border-radius:50%;overflow:hidden;border:3px solid var(--line);background:var(--raise)}
.face .ring img{width:100%;height:100%;display:block;object-fit:cover}
.face b{font-size:13px}.face span{font-size:11px;color:var(--muted)}
.places{display:flex;flex-direction:column}
.places button{display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 0;text-align:left}
.places button:last-child{border-bottom:0}
.places span{color:var(--muted);font-size:13px}
.back{border:0;background:none;padding:4px 0;color:var(--accent);font-weight:700;font-size:14px;align-self:flex-start}
.detail-h{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.detail-h h2{font-size:26px}
.detail-h p{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* 검색 */
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 12px;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;padding:12px 0;outline:none;font-size:16px;color:var(--ink)}
.sugs{display:flex;flex-wrap:wrap;gap:6px}
.sugs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px}
.lbl{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:8px}
.empty{color:var(--muted);text-align:center;padding:30px 0;font-size:14px}

/* 올리기 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.meter{height:12px;border-radius:6px;background:var(--raise);overflow:hidden;display:flex;margin:10px 0 8px}
.meter i{display:block;height:100%}
.mleg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.mleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.big{font-family:"Do Hyeon",sans-serif;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.big small{font-family:"Noto Sans KR",sans-serif;font-size:13px;color:var(--muted)}
.devices{list-style:none;margin:0;padding:0}
.devices li{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.devices li:last-child{border-bottom:0}
.av{width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-family:"Do Hyeon",sans-serif;font-size:17px;flex:none}
.devices b{font-size:14px;font-weight:500}
.devices small{display:block;font-size:12px;color:var(--muted)}
.state{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.state.ok{color:var(--ok)}.state.warn{color:var(--accent)}.state.off{color:var(--muted)}
.upload{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-weight:700;cursor:pointer}
.progress{height:6px;border-radius:3px;background:var(--raise);overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.copies{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px;text-align:center}
.copies div{background:var(--raise);border-radius:12px;padding:10px 4px;font-size:12px;color:var(--muted)}
.copies b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}

/* 캘린더 */
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-h h2{font-size:24px;font-variant-numeric:tabular-nums}
.cal-nav{display:flex;gap:6px}
.cal-nav button{border:1px solid var(--line);background:var(--surface);border-radius:10px;min-width:36px;height:36px;padding:0 10px;font-weight:700}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-size:12px;color:var(--muted);text-align:center;padding:4px 0}
.cal-dow:first-child{color:var(--holiday)}
.cal-day{border:0;background:none;border-radius:10px;min-height:56px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-variant-numeric:tabular-nums;position:relative}
.cal-day .n{font-size:14px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.cal-day.out{opacity:.35}
.cal-day.sun .n,.cal-day.hol .n{color:var(--holiday)}
.cal-day.today .n{background:var(--ink);color:var(--bg)}
.cal-day.sel{background:var(--accent-soft)}
.cal-day .dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:34px}
.cal-day .dots i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.cal-day .ph{position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.6}
.cal-day .hn{font-size:9px;color:var(--holiday);line-height:1.1;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.evs{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;padding:11px 0;text-align:left;width:100%}
.ev:last-child{border-bottom:0}
.ev .bar{width:4px;align-self:stretch;border-radius:2px;background:var(--c)}
.ev b{font-size:15px;font-weight:500;display:block}
.ev small{font-size:12px;color:var(--muted)}
.ev .when{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.strip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .tile{flex:none;width:72px;border-radius:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;font-size:14px;font-weight:500}
.chips button .av{width:26px;height:26px;font-size:13px}
.chips button[aria-pressed="true"]{border-color:var(--ink);font-weight:700}
.chips.plain button{padding:6px 12px}

/* 선택 막대 */
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.selbar .in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:8px}
.selbar b{flex:1;font-size:14px}
.act{border:1px solid var(--line);background:var(--surface);border-radius:12px;height:42px;padding:0 14px;font-weight:700;font-size:14px}
.act.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.act.danger{color:var(--danger)}

/* 탭 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tabbar button{background:none;border:0;padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);min-height:60px}
.tabbar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="page"]{color:var(--ink);font-weight:700}
.tabbar button[aria-current="page"] svg{stroke:var(--accent)}

/* 보기 창 */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
.viewer{position:absolute;inset:0;background:#0b0b0a;color:#eee;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.vtop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;gap:6px}
.vtop button,.vtop a,.vnav button{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;height:38px;padding:0 14px;font-weight:700;font-size:14px;display:inline-grid;place-items:center;text-decoration:none}
.vimg{flex:1;display:grid;place-items:center;min-height:0;padding:0 8px;position:relative}
.vimg img,.vimg video{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:4px}
.vnav{position:absolute;inset:auto 12px 50%;display:flex;justify-content:space-between;pointer-events:none}
.vnav button{pointer-events:auto;width:40px;padding:0;font-size:20px}
.vinfo{background:#171716;border-radius:18px 18px 0 0;padding:14px 16px 16px;max-width:520px;width:100%;margin:0 auto}
.vinfo h3{font-size:20px;color:#fff;word-break:break-all}
.vinfo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;font-size:13px}
.vinfo dt{color:#9a978f}.vinfo dd{margin:0;color:#e8e6e0}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;max-height:92vh;overflow-y:auto;background:var(--surface);color:var(--ink);border-radius:22px 22px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 4px;flex:none}
.sheet .opt{display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 2px;text-align:left}
.sheet .opt span{color:var(--muted);font-size:13px}
.row-form{display:flex;gap:6px}
.row-form input{flex:1;min-width:0}
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 14px;font-size:13px;z-index:40}

/* 설정 / 폼 */
.sgroup{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:4px 14px}
.sgroup-h{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:0 0 6px 4px}
.srow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);min-height:52px}
.srow:last-child{border-bottom:0}
.srow > .t{flex:1;min-width:0}
.srow > .t b{display:block;font-size:15px;font-weight:500}
.srow > .t small{display:block;font-size:12px;color:var(--muted)}
button.srow{width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding-inline:0}
button.srow:last-child{border-bottom:0}
.srow .go{color:var(--muted);font-size:18px}
.srow.add{color:var(--accent);font-weight:700;justify-content:center;border-bottom:0}
.srow.add.danger{color:var(--danger)}
.srow input.inline{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg);width:9em;font-size:15px;text-align:right}
.segc{display:inline-flex;background:var(--raise);border-radius:10px;padding:3px;gap:2px;flex:none}
.segc button{border:0;background:none;border-radius:8px;padding:5px 10px;font-size:13px;color:var(--muted);font-weight:500;min-height:30px}
.segc button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches button{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--line)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea,.row-form input{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);font-size:16px;color:var(--ink);min-width:0}
.field textarea{resize:vertical;min-height:64px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.three{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin-top:8px}
.check input{width:18px;height:18px}
.err{color:var(--danger);font-size:13px;margin:0}
.btnrow{display:flex;gap:8px}
.btnrow .act{flex:1}

/* 로그인 */
.auth{max-width:380px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 16px}
.auth h1{font-size:34px}
.auth p{margin:0;color:var(--muted);font-size:14px}
.auth form{display:flex;flex-direction:column;gap:12px}
.auth .act{height:50px}
.auth p.err{color:var(--danger)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:12px;border:1px solid #747775;background:#fff;color:#1f1f1f;font-weight:500;text-decoration:none;font-family:Roboto,"Noto Sans KR",sans-serif}
.gbtn svg{width:20px;height:20px}
.or{display:flex;align-items:center;gap:10px;font-size:12px!important}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
@media (prefers-reduced-motion:reduce){.tile.picked img{transform:none}}