/* Global Styles */

/* Shared checkerboard transparency pattern */
.checkerboard {
    background-color: #484848;
    background-image:
        linear-gradient(45deg, #606060 25%, transparent 25%),
        linear-gradient(-45deg, #606060 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #606060 75%),
        linear-gradient(-45deg, transparent 75%, #606060 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.checkerboard-dark {
    background-color: #111;
    background-image:
        linear-gradient(45deg, #1e1e1e 25%, transparent 25%),
        linear-gradient(-45deg, #1e1e1e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1e1e1e 75%),
        linear-gradient(-45deg, transparent 75%, #1e1e1e 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* ===== Maintenance Banner ===== */
.maintenance-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* 99999 — restore banner(#restore-banner inline z-index:99998) 위로 깔리도록.
       재시작 공지가 더 시간 민감 → 둘 다 top:0일 때 공지가 보여야 함. */
    z-index: 99999;
    background: #b45309;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    letter-spacing: 0.01em;
}

/* ===== CBT Launch Banner (2026-06-04 ~ 2026-08-04 KST) =====
   body.cbt-active일 때만 표시. 기간 종료 시 자동 hide(JS 게이트).
   z-index 우선순위: maintenance(99999) > restore(99998 inline, app.js) > cbt(99996) > region(99995). */
.cbt-banner { display: none; }
body.cbt-active .cbt-banner {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99996;
    background: linear-gradient(90deg, #6d28d9 0%, #db2777 100%);
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 0.01em;
}
.cbt-banner-head { font-weight: 700; }
.cbt-banner-sub { opacity: 0.92; margin-left: 8px; }
.cbt-banner-coupon { display: block; margin-top: 3px; font-weight: 600; font-size: 12px; opacity: 0.97; }
.cbt-banner-coupon b { color: #ffe14d; font-weight: 800; background: rgba(0,0,0,0.20); padding: 1px 8px; border-radius: 6px; letter-spacing: 0.04em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Region warning banner (timezone != KR/JP/TW) */
.region-warn-banner { display: none; }
body.region-suboptimal .region-warn-banner {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99995;
    background: #b45309;     /* amber-700 — 정보성 톤, CBT 핑크와 구분 */
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 0.01em;
}

/* restore banner 표시 동안 CBT/region 배너 hide + 헤더 margin 해제.
   restore banner는 inline z-index 99998 + fixed top:0 → 단독 점유. */
body.restore-visible .cbt-banner,
body.restore-visible .region-warn-banner { display: none !important; }
body.restore-visible.cbt-active .app-header,
body.restore-visible.region-suboptimal .app-header,
body.restore-visible.cbt-active.region-suboptimal .app-header { margin-top: 0 !important; }
.region-warn-head { font-weight: 700; }
.region-warn-sub { opacity: 0.92; margin-left: 8px; }

/* 헤더 margin 보정 — 배너 stacking 케이스별 */
body.cbt-active .app-header                       { margin-top: 52px; }
body.region-suboptimal .app-header                { margin-top: 32px; }
body.cbt-active.region-suboptimal .app-header     { margin-top: 84px; }
body.cbt-active.region-suboptimal .region-warn-banner { top: 52px; }  /* CBT 아래로 적층 */
@media (max-width: 720px) {
    body.cbt-active .app-header           { margin-top: 72px; }
    body.region-suboptimal .app-header    { margin-top: 48px; }
    body.cbt-active.region-suboptimal .app-header { margin-top: 120px; }
    body.cbt-active.region-suboptimal .region-warn-banner { top: 72px; }
    body.cbt-active .cbt-banner-sub      { display: block; margin-left: 0; margin-top: 2px; }
    body.region-suboptimal .region-warn-sub { display: block; margin-left: 0; margin-top: 2px; }
}


/* ===== Upload Privacy Popup ===== */
.upload-privacy-popup {
    max-width: 440px; width: 90vw;
}

/* ===== Inpaint Disclose Popup ===== */
.inpaint-disclose-popup {
    max-width: 420px; width: 90vw;
}

/* CBT 쿠폰 시선 유도 — 설정(톱니바퀴) 버튼 깜박임.
   미수령자에게만 JS가 .cbt-attn 부착(isCbtActive 동안), 수령/종료 시 해제. */
@keyframes cbtAttnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(236, 72, 153, 0); }
}
#settingsBtn.cbt-attn {
    animation: cbtAttnPulse 1.5s ease-out infinite;
    color: #ec4899;
}
@media (prefers-reduced-motion: reduce) {
    #settingsBtn.cbt-attn { animation: none; box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.6); }
}

/* 레이어 배경 토글 버튼 시선 유도 — 처음 한 번 누르기 전까지 깜박임.
   JS가 표시 시 .attn-pulse 부착, 최초 클릭 시 localStorage에 기록하고 영구 해제. */
@keyframes attnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.85), 0 0 9px 2px rgba(239,68,68,0.5); }
    50%  { box-shadow: 0 0 0 11px rgba(239,68,68,0), 0 0 14px 4px rgba(239,68,68,0.75); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 0 9px 2px rgba(239,68,68,0.5); }
}
/* 처음 눌러보기 전 강조: 빨간 링(테두리+글로우)만 펄스, 아이콘은 원래 색·크기 고정 (배경 안 채움).
   transform:scale은 버튼 전체(아이콘 포함)를 확대해 아이콘이 흔들리므로 사용 안 함 — 글로우만 펄스. */
#layerBgToggleBtn.attn-pulse {
    animation: attnPulse 1.05s ease-in-out infinite;
    background: transparent;
    border-color: #ef4444;
    border-width: 1.5px;
    position: relative;
    z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
    #layerBgToggleBtn.attn-pulse {
        animation: none; background: transparent; border-color: #ef4444; border-width: 1.5px;
        box-shadow: 0 0 0 3px rgba(239,68,68,0.5), 0 0 12px 4px rgba(239,68,68,0.6);
    }
}

/* 가격 카드 — strikethrough 정가 + 할인가 + 30% OFF 뱃지 (CBT 활성 시) */
.price-original { display: inline; }
.price-discounted, .cbt-badge { display: none; }
body.cbt-active .price-original { text-decoration: line-through; opacity: 0.55; font-size: 0.75em; margin-right: 6px; }
body.cbt-active .price-discounted { display: inline; color: #ec4899; font-weight: 700; }
body.cbt-active .cbt-badge {
    display: inline-block;
    background: #ec4899; color: #fff;
    font-size: 0.65em; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    margin-left: 6px; vertical-align: middle;
    letter-spacing: 0.04em;
}
body.cbt-active .pricing-plan-fineprint {
    display: block;
    text-align: center; color: #888; font-size: 0.78em;
    margin: 6px 0 12px;
}
.pricing-plan-fineprint { display: none; }

/* SODAART 제휴 요금제 (body.sodaart-active). Basic 40% / Pro 50% off + 8K/PSD 안내.
   migration 020 · ls_config.sodaart_active(2026-12-31). CBT(핑크)와 구분되게 그린. */
.price-sodaart, .sodaart-badge, .sodaart-note { display: none; }
body.sodaart-active .sodaart-note {
    display: block; text-align: center; font-weight: 600;
    color: #2ea043; background: rgba(46,160,67,0.08);
    border: 1px solid rgba(46,160,67,0.28); border-radius: 8px;
    padding: 8px 14px; font-size: 0.9em; margin: 0 0 16px;
}
/* Basic·Pro 카드만 제휴 할인가로 교체 — 팩·Studio는 정가(또는 CBT가) 그대로 노출. */
body.sodaart-active .pricing-plan-card[data-tier="basic"] .price-original,
body.sodaart-active .pricing-plan-card[data-tier="pro"] .price-original {
    text-decoration: line-through; opacity: 0.55; font-size: 0.75em; margin-right: 6px;
}
body.sodaart-active .pricing-plan-card[data-tier="basic"] .price-discounted,
body.sodaart-active .pricing-plan-card[data-tier="pro"] .price-discounted,
body.sodaart-active .pricing-plan-card[data-tier="basic"] .cbt-badge,
body.sodaart-active .pricing-plan-card[data-tier="pro"] .cbt-badge { display: none; }
body.sodaart-active .pricing-plan-card[data-tier="basic"] .price-sodaart,
body.sodaart-active .pricing-plan-card[data-tier="pro"] .price-sodaart {
    display: inline; color: #2ea043; font-weight: 700;
}
body.sodaart-active .pricing-plan-card[data-tier="basic"] .sodaart-badge,
body.sodaart-active .pricing-plan-card[data-tier="pro"] .sodaart-badge {
    display: inline-block; background: #2ea043; color: #fff;
    font-size: 0.65em; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}

body {
    /* Override primary color for app UI: blue instead of teal */
    --color-primary: #347fd4e6;
    --color-primary-hover: #2563eb;
    --right-panel-min-width: 200;
    font-family: var(--font-sans);
    background-color: var(--color-bg-app);
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

/* ===== Header ===== */
/* 메인 스레드가 동기 작업으로 멈춘 동안 로딩 커서 강제(레이어 선택/마스크 빌드 등).
   자식 요소의 cursor(pointer 등)까지 덮어쓰기 위해 universal + !important. JS가 토글. */
body.cursor-busy,
body.cursor-busy * { cursor: progress !important; }

.app-header {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0px 10px 20px;
    position: relative;
    gap: 40px;
    flex-wrap: nowrap;          /* 헤더 구성 요소가 다음 줄로 내려가지 않도록 */
}

.header-logo {
    display: flex;
    align-items: center;
}

.header-logo img {
    width: 120px;
}

.header-right {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

/* Plan info: pill container with tier label + upgrade button */
.header-plan-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 0 0 0 14px;
    overflow: hidden;
    cursor: default;
    margin: 2.5px 0;
}

#tierBadge {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.header-plan-info:hover{border-color:var(--color-primary);}
.header-plan-info:hover #tierBadge{color:var(--color-primary) !important;}

#hoverGauge {
    width: 100px;
    height: 10px;
    background: #1a1a1ae6;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
}

#hoverGaugeFill {
    height: 100%;
    width: 0%;
    background: var(--color-primary);
    border-radius: 5px 0 0 5px;
    transition: width 0.1s linear;
    position: relative;
}

#hoverGaugeFill::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 15px;
    background: #fff;
    border-radius: 2px;
}

#creditsDisplay {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 0 14px;
    margin: 2.5px 0;
}
#creditsDisplay:hover { color: var(--color-primary); border-color: var(--color-primary); }

.gauge-cost {
    color: rgba(255,255,255,0.45);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* Header nav links */
.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: auto;
    flex-wrap: nowrap;
}

.header-nav-link {
    font-size: 16px;
    font-weight: 300;
    color: #ffffffe9;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
    padding: 5px;
}

.header-nav-link:hover {
    color: #fff;
}

/* Header language selector */

.header-btn {
    background-color: transparent;
    color: #ccc;
    padding: 0 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;        /* 버튼 라벨("내 작업 (2)", "업그레이드" 등)이 두 줄로 깨지지 않도록 */
}

.header-btn:hover {
    background-color: #222;
    border-color: #555;
    color: #fff;
}

/* 헤더 내 텍스트 배지/라벨도 한 줄 유지 ("🔓 4K + PSD" 등) */
.header-4k-badge { white-space: nowrap; }

/* ★ Save status indicator + 명시적 저장 버튼 (2026-05-29). 자동저장 동작을 사용자에게 가시화. */
.header-save {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 12px;
}
.save-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9ca3af;
    user-select: none;
    white-space: nowrap;
}
.save-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981; /* green = saved */
    transition: background-color 0.2s;
}
.save-status.saving .save-status-dot {
    background: #3b82f6; /* blue = saving */
    animation: save-pulse 1s ease-in-out infinite;
}
.save-status.unsaved .save-status-dot { background: #f59e0b; /* amber = pending */ }
.save-status.error   .save-status-dot { background: #ef4444; /* red = failed */ }
@keyframes save-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}
.save-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    font-size: 14px !important;
    background-color: rgba(255,255,255,0.08) !important;
    color: #ddd !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.save-btn:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
/* ★ EN 전용 헤더 압축 — 영어가 가장 폭이 넓어지는 케이스, KO/JA/ZH는 짧아 영향 없음 */
[lang="en"] .app-header { gap: 30px; }
[lang="en"] .header-nav { gap: 24px; }
[lang="en"] .header-right { gap: 8px; }
[lang="en"] .header-nav-link { font-size: 15px; }
[lang="en"] .header-save { margin-right: 6px; }
[lang="en"] .save-status { font-size: 12px; }

.upgrade-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    font-weight: 500;
    font-size: 16px;
    padding: 0 16px;
    border-radius: 20px 0 0 20px;
    align-self: stretch;
    white-space: nowrap;
}

.upgrade-btn:hover {
    background-color: var(--color-primary-hover);
    color: #fff;
}

.settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background: transparent;
    color: #666;
    border: none;
    margin-right: 20px;
    transition: background-color 0.15s, color 0.15s;
}

.settings-btn img{
    opacity:0.65
}

.settings-btn:hover {
    color: #ccc;
    background: #222;
}

.settings-btn:hover img{
    opacity:1
}

/* ===== Settings Popup ===== */
.settings-popup {
    border-radius: 12px;
    min-width: 800px;
    max-width: 1440px;
    min-height: 530px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1ae6;
    backdrop-filter: blur(5px);
    border: unset;
}

.settings-popup-content {
    display: flex;
    flex: 1;
    padding: 30px;
    overflow: visible;
}

/* Settings Left Menu */
.settings-menu {
    min-width: 170px;
    border-right: 1px solid #2e2e2e;
    padding: 0 30px 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.settings-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.15s, color 0.15s;
    border-radius: 20px;
    font-weight: 400;
    line-height: 40px;
}

.settings-menu-item img{
    width: 22px;
    height: 22px;
}

.settings-menu-item:hover {
    background-color: #2b2b2be6;
    color: #e0e0e0;
}

.settings-menu-item.active {
    background-color: #347fd4e6;
    color: #fff;
}

.settings-menu-item.logout-item:hover {
    color: #fff;
    background-color: #ef575ee6;
}

.settings-menu-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.settings-menu-divider {
    height: 1px;
    background-color: #222;
    margin: 4px 12px;
    display: none;
}

.settings-menu-bottom {margin-top: 20px;border-top: 1px solid #2e2e2e;padding-top: 25px;}

/* Settings Right Panel */
.settings-panel {
    flex: 1;
    padding: 8px 0 0 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.settings-tab-content h4 {
    font-size: 20px;
    font-weight: 400;
    color: #e0e0e0;
    margin: 0 0 12px 0;
}

.settings-tab-content h4:not(:first-child) {
    margin-top: 19px;
}

.settings-tab-content .settings-row:not(:nth-child(2)){
    border-bottom: unset;
    padding-bottom: 12px;
}

#settingsTabSubscription .settings-row{
    border-bottom: unset;
    padding-bottom: 12px; 
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 25px;
    border-bottom: 1px solid #2e2e2e;
}

.settings-label {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 300;
}

.settings-value {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 300;
}

#settingsTier{
    font-weight: 700;
}

.settings-description {
    color: #347fd4;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
    margin: 0 0 20px 0;
    margin-bottom: 25px;
    padding-bottom: 19px;
    border-bottom: 1px solid #2e2e2e;
}

.settings-tab-actions {
    margin-top: 13px;
    padding-top: 25px;
    border-top: 1px solid #2e2e2e;
    display: flex;
    flex-direction: row-reverse;
}

.settings-tab-actions .settings-upgrade-btn {
    text-align: center;
    text-decoration: none;
    display: block;
    font-weight: 500;
    background-color: #347fd4;
    font-size: 14px;
    color: #ddd;
    border-radius: 20px;
}

/* Redeem */
.redeem-form {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-content: center;
}

.redeem-input {
    flex: 1;
    background-color: #2b2b2b;
    border-radius: 20px;
    padding: 0 20px;
    color: #e0e0e0;
    font-size: 16px;
    outline: none;
    border: unset;
    line-height: 40px;
    font-weight: 300;
}

.redeem-input:focus {
    border-color: var(--color-primary);
}

.redeem-input::placeholder {
    color: #666;
}

.redeem-btn.btn {
    font-weight: 500;
    background-color: #347fd4;
    font-size: 14px;
    color: #ddd;
    border-radius: 20px;
}

.redeem-btn.btn:hover {
    color:#fff;
    background-color: #347fd4;
}

.redeem-result {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.redeem-result.success {
    background-color: rgba(8, 192, 178, 0.15);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.redeem-result.error {
    background-color: rgba(217, 83, 79, 0.15);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

/* Help — NDA 섹션처럼 설명+버튼이 세로로 쌓이는 레이아웃 */
.help-section-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2e2e2e;
}
.help-section-stack .help-section-subtitle {
    margin: 0;
    line-height: 1.4;
}
.help-stack-desc {
    font-size: 13px;
    color: #fff;
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
}
.help-section-stack .help-action-btn {
    align-self: flex-end;
}

/* Help */
.help-section {
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    line-height: 40px;
    position:relative;
}

.help-section:nth-child(2) {
    margin-bottom: 14px;
    border-bottom: 1px solid #2e2e2e;
    padding-bottom: 14px;
}

.help-section .settings-description{position:absolute;top: 56px;font-size: 14px;color: #fff;opacity: 0.5;line-height: 1.4;border: unset;padding: unset;font-weight: 300;margin: unset;}

.help-section-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: #347fd4;
    text-transform: uppercase;
}

.help-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    line-height: 40px;
    min-width: 195px;
    text-align: center;
    justify-content: center;
    border-radius: 20px;
}

.help-action-btn svg{
    width:22px;
    height:auto
}

.help-btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

.help-btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: #fff;
}

.help-btn-outline {
    background-color: var(--color-primary);
    color: #fff;
}

.help-btn-outline:hover {
    background-color: var(--color-primary-hover);
}

/* AI Chat */
.ai-chat-box {
    background-color: #2b2b2be6;
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ai-chat-intro {
    padding: 18px 20px;
    border-bottom: 1px solid #5a5a5a;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);
    background-color: #2b2b2be6;
    border-radius: 16px 16px 0 0;
}

.ai-chat-intro p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.ai-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 80px 20px 80px;
    max-height: 378px;
}

.ai-chat-msg {
    padding: 8px 0;
    font-size: 16px;
    max-width: 460px;
    line-height: 1.5;
    font-weight: 300;
}

.ai-chat-msg.user {
    color: var(--color-primary);
    font-weight: 500;
}

.ai-chat-msg.ai {
    color: #ccc;
}

.ai-chat-msg.ai + .user{margin-top:20px}

.ai-chat-input-row {
    display: flex;
    flex-shrink: 0;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 20px);
    left: 10px;
    background-color: #1a1a1ae6;
    backdrop-filter: blur(5px);
    border-radius: 23px;
    line-height: 45px;
}

.ai-chat-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0 20px;
    color: #e0e0e0;
    font-size: 16px;
    outline: none;
}

.ai-chat-input::placeholder {
    color: #666;
}

.ai-chat-send {
    background: transparent;
    border: none;
    color: var(--color-primary);
    padding: 10px 14px;
    cursor: pointer;
    transition: color 0.15s;
}

.ai-chat-send:hover {
    color: #c8e622;
}

/* ===== Confirm Popup ===== */
.confirm-popup {
    width: 460px;
}

/* Logout confirm modal: 3 long-text buttons (Cancel + Keep backup & sign out
   + Delete backup & sign out) don't fit in 460px. Let width grow to content
   on the actions row; cap so it doesn't get wider than the viewport. */
.logout-confirm-popup {
    width: auto;
    min-width: 460px;
    max-width: min(720px, 92vw);
}
.logout-confirm-popup .confirm-popup-actions {
    flex-wrap: wrap;
}

.confirm-popup-body {
    padding: 20px;
}

.confirm-popup-body p {
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

.confirm-popup-body p + p{
    margin-top: 16px !important;
}

.confirm-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 20px 10px;
}

.confirm-cancel-btn {
    border: unset;
    background-color: #2b2b2be6;
    color: #aaa !important;
    border-radius: 20px !important;
    transition: background-color 0.15s, color 0.15s;
}

.confirm-cancel-btn:hover {
    background-color: #222 !important;
    color: #fff !important;
}

.confirm-execute-btn {
    background-color: #ef575ee6 !important;
    color: #fff !important;
    border-radius: 20px !important;
    transition: background-color 0.15s;
}

.confirm-execute-btn:hover {
    background-color: #c9302c !important;
}

/* ===== Layer Name Modal ===== */
.layer-name-popup {
    width: 420px;
}

.layer-name-popup-body {
    padding: 20px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layer-name-label {
    color: #aaa;
    font-size: 13px;
}

.layer-name-input {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s;
}

.layer-name-input:focus {
    border-color: #666;
}

.layer-name-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
    align-items: center;
}

.suggestion-loading {
    color: #666;
    font-size: 13px;
}

.suggestion-chip {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 16px;
    color: #ccc;
    font-size: 13px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.suggestion-chip:hover {
    background: #3a3a3a;
    border-color: #888;
    color: #fff;
}

/* ===== Download Confirm Popup ===== */
.download-confirm-popup {
    width: 680px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
}

.download-thumb-section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
    max-height: 340px;
    border-top: 1px solid #222;
}

.dl-thumb-item {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.dl-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.dl-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #ccc;
    font-size: 10px;
    text-align: center;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-info-bar {
    padding: 10px 16px;
    font-size: 13px;
    color: #666;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

.download-png-all-btn,
.download-execute-btn {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 20px !important;
    transition: background-color 0.15s;
}

.download-png-all-btn:hover,
.download-execute-btn:hover {
    background-color: var(--color-primary-hover) !important;
}

/* ===== Lineart Extract Popup ===== */
.lineart-confirm-popup { width: 700px; }
.lineart-confirm-body {
    display: flex;
    flex-direction: row;
    height: 520px;
    min-height: 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}
.lineart-preview-panel {
    flex: 1;
    min-width: 0;
    border-right: 1px solid #222;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    touch-action: none;
    position: relative;
}
.lineart-preview-panel canvas { max-width: 100%; max-height: 100%; display: block; margin: auto; }
.lineart-right-panel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.lineart-image-panel {
    flex: 1;
    min-height: 0;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    touch-action: none;
}
.lineart-image-panel canvas { max-width: 100%; max-height: 100%; display: block; margin: auto; }
.lineart-layer-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #161616;
}
.lineart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: #ccc;
    font-size: 14px;
}

/* ===== App Body ===== */
.app-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    background-color: #000;
}

/* ===== Sidebar ===== */
.sidebar {
    min-width: 180px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 42px 8px 20px;
    gap: 10px;
    position: relative;
    cursor: pointer;
    transition: width 0.2s, min-width 0.2s, padding 0.2s;
}

.sidebar-bottom {
    margin-top: auto;
    padding: 0;
    font-size: 14px;
    color: #ffffffe6;
}

.sidebar-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    border-radius: 20px;
    cursor: pointer;
    color: #777;
    position: relative;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sidebar-item svg {
    flex-shrink: 0;
    color: #fff;
    opacity: 0.65;
}

.sidebar-item img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    opacity: 0.65;
    transition: opacity 0.15s;
}

.sidebar-item:hover img,
.sidebar-item.active img {
    opacity: 1;
}

.sidebar-item:hover {
    background-color: #2b2b2be6;
    color: #e0e0e0;
}

.sidebar-item:hover svg {
    opacity: 1;
}

.sidebar-item.active {
    background-color: #347fd4;
    
}

.sidebar-item.active .sidebar-label{
}

.sidebar-label {
    font-size: 16px;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.sidebar-divider {
    height: 1px;
    background-color: #222;
    margin: 6px 4px;
    flex-shrink: 0;
}

/* Sidebar tooltip (rich detail on hover, appears to the right) */
.sidebar-tooltip {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    display: flex;
    align-items: center;
    background-color: #1a1a1ae6;
    color: #fff;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 300;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    min-height: 42px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    border-radius: 16px;
}

.sidebar-tooltip-rich {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px;
    gap: 4px;
}

.tooltip-title {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 3px;
}

.tooltip-row {
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
}

.tooltip-icon {
    font-size: 14px;
}

.tooltip-hint {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
}

.tooltip-subtract-icon {
    flex-shrink: 0;
}

.tooltip-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 3px;
}
.tooltip-title-row .tooltip-title {
    margin-bottom: 0;
}
.tooltip-credit {
    font-size: 13px;
    font-weight: 600;
    color: #f0c040;
    white-space: nowrap;
    margin-left: auto;
}
.tooltip-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.tooltip-shortcut kbd {
    display: inline-block;
    background: #333;
    border: 1px solid #555;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 400;
    color: #ccc;
    line-height: 18px;
    white-space: nowrap;
}
.tooltip-key {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.tooltip-key kbd {
    display: inline-block;
    background: #2a2a2a;
    border: 1px solid #444;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0px 5px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 400;
    color: #bbb;
    line-height: 17px;
    white-space: nowrap;
}

.sidebar-item:hover .sidebar-tooltip {
    opacity: 1;
}

/* ===== Sidebar toggle ===== */
.sidebar::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 3px;
    height: 32px;
    background: #333;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    pointer-events: none;
    z-index: 11;
}

.sidebar:hover::before {
    opacity: 1;
}

.sidebar:hover::before,
.sidebar.collapsed::before {
    opacity: 1;
}

.sidebar.collapsed::before {
    background: #555;
}

/* Collapsed state */
.sidebar.collapsed {
    min-width: unset;
    width: 44px;
    padding: 42px 4px 20px;
    align-items: center;
}

.sidebar.collapsed .sidebar-label {
    display: none;
}

.sidebar.collapsed .sidebar-item {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 6px;
}

.sidebar.collapsed .sidebar-bottom {
    display: none;
}

.sidebar.collapsed .sidebar-tooltip {
    left: calc(100% + 12px);
}

/* ===== Content Area ===== */
.content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    margin-right: 30px;
    position: relative;
}

/* ===== Main Panel ===== */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* background-color: #111; */
    overflow: hidden;
    min-width: 200px;
    position: relative;
}

/* 편집 동기화가 임계(≈250ms) 초과로 진행 중일 때: 커서 스피너로 처리 중 표시(+새 입력 차단은 JS). */
.main-panel.sync-blocking,
.main-panel.sync-blocking * {
    cursor: progress !important;
}

/* ===== Panel Tabs ===== */
.panel-tabs {
    display: flex;
    align-items: center;
    min-height: 42px;
    min-width: 0;        /* ★ EN 라벨 길어질 때 flex 자식들이 압박해도 부모는 안 깨짐 */
    padding-right: 12px; /* 우측 버튼(layerBgToggleBtn 등)이 끝에 딱 붙지 않게 여백 */
}

.panel-tabs .tab-action-btn:last-child{margin-right:20px;}


.panel-tabs .tab {
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    border-radius: 16px 16px 0 0;
    transition: color 0.15s, background-color 0.15s;
    user-select: none;
    white-space: nowrap;
    max-width: 220px;
    align-self: flex-end;
    font-weight: 400;
    line-height: 36px;
    min-width: 120px;
    justify-content: center;
    background-color: #1e1e1e;
}

.panel-tabs .tab .tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-tabs .tab:hover {
    color: #ccc;
    background-color: #1e1e1e;
}

.panel-tabs .tab.active {
    color: #fff;
    background-color: var(--color-primary);
}

.panel-tabs .tab.modified::after {
    content: ' *';
    flex-shrink: 0;
}

.tab-spacer {
    flex: 1;
    align-self: stretch;
}

/* credits gauge + display wrapped as one pill */
.credits-wrap {
    cursor: pointer;
}

.tab-action-btn {
    background-color: #2b2b2be6;
    color: #aaa;
    border: unset;
    padding: 0 15px;
    border-radius: 19px;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    line-height: 35px;
    font-weight: 500;
    margin-bottom: 5px;
}

.tab-action-btn img{width: 21px;height:auto}

.tab-action-btn:hover {
    background-color: #2a2a2a;
    border-color: #444;
    color: #fff;
}

/* ===== Canvas View ===== */
.canvas-view {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    /* margin: 0 8px 0 8px; */
    border-radius: 0 24px 23px 23px;
}

/* Drop Overlay */
.drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 25%;
    background: rgba(59, 130, 246, 0.08);
    border: 2.5px dashed rgba(59, 130, 246, 0.7);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.drop-overlay.visible {
    opacity: 1;
}
.drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #60a5fa;
    font-size: 14px;
    font-weight: 500;
}
.drop-overlay-inner svg {
    opacity: 0.85;
}

/* Canvas Loading Overlay */
.canvas-loading {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.canvas-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #2a2a2a;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: canvas-spin 0.8s linear infinite;
}

@keyframes canvas-spin {
    to { transform: rotate(360deg); }
}

/* 전체 화면 busy 차단 (자동 정렬 등 오래 걸리는 작업 중 UI 조작 차단 + 대기 커서) */
#busyOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}
#busyOverlay, #busyOverlay * { cursor: wait; }

/* Focus 모드 인디케이터 (캔버스 상단 중앙) + footer 포커스 버튼 active */
.focus-indicator {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: rgba(24, 22, 30, 0.88);
    border: 1px solid #4a3f66;
    border-radius: 20px;
    color: #cbb6ff;
    font-size: 13px;
    font-weight: 500;
}
.focus-indicator .focus-label { white-space: nowrap; }
.focus-indicator button {
    background: transparent;
    border: none;
    color: #b6a6e0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.focus-indicator button:hover { background: #3a3350; color: #fff; }
.focus-indicator .focus-refresh.stale { color: #ffd166; }
.focus-indicator .focus-refresh.stale::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd166;
}
#focusBtn.active {
    background: #4a3f66;
    border-color: #7a6aa8;
    color: #fff;
}

/* 선화만 컷아웃 밝기 이중 슬라이더 (min/max 2 thumbs) */
.lineart-dual-range { position: relative; width: 130px; height: 20px; }
.lineart-dual-range .ldr-track { position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: #555; border-radius: 2px; }
.lineart-dual-range .ldr-fill  { position: absolute; top: 8px; height: 4px; background: #08c0b2; border-radius: 2px; }
.lineart-dual-range input[type=range] {
    position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.lineart-dual-range input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.lineart-dual-range input[type=range]::-moz-range-track { background: none; border: none; }
.lineart-dual-range input[type=range]::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; margin-top: 3px; border-radius: 50%;
    background: #fff; border: 2px solid #08c0b2; cursor: pointer;
}
.lineart-dual-range input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid #08c0b2; cursor: pointer;
}

/* 미리보기 hover 시 커서 옆에 뜨는 레이어 이름 라벨 */
.preview-hover-label {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    max-width: 260px;
    padding: 3px 8px;
    background: rgba(24, 22, 30, 0.92);
    color: #eee;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid #4a3f66;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Upload Placeholder */
.upload-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
}

.upload-plus-btn {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 64px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-plus-btn:hover {
    background-color: #c8e622;
}

.upload-placeholder p {
    color: #666;
    font-size: 18px;
}

.upload-placeholder-img {
    width: 84px;
    height: auto;
    opacity: 0.6;
    transition: opacity 0.2s;
    pointer-events: none;
}

.upload-placeholder:hover .upload-placeholder-img {
    opacity: 1;
}

/* Canvas Container */
.canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    cursor: crosshair;
    touch-action: none;
}

.canvas-container.dragging {
    cursor: grabbing !important;
}

#mainCanvas {
    cursor: inherit;
    display: block;
    margin: auto;
    touch-action: none;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Active (open) state for PSD preview toggle */
.tab-action-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===== Status Bar ===== */
#statusBar {
    padding: 0 20px 5px;
    font-size: 16px;
    color: #fff;
    line-height: 30px;
    font-weight: 300;
    flex-shrink: 0;
}

/* ===== Right Panel ===== */
.right-panel {
    width: 350px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Preview Panel ===== */
.preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* background-color: #111; */
    overflow: hidden;
    min-height: 100px;
}

.panel-header {
    padding: 0 12px 0 20px;   /* 우측 12px — 헤더 버튼이 끝에 딱 붙지 않게 여백 */
    height: 42px;
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-header .btn{margin-bottom:5px;line-height: 35px;}

.btn {
    background-color: #2b2b2be6;
    color: #aaa;
    border: unset;
    border-radius: 16px;
    cursor: pointer;
    font-size: 17px;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 40px;
    padding: 0 20px;
    font-weight: 500;
}

.btn:hover {
    background-color: #2a2a2a;
    border-color: #444;
    color: #fff;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-small {
    padding: 0 15px;
    font-size: 16px;
}

select {
    background-color: #222;
    color: #888;
    border: 1px solid #2a2a2a;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

select:hover {
    border-color: #444;
    color: #ccc;
    background-color: #2a2a2a;
}

label {
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
}

.preview-container {
    flex: 1;
    display: flex;
    overflow: auto;
    position: relative;
    cursor: grab;
    border-radius: 24px;
    touch-action: none;
}

.preview-container:active {
    cursor: grabbing;
}

/* Preview background modes */
.preview-container.bg-white {
    background-color: #ffffff;
}

.preview-container.bg-black {
    background-color: #000000;
}

#previewCanvas {
    max-width: 100%;
    max-height: 100%;
    display: none;
    object-fit: contain;
    cursor: inherit;
    user-select: none;
    -webkit-user-drag: none;
    margin: auto;
    flex-shrink: 0;
}


/* ===== List Panel (Bottom Right) ===== */
.list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* background-color: #111; */
    overflow: hidden;
    min-height: 100px;
}

.list-tabs {
    display: flex;
    align-items: center;
    /* background-color: #111; */
    min-height: 42px;
    /* padding: 0 8px; */
    /* gap: 2px; */
}

.list-tab {
    padding: 0 15px;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 16px 16px 0 0;
    transition: color 0.15s, background-color 0.15s;
    user-select: none;
    align-self: flex-end;
    line-height: 40px;
    min-width: 30%;
    text-align: center;
    background-color: #1e1e1e;
}

.list-tab:hover {
    color: #ccc;
}

.list-tab.active {
    color: #fff;
    background-color: var(--color-primary);
    border-radius: 16px 16px 0 0;
}

#layerTabBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
#toggleAllEyeBtn.hidden { opacity: 0.35; }

.list-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px;
    background-color: #1f1f1f;
    border-radius: 0 24px 24px 24px;
}

#layerListContent {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

/* Layer list items */
.layer-item {
    padding: 4px 15px 4px 8px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    border-radius: 22px;
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 6px;
    font-weight: 300;
    transition: background-color 0.1s;
    position: relative;
}

.layer-item + .layer-item{margin-top:5px}
.layer-item:hover {
    background-color: #2b2b2be6;
}

/* ── Layer groups (Live2D 폴더) ── */
.layer-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    margin-top: 5px;
    color: #e0c48c;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    background: #2b2620;
    border: 1px solid #48402e;
    cursor: grab;
}
.layer-group-header:active { cursor: grabbing; }
.layer-group-icon { display: inline-flex; opacity: .95; }
.layer-group-name {
    flex: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.layer-group-name:hover { text-decoration: underline; }
.layer-group-count {
    font-size: 11px;
    color: #b9a06e;
    background: #1e1a14;
    border-radius: 10px;
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
.layer-group-ungroup {
    background: transparent;
    border: none;
    color: #b9a06e;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
}
.layer-group-ungroup:hover { background: #48402e; color: #fff; }
.layer-group-eye {
    background: transparent;
    border: none;
    color: #b9a06e;
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
}
.layer-group-eye svg { width: 15px; height: 15px; }
.layer-group-eye:hover { background: #48402e; color: #fff; }
.layer-group-eye.hidden { opacity: 0.45; }
.layer-item--grouped {
    margin-left: 12px;
    border-left: 2px solid #6b5a34;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.layer-group-chevron {
    display: inline-flex;
    cursor: pointer;
    color: #b9a06e;
    transition: transform 0.12s;
    flex-shrink: 0;
}
.layer-group-header.collapsed .layer-group-chevron { transform: rotate(-90deg); }
.layer-group-header.drop-target {
    background: #3a3320;
    border-color: #e0c48c;
    box-shadow: inset 0 0 0 1px #e0c48c;
}

/* Skeleton loading cards */
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.layer-item--skeleton {
    padding: 4px 15px 4px 8px;
    min-height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    overflow: hidden;
    position: relative;
}
.layer-item--skeleton + .layer-item--skeleton { margin-top: 5px; }
.layer-item--skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.06) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.layer-item--skeleton .skeleton-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #3a3a3a;
    margin-right: 4px;
}
.layer-item--skeleton .skeleton-name {
    height: 11px;
    border-radius: 6px;
    background: #3a3a3a;
    width: 55%;
}

.layer-item.selected {
    background-color: #347fd4;
}

.layer-item.dragging {
    opacity: 0.35;
}

.layer-item.drag-over-top {
    box-shadow: inset 0 2px 0 #5b6af0;
}

.layer-item.drag-over-bottom {
    box-shadow: inset 0 -2px 0 #5b6af0;
}

/* Pending row: background pulse when it first appears. */
@keyframes pending-layer-bg-flash {
    0%, 100% { background-color: #347fd4; }
    50%      { background-color: #9ec8ff; }
}
.layer-item--new.pending-layer-item {
    animation: pending-layer-bg-flash 0.55s ease-in-out 3;
}

/* Pending (unsaved) layer item */
.pending-layer-item {
    background-color: rgba(52, 127, 212, 0.18);
    border: 1px dashed rgba(52, 127, 212, 0.7);
    margin-bottom: 6px;
    gap: 10px;
    justify-content: center;
}
.pending-layer-item:hover {
    background-color: rgba(52, 127, 212, 0.32) !important;
}
.pending-layer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6ab0f5;
    flex-shrink: 0;
}
.pending-layer-item .layer-item-name {
    color: #6ab0f5;
    font-style: italic;
    font-weight: 400;
    flex: 1;
}
.pending-discard-btn {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 60, 60, 0.25);
    color: #e05555;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.pending-discard-btn:hover {
    background: rgba(220, 60, 60, 0.7);
    color: #fff;
}

.layer-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background:
        repeating-conic-gradient(#777 0% 25%, #555 0% 50%)
        0 0 / 8px 8px;
    margin-right: 4px;
}
.layer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.layer-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.layer-empty-badge {
    flex: none;
    font-size: 10px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    color: #9fb1c2;
    background: #1a2530;
    border: 1px dashed #3a4a5a;
    letter-spacing: .02em;
}
.layer-modified-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

.layer-item-actions {
    display: grid;
    grid-template-columns: 0fr;
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0;
    transition: grid-template-columns 0.2s ease, opacity 0.15s;
}

.layer-item:hover .layer-item-actions,
.layer-item.selected .layer-item-actions {
    grid-template-columns: 1fr;
    opacity: 1;
}

.layer-item-actions-inner {
    min-width: 0;
    display: flex;
    gap: 8px;
    padding-left: 6px;
}

.layer-item-actions button {
    background: none;
    border: none;
    color: #888;
    cursor: default;
    pointer-events: none;
    opacity: 0.45;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.layer-item:hover .layer-item-actions button,
.layer-item.selected .layer-item-actions button {
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
}

.layer-item:hover .layer-item-actions button svg,
.layer-item.selected .layer-item-actions button svg {
    color: #fff;
}

.layer-item-actions button svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.layer-item-actions button:hover {
    background-color: #3a3a3ae6;
    color: #fff;
}

.layer-item-actions button.delete-btn:hover {
    background-color: #ef575ee6;
    color: #fff;
}

.layer-item-actions button.subtract-btn:hover {
    background-color: #e6a23ce6;
    color: #fff;
}

.layer-item-actions button.split-lineart-btn:hover {
    background-color: #2bb4a3e6;
    color: #fff;
}

/* 레이어 행 ⋯ 액션 메뉴 (좌클릭/우클릭으로 열리는 팝오버) */
.layer-action-menu {
    position: fixed;
    z-index: 10050;
    min-width: 184px;
    padding: 6px;
    background: #2a2a2ef7;
    border: 1px solid #ffffff1f;
    border-radius: 10px;
    box-shadow: 0 10px 30px #000000ab;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.layer-action-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    background: none;
    border: none;
    border-radius: 7px;
    color: #e9e9e9;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.layer-action-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}
.layer-action-menu-item:hover {
    background-color: #ffffff17;
}
.layer-action-menu-item.danger {
    color: #f2777a;
}
.layer-action-menu-item.danger:hover {
    background-color: #ef575e26;
}

.layer-item-actions button.inpaint-btn:hover {
    background-color: #5b6af0e6;
    color: #fff;
}

#layerList {
    flex: 1;
    overflow-y: auto;
}

.layer-footer-bar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 4px 2px;
    border-top: 1px solid #3e3e3e;
    margin-top: auto;
    flex-shrink: 0;
}

.layer-footer-bar button {
    background: #2a2a2a;
    border: 1px solid #555;
    color: #ccc;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer-footer-bar button:hover {
    background-color: #3a3a3ae6;
    color: #fff;
    border-color: #666;
}

.layer-footer-bar button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: auto;
}

.layer-footer-bar button:disabled:hover {
    background: #2a2a2a;
    color: #ccc;
    border-color: #555;
}

.layer-footer-bar button#footerDeleteBtn:hover {
    background-color: #ef575ee6;
    border-color: #ef575e;
}

.layer-footer-bar button#footerSubtractBtn:hover {
    background-color: #e6a23ce6;
    border-color: #e6a23c;
}

.layer-footer-bar button svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Inpaint toolbar — inline in panel-tabs, right-aligned (same slot as credits-wrap) */
.inpaint-tools-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 15px;
    min-height: 35px;
    margin-right: 20px;
    margin-bottom: 5px;
    align-self: center;
    background-color: #2b2b2be6;
    border-radius: 19px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    flex-wrap: nowrap;
    white-space: nowrap;   /* 자식 텍스트('빈 공간만' 라벨 등)가 눌려도 두 줄로 안 깨지게 —
                              다른 툴바(pen/smudge/paint)는 이미 있음. inpaint/content-fill 공용 컨테이너. */
}
.inpaint-tools-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 27px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    padding: 0 14px;          /* ★ pen-tools-bar button과 동일하게 통일 (기존 20px → 14px) */
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.inpaint-tools-bar button:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.inpaint-submit-btn { background: #347fd4 !important; border-color: #347fd4 !important; }
.inpaint-submit-btn:hover { background: #2a6ab8 !important; border-color: #2a6ab8 !important; }
.inpaint-submit-btn:disabled { opacity: 0.4; cursor: not-allowed !important; }
/* 표시 옵션(페더) 팝오버 */
.view-options-wrap { display: inline-flex; align-items: center; }
.view-options-popover {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 200;
    min-width: 210px;
    padding: 8px 12px;
    background: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.view-options-popover .vo-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.view-options-popover input[type="range"] { flex: 1; min-width: 90px; accent-color: #4a9eff; }
.view-options-popover .vo-label { color: #999; font-size: 12px; white-space: nowrap; }
.view-options-popover .vo-num { color: #bbb; font-size: 12px; font-variant-numeric: tabular-nums; }

.icon-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.icon-toggle-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.8); }
.icon-toggle-btn.active { border-color: rgba(255,255,255,0.5); color: #fff; }
/* 레이어 탭 우측 아이콘 버튼(빈 레이어 추가·아래로 병합·원본 배경)이 서로 붙지 않게 간격 */
.panel-tabs .icon-toggle-btn { margin-left: 8px; }
.inpaint-prompt-input {
    flex: 0 1 150px;   /* 고정 기준폭 150px(축소 가능) — flex:1로 툴바가 과도하게 늘어나던 것 방지 */
    min-width: 100px;
    height: 27px;
    box-sizing: border-box;
    line-height: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0 12px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.inpaint-prompt-input::placeholder { color: rgba(255,255,255,0.35); }
.inpaint-prompt-input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); }

/* Paint toolbar — inline in panel-tabs, right-aligned (same slot as credits-wrap) */
.paint-tools-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    height: 35px;
    margin-right: 20px;
    margin-bottom: 5px;
    align-self: center;
    background-color: #2b2b2be6;
    border-radius: 19px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}
.paint-color-label, .paint-size-label { opacity: 0.7; }
.paint-color-input {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
.paint-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.paint-color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.paint-color-input::-moz-color-swatch { border: none; border-radius: 50%; }
.paint-tools-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.2);
    margin: 0 2px;
}
.paint-size-value {
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.brush-size-btn {
    cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,0.4);
}
.brush-size-btn:hover { color: #fff; }
.brush-size-popup {
    position: fixed;
    z-index: 9999;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.brush-size-popup button {
    background: #3a3a3a;
    color: #ccc;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    min-width: 32px;
    font-variant-numeric: tabular-nums;
}
.brush-size-popup button:hover { background: #505050; color: #fff; }
.brush-size-popup button.active { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* Smudge toolbar — inline in panel-tabs, right-aligned (same slot as credits-wrap) */
.smudge-tools-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    height: 35px;
    margin-right: 20px;
    margin-bottom: 5px;
    align-self: center;
    background-color: #2b2b2be6;
    border-radius: 19px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}
.smudge-label { opacity: 0.7; }
.smudge-num {
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.smudge-num.editable {
    cursor: text;
}
.smudge-num.editable:hover {
    text-decoration: underline dotted rgba(255,255,255,0.5);
}
.smudge-num-edit {
    width: 36px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 3px;
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0 3px;
    outline: none;
    -moz-appearance: textfield;
    min-width: 0;
}
.smudge-num-edit::-webkit-inner-spin-button,
.smudge-num-edit::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.smudge-range {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 5px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.smudge-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
.smudge-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Pen toolbar — inline in panel-tabs, right-aligned (same slot as credits-wrap) */
.pen-tools-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    height: 35px;
    margin-right: 20px;
    margin-bottom: 5px;
    align-self: center;
    background-color: #2b2b2be6;
    border-radius: 19px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    min-width: 0;             /* ★ 영어 EN 라벨이 길어질 때 flex 부모에 밀려 overflow 방지 */
    overflow-x: auto;         /* ★ 넘치면 internal scroll. 시각상 스크롤바는 숨김 — 휠/드래그로만 */
    scrollbar-width: none;    /* Firefox */
}
.pen-tools-bar::-webkit-scrollbar { display: none; }  /* Webkit/Chromium/Edge */
.pen-tools-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 27px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    padding: 0 14px;          /* ★ 20→14: EN 'Deselect'(8자) 등 길어진 라벨 공간 확보. 한글 짧은 라벨엔 영향 미미 */
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ★ EN 전용 추가 압축 — Korean/JA/ZH는 짧아서 영향 없음 */
[lang="en"] .pen-tools-bar { gap: 6px; }
[lang="en"] .pen-tools-bar button,
[lang="en"] .inpaint-tools-bar button { padding: 0 10px; }
/* 같은 컴포넌트가 4개 툴바에 흩어져 있어 EN에서 크기가 제각각이었던 문제 — 작은 쪽으로 통일 */
[lang="en"] .pen-tools-bar button,
[lang="en"] .smudge-tools-bar button,
[lang="en"] .paint-tools-bar button,
[lang="en"] .inpaint-tools-bar button { font-size: 14px; }
[lang="en"] .pen-tools-bar .smudge-label,
[lang="en"] .smudge-tools-bar .smudge-label,
[lang="en"] .inpaint-tools-bar .smudge-label,
[lang="en"] .paint-tools-bar .paint-color-label,
[lang="en"] .paint-tools-bar .paint-size-label { font-size: 13px; }
.pen-tools-bar button:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.pen-mode-btn.active { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.5) !important; }
.pen-toggle-btn { padding: 0 8px !important; min-width: 33px; }
.pen-toggle-btn svg { display: block; }
.pen-toggle-btn.active { background: rgba(96,165,250,0.25) !important; border-color: rgba(96,165,250,0.7) !important; color: #60a5fa !important; }
.pen-apply-btn { background: #347fd4 !important; border-color: #347fd4 !important; }
.pen-apply-btn:hover { background: #2a6ab8 !important; border-color: #2a6ab8 !important; }
.pen-apply-btn:disabled { opacity: 0.4; cursor: not-allowed !important; }
.pen-status {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: center;
}

/* Active sidebar tool item */

.sidebar-item.tool-active {
    background-color: #347fd4;
}
.sidebar-item.tool-active img,
.sidebar-item.tool-active svg { opacity: 1; }

/* Retouch / inpaint mode: hide system cursor over canvas-view */
.retouch-mode .canvas-view { cursor: none !important; }
.retouch-mode .layer-cutout-container { cursor: none !important; }

/* Magic eraser: click-to-erase tool with no brush radius — show a precise crosshair
   so the user can see exactly which pixel the click will sample. */
.zoom-mode .canvas-view { cursor: zoom-in !important; }
.zoom-mode .layer-cutout-container { cursor: zoom-in !important; }
.color-cutout-mode .canvas-view { cursor: crosshair !important; }
.magic-eraser-mode .canvas-view { cursor: crosshair !important; }
.magic-eraser-mode .layer-cutout-container { cursor: crosshair !important; }

/* Brush cursor overlay canvas — lives in canvas-view, covers full area */
#retouchCursorCanvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

/* Layer eye (show/hide) button — always visible, not in actions grid */
.layer-eye-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    transition: color 0.1s;
}
.layer-eye-btn:hover { color: #ccc; }
.layer-eye-btn.hidden { color: #3a3a3a; }
.layer-eye-btn svg { width: 16px; height: 16px; pointer-events: none; }

/* Layer canvas tabs in panel-tabs */
.panel-tabs .layer-canvas-tab {
    /* inherits .tab styles */
}

/* Layer cutout container — same checkerboard as canvas-container, with zoom/pan */
.layer-cutout-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    cursor: grab;
    touch-action: none;
}
#layerCutoutCanvas {
    display: block;
    margin: auto;
    transform-origin: top left;
}
#inpaintMaskCanvas {
    transform-origin: top left;
    margin: 0;
    opacity: 0.4;
}

/* 아이콘 버튼 floating 툴팁 (body에 append, overflow clip 우회) */
.layer-icon-tooltip {
    position: fixed;
    background: #2b2b2b;
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 6px 13px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.12s;
}

/* History list items */
.history-item {
    padding: 0 14px 0 12px;
    font-size: 14px;
    color: #888;
    border-left: 3px solid #3d3d3d;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}
.history-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #555;
}
.history-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.history-detail {
    font-size: 12px;
    color: #555;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.history-count {
    font-size: 11px;
    color: #555;
    background: #2a2a2a;
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.history-item.positive {
    border-left-color: var(--color-primary);
    color: #ccc;
}
.history-item.positive .history-icon { color: var(--color-primary); }

.history-item.negative {
    border-left-color: var(--color-danger);
    color: #ccc;
}
.history-item.negative .history-icon { color: var(--color-danger); }

.history-item.neutral {
    border-left-color: #555;
    color: #bbb;
}
.history-item.neutral .history-icon { color: #777; }

.list-empty {
    color: #555;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* ===== Resizers ===== */
.resizer {
    /* background-color: #111; */
    position: relative;
    flex-shrink: 0;
}

.resizer-horizontal {
    width: 30px;
    cursor: col-resize;
    position: relative;
}

.resizer-horizontal::after {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 1%;
    left: 50%;
    width: 1px;
    background: #2a2a2a;
    pointer-events: none;
}

.resizer-horizontal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 30px;
    background: #333;
    pointer-events: none;
    transform: translate(-1px, -50%);
    border-radius:2px;
    z-index: 1;
}

.resizer-horizontal:hover,
.resizer-horizontal.resizing {
    /* background-color: #1a1a1a; */
}

.content-area.vertical .resizer-horizontal::before{
    width: 30px;
    height: 3px;
    transform: translate(-50%, -1px);
}

.resizer-horizontal:hover::after,
.resizer-horizontal.resizing::after,
.resizer-horizontal:hover::before,
.resizer-horizontal.resizing::before{
    background: #007acc;
}

.resizer-vertical {
    height: 30px;
    cursor: row-resize;
}

.resizer-vertical::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3%;
    right: 3%;
    height: 1px;
    background: #2a2a2a;
    pointer-events: none;
}

.resizer-vertical::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 3px;
    background: #333;
    pointer-events: none;
    transform: translate(-50%, -1px);
    border-radius:2px;
    z-index: 1;
}

.content-area.vertical .resizer-vertical::before{
    width: 3px;
    height: 30px;
    transform: translate(-1px, -50%);
}

.resizer-vertical:hover::after,
.resizer-vertical:hover::before,
.resizer-vertical.resizing::after,
.resizer-vertical.resizing::before
{
    background-color: #007acc;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* ===== Checkbox ===== */
input[type="checkbox"] {
    margin-right: 5px;
}

/* Language Selector */
.settings-lang-selector {
    margin-top: auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #222;
    color: #555;
}

.settings-lang-selector select {
    flex: 1;
    background: #111;
    border: 1px solid #2a2a2a;
    color: #888;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.settings-lang-selector select:focus {
    outline: none;
    border-color: var(--color-primary);
    color: #e0e0e0;
}

/* ===== Background Select Button ===== */
/* Settings menu lang item */
.settings-menu-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    color: #666;
    gap: 10px;
    line-height: 40px;
    position: absolute;
    bottom: 0;
    width: calc(100% - 30px);
    border-radius:20px;
    transition: background-color 0.15s;
}

.settings-menu-lang .lang-custom-select{width:100%;padding:0 20px;margin:0 -20px;}

.settings-menu-lang .lang-select-btn{line-height:40px;}

.settings-menu-lang img{width: 22px;height: 22px;}

.settings-menu-lang:hover {
    background-color:#2b2b2be6;
}

.settings-menu-lang .lang-select-dropdown {
    top: unset;
    bottom: calc(100% + 4px);
    left: 70%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border: unset;
    background-color: #1a1a1ae6;
    backdrop-filter: blur(5px);
    border-radius: 16px;
}

.settings-menu-lang .lang-select-dropdown .lang-select-option{
    padding: 0 20px;
    font-size: 16px;
    line-height: 38px;
    border-radius: 19px;
    text-align: center;
}


/* Settings list (redesigned) */
.settings-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.settings-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.settings-list-item:hover {
    background: #222;
}

.settings-list-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.8;
}

.settings-list-label {
    flex: 1;
    font-size: 14px;
    color: #ccc;
}

.settings-list-value {
    font-size: 13px;
    color: #666;
}

.settings-list-action {
    font-size: 13px;
    color: var(--color-primary);
}

.settings-list-logout .settings-list-label {
    color: #e05757;
}

.settings-list-logout:hover {
    background: rgba(224, 87, 87, 0.08);
}

/* ===== Pricing Modal ===== */
.pricing-modal {
    width: 1000px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1ae6;
    border: unset;
}

.pricing-modal-body {
    padding: 24px 24px 20px;
    overflow-y: auto;
}

.pricing-modal-toggle {
    display: flex;
    justify-content: center;
    background: #111;
    border-radius: 100px;
    /* padding: 4px; */
    gap: 4px;
    width: fit-content;
    margin: 0 auto 24px;
}

.pricing-toggle-btn {
    padding: 7px 28px;
    border-radius: 100px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    color: rgba(255,255,255,0.4);
    background: transparent;
    display: flex;
    align-items: center;
    flex-direction: row;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.pricing-toggle-btn.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.pricing-toggle-btn.active .pricing-toggle-badge{
    background: #1a1a1aba;
}

.pricing-toggle-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ef575ee6;
    background: #dc727733;
    border-radius: 17px;
    padding: 3px 8px;
    margin-left: 3px;
}

.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
/* 5 카드(팩 2 + 구독 3)를 시맨틱하게 2행 배치 — 1행: 팩 2개 중앙 정렬, 2행: 구독 3개.
   6-col 격자에 카드별 span 2로 폭 균일 + 1행 col 2/4 시작으로 자연 중앙.
   DOM 순서는 Mini, Credit, Basic, Pro, Studio. CSS grid는 explicit grid-column으로
   위치 고정하므로 DOM 순서와 시각 행 배치가 독립적 (Mini/Credit이 row 1 col 2-3/4-5에
   고정, 나머지는 span 2로 row 2에 자동 흐름).
   ⚠️ 새 카드 추가 시 반드시 grid-column 룰 명시할 것 — 안 그러면 span 1로 떨어져
   1/6 폭 카드가 됨. 980px 미디어쿼리의 reset 룰에도 신규 data-tier 추가 필수. */
.pricing-plan-card[data-tier="basic"],
.pricing-plan-card[data-tier="pro"],
.pricing-plan-card[data-tier="studio"]  { grid-column: span 2; }
.pricing-plan-card[data-tier="mini"]    { grid-column: 2 / span 2; }
.pricing-plan-card[data-tier="credits"] { grid-column: 4 / span 2; }

.pricing-plan-card {
    background: #2b2b2be6;
    border-radius: 16px;
    padding: 20px 20px 20px;
    text-align: left;
    transition: border-color 0.2s, transform 0.25s, background 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-plan-card:hover {
    background: #2b2b2be6;
    transform: translateY(-10px) scale(1.02);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
}

.pricing-plan-card:hover:after{
    position:fixed;content:""; width:100%; height:100%;
    border: 2px solid transparent;
    background: linear-gradient(#1c1c1ce6, #1c1c1ce6) padding-box,
    linear-gradient(180deg, #4f85c2 0%, #303030 100%) border-box;
    left:-1px;
    top:-1px;
    border-radius:16px;
    z-index:-1;
    opacity:1;
}

.pricing-plan-card.popular {
    border-color: var(--color-primary);
}

.pricing-plan-card.current {
    border-color: rgba(255,255,255,0.15);
    opacity: 0.7;
}

.pricing-popular-badge {
    /* Float above the card so the Pro card's header line still aligns with
       the other cards (badge no longer occupies layout flow). */
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    background: #1a1a1ae6;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    padding: 6px 14px;
    width: fit-content;
    white-space: nowrap;
    z-index: 1;
}

.pricing-plan-name {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.pricing-plan-desc {
    font-size: 14px;
    color: #ffffff66;
    margin-bottom: 12px;
    font-weight: 400;
}

.pricing-plan-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 12px 0;
}

.pricing-plan-price {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.pricing-plan-price .price-period {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.pricing-plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 5px 0 20px;
    flex: 1;
}

.pricing-plan-features li {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-plan-features li::before {
    content: '✓';
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.pricing-plan-btn {
    display: block;
    text-align: center;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: default;
    transition: background-color 0.2s, border-color 0.2s;
    line-height: 35px;
}

.pricing-plan-btn.primary {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    cursor: pointer;
}

.pricing-plan-btn.primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.pricing-plan-btn.secondary {
    background: transparent;
    color: rgba(255,255,255,0.3);
    border: 1px solid #2a2a2a;
}


/* ===== Vertical layout (content-area aspect ratio < 1) ===== */
.content-area.vertical {
    flex-direction: column;
}

.content-area.vertical .main-panel {
    width: 100% !important;
    flex: 2;
    min-height: 0;
}

.content-area.vertical .right-panel {
    width: 100% !important;
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    flex-wrap: nowrap;
}

.content-area.vertical .resizer-horizontal {
    height: 21px;
    width: 100%;
    cursor: row-resize;
}

.content-area.vertical .resizer-horizontal::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}

.content-area.vertical .resizer-vertical {
    height: 100%;
    width: 21px;
    cursor: col-resize;
}

.content-area.vertical .resizer-vertical::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
}

.content-area.vertical .preview-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}


@media (max-width: 1440px) {
    body { --right-panel-min-width: 200; }

    .app-header {
        padding: 15px 0 10px 10px;
    }


    .panel-tabs {
        min-height: 36px;
        gap: 10px;
    }

    .panel-tabs .tab {
        padding: 0 10px;
        font-size: 16px;
        line-height: 36px;
    }

    .tab-action-btn {
        padding: 0 10px;
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 2px;
    }


    .panel-tabs .tab-action-btn:last-child {
        margin-right: 10px;
    }

    .tab-action-btn img{width: 18px;}

    .tab-action-btn:hover {
        background-color: #2a2a2a;
        border-color: #444;
        color: #fff;
    }

    #hoverGauge {
        width: 90px;
        height: 9px;
        border-radius: 5px;
    }
    
    #hoverGaugeFill::after {
        height: 10px;
    }

    #creditsDisplay {
        font-size: 14px;
    }
    .gauge-cost { font-size: 12px; }

    #statusBar {
        padding: 0 15px 5px;
        font-size: 14px;
        line-height: 26px;
    }

    .resizer-horizontal {
        width: 21px;
    }

    .resizer-vertical {
        height: 21px;
    }
    .panel-header {
        padding: 0 10px;
        height: 36px;
        min-height: 36px;
    }
    
    .panel-header h3 {
        font-size: 16px;
    }

    .panel-header .btn{
        margin-bottom: 2px;
        line-height: 30px;
    }

    .btn-small {
        padding: 0 10px;
        font-size: 14px;
    }

    .list-tabs {
        min-height: 40px;
    }
    
    .list-tab {
        padding: 0 10px;
        font-size: 16px;
        line-height: 40px;
    }
    
    .list-content {
        padding: 10px 10px;
    }

    .layer-item {
        padding: 0 10px;
        font-size: 14px;
        line-height: 34px;
    }

    .layer-item + .layer-item{margin-top:5px}

    /* History list items */
    .history-item {
        padding: 0 10px 0 8px;
        font-size: 13px;
        border-left: 2px solid #3d3d3d;
        min-height: 32px;
    }

    .list-empty {
        color: #555;
        font-size: 14px;
        padding: 10px;
    }

    #tierBadge {
        font-size: 18px;
    }

    .header-nav-link {
        font-size: 14px;
    }

    .upgrade-btn {
        font-size: 14px;
    }

    /* ===== Download Confirm Popup ===== */
    .lineart-confirm-body { height: 480px; }
    .lineart-right-panel { width: 280px; }

}


@media (max-width: 1280px) {
    body { --right-panel-min-width: 180; }

    .header-logo img {
        width: 100px;
    }

    .header-right {
        gap: 10px;
    }

    .app-header {
        padding: 10px 0 10px 10px;
        gap: 30px;
    }

    #tierBadge {
        font-size: 17px;
    }


    .sidebar {
        min-width: auto;
    }

    .sidebar-tooltip-rich {
        padding: 15px 15px;
        gap: 2px;
    }
    
    .tooltip-title {
        font-size: 16px;
        margin-bottom: 2px;
    }
    
    .tooltip-row {
        font-size: 12px;
    }
        
    .tooltip-hint {
        font-size: 12px;
    }

    .panel-tabs {
        min-height: 32px;
    }

    .content-area {
        margin-right: 20px;
    }

    .panel-tabs .tab {
        padding: 0 10px;
        font-size: 14px;
        line-height: 34px;
        border-radius: 10px 10px 0 0;
    }

    .tab-action-btn {
        padding: 0 15px;
        font-size: 12px;
        line-height: 30px;
        margin-bottom: 5px;
    }

    .panel-tabs .tab-action-btn:last-child {
        margin-right: 0;
    }

    .canvas-view{
        border-radius: 0 12px 12px 12px;
    }
    
    .tab-action-btn img{width: 16px;}
    
    .tab-action-btn:hover {
        background-color: #2a2a2a;
        border-color: #444;
        color: #fff;
    }

    #hoverGauge {
        width: 80px;
        height: 8px;
        border-radius: 5px;
    }

    #hoverGaugeFill::after {
        height: 12px;
    }

    #creditsDisplay {
        font-size: 13px;
    }
    .gauge-cost { font-size: 11px; }

    #statusBar {
        font-size: 14px;
        line-height: 24px;
    }


    .panel-header {
        padding: 0;
        height: 35px;
        min-height: 35px;
    }
    
    .panel-header h3 {
        font-size: 14px;
    }

    .preview-container{border-radius:12px}

    .panel-header .btn{
        margin-bottom: 5px;
        line-height: 30px;
    }

    .btn-small {
        padding: 0 15px;
        font-size: 12px;
    }

    .list-panel{
        /* width: calc(50% - 21px); */
    }

    .list-tabs {
        min-height: 36px;
    }
    
    .list-tab {
        font-size: 14px;
        line-height: 35px;
        border-radius: 10px 10px 0 0;
    }

    .list-tab.active {
        color: #fff;
        background-color: var(--color-primary);
        border-radius: 10px 10px 0 0;
    }

    
    .list-content {
        padding: 10px 10px;
        border-radius: 0 12px 12px 12px;
    }

    .layer-item {
        padding: 0 10px;
        font-size: 13px;
        line-height: 34px;
    }

    .layer-item + .layer-item{margin-top:5px}

    .layer-item-actions-inner {
        gap: 6px;
        padding-left: 5px;
    }

    .layer-item-actions button {
        width: 26px;
        height: 26px;
    }

    .layer-item-actions button svg {
        width: 16px;
        height: 16px;
    }

    /* History list items */
    .history-item {
        padding: 0 10px;
        font-size: 13px;
        border-left: 2px solid #3d3d3d;
        line-height: 33px;
    }

    .list-empty {
        color: #555;
        font-size: 14px;
        padding: 10px;
    }
    
    .header-nav {
        gap: 20px;
    }
    
    .header-nav-link {
        font-size: 13px;
        font-weight: 300;
    }
    
    .header-nav-link:hover {
        color: #fff;
    }
    
    /* Header language selector */
    
    .header-btn {
        padding: 0 10px;
        font-size: 14px;
    }
    
    .header-btn:hover {
        background-color: #222;
        border-color: #555;
        color: #fff;
    }
    
    .upgrade-btn {
        font-size: 13px;
        padding: 0 12px;
    }

    .lang-select-btn {
        font-size: 14px;
        line-height: 35px;
    }

    .lang-select-option {
        padding: 0 15px;
        font-size: 14px;
        line-height: 35px;
        border-radius: 16px;
    }
    
    .settings-btn {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
    
    .settings-btn:hover {
        color: #ccc;
        background: #222;
    }

    .sidebar-bottom {
        position:absolute;
        font-size: 10px;
        bottom:10px;
    }

    .confirm-popup-body {
        padding: 15px;
    }
    
    .confirm-popup-body p {
        font-size: 14px;
    }
    
    .confirm-popup-body p + p{
        margin-top: 10px !important;
    }

    .confirm-popup-actions {
        padding: 8px 15px 8px;
    }
    
    .confirm-cancel-btn,
    .confirm-execute-btn{
        font-size: 14px;
        line-height:30px;
        padding:0 15px
    }

    /* ===== Download Confirm Popup ===== */
    .lineart-confirm-body { height: 420px; }
    .lineart-right-panel { width: 250px; }
    .download-png-all-btn,
    .download-execute-btn { font-size: 14px; line-height: 30px; }

    /* ===== Settings Popup ===== */
    .settings-popup {
        min-width: 700px;
        max-width: 1200px;
        min-height: 440px;
        border-radius: 10px;
    }
    
    .settings-popup-content {
        padding: 20px;
    }
    
    /* Settings Left Menu */
    .settings-menu {
        min-width: 140px;
        padding: 0 20px 0 0;
    }
    
    .settings-menu-item {
        padding: 0 15px;
        font-size: 14px;
        line-height: 35px;
    }
    
    .settings-menu-item img{
        width: 20px;
        height: 20px;
    }
    
    .settings-menu-bottom {margin-top: 10px;padding-top: 15px;}
    
    /* Settings Right Panel */
    .settings-panel {
        padding: 5px 0 0 15px;
    }
    
    .settings-tab-content h4 {
        font-size: 16px;
        margin: 0 0 5px 0;
    }
    
    .settings-tab-content h4:not(:first-child) {
        margin-top: 17px;
    }
    
    .settings-tab-content .settings-row:not(:nth-child(2)){
        padding-bottom: 8px;
    }
    
    #settingsTabSubscription .settings-row{
        padding-bottom: 8px;
    }
    
    .settings-row {
        padding: 0 0 20px;
    }
    
    .settings-label {
        font-size: 14px;
    }
    
    .settings-value {
        font-size: 14px;
    }
    
    .settings-description {
        font-size: 14px;
        margin-bottom: 20px;
        padding-bottom: 17px;
    }
    
    .settings-tab-actions {
        margin-top: 7px;
        padding-top: 20px;
    }
    
    .settings-tab-actions .settings-upgrade-btn {line-height: 35px;font-size: 12px;}
    
    /* Redeem */
    .redeem-form {
        gap: 10px;
    }
    
    .redeem-input {
        padding: 0 15px;
        font-size: 12px;
        line-height: 35px;
    }
    
    .redeem-input::placeholder {
        color: #666;
    }
    
    .redeem-btn.btn {
        font-size: 12px;
        line-height: 35px;
    }
    
    .redeem-btn.btn:hover {
        color:#fff;
        background-color: #347fd4;
    }
    
    .redeem-result {
        padding: 10px 10px 10px 0;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.4;
    }
    
    /* Help */
    .help-section {
        line-height: 35px;
    }
    
    .help-section:nth-child(2) {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    .help-section .settings-description{top: 47px;font-size: 12px;}
    
    .help-section-subtitle {
        font-size: 14px;
    }
    
    .help-action-btn {
        gap: 8px;
        padding: 0 15px;
        font-size: 12px;
        min-width: 195px;
        line-height: 35px;
    }
    
    .help-action-btn svg{
        width:18px;
    }
    
    /* AI Chat */
    .ai-chat-box {
        border-radius: 10px;
    }
    
    .ai-chat-intro {
        padding: 12px 15px;
        border-radius: 10px 10px 0 0;
    }
    
    .ai-chat-intro p {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .ai-chat-messages {
        padding: 58px 15px 48px;
        max-height: 327px;
    }
    
    .ai-chat-msg {
        padding: 5px 0;
        font-size: 14px;
        line-height: 1.4;
    }
    
    .ai-chat-msg.ai + .user{margin-top: 15px;}
    
    .ai-chat-input-row {
        line-height: 35px;
    }
    
    .ai-chat-input {
        padding: 0 15px;
        font-size: 14px;
    }

    .ai-chat-send {
    padding: 8px 12px;
    }
    
    /* Settings menu lang item */
    .settings-menu-lang {
        padding: 0 15px;
        width: calc(100% - 20px);
    }
    
    .settings-menu-lang img{width: 20px;height: 20px;}
    
    .settings-menu-lang .lang-select-dropdown {
        left: 70%;
        transform: translateX(-50%);
        padding: 10px 15px;
        border-radius: 16px;
        bottom: unset;
        top: calc(100% + 4px);
    }

    .settings-menu-lang .lang-select-dropdown .lang-select-option{
        padding: 0 15px;
        font-size: 14px;
        line-height: 30px;
    }


    /* ===== Pricing Modal ===== */
    .pricing-modal-toggle {
        margin: 0 auto 20px;
    }
    
    .pricing-toggle-btn {
        padding: 6px 28px;
        font-size: 14px;
    }
    
    .pricing-toggle-badge {
        font-size: 10px;
    }
    
    .pricing-plan-card {
        padding: 15px 20px;
    }
    
    .pricing-popular-badge {
        font-size: 11px;
    }
    
    .pricing-plan-name {
        font-size: 18px;
    }
    
    .pricing-plan-desc {
        font-size: 13px;
    }
    
    .pricing-plan-divider {
        margin: 12px 0;
    }
    
    .pricing-plan-price {
        font-size: 28px;
    }
    
    .pricing-plan-price .price-period {
        font-size: 13px;
    }
    
    .pricing-plan-features {
        gap: 5px;
        margin: 5px 0 16px;
    }
    
    .pricing-plan-features li {
        font-size: 12px;
        gap: 6px;
    }
    
    .pricing-plan-features li::before {
        font-size: 11px;
    }
    
    .pricing-plan-btn {
        font-size: 13px;
    }

    .settings-menu-lang .lang-select-dropdown {
        bottom: calc(100% + 4px);
        top: unset;
    }
}

@media (max-width: 1024px) {
    .content-area {
        margin-right: 15px;
    }

    /* ===== Download Confirm Popup ===== */
    .lineart-confirm-body { height: 360px; }
    .lineart-right-panel { width: 210px; }
}

@media (max-width: 980px) {
    /* ===== Pricing Modal ===== */
    .pricing-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 데스크탑 span 룰 해제 — 2-col에선 카드 자연 배치.
       Studio는 한 줄 전체 차지(2-col 사이에 끼지 않고 강조). */
    .pricing-plan-card[data-tier="basic"],
    .pricing-plan-card[data-tier="pro"],
    .pricing-plan-card[data-tier="mini"],
    .pricing-plan-card[data-tier="credits"] { grid-column: auto; }
    .pricing-plan-card[data-tier="studio"]  { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    body { --right-panel-min-width: 110; }

    .header-nav {
        gap: 10px;
    }

    #hoverGauge {
        width: 70px;
        height: 7px;
        border-radius: 5px;
    }
    
    .nav-lang{position:relative;gap: 0;padding: 0px 8px;height: 35px;}
    
    .lang-select-btn {
        font-size: 0;
        width: 35px;
        height: 35px;
        position:absolute;
        line-height: 35px;
        left:0;
        top:0;
        display: block;
    }

    .settings-menu-lang .lang-custom-select{
        flex-direction: column;
        align-items: center;
        gap: 2px;
        width: auto;
        padding: 0;
        margin: 0;
    }

    .settings-menu-lang .lang-select-btn{font-size:12px;position:static;width: unset;height: unset;line-height: unset;text-align: center;}
    
    #tierBadge {
        font-size: 16px;
    }

    .header-nav-link {
        font-size: 12px;
    }

    .upgrade-btn {
        font-size: 12px;
        padding: 0 10px;
    }

    #creditsDisplay {
        font-size: 12px;
    }
    .gauge-cost { font-size: 10px; }

    .layer-item {
        font-size: 12px;
    }

    .layer-item-actions-inner {
        gap: 5px;
        padding-left: 4px;
    }

    .layer-item-actions button {
        width: 24px;
        height: 24px;
    }

    .layer-item-actions button svg {
        width: 14px;
        height: 14px;
    }

    .history-item {
        font-size: 12px;
    }

    .header-right {
        gap: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .panel-tabs {
        height:35px;
        gap: 10px;
    }

    .panel-tabs .tab {
        line-height: 32px;
    }

    /* ===== Settings Popup Responsive ===== */
    /* .settings-menu {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #3d3d3d;
        padding: 4px 0;
    }
    .settings-menu-item {
        flex: 1;
        min-width: max-content;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }
    .settings-menu-item.active {
        border-left: none;
        border-bottom: 3px solid var(--color-primary);
        padding-left: 12px;
    }
    .settings-menu-divider {
        display: none;
    }
    .settings-panel {
        padding: 16px;
    } */


    /* ===== Settings Popup ===== */
    .settings-popup {
        min-width: unset;
        max-width: unset;
        min-height: 440px;
        border-radius: 10px;
        width: 95%;
    }
    
    .settings-popup-content {
        padding: 10px;
        flex-direction: column;
    }
    
    /* Settings Left Menu */
    .settings-menu {
        min-width: unset;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        border: unset;
        gap: 10px;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #2e2e2e;
    }
    
    .settings-menu-item {
        padding: 10px 10px;
        font-size: 12px;
        line-height: unset;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        text-align: center;
        border-radius: 6px;
        min-width: 70px;
    }
    
    .settings-menu-item img{
        width: 20px;
        height: 20px;
    }
    
    .settings-menu-bottom {margin-top: 0;padding-top: 0;display: flex;flex-direction: row;border-top: unset;flex-wrap: nowrap;justify-content: flex-end;align-items: center;margin-left: 0;gap: 10px;/* width: 100%; */}
    
    /* Settings Right Panel */
    .settings-panel {
        padding: 20px 10px 0;
    }
    
    .settings-tab-content h4 {
        font-size: 14px;
        margin: 0 0 5px 0;
    }
    
    .settings-tab-content h4:not(:first-child) {
        margin-top: 17px;
    }
    
    .settings-tab-content .settings-row:not(:nth-child(2)){
        padding-bottom: 8px;
    }
    
    #settingsTabSubscription .settings-row{
        padding-bottom: 8px;
    }
    
    .settings-row {
        padding: 0 0 20px;
    }
    
    .settings-label {
        font-size: 12px;
    }
    
    .settings-value {
        font-size: 12px;
    }
    
    .settings-description {
        font-size: 12px;
        margin-bottom: 20px;
        padding-bottom: 17px;
    }
    
    .settings-tab-actions {
        margin-top: 7px;
        padding-top: 20px;
    }
    
    .settings-tab-actions .settings-upgrade-btn {line-height: 30px;font-size: 12px;}
    
    /* Redeem */
    .redeem-form {
        gap: 10px;
    }
    
    .redeem-input {
        padding: 0 15px;
        font-size: 12px;
        line-height: 30px;
    }
    
    .redeem-input::placeholder {
        color: #666;
    }
    
    .redeem-btn.btn {
        font-size: 12px;
        line-height: 30px;
    }
    
    .redeem-btn.btn:hover {
        color:#fff;
        background-color: #347fd4;
    }
    
    .redeem-result {
        padding: 10px 10px 10px 0;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.4;
    }
    
    /* Help */
    .help-section {
        line-height: 35px;
    }
    
    .help-section:nth-child(2) {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    .help-section .settings-description{top: 47px;font-size: 10px;}
    
    .help-section-subtitle {
        font-size: 12px;
        line-height: 30px;
    }
    
    .help-action-btn {
        gap: 8px;
        padding: 0 15px;
        font-size: 12px;
        min-width: 195px;
        line-height: 30px;
    }
    
    .help-action-btn svg{
        width:18px;
    }
    
    /* AI Chat */
    .ai-chat-box {
        border-radius: 10px;
    }
    
    .ai-chat-intro {
        padding: 12px 15px;
        border-radius: 10px 10px 0 0;
    }
    
    .ai-chat-intro p {}
    
    .ai-chat-messages {
        padding: 58px 15px 48px;
        max-height: 265px;
    }
    
    .ai-chat-msg {
        padding: 5px 0;
        font-size: 12px;
        line-height: 1.4;
        max-width: 90%;
    }
    
    .ai-chat-msg.ai + .user{margin-top: 15px;}
    
    .ai-chat-input-row {
        line-height: 35px;
    }
    
    .ai-chat-input {
        padding: 0 15px;
        font-size: 12px;
    }
    
    .ai-chat-send {
        /* padding: 6px 10px; */
    }
        
    /* Settings menu lang item */
    .settings-menu-lang {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        border-radius: 6px;
        min-width: 70px;
        padding: 10px;
        line-height: unset;
    }
    
    .settings-menu-lang img{width: 20px;height: 20px;}
    
    .settings-menu-lang .lang-select-dropdown {
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 15px;
        border-radius: 16px;
        bottom: unset;
        top: calc(100% + 4px);
    }
    
    .settings-menu-lang .lang-select-dropdown .lang-select-option{
        padding: 0 15px;
        font-size: 14px;
        line-height: 30px;
    }

    /* ===== Download Confirm Popup ===== */
    .lineart-confirm-body { height: 300px; }
    .lineart-right-panel { width: 180px; }

    .layer-icon-tooltip {
        font-size: 11px;
        padding: 5px 10px;
    }

}


@media (max-width: 640px) {
    /* ===== Pricing Modal ===== */
    .pricing-modal-body {
        padding: 15px 15px 15px;
    }
    
    .pricing-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    
    .pricing-modal-toggle {
        margin: 0 auto 20px;
    }
    
    .pricing-toggle-btn {
        padding: 5px 16px;
        font-size: 13px;
    }
    
    .pricing-toggle-badge {
        font-size: 10px;
    }
    
    .pricing-plan-card {
        padding: 15px 20px;
    }
    
    .pricing-popular-badge {
        font-size: 11px;
    }
    
    .pricing-plan-name {
        font-size: 16px;
    }
    
    .pricing-plan-desc {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .pricing-plan-divider {
        margin: 12px 0;
    }
    
    .pricing-plan-price {
        font-size: 26px;
    }
    
    .pricing-plan-price .price-period {
        font-size: 12px;
    }
    
    .pricing-plan-features {
        gap: 5px;
        margin: 3px 0 15px;
    }
    
    .pricing-plan-features li {
        font-size: 11px;
        gap: 6px;
    }
    
    .pricing-plan-features li::before {
        font-size: 11px;
    }
    
    .pricing-plan-btn {
        font-size: 12px;
        line-height: 30px;
    }

    .layer-icon-tooltip {
        font-size: 10px;
    }
}


@media (max-width: 600px) {
    body { --right-panel-min-width: 90; }

    .header-logo img {
        width: 80px;
    }

    #tierBadge {
        font-size: 15px;
    }

    .header-nav-link {
        font-size: 11px;
    }

    .upgrade-btn {
        font-size: 11px;
        padding: 0 8px;
    }

    .layer-item {
        font-size: 11px;
    }

    .layer-item-actions-inner {
        gap: 4px;
        padding-left: 3px;
    }

    .layer-item-actions button {
        width: 22px;
        height: 22px;
    }

    .layer-item-actions button svg {
        width: 12px;
        height: 12px;
    }

    .history-item {
        font-size: 11px;
    }

    .nav-lang {
        height: 30px;
        padding: 0;
        width: 30px;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .lang-select-btn {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .settings-btn {
        width: 30px;
        height: 30px;
    }    

    .sidebar-tooltip-rich {
        padding: 10px 10px;
        gap: 1px;
    }
    
    .tooltip-title {
        font-size: 13px;
        margin-bottom: 2px;
    }
    
    .tooltip-row {
        font-size: 10px;
    }
        
    .tooltip-hint {
        font-size: 10px;
    }

    .panel-tabs .tab {
        line-height: 32px;
        font-size:13px;
        min-width:80px
    }

    .tab-spacer {
        flex: 1;
        align-self: stretch;
    }
    
    .panel-header {
        padding: 0;
        height: 35px;
        min-height: 35px;
        flex-direction: row-reverse;
    }
    
    .panel-header h3{display:none;}

    .tab-action-btn {
        margin-bottom: 1px;
        line-height: 30px;
    }

    #hoverGauge {
        width: 60px;
        height: 6px;
    }

    #hoverGaugeFill::after {
        height: 8px;
    }
    
    #creditsDisplay {
        font-size: 11px;
    }
    .gauge-cost { font-size: 9px; }

    #statusBar {
        font-size: 12px;
        line-height: 22px;
    }

    .btn-small {
        padding: 0 10px;
        font-size: 12px;
    }


    .list-tab {
        font-size: 13px;
    }

    .confirm-popup {
        width: 340px;
    }
    
    .confirm-popup-body p {
        font-size: 12px;
    }

    .confirm-popup-body p + p{
        margin-top: 6px !important;
    }
    
    .confirm-cancel-btn,
    .confirm-execute-btn{
        font-size: 12px;
        line-height:35px;
    }

    /* ===== Download Confirm Popup ===== */
    .download-png-all-btn,
    .download-execute-btn { font-size: 12px; line-height: 35px; }

    .settings-panel {
        padding: 20px 0 0;
    }
    
    .redeem-form {
        gap: 0px;
        flex-direction: column;
    }
    
    .redeem-input {
        text-align:center;
    }
    
    .redeem-btn.btn {
        margin-top:10px
    }
    
}


@media (max-width: 550px) {
    /* ===== Pricing Modal ===== */
    .pricing-plans-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .header-nav { display: none; }
}

@media (max-width: 359px) {
    body{min-width:360px;}
}

/* ===== Vertical layout mode (follows app content-area.vertical) ===== */
body.app-vertical .download-confirm-popup {
    max-width: 92vw;
}

body.app-vertical .lineart-confirm-body {
    flex-direction: column;
    height: auto;
    flex: 1;
    min-height: 0;
}

body.app-vertical .lineart-preview-panel {
    flex: 2;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid #222;
}

body.app-vertical .lineart-right-panel {
    width: 100%;
    flex: 1;
    min-height: 0;
    flex-direction: row;
}

body.app-vertical .lineart-image-panel {
    border-bottom: none;
    border-right: 1px solid #222;
}

body.app-vertical .lineart-layer-panel {
    flex: 1;
    min-width: 0;
}
/* Marketing consent toggle switch (settings account tab) */
.consent-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.consent-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.consent-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--color-border, #ccc);
    border-radius: 22px;
    transition: background .2s;
}
.consent-toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.consent-toggle input:checked + .consent-toggle-slider {
    background: var(--color-primary, #6c5ce7);
}
.consent-toggle input:checked + .consent-toggle-slider::before {
    transform: translateX(18px);
}
.consent-toggle input:focus-visible + .consent-toggle-slider {
    outline: 2px solid var(--color-primary, #6c5ce7);
    outline-offset: 2px;
}