/* 하루 v2 — yjinai UI 표준 v2. 공용 토큰·부품은 ui.css, 여기는 하루 전용만. */
/* ui.css는 index.html이 <link>로 직접 불러온다(웹폰트는 내려받지 않고 기기 글꼴 스택만 쓴다)(@import 체인은 첫 그리기를 늦춘다, 2026-09-27 자비스 실측). */

/* 채팅(회장 전용, 첫 화면에서 숨김) 코드가 쓰는 옛 변수 이름을 v2 토큰에 맞춘다. 새 화면은 쓰지 않는다. */
:root{--bg:#fff;--card:#fff;--surface:var(--bg-alt);--accent:var(--brand);--accent-ink:#fff;--accent-soft:var(--brand-bg);--user-bubble:var(--brand);--user-ink:#fff;--shadow:none}
h1,h2,h3,h4,p,ul,fieldset{margin:0}

.top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--gutter);max-width:1440px;margin:0 auto}
.logo{display:inline-flex;align-items:center;min-height:44px;font-size:20px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);text-decoration:none}
.topnav{display:flex;align-items:center;gap:4px}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;color:var(--sub);text-decoration:none}
.topnav #install{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--sub);font-size:13px;font-weight:600;cursor:pointer}

main{padding:0 var(--gutter) 120px;max-width:1440px;margin:0 auto}

/* 조건: 날짜 세그먼트 + 지역 칩 한 줄. 바꾸면 바로 다시 그린다(찾기 버튼은 키보드·JS 없음용으로만 숨김). */
.cond{display:grid;gap:6px;padding:4px 0 0}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}
.go{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.head{min-height:1.3em;margin-top:8px}
.head.err{color:var(--bad);font-size:17px;font-weight:600}
.sub{margin:0 0 12px;color:var(--sub);font-size:14px;min-height:1.5em}

.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-content:start}
/* 결과 영역 높이를 미리 확보해 스켈레톤→카드로 바뀔 때 아래 내용이 밀리지 않게(CLS) */
@media (max-width:719px){.results{min-height:calc(100vh - 220px)}}
.card{min-height:96px}
.card .meta.tag{font-size:13px;font-weight:700;color:var(--brand)}
.card .num{color:var(--sub);font-size:13px;font-weight:600;max-width:96px}
.card .num strong{color:var(--ink)}
.empty{grid-column:1/-1;line-height:1.6}

.src{margin:16px 0 0;color:var(--sub);font-size:13px}
.more{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:0 16px;font-size:14px}
.more a{display:inline-flex;align-items:center;min-height:44px;color:var(--sub)}

.fixed-bottom .note{display:block;margin:6px 0 0;text-align:center;font-size:13px;color:var(--sub);min-height:1.5em}

/* 기존 도구 24개: 첫 화면 아래 접힌 목록으로 내린다(기능 삭제 없음). */
.tools{margin-top:28px;border-top:1px solid var(--line)}
.tools summary{cursor:pointer;font-weight:700;font-size:16px;min-height:52px;display:flex;align-items:center;color:var(--ink)}
.tools h4{font-size:13px;font-weight:700;color:var(--sub);margin:16px 0 4px}
.toollist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 16px}
.toollist li{border-bottom:1px solid var(--line)}
.toollist a{display:block;min-height:44px;padding:8px 0;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.toollist span{display:block;color:var(--sub);font-size:13px;margin-top:2px;font-weight:400}

.foot{padding:24px var(--gutter) 40px;color:var(--sub);font-size:13px;line-height:1.6;max-width:1440px;margin:0 auto}
.foot a{color:var(--sub);display:inline-flex;align-items:center;min-height:44px}

/* 채팅 영역(?chat=1 또는 ?draft= 로만 열림) */
#chatSection{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}
.chatbar{display:flex;gap:6px;justify-content:flex-end;margin-bottom:8px}
#chat{display:flex;flex-direction:column;gap:6px;max-width:720px;margin:0 auto;min-height:40vh}
#welcome{text-align:center;margin:24px auto 0;max-width:500px}
#summary{display:none}

@media (min-width:720px){
  .cond{grid-template-columns:auto 1fr;align-items:center;gap:12px}
  .seg{min-width:240px}
  .chips{margin:0;padding:4px 0}
  .fixed-bottom{max-width:420px}
  main{padding-bottom:40px}
}

/* ---- 아래는 채팅(회장 전용) 전용 스타일. 첫 화면에는 보이지 않는다. ---- */
#reset, #prefs, #install, #tripsBtn {
  border: 1px solid var(--line); background: var(--card); color: var(--sub);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: color .15s, border-color .15s;
  min-height: 44px; display: inline-flex; align-items: center;
}
/* #install{display:inline-flex} 위 규칙이 id 선택자라 브라우저 기본 [hidden]{display:none}보다
   우선 적용돼(UA 시트보다 author 시트가 항상 이김) hidden 속성을 무시하고 항상 보였다 —
   PWA 설치가 안 되는 브라우저에서도 눌러도 반응 없는 죽은 버튼으로 노출되던 실제 버그. */
#install[hidden] { display: none; }
#reset:hover, #reset:focus-visible, #prefs:hover, #prefs:focus-visible { color: var(--accent); border-color: var(--accent); }
dialog {
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink);
  padding: 22px; width: min(440px, calc(100vw - 40px)); box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(20,15,10,.45); }
dialog h3 { font-size: 17px; margin-bottom: 6px; }
dialog p { font-size: 13px; color: var(--sub); line-height: 1.55; margin-bottom: 12px; }
dialog textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg);
  color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.6; padding: 12px;
  resize: vertical; outline: none;
}
dialog textarea:focus { border-color: var(--accent); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dlg-actions button {
  border: 1px solid var(--line); background: var(--card); color: var(--sub); border-radius: 999px;
  padding: 8px 18px; font-size: 13.5px; cursor: pointer; font-family: inherit;
  min-height: 44px; display: inline-flex; align-items: center;
}
.dlg-actions button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#tripList { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.triprow {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; background: var(--surface);
}
.triprow.cur { border-color: var(--accent); }
.triprow .info { flex: 1; min-width: 0; cursor: pointer; }
.triprow .t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.triprow .d { font-size: 12px; color: var(--sub); margin-top: 1px; }
.triprow .del { border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 12.5px; font-family: inherit; padding: 4px 6px; }
.triprow .del:hover { color: var(--accent); text-decoration: underline; }
#summary h3 { font-size: 15.5px; font-weight: 700; }
.summary-empty { color: var(--sub); font-size: 14px; line-height: 1.6; }
.summary-card {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 16px;
}
.summary-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.summary-meta { color: var(--sub); font-size: 13px; margin-bottom: 12px; }
#summaryViewBtn {
  display: block; width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 10px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  min-height: 44px;
}
#summaryViewBtn:hover, #summaryViewBtn:focus-visible { border-color: var(--accent); color: var(--accent); }
.botrow { display: flex; gap: 9px; align-items: flex-end; margin-top: 10px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; flex-shrink: 0; color: var(--accent-ink);
  margin-bottom: 2px;
}
.botcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; align-items: flex-start; }
.name { font-size: 12px; color: var(--sub); padding-left: 6px; }
.msg {
  max-width: 88%; line-height: 1.65; font-size: 16px; word-break: break-word;
  animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
.msg.user {
  align-self: flex-end; background: var(--user-bubble); color: var(--user-ink);
  padding: 11px 16px; border-radius: var(--radius); border-bottom-right-radius: 6px;
  white-space: pre-wrap; margin-top: 12px;
}
.msg.bot {
  background: var(--surface); padding: 12px 16px;
  border-radius: var(--radius); border-bottom-left-radius: 6px;
}
.msg.bot p { margin: 0 0 8px; } .msg.bot p:last-child { margin-bottom: 0; }
.msg.bot ul { margin: 6px 0 12px; padding-left: 19px; }
.msg.bot li { margin: 4px 0; }
.msg.bot h3, .msg.bot h4 { margin: 12px 0 6px; font-size: 15.5px; }
.msg.bot a { color: var(--accent); font-weight: 650; text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.msg.bot a:hover { border-bottom-color: var(--accent); }
.msg.bot.plan { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); box-shadow: var(--shadow); }
.msg.bot .courseMap { margin-top: 12px; }
.msg.bot .courseMap iframe { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 12px; display: block; }
.msg.bot .courseMap .mapCredit { font-size: 11px; color: var(--sub); margin: 4px 0 0; text-align: right; }
.msg.bot .courseMap .mapCredit a { color: var(--sub); }
.msg.bot ul.pack, .msg.bot ul.steps { padding-left: 0; }
.msg.bot ul.pack li, .msg.bot ul.steps li { list-style: none; margin: 2px 0; }
.msg.bot ul.pack label, .msg.bot ul.steps label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 5px 4px; border-radius: 8px; }
.msg.bot ul.pack label:hover, .msg.bot ul.steps label:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.msg.bot ul.pack input[type="checkbox"], .msg.bot ul.steps input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.msg.bot ul.pack li.done span, .msg.bot ul.steps li.done span { text-decoration: line-through; color: var(--sub); }
.msg.error { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.actions button {
  border: 1px solid var(--line); background: var(--card); color: var(--sub);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: color .15s, border-color .15s;
  min-height: 44px; display: inline-flex; align-items: center;
}
.actions button:hover, .actions button:focus-visible { color: var(--accent); border-color: var(--accent); }
.actions button:disabled { opacity: .55; cursor: default; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sub); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
.status { color: var(--sub); font-size: 13px; padding: 6px 0 0 45px; }
.status.hidden { display: none; }
#chatIntro .chatGreet { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; text-wrap: balance; }
#welcome p { color: var(--sub); font-size: 16px; line-height: 1.7; text-wrap: pretty; }
#welcome .kept { color: var(--accent); }
#chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
#chips button {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 10px 16px; font-size: 14px; color: var(--ink); cursor: pointer;
  font-family: inherit; box-shadow: var(--shadow); transition: border-color .15s, color .15s, transform .1s;
  min-height: 44px; display: inline-flex; align-items: center;
}
#chips button:hover, #chips button:focus-visible { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
#form {
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 35%);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
}
.inputwrap {
  max-width: 720px; margin: 0 auto; display: flex; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--surface); border-radius: 24px;
  padding: 6px 6px 6px 18px; align-items: flex-end;
  transition: border-color .15s, background .15s;
}
.inputwrap:focus-within { border-color: var(--accent); background: var(--card); }
#input {
  flex: 1; border: 0; outline: 0; font-size: 16px; background: transparent;
  font-family: inherit; color: var(--ink); min-width: 0;
  resize: none; line-height: 1.5; padding: 9px 0; max-height: 120px; overflow-y: auto;
}
#input::placeholder { color: var(--sub); }
#sendbtn {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; transition: transform .1s;
}
#sendbtn:active { transform: scale(.92); }
#sendbtn:disabled { opacity: 0.4; cursor: default; }