/* ARKHIVE — 기록 비교. event.css(ev-wrap · ev-title · ev-grade) 위에 얹습니다. */
.cmp .ev-title { align-items: flex-end; }
.cmp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-acts .ark-btn[disabled] { opacity: .4; pointer-events: none; }
.cmp-sw { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px 0 14px; border: 1px solid rgba(28,28,30,.2); border-radius: var(--r-ctl, 8px); background: #fff; font: 700 13px var(--font-body); color: var(--ink); cursor: pointer; }
.cmp-sw[disabled] { opacity: .4; cursor: default; }
.cmp-sw .tg { position: relative; width: 34px; height: 20px; border-radius: 7px; background: #D9D7D2; transition: background .15s; }
.cmp-sw .tg i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 5px; background: #fff; transition: transform .15s; }
.cmp-sw.on .tg { background: var(--ink); }
.cmp-sw.on .tg i { transform: translateX(14px); }

.cmp-note { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 20px; padding: 11px 14px; background: #F5F4F2; border-radius: var(--r-sm, 6px); font-size: 12.5px; line-height: 1.6; color: #55555A; }
.cmp-note p { margin: 0; }
.cmp-note b { color: var(--ink); }
.cmp-note em { font-style: normal; color: var(--ink); font-weight: 700; }

.cmp-empty { text-align: center; padding: 80px 20px; }
.cmp-empty .ark-mono { font-size: 11px; letter-spacing: .18em; color: var(--stone); }
.cmp-empty p { margin: 12px 0 20px; font-size: 14px; }

/* 표 — 머리와 몸이 같은 칸 나눔: 항목 이름 168px + 기록 칸(모두 같은 폭) */
.cmp-table { --lc: 168px; --tpl: var(--lc) repeat(var(--n), minmax(0, 1fr)); }
.cmp-head, .cmp-body { display: grid; grid-template-columns: var(--tpl); }
.cmp-head { position: sticky; top: 60px; z-index: 20; background: #fff; border-bottom: 2px solid var(--ink); box-shadow: 0 8px 14px -12px rgba(28,28,30,.35); }

/* 왼쪽 항목 이름 — 아이콘 칸 24px 한 줄 · 글자는 모두 같은 세로선에서 시작 */
.cmp-lab { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-auto-rows: auto; column-gap: 10px; row-gap: 4px; align-content: start; padding: 16px 12px 16px 0; border-bottom: 1px solid rgba(28,28,30,.1); min-width: 0; }
.cmp-lab.hd { align-content: center; border-bottom: 0; }
.cmp-lab .ic { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 18px; color: var(--ink); }
.cmp-lab .ic .ark-ki { width: 17px; height: 17px; vertical-align: 0; opacity: .85; }
.cmp-lab .ic .cmp-pic { width: 22px; height: 22px; }
.cmp-lab b { grid-row: 1; grid-column: 2; align-self: center; font-size: 12.5px; font-weight: 700; line-height: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-lab em { grid-column: 2; font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; line-height: 1.2; color: var(--stone); }
.cmp-lab .eq { grid-column: 2; margin-top: 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--stone); }

.cmp-cell { min-width: 0; padding: 16px; border-bottom: 1px solid rgba(28,28,30,.1); border-left: 1px solid rgba(28,28,30,.08); }
.cmp-cell.empty { background: repeating-linear-gradient(135deg, #FAFAF8 0 8px, #F5F4F2 8px 16px); }

/* 열 머리 — 기록 고르기 */
.cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 14px 16px 12px; border-left: 1px solid rgba(28,28,30,.08); min-width: 0; }
.cmp-pick .sel { position: relative; display: flex; align-items: center; min-width: 0; height: 42px; padding: 0 34px 0 13px; border: 1px solid rgba(28,28,30,.22); border-radius: var(--r-ctl, 8px); background: #fff; cursor: pointer; }
.cmp-pick .sel:hover { border-color: var(--ink); }
.cmp-pick .sel .vis { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-pick .sel .ar { position: absolute; right: 12px; font-size: 11px; color: var(--stone); }
.cmp-pick .sel select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 14px; }
.cmp-pick.empty .sel { border-style: dashed; color: var(--stone); }
.cmp-pick .x { width: 34px; height: 34px; border: 1px solid rgba(28,28,30,.16); border-radius: var(--r-ctl, 8px); background: #fff; font-size: 18px; line-height: 1; color: var(--stone); cursor: pointer; }
.cmp-pick .x:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cmp-pick .sub { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--stone); }
.cmp-pick .sub a { color: var(--ink); text-decoration: none; font-weight: 500; }
.cmp-pick .sub a:hover { color: var(--red); }

/* 사진 — 열마다 따로 넘김 */
.cmp-slide { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-sm, 6px); overflow: hidden; background: var(--ink); isolation: isolate; }
.cmp-slide-img { position: absolute; inset: 0; display: block; }
.cmp-slide-img .tone { position: absolute; inset: 0; }
.cmp-slide-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cmp-slide-img .num { position: absolute; right: 4%; bottom: -6%; font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: .8; color: rgba(255,255,255,.08); }
.cmp-slide .crop { position: absolute; z-index: 2; }
.cmp-arw { position: absolute; top: 50%; z-index: 3; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: var(--r-ctl, 8px); background: rgba(28,28,30,.7); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.cmp-arw:hover { background: var(--red); }
.cmp-arw.l { left: 8px; } .cmp-arw.r { right: 8px; }
.cmp-frame { position: absolute; left: 10px; bottom: 9px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.75); }
.cmp-cnt { position: absolute; right: 8px; bottom: 7px; z-index: 3; padding: 3px 7px; border-radius: var(--r-xs, 4px); background: rgba(28,28,30,.75); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: #fff; }

/* 트러스트 라이트 — 단순 글 상자, 모든 칸 같은 폭 */
.cmp-tl { display: inline-flex; align-items: center; gap: 8px; width: 200px; max-width: 100%; height: 34px; padding: 0 12px; border: 1px solid; border-radius: var(--r-sm, 6px); font-size: 12px; white-space: nowrap; }
.cmp-tl i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmp-tl b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.cmp-tl span { margin-left: auto; font-weight: 700; }
.cmp-tl.green { color: var(--tg-head); border-color: var(--tg-line); background: var(--tg-fill); } .cmp-tl.green i { background: var(--tg-line); }
.cmp-tl.yellow { color: var(--ty-head); border-color: var(--ty-line); background: var(--ty-fill); } .cmp-tl.yellow i { background: var(--ty-line); }
.cmp-tl.red { color: var(--tr-head); border-color: var(--tr-line); background: var(--tr-fill); } .cmp-tl.red i { background: var(--tr-line); }
.cmp-tl-note { margin-top: 7px; font-size: 12px; color: #55555A; }

/* 전광판 칸 — 한 글자 = 같은 폭 */
.cmp-fb { display: inline-flex; align-items: center; gap: 2px; }
.cmp-fb i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 30px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px rgba(28,28,30,.16); font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-fb i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(28,28,30,.12); }
.cmp-fb i.off { background: #F5F4F2; box-shadow: inset 0 0 0 1px rgba(28,28,30,.06); }
.cmp-fb b { width: 7px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--stone); }
.cmp-period { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cmp-period .sep { font-family: var(--font-display); font-weight: 700; color: var(--stone); }
.cmp-period .days { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
/* 휴대폰 기간 — 연도는 작은 머리줄, 날짜는 한 줄 (해를 넘겨도 날짜 줄 모양은 같음) */
.cmp-period-m { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cmp-period-m .yr { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--stone); white-space: nowrap; }
.cmp-period-m .yr i { font-style: normal; }
.cmp-period-m b { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
/* 휴대폰 공개 사진 · 연도 — 기간과 같은 글자 규칙 (작은 머리줄 + 굵은 숫자 한 줄) */
.cmp-stat-m { display: flex; gap: 18px; }
.cmp-stat-m > div { display: flex; flex-direction: column; gap: 5px; }
.cmp-stat-m > div:first-child { width: 76px; flex: none; }
.cmp-stat-m .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--stone); white-space: nowrap; }
.cmp-stat-m b { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.cmp-stat-m b small { margin-left: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.cmp-stat { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.cmp-stat > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cmp-stat .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--stone); }

/* O / X — 색은 전광판 칸에만. 글자는 같은 색 · 같은 굵기 */
.cmp-ox { display: flex; align-items: center; gap: 10px; }
.cmp-ox .t { min-width: 3em; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink); }
.cmp-ox.n .t { color: var(--stone); }
.cmp-ox .ark-flap { box-shadow: 0 0 0 1px rgba(28,28,30,.14); border-radius: 3px; }
.cmp-desc { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink); }

.cmp-txt { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.cmp-txt b { display: block; font-weight: 700; }
.cmp-txt small { display: block; margin-top: 3px; font-size: 12px; color: var(--stone); }
.cmp-nil { color: var(--stone); }
.cmp-games { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-gchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 3px; border: 1px solid rgba(28,28,30,.14); border-radius: var(--r-ctl, 8px); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-games .more { align-self: center; font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.cmp-feat { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }

/* 휴대폰 묶음 머리(▼ 접고 펴기) */
.cmp-grp { grid-column: 1 / -1; display: grid; grid-template-columns: 24px auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 8px; width: 100%; margin-top: 10px; padding: 12px 12px; border: 0; border-radius: var(--r-sm, 6px); background: var(--ink); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.cmp-grp .ic { display: flex; justify-content: center; color: #fff; }
.cmp-grp .ic .ark-ki { width: 16px; height: 16px; opacity: .9; --picto-knock: var(--ink); }
.cmp-grp b { font-size: 13.5px; font-weight: 700; }
.cmp-grp em { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: rgba(255,255,255,.55); }
.cmp-grp .n { justify-self: end; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.7); white-space: nowrap; }
.cmp-grp .n i { font-style: normal; }
.cmp-grp .ar { font-size: 10px; transition: transform .18s; transform: rotate(-90deg); }
.cmp-grp.open .ar { transform: none; }
.cmp-grp .sum { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-grp .sum .col { display: flex; gap: 3px; }
.cmp-grp .sum .m { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; border-radius: 3px; background: #F5F4F2; font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1; }
.cmp-grp .sum .m.o { color: #1F8A4C; } .cmp-grp .sum .m.x { color: #B03020; } .cmp-grp .sum .m.n { color: #8E8E93; }
.cmp-grp .sum.txt { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 휴대폰 — 2칸, 항목 이름은 줄 머리로 */
@media (max-width: 759px) {
  .cmp .ev-h1 { font-size: 40px; }
  .cmp-acts { width: 100%; }
  .cmp-acts .cmp-sw { margin-right: auto; }
  .cmp-table { --tpl: repeat(2, minmax(0, 1fr)); margin: 0 -4px; }
  .cmp-head { top: 60px; }
  .cmp-pick { padding: 10px 6px 9px; border-left: 0; }
  .cmp-pick + .cmp-pick { border-left: 1px solid rgba(28,28,30,.08); }
  .cmp-pick .sel { height: 38px; padding: 0 24px 0 9px; }
  .cmp-pick .sel .vis { font-size: 13px; }
  .cmp-pick .sel .ar { right: 8px; }
  .cmp-pick .x { width: 28px; height: 28px; font-size: 15px; }
  .cmp-lab { grid-column: 1 / -1; grid-template-columns: 24px auto minmax(0, 1fr) auto; padding: 14px 4px 8px; border-bottom: 0; }
  .cmp-lab em { grid-row: 1; grid-column: 3; align-self: center; }
  .cmp-lab .eq { grid-row: 1; grid-column: 4; margin: 0; align-self: center; }
  .cmp-tl { width: 100%; padding: 0 9px; gap: 6px; }
  .cmp-tl b { font-size: 10px; letter-spacing: .06em; }
  .cmp-desc { font-size: 12px; }
  .cmp-cell { padding: 6px 6px 14px; border-left: 0; }
  .cmp-cell + .cmp-cell { border-left: 1px solid rgba(28,28,30,.08); }
  .cmp-arw { width: 26px; height: 26px; margin-top: -13px; font-size: 15px; }
  .cmp-arw.l { left: 5px; } .cmp-arw.r { right: 5px; }
  .cmp-frame { display: none; }
  .cmp-slide-img .num { font-size: 60px; }
  .cmp-fb i { width: 15px; height: 24px; font-size: 15px; border-radius: 3px; }
  .cmp-fb b { width: 5px; font-size: 14px; }
  .cmp-period { gap: 4px; }
  .cmp-stat { gap: 10px 12px; }
  .cmp-ox { gap: 7px; }
  .cmp-txt { font-size: 12.5px; }
  .cmp-feat { font-size: 12px; padding-left: 15px; }
}

/* ── 검색 · 상세 — 비교 담기 칸 / 담기 바 ───────────────────────── */
.cmpk-box { position: absolute; top: 10px; right: 10px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(28,28,30,.22); border-radius: var(--r-ctl, 8px); background: rgba(255,255,255,.94); font: 700 11.5px var(--font-body); color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cmpk-box i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 5px; background: #fff; font-style: normal; font-size: 12px; line-height: 1; color: transparent; }
.cmpk-box:hover { border-color: var(--ink); }
.cmpk-box.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cmpk-box.on i { background: #fff; border-color: #fff; color: var(--ink); }
.cmpk-box.full { opacity: .55; }
.cmpk-box.sm { top: 8px; right: 8px; height: 28px; padding: 0 5px; }
.cmpk-box.sm .l { display: none; }
.cmpk-box.row { position: static; box-shadow: none; }
.e-card { position: relative; }

.cmpk-tray { position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 9px 9px 9px 16px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.28); animation: cmpkIn .2s ease; }
@keyframes cmpkIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.cmpk-tray .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; white-space: nowrap; color: rgba(255,255,255,.75); }
.cmpk-tray .n b { color: #fff; }
.cmpk-tray .chips { display: flex; gap: 6px; min-width: 0; }
.cmpk-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 190px; height: 32px; padding: 0 8px 0 11px; border: 0; border-radius: var(--r-ctl, 8px); background: #2E2E32; color: #fff; font: 700 12px var(--font-body); cursor: pointer; }
.cmpk-chip .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpk-chip .x { opacity: .55; font-size: 14px; }
.cmpk-chip:hover .x { opacity: 1; }
.cmpk-slot { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 32px; border: 1px dashed rgba(255,255,255,.3); border-radius: var(--r-ctl, 8px); color: rgba(255,255,255,.45); font-size: 14px; }
.cmpk-tray .clr { border: 0; background: none; color: rgba(255,255,255,.6); font: 500 12px var(--font-body); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cmpk-tray .clr:hover { color: #fff; }
.cmpk-tray .go { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-ctl, 8px); background: #fff; color: var(--ink); font: 700 13px var(--font-body); text-decoration: none; white-space: nowrap; }
.cmpk-tray .go:hover { background: var(--red); color: #fff; }
.cmpk-tray .go.off { background: rgba(255,255,255,.18); color: rgba(255,255,255,.6); cursor: default; }
.cmpk-tray .msg { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; border-radius: var(--r-ctl, 8px); background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
@media (max-width: 759px) {
  .cmpk-tray { bottom: 14px; gap: 8px; padding: 8px 8px 8px 14px; }
  .cmpk-tray .chips { display: none; }
}
/* 상세 화면 「비교에 담기」 */
.ev-cmpbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; --picto-knock: var(--ink); }
.ev-cmpgo { font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: underline; white-space: nowrap; }

/* ── 검색 PC — 필터를 머리 줄 아래에 붙여 고정 ───────────────────── */
.e-shell.nof { grid-template-columns: minmax(0, 1fr); }
.e-topf { background: var(--ink); }
.e-topf .in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 1440px; margin: 0 auto; padding: 10px clamp(20px, 3.4vw, 44px); box-sizing: border-box; }
.e-topf .lb { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.5); margin-right: 2px; white-space: nowrap; }
.e-topf .sp { width: 1px; height: 22px; margin: 0 4px; background: rgba(255,255,255,.14); }
.e-topf .grow { flex: 1; }
.e-topf .g { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.e-topf .e-tl { width: auto; grid-template-columns: 7px auto auto auto; height: 32px; cursor: pointer; font: inherit; color: inherit; }
.e-topf .e-tl .ct, .e-tcat i { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.e-tcat { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xs, 4px); background: transparent; color: rgba(255,255,255,.7); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.e-tcat:hover { border-color: #fff; color: #fff; }
.e-tcat.on { background: #fff; border-color: #fff; color: var(--ink); font-weight: 600; }
.e-tcat.on i { color: var(--ink); opacity: .6; }
.e-tcat.zero { opacity: .4; }
.e-topf .e-sel { height: 32px; padding-top: 0; padding-bottom: 0; }
.e-topf .dash { color: rgba(255,255,255,.4); font-size: 12px; }
.e-topf .cnt { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; }
.e-topf .cnt b { color: #fff; font-size: 14px; }
.e-topf .rst { height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-xs, 4px); background: none; color: #fff; font: 700 12px var(--font-body); cursor: pointer; }
.e-topf .rst:hover { background: #fff; color: var(--ink); }

@media (max-width: 1339px) { .e-topf .sp { display: none; } .e-topf .g { margin-right: 6px; } }

.e-topf .fold { display: inline-flex; align-items: center; gap: 8px; height: 32px; min-width: 28px; justify-content: center; padding: 0 6px; margin: 0 4px 0 0; padding-left: 0; justify-content: flex-start; border: 0; border-radius: var(--r-xs, 4px); background: none; color: #fff; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; }
.e-topf .fold i { display: inline-block; font-style: normal; font-size: 10px; transition: transform .18s; }
.e-topf.folded .fold i { transform: rotate(-90deg); }
.e-topf .fold:hover { color: var(--red); }
.e-topf.folded .in { padding-top: 4px; padding-bottom: 4px; }
.e-topf .sum { display: inline-flex; align-items: center; gap: 0; height: 28px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.75); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.e-topf .sum span + span::before { content: "/"; margin: 0 10px; color: rgba(255,255,255,.3); }
.e-topf .sum .n { color: #fff; }
.cmpk-toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.28); animation: cmpkIn .2s ease; }
.cmpk-toast .t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; line-height: 1.5; }
.cmpk-toast .t b { font-weight: 700; white-space: nowrap; }
.cmpk-toast .t span { color: rgba(255,255,255,.75); }
.cmpk-toast .x { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-ctl, 8px); background: rgba(255,255,255,.1); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.cmpk-toast .x:hover { background: rgba(255,255,255,.22); }

.e-topf .rst { margin-left: 6px; }
@media (max-width: 1339px) { .e-topf .e-tl .kr { display: none; } .e-topf .e-tl { grid-template-columns: 7px auto auto; } }

/* 접은 필터 줄 — 분류는 그대로, 트러스트 라이트는 점 + 이름, 연도는 요약 칸. 모두 그 자리에서 동작 */
.e-topf .fold:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.e-topf.folded .in { padding-top: 6px; padding-bottom: 6px; }
.e-topf.folded .fold { color: rgba(255,255,255,.6); }
.e-topf.folded .fold:hover { color: #fff; }
.e-topf.folded .e-tcat, .e-topf.folded .e-tl, .e-topf .ypill { height: 28px; }
.e-topf.folded .e-tcat i, .e-topf.folded .e-tl .kr, .e-topf.folded .e-tl .ct { display: none; }
.e-topf.folded .e-tl { grid-template-columns: 7px auto; padding: 0 9px; }
.e-topf .ypill { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xs, 4px); background: none; color: rgba(255,255,255,.8); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.e-topf .ypill:hover { border-color: #fff; color: #fff; }
.e-topf .cnt { margin-left: 6px; font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.6); white-space: nowrap; }
.e-topf .cnt b { font-size: 13px; color: #fff; margin-right: 1px; }
.e-topf .rst { margin-left: 6px; }

/* 좁은 화면(900px 이하) — 서랍 없음. 묶음 단위로 줄바꿈해 모든 필터가 한 번에 보이고, 한 번 눌러 바로 적용 */
@media (max-width: 900px) {
  .e-topf { display: block; }
  .e-topf .in { flex-wrap: wrap; row-gap: 8px; }
  .e-topf .g { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .e-topf .g::-webkit-scrollbar { display: none; }
  .e-topf .g.cat { flex: 1 1 0; min-width: 0; margin-right: 0; }
  .e-topf .in > .sp { display: none; }
  .e-topf .in > .g.cat + .sp { display: block; flex: 0 0 100%; width: auto; height: 0; margin: 0; background: none; }
  .e-topf .in { position: relative; padding-left: calc(clamp(20px, 3.4vw, 44px) + 36px); }
  .e-topf .fold { position: absolute; left: clamp(20px, 3.4vw, 44px); top: 10px; margin: 0; }
  .e-topf.folded .fold { top: 4px; }
  .e-topf.folded .g.tl, .e-topf.folded .g.yr { display: none; }
  .e-topf .e-tcat, .e-topf .e-tl, .e-topf .rst { flex: none; }
  .e-mobilebar { display: none !important; }
}

/* PC — 구분선 없이 로고 줄에 이어 붙임(위 8 · 아래 14) */
@media (min-width: 901px) { .e-topf .in { padding-top: 8px; padding-bottom: 14px; } }
@media (max-width: 900px) { .e-topf .in { padding-top: 4px; } .e-topf .fold { top: 4px; } .e-topf.folded .fold { top: 2px; } .e-topf.folded .in { padding-top: 2px; padding-bottom: 10px; } }

/* 비교 바 · 안내의 픽토그램 */
.cmpk-tray .clr { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.cmpk-tray .clr .ark-ki { width: 15px; height: 15px; vertical-align: 0; opacity: .8; }
.cmpk-tray .go { gap: 8px; --picto-knock: #fff; }
.cmpk-tray .go .ark-ki { width: 16px; height: 16px; vertical-align: 0; opacity: 1; }
.cmpk-toast > .ark-ki { flex: none; width: 17px; height: 17px; vertical-align: 0; opacity: .9; margin-right: -2px; }

/* ── 비교 화면 다듬기 (2026.11.13) ─────────────────────────────── */
.cmp-gap { height: 22px; }
.cmp-note { margin: 16px 0 18px; padding: 9px 14px; }
.cmp-note p { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* 열 머리 — 검은 띠. 번호 · 기록 이름(누르면 바꾸기) · 분류 · 연월 · 기록 보기 */
.cmp-head { background: var(--ink); color: #fff; border-bottom: 0; border-radius: 10px; box-shadow: 0 10px 22px -14px rgba(28,28,30,.6); overflow: hidden; }
.cmp-head .cmp-lab.hd { padding-left: 18px; align-content: center; }
.cmp-head .cmp-lab .ic, .cmp-head .cmp-lab b { color: #fff; }
.cmp-head .cmp-lab .ic .ark-ki { --picto-knock: var(--ink); opacity: 1; }
.cmp-head .cmp-lab em { color: rgba(255,255,255,.5); }
.cmp-pick { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; padding: 14px 14px 12px 16px; border-left: 1px solid rgba(255,255,255,.12); }
.cmp-pick .no { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: rgba(255,255,255,.35); }
.cmp-pick .sel { height: 36px; padding: 0 26px 0 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); border-radius: 0; background: none; }
.cmp-pick .sel:hover { border-color: #fff; }
.cmp-pick .sel .vis { font-size: 15.5px; color: #fff; }
.cmp-pick .sel .ar { right: 4px; color: rgba(255,255,255,.6); }
.cmp-pick .sel select { color: #1C1C1E; }
.cmp-pick.empty .sel { border-bottom-style: dashed; }
.cmp-pick.empty .sel .vis { color: rgba(255,255,255,.5); font-weight: 500; }
.cmp-pick .x { width: 28px; height: 28px; border: 0; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 15px; }
.cmp-pick .x:hover { background: var(--red); color: #fff; }
.cmp-pick .sub { grid-column: 2 / -1; justify-content: flex-start; align-items: center; gap: 8px; color: rgba(255,255,255,.55); }
.cmp-pick .sub .c { padding: 2px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-xs, 4px); color: rgba(255,255,255,.85); letter-spacing: .08em; }
.cmp-pick .sub a { margin-left: auto; color: #fff; }
.cmp-pick .sub a:hover { color: #F2B8AE; }
/* 참여 게임 칸 */
.cmp-gchip { position: relative; overflow: visible; color: var(--ink); text-decoration: none; cursor: help; }
.cmp-gchip .nm { overflow: hidden; text-overflow: ellipsis; }
a.cmp-gchip:hover, a.cmp-gchip:focus-visible { border-color: var(--ink); }
.cmp-gtip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; display: none; flex-direction: column; gap: 10px; width: 264px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(28,28,30,.22), 0 0 0 1px rgba(28,28,30,.08); font-weight: 400; white-space: normal; cursor: pointer; }
.cmp-gchip:hover .cmp-gtip, .cmp-gchip:focus-visible .cmp-gtip { display: flex; }
.cmp-gtip .top { display: flex; align-items: center; gap: 11px; }
.cmp-gtip .tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-gtip .tt b { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.cmp-gtip .tt em { font-style: normal; font-size: 11.5px; color: var(--stone); line-height: 1.3; }
.cmp-gtip .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: #55555A; }
.cmp-gtip .st { padding: 2px 8px; border-radius: 999px; font-weight: 700; background: #F1F0ED; color: var(--ink); }
.cmp-gtip .st.ok { background: #E3F2E8; color: #1F6B3A; } .cmp-gtip .st.end { background: #FBE6E2; color: #A12C1E; }
.cmp-gtip .go { padding-top: 10px; border-top: 1px solid rgba(28,28,30,.1); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cmp-gtip .go i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--stone); margin-left: 4px; }
@media (max-width: 759px) {
  .cmp-head { border-radius: 8px; }
  .cmp-pick { padding: 10px 8px 9px; column-gap: 6px; }
  .cmp-pick .no { display: none; }
  .cmp-pick .sel { grid-column: 1 / 3; }
  .cmp-pick .x { grid-column: 3; }
  .cmp-pick .sub { grid-column: 1 / -1; }
  .cmp-pick .sub .d { display: none; }
  .cmp-pick + .cmp-pick { border-left: 1px solid rgba(255,255,255,.12); }
  .cmp-gtip { width: 220px; }
}

/* 열 머리 — 번호는 전광판 칸, 기록 고르기는 흰 상자 */
.cmp-pick { align-items: center; }
.cmp-pick .no.cmp-fb { gap: 2px; color: inherit; }
.cmp-pick .no.cmp-fb i { width: 17px; height: 26px; border-radius: 3px; font-size: 17px; box-shadow: none; }
.cmp-pick .sel { height: 40px; padding: 0 30px 0 12px; border: 0; border-radius: var(--r-ctl, 8px); background: #fff; }
.cmp-pick .sel .vis { color: var(--ink); font-size: 14.5px; }
.cmp-pick .sel .ar { right: 11px; color: var(--stone); }
.cmp-pick .sel:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.cmp-pick.empty .sel { background: none; border: 1px dashed rgba(255,255,255,.35); }
.cmp-pick.empty .sel .ar { color: rgba(255,255,255,.6); }
.cmp-pick.empty .no.cmp-fb i { background: rgba(255,255,255,.14); color: rgba(255,255,255,.5); }
.cmp-pick.empty .no.cmp-fb i::after { background: rgba(0,0,0,.25); }
.cmpk-toast .open { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-ctl, 8px); background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cmpk-toast .open:hover { background: var(--red); color: #fff; }
@media (max-width: 759px) { .cmp-pick .sel { height: 36px; padding: 0 24px 0 9px; } .cmpk-toast { flex-wrap: wrap; } }

/* 왼쪽 항목 이름 — 읽기 쉽게: 글자 키움 · 영문 보조 진하게 · 옅은 바탕으로 값 칸과 구분 */
.cmp-table { --lc: 184px; }
.cmp-body .cmp-lab { padding: 18px 12px 18px 16px; background: #F7F6F3; column-gap: 11px; row-gap: 5px; }
.cmp-body .cmp-lab .ic { height: 20px; }
.cmp-body .cmp-lab .ic .ark-ki { width: 18px; height: 18px; opacity: 1; --picto-knock: #F7F6F3; }
.cmp-body .cmp-lab .ic .cmp-pic { width: 24px; height: 24px; }
.cmp-body .cmp-lab b { font-size: 14px; line-height: 20px; }
.cmp-body .cmp-lab em { font-size: 9.5px; letter-spacing: .14em; color: #6E6E73; }
.cmp-body .cmp-cell { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 759px) {
  .cmp-body .cmp-lab { padding: 10px 8px; margin-top: 4px; border-radius: 6px; }
  .cmp-body .cmp-lab b { font-size: 13px; }
  .cmp-body .cmp-cell { padding-top: 10px; padding-bottom: 14px; }
}

/* 항목 이름 칸 바탕 무늬 — 큰 픽토그램을 오른쪽 아래에 옅게(6%) */
.cmp-body .cmp-lab { position: relative; overflow: hidden; isolation: isolate; }
.cmp-body .cmp-lab .wm { position: absolute; right: -18px; bottom: -16px; z-index: -1; width: 74px; height: 74px; color: var(--ink); opacity: .05; pointer-events: none; --picto-knock: #F7F6F3; }
.cmp-body .cmp-lab .wm .ark-picto { width: 100%; height: 100%; }
@media (max-width: 759px) { .cmp-body .cmp-lab .wm { width: 56px; height: 56px; right: 4px; bottom: -14px; } }

/* 중간 폭(760~1099px) — 3칸이 좁아질 때 열 머리가 깨지지 않게: 번호 · 연월 숨김, 글자 줄바꿈 금지, 항목 이름 열 좁힘 */
.cmp-pick .sub .c, .cmp-pick .sub .d, .cmp-pick .sub a { white-space: nowrap; flex: none; }
.cmp-pick .sub { min-width: 0; overflow: hidden; }
@media (min-width: 760px) and (max-width: 1099px) {
  .cmp-table { --lc: 148px; }
  .cmp-head .cmp-lab.hd { padding-left: 12px; }
  .cmp-pick { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; padding: 12px 10px 10px; }
  .cmp-pick .no { display: none; }
  .cmp-pick .sel { padding: 0 24px 0 10px; }
  .cmp-pick .sel .vis { font-size: 13.5px; }
  .cmp-pick .sub { grid-column: 1 / -1; }
  .cmp-pick .sub .d { display: none; }
  .cmp-body .cmp-lab { padding: 16px 8px 16px 12px; column-gap: 8px; }
  .cmp-body .cmp-lab b { font-size: 13px; white-space: normal; }
  .cmp-body .cmp-lab em { display: none; }
  .cmp-body .cmp-lab .wm { width: 56px; height: 56px; right: -14px; bottom: -12px; }
  .cmp-body .cmp-cell { padding-left: 10px; padding-right: 10px; }
  .cmp-fb i { width: 15px; height: 24px; font-size: 15px; }
  .cmp-fb b { width: 5px; font-size: 14px; }
}

/* 검은 열 머리와 표 사이를 띄움 — 둥근 모서리 아래로 옅은 바탕이 비쳐 틈처럼 보이던 것 정리. 표도 같은 둥글기로 */
/* 스크롤 중 붙어 있을 때도 모서리 뒤로 표 바탕이 비치지 않도록, 검은 띠 뒤에 흰 받침을 둠(아래 10px 띠 포함) */
.cmp-head { background: #fff; border-radius: 0; box-shadow: none; overflow: visible; isolation: isolate; border-bottom: 10px solid #fff; }
.cmp-head::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: var(--ink); box-shadow: 0 10px 22px -14px rgba(28,28,30,.6); }
@media (min-width: 760px) { .cmp-body { border-radius: 10px; overflow: hidden; border-top: 1px solid rgba(28,28,30,.1); } }

/* 스크롤 중 사이트 머리(검정)와 검은 열 머리가 맞붙지 않게 — 위에도 흰 받침 10px */
.cmp-head { border-top: 10px solid #fff; }
.cmp-gap { height: 12px; }
.cmp-note { margin-bottom: 8px; }

/* 참여 게임 정보 풍선 — ACG DATABANK 풍선과 같은 구성(지역 · 상태 / 이름 / 출시 · 종료 / 퍼블리셔 · 개발사 · 채널) */
.cmp-gtip { width: 304px; gap: 12px; padding: 14px 14px 12px; }
.cmp-gtip .chips { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cmp-gtip .rg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #F1F0ED; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.cmp-gtip .rg i { width: 7px; height: 7px; border-radius: 50%; background: #8E8E93; }
.cmp-gtip .rg i.ok { background: #2E9B57; } .cmp-gtip .rg i.end { background: #B03020; }
.cmp-gtip .st { font-size: 11.5px; padding: 3px 10px; }
.cmp-gtip .tt b { font-size: 16px; }
.cmp-gtip .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 10px 12px; border-radius: 10px; background: #F5F4F2; }
.cmp-gtip .dates > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp-gtip .dates > span + span { padding-left: 12px; border-left: 1px solid rgba(28,28,30,.12); }
.cmp-gtip .dates em, .cmp-gtip .rows em { font-style: normal; font-size: 11px; font-weight: 700; color: #6E6E73; }
.cmp-gtip .cmp-fb { gap: 1px; }
.cmp-gtip .cmp-fb i { width: 11px; height: 18px; border-radius: 2px; background: var(--ink); color: #fff; box-shadow: none; font-size: 12px; }
.cmp-gtip .cmp-fb i::after { background: rgba(255,255,255,.22); }
.cmp-gtip .cmp-fb b { width: 4px; font-size: 11px; }
.cmp-gtip .rows { display: flex; flex-direction: column; }
.cmp-gtip .rows > span { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(28,28,30,.08); }
.cmp-gtip .rows > span:first-child { border-top: 0; padding-top: 0; }
.cmp-gtip .rows b { font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.cmp-gtip .rows b.ch { font-weight: 500; color: #55555A; }
.cmp-gtip .go { padding-top: 10px; }
.cmp-gtip .src { margin-top: -6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--stone); }
@media (max-width: 759px) { .cmp-gtip { display: none !important; } }
.cmp-gtip .st.unk { background: #F1F0ED; color: #55555A; }
.cmp-gtip .cmp-fb i.off { display: none; }