/* 기존 Claude 대시보드 화면을 기준으로 한 한 단 레이아웃 */
:root{
  --bg:#f3f5f7; --surface:#ffffff; --fg:#1b2430; --muted:#5d6b7a; --line:#dfe5ec;
  --card:#0f766e; --travel:#1d4ed8; --event:#b45309; --etc:#475569;
  --open:#15803d; --warn:#b45309; --closed:#b91c1c; --unk:#64748b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f141b; --surface:#171e28; --fg:#e6ebf1; --muted:#9aa7b6; --line:#2a3442;
    --card:#2dd4bf; --travel:#60a5fa; --event:#fbbf24; --etc:#94a3b8;
    --open:#4ade80; --warn:#fbbf24; --closed:#f87171; --unk:#94a3b8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f141b; --surface:#171e28; --fg:#e6ebf1; --muted:#9aa7b6; --line:#2a3442;
  --card:#2dd4bf; --travel:#60a5fa; --event:#fbbf24; --etc:#94a3b8;
  --open:#4ade80; --warn:#fbbf24; --closed:#f87171; --unk:#94a3b8;
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Noto Sans KR", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  font-size:14px; line-height:1.6;
  padding-block:16px 48px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
main{display:flex; flex-direction:column; gap:20px}
.head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.head h1{margin:0; font-size:24px; font-weight:800; letter-spacing:-0.01em}
.head p{margin:4px 0 0; color:var(--muted)}
.me{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px}
.status{color:var(--muted); font-size:13px}
.status:empty{display:none}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px}
.panel h2{margin:0 0 6px; font-size:17px}
.panel p{margin:0 0 14px; color:var(--muted)}

button{font:inherit}
.primary{
  font-weight:700; padding:10px 16px; border-radius:8px; border:none; cursor:pointer;
  background:var(--fg); color:var(--bg)
}
.primary[disabled], button[disabled]{opacity:.5; cursor:not-allowed}
.link{background:none; border:none; color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:6px; font-size:13px}
.link:hover{color:var(--fg)}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--travel); outline-offset:2px
}

.section-title{font-size:13px; font-weight:700; color:var(--muted); letter-spacing:0.04em; margin:0 0 8px}

/* 다가오는 일정 */
.upcoming{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px}
.up{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--c); border-radius:10px; padding:12px; min-width:0}
.up .dday{font-weight:800; font-size:18px; color:var(--c); font-variant-numeric:tabular-nums}
.up .t{font-weight:500; margin-top:2px; overflow-wrap:anywhere}
.up .d{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.empty-note{color:var(--muted); padding:12px 0}

/* 분야 필터 */
.tabs{display:flex; flex-wrap:wrap; gap:6px}
.tabs button{
  font-size:13px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer;
}
.tabs button[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}

.seedbar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; background:var(--surface); border:1px dashed var(--line); border-radius:10px; padding:10px 12px; color:var(--muted); font-size:13px}

/* 월별 타임라인 */
#timeline{display:flex; flex-direction:column; gap:16px}
.month{display:flex; flex-direction:column; gap:10px}
.month h2{font-size:15px; font-weight:700; margin:8px 0 0; font-variant-numeric:tabular-nums}
.item{
  display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0
}
.item .date{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; line-height:1.5}
.item .top{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.item h3{margin:0; font-size:16px; font-weight:700; overflow-wrap:anywhere; min-width:0}
.item .text{margin:6px 0 0; white-space:pre-line; overflow-wrap:anywhere}
.item ul{margin:8px 0 0; padding-left:18px}
.item li{margin:2px 0; overflow-wrap:anywhere}
.benefit{margin-top:8px; font-weight:700; color:var(--c); overflow-wrap:anywhere}
.foot{margin-top:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--muted); font-size:12px}
.foot .btns{display:flex; gap:2px}
.del:hover{color:var(--closed)}
@media (max-width:480px){ .item{grid-template-columns:1fr; gap:4px} }

.pill{
  display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px;
  color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); white-space:nowrap
}
.item[data-cat="card"], .up[data-cat="card"]{--c:var(--card)}
.item[data-cat="travel"], .up[data-cat="travel"]{--c:var(--travel)}
.item[data-cat="event"], .up[data-cat="event"]{--c:var(--event)}
.item[data-cat="etc"], .up[data-cat="etc"]{--c:var(--etc)}

/* 식당 목록 */
.item ul.places{padding-left:0; list-style:none}
.places li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; padding:6px 0; border-top:1px solid var(--line)}
.places li:first-child{border-top:none}
.places .n{font-weight:500}
.places .sub, .places .hrs{color:var(--muted); font-size:12px}
.places .hrs{flex-basis:100%}
.st{font-size:12px; font-weight:700; padding:1px 8px; border-radius:999px; white-space:nowrap}
.st.open{color:var(--open); background:color-mix(in srgb, var(--open) 14%, transparent)}
.st.warn{color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent)}
.st.closed{color:var(--closed); background:color-mix(in srgb, var(--closed) 14%, transparent)}
.st.unknown{color:var(--unk); background:color-mix(in srgb, var(--unk) 14%, transparent)}

/* 기록 추가 폼 */
details#addbox{background:var(--surface); border:1px solid var(--line); border-radius:12px}
details#addbox > summary{cursor:pointer; padding:14px; font-weight:700; list-style:none}
details#addbox > summary::-webkit-details-marker{display:none}
form{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 14px 14px}
form .full{grid-column:1 / -1}
label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); min-width:0}
input, select, textarea{
  font:inherit; font-size:14px; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; min-width:0
}
input[type="file"]{padding:6px}
textarea{min-height:72px; resize:vertical}
fieldset{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0; min-width:0}
legend{font-size:12px; color:var(--muted); padding:0 4px}
.hint{margin:6px 0 0; font-size:12px; color:var(--muted)}
.ocr-row{display:flex; gap:8px; align-items:center}
.ocr-row button{
  flex:none; padding:8px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--fg); cursor:pointer; font-weight:700
}
#ocr-preview{display:block; max-height:240px; max-width:100%; margin-top:8px; border-radius:8px; border:1px solid var(--line)}
.found{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.found span{font-size:12px; padding:2px 8px; border-radius:999px}
.found .ok{color:var(--open); background:color-mix(in srgb, var(--open) 14%, transparent)}
.found .miss{color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent)}
.raw{margin-top:8px}
.raw summary{cursor:pointer; font-size:12px; color:var(--muted)}
.raw textarea{font-size:12px; min-height:140px; margin-top:6px}
.needs-check{border-color:var(--warn)}

.place-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; padding:8px 0; border-top:1px solid var(--line)}
.place-row:first-child{border-top:none; padding-top:0}
.place-row .rm{justify-self:start}
@media (max-width:480px){
  form{grid-template-columns:1fr}
  .place-row{grid-template-columns:1fr 1fr}
}
.actions{display:flex; gap:8px; align-items:center}
.formmsg{grid-column:1 / -1; font-size:13px; color:var(--muted)}
.formmsg:empty{display:none}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }