:root { --ink:#19212b; --muted:#76808c; --red:#ed4659; --blue:#3978d3; --paper:#fff; --line:#e8ebef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f1f2f4; color:var(--ink); font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif; }
button,a { font:inherit; } button { cursor:pointer; } main { min-height:100vh; overflow:hidden; }
.hero { position:absolute; inset:0 0 auto; height:480px; overflow:hidden; background:#7c6f70 url('/assets/blogger-bg.jpg') center top / cover no-repeat; }
.hero::after { content:""; position:absolute; inset:0; background:rgba(26,33,38,.03); }
.brand { position:relative; z-index:2; margin:116px auto 0; text-align:center; color:#fff; font-size:46px; font-weight:800; letter-spacing:-3px; }
.heroTools { position:absolute; z-index:3; top:39px; left:50%; width:min(890px,calc(100% - 48px)); transform:translateX(-50%); display:flex; justify-content:space-between; }
.heroTools button,.share { border:0; background:transparent; color:#fff; font-size:25px; }
.postCard { position:relative; z-index:5; width:min(890px,calc(100% - 40px)); margin:207px auto 70px; padding:36px 40px 38px; background:var(--paper); box-shadow:none; }
.postHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.eyebrow { margin:0 0 8px; color:#8b929b; font-size:11px; font-weight:800; letter-spacing:1.7px; }
h1 { margin:0 0 14px; font-size:28px; line-height:1.35; letter-spacing:-1.2px; } time { color:#858b93; font-size:13px; }
.share { color:#737980; padding:0; font-size:25px; }
.performance { margin-top:36px; padding:34px 54px 28px; border:0; background:#fff; }
.performanceTop { display:flex; gap:28px; align-items:center; font-size:26px; letter-spacing:-1px; }
.chevron { color:#98a6b4; font-size:19px; } .chevron.light { color:#d7dce1; }
.performance>strong { display:block; margin:28px 0 42px; color:var(--red); font-size:48px; letter-spacing:-2px; }
.profitRows p { display:flex; justify-content:space-between; gap:20px; margin:18px 0; font-size:20px; } .profitRows b { color:#d64555; font-weight:600; }
.marketSection { padding-top:48px; } .sectionHeading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; }
h2 { margin:0; font-size:29px; letter-spacing:-1px; } .status { color:#68727d; font-size:12px; }
.status i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#39ae74; box-shadow:0 0 0 4px #e9f7f0; }
.indexGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.indexCard { padding:20px; border:1px solid var(--line); border-radius:4px; } .indexCard span { display:block; color:#737c86; font-size:12px; font-weight:700; }
.indexCard strong { display:block; margin:8px 0 5px; font-size:22px; } em { font-style:normal; font-weight:700; } .up { color:var(--red); } .down { color:var(--blue); }
.watchlist { margin-top:16px; border-top:2px solid var(--ink); } .watchlistTitle { display:flex; justify-content:space-between; align-items:center; padding:20px 4px 12px; }
.watchlistTitle h3 { margin:0; font-size:18px; } .watchlistTitle span { color:#9aa0a7; font-size:11px; }
.stockRow { display:grid; grid-template-columns:42px 1fr 130px 78px; align-items:center; min-height:68px; border-top:1px solid var(--line); }
.rank { color:#a8aeb5; font:700 12px/1 monospace; } .stockName { display:flex; flex-direction:column; gap:3px; } .stockName small { color:#9da3aa; }
.stockRow>b,.stockRow>em { text-align:right; }
.cta { display:flex; align-items:center; justify-content:space-between; margin-top:34px; padding:20px 24px; color:#fff; background:#1e2937; text-decoration:none; font-weight:800; } .cta span { font-size:24px; }
.riskNotice { margin:18px 0 0; color:#8c939b; font-size:11px; line-height:1.6; text-align:center; }
footer { position:relative; display:flex; flex-direction:column; gap:18px; padding:34px 20px 50px; color:#8f969d; font-size:11px; text-align:center; }
footer strong { color:#5d7ca1; font-size:14px; font-weight:500; }
.adminPage { display:grid; min-height:100vh; place-items:center; padding:24px; background:linear-gradient(145deg,#927b7c,#263e54); }
.adminBody { background:#263e54; }
.adminCard { width:min(520px,100%); padding:42px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.28); }
.adminEyebrow { margin:0 0 8px; color:#79828d; font-size:11px; font-weight:800; letter-spacing:2px; }
.adminCard h1 { margin:0 0 10px; font-size:30px; }
.adminIntro { margin:0 0 30px; color:#747d87; font-size:14px; }
.adminForm { display:flex; flex-direction:column; gap:12px; }
.adminForm label { font-size:13px; font-weight:800; }
.adminForm input { width:100%; height:48px; padding:0 14px; border:1px solid #cfd5dc; border-radius:3px; font-size:15px; outline:none; }
.adminForm input:focus { border-color:#1e2937; box-shadow:0 0 0 3px rgba(30,41,55,.1); }
.adminForm button { height:50px; border:0; border-radius:3px; color:#fff; background:#1e2937; font-weight:800; }
.adminMessage { margin:4px 0 0; color:#397357; font-size:12px; line-height:1.6; }.adminMessage.error { color:#c43f50; }
.adminBack { margin-top:10px; color:#65717e; font-size:12px; text-align:center; }
@media (max-width:560px) { .adminCard { padding:30px 22px; } }

@media (max-width:680px) {
  .hero { height:390px; background-position:center top; } .brand { margin-top:69px; font-size:31px; } .heroTools { top:28px; width:calc(100% - 34px); }
  .postCard { width:calc(100% - 16px); margin:136px auto 28px; padding:26px 18px 28px; }
  h1 { font-size:20px; } .eyebrow { font-size:9px; } .share { font-size:21px; }
  .performance { margin-top:25px; padding:28px 18px 20px; } .performanceTop { gap:18px; font-size:20px; }
  .performance>strong { margin:22px 0 30px; font-size:30px; letter-spacing:-1.5px; }
  .profitRows p { font-size:14px; } .profitRows b { text-align:right; }
  .marketSection { padding-top:38px; } .indexGrid { grid-template-columns:1fr; gap:8px; }
  .indexCard { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; padding:15px; } .indexCard strong { margin:0; font-size:17px; }
  .stockRow { grid-template-columns:30px 1fr 90px 60px; min-height:62px; font-size:13px; } .stockName small { font-size:10px; }
  .watchlistTitle span { display:none; } .status { font-size:10px; }
}