Color psychology

<div class="wrap">
  <div class="chip" id="chip">
    <i id="dot"></i>
    <div class="txt"><b id="cname">빨강 · Red</b><span id="assoc">열정, 위험, 긴급함 — 흔히 보고되는 경향</span></div>
  </div>
  <div class="note">고정된 법칙이 아니라 문화·맥락에 따라 달라지는 경향입니다.</div>
</div>

.wrap{width:min(440px,90%);display:grid;gap:10px;justify-items:center}
.chip{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:clamp(10px,2.8vmin,16px);border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.10);cursor:pointer}
.chip i{width:clamp(28px,7vmin,40px);height:clamp(28px,7vmin,40px);border-radius:50%;flex:none;border:1px solid var(--line)}
.txt{display:grid;gap:3px;min-width:0}
.txt b{font:700 clamp(11px,2.8vmin,13px)/1.2 system-ui;color:var(--fg)}
.txt span{font:500 clamp(9px,2.4vmin,11px)/1.4 system-ui;color:var(--muted)}
.note{font:600 clamp(9px,2.4vmin,10px)/1.4 system-ui;color:var(--muted);text-align:center}

var ITEMS = [
  { name: '빨강 · Red', hex: '#dc2626', ko: '열정, 위험, 긴급함 — 흔히 보고되는 경향' },
  { name: '파랑 · Blue', hex: '#2563eb', ko: '신뢰, 차분함 — 기업 로고에서 자주 관찰됨' },
  { name: '초록 · Green', hex: '#16a34a', ko: '자연, 안전 — 지역에 따라 다르게 읽히기도 함' },
  { name: '흰색 · White', hex: '#e5e7eb', ko: '서양: 순수·웨딩 / 한국·동아시아 전통: 상복(喪服) — 같은 색이 정반대로 읽히는 사례' },
  { name: '검정 · Black', hex: '#1f2937', ko: '격식, 절제 — 맥락에 따라 상복으로도, 세련됨으로도 읽힘' },
];
var idx = 0;
var dot = document.getElementById('dot'), cname = document.getElementById('cname'), assoc = document.getElementById('assoc'), chip = document.getElementById('chip');
function render() {
  var it = ITEMS[idx];
  dot.style.background = it.hex;
  cname.textContent = it.name;
  assoc.textContent = it.ko;
}
render();
chip.addEventListener('click', function () { idx = (idx + 1) % ITEMS.length; render(); });
setInterval(function () { idx = (idx + 1) % ITEMS.length; render(); }, 2400);