@font-face {
  font-family:'GmarketSans';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight:700;
}
@font-face {
  font-family:'GmarketSans';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight:500;
}
@font-face {
  font-family:'GmarketSans';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight:300;
}

:root {
  --bg:#F7F5F2; --white:#fff; --black:#0D0D0D;
  --blue:#0080ff; --blue2:#40a0ff; --blue3:#0055cc;
  --gold:#F5C842; --gold2:#FFE083; --gold3:#C9952A;
  --red:#E03A2F; --red2:#FF5A50;
  --gray:#888; --gray-light:#E8E5E0; --gray-mid:#C8C4BE; --sub:#5A5550;
  color-scheme: light only;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--black);}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:var(--blue);}
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* ══ NAV ══ */

/* 히어로 콘텐츠 레이아웃 */
section.hero{
  font-family:'GmarketSans','Apple SD Gothic Neo',sans-serif;
  /* Canvas 미작동 시 보일 배경색을 좀 더 구체적인 그라데이션으로 지정 */
  background-image: none !important;
  background: linear-gradient(135deg, #fff8f4 0%, #ffe0e8 50%, #e0f0ff 100%);
  position: relative;
  /* 다크모드 강제 색상 변경 방지 */
  forced-color-adjust: none !important;
  height: 689px;
}
.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-row {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 48px;
  gap: 24px;
}
.hero-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
}
.hero-right {
  position: absolute;
  right: calc(50% - 600px);
  bottom: 0;
  top: auto;
  z-index: 6;
  pointer-events: none;
  display: block;
  overflow: hidden;
}
.trophy-shine-wrapper {
  position: relative;
  overflow: hidden; /* 트로피 이미지 영역 밖으로 나가는 빛만 차단 */
  display: inline-block;
  line-height: 0;
}

/* 빛 덩어리 설정 */
.shine-glow {
  position: absolute;
  top: -20%;
  left: 0;
  width: 40%;
  height: 140%;
  background: radial-gradient(
    ellipse at center, 
    rgba(255, 255, 255, 0.5) 0%, 
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(15px);
  transform: rotate(25deg);
  z-index: 2;
  pointer-events: none;
  animation: smoothTrophyShine 4s infinite ease-in-out;
}

@keyframes smoothTrophyShine {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  35% { left: 60%; opacity: 1; }
  45% { left: 60%; opacity: 0; }
  100% { left: 60%; opacity: 0; }
}

/* 트로피 이미지 기본 설정 */
.hero-trophy-img {
  position: relative;
  z-index: 1;
}
.hero-trophy-img, .hero-trophy-img-mobile {
  mix-blend-mode: normal !important; 
  filter: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* 모바일 전용 트로피 블록 - hero 섹션 밖 */
.hero-trophy-mobile {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 0 24px 30px;
  margin-top: -2px;
}
.hero-trophy-img-mobile {
  width: clamp(220px, 80vw, 400px);
  height: auto;
  display: block;
}
.hero-txt-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 540px;
  width: 100%;
}
.hero-txt-sub {
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: .06em;
  color: #c182ff;
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid rgba(180,150,230,.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
  width: fit-content;
  opacity: 0;
  animation: slowRiseHero 1.2s .1s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-txt-line1 {
  white-space: nowrap;
  font-size: clamp(2.6rem, 11vw, 76px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  display: block;
  opacity:0;
  animation: slowRiseHero 1.4s .3s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-txt-line2 {
  white-space: nowrap;
  font-size: clamp(2.6rem, 11vw, 76px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  display: block;
  opacity:0;
  animation: slowRiseHero 1.4s .5s cubic-bezier(.22,1,.36,1) forwards;
}
/* 그라디언트 텍스트 */
.hero-txt-line1 {
  background: linear-gradient(120deg, #ee9dd3, #a389e4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0px 1px 0px #a456c9a1)
          drop-shadow(0px 1px 0px #d1a2ed);
}
.hero-txt-line2 {
  background: linear-gradient(to bottom, #7dacfc, #8bb9f7, #4d7ed3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0px 1px 0px #4274e0a1)
          drop-shadow(0px 1px 0px #8dd2f4);
}
.hero-txt-desc {
  font-size: clamp(14px, 3.5vw, 20px);
  font-weight: 500;
  color: #5a95fb;
  line-height: 1.45;
  letter-spacing: -.05em;
  margin-top: 20px;
  opacity: 0;
  animation: slowRiseHero 1.0s .9s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-trophy-img {
  display: block;
  width: 645px;
  max-width: 645px;
  height: auto;
  mix-blend-mode: multiply;
}

#heroCanvas{
  position:absolute;
  z-index: -1;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
/* 삼성 인터넷 다크모드 전용 보정 */
.samsung-dark .hero {
  background: linear-gradient(135deg, #fff8f4 0%, #ffe0e8 50%, #e0f0ff 100%);
}
.samsung-dark #heroCanvas {
  display: none;
}

/* 하단 페이드 */
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:220px;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(255,248,244,.9) 0%,transparent 100%);}

/* 콘텐츠 */
.title-row{overflow:visible;}

/* 티커 */
.hero-ticker{
  position:absolute;bottom:0;left:0;right:0;z-index:6;
  background:rgba(255,255,255,.4);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,180,200,.3);
  border-bottom:1px solid rgba(255,180,200,.3);
  padding:13px 0;overflow:hidden;
}
.ticker-track{display:flex;gap:56px;white-space:nowrap;animation:ticker 28s linear infinite;}
.ticker-track:hover{animation-play-state:paused;}
.t-item{display:flex;align-items:center;gap:10px;font-size:clamp(11px, 1vw, 13px);font-weight:700;letter-spacing:-.014em;text-transform:uppercase;color:rgba(26,16,64,.35);flex-shrink:0;}
.t-sep{color:#e06090;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideUp{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slowRiseHero {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes dotPulse{
  0%  { transform:scale(1);   box-shadow:0 0 0 0 rgba(232,123,181,.6); }
  50% { transform:scale(1.25); box-shadow:0 0 0 8px rgba(232,123,181,0); }
  100%{ transform:scale(1);   box-shadow:0 0 0 0 rgba(232,123,181,0); }
}


/* ══ TIMELINE SECTION ══ */
.tl-section { background:#F7F5F2; padding:90px 0 90px; overflow:visible; }
.tl-inner { max-width:1200px; margin:0 auto; padding:0 48px; }

.sec-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; flex-wrap:wrap; gap:12px; }
.sec-eyebrow { font-size:clamp(10px,.9vw,12px); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#A87FD8; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sec-eyebrow::before { content:''; display:block; width:20px; height:2px; background:linear-gradient(90deg,#E87BB5,#A87FD8); border-radius:2px; }
.sec-title { font-weight:700; font-size:clamp(22px,5.5vw,42px); letter-spacing:-.03em; line-height:1.15; color:#1a1040; }
.sec-title span { background:linear-gradient(90deg,#E87BB5,#A87FD8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }






/* ══ 연도 드롭다운 (모바일) ══ */
/* ══ 모바일 커스텀 드롭다운 ══ */
.yr-drop {
  display: none;
  position: relative;
  width: 100%;
}
.yr-drop-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #C4A8E8;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #7B5EA7;
  background: linear-gradient(135deg, #f8f3ff, #f0e8ff);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(168,127,216,.18);
  transition: all .2s;
  user-select: none;
  box-sizing: border-box;
}
.yr-drop-trigger:active, .yr-drop-trigger.open {
  background: linear-gradient(135deg, #efe6ff, #e6d5ff);
  border-color: #A87FD8;
  box-shadow: 0 4px 16px rgba(168,127,216,.28);
}
.yr-drop-trigger-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.yr-drop-trigger-icon svg { display: block; }
.yr-drop-trigger.open .yr-drop-trigger-icon { transform: rotate(180deg); }

.yr-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #C4A8E8;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(168,127,216,.22);
  z-index: 999;
  overflow: hidden;
  animation: dropFadeIn .18s ease;
}
@keyframes dropFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.yr-drop-menu.open { display: block; }

.yr-drop-item {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  transition: background .15s, color .15s;
  box-sizing: border-box;
}
.yr-drop-item:not(:last-child) { border-bottom: 1px solid #f0eaf8; }
.yr-drop-item:hover { background: #f8f3ff; color: #7B5EA7; }
.yr-drop-item.selected {
  background: linear-gradient(135deg, #E87BB5, #A87FD8);
  color: #fff;
}

/* native select 숨김 (접근성 유지) */
.yr-drop select { display: none; }

.yr-tabs { display:inline-flex; gap:4px; background:#fff; border:1px solid #E8E5E0; border-radius:10px; padding:4px; width:fit-content; }
.yr-btn { background:transparent; border:none; padding:clamp(7px,.7vw,9px) clamp(14px,1.5vw,22px); padding-top:clamp(9px,.9vw,11px); border-radius:7px; font-size:clamp(12px,1vw,14px); font-weight:700; cursor:pointer; color:#888; transition:all .2s; white-space:nowrap; line-height:1.2; }
.yr-btn.on, .yr-btn:hover { background:linear-gradient(135deg,#E87BB5,#A87FD8); color:#fff; box-shadow:0 4px 14px rgba(168,127,216,.3); }

/* 타임라인 래퍼 */
.tl-wrap { position:relative; }
.tl-wrap::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,#E87BB5,#A87FD8,#7EB8E8); transform:translateX(-50%); border-radius:2px; }
.tl-wrap.no-data::before{display: none;}

/* 각 행 */
.tl-row { display:grid; grid-template-columns:1fr 60px 1fr; gap:0; margin-bottom:32px; opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.tl-row.visible { opacity:1; transform:translateY(0); }
.tl-row.left  > .tl-card   { grid-column:1; grid-row:1; }
.tl-row.left  > .tl-center { grid-column:2; grid-row:1; }
.tl-row.left  > .tl-empty  { grid-column:3; grid-row:1; }
.tl-row.right > .tl-empty  { grid-column:1; grid-row:1; }
.tl-row.right > .tl-center { grid-column:2; grid-row:1; }
.tl-row.right > .tl-card   { grid-column:3; grid-row:1; }

/* 카드 */
.tl-card { 
  background:#ffffffad; 
  border:1px solid #E8E5E0; border-radius:20px 20px 16px 16px; overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s; }
.tl-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(168,127,216,.14); border-color:#C9A8E8; }

/* 썸네일 */
.tl-thumb-wrap { position:relative; }
.tl-thumb { width:100%; aspect-ratio:530/291; display:flex; align-items:center; justify-content:center; font-size:2rem; color:rgba(168,127,216,.3); overflow: hidden;border-radius: 20px;}
.tl-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.tl-card:hover{background-color: #fff;}
.tl-card:hover .tl-thumb img { transform:scale(1.04); }

/* 뱃지 */

/* 텍스트 */
.tl-body { padding:clamp(14px,1.2vw,20px) clamp(16px,1.4vw,22px) clamp(18px,1.5vw,24px); }
.tl-date { font-size:clamp(10px,.9vw,12px); font-weight:700; color:#A87FD8; letter-spacing:.1em; margin-bottom:5px; }
.tl-ttl  { font-weight:700; font-size:clamp(15px,1.4vw,19px); color:#1a1040; line-height:1.45; letter-spacing:-.01em; }
.tl-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; align-items:center; }
.tl-tag  { font-size:clamp(11px,1vw,14px); color:#9B7FD4; background:rgba(168,127,216,.08); border:1px solid rgba(168,127,216,.18); border-radius:4px; padding:6px 10px 4px; white-space:nowrap; line-height:1.4; }

/* 도트 */
.tl-center { display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.tl-dot {
  width:16px; height:16px; border-radius:50%;
  background: #ddd;
  border:3px solid #F7F5F2;
  box-shadow:0 0 0 2px #ddd;
  flex-shrink:0;
  transition: background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.tl-dot.active {
  background: linear-gradient(135deg,#E87BB5,#A87FD8);
  animation: dotPulse 1.4s ease-in-out infinite;
}

/* 더보기 */
.load-wrap { text-align:center; margin-top:52px; }
.btn-load { background:#fff; border:1.5px solid #E8E5E0; color:#1a1040; padding:clamp(12px,1vw,15px) clamp(36px,3vw,52px); border-radius:999px; font-size:clamp(13px,1vw,15px); font-weight:700; cursor:pointer; letter-spacing:.04em; transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.btn-load:hover { background:linear-gradient(135deg,#E87BB5,#A87FD8); color:#fff; border-color:transparent; box-shadow:0 8px 28px rgba(168,127,216,.35); }
.btn-load::after { content:'↓'; }

/* ══ CTA BAND ══ */
.cta-ttl-mobile { display: none; }
.cta-section {
  padding: 0 0 80px;
}
.cta-band {
  width: 96%;
  margin: 0 auto;
}
.cta-inner {
  background: linear-gradient(135deg, #1a1040 0%, #2d1060 50%, #1a1040 100%);
  border-radius: 24px;
  padding: 56px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(168,127,216,.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 50%, rgba(126,184,232,.15) 0%, transparent 60%);
}
.cta-lbl {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A87FD8;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cta-lbl::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: #A87FD8;
  border-radius: 2px;
}
.cta-ttl {
  font-weight: 700;
  font-size: clamp(20px, 5vw, 28px);
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}
.cta-ttl em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(90deg, #E87BB5, #A87FD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.cta-sub {
  font-size: clamp(12px, 3vw, 14px);
  color: rgba(255,255,255,.4);
  margin-top: 12px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.cta-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-self: end;
  align-items: flex-end;
}
.cta-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 8px;
}
.cta-stat-num {
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 700;
  color: #fff;
}
.cta-stat-num span {
  font-size: 13px;
  color: #A87FD8;
}
.cta-stat-lbl {
  font-size: clamp(11px, 1vw, 14px);
  color: rgba(255,255,255,.35);
  margin-top: 3px;
}
.cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-cta-main {
  background: linear-gradient(135deg, #E87BB5, #A87FD8);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: all .2s;
}
.btn-cta-sub {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
}
.btn-cta-sub:hover { background: rgba(255,255,255,.14); }
.btn-cta-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(168,127,216,.55);
}
.btn-cta-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 16px 38px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  transition: all .2s;
  white-space: nowrap;
}
.btn-cta-ghost:hover {
  border-color: rgba(255,255,255,.45);
  color: #fff;
}





@media(max-width:1200px){
  .hero-right { right: 0; }
  .hero-trophy-img { width: clamp(280px, 44vw, 645px); max-width: clamp(280px, 44vw, 645px); }
}

@media(max-width:900px){
  .hero { height: auto !important; overflow: visible !important; }
  .hero-inner {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    padding: 60px 0 24px 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-row {
    flex-direction: column !important;
    padding: 0 32px !important;
    gap: 0 !important;
  }
  .hero-left { 
    width: 100% !important;
    justify-content: center; 
  }
  .hero-txt-block { align-items: center !important; text-align: center !important; }
  .hero-right { display: none !important; }
  .hero-trophy-mobile { 
    display: flex !important; 
    justify-content: center;
    width: 100%;
    z-index: 7;
  }
  .hero-txt-line1, .hero-txt-line2 { font-size: clamp(2.2rem, 10vw, 4rem) !important; }
  .tl-inner { padding: 0 16px !important; }
  .yr-tabs { display: none !important; }
  .yr-drop { display: block !important; width: 100% !important; align-self: stretch !important; }
  .sec-hd { flex-direction: column !important; align-items: flex-start !important; margin-bottom: 20px !important; }
  .cta-inner { grid-template-columns:1fr !important; padding:44px 28px !important; gap:28px !important; }
  .cta-ttl-desktop { display: none !important; }
  .cta-ttl-mobile { display: block !important; }
  .cta-stats { gap:16px !important; }
  .tl-wrap { padding-left: 28px !important; }
  .tl-wrap::before { left: 7px !important; transform: none !important; }
  .tl-ttl { font-size: clamp(14px, 4vw, 17px) !important; white-space: normal !important; word-break: keep-all !important; }
  .tl-tags { flex-wrap: wrap !important; gap: 6px !important; }
}
@media(max-width:768px){
  .hero-trophy-mobile { 
    display: flex !important; 
    justify-content: center;
    width: 100%;
    z-index: 7;
  }
  .ticker-track{
    gap:32px;
    animation:ticker 18s linear infinite;
  }
  .t-item{gap:6px;}
  .cta-ttl-mobile { display: block !important; }
  .cta-section {
    padding: 0px;
  }
  .cta-band {
    width: 100%;
    margin: 0 auto;
  }
  .cta-inner {
    border-radius: 3.125vw 3.125vw 0 0;
    padding: 7.3vw 10.42vw;
    gap: 6.25vw;
  }
}

/* ══ 모바일 타임라인 아코디언 ══ */
.tl-accordion { display: none; }
.acc-year {
  border: 1.5px solid #E8E5E0;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.acc-year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.acc-year-label {
  font-size: 18px;
  font-weight: 700;
  color: #1a1040;
  letter-spacing: -.02em;
}
.acc-year-count {
  font-size: 12px;
  color: #A87FD8;
  font-weight: 700;
  background: rgba(168,127,216,.1);
  border-radius: 999px;
  padding: 3px 10px;
}
.acc-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
  color: #A87FD8;
  font-size: 14px;
}
.acc-year.open .acc-arrow { transform: rotate(180deg); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.acc-year.open .acc-body { max-height: 9999px; }
.acc-cards {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acc-card {
  background: #fafafa;
  border: 1px solid #E8E5E0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
}
.acc-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.acc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-info { flex: 1; min-width: 0; }
.acc-date {
  font-size: 11px;
  font-weight: 700;
  color: #A87FD8;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.acc-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1040;
  line-height: 1.45;
  word-break: keep-all;
  margin-bottom: 6px;
}
.acc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.acc-tag {
  font-size: 11px;
  color: #9B7FD4;
  background: rgba(168,127,216,.08);
  border: 1px solid rgba(168,127,216,.18);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}