.u-section-1 {
  min-height: 400px;
}

.u-section-1 .u-custom-html-1 {
  height: auto;
  min-height: 400px;
  margin-top: 0;
  margin-bottom: 0;
}/* 신용카드현금화 2026, 카드전표(sales slip) 스킨
   스코프: #pan-root
   원본(navy+mint 정보지)과 구조·클래스·색을 분리
   ※ .bm-ph 계열 PC/모바일 크기 수치는 원본 규칙 그대로 유지
   ※ .bd-dock 구조·동작 유지, 문구·색만 이 파일 팔레트에 맞춤 */
html, body {
    margin: 0;
    padding: 0;
    background: #d5d2cc;
}
#pan-root {
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    all: revert;
    box-sizing: border-box;
    font-family: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 47px,
            rgba(139, 36, 54, 0.045) 47px 48px
        ),
        #f3f0ea;
    color: #1f1c18;
    line-height: 1.82;
    letter-spacing: -0.018em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: left;
    overflow-x: clip;
}
#pan-root *,
#pan-root *::before,
#pan-root *::after { box-sizing: border-box; }
#pan-root img { max-width: 100%; height: auto; display: block; }
#pan-root a { color: #6a1b2a; text-decoration: none; border-bottom: 1px solid rgba(139, 36, 54, 0.35); }
#pan-root a:hover { border-bottom-color: #8b2436; }
#pan-root strong { color: #6a1b2a; font-weight: 700; }
#pan-root em { font-style: normal; font-weight: 600; color: #2f6b4f; }
#pan-root mark {
    background: linear-gradient(transparent 58%, rgba(196, 184, 161, 0.7) 58%);
    color: inherit;
    padding: 0 1px;
}
#pan-root :focus-visible { outline: 2px solid #8b2436; outline-offset: 3px; }
#pan-root .pan-shell {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 22px;
}
#pan-root [id] { scroll-margin-top: 18px; }
/* ---- 마스트: 이미지 위, 제목 아래. 좌우 분할 히어로 없음 ---- */
#pan-root .pan-mast {
    padding: 28px 0 8px;
}
#pan-root .pan-sheet {
    background: #faf8f4;
    border: 1px solid #cfc8bc;
    border-top: 7px solid #8b2436;
    box-shadow: 0 10px 0 rgba(31, 28, 24, 0.04);
    padding: 18px 22px 28px;
}
#pan-root .pan-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8378;
}
#pan-root .pan-meta b {
    color: #8b2436;
    font-weight: 700;
}
#pan-root h1 {
    margin: 18px 0 14px;
    font-size: clamp(1.55rem, 4.2vw, 2.05rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
    color: #1f1c18;
}
#pan-root h1 span { color: #8b2436; }
#pan-root .pan-lead {
    margin: 0 0 22px;
    font-size: 0.98rem;
    line-height: 1.9;
    color: #5c564c;
}
#pan-root .pan-lead strong { color: #1f1c18; }
#pan-root .pan-cta {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 500px;
    max-width: 100%;
    min-height: 160px;
    text-decoration: none;
    border: 0;
    color: #fff;
    background: #6a1b2a;
    overflow: hidden;
}
#pan-root .pan-cta::before {
    content: "";
    width: 18px;
    flex: none;
    background:
        repeating-linear-gradient(
            180deg,
            #c4b8a1 0 8px,
            #8b2436 8px 16px
        );
}
#pan-root .pan-cta:hover { filter: brightness(1.06); }
#pan-root .pan-cta-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 18px 20px;
}
#pan-root .pan-cta-body b {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}
#pan-root .pan-cta-body em {
    font-size: 0.78rem;
    font-weight: 500;
    color: #e8d4c8;
}
#pan-root .pan-cta-go {
    display: grid;
    place-items: center;
    width: 54px;
    background: #8b2436;
    color: #fff;
}
#pan-root .pan-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px dashed #cfc8bc;
}
#pan-root .pan-kpis li {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px dashed #cfc8bc;
}
#pan-root .pan-kpis b {
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-size: 0.92rem;
    font-weight: 600;
    color: #8b2436;
}
#pan-root .pan-kpis span {
    font-size: 0.82rem;
    color: #5c564c;
    line-height: 1.55;
}
/* ---- 본문 블록: 전표 행. 번호 배지·목차형 아님 ---- */
#pan-root .pan-stack {
    padding: 8px 0 40px;
}
#pan-root .pan-block {
    padding: 36px 0 8px;
}
#pan-root .pan-block + .pan-block {
    border-top: 1px solid #cfc8bc;
    margin-top: 12px;
}
#pan-root .pan-block--wash {
    background: #e7e3db;
    border-top: 0;
    margin: 28px -22px 8px;
    padding: 32px 22px 20px;
    border-left: 4px solid #8b2436;
}
#pan-root .pan-block--end {
    background: #1f1c18;
    color: #e8e2d8;
    margin: 36px -22px 0;
    padding: 36px 22px 28px;
    border-top: 0;
}
#pan-root .pan-block--end h2 { color: #faf8f4; }
#pan-root .pan-block--end .pan-copy { color: #cfc6b8; }
#pan-root .pan-block--end strong { color: #f0d9a8; }
#pan-root .pan-kicker {
    margin: 0 0 8px;
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b2436;
}
#pan-root h2 {
    margin: 0 0 16px;
    font-size: clamp(1.18rem, 2.6vw, 1.42rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #1f1c18;
}
#pan-root h3 {
    margin: 22px 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #6a1b2a;
}
#pan-root .pan-copy { margin: 0 0 14px; }
#pan-root .pan-copy p {
    margin: 0 0 12px;
    font-size: 0.96rem;
    color: #1f1c18;
}
#pan-root .pan-copy p:last-child { margin-bottom: 0; }
#pan-root .pan-rail {
    margin: 16px 0 4px;
    padding: 0 0 0 16px;
    list-style: none;
    border-left: 2px solid #8b2436;
}
#pan-root .pan-rail li {
    margin: 0 0 12px;
    padding: 0 0 12px 8px;
    border-bottom: 1px dotted #cfc8bc;
}
#pan-root .pan-rail li:last-child { margin: 0; border: 0; padding-bottom: 0; }
#pan-root .pan-rail b {
    display: block;
    margin-bottom: 3px;
    font-size: 0.88rem;
    color: #6a1b2a;
}
#pan-root .pan-rail span {
    font-size: 0.9rem;
    color: #5c564c;
}
#pan-root .pan-seq {
    margin: 18px 0 8px;
    padding: 0;
    list-style: none;
    counter-reset: panstep;
}
#pan-root .pan-seq li {
    display: grid;
    grid-template-columns: 2.6em max-content minmax(0, 1fr);
    gap: 6px 12px;
    align-items: baseline;
    padding: 8px 0;
    counter-increment: panstep;
}
#pan-root .pan-seq li::before {
    content: counter(panstep, decimal-leading-zero);
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: #8b2436;
}
#pan-root .pan-seq b {
    color: #1f1c18;
    white-space: nowrap;
}
#pan-root .pan-seq span {
    color: #5c564c;
    font-size: 0.92rem;
    min-width: 0;
    overflow-wrap: break-word;
}
#pan-root .pan-slip {
    margin: 18px 0;
    padding: 16px 16px 12px;
    border: 1px dashed #8a8378;
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0 27px,
            rgba(139, 36, 54, 0.06) 27px 28px
        ),
        #faf8f4;
}
#pan-root .pan-slip dl { margin: 0; }
#pan-root .pan-slip .row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 0.9rem;
    border-bottom: 1px dotted #cfc8bc;
}
#pan-root .pan-slip .row:last-of-type {
    border-bottom: 0;
    font-weight: 700;
    color: #6a1b2a;
}
#pan-root .pan-slip dt { color: #5c564c; }
#pan-root .pan-slip dd { margin: 0; font-family: "IBM Plex Mono", "Consolas", monospace; }
#pan-root .pan-slip-note {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: #8a8378;
}
#pan-root .pan-rank {
    margin: 12px 0 8px;
    padding: 0;
    list-style: none;
}
#pan-root .pan-rank li {
    display: grid;
    grid-template-columns: 1.4em 1fr;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #cfc8bc;
    font-size: 0.92rem;
}
#pan-root .pan-rank i {
    font-style: normal;
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-weight: 600;
    color: #8b2436;
}
#pan-root .pan-rank b { display: block; margin-bottom: 2px; }
#pan-root .pan-rank span { color: #5c564c; font-size: 0.88rem; }
#pan-root .pan-ask details {
    border-bottom: 1px solid #cfc8bc;
    padding: 0;
}
#pan-root .pan-ask summary {
    cursor: pointer;
    list-style: none;
    padding: 13px 28px 13px 0;
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
}
#pan-root .pan-ask summary::-webkit-details-marker { display: none; }
#pan-root .pan-ask summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 13px;
    font-family: "IBM Plex Mono", "Consolas", monospace;
    color: #8b2436;
}
#pan-root .pan-ask details[open] summary::after { content: "-"; }
#pan-root .pan-ask details p {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: #5c564c;
    line-height: 1.75;
}
/* ---- 푸터: 링크 목차 없음, 콜로폰만 ---- */
#pan-root .pan-colophon {
    padding: 28px 0 120px;
    font-size: 0.78rem;
    color: #5c564c;
    border-top: 3px double #cfc8bc;
}
#pan-root .pan-colophon p { margin: 0 0 8px; }
#pan-root .pan-colophon .pan-copyr {
    margin-top: 16px;
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-size: 0.7rem;
    color: #8a8378;
    letter-spacing: 0.04em;
}
/* ---- 플로팅 배너 (위치·구조 유지, 색·문구만 변경) ---- */
#pan-root .bd-dock {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 90;
    animation: bd-bob 4.2s ease-in-out infinite;
    pointer-events: none;
}
#pan-root .bd-dock > * { pointer-events: auto; }
#pan-root .bd-dock-glow {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
}
#pan-root .bd-dock-glow::before,
#pan-root .bd-dock-glow::after {
    content: "";
    position: absolute;
    border-radius: 8px;
    background: linear-gradient(115deg, #8b2436 0%, #c4b8a1 55%, #2f6b4f 100%);
    will-change: opacity, transform;
}
#pan-root .bd-dock-glow::before {
    inset: -3px;
    filter: blur(9px);
    opacity: 0.9;
    animation: bd-glow-rim 3.4s ease-in-out infinite;
}
#pan-root .bd-dock-glow::after {
    inset: -13px;
    filter: blur(26px);
    opacity: 0.5;
    animation: bd-glow-halo 3.4s ease-in-out infinite;
}
#pan-root .bd-dock-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 310px;
    padding: 15px 18px 15px 16px;
    background: #1f1c18;
    border: 1px solid rgba(196, 184, 161, 0.55);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
#pan-root .bd-dock-btn:hover {
    text-decoration: none;
    transform: scale(1.03);
    border-color: rgba(240, 217, 168, 0.9);
}
#pan-root .bd-dock-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c4b8a1;
    box-shadow: 0 0 0 0 rgba(196, 184, 161, 0.7);
    animation: bd-dock-ping 2.1s ease-out infinite;
}
#pan-root .bd-dock-txt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
    white-space: nowrap;
}
#pan-root .bd-dock-txt b {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
#pan-root .bd-dock-txt em {
    font-style: normal;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #e8d4c8;
}
#pan-root .bd-dock-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    color: #1f1c18;
    background: linear-gradient(135deg, #e8d4c8, #c4b8a1);
    animation: bd-dock-slide 1.9s ease-in-out infinite;
}
@keyframes bd-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}
@keyframes bd-glow-rim {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
@keyframes bd-glow-halo {
    0%, 100% { opacity: 0.3; transform: scale(0.985); }
    50%      { opacity: 0.62; transform: scale(1.02); }
}
@keyframes bd-dock-ping {
    0%   { box-shadow: 0 0 0 0 rgba(196, 184, 161, 0.65); }
    70%  { box-shadow: 0 0 0 11px rgba(196, 184, 161, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 184, 161, 0); }
}
@keyframes bd-dock-slide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
/* ==========================================================================
   이미지 자리(플레이스홀더)
   ※ max-width / aspect-ratio / min-height / 여백 수치는 원본 그대로.
   ========================================================================== */
#pan-root .bm-ph {
    width: 100%;
    max-width: 930px;
    margin: 6px auto 42px;
    padding: 0;
}
#pan-root .pan-copy + .bm-ph { margin-top: 40px; }
#pan-root .bm-ph-hero { margin: 0 0 8px; }
#pan-root .bm-ph--wide { max-width: 930px; }
#pan-root .bm-ph--md   { max-width: 640px; }
#pan-root .bm-ph--sq   { max-width: 560px; }
#pan-root .bm-ph--left  { margin-left: 0; margin-right: auto; }
#pan-root .bm-ph--right { margin-left: auto; margin-right: 0; }
#pan-root .bm-ph-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    aspect-ratio: 930 / 620;
    padding: 28px 26px;
    background-color: #2a1218;
    background-image: repeating-linear-gradient(135deg,
        rgba(196, 184, 161, 0.09) 0 12px,
        rgba(255, 255, 255, 0) 12px 26px);
    border: 2px dashed #c4b8a1;
    border-radius: 8px;
}
#pan-root .bm-ph--wide .bm-ph-box { aspect-ratio: 930 / 360; }
#pan-root .bm-ph--md   .bm-ph-box { aspect-ratio: 640 / 420; }
#pan-root .bm-ph--sq   .bm-ph-box { aspect-ratio: 1 / 1; }
#pan-root .bm-ph-mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #e8d4c8;
    background: rgba(139, 36, 54, 0.35);
    border: 1px solid rgba(196, 184, 161, 0.45);
    border-radius: 8px;
}
#pan-root .bm-ph-file {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: #f3f0ea;
}
#pan-root .bm-ph-file em {
    display: inline-block;
    margin-left: 9px;
    padding: 2px 9px;
    font-style: normal;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.7;
    color: #1f1c18;
    background: #c4b8a1;
    border-radius: 999px;
    vertical-align: 1px;
}
#pan-root .bm-ph-spec {
    display: grid;
    gap: 9px;
    max-width: 74ch;
    margin: 0;
    padding: 0;
}
#pan-root .bm-ph-spec > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
}
#pan-root .bm-ph-spec dt {
    margin: 0;
    padding-top: 0.2em;
    font-size: 0.75rem;
    font-weight: 800;
    color: #e8d4c8;
}
#pan-root .bm-ph-spec dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #d5cfc4;
}
#pan-root .bm-ph-spec .bm-ph-copy {
    font-weight: 700;
    color: #f3f0ea;
}
#pan-root .prompt-inner {
    display: grid;
    gap: 8px;
    max-width: 74ch;
}
#pan-root .prompt-inner p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #d5cfc4;
}
#pan-root .prompt-inner strong {
    display: inline;
    color: #e8d4c8;
    font-weight: 800;
}
#pan-root .bm-ph figcaption {
    margin-top: 11px;
    font-size: 0.78rem;
    color: #8a8378;
    text-align: center;
}
#pan-root .bm-ph > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}
@media (max-width: 640px) {
    #pan-root .pan-shell { padding-inline: 16px; }
    #pan-root .pan-sheet { padding: 14px 14px 22px; }
    #pan-root .pan-kpis li { grid-template-columns: 1fr; gap: 4px; }
    #pan-root .pan-cta {
        width: 380px;
        height: 100px;
        min-height: 100px;
    }
    #pan-root .pan-cta-body { padding: 10px 12px; }
    #pan-root .pan-cta-body b { font-size: 1.02rem; }
    #pan-root .pan-cta-body em { font-size: 0.68rem; }
    #pan-root .pan-block--wash,
    #pan-root .pan-block--end { margin-left: -16px; margin-right: -16px; }
    #pan-root .pan-colophon { padding-bottom: 130px; }
    #pan-root .pan-seq li {
        grid-template-columns: 2.6em minmax(0, 1fr);
    }
    #pan-root .pan-seq b,
    #pan-root .pan-seq span { grid-column: 2; }
    #pan-root .bm-ph { margin-bottom: 34px; }
    #pan-root .pan-copy + .bm-ph { margin-top: 32px; }
    #pan-root .bm-ph > img { border-radius: 14px; }
    #pan-root .bm-ph-box,
    #pan-root .bm-ph--wide .bm-ph-box,
    #pan-root .bm-ph--md .bm-ph-box,
    #pan-root .bm-ph--sq .bm-ph-box {
        aspect-ratio: auto;
        min-height: 400px;
        max-width: 400px;
        padding: 20px 16px;
        gap: 12px;
        border-radius: 14px;
    }
    #pan-root .bm-ph-mark { width: 38px; height: 38px; }
    #pan-root .bm-ph-file { font-size: 0.85rem; }
    #pan-root .bm-ph-spec dd { font-size: 0.86rem; }
    #pan-root .bd-dock {
        right: 14px;
        left: auto;
        bottom: 14px;
    }
    #pan-root .bd-dock-btn {
        min-width: 0;
        width: auto;
        padding: 11px 13px 11px 16px;
        gap: 9px;
    }
    #pan-root .bd-dock-txt b { font-size: 0.87rem; }
    #pan-root .bd-dock-txt em { font-size: 0.66rem; }
    #pan-root .bd-dock-ico { width: 28px; height: 28px; }
    #pan-root .bd-dock-glow::before { inset: -2px; filter: blur(7px); }
    #pan-root .bd-dock-glow::after { inset: -10px; filter: blur(20px); }
}
@media (prefers-reduced-motion: reduce) {
    #pan-root * {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
    }
}
@media print {
    #pan-root { background: #fff; color: #000; }
    #pan-root .pan-cta,
    #pan-root .bd-dock { display: none; }
}