/* 제어 센터 위젯 — 사이트 디자인 변수를 따라갑니다 */

/* 기존 BGM 박스 숨기기 (설정에서 켠 경우) */
html.cc-hide-bgm #bgm-player { display: none !important; }

/* ===== 하단 홈바 (투두 위젯 미니멀 모드의 홈바와 같은 크기·위치) ===== */
.cc-homebar {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 160px;
    height: 26px;
    margin-left: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 99991;
    display: block;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease;
}
.cc-homebar::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 110px;
    height: 5px;
    margin-left: -55px;
    border-radius: 3px;
    background: rgba(60, 60, 60, .55);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
    transition: background-color .2s ease, width .2s ease, margin-left .2s ease;
}
.cc-homebar:hover::before {
    background: rgba(60, 60, 60, .9);
    width: 130px;
    margin-left: -65px;
}
/* 창이 열려 있는 동안 홈바는 숨긴다 (바깥을 누르면 닫힘) */
.cc-homebar.is-open { opacity: 0; pointer-events: none; }
.cc-homebar.cc-admin-hidden { display: none !important; }

/* ===== 창 ===== */
.cc-panel {
    --cc-bg: var(--card-bg-color, #fff);
    --cc-line: var(--card-border-color, #d8dce2);
    --cc-text: var(--content-font-color, #25272c);
    --cc-mute: color-mix(in srgb, var(--cc-text) 55%, transparent);
    --cc-soft: color-mix(in srgb, var(--cc-text) 7%, transparent);
    --cc-soft2: color-mix(in srgb, var(--cc-text) 12%, transparent);
    --cc-accent: var(--btn-accent-bg, #137bea);
    --cc-accent-text: var(--btn-accent-text, #fff);
    --cc-cell: 70px;
    --cc-gap: 8px;
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 99989;
    display: flex;
    flex-direction: column;
    width: 372px;
    max-width: calc(100vw - 24px);
    max-height: min(640px, 86vh);
    box-sizing: border-box;
    border: 1px solid var(--cc-line);
    border-radius: 22px;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: var(--content-font-family, inherit);
    font-size: var(--content-font-size, 14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    scale: .96;
    translate: 0 12px;
    transition: opacity .2s ease, scale .2s cubic-bezier(.22, .8, .3, 1), translate .2s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .2s;
}
.cc-panel.show {
    visibility: visible; opacity: 1; pointer-events: auto; scale: 1; translate: 0 0;
    transition: opacity .24s ease, scale .26s cubic-bezier(.22, .8, .3, 1), translate .26s cubic-bezier(.22, .8, .3, 1), visibility 0s linear 0s;
}
.cc-panel.cc-admin-hidden { display: none !important; }
.cc-panel *, .cc-panel *::before, .cc-panel *::after { box-sizing: border-box; }
.cc-panel [hidden] { display: none !important; }
.cc-ib, .cc-tile, .cc-link, .cc-btn, .cc-more-btn, .cc-bgm__b, .cc-bgm__vb, .cc-tgw__item { font-family: inherit; }   /* 투두 등 담긴 위젯의 버튼 글꼴은 건드리지 않는다 */

.cc-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 10px 10px 4px 14px; }
.cc-title { flex: 1; font-size: 1.05em; }
.cc-back { margin-left: -8px; }
.cc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 14px; overscroll-behavior: contain; }

.cc-ib {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer; font-size: .9em;
}
.cc-ib:hover { background: var(--cc-soft); }
.cc-ib.sm { width: 24px; height: 24px; font-size: .75em; }
.cc-link { border: 0; background: transparent; color: var(--cc-accent); cursor: pointer; font: inherit; font-size: .9em; padding: 2px 4px; }
.cc-link:hover { text-decoration: underline; }
.cc-empty { margin: 14px 0; color: var(--cc-mute); font-size: .9em; text-align: center; list-style: none; }
.cc-note { margin: 8px 0; color: var(--cc-mute); font-size: .82em; line-height: 1.5; }
.cc-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 2px 6px; }
.cc-sec__info { color: var(--cc-mute); font-size: .88em; }
.cc-chip { display: inline-block; padding: 1px 7px; border-radius: 9px; background: var(--cc-soft2); color: var(--cc-mute); font-size: .72em; font-style: normal; line-height: 1.6; }

.cc-toast {
    position: absolute; left: 50%; bottom: 14px; max-width: 86%; transform: translateX(-50%) translateY(8px);
    padding: 7px 14px; border-radius: 16px; background: rgba(30, 30, 30, .88); color: #fff; font-size: .85em;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2;
}
.cc-toast.show { opacity: 1; transform: translateX(-50%); }

/* ===== 홈: 타일 ===== */
.cc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-tile {
    position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
    min-width: 0; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--cc-soft); color: inherit; text-align: left; cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.cc-tile:hover { background: var(--cc-soft2); }
.cc-tile:active { transform: scale(.97); }
.cc-tile__ic { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cc-accent); color: var(--cc-accent-text); font-size: 1em; }
.cc-tile__tx { font-weight: 700; font-size: .92em; align-self: end; }
.cc-tile__sub { color: var(--cc-mute); font-size: .76em; align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tile.has-badge .cc-tile__sub { color: #ff4444; font-weight: 700; }
.cc-tile[data-k="notice"] .cc-tile__ic { background: #ff9500; }
.cc-tile[data-k="calendar"] .cc-tile__ic { background: #ff3b30; }
.cc-tile[data-k="todo"] .cc-tile__ic { background: #34c759; }
.cc-tile[data-k="textggu"] .cc-tile__ic { background: #af52de; }

.cc-card { margin-top: 8px; padding: 12px; border-radius: 16px; background: var(--cc-soft); }
.cc-card__hd { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--cc-mute); font-size: .8em; font-weight: 700; }

/* 오늘 일정 */
.cc-today { cursor: pointer; }
.cc-today__list { list-style: none; margin: 0; padding: 0; }
.cc-today__list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; min-width: 0; }
.cc-today__list .cc-empty { display: block; margin: 4px 0; text-align: left; }
.cc-today__t { flex: none; min-width: 62px; white-space: nowrap; color: var(--cc-mute); font-size: .82em; }
.cc-today__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92em; }
.cc-more { color: var(--cc-mute); font-size: .8em; padding-left: 16px !important; }
.cc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* BGM */
.cc-bgm__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-bgm__thumb { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: var(--cc-soft2); }
.cc-bgm__txt { min-width: 0; flex: 1; }
.cc-bgm__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cc-bgm__sub { margin-top: 2px; color: var(--cc-mute); font-size: .8em; }
.cc-bgm__ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0 4px; }
.cc-bgm__b { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.15em; cursor: pointer; }
.cc-bgm__b:hover:not(:disabled) { background: var(--cc-soft2); }
.cc-bgm__b:disabled { opacity: .3; cursor: default; }
.cc-bgm__play { width: 46px; height: 46px; background: var(--cc-accent); color: var(--cc-accent-text); font-size: 1.2em; }
.cc-bgm__play:hover:not(:disabled) { background: var(--cc-accent); filter: brightness(1.1); }
.cc-bgm__vol { display: flex; align-items: center; gap: 8px; }
.cc-bgm__vb { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--cc-mute); cursor: pointer; }
.cc-bgm__vb:hover { color: var(--cc-text); }
.cc-range { --p: 30%; flex: 1; min-width: 0; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cc-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--cc-text) var(--p), var(--cc-soft2) var(--p)); }
.cc-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--cc-soft2); }
.cc-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--cc-text); }
.cc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.cc-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }

/* ===== 알림 ===== */
.cc-noti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-noti__item { padding: 9px 11px; border-radius: 12px; background: var(--cc-soft); cursor: pointer; }
.cc-noti__item:hover { background: var(--cc-soft2); }
.cc-noti__item.unread { box-shadow: inset 3px 0 0 var(--cc-accent); }
.cc-noti__item:not(.unread) { opacity: .65; }
.cc-noti__meta { display: flex; justify-content: space-between; gap: 8px; font-size: .78em; color: var(--cc-mute); }
.cc-noti__from { margin-left: 6px; }
.cc-noti__txt { margin-top: 3px; font-size: .9em; line-height: 1.45; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-more-btn { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; border-radius: 12px; background: var(--cc-soft); color: inherit; cursor: pointer; font-size: .88em; }
.cc-more-btn:hover { background: var(--cc-soft2); }

/* ===== 캘린더 ===== */
.cc-cal__nav { display: flex; align-items: center; gap: 2px; }
.cc-cal__nav strong { flex: 1; text-align: center; }
.cc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 6px; }
.cc-cal__wd { padding: 4px 0; text-align: center; color: var(--cc-mute); font-size: .74em; }
.cc-cal__day {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
    height: 42px; padding: 4px 0 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font-size: .86em;
}
.cc-cal__day:hover { background: var(--cc-soft); }
.cc-cal__day.out { opacity: .32; }
.cc-cal__day.sun .cc-cal__n { color: #ff3b30; }
.cc-cal__day.sat .cc-cal__n { color: #3b82f6; }
.cc-cal__wd.sun { color: #ff3b30; }
.cc-cal__wd.sat { color: #3b82f6; }
.cc-cal__n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; }
.cc-cal__day.today .cc-cal__n { background: var(--cc-accent); color: var(--cc-accent-text); font-weight: 700; }
.cc-cal__day.sel { background: var(--cc-soft2); }
.cc-cal__dots { display: flex; gap: 2px; height: 5px; }
.cc-cal__dots i { width: 5px; height: 5px; border-radius: 50%; }

.cc-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-ev > li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--cc-soft); }
.cc-ev > li.cc-empty { display: block; background: transparent; }
.cc-ev__bar { flex: none; width: 4px; align-self: stretch; border-radius: 2px; }
.cc-ev__main { flex: 1; min-width: 0; }
.cc-ev__main strong { display: block; font-size: .92em; word-break: break-all; }
.cc-ev__main small { display: block; color: var(--cc-mute); font-size: .78em; margin-top: 1px; }
.cc-ev__memo { white-space: pre-wrap; word-break: break-all; }
.cc-ev__act { flex: none; display: inline-flex; }

.cc-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cc-form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-fld > span { color: var(--cc-mute); font-size: .76em; }
.cc-in {
    width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--cc-line); border-radius: 10px;
    background: transparent; color: inherit; font: inherit; font-size: .92em;
}
textarea.cc-in { resize: vertical; }
.cc-sw { display: flex; gap: 8px; }
.cc-sw__b { width: 24px; height: 24px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.cc-sw__b.on { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-text); }
.cc-chk { display: flex; align-items: center; gap: 6px; font-size: .88em; }
.cc-form__btns { display: flex; justify-content: flex-end; gap: 8px; }
.cc-btn { padding: 7px 16px; border: 0; border-radius: 12px; background: var(--cc-soft2); color: inherit; cursor: pointer; font-size: .9em; }
.cc-btn.primary { background: var(--cc-accent); color: var(--cc-accent-text); }

/* ===== 투두 (투두 위젯 창을 이 안에 담는다) ===== */
.cc-todo { min-height: 80px; }

/* ===== 텍꾸 서식 ===== */
.cc-tgw__group { padding: 10px 0; border-top: 1px solid var(--cc-line); }
.cc-tgw__group:first-child { padding-top: 0; border-top: 0; }
.cc-tgw__group > strong { display: block; margin-bottom: 6px; font-size: .82em; opacity: .7; }
.cc-tgw__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.cc-tgw__item {
    display: flex; align-items: center; justify-content: center; min-height: 46px; min-width: 0; padding: 5px 3px;
    border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit;
}
.cc-tgw__item:hover, .cc-tgw__item:focus-visible { border-color: var(--cc-line); background: var(--cc-soft); }
.cc-tgw__item[data-prefix="**"], .cc-tgw__item[data-prefix="***"] { font-weight: bold; }

@media (prefers-reduced-motion: reduce) { .cc-panel, .cc-panel.show { transition: none; } }

/* ===== 바 위치: 좌측 / 우측 (기본은 하단) ===== */
.cc-homebar.cc-bar-left, .cc-homebar.cc-bar-right {
    top: 50%; bottom: auto; width: 26px; height: 160px; margin-top: -80px;
}
.cc-homebar.cc-bar-left { left: 0; right: auto; }
.cc-homebar.cc-bar-right { right: 0; left: auto; }
.cc-homebar.cc-bar-left::before, .cc-homebar.cc-bar-right::before {
    left: 7px; bottom: auto; top: 50%; width: 5px; height: 110px; margin-left: 0; margin-top: -55px;
}
.cc-homebar.cc-bar-right::before { left: auto; right: 7px; }
.cc-homebar.cc-bar-left:hover::before, .cc-homebar.cc-bar-right:hover::before { width: 5px; height: 130px; margin-left: 0; margin-top: -65px; background: rgba(60, 60, 60, .9); }
.cc-panel.cc-pos-left, .cc-panel.cc-pos-right { bottom: auto; top: 50%; transform: translateY(-50%); max-height: 94vh; }
.cc-panel.cc-pos-left { left: 18px; right: auto; }
.cc-panel.cc-pos-right { right: 18px; left: auto; }

/* ===== 홈: 격자 페이지 (세로로 스크롤하면 페이지가 나뉜다) ===== */
.cc-home { display: flex; gap: 6px; }
.cc-pages {
    flex: 1; min-width: 0;
    height: calc(var(--rows) * var(--cc-cell) + (var(--rows) - 1) * var(--cc-gap));
    max-height: calc(94vh - 80px);
    overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain;
}
.cc-pages::-webkit-scrollbar { display: none; }
.cc-page {
    height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), var(--cc-cell)); gap: var(--cc-gap);
}
.cc-m { min-width: 0; min-height: 0; margin: 0 !important; overflow: hidden; }

.cc-rail { flex: none; width: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cc-rail__b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cc-mute); cursor: pointer; font-size: .85em; }
.cc-rail__b.on { color: var(--cc-text); }
.cc-rail__b:hover { color: var(--cc-text); }
.cc-rail__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.cc-rail__b.on .cc-rail__dot { opacity: 1; transform: scale(1.3); }

/* 타일 (1칸이면 아이콘만) */
.cc-tile { width: 100%; height: 100%; }
.cc-tile.is-small { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 20px; }
.cc-tile.is-small .cc-tile__ic { width: 46px; height: 46px; font-size: 1.15em; }
.cc-tile.has-badge::after { content: ''; position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: #ff4444; box-shadow: 0 0 0 2px var(--cc-bg); }
.cc-datenum { font-weight: 700; font-size: 1.1em; }
.cc-card { height: 100%; margin-top: 0; }

/* 큰 알림 / 큰 캘린더 */
.cc-card__info { margin-left: auto; color: #ff4444; font-weight: 700; }
.cc-notice-card, .cc-cal-card { cursor: pointer; display: flex; flex-direction: column; }
.cc-mini-noti { list-style: none; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.cc-mini-noti li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .84em; opacity: .65; }
.cc-mini-noti li.unread { opacity: 1; }
.cc-mini-noti li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-mini-noti .cc-empty { display: block; opacity: 1; }
.cc-mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 0; align-content: start; row-gap: 1px; text-align: center; font-size: .72em; }
.cc-mini-cal__wd { color: var(--cc-mute); }
.cc-mini-cal__d { position: relative; line-height: 1.8; border-radius: 50%; }
.cc-mini-cal__d.today { background: var(--cc-accent); color: var(--cc-accent-text); font-weight: 700; }
.cc-mini-cal__d i { position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: transparent; }
.cc-mini-cal__d.has-ev i { background: #4285f4; }
.cc-mini-cal__d.today.has-ev i { background: #fff; }

/* 오늘 일정 카드 (칸 안에서 잘림) */
.cc-today { display: flex; flex-direction: column; }
.cc-today__list { overflow: hidden; }

/* BGM: 칸 크기별 */
.cc-bgm--solo { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 20px; }
.cc-bgm--solo .cc-bgm__play { width: 46px; height: 46px; }
.cc-bgm--row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.cc-bgm--row .cc-bgm__thumb { width: 44px; height: 44px; }
.cc-bgm--row .cc-bgm__ctl { margin: 0; gap: 6px; }
.cc-bgm--row .cc-bgm__b { width: 32px; height: 32px; }
.cc-bgm--row .cc-bgm__play { width: 38px; height: 38px; }
.cc-bgm--full { display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px; }
.cc-bgm--full .cc-bgm__ctl { margin: 0; gap: 14px; }
.cc-bgm--full .cc-bgm__b { height: 34px; width: 34px; }
.cc-bgm--full .cc-bgm__play { width: 40px; height: 40px; }
.cc-bgm--full .cc-bgm__thumb { width: 44px; height: 44px; }

/* 캘린더 갱신 버튼 돌아가는 모션 */
.cc-ib.spin i { animation: cc-spin .8s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-mini-noti .cc-chip { flex: none; white-space: nowrap; }

/* 열람 권한이 없는 일정 */
.cc-ev > li.is-locked .cc-ev__main strong { opacity: .6; font-weight: 500; font-style: italic; }
.cc-ev > li > .fa-lock { flex: none; align-self: center; color: var(--cc-mute); font-size: .8em; }

/* 피드 칸 (사이트의 feed.css 의 nf-* 모양을 좁은 창에 맞춰 쓴다) */
.cc-feed .nf-controls { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.cc-feed .nf-filter { width: 100%; }
.cc-feed .nf-filter select { flex: 1; min-width: 0; }
.cc-feed .nf-grid { grid-template-columns: 1fr !important; gap: 10px; }
.cc-feed .nf-card { min-width: 0; }
.cc-feed .nf-pagination { flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.cc-pos-left .cc-home { flex-direction: row-reverse; }
.cc-m.cc-full { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 2px; }
@media (hover: none) { .cc-m.cc-full { overscroll-behavior: auto; } }   /* 터치는 브라우저 기본 스크롤 연결을 쓴다 */

/* 알림·피드 칸: 목록이 박스 높이를 다 쓰고, 줄 사이 간격으로 남는 높이를 고르게 나눈다 */
.cc-notice-card .cc-mini-noti { flex: 1; min-height: 0; justify-content: space-between; }

/* ===== 창 여는 모션: 바가 있는 가장자리에서 미끄러져 나온다 ===== */
.cc-panel { scale: 1; translate: 0 calc(100% + 40px); transition: opacity .2s ease, translate .32s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .32s; }
.cc-panel.cc-pos-left { translate: calc(-100% - 40px) 0; }
.cc-panel.cc-pos-right { translate: calc(100% + 40px) 0; }
.cc-panel.show { scale: 1; translate: 0 0; transition: opacity .2s ease, translate .34s cubic-bezier(.22, .8, .3, 1), visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .cc-panel, .cc-panel.show { transition: none; } }


/* ===== 프로필 칸 ===== */
.cc-profile .cc-tile__ic { background: var(--cc-accent); }
.cc-profile .cc-tile__tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 프로필 칸: 이미지 + 정보수정 버튼 */
.cc-profile { position: relative; cursor: pointer; }
.cc-profile__av { overflow: hidden; position: relative; }
.cc-profile__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cc-profile.is-small .cc-profile__av { width: 46px; height: 46px; }
.cc-profile__edit {
    position: absolute; top: 6px; right: 8px; z-index: 1; padding: 2px 7px; border: 1px solid var(--cc-line); border-radius: 999px;
    background: var(--cc-bg); color: var(--cc-mute); font: inherit; font-size: .68em; line-height: 1.4; cursor: pointer;
}
.cc-profile__edit:hover { background: var(--cc-soft2); color: var(--cc-text); }
.cc-profile.is-small .cc-profile__edit { top: 3px; right: 3px; padding: 1px 5px; font-size: .6em; }
/* 창 안 페이지 */
.cc-panel[data-pane="profile"] .cc-body, .cc-panel[data-pane="profile_edit"] .cc-body { padding: 0 0 6px; overflow: hidden; }
.cc-frame { display: block; width: 100%; height: min(520px, calc(86vh - 70px)); border: 0; border-radius: 0 0 22px 22px; background: var(--cc-bg); }

/* 머리글(cc-head) 제거 → 뒤로 버튼은 페이지줄(rail) 맨 위에 */
.cc-main { flex: 1; min-height: 0; display: flex; }
.cc-pos-right .cc-main, .cc-pos-bottom .cc-main { flex-direction: row; }
.cc-backrail { justify-content: flex-start; padding-top: 10px; width: 36px; }
.cc-backrail[hidden] { display: none !important; }
.cc-backrail .cc-back { margin: 0; }
.cc-home .cc-rail { position: relative; }
.cc-body { padding-top: 12px; }
/* 투두 칸: 전체 개수 + 우상단 배지 */
.cc-tile .cc-tile__n { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-size: .66em; font-weight: 700; color: var(--cc-mute); }
.cc-tile .cc-badge { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff4444; color: var(--white); font-size: .7em; font-weight: 700; line-height: 18px; text-align: center; border: 0; box-shadow: none; }
.cc-tile.has-badge::after { display: none; }
.cc-tile.is-small:has(.cc-tile__n) .cc-tile__ic { margin-top: -10px; }

/* 피드/최신글: 읽음 구분 없음 (알림의 unread 에서 굵기만 뺀 모양) */
.cc-mini-noti li.is-plain { opacity: 1; }
.cc-mini-noti li.is-plain { cursor: pointer; }
.cc-latest-full { padding: 4px 4px 8px; gap: 8px; }
.cc-latest-full li { font-size: .9em; }

/* 캘린더 카드: 상자 밖으로 넘치지 않게 */
.cc-cal-card { overflow: hidden; min-height: 0; }
.cc-cal-col { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.cc-cal-card .cc-mini-cal { flex: 1; min-height: 0; overflow: hidden; align-content: stretch; row-gap: 0; }
.cc-cal-card .cc-mini-cal__d { min-height: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cc-cal-card .cc-mini-cal__wd { line-height: 1.4; }
.cc-cal-card.is-wide { flex-direction: row; gap: 14px; }
.cc-cal-card.is-wide .cc-cal-col { flex: 1 1 0; }
.cc-cal-card.is-wide .cc-cal-today { padding-left: 14px; border-left: 1px solid var(--cc-line); overflow: hidden; }
.cc-today__n { flex: 0 1 auto; } .cc-today__t { min-width: 0 !important; margin-left: auto; }

/* ===== 창 배경: 색 없이, 화면 세로 전체를 덮는 블러 (좌우 가장자리로 갈수록 옅어짐) ===== */
.cc-panel { background: transparent; }
.cc-blur {
    position: fixed; top: 0; bottom: 0; right: 18px; width: 372px; max-width: calc(100vw - 24px);
    z-index: 99988; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
}
.cc-blur.show { opacity: 1; }
.cc-blur.cc-pos-left { right: auto; left: 18px; }
.cc-blur.cc-admin-hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cc-blur { transition: none; } }

/* 창: 테두리·그림자 없음 (배경은 블러가 대신함) */
.cc-panel { border: 0; box-shadow: none; }

/* 미니 캘린더: 일정 색(캘린더별 색상)대로 점 표시 */
.cc-mini-cal__d .cc-mini-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.cc-mini-cal__d .cc-mini-dots i { position: static; display: block; width: 4px; height: 4px; margin: 0; border-radius: 50%; }
.cc-mini-cal__d.today .cc-mini-dots i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); }

/* 설정에서 지정한 버튼 색 (지정하지 않으면 기본 색) */
.cc-tile, .cc-card { background: var(--cc-btn-bg, var(--cc-soft)); color: var(--cc-btn-text, inherit); }
.cc-tile:hover { background: var(--cc-btn-hover, var(--cc-soft2)); }

/* 프로필: 닉네임이 보조 문구 자리까지 차지, 정보수정은 아이콘 버튼 */
.cc-profile .cc-tile__tx { grid-row: 1 / 3; align-self: center; font-size: 1em; }
.cc-profile__edit { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; font-size: .85rem !important; }
.cc-profile .cc-profile__edit { top: 5px; right: 6px; }
.cc-profile__edit:hover { background: var(--cc-soft2) !important; }

/* 알약칩 · 라벨 색 */
.cc-chip { background: var(--cc-chip-bg, var(--cc-soft2)); color: var(--cc-chip-text, var(--cc-mute)); }
.cc-card__hd, .cc-tile__tx { color: var(--cc-label, inherit); }
.cc-card__hd { color: var(--cc-label, var(--cc-mute)); }

/* 라벨 색: 페이지 버튼(rail)·아이콘만 있는 버튼 */
.cc-rail__b, .cc-rail__b.on, .cc-rail__b:hover, .cc-ib, .cc-profile__edit { color: var(--cc-label, var(--cc-mute)); }
.cc-rail__b.on, .cc-rail__b:hover, .cc-ib:hover { color: var(--cc-label, var(--cc-text)); }

/* 설정에서 지정한 타일 아이콘 배경색 */
.cc-tile[data-k="notice"] .cc-tile__ic { background: var(--cc-ic-notice, var(--cc-accent)); }
.cc-tile[data-k="calendar"] .cc-tile__ic { background: var(--cc-ic-calendar, var(--cc-accent)); }
.cc-tile[data-k="todo"] .cc-tile__ic { background: var(--cc-ic-todo, var(--cc-accent)); }
.cc-tile[data-k="textggu"] .cc-tile__ic { background: var(--cc-ic-textggu, var(--cc-accent)); }
.cc-tile[data-k="feed"] .cc-tile__ic { background: var(--cc-ic-feed, var(--cc-accent)); }
.cc-tile[data-k="latest"] .cc-tile__ic { background: var(--cc-ic-latest, var(--cc-accent)); }
.cc-tile[data-k="profile"] .cc-tile__ic, .cc-profile .cc-tile__ic { background: var(--cc-ic-profile, var(--cc-accent)); }

/* 페이지 버튼: 활성 아닌 것은 투명도를 낮춤 */
.cc-home .cc-rail__b { opacity: .4; transition: opacity .15s ease; }
.cc-home .cc-rail__b.on, .cc-home .cc-rail__b:hover { opacity: 1; }

/* 캘린더·TODAY 텍스트는 설정의 '글자색'으로 통일 (지정하지 않으면 기본 색) */
.cc-mini-cal__wd, .cc-cal__wd, .cc-cal__wd.sun, .cc-cal__wd.sat,
.cc-cal__day.sun .cc-cal__n, .cc-cal__day.sat .cc-cal__n,
.cc-ev__main small, .cc-ev > li > .fa-lock,
.cc-today__t, .cc-today .cc-empty, .cc-cal-today .cc-empty, .cc-cal-card .cc-empty { color: var(--cc-btn-text, var(--cc-mute)); }
.cc-cal__day:not(.today) .cc-cal__n, .cc-cal__nav strong, .cc-ev__main strong, .cc-today__n, .cc-mini-cal__d:not(.today) { color: var(--cc-btn-text, inherit); }
.cc-cal__day.today .cc-cal__n { color: var(--cc-accent-text); }
.cc-cal__day.sun .cc-cal__n, .cc-cal__day.sat .cc-cal__n { color: var(--cc-btn-text, var(--cc-mute)); }
.cc-cal__day.today.sun .cc-cal__n, .cc-cal__day.today.sat .cc-cal__n { color: var(--cc-accent-text); }

/* 블러: 화면(홈페이지) 위끝~아래끝 전체 */
.cc-blur { top: 0; bottom: 0; height: 100vh; height: 100dvh; margin: 0; }

/* 블러: widget_a_MC 처럼 화면 끝(가장자리)에 붙여서 시작하고, 안쪽으로 갈수록 옅어진다 */
.cc-blur {
    right: 0; left: auto; width: 410px; max-width: 100vw;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
    mask-image: linear-gradient(to left, #000 55%, transparent);
}
.cc-blur.cc-pos-left {
    left: 0; right: auto;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
    mask-image: linear-gradient(to right, #000 55%, transparent);
}

/* 풀그리드(4×7) 항목이 있는 페이지는 알림·피드 페이지처럼 패널 세로 전체를 쓴다 */
.cc-pages.has-full { height: calc(min(640px, 86vh) - 26px); max-height: none; }
.cc-page.has-full { grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }


/* 풀그리드 페이지 높이 = 패널이 낼 수 있는 최대 높이(바 위치에 따라 다름: 하단 min(640px,86vh) / 좌·우 94vh) */
.cc-panel { --cc-maxh: min(640px, 86vh); }
.cc-panel.cc-pos-left, .cc-panel.cc-pos-right { --cc-maxh: 94vh; }
.cc-pages.has-full { height: calc(var(--cc-maxh) - 26px); }

/* ===== 패널 높이 = 화면(홈페이지) 세로 전체, 홈 격자는 그만큼 늘어난 칸(세로 12칸)으로 채운다 ===== */
.cc-panel, .cc-panel.cc-pos-left, .cc-panel.cc-pos-right {
    top: 0; bottom: 0; height: 100vh; height: 100dvh; max-height: none; transform: none; border-radius: 0;
}
.cc-panel[data-pane="home"] .cc-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
.cc-panel[data-pane="home"] .cc-home { flex: 1; min-height: 0; }
.cc-pages, .cc-pages.has-full { height: auto; max-height: none; }
.cc-page, .cc-page.has-full { height: 100%; grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.cc-frame { height: calc(100dvh - 20px); border-radius: 0; }

/* 패널(cc-main)을 화면 가장자리에 딱 붙인다 */
.cc-panel { right: 0; left: auto; max-width: 100vw; }
.cc-panel.cc-pos-left { left: 0; right: auto; }
.cc-panel.cc-pos-right { right: 0; left: auto; }

/* 텍꾸 서식창 · 투두 컨테이너에는 배경색을 깐다 (버튼 색상의 '배경색'을 따름) */
.cc-m-textggu.cc-full, .cc-m-todo.cc-full { background: var(--cc-btn-bg, var(--cc-soft)); border-radius: 16px; padding: 8px 10px; }
.cc-panel[data-pane="textggu"] .cc-body > *, .cc-panel[data-pane="todo"] .cc-body > * { background: var(--cc-btn-bg, var(--cc-soft)); border-radius: 16px; }
.cc-panel[data-pane="textggu"] .cc-body, .cc-panel[data-pane="todo"] .cc-body { padding-left: 12px; padding-right: 12px; }

/* 텍꾸 서식창 · 투두 컨테이너 글자색 ('버튼 색상'의 글자색) */
.cc-m-textggu.cc-full, .cc-m-todo.cc-full,
.cc-panel[data-pane="textggu"] .cc-body > *, .cc-panel[data-pane="todo"] .cc-body > * { color: var(--cc-btn-text, inherit); }
.cc-m-textggu.cc-full :is(strong, b, span, small, p, label, li, h1, h2, h3, h4, em, button, input, textarea, select),
.cc-m-todo.cc-full :is(strong, b, span, small, p, label, li, h1, h2, h3, h4, em, button, input, textarea, select),
.cc-panel[data-pane="textggu"] .cc-body :is(strong, b, span, small, p, label, li, h1, h2, h3, h4, em, button),
.cc-panel[data-pane="todo"] .cc-body :is(strong, b, span, small, p, label, li, h1, h2, h3, h4, em, button, input, textarea, select) { color: var(--cc-btn-text, inherit); }

/* 풀그리드로 놓은 알림·피드·최신글·캘린더·텍꾸 서식창·투두 등: 컨테이너 배경을 깔고, 높이는 페이지(= 패널) 높이까지만, 넘치면 컨테이너 안에서 스크롤 */
.cc-m.cc-full {
    height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden;
    background: var(--cc-btn-bg, var(--cc-soft)); border-radius: 16px; padding: 8px 10px;
    color: var(--cc-btn-text, inherit);
}

/* 스크롤은 컨테이너 안쪽(.cc-full__in)에서: 배경은 그대로 두고 내용만 위/아래 가장자리에서 투명해진다 */
.cc-m.cc-full { overflow: hidden; padding: 0; }
.cc-full__in { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px 10px; }

/* 패널 위·아래 여백 */
.cc-main { padding: 22px 0; }

/* 타일·라벨을 눌러 들어간 페이지(알림·피드·최신글·캘린더·투두·텍꾸 서식)에도 설정한 색을 적용 */
.cc-panel:not([data-pane="home"]):not([data-pane="profile"]):not([data-pane="profile_edit"]) .cc-body {
    margin: 0 12px 0 0; padding: 12px; border-radius: 16px;
    background: var(--cc-btn-bg, var(--cc-soft)); color: var(--cc-btn-text, inherit);
}
.cc-panel:not([data-pane="home"]) .cc-body :is(li, p, strong, b, small, label, h2, h3, h4):not(.cc-chip):not(.cc-card__hd):not(.cc-badge):not(.cc-today__t):not(.cc-link):not(.nf-grid *) { color: var(--cc-btn-text, inherit); }
.cc-panel:not([data-pane="home"]) .cc-body .cc-chip { background: var(--cc-chip-bg, var(--cc-soft2)); color: var(--cc-chip-text, var(--cc-mute)); }
.cc-panel:not([data-pane="home"]) .cc-body .cc-note, .cc-panel:not([data-pane="home"]) .cc-body .cc-empty { color: var(--cc-btn-text, var(--cc-mute)); }
/* 이 안에서는 목록 항목이 이중 배경이 되지 않게 */
.cc-panel:not([data-pane="home"]) .cc-body .cc-ev > li { background: var(--cc-btn-hover, var(--cc-soft)); }

/* 블러: 살짝 어두운 색 */
.cc-blur { background: rgba(0, 0, 0, .28); }

/* BGM: 설정한 색 사용 */
.cc-bgm__title, .cc-bgm__sub, .cc-bgm__txt { color: var(--cc-btn-text, inherit); }
.cc-bgm__sub { opacity: .75; }
.cc-bgm__b:not(.cc-bgm__play), .cc-bgm__vb { color: var(--cc-label, var(--cc-btn-text, inherit)); }
.cc-bgm__b:hover:not(:disabled) { background: var(--cc-btn-hover, var(--cc-soft2)); }
.cc-bgm__play { background: var(--cc-btn-hover, var(--cc-accent)); color: var(--cc-btn-text, var(--cc-accent-text)); }
.cc-bgm__play:hover:not(:disabled) { background: var(--cc-btn-hover, var(--cc-accent)); }
.cc-bgm__vb:hover { color: var(--cc-btn-text, var(--cc-text)); }

/* ===== 캘린더 페이지: 달력 / TODAY 컨테이너 분리, 세로 중앙, 합이 넘치면 TODAY 안에서 스크롤 ===== */
.cc-cal { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 0; }
.cc-cal__box { padding: 12px; border-radius: 16px; background: var(--cc-btn-bg, var(--cc-soft)); color: var(--cc-btn-text, inherit); }
.cc-cal > .cc-cal__box:first-child { flex: none; }
.cc-cal__today { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cc-cal__today .cc-sec { flex: none; }
.cc-cal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cc-panel[data-pane="calendar"] .cc-body { background: transparent !important; padding: 0 12px 0 0 !important; border-radius: 0; overflow: hidden; }
.cc-m-calendar.cc-full { background: transparent; }
.cc-m-calendar.cc-full .cc-full__in { padding: 0; }

/* 패널 안 글자는 기본적으로 설정한 글자색(--cc-text)을 따른다 */
.cc-panel { --cc-text-base: var(--content-font-color, #25272c); }
.cc-panel, .cc-panel :is(input, textarea, select, button:not(.cc-bgm__play)):not(.nf-grid *) { color: var(--cc-text); }
.cc-panel .nf-grid { color: var(--cc-text-base); }   /* 피드 카드(nf-grid) 안의 글자는 설정한 글자색에서 제외 */
.cc-panel .cc-card__hd, .cc-panel .cc-chip, .cc-panel .cc-rail__b, .cc-panel .cc-ib, .cc-panel .cc-profile__edit { color: var(--cc-label, var(--cc-mute)); }
.cc-panel .cc-chip { color: var(--cc-chip-text, var(--cc-mute)); }
.cc-panel .cc-tile__ic, .cc-panel .cc-badge, .cc-panel .cc-cal__day.today .cc-cal__n, .cc-panel .cc-mini-cal__d.today { color: var(--cc-accent-text); }

/* 프로필 박스 여백 */
.cc-profile:not(.is-small) { padding: 14px 18px; column-gap: 14px; }
.cc-profile .cc-profile__edit { top: 10px; right: 12px; }

/* 블러: 패널 가로 전체를 빈틈없이 덮고, 패널 바깥으로 90px 더 번지며 옅어진다 */
.cc-blur {
    --cc-pw: min(372px, 100vw); --cc-ext: 90px;
    width: calc(var(--cc-pw) + var(--cc-ext)); max-width: 100vw;
    -webkit-mask-image: linear-gradient(to left, #000 var(--cc-pw), transparent 100%);
    mask-image: linear-gradient(to left, #000 var(--cc-pw), transparent 100%);
}
.cc-blur.cc-pos-left {
    -webkit-mask-image: linear-gradient(to right, #000 var(--cc-pw), transparent 100%);
    mask-image: linear-gradient(to right, #000 var(--cc-pw), transparent 100%);
}

/* 블러가 자연스럽게 풀리도록: 부드러운(smoothstep) 곡선으로 130px 동안 서서히 사라진다 */
.cc-blur { --cc-ext: 130px; -webkit-mask-image: linear-gradient(to left, #000 var(--cc-pw), rgba(0,0,0,.97) calc(var(--cc-pw) + var(--cc-ext) * .1), rgba(0,0,0,.9) calc(var(--cc-pw) + var(--cc-ext) * .2), rgba(0,0,0,.78) calc(var(--cc-pw) + var(--cc-ext) * .3), rgba(0,0,0,.65) calc(var(--cc-pw) + var(--cc-ext) * .4), rgba(0,0,0,.5) calc(var(--cc-pw) + var(--cc-ext) * .5), rgba(0,0,0,.35) calc(var(--cc-pw) + var(--cc-ext) * .6), rgba(0,0,0,.22) calc(var(--cc-pw) + var(--cc-ext) * .7), rgba(0,0,0,.1) calc(var(--cc-pw) + var(--cc-ext) * .8), rgba(0,0,0,.03) calc(var(--cc-pw) + var(--cc-ext) * .9), transparent 100%); mask-image: linear-gradient(to left, #000 var(--cc-pw), rgba(0,0,0,.97) calc(var(--cc-pw) + var(--cc-ext) * .1), rgba(0,0,0,.9) calc(var(--cc-pw) + var(--cc-ext) * .2), rgba(0,0,0,.78) calc(var(--cc-pw) + var(--cc-ext) * .3), rgba(0,0,0,.65) calc(var(--cc-pw) + var(--cc-ext) * .4), rgba(0,0,0,.5) calc(var(--cc-pw) + var(--cc-ext) * .5), rgba(0,0,0,.35) calc(var(--cc-pw) + var(--cc-ext) * .6), rgba(0,0,0,.22) calc(var(--cc-pw) + var(--cc-ext) * .7), rgba(0,0,0,.1) calc(var(--cc-pw) + var(--cc-ext) * .8), rgba(0,0,0,.03) calc(var(--cc-pw) + var(--cc-ext) * .9), transparent 100%); }
.cc-blur.cc-pos-left { -webkit-mask-image: linear-gradient(to right, #000 var(--cc-pw), rgba(0,0,0,.97) calc(var(--cc-pw) + var(--cc-ext) * .1), rgba(0,0,0,.9) calc(var(--cc-pw) + var(--cc-ext) * .2), rgba(0,0,0,.78) calc(var(--cc-pw) + var(--cc-ext) * .3), rgba(0,0,0,.65) calc(var(--cc-pw) + var(--cc-ext) * .4), rgba(0,0,0,.5) calc(var(--cc-pw) + var(--cc-ext) * .5), rgba(0,0,0,.35) calc(var(--cc-pw) + var(--cc-ext) * .6), rgba(0,0,0,.22) calc(var(--cc-pw) + var(--cc-ext) * .7), rgba(0,0,0,.1) calc(var(--cc-pw) + var(--cc-ext) * .8), rgba(0,0,0,.03) calc(var(--cc-pw) + var(--cc-ext) * .9), transparent 100%); mask-image: linear-gradient(to right, #000 var(--cc-pw), rgba(0,0,0,.97) calc(var(--cc-pw) + var(--cc-ext) * .1), rgba(0,0,0,.9) calc(var(--cc-pw) + var(--cc-ext) * .2), rgba(0,0,0,.78) calc(var(--cc-pw) + var(--cc-ext) * .3), rgba(0,0,0,.65) calc(var(--cc-pw) + var(--cc-ext) * .4), rgba(0,0,0,.5) calc(var(--cc-pw) + var(--cc-ext) * .5), rgba(0,0,0,.35) calc(var(--cc-pw) + var(--cc-ext) * .6), rgba(0,0,0,.22) calc(var(--cc-pw) + var(--cc-ext) * .7), rgba(0,0,0,.1) calc(var(--cc-pw) + var(--cc-ext) * .8), rgba(0,0,0,.03) calc(var(--cc-pw) + var(--cc-ext) * .9), transparent 100%); }

/* ===== 고정 페이지의 닫기 바: 패널 바깥쪽 옆(페이지 버튼 반대쪽)에 패널 바(홈바)와 같은 모양 ===== */
.cc-closebar {
    position: fixed; top: 50%; margin-top: -80px; width: 26px; height: 160px; padding: 0; border: 0; background: transparent;
    cursor: pointer; z-index: 99991; display: block; opacity: 0; pointer-events: none; transition: opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.cc-closebar.show { opacity: 1; pointer-events: auto; }
.cc-closebar::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 110px; margin: -55px 0 0 -2.5px; border-radius: 3px;
    background: rgba(60, 60, 60, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
    transition: background-color .2s ease, height .2s ease, margin-top .2s ease;
}
.cc-closebar:hover::before { background: rgba(60, 60, 60, .9); height: 130px; margin-top: -65px; }
.cc-closebar.cc-pos-right, .cc-closebar.cc-pos-bottom { right: calc(min(372px, 100vw) - 8px); left: auto; }   /* 막대가 패널 가장자리에서 5px 떨어진 곳에 오도록 눌리는 영역을 8px 겹친다 */
.cc-closebar.cc-pos-left { left: calc(min(372px, 100vw) - 8px); right: auto; }
.cc-closebar.cc-admin-hidden { display: none !important; }

/* ===== 이미지 박스 (전시용 슬라이드) ===== */
.cc-card.cc-image { position: relative; padding: 0; overflow: hidden; }
.cc-card.cc-image.is-tr { background: none; box-shadow: none; }                 /* 투명 배경: 박스 배경색 없음 */
.cc-image__s { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cc-image__s.on { opacity: 1; }
.cc-image__s img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* 박스를 가득 채운다 */
.cc-image__dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.cc-image__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .5); }
.cc-image__dots i.on { background: #fff; }
.cc-image.is-empty { display: flex; align-items: center; justify-content: center; color: var(--cc-mute); }
.cc-image__ph { font-size: 1.4em; opacity: .5; }

/* ===== 텍스트 박스 (에디터로 쓴 글) ===== */
.cc-card.cc-text { padding: 0; overflow: hidden; }
.cc-card.cc-text.is-tr { background: none; box-shadow: none; }
.cc-text__in { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 10px 12px; word-break: break-word; scrollbar-width: thin; color: var(--cc-btn-text, inherit); }
.cc-text__in img { max-width: 100%; height: auto; }
.cc-text__in p { margin: 0 0 .5em; }
.cc-profile__id { opacity: .75; }

/* 프로필: 닉네임 밑에 "@ 아이디" — 아바타 오른쪽에 두 줄을 세로 가운데로 쌓는다 */
.cc-profile:not(.is-small) .cc-tile__tx { grid-row: 1; grid-column: 2; align-self: end; margin-top: 0; line-height: 1.25; }
.cc-profile:not(.is-small) .cc-profile__id { grid-row: 2; grid-column: 2; align-self: start; font-size: .78em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cc-label, var(--cc-mute)); }

/* ===== 홈바 배지 (읽지 않은 알림 · 투두 마감) =====
   닫혀 있는 동안 바 자체(배경색·테두리)는 그대로 두고, 바가 붙은 화면 가장자리에서 붉은 빛만 번졌다 사라진다.
   (::before = 바, ::after = 번지는 빛. 하단은 가로 바, 좌/우는 세로 바 — 바와 같은 자리·크기) */
/* 알림 빛: 번지는 흐린 빛 대신, 바가 붙어 있는 화면 가장자리를 따라 얇은 붉은 선이 바 중앙에서 양쪽으로 뻗어 나갔다 사라진다.
   (하단=아래 가장자리를 따라 가로선, 좌/우=옆 가장자리를 따라 세로선. 선 끝만 가늘게 사라지고 경계는 또렷하다) 약 2.3초 뻗고 나머지는 쉬는 구간 */
.cc-homebar { overflow: visible; }
.cc-homebar.has-badge::after {
    content: ''; position: absolute; pointer-events: none;
    left: 50%; bottom: 0; top: auto; right: auto; width: 360px; height: 3px; margin: 0 0 0 -180px;
    background: linear-gradient(to right, rgba(255, 68, 68, 0) 0%, rgba(255, 68, 68, .95) 50%, rgba(255, 68, 68, 0) 100%);
    transform-origin: 50% 50%; opacity: 0;
    animation: cc-edge-line 3.8s ease-out infinite;
}
.cc-homebar.cc-bar-left.has-badge::after, .cc-homebar.cc-bar-right.has-badge::after {
    top: 50%; bottom: auto; width: 3px; height: 360px; margin: -180px 0 0 0;
    background: linear-gradient(to bottom, rgba(255, 68, 68, 0) 0%, rgba(255, 68, 68, .95) 50%, rgba(255, 68, 68, 0) 100%);
    animation-name: cc-edge-line-v;
}
.cc-homebar.cc-bar-left.has-badge::after { left: 0; right: auto; }
.cc-homebar.cc-bar-right.has-badge::after { left: auto; right: 0; }
@keyframes cc-edge-line {
    0%   { opacity: 0; transform: scaleX(.12); }
    18%  { opacity: 1; }
    62%  { opacity: 0; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}
@keyframes cc-edge-line-v {
    0%   { opacity: 0; transform: scaleY(.12); }
    18%  { opacity: 1; }
    62%  { opacity: 0; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
}
/* 모션을 줄이는 설정이면 뻗어 나가지 않고 가장자리의 선만 옅게 남긴다 */
@media (prefers-reduced-motion: reduce) {
    .cc-homebar.has-badge::after { animation: none; opacity: .6; transform: none; }
}

/* ===== 바 hover: 늘어나는 모션을 부드럽게 =====
   예전에는 hover 때 width/height 와 margin 을 바꿔서(세로 바는 transition 목록에도 없어) 툭 튀었다.
   이제는 크기·여백은 그대로 두고 transform(scale)으로 가운데에서 양쪽으로 부드럽게 늘어나고 줄어든다 */
.cc-homebar::before { transition: transform .3s cubic-bezier(.22, .8, .3, 1), background-color .25s ease; transform-origin: 50% 50%; will-change: transform; }
.cc-homebar:hover::before { width: 110px; margin-left: -55px; transform: scaleX(1.18); }
.cc-homebar.cc-bar-left::before, .cc-homebar.cc-bar-right::before { transition: transform .3s cubic-bezier(.22, .8, .3, 1), background-color .25s ease; }
.cc-homebar.cc-bar-left:hover::before, .cc-homebar.cc-bar-right:hover::before { width: 5px; height: 110px; margin-left: 0; margin-top: -55px; transform: scaleY(1.18); }
@media (prefers-reduced-motion: reduce) { .cc-homebar::before { transition: background-color .2s ease; } .cc-homebar:hover::before, .cc-homebar.cc-bar-left:hover::before, .cc-homebar.cc-bar-right:hover::before { transform: none; } }

/* 투두 배지: 테두리 없이 #ff4444 배경 + 사이트의 흰색(--white) 글자 (위의 .cc-panel .cc-badge 글자색 규칙보다 우선) */
.cc-panel .cc-tile .cc-badge { background: #ff4444; color: var(--white); border: 0; box-shadow: none; }

/* 프로필: 정보수정 옆 로그아웃 버튼, 로그아웃 상태의 "로그인" 글자는 세로 가운데 */
.cc-profile .cc-profile__logout { right: 40px; }
.cc-profile:not(.is-small) .cc-profile__logout { right: 42px; }
.cc-profile.is-small .cc-profile__logout { right: auto; left: 3px; }
.cc-profile.is-guest:not(.is-small) .cc-tile__tx { grid-row: 1 / 3; align-self: center; }

/* 이미지 박스: 맞춤(이미지 전체가 보이게, 남는 곳은 비움) — 기본은 채우기(cover) */
.cc-image.is-contain .cc-image__s img { object-fit: contain; }
/* 프로필 칸은 위아래 여백 대신 내용을 세로 가운데로 모은다 (1줄 높이에서 아바타·글자가 아래로 쏠리던 것을 바로잡음) */
.cc-profile:not(.is-small) { padding-top: 0; padding-bottom: 0; align-content: center; }

/* ===== 말풍선(말1~말4): 제어 센터 안에서는 이 CSS 로 그린다 =====
   widget_textggu 의 textggu.css 는 말풍선 이미지를 ./img/talk1~4.png 로 부르는데 그 폴더에 이미지가 없고,
   제어 센터는 서버의 폴더 구성이나 다른 CSS 의 로드 여부에 기대지 않도록, 같은 모양의 스타일과 이미지(widget_a_textggu 의 talk1~4.png)를
   여기에 직접 담았다. (원본 위젯 파일은 건드리지 않는다) */
.cc-panel .textggu--talk1 { border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAeCAYAAABnuu2GAAAACXBIWXMAAFxGAABcRgEUlENBAAAGvmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzYwLCAyMDIwLzAyLzEzLTAxOjA3OjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI2LTAzLTA0VDE3OjM2OjQ5KzA5OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNi0xMC0wNVQwMDowNTozNyswOTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNi0xMC0wNVQwMDowNTozNyswOTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NTkwMmNiOS03MGZkLWJjNGEtODBhZC1mYzEyYzQwYzc0ZTYiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphNWM2MjUyZS1jYmI3LTBiNGUtOWFlZi05NzZkOGEzOTA3NmIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOThmZDE1Mi01MjEwLTVkNGYtOGNlYi1jYTUyYWRiOTE1MWYiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA5OGZkMTUyLTUyMTAtNWQ0Zi04Y2ViLWNhNTJhZGI5MTUxZiIgc3RFdnQ6d2hlbj0iMjAyNi0wMy0wNFQxNzozNjo0OSswOTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowZWYyOGNiNC0xMjI3LWJmNDItOGFlOS00NzVhOWY0NjU4ZGEiIHN0RXZ0OndoZW49IjIwMjYtMTAtMDVUMDA6MDU6MzcrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzU5MDJjYjktNzBmZC1iYzRhLTgwYWQtZmMxMmM0MGM3NGU2IiBzdEV2dDp3aGVuPSIyMDI2LTEwLTA1VDAwOjA1OjM3KzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BBc6WQAAAJtJREFUWIXtmEsKwCAMRKfSY87xvKfdtF1o7AdacGLeMrjIIxLILKUU1JBsiwOTc17q2nrx+N9uPoKkWU/GQ6lpAXbPjRigMy2g36sp5oEQUyPE1AgxNUJMjRBTI8TUCDE15hBTvJ57nJkHyaJ0Od+RAH9SAJA8SgH7V6wjLA+iax02elkgc6z7g166OiKPk2ArBx+dV9m90tQsNtPhLmdvRYy4AAAAAElFTkSuQmCC); width: fit-content; display: inline-flex; align-items: center; padding: 0 7px; height: 22px; border-image-width: 30px 30px; border-image-slice: 20; border-image-repeat: round; color: black; }
.cc-panel .textggu--talk2 { border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAeCAYAAABnuu2GAAAACXBIWXMAAFxGAABcRgEUlENBAAAF42lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzYwLCAyMDIwLzAyLzEzLTAxOjA3OjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI2LTAzLTA0VDE3OjM2OjQ5KzA5OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNi0xMC0wNVQwMDowNTowMyswOTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNi0xMC0wNVQwMDowNTowMyswOTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkZGVjODk1NS00YjIwLTE3NGQtYmQxOC1kYjEzMTIyZGJhMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk4ZmQxNTItNTIxMC01ZDRmLThjZWItY2E1MmFkYjkxNTFmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk4ZmQxNTItNTIxMC01ZDRmLThjZWItY2E1MmFkYjkxNTFmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOThmZDE1Mi01MjEwLTVkNGYtOGNlYi1jYTUyYWRiOTE1MWYiIHN0RXZ0OndoZW49IjIwMjYtMDMtMDRUMTc6MzY6NDkrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGRlYzg5NTUtNGIyMC0xNzRkLWJkMTgtZGIxMzEyMmRiYTE4IiBzdEV2dDp3aGVuPSIyMDI2LTEwLTA1VDAwOjA1OjAzKzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/rdTeQAAAJxJREFUWIXtmEEKxCAMRb/FS3kcNzlUFnocjzWzGQaqLRSKdn4mb/lX/5EgmFBKQY+qvobwhxGRkHPeZREA+lBV17WaxNYHKSWqaQHHGzaIWcHF2HAxNlyMDRdjw8XYcDE2XIwNF2NjJ8b4ez7jK2ZJCviIWZMCgI3t1HYVs49H7I+NVtbS7MT+R6y1Fp4ocgcRGTpHAKi1rm8zmTeDTx/YdMg5MQAAAABJRU5ErkJggg==); width: fit-content; display: inline-flex; align-items: center; padding: 0 7px; height: 22px; border-image-width: 30px 30px; border-image-slice: 20; border-image-repeat: round; color: white; }
.cc-panel .textggu--talk3 { border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAeCAYAAABnuu2GAAAACXBIWXMAAFxGAABcRgEUlENBAAAAG3RFWHRTb2Z0d2FyZQBDZWxzeXMgU3R1ZGlvIFRvb2zBp+F8AAAA+klEQVRYw+3ZyxGEIAwG4J8upABnrMIO0g1UQTl0QDN4tQL2sjio+NgZD5JNTjoOMZ/hAKhSSjgLIkoA4L1Xteda6xRjVHgwznJe1ZND3YF570FEu2TjOKYQArTWeAr3RVVzntXyE6z4OvkeADDPMwAghFAWtBo7TdNtTNd1y3WMcZez7/vV+3IdZ7hD2Bb1trjCLTBr7UronEMLQUQYhqGsW+1grWCOwlr7J7A8DTnA8nRUxpjmO1UDKmMMi25tu7ZMRU4w55wSmMAEJjCBCUxgb4SxXVKxXQSz3bbIDrplGMvDnMoAHsdvd3AsDkxLHLsj7k3Xmvop8QH3GHNM0dUgFwAAAABJRU5ErkJggg==); width: fit-content; align-items: center; padding: 5px 10px; height: 28px; border-image-width: 30px 30px; border-image-slice: 17; border-image-repeat: round; font-size: 110%; font-weight: bold; font-style: italic; color: black; filter: drop-shadow(0 0 0 black); }
.cc-panel .textggu--talk4 { border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAeCAYAAABzL3NnAAAACXBIWXMAAFxGAABcRgEUlENBAAAAG3RFWHRTb2Z0d2FyZQBDZWxzeXMgU3R1ZGlvIFRvb2zBp+F8AAAA3UlEQVRYw+3ZwQ2EIBAF0KELL3RAR0whlEAhlEQHXOiCPa2LJiYLqBn0czKZaDLPnzCKKqVQz2Lm9cac86aWUqKjWu9almW91lof1kIIqvXZagQhhECSFjPfg/BNgDSAGqI1EU0IEt/+Gan4G0F6AkYgmhBmAgACEIAABCAAAQhAAAIQgHA/wowfT8MIzFyMMeScU7OmYAihbth7T845BYS3INTxfyWCtXbTdIyRgACEX9P73eHxW+S+6afMCqdPjLPNC5f8cp8lEZcfvkjG6Gl+GKGGkHIg2wNARPQBbqx01BwWbyAAAAAASUVORK5CYII=); width: fit-content; display: inline-flex; align-items: center; padding: 0 12px; height: 22px; border-image-width: 30px 30px; border-image-slice: 17; border-image-repeat: round; color: black; }

/* 피드: 컨트롤(nf-controls)은 위, 페이지네이션(nf-pagination)은 아래에 고정하고 카드 목록(nf-grid)만 스크롤 */
.cc-feed { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cc-feed .nf-controls, .cc-feed .nf-pagination { flex: 0 0 auto; }
.cc-feed .nf-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start; overscroll-behavior: contain; scrollbar-width: thin; }
.cc-full__in:has(> .cc-feed), .cc-body:has(> .cc-feed) { overflow: hidden; }
.cc-body:has(> .cc-feed) { display: flex; flex-direction: column; }
.cc-body > .cc-feed { flex: 1 1 auto; }
.cc-feed .nf-grid { grid-auto-rows: max-content; }   /* 목록 높이가 고정되어도 카드가 찌그러지지 않게 */
.cc-feed .nf-card { min-height: max-content; overflow: hidden; }

/* 피드 간략화: 카드 10개가 한 페이지에 다 보이도록 글자와 여백을 줄이고, 제목은 한 줄만 보여 준다 */
.cc-feed .nf-grid { gap: 6px; }
.cc-feed .nf-controls { margin-bottom: 6px; gap: 6px; }
.cc-feed .nf-pagination { margin-top: 6px; }
.cc-feed .nf-card-watermark, .cc-feed .nf-card-excerpt, .cc-feed .nf-card-thumb, .cc-feed .nf-card-author-label { display: none; }
.cc-feed .nf-card-topbar { padding: 3px 10px; font-size: 8px; letter-spacing: .1em; }
.cc-feed .nf-card-topbar-left { gap: 8px; }
.cc-feed .nf-card-content { padding: 3px 10px 5px; flex-direction: row; align-items: center; gap: 8px; }
.cc-feed .nf-card-main { gap: 0; min-width: 0; }
.cc-feed .nf-card-title { margin: 0; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-feed .nf-card-footer { margin: 0; padding: 0; border: 0; flex: 0 0 auto; gap: 8px; }
.cc-feed .nf-card-author-name { font-size: 10px; white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.cc-feed .nf-card-actions { gap: 6px; }
.cc-feed .nf-card-actions a { font-size: 10px; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.cc-feed .nf-card-link { font-size: 11px; }
.cc-feed .nf-card { min-height: 0; }

/* 창 높이 반응형: 640px 상한을 없애고 화면(뷰포트) 높이를 따라간다 (하단 바: 86%, 좌·우 바: 94%) */
.cc-panel { --cc-maxh: 86vh; max-height: var(--cc-maxh); }
@supports (height: 1dvh) { .cc-panel { --cc-maxh: 86dvh; } }
.cc-panel.cc-pos-left, .cc-panel.cc-pos-right { --cc-maxh: 94vh; }
@supports (height: 1dvh) { .cc-panel.cc-pos-left, .cc-panel.cc-pos-right { --cc-maxh: 94dvh; } }
.cc-frame { height: calc(var(--cc-maxh, 86vh) - 70px); }

/* 피드: 남는 높이는 카드가 균등하게 나눠 가져 아래 여백 없이 채운다 (넘치면 최소 높이 유지 + 스크롤) */
.cc-feed .nf-grid { grid-auto-rows: minmax(max-content, 1fr); align-content: stretch; }
.cc-feed .nf-card-content { flex: 1 1 auto; }

/* 피드: 작성자는 표시하지 않는다 */
.cc-feed .nf-card-author { display: none; }
.cc-feed .nf-pagination .nf-pg-nav.is-off { opacity: .3; pointer-events: none; }

/* 피드의 필터·새로고침·페이지네이션을 위젯의 다른 버튼(.cc-btn / .cc-ib)과 같은 모양으로 통일 */
.cc-feed .nf-filter { gap: 6px; align-items: stretch; }
.cc-feed .nf-filter select, .cc-feed .nf-refresh {
    height: 32px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cc-soft2); color: var(--cc-text);
    font: inherit; font-size: .85em; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s;
}
.cc-feed .nf-filter select { appearance: none; -webkit-appearance: none; padding-right: 14px; }
.cc-feed .nf-filter select:focus { outline: none; box-shadow: 0 0 0 2px var(--cc-soft2); }
.cc-feed .nf-refresh { flex: none; }
.cc-feed .nf-refresh:hover { background: var(--cc-soft2); color: var(--cc-text); filter: brightness(1.15); }
.cc-feed .nf-pagination { gap: 4px; align-items: center; }
.cc-feed .nf-pagination a, .cc-feed .nf-pagination .current {
    min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 50%; background: transparent; color: var(--cc-mute);
    font: inherit; font-size: .85em; font-weight: 400; transition: background .15s;
}
.cc-feed .nf-pagination a:hover { background: var(--cc-soft); color: var(--cc-text); border: 0; }
.cc-feed .nf-pagination .current { background: var(--cc-accent); color: var(--cc-accent-text); font-weight: 700; }

/* ── a_scrap 스킨의 드롭다운·페이지네이션 모양을 그대로 따른다 ── */
.cc-feed .nf-filter { gap: 8px; }
.cc-feed .nf-filter > .cc-dd__btn { flex: 1 1 auto; min-width: 0; width: auto; }
.cc-dd__btn, .cc-feed .nf-refresh {
    display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 34px; padding: 0 12px;
    border-radius: 10px; color: var(--content-font-color); background: rgb(from var(--card-bg-color) r g b / 50%);
    border: 1px solid var(--card-border-color); font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left;
    cursor: pointer; white-space: nowrap; appearance: none; -webkit-appearance: none; text-decoration: none; filter: none;
}
.cc-feed .nf-refresh { flex: none; justify-content: center; opacity: .9; transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.cc-feed .nf-refresh:hover { opacity: 1; color: var(--content-font-color); border-color: var(--accent-color); background: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent); filter: none; }
.cc-dd__btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.cc-dd__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-dd__arrow { margin-left: auto; opacity: .8; transition: transform .18s ease; }
.cc-dd__btn.is-open .cc-dd__arrow { transform: rotate(180deg); }
.cc-dd__menu {
    --dd-hover-bg: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent);
    position: fixed; box-sizing: border-box; z-index: 2147483000; min-width: 180px; max-height: min(320px, 60vh); height: fit-content; overflow-y: auto;
    padding: 5px 0; border: 1px solid var(--container-border-color); border-radius: 12px; background: var(--container-bg-color); backdrop-filter: blur(10px);
    font-size: 14px; scrollbar-width: thin;
}
.cc-dd__item { position: relative; z-index: 0; display: block; padding: 9px 14px; color: var(--content-font-color); opacity: .9; cursor: pointer; }
.cc-dd__item::before { content: ""; position: absolute; inset: 0 5px; z-index: -1; border-radius: 10px; background: transparent; }
.cc-dd__item + .cc-dd__item { margin-top: 3px; }
.cc-dd__item:hover, .cc-dd__item.is-active { opacity: 1; font-weight: 700; }
.cc-dd__item:hover::before, .cc-dd__item.is-active::before { background: var(--dd-hover-bg); }

.cc-feed .nf-pagination { --dd-hover-bg: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent); gap: 6px; align-items: center; }
.cc-feed .nf-pagination a, .cc-feed .nf-pagination .current {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 34px; height: 34px; margin: 0; padding: 0 8px;
    border: 1px solid var(--card-border-color); border-radius: 10px; background: rgb(from var(--card-bg-color) r g b / 50%);
    color: var(--content-font-color); font-size: 14px; font-weight: 400; line-height: 1; text-decoration: none; box-shadow: none; opacity: .9;
    transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.cc-feed .nf-pagination a:hover { opacity: 1; color: var(--content-font-color); border: 1px solid var(--accent-color); background: var(--dd-hover-bg); }
.cc-feed .nf-pagination .current { opacity: 1; color: var(--accent-color); border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, transparent); font-weight: 700; }
.cc-feed .nf-pagination .nf-pg-nav i { font-size: 12px; }
.cc-panel .cc-dd__btn { color: var(--content-font-color); }

/* 드롭다운 버튼(All Sources)도 Refresh 버튼과 같은 상태 표현(흐림 정도·전환·hover)을 쓴다 */
.cc-dd__btn { opacity: .9; transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.cc-dd__btn:hover, .cc-dd__btn.is-open { opacity: 1; color: var(--content-font-color); border-color: var(--accent-color); background: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent); }

/* All Sources 버튼 = Refresh 버튼과 같은 값(배경·글자색·테두리·크기)으로 */
.cc-panel .cc-feed .nf-filter .cc-dd__btn {
    height: 32px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--cc-soft2); color: var(--cc-text);
    font: inherit; font-size: .85em; opacity: 1; transition: background .15s; box-shadow: none;
}
.cc-panel .cc-feed .nf-filter .cc-dd__btn:hover, .cc-panel .cc-feed .nf-filter .cc-dd__btn.is-open { background: var(--cc-soft2); color: var(--cc-text); border: 0; filter: brightness(1.15); opacity: 1; }

/* All Sources 버튼: 테두리는 a_scrap 스킨의 것(--card-border-color)을 유지하고, 글자색은 Refresh 와 같은 --cc-text */
.cc-panel .cc-feed .nf-filter .cc-dd__btn, .cc-panel .cc-feed .nf-filter .cc-dd__btn:hover, .cc-panel .cc-feed .nf-filter .cc-dd__btn.is-open {
    border: 1px solid var(--card-border-color); color: var(--cc-text);
}

/* All Sources 버튼의 글자(색·불투명도)를 Refresh 와 동일하게: 평소 .9, hover/열림 1 */
.cc-panel .cc-feed .nf-filter .cc-dd__btn { color: var(--cc-text); opacity: .9; }
.cc-panel .cc-feed .nf-filter .cc-dd__btn:hover, .cc-panel .cc-feed .nf-filter .cc-dd__btn.is-open { color: var(--cc-text); opacity: 1; }

/* 드롭다운의 글자(ALL SOURCES 등)는 홈페이지 글자색 */
.cc-panel .cc-feed .nf-filter .cc-dd__btn, .cc-panel .cc-feed .nf-filter .cc-dd__btn:hover, .cc-panel .cc-feed .nf-filter .cc-dd__btn.is-open, .cc-panel .cc-feed .nf-filter .cc-dd__label { color: var(--content-font-color); }

/* 드롭다운 버튼의 배경 = Refresh 와 같은 값 (평소: 카드 배경 50%, hover/열림: 보조 버튼색 45%) */
.cc-panel .cc-feed .nf-filter .cc-dd__btn { background: rgb(from var(--card-bg-color) r g b / 50%); }
.cc-panel .cc-feed .nf-filter .cc-dd__btn:hover, .cc-panel .cc-feed .nf-filter .cc-dd__btn.is-open { background: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent); filter: none; }

/* 알림 선: 더 굵고(5px) 더 길게(PC 560px), 보이는 시간도 늘림(약 3초 뻗고 잠깐 쉼) */
.cc-homebar.has-badge::after { height: 5px; animation-duration: 3.8s; }
.cc-homebar.cc-bar-left.has-badge::after, .cc-homebar.cc-bar-right.has-badge::after { width: 5px; height: 360px; }
@media (min-width: 900px) {
    .cc-homebar.has-badge::after { width: 560px; margin-left: -280px; }
}
@media (min-width: 900px) and (min-height: 800px) {
    .cc-homebar.cc-bar-left.has-badge::after, .cc-homebar.cc-bar-right.has-badge::after { width: 5px; height: 560px; margin: -280px 0 0 0; }
}
@keyframes cc-edge-line {
    0%   { opacity: 0; transform: scaleX(.12); }
    14%  { opacity: 1; }
    45%  { opacity: 1; }
    80%  { opacity: 0; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}
@keyframes cc-edge-line-v {
    0%   { opacity: 0; transform: scaleY(.12); }
    14%  { opacity: 1; }
    45%  { opacity: 1; }
    80%  { opacity: 0; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
}

/* ===== 접속자 박스: 겹친 이름 동그라미 + 접속 인원 ===== */
.cc-conn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: default; }
.cc-conn__stack { display: flex; flex: none; }
.cc-conn__av {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--cc-bg); font-size: .78em; font-weight: 700; margin-left: -8px; color: var(--cc-text); background: var(--cc-soft2);
}
.cc-conn__av:first-child { margin-left: 0; }
.cc-conn__av.more { font-size: .7em; color: var(--cc-mute); background: var(--cc-soft); }
.cc-conn__tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cc-conn__n { font-size: .9em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-conn__sub { font-size: .72em; color: var(--cc-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-conn.is-narrow { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; text-align: center; }
.cc-conn.is-narrow .cc-conn__sub { display: none; }
.cc-conn__av { position: relative; overflow: hidden; }
.cc-conn__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* 접속자 동그라미 배경: 색을 따로 정하지 않고 사이트의 CSS 변수를 쓴다 */
.cc-conn__av, .cc-conn__av[class*=" t"] { background: var(--btn-secondary-bg, var(--cc-soft2)); color: var(--content-font-color, var(--cc-text)); }
.cc-conn__av.more { background: var(--cc-soft); color: var(--cc-mute); }
.cc-conn__av, .cc-conn__av.more { border-color: var(--btn-secondary-bg, var(--cc-soft2)); }
.cc-conn__av.is-in { animation: cc-conn-in .25s ease-out; }
@keyframes cc-conn-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ===== BGM 박스 (2×2 / 4×2 / 4×4) : 썸네일 · 곡명 · 이전/재생/다음 · 재생 막대 · 음량 ===== */
.cc-bgm { display: flex; padding: 10px 12px; gap: 8px; overflow: hidden; }
.cc-bgm .cc-bgm__thumb { object-fit: cover; border-radius: 12px; background: var(--cc-soft2); }
.cc-bgm .cc-bgm__title { min-width: 0; font-size: .95em; font-weight: 500; line-height: 1.3; }
.cc-bgm .cc-bgm__ctl { margin: 0; gap: 0; justify-content: space-between; }
.cc-bgm .cc-bgm__b { width: 40px; height: 40px; font-size: 1.15em; background: transparent; color: var(--cc-btn-text, var(--cc-text)); }
.cc-bgm .cc-bgm__b:not(.cc-bgm__play) { opacity: .6; }
.cc-bgm .cc-bgm__b:disabled { opacity: .28; }
.cc-bgm .cc-bgm__play { width: 46px; height: 46px; font-size: 1.8em; background: transparent; color: var(--cc-btn-text, var(--cc-text)); }
.cc-bgm .cc-bgm__play:hover:not(:disabled), .cc-bgm .cc-bgm__b:hover:not(:disabled) { background: var(--cc-btn-hover, var(--cc-soft)); filter: none; }
.cc-bgm__prog { min-width: 0; }
.cc-bgm__prog .cc-range { width: 100%; }
.cc-bgm__times { display: flex; justify-content: space-between; margin-top: -2px; font-size: .68em; color: var(--cc-mute); font-variant-numeric: tabular-nums; }
.cc-bgm__vol { display: flex; align-items: center; gap: 8px; }

/* 4×2: 왼쪽 썸네일, 오른쪽에 곡명 · 조작 · 재생 막대 */
.cc-bgm--wide { flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; }
.cc-bgm--wide .cc-bgm__thumb { width: auto; height: 100%; aspect-ratio: 1; flex: none; }
.cc-bgm--wide .cc-bgm__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cc-bgm--wide .cc-bgm__ctl { padding: 0 10px; }

/* 2×2: 썸네일 · 곡명 · 조작 */
.cc-bgm--compact { flex-direction: column; justify-content: space-between; }
.cc-bgm--compact .cc-bgm__thumb { width: 46px; height: 46px; }
.cc-bgm--compact .cc-bgm__ctl { justify-content: space-between; }
.cc-bgm--compact .cc-bgm__b { width: 34px; height: 34px; }
.cc-bgm--compact .cc-bgm__play { width: 40px; height: 40px; font-size: 1.5em; }

/* 4×4: 썸네일 + 곡명, 재생 막대, 조작, 음량 */
.cc-bgm--tall { flex-direction: column; justify-content: space-between; }
.cc-bgm--tall .cc-bgm__top { display: flex; align-items: center; gap: 10px; }
.cc-bgm--tall .cc-bgm__thumb { width: 56px; height: 56px; flex: none; }
.cc-bgm--tall .cc-bgm__title { flex: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* BGM: 재생 막대·음량 막대에는 동그라미 핸들을 두지 않는다 (막대 채움만 보인다), 곡명은 굵게 */
.cc-bgm .cc-range::-webkit-slider-thumb { width: 0; height: 0; margin-top: 0; background: transparent; box-shadow: none; }
.cc-bgm .cc-range::-moz-range-thumb { width: 0; height: 0; background: transparent; box-shadow: none; border: 0; }
.cc-bgm .cc-bgm__title { font-weight: 700; }

/* BGM 크기별 다듬기 */
.cc-bgm--compact { gap: 4px; padding: 8px 10px; }
.cc-bgm--compact .cc-bgm__thumb { width: 38px; height: 38px; border-radius: 10px; }
.cc-bgm--compact .cc-bgm__title { font-size: .88em; line-height: 1.25; margin-top: 2px; }
.cc-bgm--compact .cc-bgm__b { width: 30px; height: 30px; }
.cc-bgm--compact .cc-bgm__play { width: 34px; height: 34px; font-size: 1.35em; }
.cc-bgm--wide .cc-bgm__main { justify-content: flex-end; gap: 6px; }
.cc-bgm--tall .cc-bgm__thumb { width: 128px; height: 128px; border-radius: 14px; }

/* 곡명 오른쪽 끝의 이퀄라이저 아이콘: 재생 중에는 막대가 오르내리고, 멈추면 낮게 가라앉는다 */
.cc-bgm__trow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-bgm__trow .cc-bgm__title { flex: 1; min-width: 0; }
.cc-bgm__eq { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 18px; color: var(--cc-btn-text, var(--cc-text)); }
.cc-bgm__eq i { display: block; width: 3px; height: 4px; border-radius: 2px; background: currentColor; transition: height .25s ease; }
.cc-bgm__eq b { display: block; width: 3px; height: 3px; margin-left: 1px; border-radius: 50%; background: currentColor; opacity: .7; }
.cc-bgm__eq i:nth-child(1) { height: 5px; } .cc-bgm__eq i:nth-child(2) { height: 8px; } .cc-bgm__eq i:nth-child(3) { height: 11px; } .cc-bgm__eq i:nth-child(4) { height: 8px; } .cc-bgm__eq i:nth-child(5) { height: 5px; }
.cc-bgm__eq:not(.on) { opacity: .5; }
.cc-bgm__eq.on i { animation: cc-eq 1s ease-in-out infinite; }
.cc-bgm__eq.on i:nth-child(1) { animation-duration: .9s; animation-delay: -.2s; }
.cc-bgm__eq.on i:nth-child(2) { animation-duration: 1.1s; animation-delay: -.6s; }
.cc-bgm__eq.on i:nth-child(3) { animation-duration: .8s; animation-delay: -.1s; }
.cc-bgm__eq.on i:nth-child(4) { animation-duration: 1.2s; animation-delay: -.8s; }
.cc-bgm__eq.on i:nth-child(5) { animation-duration: 1s; animation-delay: -.4s; }
@keyframes cc-eq { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@media (prefers-reduced-motion: reduce) { .cc-bgm__eq.on i { animation: none; } }
.cc-bgm--tall .cc-bgm__trow { flex: 1; }

/* BGM 박스 안쪽 여백을 넉넉하게 / 2×2 는 썸네일 줄의 오른쪽 끝에 이퀄라이저 */
.cc-bgm { padding: 14px 16px; }
.cc-bgm--wide { padding: 14px; gap: 14px; }
.cc-bgm--compact { padding: 12px 14px; gap: 6px; }
.cc-bgm--tall { padding: 16px 18px; }
.cc-bgm__top--sm { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-bgm__top--sm .cc-bgm__eq { align-self: center; }
.cc-bgm--compact .cc-bgm__title { margin-top: 0; }

/* BGM 2×4 / 4×8 (세로로 긴 박스): 큰 썸네일 → 곡명(+이퀄라이저) → 재생 막대 → 조작 → 음량 */
.cc-bgm--tall { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 16px; }
.cc-bgm--tall .cc-bgm__thumb { width: 100%; height: auto; flex: 1 1 0; min-height: 40px; border-radius: 14px; aspect-ratio: auto; }
.cc-bgm--tall .cc-bgm__thumb[hidden] { display: block !important; background: var(--cc-soft2); }
.cc-bgm--tall .cc-bgm__trow, .cc-bgm--tall .cc-bgm__prog, .cc-bgm--tall .cc-bgm__ctl, .cc-bgm--tall .cc-bgm__vol { flex: none; }
.cc-bgm--tall .cc-bgm__trow { padding: 0 2px; }
.cc-bgm--tall .cc-bgm__title { flex: 1; white-space: nowrap; display: block; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; }
.cc-bgm--tall .cc-bgm__ctl { padding: 0 14px; }

/* 4×2: 곡명·이퀄라이저·조작 버튼을 재생 막대 쪽으로 붙인다 */
.cc-bgm--wide .cc-bgm__main { justify-content: flex-end; gap: 0; }
.cc-bgm--wide .cc-bgm__trow { margin-bottom: 2px; }
.cc-bgm--wide .cc-bgm__ctl { margin-bottom: 4px; }

/* 세로형 BGM(2×4, 4×8): 썸네일은 항상 정사각형, 아래 요소(곡명·재생 막대·조작·음량)는 남는 높이에 고르게 배치 */
.cc-bgm--tall .cc-bgm__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; flex: none; min-height: 0; }
.cc-bgm--tall .cc-bgm__rest { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 4px; }
.cc-bgm--tall .cc-bgm__rest > * { flex: none; }

/* 세로형 BGM: 썸네일은 정사각형이되, 박스 높이가 모자라면(예: 4×6) 아래 요소가 들어갈 높이(약 130px)를 남기고 그만큼만 작아진다 */
.cc-bgm--tall { padding: 14px; gap: 6px; }
.cc-bgm--tall .cc-bgm__thumb { width: min(100%, calc(var(--bh, 600px) - 28px - 6px - 128px)); align-self: center; }
.cc-bgm--tall .cc-bgm__rest { gap: 2px; }
/* 2×4(좁은 세로형): 요소를 조금씩 줄이고 간격은 고르게 */
.cc-bgm--narrow .cc-bgm__title { font-size: .84em; }
.cc-bgm--narrow .cc-bgm__eq { transform: scale(.85); transform-origin: right center; }
.cc-bgm--narrow .cc-bgm__prog .cc-range { height: 18px; }
.cc-bgm--narrow .cc-bgm__times { font-size: .62em; margin-top: -4px; }
.cc-bgm--narrow .cc-bgm__ctl { padding: 0 6px; }
.cc-bgm--narrow .cc-bgm__b { width: 32px; height: 32px; font-size: 1em; }
.cc-bgm--narrow .cc-bgm__play { width: 36px; height: 36px; font-size: 1.35em; }
.cc-bgm--narrow .cc-bgm__vb { width: 22px; height: 22px; }
.cc-bgm--narrow .cc-bgm__vol .cc-range { height: 18px; }

/* 곡명이 길면 말줄임(...) 대신 좌우로 천천히 흘러간다 (끝에서 잠깐 멈췄다가 되돌아옴) */
.cc-bgm .cc-bgm__title, .cc-bgm--tall .cc-bgm__title { overflow: hidden; white-space: nowrap; text-overflow: clip; display: block; -webkit-line-clamp: unset; }
.cc-bgm__tt { display: inline-block; will-change: transform; }
.cc-bgm__title.is-scroll .cc-bgm__tt { animation: cc-marq var(--dur, 8s) ease-in-out infinite alternate; }
@keyframes cc-marq { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--ov, 0)); } }
@media (prefers-reduced-motion: reduce) {
    .cc-bgm__title.is-scroll .cc-bgm__tt { animation: none; }
    .cc-bgm .cc-bgm__title { text-overflow: ellipsis; }
}

/* BGM 박스 안쪽 여백을 한 단계 더 넉넉하게 */
.cc-bgm--wide { padding: 18px; gap: 16px; }
.cc-bgm--compact { padding: 16px; }
.cc-bgm--tall { padding: 18px; }
.cc-bgm--tall .cc-bgm__thumb { width: min(100%, calc(var(--bh, 600px) - 36px - 6px - 128px)); }

/* 썸네일과 곡명 사이 간격을 넓힌다 */
.cc-bgm--wide { gap: 22px; }
.cc-bgm--compact .cc-bgm__title { margin-top: 10px; }
.cc-bgm--tall .cc-bgm__thumb { margin-bottom: 12px; }
/* 2×4(좁은 세로형): 곡명·이퀄라이저·조작 버튼을 아래로 내려 재생 막대 쪽에 모은다 (남는 높이는 썸네일과 곡명 사이로) */
.cc-bgm--narrow .cc-bgm__rest { justify-content: flex-end; gap: 8px; }
.cc-bgm--narrow .cc-bgm__thumb { margin-bottom: 0; }

/* BGM 다듬기: 곡명 글자 잘림 방지, 2×2 · 2×4 간격 재조정, 4×2 곡명·버튼을 아래로, 버튼 hover 배경 제거 */
.cc-bgm .cc-bgm__title { line-height: 1.5; padding: 0; }
.cc-bgm .cc-bgm__b:hover:not(:disabled), .cc-bgm .cc-bgm__play:hover:not(:disabled) { background: transparent !important; filter: none; }
.cc-bgm .cc-bgm__b:hover:not(:disabled):not(.cc-bgm__play) { opacity: .9; }

/* 2×2 */
.cc-bgm--compact { padding: 14px; gap: 4px; }
.cc-bgm--compact .cc-bgm__thumb { width: 36px; height: 36px; }
.cc-bgm--compact .cc-bgm__title { margin-top: 6px; }
.cc-bgm--compact .cc-bgm__b { width: 30px; height: 30px; }
.cc-bgm--compact .cc-bgm__play { width: 34px; height: 34px; }

/* 4×2: 버튼을 조금 줄여 곡명·조작 버튼 묶음이 재생 막대 쪽(아래)으로 붙는다 */
.cc-bgm--wide .cc-bgm__b { width: 34px; height: 34px; }
.cc-bgm--wide .cc-bgm__play { width: 38px; height: 38px; }
.cc-bgm--wide .cc-bgm__ctl { margin-bottom: 2px; }
.cc-bgm--wide .cc-bgm__trow { margin-bottom: 0; }

/* 2×4: 요소를 줄여 썸네일과 겹치지 않게 하고, 남는 높이는 썸네일과 곡명 사이로 */
.cc-bgm--narrow { padding: 14px; gap: 6px; }
.cc-bgm--narrow .cc-bgm__thumb { width: 100%; margin-bottom: 0; }
.cc-bgm--narrow .cc-bgm__rest { justify-content: flex-end; gap: 4px; }
.cc-bgm--narrow .cc-bgm__prog .cc-range, .cc-bgm--narrow .cc-bgm__vol .cc-range { height: 14px; }
.cc-bgm--narrow .cc-bgm__times { margin-top: -2px; }
.cc-bgm--narrow .cc-bgm__b { width: 30px; height: 30px; }
.cc-bgm--narrow .cc-bgm__play { width: 34px; height: 34px; }
.cc-bgm--narrow .cc-bgm__vb { width: 20px; height: 20px; }

/* 최신글: 댓글 아이콘 · 방명록 닉네임 */
.cc-mini-noti li .cc-lt__cm { flex: none; margin-right: 4px; font-size: .85em; opacity: .7; }

/* 접속자 박스: "N명 접속 중" · "회원 N · 방문객 N" 문구는 박스 오른쪽 끝에 맞춘다 */
.cc-conn__tx { margin-left: auto; align-items: flex-end; text-align: right; }
.cc-conn { padding-right: 20px; }
/* 최신글: 댓글 아이콘과 내용 사이 간격을 좁힌다 (줄의 gap 6px 에서 4px 를 뺀다) */
.cc-mini-noti li .cc-lt__cm { margin-right: -4px; }
.cc-mini-noti li .cc-lt__cm { margin-right: -5px; }
.cc-mini-noti li .cc-lt__cm { margin-right: -3px; }

/* 좌·우 바: 평소에는 숨겨 두고, 가장자리 근처(넉넉한 영역)에 마우스를 올리면 나타난다. 알림 선(has-badge)은 있으면 항상 보인다.
   터치 화면은 마우스를 올릴 수 없으니 계속 보인다 */
.cc-homebar.cc-bar-left, .cc-homebar.cc-bar-right { width: 64px; height: 300px; margin-top: -150px; }
@media (hover: hover) {
    .cc-homebar.cc-bar-left::before, .cc-homebar.cc-bar-right::before { opacity: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.22, .8, .3, 1), background-color .25s ease; }
    .cc-homebar.cc-bar-left:hover::before, .cc-homebar.cc-bar-right:hover::before { opacity: 1; }
}

/* 좌·우 바 반응 영역: 너비 90px, 높이는 창 전체. 오른쪽은 본문의 스크롤바를 잡을 수 있게 가장자리 17px 를 비워 두고,
   바와 알림 선은 원래 위치(화면 가장자리)에 그대로 그린다 */
.cc-homebar.cc-bar-left, .cc-homebar.cc-bar-right { top: 0; bottom: 0; height: auto; margin-top: 0; width: 90px; }
.cc-homebar.cc-bar-right { right: 17px; }
.cc-homebar.cc-bar-right::before { right: -10px; }
.cc-homebar.cc-bar-right.has-badge::after { right: -17px; }

/* 창 전체 높이 영역은 되돌리고, 세로 중앙을 기준으로 넉넉하게: 너비 90px · 높이 480px (위아래 240px) */
.cc-homebar.cc-bar-left, .cc-homebar.cc-bar-right { top: 50%; bottom: auto; height: 480px; margin-top: -240px; width: 90px; }
@media (max-height: 560px) { .cc-homebar.cc-bar-left, .cc-homebar.cc-bar-right { height: 80vh; margin-top: -40vh; } }   /* 낮은 창에서는 창 높이를 넘지 않게 */

/* 좌·우 바: 넓은 영역(.cc-homebar)은 클릭이 그대로 지나가게(아래 페이지가 눌리게) 하고,
   바가 나타나는 건 마우스가 그 영역 안에 들어왔을 때(.cc-near), 눌러서 여는 건 바 자리의 작은 영역(.cc-homebar__hit)뿐이다 */
.cc-homebar__hit { display: none; }
.cc-homebar.cc-bar-left, .cc-homebar.cc-bar-right { pointer-events: none; }
.cc-homebar.cc-bar-left .cc-homebar__hit, .cc-homebar.cc-bar-right .cc-homebar__hit {
    display: block; position: absolute; pointer-events: auto; cursor: pointer; top: calc(50% - 72px); height: 144px; width: 24px; background: transparent; border-radius: 12px;
}
.cc-homebar.cc-bar-left .cc-homebar__hit { left: -2px; }
.cc-homebar.cc-bar-right .cc-homebar__hit { left: calc(100% - 5px); }
@media (hover: hover) {
    .cc-homebar.cc-bar-left.cc-near::before, .cc-homebar.cc-bar-right.cc-near::before { opacity: 1; }
}
.cc-homebar.is-open.cc-bar-left .cc-homebar__hit, .cc-homebar.is-open.cc-bar-right .cc-homebar__hit { pointer-events: none; }

/* 알림 "모두 읽음" 체크 아이콘 버튼 */
.cc-readall { margin-left: auto; flex: none; }
.cc-sec .cc-readall { margin-left: 0; }
.cc-readall[hidden] { display: none; }

/* 알림 박스 머리글: "알림" 바로 옆에 빨간 숫자(N)만, 글자는 줄바꿈하지 않는다. 체크 버튼은 오른쪽 끝 */
.cc-notice-card .cc-card__hd > span { white-space: nowrap; }
.cc-notice-card .cc-card__info { margin-left: 2px; color: #ff4444; font-weight: 700; }
.cc-notice-card .cc-card__info:empty { display: none; }

/* 알림 박스 머리글 높이를 고정해, 숫자(N)나 체크 버튼이 생기고 사라져도 아래 목록이 움직이지 않게 한다 */
.cc-notice-card .cc-card__hd { min-height: 24px; margin-bottom: 4px; }
.cc-notice-card .cc-card__hd > span, .cc-notice-card .cc-card__info { line-height: 1.4; font-size: inherit; }
.cc-notice-card .cc-card__info:empty { display: block; width: 0; margin: 0; }