/* css/outlook.css
 * 금리전망(rate-outlook.html) / 환율전망(fx-outlook.html) 전용 스타일.
 * 사이트 본체(Tailwind + daisyUI dark)와 같은 색 계열을 쓰되,
 * 이 두 화면은 외부 CSS 프레임워크 없이 단독으로 렌더된다.
 */
:root{
  --bg:#1d232a; --panel:#191e24; --panel2:#20262d; --line:#2f3944;
  --tx:#e8edf2; --tx2:#9fb0c0; --tx3:#6f8092;
  --pri:#4f9cf9; --pri-d:#3b82f6; --ok:#22c55e; --warn:#f59e0b;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400; line-height:1.6; word-break:keep-all;
  padding-bottom:48px;
}
a{color:inherit;text-decoration:none}

/* ── 헤더 ───────────────────────────────────────── */
header{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
header .logo{width:22px;height:22px;color:var(--pri);flex:0 0 auto}
header h1{font-size:17px;font-weight:700;margin:0;flex:1 1 auto;letter-spacing:-.2px}
header button#refreshBtn{
  background:transparent;border:1px solid var(--line);color:var(--tx2);
  width:32px;height:32px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
header button#refreshBtn:hover{color:var(--pri);border-color:var(--pri)}
header button#refreshBtn.spin svg{animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
header a.home{
  font-size:13px;color:var(--tx2);padding:6px 11px;border-radius:9px;
  border:1px solid var(--line);white-space:nowrap;flex:0 0 auto;
}
header a.home:hover{color:var(--tx);border-color:var(--pri)}

/* ── 본문 컨테이너 ──────────────────────────────── */
#app{max-width:960px;margin:0 auto;padding:20px 16px 0}
.intro{
  font-size:13.5px;color:var(--tx2);line-height:1.75;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;margin-bottom:18px;
}

/* ── 최신호 히어로 ──────────────────────────────── */
.hero{
  background:linear-gradient(135deg,#1e3a5f 0%,var(--panel2) 62%);
  border:1px solid #2c4a70;border-radius:var(--r);
  padding:20px 20px 18px;margin-bottom:18px;
}
.hero h2{
  font-size:19px;font-weight:700;margin:10px 0 16px;
  line-height:1.5;letter-spacing:-.3px;
}
.hbadges{display:flex;gap:6px;flex-wrap:wrap}
.hact{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  display:inline-block;background:var(--pri-d);color:#fff;
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;
}
.btn:hover{background:var(--pri)}
.btn.ghost{background:transparent;border:1px solid #3d5f88;color:var(--tx2)}
.btn.ghost:hover{color:var(--tx);border-color:var(--pri)}

/* ── 주기 탭 ────────────────────────────────────── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tab{
  background:var(--panel);border:1px solid var(--line);color:var(--tx2);
  font-family:inherit;font-size:13px;padding:7px 15px;border-radius:999px;cursor:pointer;
}
.tab:hover{color:var(--tx)}
.tab.on{background:var(--pri-d);border-color:var(--pri-d);color:#fff;font-weight:600}
.meta-line{font-size:12px;color:var(--tx3);margin:0 2px 14px}

/* ── 리포트 카드 ────────────────────────────────── */
main#grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--pri);transform:translateY(-2px)}
.badges{display:flex;gap:5px;flex-wrap:wrap}
.badge{
  font-size:11px;color:var(--tx2);background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap;
}
.badge.new{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.45);color:#4ade80;font-weight:600}
.card .ttl{font-size:15px;font-weight:600;line-height:1.45;letter-spacing:-.2px}
.card .ttl:hover{color:var(--pri)}
.card .desc{
  font-size:12.5px;color:var(--tx2);margin:0;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card .foot{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--tx3);border-top:1px solid var(--line);
  padding-top:9px;margin-top:auto;
}
.card .links{display:flex;gap:10px}
.card .links a{color:var(--tx2)}
.card .links a:hover{color:var(--pri)}
.card .links a.open{color:var(--pri);font-weight:600}

/* ── 로딩 / 빈 상태 ─────────────────────────────── */
.skel{
  height:132px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:sh 1.3s infinite;
}
@keyframes sh{to{background-position:-200% 0}}
.state{
  grid-column:1/-1;text-align:center;padding:56px 16px;
  color:var(--tx2);font-size:14px;line-height:1.8;
}
.state .big{font-size:42px;margin-bottom:10px}
.state small{color:var(--tx3);font-size:12.5px}

@media (max-width:560px){
  header h1{font-size:15px}
  #app{padding:16px 12px 0}
  .hero h2{font-size:17px}
  main#grid{grid-template-columns:1fr}
}