/* 오른쪽 이미지 패널의 '이미지 모음 모양'. 템플릿 2개는 견본 버튼, 페이지 표시·이전/다음은 선택 + 작은 견본. */
.fcc { display: grid; gap: 8px; min-width: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f5; }
.fcc[hidden] { display: none !important; }
.fcc-title { margin: 0; color: #4b5770; font-size: 12px; font-weight: 750; }
.fcc-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fcc-template { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding: 8px 6px 7px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; color: #53627a; font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.fcc-template:hover:not(:disabled) { border-color: #9bbcff; color: var(--brand); background: #f7faff; }
.fcc-template[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.fcc-template:disabled { cursor: not-allowed; opacity: .5; }
.fcc-template strong { font-size: 12.5px; font-weight: 750; line-height: 1.3; }
.fcc-template small { color: #7a869a; font-size: 11px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.fcc-template[aria-pressed="true"] small { color: color-mix(in srgb, var(--brand), #4a5568 45%); }
.fcc-template-preview { display: block; width: 64px; height: 40px; }
.fcc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-width: 0; }
.fcc-label { margin: 0; color: #4b5770; font-size: 12px; font-weight: 700; line-height: 1.35; }
.fcc-select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 28px 8px 10px; border: 1px solid #d9e1ed; border-radius: 8px; background-color: #fff; color: #27364f; font: inherit; font-size: 13px; }
.fcc-select:disabled { cursor: not-allowed; color: #9aa5b8; background-color: #f3f5f9; }
.fcc-swatch { display: grid; place-items: center; width: 44px; height: 40px; border: 1px solid #e6ebf3; border-radius: 8px; background: #f8faff; }
.fcc-swatch-svg { display: block; width: 40px; height: 22px; }
.fcc :is(.fcc-template, .fcc-select):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 견본 그림 */
.fcc svg .c-img { fill: #c9d6ea; }
.fcc-template[aria-pressed="true"] svg .c-img { fill: color-mix(in srgb, var(--brand), #fff 72%); }
.fcc svg .c-btn-dark { fill: rgba(10,14,26,.42); }
.fcc svg .c-pill { fill: rgba(10,14,26,.4); }
.fcc svg .c-btn-light, .fcc svg .c-btn-line { fill: #fff; stroke: #9aa8bf; stroke-width: 1; }
.fcc svg .c-chev-light, .fcc svg .c-chev-dark { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fcc svg .c-chev-light { stroke: #fff; }
.fcc svg .c-chev-dark { stroke: #4a5670; }
.fcc svg .c-chev-dark.is-bold { stroke-width: 2; }
.fcc svg .c-dot-light { fill: #fff; }
.fcc svg .c-dot-light.is-dim { fill-opacity: .55; }
.fcc svg .c-dot-dark { fill: var(--brand); }
.fcc svg .c-dot-dark.is-dim { fill: #b9c3d3; }
.fcc svg .c-text { fill: #4a5670; font: 700 7px/1 Pretendard, sans-serif; letter-spacing: .02em; }
.fcc svg .c-text.is-large { font-size: 9px; }
.fcc svg .c-none { fill: none; stroke: #b9c3d3; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 3; }
@media (max-width: 360px) {
  .fcc-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .fcc-label { grid-column: 1 / -1; }
}
@media (max-width: 640px), (pointer: coarse) {
  .fcc-select { min-height: 44px; font-size: 16px; }
  .fcc-swatch { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .fcc-template { transition: none; }
}