/* =========================
   News.css — card news + ruler/heart
   ========================= */

/* ===== variables ===== */
:root{
  --bg:#000; --fg:#fff; --muted:#bdbdbd; --line:#2a2a2a;

  /* layout */
  --page-pad:20px;
  --grid-top: 32px;            /* 헤더 아래 추가 여유 */

  /* grid knobs */
  --card-w: clamp(220px, 28vw, 310px);   /* 최소 220px ~ 최대 310px, 보통은 28vw */
  --grid-gap:18px;

  /* typography */
  --text-indent-x:3px;
  --text-shift:10px;
  --title-size:14px;
  --meta-size:8px;
  --title-lh:1.18;
  --gap-meta-title:3px;

  /* place line */
  --place-min-gap:14px;
  --place-bottom:17px;
  --place-size:9px;

  /* future card */
  --future-bg: rgba(200,119,147,0.194);
  --future-bg-hover: rgba(236, 71, 129, 0.194);
  --future-title-color:#fff;
  --future-meta-color:#cfcfcf;
  --future-place-color:#e5e5e5;
  --future-border:#efc5d7;

  /* image look */
  --ph-gap-top:10px; --ph-gap-x:10px;
  --ph-shadow:0 6px 14px rgba(30,30,30,.35);
  --ph-shadow-hover:0 10px 24px rgba(0,0,0,.45);

  /* ruler + heart */
  --ruler-h:85px; --ruler-line-h:32px;
  --tick-h:10px; --tick-year-h:12px; --tick-label-offset:24px;
  --heart-size:80px; --heart-bottom:-18px; --label-bottom:20px; 

  /* bottom offset */
  --ruler-offset:-30px;

  /* header height fallback */
  --header-h:56px;

  /* row height */
  --row-h: auto;

  --label-offset-x:-9.5px;
}

/* ===== reset ===== */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  /* 폰트는 전역(styles.css)에서 정의한 것을 그대로 상속 */
  overflow-y:hidden;
}


/* ===== layout ===== */
.news-wrap{
  position:relative; min-height:100vh;
  padding:calc(var(--header-h) + var(--grid-top)) var(--page-pad) calc(var(--ruler-h) + 8px);
  overflow-x:auto; overflow-y:hidden;
}
.news-grid{
  display:grid; grid-auto-flow:column;
  grid-template-rows:repeat(2, var(--row-h));
  grid-auto-columns:var(--card-w);
  gap:var(--grid-gap);
}

/* ===== cards ===== */
.card{
  background:#161616; border:1px solid var(--line);
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease, background .25s ease, border-color .2s ease;
}
.card.is-visible{ opacity:1; transform:translateY(0); }
.card:not(.card--future):hover{ background:#181818; }

.card .fig{ margin:0; padding:var(--ph-gap-top) var(--ph-gap-x) 0; }
.card .ph{
  aspect-ratio:1/1; width:100%; height:auto; display:block;
  object-fit:cover; object-position:center center;
  background:transparent; box-shadow:var(--ph-shadow);
  transition:box-shadow .25s ease, transform .25s ease;
}
.card:hover .ph{ box-shadow:var(--ph-shadow-hover); transform:translateY(-1px); }

.card .meta{
  margin:0;
  padding:calc(10px + var(--text-shift)) 12px 0;
  font-size:var(--meta-size); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding-left:calc(12px + var(--text-indent-x));
}
.card h3{
  margin:var(--gap-meta-title) 0 0;
  padding:0 12px 0;
  font-size:var(--title-size); line-height:var(--title-lh); font-weight:600;
  padding-left:calc(12px + var(--text-indent-x));
}
.card .fill{ flex:1 1 auto; }
.card .place{
  margin:var(--place-min-gap) 12px var(--place-bottom);
  font-size:var(--place-size); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); opacity:.95;
  margin-left:calc(12px + var(--text-indent-x));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* future */
.card--future{
  background:var(--future-bg);
  border:0.6px solid var(--future-border);
}
.card--future:hover{
  background:var(--future-bg-hover);
  border-color: color-mix(in srgb, var(--future-border) 85%, #fff 15%);
}
.card--future h3{ color:var(--future-title-color); }
.card--future .meta{ color:var(--future-meta-color); }
.card--future .place{ color:var(--future-place-color); }

/* ===== ruler ===== */
.year-ruler{
  position:fixed; left:0; right:0; bottom:var(--ruler-offset);
  height:var(--ruler-h);
  background:linear-gradient(180deg,rgba(12,12,12,0),rgba(12,12,12,.85) 30%,#0b0b0b);
  padding:0 var(--page-pad);
  z-index:50;
  overflow:visible;
  --label-bottom:10px; --label-gap:43px;
}
.ruler{
  position:relative; height:var(--ruler-line-h); width:100%;
  display:flex; align-items:end; border-bottom:0;
  overflow:visible;
}
.ticks{ position:absolute; left:0; right:0; bottom:0; height:var(--ruler-line-h); }
.tick{ position:absolute; bottom:0; width:1px; height:var(--tick-h); background:#3a3a3a; opacity:.85; }
.tick--year{ height:var(--tick-year-h); background:#c8c8c8; }
.tick-label{
  position:absolute; transform:translateX(-50%);
  color:#e6e6e6; font-weight:700; font-size:8px; letter-spacing:.06em;
  opacity:.85; bottom:-20px; pointer-events:none; z-index:2;
}

/* ===== heart + label ===== */
.indicator{
  position:absolute; bottom:var(--heart-bottom);
  width:var(--heart-size); height:var(--heart-size);
  background:url("./SecAss4/HeartArrow.png") no-repeat center / contain;
  pointer-events:none; z-index:2;
  left:0; transform:translateX(-50%);
}
.indicator-label{
  position:absolute;
  bottom:calc(var(--label-bottom) + var(--label-gap) - 5px);
  padding:0px 7px; border:0; border-radius:8px; background:transparent;
  color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:9px; white-space:nowrap; pointer-events:none; backdrop-filter:blur(6px);
  z-index:2;
  left:0; transform:translateX(calc(-50% + var(--label-offset-x)));
}

/* grid reset */
#news-grid{ padding:0; border:0; min-height:0; background:transparent; }

/* 스케일 기준점 + 전환용 클래스 */
.news-grid{
  transform-origin: top left;
  will-change: transform;
  transition: transform .18s ease;
}

/* 행 전환 토글용(기본 디자인 유지) */
.news-grid.two-row { grid-template-rows: repeat(2, auto); }
.news-grid.one-row { grid-template-rows: auto; }