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

/* ===== variables ===== */
:root{
  --bg:#000; --fg:#ffffffa9; --muted:#bdbdbd79; --line:#1e1e1ecb;

  /* layout */
  --page-pad:5px;
  --grid-top:-35px;
  --stage-h:100svh;

  --cards-bottom-gap:45px;

  /* grid knobs */
  --card-w:clamp(220px, 26vw, 440px);
  --grid-gap:18px;

  /* aspect and row bounds */
  --card-ratio:.78;
  --card-minh:220px;
  --card-maxh:9999px;

  /* calculated area */
  --zone-h:auto;
  --row-h:auto;

  /* responsive type scale (clamp) — 메타 작게, 타이틀 약간 작게, 장소 약간 크게 */
  --fs-meta-min: 9px;   --fs-meta-max: 11px;   /* 날짜/메타 ↓ */
  --fs-title-min: 15px; --fs-title-max: 18px; /* 타이틀 약간 ↓ */
  --fs-place-min: 8px;  --fs-place-max: 10px; /* 장소 약간 ↑ */

  /* legacy aliases so 기존 코드도 동작 */
  --type-scale:1;
  --title-size:var(--fs-title);
  --meta-size: var(--fs-meta);
  --place-size:var(--fs-place);

  /* type rhythm */
  --title-lh:1;
  --text-indent-x:3px;
  --text-shift:8px;

  /* vertical gaps */
  --title-place-gap: clamp(5px, 1.2cqi, 8px);
  --gap-meta-title: clamp(3px, 0.6cqi, 6px);
  --place-min-gap: clamp(8px, 1.2cqi, 12px);
  --place-bottom-fixed: clamp(11px, 1.2cqi, 11px);

  /* future card */
  --future-bg:#161616;
  --future-bg-hover: linear-gradient(180deg, #0a0a0a 0%, #2f224e 40%, #101416 100%);
  background: var(--future-bg-hover);  
  --future-title-color:#ffffffad;
  --future-meta-color:#e5e5e566;
  --future-place-color:#e5e5e566;
  --future-border:#1e1e1ecb;

  /* 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:30px;
  --tick-h:10px; --tick-year-h:12px; --tick-label-offset:24px;
  --heart-size:42px; --heart-bottom:-3px; --label-bottom:0px;

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

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

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

/* ===== reset ===== */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  overflow-y:hidden;
}

/* ===== layout ===== */
.news-wrap{
  position:relative;
  height:var(--stage-h);
  padding:calc(var(--header-h) + var(--grid-top)) var(--page-pad) var(--ruler-h);
  overflow-x:auto;
  overflow-y:clip;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;

  --zone-h: calc(
    var(--stage-h)
    - (var(--header-h) + var(--grid-top))
    - var(--ruler-h)
    - var(--cards-bottom-gap)
  );
  cursor:grab;
}
.news-wrap.is-dragging a {
  pointer-events: none;
}

.news-stage{
  position:relative;
  height:var(--zone-h);
  overflow:visible;
  z-index:0;
}

/* ===== grid ===== */
.news-grid{
  display:grid;
  grid-auto-flow:column;

  --row-h-final:max(var(--card-minh), var(--row-h));
  grid-template-rows:var(--row-h-final);
  grid-auto-columns:calc(var(--row-h-final) * var(--card-ratio));

  gap:var(--grid-gap);
  height:var(--zone-h);
  align-items:stretch;
  align-content:start;
  transform:none !important;
  transform-origin:0 0;
  z-index:1;

  width:max-content;
}
.news-grid.one-row{ grid-template-rows:var(--row-h-final); }
.news-grid.two-row{ grid-template-rows:repeat(2, var(--row-h-final)); }

/* ===== cards ===== */
.card{
  position:relative;
  container-type: inline-size;
  height:100%;
  background:#161616;
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; flex-direction:column;
  cursor:pointer;
  padding-bottom: var(--place-bottom-fixed); /* 바닥 여백 확보 */
  text-decoration:none;
  color:inherit;
  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; }

/* ========== 3) 카드 내부 타이포 스케일 ========== */
/* 카드 폭 기준(cqi) 스케일 — 날짜 가장 작게, 타이틀 중간, 장소 살짝 큼 */
@supports (font-size: 1cqi){
  /* 카드 폭 대략 260px ~ 420px 가정
     1cqi = 카드폭의 1% → 2.6px ~ 4.2px */
  .card .meta  { font-size: clamp(var(--fs-meta-min), 2.8cqi, var(--fs-meta-max)); } /* 날짜 */
  .card h3     { font-size: clamp(var(--fs-title-min), 3.6cqi, var(--fs-title-max)); } /* 타이틀 */
  .card .place { font-size: clamp(var(--fs-place-min), 2.4cqi, var(--fs-place-max)); } /* 장소 */
  .news-grid .card{
    /* 작은 카드 6px ~ 큰 카드 14px 범위 */
    --text-shift: clamp(6px, 2cqi, 20px);
  }
}

/* 폴백: cqi 미지원 브라우저 */
@supports not (font-size: 1cqi){
  .card .meta  { font-size: clamp(var(--fs-meta-min), 0.62vw, var(--fs-meta-max)); }
  .card h3     { font-size: clamp(var(--fs-title-min), 0.80vw, var(--fs-title-max)); }
  .card .place { font-size: clamp(var(--fs-place-min), 0.55vw, var(--fs-place-max)); }
  .news-grid .card{
    --text-shift: clamp(6px, 0.6vw, 14px);
  }
}



/* 아주 좁은 카드(모바일 2열 등) 더 보수적으로 축소 */
@container (max-width: 280px){
  .card .meta  { font-size: clamp(var(--fs-meta-min), 1.2cqi, var(--fs-meta-max)); }
  .card h3     { font-size: clamp(var(--fs-title-min), 1.8cqi, var(--fs-title-max)); }
  .card .place { font-size: clamp(var(--fs-place-min), 1.5cqi, var(--fs-place-max)); }
  .news-grid .card{ --text-shift: clamp(4px, 1.1cqi, 10px); }

}


/* media */
.card .fig{ margin:0; padding:10px 10px 0; }
.card .ph{
  aspect-ratio:1/1;
  width:100%; height:auto; display:block;
  object-fit:cover; object-position: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;
  padding-left:calc(12px + var(--text-indent-x));
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.card h3{
  margin:var(--gap-meta-title) 0 0;
  padding:0 12px 0;
  padding-left:calc(12px + var(--text-indent-x));
  line-height:var(--title-lh);
  font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* place */
.card .place{
  margin-top:auto;
  margin-bottom:0;
  margin-left:calc(12px + var(--text-indent-x));
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.95;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


/* 제목 ↔ 장소 간격: fill을 고정 높이로 */
.card .fill{
  height: var(--title-place-gap);
  min-height: var(--title-place-gap);
  flex: none;
  display:none;
}


/* padding scaling hooks (유지) */
.card .fig{ padding: calc(10px * var(--type-scale)) calc(10px * var(--type-scale)) 0; }
.card .meta{ padding-top: calc((10px + var(--text-shift)) * var(--type-scale)); }
.card h3{ margin-block-end:4px; }

/* future */
.card--future{ background:var(--future-bg); border:1px solid var(--future-border); }
.card--future:hover{
  background:var(--future-bg-hover);
  border-color: color-mix(in srgb, var(--future-border) 85%, #1e1e1ecb 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);
  z-index:50;
  padding:0 var(--page-pad);
  background:linear-gradient(
    to bottom,
    rgba(20,21,24,0) 80%,
    rgba(20,21,24,0.85) 95%,
    #0b0b0b 100%
  );
  --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:#bdbdbd79; }
.tick-label{
  position:absolute; transform:translateX(-50%);
  color:#bdbdbd79; 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);
  pointer-events:none; z-index:2; left:0; transform:translateX(-50%);
  background:none;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.28))
          drop-shadow(0 0 26px rgba(255,255,255,.16));
}
.indicator .heart3d{
  background:transparent !important; position:absolute; inset:0;
  width:100%; height:100%; display:block;
}

.indicator-label{
  position:absolute;
  bottom:calc(var(--label-bottom) + var(--label-gap) - 13px);
  padding:0 7px; border:0; border-radius:8px; background:transparent;
  color:#bdbdbddb; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:7px; white-space:nowrap; pointer-events:none; backdrop-filter:blur(18px);
  z-index:2; left:0; transform:translateX(calc(-50% + var(--label-offset-x)));
}

/* ===== theme hardening ===== */
body[data-page="news"]{
  --news-bg:#141518; --news-fg:#ffffffa9; --news-fg-strong:#fff; --news-muted:#bdbdbdbb;
  --news-shadow:0 2px 4px rgba(68,6,6,.10);
  --header-icon:var(--news-fg); --header-icon-hover:var(--news-fg-strong);
}
body[data-page="news"] header{
  background:var(--news-bg); color:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(0,0,0,.35); border-bottom:1px solid #22262b;
}
body[data-page="news"] .logo-brand{ color:var(--news-fg); }
body[data-page="news"] .logo-roman,
body[data-page="news"] .logo-korean{ color:rgba(255,255,255,.52); }
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle,.fa,.fa-solid,.fa-regular){ color:var(--header-icon); transition:color .15s ease; }
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle,.fa,.fa-solid,.fa-regular):hover{ color:var(--header-icon-hover); }
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle) svg,
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle) svg *{ stroke:currentColor !important; }
body[data-page="news"] header .cart-icon img{ filter:invert(1) opacity(.85); }
body[data-page="news"] header .cart-icon img:hover{ filter:invert(1) opacity(1); }

body[data-page="news"] #search-bar{ background:var(--news-bg); box-shadow:var(--news-shadow); }
body[data-page="news"] #search-input{
  background:var(--news-bg); color:var(--news-fg); border-color:var(--news-fg); box-shadow:none; caret-color:var(--news-fg-strong);
}
body[data-page="news"] #search-input:focus{ background:var(--news-bg); border-color:var(--news-fg); outline-color:var(--news-fg); box-shadow:none; }
body[data-page="news"] #search-input:-webkit-autofill,
body[data-page="news"] #search-input:-webkit-autofill:hover,
body[data-page="news"] #search-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--news-fg) !important;
  -webkit-box-shadow:0 0 0 1000px var(--news-bg) inset !important;
          box-shadow:0 0 0 1000px var(--news-bg) inset !important;
}

body[data-page="news"] #search-results{ background:var(--news-bg); }
body[data-page="news"] #clear-search{ color:var(--news-fg); }

body[data-page="news"] .recommend-item{ background:transparent; color:var(--news-muted); }
body[data-page="news"] .recommend-item:hover,
body[data-page="news"] .recommend-item.highlighted,
body[data-page="news"] .recommend-item[aria-selected="true"],
body[data-page="news"] .recommend-item:focus,
body[data-page="news"] .recommend-item:focus-visible{ background:transparent; color:var(--news-fg-strong); outline:none; box-shadow:none; }

body[data-page="news"] .cart{ background:var(--news-bg); color:var(--news-fg); box-shadow:-10px 0 24px rgba(0,0,0,.5); border-left:1px solid #22262b; }
body[data-page="news"] .cart__header{ border-bottom:1px solid rgba(255,255,255,.08); }
body[data-page="news"] .cart__title{ color:var(--news-fg-strong); }
body[data-page="news"] .cart__close{ color:var(--news-fg); }
body[data-page="news"] .cart__close:hover{ color:var(--news-fg-strong); }
body[data-page="news"] .cart__body{ color:var(--news-fg); }
body[data-page="news"] .cart__empty{ color:var(--news-muted); }
body[data-page="news"] .cart-backdrop{ background:rgba(0,0,0,.45); }
body[data-page="news"] .cart :is(svg,svg *){ fill:currentColor !important; stroke:currentColor !important; }
body[data-page="news"] .cart a{ color:var(--news-fg-strong); text-decoration:none; }
body[data-page="news"] .cart a:hover{ text-decoration:underline; }
body[data-page="news"] header :is(i.fa,i.fas,i.far,i.fa-solid,i.fa-regular,.fa,.fa-solid,.fa-regular){ color:var(--header-icon) !important; }
body[data-page="news"] header :is(.search-icon,.cart-icon,.icon-btn,.shop-toggle):hover
  :is(i.fa,i.fas,i.far,i.fa-solid,i.fa-regular,.fa,.fa-solid,.fa-regular){ color:var(--header-icon-hover) !important; }
body[data-page="news"] header .search-icon i{ color:var(--header-icon) !important; }
body[data-page="news"] header .search-icon:hover i{ color:var(--header-icon-hover) !important; }
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle) svg,
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle) svg *{ stroke:currentColor !important; fill:none !important; }
body[data-page="news"] header :is(.search-icon,.cart-icon) img{ filter:invert(1) opacity(.85); }
body[data-page="news"] header :is(.search-icon,.cart-icon):hover img{ filter:invert(1) opacity(1); }
body[data-page="news"] header :is(.icon-btn,.search-icon,.cart-icon,.shop-toggle):focus-visible{ color:var(--header-icon-hover) !important; outline:none; }