*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:"Noto Sans KR",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:#222;
}
.wrap{
    max-width:1200px;
    margin:0 auto;
    margin-bottom: 30px;
}
.fhero{
    width:100%;
    height:150px;
    background:url("img/stock.png") center/cover no-repeat; /* ← 여기 변경 */
    position:relative;
    overflow:hidden;
    margin-bottom:30px;
}
.fhero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.25);
}
.fhero-title{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
    font-size:40px;
    font-weight:700;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,0.25);
    letter-spacing:5px;
}
/* Board */
.board{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
  overflow:hidden;
}

/* Header */
.head{
  padding:16px;
  border-bottom:1px solid var(--bd);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.head .title{
  font-size:16px;
  font-weight:800;
}
.head .pill{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:#f9fafb;
  color:var(--mut);
}

/* Table */
.table-wrap{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:980px;
}

thead th{
  background:#f9fafb;
  font-size:12px;
  color:#374151;
  text-align:left;
  padding:12px;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;
}

tbody td{
  padding:14px 12px;
  font-size:13px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
}

tbody tr:hover td{
  background:#f9fafb;
}

.right{ text-align:right; }

.mono{
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space:nowrap;
}

.td-title{
  font-weight:700;
  max-width:380px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Status badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
}
.badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
}

.b-ing{
  background:#eff6ff;
  color:var(--blue);
  border-color:#bfdbfe;
}
.b-ing::before{ background:var(--blue); }

.b-succ{
  background:#ecfdf5;
  color:var(--green);
  border-color:#bbf7d0;
}
.b-succ::before{ background:var(--green); }

.b-cut{
  background:#fef2f2;
  color:var(--red);
  border-color:#fecaca;
}
.b-cut::before{ background:var(--red); }

.b-over{
  background:#fffbeb;
  color:var(--amber);
  border-color:#fde68a;
}
.b-over::before{ background:var(--amber); }

/* Profit rate */
.pct{
  display:inline-block;
  min-width:76px;
  padding:6px 10px;
  border-radius:8px;
  font-weight:800;
  text-align:right;
}

.pct-plus{
  background:#ecfdf5;
  color:var(--green);
}
.pct-minus{
  background:#fef2f2;
  color:var(--red);
}
.pct-zero{
  background:#f1f5f9;
  color:#475569;
}

/* Footer */
.foot{
  padding:12px 16px;
  border-top:1px solid var(--bd);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--mut);
  background:#f9fafb;
}

/* Mobile */
@media (max-width:640px){
  .head .title{ font-size:15px; }
}

.badge{
  display:inline-block;
  padding:4px 10px;
  font-size:12px;
  border-radius:999px;
  font-weight:700;
}

/* 초록 - 목표 달성 */
.b-success{
  background:#e8f7ef;
  color:#1f8f5f;
  border:1px solid #7bdcb5;
}

/* 노랑 - 기간 초과 */
.b-warning{
  background:#fff7e6;
  color:#b7791f;
  border:1px solid #f6c453;
}

/* 빨강 - 손절 */
.b-danger{
  background:#fdecec;
  color:#d93025;
  border:1px solid #f28b82;
}

/* 기본 - 진행 중 */
.b-ing{
  background:#eef2f7;
  color:#555;
  border:1px solid #cfd8e3;
}
.days{
  font-weight:700;
}