/* ==================================================================
   TARO-BUILD-09 — 차별화 5개 항목
   병렬 세션이 style.css 를 재작성 중이므로, 이 작업의 컴포넌트 스타일은
   이 파일에만 둔다(충돌 방지). index.html 에서 style.css 뒤에 링크한다.
   ================================================================== */

/* ---------------- §1 자개 덱 포지셔닝 (히어로 아래 eyebrow) ---------------- */
/* BUILD-08 이 확보한 "입력창이 스크롤 없이 보인다" 여유를 잠식하지 않도록
   한 줄 높이 + 4px 여백으로 눌러 둔다(실측: 30px → 19~21px). */
.deck-line{
  margin:0 0 4px;
  font-size:clamp(11px,1.7vw,12.5px);
  line-height:1.38;
  letter-spacing:.05em;
  color:var(--gold-soft,#BF934E);
  text-align:start;
  opacity:.92;
}

/* ---------------- §3 회고 메모 ---------------- */
.reflect-box{
  margin:28px 0 0;
  padding:18px 16px 16px;
  border:1px solid var(--line,rgba(191,147,78,.22));
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.reflect-prompt{
  margin:0 0 14px;
  font-family:var(--font-title,ui-serif,Georgia,serif);
  font-size:clamp(15px,3.6vw,18px);
  line-height:1.5;
  color:var(--ink,#EFE7D8);
}
.reflect-label{
  display:block;
  margin:0 0 8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-soft,#BF934E);
}
#reflectNote{min-height:64px}
.reflect-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.reflect-actions .hint{margin:0;font-size:12px}
#screen-read .actions{flex-wrap:wrap;gap:10px}

/* ---------------- §4 도감 ---------------- */
.daily-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.collection-link{
  margin:0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:11px;letter-spacing:.08em;
  color:var(--gold,#C89B54);
  text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;
}
.collection-link:hover{color:var(--ink,#EFE7D8)}
.collection-link:focus-visible{outline:2px solid var(--gold-soft,#BF934E);outline-offset:3px;border-radius:4px}

.collection-progress{margin:4px 0 6px;font-size:13px;letter-spacing:.04em;color:var(--gold-soft,#BF934E)}
.collection-hint{margin:0 0 22px}

.collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:clamp(8px,2vw,14px);
  margin:0 0 10px;
}
.collection-cell{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.collection-frame{
  position:relative;aspect-ratio:2/3;border-radius:7px;overflow:hidden;
  background:#0a0a0d;border:1px solid var(--line,rgba(191,147,78,.22));
}
.collection-frame img{display:block;width:100%;height:100%;object-fit:cover}
.collection-back{
  position:absolute;inset:0;
  background-color:#0E0B07;
  background-image:var(--card-back-image);
  background-size:var(--card-back-size);
  background-position:center;
  background-repeat:no-repeat;
}
.collection-name{
  margin:0;font-size:10.5px;line-height:1.3;
  color:var(--ink-dim,#B9B0A2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.collection-cell.is-locked .collection-name{color:var(--ink-faint,#8C8477);opacity:.55}
.collection-dl{
  margin:0;padding:4px 2px;
  border:1px solid var(--line-soft,rgba(191,147,78,.13));border-radius:6px;
  background:transparent;color:var(--gold-soft,#BF934E);
  font:inherit;font-size:10px;line-height:1.2;cursor:pointer;
}
.collection-dl:hover{border-color:var(--gold,#C89B54);color:var(--gold,#C89B54)}
.collection-dl:focus-visible{outline:2px solid var(--gold-soft,#BF934E);outline-offset:2px}