/* 크레딧 레일 — 왼쪽 모으기 · 오른쪽 잔액. PC에서만 나온다.
   여백이 좁은 화면에서는 아예 내보내지 않는다. 끼워 넣으면 타일과 목록이 가운데를 뺏겨 같이 좁아진다.
   토큰은 ui-foundation.css의 --ui-*. */

.credit-aside{display:none}
.credit-panel{border-radius:var(--ui-radius-m)}
.credit-panel-wallet{background:var(--ui-accent-soft);padding:20px}
.credit-panel-wallet.is-compact{padding:18px}
.credit-panel-earn{background:#fff;border:1px solid var(--ui-line);padding:18px}
.credit-label{font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1.6;color:#456c7f}
.credit-fine{font-size:12px;line-height:1.7;color:var(--ui-ink-3);margin-top:8px}
.credit-panel-wallet .credit-fine{color:var(--ui-ink-2)}
.credit-badge{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(36,52,64,.16)}
.credit-badge>span:first-child{font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--ui-accent);padding:3px 9px;border-radius:5px}
.credit-badge>span+span{font-size:12px;line-height:1.6;color:var(--ui-ink-2)}
.credit-total{display:flex;align-items:baseline;gap:7px;margin-top:9px}
.credit-amount{font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ui-ink);font-variant-numeric:tabular-nums}
.credit-total .credit-amount{font-size:30px}
.credit-panel-wallet.is-compact .credit-total .credit-amount{font-size:25px}
.credit-unit{font-size:13px;color:var(--ui-ink-2)}

/* 가용과 묶임을 한 막대에서 두 색으로 나눈다. 발주가 걸려 있으면 잔액 전부를 쓸 수 있는 것이 아니다. */
.credit-bar{display:block;width:100%;height:6px;margin:15px 0 9px;border-radius:6px;overflow:hidden;background:rgba(36,52,64,.10)}
.credit-bar-free{fill:var(--ui-accent)}
.credit-bar-held{fill:#8aa0ad}
.credit-split{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.7;color:var(--ui-ink-2)}
.credit-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.credit-dot-free{background:var(--ui-accent)}
.credit-dot-held{background:#8aa0ad}
.credit-split-source{margin-top:12px;padding-top:10px;border-top:1px solid rgba(36,52,64,.10)}
.credit-split-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-size:12px;line-height:1.7;color:var(--ui-ink-2)}
.credit-split-row i{font-style:normal;color:var(--ui-ink-3)}
.credit-split-row>span+span{font-weight:600;color:var(--ui-ink);white-space:nowrap;font-variant-numeric:tabular-nums}

.credit-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--ui-line)}
.credit-panel-wallet .credit-section{border-top-color:rgba(36,52,64,.16)}
.credit-section-first{margin-top:12px}
.credit-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid rgba(36,52,64,.10)}
.credit-row:first-of-type{border-top:0}
.credit-row-what{min-width:0}
.credit-row-what>span{display:block;font-size:13px;line-height:1.5;color:var(--ui-ink)}
.credit-row-note{font-size:12px;line-height:1.6;color:var(--ui-ink-2)}
.credit-row-value{text-align:right;white-space:nowrap}
.credit-row-value .credit-amount{display:block;font-size:14px}
.credit-row-value .credit-row-note{display:block}
.credit-action{width:100%;justify-content:center;margin-top:14px}
.credit-more{margin-top:10px}
.credit-panel .credit-more{font-size:12px;min-height:32px}
.credit-week{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0}
/* 일곱 칸은 레일 폭을 따라간다. 커뮤니티 쪽 레일이 좁아도 한 줄에 들어가야 한다. */
.credit-day{flex:1 1 18px;min-width:18px;max-width:30px;aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;font-size:12px;line-height:1;box-sizing:border-box;background:var(--ui-surface-2);color:var(--ui-ink-3)}
.credit-day.is-done{background:var(--ui-accent);color:#fff;font-weight:600}
.credit-day.is-today{background:#fff;border:1px dashed var(--ui-accent);color:var(--ui-ink);font-weight:600}

/* 손잡이는 창 가장자리에 붙는다. 평평한 쪽이 창에 닿고 둥근 쪽이 본문을 향해야 서랍 손잡이로 읽힌다.
   붙을 데 없이 평평하면 잘린 모양이 된다. 그래서 흐름에서 빼 fixed로 창에 대고, 패널은 그 옆에서 열린다. */
@media(min-width:1360px){
 /* #main의 진입 애니메이션(ui-fade)은 transform을 건드린다. fill-mode가 both라 끝난 뒤에도 남아,
    그 칸이 고정 요소의 기준 상자가 된다. 그러면 창이 아니라 본문에 붙어 화면 밖으로 밀려난다.
    레일이 서는 두 화면에서만 진입 애니메이션을 끈다. */
 #main>.market-page,#main>.shell:has(>.board-columns){animation:none}
 /* 세로 가운데가 아니라 제목 줄에 맞춘다. 페이지를 열었을 때 눈이 먼저 가는 곳이 거기다.
    더하는 값은 운영 화면에서 잰 제목 위치다. 카탈로그는 머리 아래 48(.market-page의 위 여백이 0이고 제목의
    바깥 여백 48만 남는다), 커뮤니티는 35(.is-community .shell의 위 여백 24 + 글머리 여백). 머리 높이는
    두 화면이 다르므로(72 / 64) 대체값도 따로 적는다. dev-review 배너가 있는 화면에서 재면 그만큼 어긋난다. */
 .credit-aside{display:block;position:fixed;top:calc(var(--header-offset,72px) + 48px);z-index:12;margin:0}
 .board-columns>.credit-aside{top:calc(var(--header-offset,64px) + 35px)}
 .credit-aside-left{left:0}
 .credit-aside-right{right:0}
 .credit-wing-handle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:42px;min-height:104px;padding:16px 0;border:1px solid var(--ui-line-strong);background:#fff;color:var(--ui-ink-2);font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
 .credit-wing-handle>span{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.1em}
 .credit-wing-handle>svg{width:14px;height:14px;flex-shrink:0;color:var(--ui-ink-3);transition:transform .15s}
 .credit-wing-handle:hover{border-color:var(--ui-accent);color:var(--ui-ink)}
 .credit-aside-left .credit-wing-handle{border-left-color:transparent;border-radius:0 var(--ui-radius-m) var(--ui-radius-m) 0;box-shadow:2px 2px 10px rgba(20,32,42,.06)}
 .credit-aside-right .credit-wing-handle{border-right-color:transparent;border-radius:var(--ui-radius-m) 0 0 var(--ui-radius-m);box-shadow:-2px 2px 10px rgba(20,32,42,.06)}
 .credit-aside-right .credit-wing-handle>svg{transform:scaleX(-1)}
 .credit-aside[data-open] .credit-wing-handle{border-color:var(--ui-accent);color:var(--ui-ink)}
 .credit-aside-left[data-open] .credit-wing-handle>svg{transform:scaleX(-1)}
 .credit-aside-right[data-open] .credit-wing-handle>svg{transform:none}
 /* 펼친 패널이 창보다 길어지면 그 안에서 굴린다. 창 밖으로 흘러나가면 아래쪽을 볼 길이 없다. */
 .credit-wing-panel{display:none;position:absolute;top:0;width:220px;max-height:calc(100vh - var(--header-offset,72px) - 120px);overflow:auto;border-radius:var(--ui-radius-m);box-shadow:var(--ui-shadow-2)}
 .credit-aside-left .credit-wing-panel{left:calc(100% + 12px)}
 .credit-aside-right .credit-wing-panel{right:calc(100% + 12px)}
 .credit-aside[data-open] .credit-wing-panel{display:block}
}
/* 창이 넓으면 접어 둘 이유도, 창 끝에 붙일 이유도 없다. 여백이 패널을 통째로 받아내므로
   흐름으로 되돌려 본문 옆에 나란히 세운다. 창 가장자리에 바짝 붙으면 화면 끝과 너무 가깝다. */
@media(min-width:1700px){
 .market-columns,.board-columns{display:flex;gap:16px;align-items:flex-start}
 .market-columns>.market-main,.board-columns>.board-main{flex:1 1 auto;min-width:0}
 .credit-aside{position:sticky;top:calc(var(--header-offset,72px) + 20px);flex:0 0 auto;width:220px}
 .board-columns>.credit-aside{top:calc(var(--header-offset,64px) + 20px)}
 .credit-aside-left{left:auto;margin-left:-236px}
 .credit-aside-right{right:auto;margin-right:-236px}
 /* 카탈로그 제목은 위로 48px 띄워 시작한다. 날개도 같은 만큼 내려야 제목 줄에서 함께 시작한다. */
 .market-columns>.credit-aside{margin-top:48px}
 .credit-wing-handle{display:none}
 .credit-wing-panel{display:block;position:static;width:auto;max-height:none;overflow:visible;box-shadow:none;border-radius:var(--ui-radius-m)}
}
@media(prefers-reduced-motion:reduce){.credit-wing-handle,.credit-wing-handle>svg{transition:none}}
@media(forced-colors:active){
 .credit-panel-wallet,.credit-panel-earn{border:1px solid CanvasText}
 .credit-day.is-done{background:Highlight}
 .credit-bar-free{fill:Highlight}
}