/* ============================================================
   metagrid1.com — 홈 대시보드 (루트 페이지)
   style.css 의 디자인 토큰(--bg, --surface, --brand …)과 헤더·버튼을 그대로
   쓰고, 여기서는 대시보드 고유의 레이아웃만 정의합니다.
   ============================================================ */

/* 소개 페이지는 세로로 긴 랜딩이라 스크롤 스냅·리빌이 있지만, 대시보드는
   한 화면에 담기는 것이 목적이라 그런 연출을 쓰지 않습니다. */
.home-body{ min-height:100%; }

.home-main{ padding-block:34px 56px; }

/* ---------- 인사말 ---------- */
.home-head{ margin-bottom:26px; }
.home-title{ font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
.home-sub{
  margin-top:8px; color:var(--text-dim); font-size:.92rem;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.home-sub .dot{ opacity:.5; }
.home-clock{ font-variant-numeric:tabular-nums; color:var(--text-soft); }

/* ---------- 시행일 전 게이트 안내 (임시) ----------
   개정 약관·방침 시행 전에는 새 기능이 관리자에게만 보입니다. 화면이 왜
   허전한지 한 줄로 알려 주는 자리입니다. 시행일이 지나면 home.js 가 감춥니다. */
.gate-note{
  margin-top:10px; padding:9px 12px;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-dim); font-size:.86rem; line-height:1.5;
  max-width:72ch;
}

/* ---------- 개정 공지 배너 ----------
   헤더 위에 얇게 깔립니다. 눈에는 띄되 화면을 잡아먹지 않아야 합니다. */
.notice-bar{
  background:var(--surface-2);
  border-bottom:1px solid var(--line-strong);
  font-size:.85rem;
}
.notice-inner{
  display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap;
  padding-block:9px;
}
.notice-inner p{ color:var(--text-soft); flex:1 1 auto; min-width:0; }
.notice-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.notice-link{
  color:var(--brand); text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.notice-link:hover{ color:var(--text); }
.notice-close{
  width:24px; height:24px; line-height:1; font-size:1.1rem; cursor:pointer;
  color:var(--text-dim); background:none; border:1px solid transparent; border-radius:6px;
  font-family:inherit;
}
.notice-close:hover{ color:var(--text); border-color:var(--line-strong); }

/* ---------- 카드 배치 ----------
   12칸 그리드. 시세 카드는 항목이 많아 두 줄을 차지합니다. */
.home-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:18px;
  align-items:start;
}
/* 1행: 날씨(5) 위치(3) 시세(4, 두 줄 차지)
   2행: 달력(4) 내 사이트(4)  ← 시세가 오른쪽 4칸을 계속 차지
   3행: 내 종목(6) 바로가기(6) */
.card-weather   { grid-column:span 5; }
.card-location  { grid-column:span 3; }
.card-markets   { grid-column:span 4; grid-row:span 2; }
.card-calendar  { grid-column:span 4; }
.card-sites     { grid-column:span 4; }
.card-tickers   { grid-column:span 6; }
.card-shortcuts { grid-column:span 6; }

@media (max-width:1080px){
  .card-weather, .card-location, .card-calendar, .card-sites,
  .card-tickers, .card-shortcuts{ grid-column:span 6; }
  .card-markets{ grid-column:span 6; grid-row:span 2; }
}
@media (max-width:760px){
  .home-grid{ gap:14px; }
  .card-weather, .card-location, .card-markets, .card-calendar,
  .card-sites, .card-tickers, .card-shortcuts{
    grid-column:span 12; grid-row:auto;
  }
}

/* ---------- 카드 ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px 22px;
}
.card-head{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:14px; flex-wrap:wrap;
}
.card-head h2{ font-size:1.02rem; letter-spacing:-.02em; }
.card-note{ font-size:.76rem; color:var(--text-dim); margin-left:auto; }
.state{ color:var(--text-dim); font-size:.9rem; }
.state.err{ color:#f0a68a; }

/* 낡은 값 표시 — 상류가 응답하지 않아 마지막 정상 값을 보여 주는 중 */
.stale-flag{
  font-size:.7rem; color:#e6c07b; border:1px solid rgba(230,192,123,.35);
  border-radius:999px; padding:1px 7px; margin-left:6px; white-space:nowrap;
}

/* ---------- 날씨 ---------- */
.wx-now{ display:flex; align-items:center; gap:16px; }
.wx-icon{ width:58px; height:58px; flex:0 0 auto; }
.wx-temp{ font-size:2.5rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.wx-cond{ color:var(--text-soft); margin-top:4px; font-size:.95rem; }

.wx-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(88px,1fr));
  gap:10px 12px; margin-top:16px;
}
.wx-meta div{ background:var(--surface-2); border-radius:var(--radius-s); padding:9px 11px; }
.wx-meta dt{ font-size:.72rem; color:var(--text-dim); }
.wx-meta dd{ font-size:.95rem; margin-top:2px; font-variant-numeric:tabular-nums; }

.wx-air{ margin-top:16px; }
.wx-air-head{
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; color:var(--text-dim); margin-bottom:8px;
}
.aqi-badge{
  font-size:.76rem; font-weight:600; border-radius:999px; padding:2px 10px;
  border:1px solid transparent;
}
/* 유럽 AQI 6단계. 색은 신호등 순서를 따르되 어두운 배경에서 읽히도록 낮춥니다. */
.aqi-1{ color:#7ee0a8; background:rgba(126,224,168,.12); border-color:rgba(126,224,168,.3); }
.aqi-2{ color:#b7e07e; background:rgba(183,224,126,.12); border-color:rgba(183,224,126,.3); }
.aqi-3{ color:#e6d07b; background:rgba(230,208,123,.12); border-color:rgba(230,208,123,.3); }
.aqi-4{ color:#f0a68a; background:rgba(240,166,138,.12); border-color:rgba(240,166,138,.3); }
.aqi-5{ color:#f08a8a; background:rgba(240,138,138,.14); border-color:rgba(240,138,138,.34); }
.aqi-6{ color:#e0a0e0; background:rgba(224,160,224,.14); border-color:rgba(224,160,224,.34); }

.wx-days{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px;
  border-top:1px solid var(--line); padding-top:14px;
}
.wx-day{ text-align:center; }
.wx-day .d{ font-size:.75rem; color:var(--text-dim); }
.wx-day .i{ width:26px; height:26px; margin:4px auto 2px; display:block; }
.wx-day .t{ font-size:.84rem; font-variant-numeric:tabular-nums; }
.wx-day .t .lo{ color:var(--text-dim); }

/* ---------- 위치 ---------- */
.loc-place{ font-size:1.12rem; font-weight:600; }
.loc-sub{ color:var(--text-soft); font-size:.88rem; margin-top:3px; }
.loc-coords{
  margin-top:14px; display:grid; gap:8px;
}
.loc-coords div{ background:var(--surface-2); border-radius:var(--radius-s); padding:9px 11px; }
.loc-coords dt{ font-size:.72rem; color:var(--text-dim); }
.loc-coords dd{ font-size:.95rem; margin-top:2px; font-variant-numeric:tabular-nums; }
.loc-accuracy{
  display:inline-block; margin-top:12px; font-size:.74rem; color:var(--text-dim);
  border:1px solid var(--line-strong); border-radius:999px; padding:2px 9px;
}
/* '정확한 위치 사용'과 '새로고침'. 좁은 카드라 줄바꿈을 허용합니다. */
.loc-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
/* '위치 사용 안 함' — 버튼 셋이 나란히 서면 무거워서 글자 링크로 둡니다. */
.link-btn{
  font-family:inherit; font-size:.76rem; color:var(--text-dim); cursor:pointer;
  background:none; border:0; padding:2px 0; text-decoration:underline;
  text-underline-offset:2px;
}
.link-btn:hover{ color:var(--text); }
.loc-actions .btn[disabled]{ opacity:.55; cursor:default; }

/* ---------- 시세 ---------- */
.mk-group + .mk-group{ margin-top:16px; }
.mk-group h3{
  font-size:.76rem; color:var(--text-dim); font-weight:600;
  letter-spacing:.02em; margin-bottom:6px;
}
.mk-row{
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.mk-group .mk-row:last-child{ border-bottom:0; }
.mk-name{ font-size:.9rem; color:var(--text-soft); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-val{ font-size:.95rem; font-variant-numeric:tabular-nums; }
.mk-chg{ font-size:.82rem; font-variant-numeric:tabular-nums; min-width:74px; text-align:right; }
/* 상승 초록 / 하락 빨강 (국제 표기). */
.mk-up{ color:#5fd39a; }
.mk-down{ color:#f0827a; }
.mk-flat{ color:var(--text-dim); }
.mk-na{ color:var(--text-dim); font-size:.82rem; }

/* ---------- 달력 ----------
   공휴일은 칠하지 않습니다(나라마다 달라 한 나라 기준은 나머지에게 오답).
   어디서나 같은 토·일만 색으로 구분합니다. */
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:10px;
}
.cal-nav, .cal-title{
  font-family:inherit; color:var(--text-soft); cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:9px;
}
.cal-nav{ width:28px; height:28px; font-size:1rem; line-height:1; flex:0 0 auto; }
.cal-nav:hover{ color:var(--text); border-color:var(--line-strong); }
.cal-title{ font-size:.95rem; font-weight:600; color:var(--text); padding:3px 10px; }
.cal-title:hover{ border-color:var(--brand); color:var(--brand); }

.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
  font-variant-numeric:tabular-nums;
}
.cal-wd{
  text-align:center; font-size:.7rem; color:var(--text-dim);
  padding-bottom:5px; border-bottom:1px solid var(--line); margin-bottom:3px;
}
.cal-cell{
  aspect-ratio:1 / 1; display:grid; place-items:center;
  font-size:.82rem; color:var(--text-soft); border-radius:9px;
}
.cal-cell.blank{ visibility:hidden; }
/* 주말. 일요일은 붉게, 토요일은 푸르게 — 머리글도 같은 색을 씁니다. */
.cal-wd.sun,  .cal-cell.sun{ color:#f0827a; }
.cal-wd.sat,  .cal-cell.sat{ color:#7fb4f0; }
/* 공휴일.
   ★ 전국 공휴일은 **빨간 글자**입니다. 달력의 오랜 관습이고, 쉬는 날을 한눈에
     알아보게 하는 것이 표시의 목적입니다. 주말 색(.sun/.sat)보다 **뒤에** 두어
     토요일에 걸린 공휴일도 빨갛게 보입니다 — 순서를 바꾸면 그 규칙이 깨집니다.
   ★ 지역 한정 공휴일은 점으로만 표시합니다. 전국 휴일과 같게 칠하면 그 지역에
     살지 않는 사람에게 '쉬는 날'로 잘못 읽힙니다. */
.cal-cell.holiday{ color:#f0605a; font-weight:600; }

.cal-cell.holiday-regional{ position:relative; }
.cal-cell.holiday-regional::after{
  content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#f0a0b8;
}

/* 오늘 칸은 브랜드색으로 채워집니다. 그 위의 빨간 글자는 읽히지 않으므로
   오늘이 이겨야 합니다(그래서 .today 를 뒤에 둡니다). */
.cal-cell.today, .cal-cell.today.holiday{ background:var(--brand); color:#04121a; font-weight:700; }
.cal-cell.today.holiday-regional::after{ background:#04121a; }

.cal-holidays{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; display:grid; gap:5px; }
.cal-hol-row{ display:flex; align-items:baseline; gap:8px; font-size:.8rem; }
.cal-hol-day{
  color:var(--text-dim); font-variant-numeric:tabular-nums;
  min-width:20px; text-align:right; flex:0 0 auto;
}
.cal-hol-name{ color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-hol-tag{
  font-size:.66rem; color:var(--text-dim); border:1px solid var(--line-strong);
  border-radius:999px; padding:0 6px; flex:0 0 auto;
}

.cal-picker{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.cal-picker label{ font-size:.72rem; color:var(--text-dim); flex:0 0 auto; }
.cal-select{
  flex:1 1 auto; min-width:0; font-family:inherit; font-size:.8rem;
  background:var(--bg-alt); color:var(--text-soft);
  border:1px solid var(--line-strong); border-radius:9px; padding:5px 8px;
}
.cal-select:focus{ outline:none; border-color:var(--brand); }
.cal-select option{ background:#11151f; color:#e8ecf4; }

/* ---------- 내 종목 ---------- */
.tk-list{ display:grid; }
.tk-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.tk-list .tk-row:last-child{ border-bottom:0; }
.tk-name{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:8px; }
.tk-sym{ font-size:.86rem; font-weight:700; color:var(--text); flex:0 0 auto; }
.tk-label{
  font-size:.78rem; color:var(--text-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 통화 코드. 값 바로 뒤에 작게 — 여러 나라 종목이 섞이므로 없으면 오독됩니다. */
.tk-cur{ font-size:.68rem; color:var(--text-dim); flex:0 0 auto; }
.tk-row .sc-mini{ position:static; opacity:0; }
.tk-row:hover .sc-mini, .tk-row:focus-within .sc-mini{ opacity:1; }

.tk-form{
  display:grid; gap:8px; margin-top:12px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-s); padding:13px;
}
.tk-form input{
  width:100%; font-family:inherit; font-size:.88rem;
  background:var(--bg-alt); color:var(--text);
  border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px;
}
.tk-form input:focus{ outline:none; border-color:var(--brand); }
.tk-results{ display:grid; gap:4px; max-height:210px; overflow-y:auto; }
.tk-result{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:start;
  font-family:inherit; cursor:pointer; color:var(--text-soft);
  background:transparent; border:1px solid transparent; border-radius:9px; padding:7px 9px;
}
.tk-result:hover{ border-color:var(--brand); color:var(--text); }
.tk-result .tk-label{ flex:1 1 auto; }
.tk-ex{ font-size:.7rem; color:var(--text-dim); flex:0 0 auto; }

/* ---------- 내 사이트 ---------- */
.site-list{ display:grid; gap:8px; }
.site-item{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid transparent;
  border-radius:var(--radius-s); padding:11px 13px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.site-item:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.site-name{ font-size:.94rem; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-host{ font-size:.74rem; color:var(--text-dim); }
.role-badge{
  font-size:.68rem; border-radius:999px; padding:2px 8px;
  border:1px solid var(--line-strong); color:var(--text-dim); white-space:nowrap;
}
.role-badge.admin{ color:var(--brand-2); border-color:rgba(167,139,250,.4); }
.role-badge.premium{ color:var(--brand-3); border-color:rgba(74,222,128,.4); }
.site-arrow{ width:14px; height:14px; stroke:var(--text-dim); flex:0 0 auto; }

/* ---------- 바로가기 ---------- */
.sc-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:10px;
}
.sc-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid transparent;
  border-radius:var(--radius-s); padding:13px 9px 11px; text-align:center;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.sc-tile:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.sc-tile.dragging{ opacity:.45; }
.sc-tile.drop-target{ border-color:var(--brand); }
.sc-mark{
  width:36px; height:36px; border-radius:11px;
  display:grid; place-items:center; font-weight:700; font-size:1rem; color:#04121a;
}
.sc-label{
  font-size:.8rem; color:var(--text-soft); width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sc-actions{
  position:absolute; top:4px; right:4px; display:flex; gap:2px;
  opacity:0; transition:opacity .15s;
}
.sc-tile:hover .sc-actions, .sc-tile:focus-within .sc-actions{ opacity:1; }
.sc-mini{
  width:22px; height:22px; border-radius:7px; border:1px solid var(--line-strong);
  background:rgba(11,14,20,.85); color:var(--text-dim);
  font-size:.72rem; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.sc-mini:hover{ color:var(--text); border-color:var(--brand); }

.chip-btn{
  margin-left:auto; font-size:.76rem; color:var(--text-soft); cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--line-strong);
  border-radius:999px; padding:3px 11px; font-family:inherit;
}
.chip-btn:hover{ color:var(--text); border-color:var(--brand); }

.sc-form{
  display:grid; gap:8px; margin-top:12px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-s); padding:13px;
}
.sc-form input{
  width:100%; font-family:inherit; font-size:.88rem;
  background:var(--bg-alt); color:var(--text);
  border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px;
}
.sc-form input:focus{ outline:none; border-color:var(--brand); }
.sc-form-row{ display:flex; gap:8px; justify-content:flex-end; }
.sc-err{ color:#f0a68a; font-size:.8rem; }

/* 안내(로그인 유도 등) */
.notice{ color:var(--text-dim); font-size:.88rem; }
.notice a{ color:var(--brand); }
.notice .btn{ margin-top:12px; }

/* ---------- 푸터 ---------- */
.home-footer{ border-top:1px solid var(--line); padding-block:26px 40px; margin-top:20px; }
.home-footer-inner{ display:grid; gap:8px; }
.foot-links{ font-size:.86rem; color:var(--text-soft); display:flex; gap:9px; flex-wrap:wrap; }
.foot-links a{ text-decoration:underline; text-underline-offset:2px; }
.foot-links a:hover{ color:var(--brand); }
.foot-links .sep{ opacity:.4; }
.foot-note{ font-size:.76rem; color:var(--text-dim); }

/* ---------- 헤더 보정 ----------
   style.css 는 720px 이하에서 .nav 를 숨깁니다. 소개 링크는 요구사항이라
   사라지면 안 되므로, 그 구간에서만 나타나는 버튼을 따로 둡니다. */
.show-narrow{ display:none; }
@media (max-width:720px){
  .show-narrow{ display:inline-flex; }
}
/* 아주 좁은 화면에서는 버튼을 줄여 없애는 대신 두 줄로 내립니다 —
   계정 관리·소개·로그인은 전부 이 화면의 요구사항이라 하나도 뺄 수 없습니다. */
@media (max-width:560px){
  .header-inner{ flex-wrap:wrap; height:auto; padding-block:10px; gap:10px 12px; }
  .header-actions{ width:100%; justify-content:flex-end; }
}

/* 인쇄: 배경 장식과 조작 버튼은 종이에 의미가 없습니다. */
@media print{
  .grid-bg, .glow, .site-header, .sc-actions, .chip-btn{ display:none !important; }
  .card{ break-inside:avoid; border-color:#999; }
}