@import url('https://fonts.googleapis.com/css2?family=Asta+Sans:wght@300..800&family=Chiron+GoRound+TC:wght@200..900&family=Nanum+Gothic&display=swap');

body {font-family:"Nanum Gothic", sans-serif; font-style:normal; font-weight:400; height:100svh; margin:0 auto; padding:0rem; width:100%;}
html {
    font-size:16px;
    height:100%;
}

/* login */
#login_login {margin:0 auto; margin-top:15rem; width:fit-content;}

/* main layout */
.main-layout {margin:auto; max-width:70rem; width:90%;}
.main-layout nav {align-items:center; background-color:#315f99; color:white; display:flex; justify-content:space-between; gap:0.75rem; padding:1rem; margin-bottom:1.5rem; box-sizing:border-box; min-width:0;}
.main-layout nav > div:first-child {display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; min-width:0;}
.main-layout nav > div:last-child {min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#main_menus {border-color:white; color:#333333; padding:0.3rem; width:min(15rem, 100%);}
#main_menus:focus {outline:2px solid white; outline-offset:2px;}
.main-layout main {max-width:100%; overflow-x:auto;}

@media (max-width: 480px) {
    .main-layout nav {align-items:flex-start; flex-direction:column;}
    .data-table {table-layout:auto; width:max-content !important; min-width:40rem !important;}
    .data-table th, .data-table td {overflow-wrap:normal; word-break:keep-all; white-space:nowrap;}
    .pricing-table {table-layout:auto; width:max-content !important; min-width:70rem !important;}
    .pricing-table th, .pricing-table td {overflow-wrap:normal; word-break:keep-all; white-space:nowrap;}
    .data-table input[type="text"], .pricing-table input[type="text"], .num-input {min-width:6rem !important; width:100% !important;}
    .pricing-table-wrap {max-width:100%; overflow-x:auto;}
}

/* advertisements */
#main_advertisement_container {display:flex; flex-direction:column; gap:1.5rem; width:100%;}

.ad_item {display:flex; flex-direction:column; gap:0.5rem; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; padding:1rem;}

.ad_item_header {display:flex; justify-content:space-between; align-items:center; margin-bottom:0.25rem;}
.ad_item_label {font-weight:bold; font-size:0.9rem; color:#444;}

/* 3:1 이미지 래퍼 */
.ad_img_wrap {position:relative; width:100%; aspect-ratio:3/1; background:#e0e0e0; border-radius:4px; overflow:hidden; cursor:pointer;}
.ad_img_wrap img {width:100%; height:100%; object-fit:cover; display:block;}
.ad_img_overlay {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.45); color:white;
    opacity:0; transition:opacity 0.2s;
    font-size:1rem; gap:0.3rem; pointer-events:none;
}
.ad_img_wrap:hover .ad_img_overlay {opacity:1;}
.ad_img_empty {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#999; font-size:0.9rem; gap:0.4rem;
}
.ad_img_empty-icon {font-size:2rem; line-height:1;}

.ad_url_row {display:flex; align-items:center; gap:0.5rem;}
.ad_url_row label {font-size:0.82rem; color:#666; white-space:nowrap;}
.ad_url_row input[type="url"] {flex:1; padding:0.3rem 0.5rem; border:1px solid #ccc; border-radius:4px; font-size:0.9rem; box-sizing:border-box;}

.ad_remove_btn {background:#e55; color:white; border:none; padding:0.3rem 0.75rem; cursor:pointer; border-radius:4px; font-size:0.85rem;}
.ad_remove_btn:hover {background:#c33;}

.ad_controls {display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:flex-end; margin-top:1rem;}
.ad_controls button {padding:0.5rem 1.2rem; border:none; border-radius:5px; cursor:pointer; font-size:0.9rem; font-family:inherit; word-break:keep-all; white-space:normal;}
#ad_add_btn {background:#eee; color:#333;}
#ad_add_btn:hover:not(:disabled) {background:#ddd;}
#ad_add_btn:disabled {opacity:0.4; cursor:not-allowed;}
#main_advertisement_save {background:cornflowerblue; color:white; font-weight:bold;}
#main_advertisement_save:hover {background:#4a7cd6;}
#main_advertisement_save:disabled {opacity:0.5; cursor:not-allowed;}

.ad_hint {text-align:right; color:#999; font-size:0.8rem; margin-top:0.25rem;}

/* ── Tabs ── */
.tab-group {display:flex; gap:0; border-bottom:2px solid #ddd; margin-bottom:1rem; flex-wrap:wrap;}
.tab {padding:0.5rem 1rem; cursor:pointer; border-bottom:2px solid transparent; font-size:0.85rem; color:#666;}
.tab.active {border-bottom-color:cornflowerblue; color:cornflowerblue; font-weight:bold;}
.tab:hover {background:#f5f5f5;}

/* ── Data tables ── */
.data-table {border-collapse:collapse; width:100%;}
.data-table th {background:#102C57; color:white; padding:8px 10px; border:1px solid #0a1e3d; text-align:center; font-size:11px; white-space:nowrap;}
.data-table td {padding:6px 9px; border:1px solid #ccc; text-align:center; vertical-align:middle;}
.data-table tr:nth-child(even) td {filter:brightness(0.97);}
.data-table input[type="text"] {border:1px solid #ddd; padding:3px 6px; font-size:12px; text-align:center; width:100px; box-sizing:border-box;}
.num-input {text-align:right !important; width:100% !important; min-width:65px !important; padding-right:4px !important;}

/* ── Pricing table (Excel-like) ── */
.pricing-table-wrap {overflow-x:auto; margin-bottom:0.5rem;}
.pricing-table {border-collapse:collapse; font-size:11px; min-width:1400px; border:2px solid #888;}
.pricing-table th {background:#102C57; color:white; padding:3px 6px; border:1px solid #555; text-align:center; font-size:10px; white-space:nowrap; line-height:1.3;}
.pricing-table td {padding:0; border:1px solid #bbb; text-align:center; vertical-align:middle; white-space:nowrap; height:24px;}
.pricing-table tr:nth-child(even) td {filter:brightness(0.97);}
.pricing-table input[type="text"] {border:none; padding:2px 4px; font-size:11px; text-align:center; width:100%; height:100%; box-sizing:border-box; background:transparent; outline:none;}
.pricing-table input[type="text"]:focus {background:rgba(100,149,237,0.12); outline:2px solid cornflowerblue; outline-offset:-2px;}
.pricing-table input[type="checkbox"] {margin:0;}
.pricing-table .col-text {min-width:60px;}
.pricing-table .col-num {min-width:65px;}

/* ── Section colors ── */
.section-basic   {background:#e8f0fe !important;}
.section-display {background:#e0f2f1 !important;}
.section-subsidy {background:#e8f5e9 !important;}
.section-sum     {background:#d7f5e3 !important;}
.section-net     {background:#c8f0d8 !important;}
.section-rebate  {background:#fce4ec !important;}
.section-adjust  {background:#f3e5f5 !important;}
.section-plan    {background:#fff3e0 !important;}
.section-addon   {background:#fff8e1 !important;}

/* ── Header group colors ── */
.header-basic   {background:#1a3a6b !important;}
.header-display {background:#00695c !important;}
.header-subsidy {background:#2e7d32 !important;}
.header-sum     {background:#1b5e20 !important;}
.header-net     {background:#0d3b18 !important;}
.header-rebate  {background:#880e4f !important;}
.header-adjust  {background:#6a0dad !important;}
.header-plan    {background:#e65100 !important;}
.header-addon   {background:#b8860b !important;}

/* ── Misc ── */
.badge-pop {background:#ff6d00; color:#fff; font-size:9px; padding:1px 5px; border-radius:3px;}
.color-dots {display:flex; gap:3px; justify-content:center; align-items:center;}
.color-dot {width:14px; height:14px; border-radius:50%; border:1px solid #bbb; display:inline-block;}
.total-col {font-weight:bold; color:#1565c0;}
.adj-type-select {font-size:10px; padding:1px;}

/* ── Buttons ── */
.btn-add {background:#eee; color:#333; border:none; padding:0.4rem 1rem; border-radius:4px; cursor:pointer; font-size:0.85rem;}
.btn-add:hover {background:#ddd;}
.btn-save {background:cornflowerblue; color:white; font-weight:bold; border:none; padding:0.5rem 1.2rem; border-radius:5px; cursor:pointer; font-size:0.9rem;}
.btn-save:hover {background:#4a7cd6;}
.btn-save:disabled {opacity:0.5; cursor:not-allowed;}
.btn-edit {background:#2196f3; color:white; border:none; padding:0.3rem 0.7rem; border-radius:4px; cursor:pointer; font-size:0.8rem;}

/* ── Addons ── */
.addon-wrap {display:flex; gap:24px; flex-wrap:wrap;}
.addon-block table th {font-size:11px; padding:6px 10px;}
.addon-block table td {font-size:11px; padding:5px 9px;}
.carrier-label {font-weight:bold; font-size:12px; margin-bottom:4px; color:#333;}

/* ── Products ── */
.product-card {display:flex; align-items:center; gap:1rem; padding:0.8rem; border:1px solid #ddd; border-radius:8px; margin-bottom:0.5rem;}
.product-thumb {width:48px; aspect-ratio:400/530; height:auto; object-fit:contain; background:transparent; border-radius:0; border:1px solid #ddd;}
.product-thumb-empty {width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:6px; font-size:1.5rem;}
.product-info {flex:1;}
.product-actions {display:flex; gap:0.5rem;}

/* ── Modal ── */
.modal-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index:999;}
.modal {background:white; border-radius:10px; padding:1.5rem; min-width:350px; max-width:500px; width:90%;}
.modal-header {display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.modal-header h3 {margin:0;}
.modal-close {background:none; border:none; font-size:1.2rem; cursor:pointer;}
.modal-body {display:flex; flex-direction:column; gap:0.5rem;}
.modal-body label {font-size:0.85rem; color:#555; margin-top:0.3rem;}
.modal-body input[type="text"] {padding:0.4rem; border:1px solid #ccc; border-radius:4px;}
.modal-footer {display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;}
.color-row {display:flex; gap:0.5rem; align-items:center; margin-bottom:0.3rem;}

/* ── Excel Paste Area ── */
.paste-section {background:#f8f9ff; border:1px solid #d0d5e8; border-radius:8px; padding:0.8rem 1rem; margin-bottom:1rem;}
.paste-header {display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem;}
.paste-header strong {font-size:0.9rem; color:#333;}
.paste-subtitle {font-size:0.78rem; color:#888;}
.paste-col-hint {display:flex; flex-wrap:wrap; gap:4px; margin-bottom:0.4rem;}
.paste-col-tag {font-size:0.7rem; background:#e8eaf6; color:#3949ab; padding:1px 6px; border-radius:3px; white-space:nowrap;}
.paste-area {width:100%; min-height:60px; border:1px dashed #b0bec5; border-radius:4px; padding:0.5rem; font-size:0.8rem; font-family:inherit; resize:vertical; box-sizing:border-box; background:white;}
.paste-area:focus {border-color:cornflowerblue; outline:none; background:#fafbff;}
.paste-status {font-size:0.8rem; margin-top:0.3rem; min-height:1.2em;}
.paste-success {color:#2e7d32;}
.paste-error {color:#c62828;}

.error-box {background:#ffebee; border:1px solid #ef5350; color:#c62828; padding:0.8rem 1rem; border-radius:6px; font-size:0.85rem; margin:0.5rem 0;}

/* ── Orders ── */
.order-table {border-collapse:collapse; width:100%; font-size:0.85rem;}
.order-table th {background:#102C57; color:white; padding:8px 12px; border:1px solid #0a1e3d; text-align:center; font-size:0.78rem; white-space:nowrap;}
.order-table td {padding:8px 12px; border:1px solid #ddd; text-align:center; vertical-align:middle;}
.order-table tr:nth-child(even) td {background:#fafafa;}
.order-table tr:hover td {background:#e8f0fe; cursor:pointer;}

.status-badge {display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.72rem; font-weight:bold; white-space:nowrap;}

.order-detail-header {display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; padding-bottom:0.8rem; border-bottom:2px solid #ddd;}
.order-detail-header h2 {margin:0; font-size:1.1rem; color:#333;}

.detail-card {background:white; border:1px solid #e0e0e0; border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem;}
.detail-card h3 {margin:0 0 0.8rem 0; font-size:0.9rem; color:#1a3a6b; border-bottom:1px solid #eee; padding-bottom:0.5rem;}
.detail-row {display:flex; padding:0.35rem 0; font-size:0.85rem; border-bottom:1px solid #f5f5f5;}
.detail-row:last-child {border-bottom:none;}
.detail-label {width:120px; color:#666; flex-shrink:0;}
.detail-value {flex:1; color:#222; word-break:break-all;}

.timeline {list-style:none; padding:0; margin:0;}
.timeline li {position:relative; padding:0.6rem 0 0.6rem 1.6rem; border-left:2px solid #ddd; font-size:0.82rem;}
.timeline li::before {content:''; position:absolute; left:-5px; top:0.85rem; width:8px; height:8px; background:cornflowerblue; border-radius:50;}
.timeline li:last-child {border-left-color:transparent;}
.timeline-status {font-weight:bold; color:#333;}
.timeline-meta {color:#888; font-size:0.75rem; margin-top:0.15rem;}

.action-bar {display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1.2rem; padding-top:1rem; border-top:2px solid #eee;}
.btn-action {padding:0.5rem 1.2rem; border:none; border-radius:5px; cursor:pointer; font-size:0.85rem; font-weight:bold; font-family:inherit;}
.btn-action-primary {background:cornflowerblue; color:white;}
.btn-action-primary:hover {background:#4a7cd6;}
.btn-action-danger {background:#e55; color:white;}
.btn-action-danger:hover {background:#c33;}
.btn-action:disabled {opacity:0.5; cursor:not-allowed;}

.happycall-form {display:flex; flex-direction:column; gap:0.6rem; margin-top:0.8rem;}
.happycall-form select, .happycall-form textarea {padding:0.4rem 0.6rem; border:1px solid #ccc; border-radius:4px; font-family:inherit; font-size:0.85rem;}
.happycall-form textarea {min-height:60px; resize:vertical;}

.order-back-btn {background:none; border:none; color:cornflowerblue; cursor:pointer; font-size:0.9rem; padding:0; margin-bottom:0.8rem; font-family:inherit;}
.order-back-btn:hover {text-decoration:underline;}

.load-more-wrap {text-align:center; margin-top:1rem;}
.order-empty {text-align:center; padding:3rem; color:#999; font-size:0.9rem;}
/* ── Commerce operations ── */
.operations-settings, .commerce-form {display:flex; flex-direction:column; gap:var(--admin-space-3); max-width:560px;}
.operations-settings {background:var(--admin-color-surface); border:1px solid var(--admin-color-border-subtle); border-radius:var(--admin-radius-3); padding:var(--admin-space-4);}
.operations-settings h2 {font-size:var(--admin-type-section); margin:0;}
.commerce-field {display:flex; flex-direction:column; gap:var(--admin-space-1); font-size:var(--admin-type-label); font-weight:700;}
.commerce-field input {border:1px solid var(--admin-color-border); border-radius:var(--admin-radius-1); box-sizing:border-box; font:inherit; font-weight:400; min-height:36px; padding:var(--admin-space-2);}
.commerce-field:has(input[type="checkbox"]) {align-items:center; flex-direction:row;}
.commerce-notice {border:1px solid var(--admin-color-border-subtle); border-radius:var(--admin-radius-2); font-size:var(--admin-type-caption); padding:var(--admin-space-2);}
.commerce-notice-info {background:var(--admin-color-info-surface); color:var(--admin-color-info-strong);}
.commerce-notice-success {background:var(--admin-color-success-surface); color:var(--admin-color-success-strong);}
.commerce-notice-error, .commerce-notice-conflict {background:var(--admin-color-danger-surface); border-color:var(--admin-color-danger-border); color:var(--admin-color-danger-strong);}
.commerce-notice-actions {display:flex; flex-wrap:wrap; gap:var(--admin-space-2); margin-bottom:var(--admin-space-3);}
.operations-settings-actions {justify-content:flex-start; margin-top:0;}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline:2px solid var(--admin-color-accent); outline-offset:2px; box-shadow:0 0 0 3px var(--admin-color-focus-halo);}
:root {
    --admin-color-surface:#f9f9f9; --admin-color-border:#cccccc; --admin-color-border-subtle:#dddddd;
    --admin-color-info-surface:#e8f0fe; --admin-color-info-strong:#1565c0; --admin-color-success-surface:#e8f5e9;
    --admin-color-success-strong:#1b5e20; --admin-color-danger-surface:#ffebee; --admin-color-danger-border:#ef5350;
    --admin-color-danger-strong:#c62828; --admin-color-accent:#6495ed; --admin-color-focus-halo:rgba(100,149,237,0.28);
    --admin-space-1:4px; --admin-space-2:8px; --admin-space-3:12px; --admin-space-4:16px;
    --admin-radius-1:4px; --admin-radius-2:6px; --admin-radius-3:8px;
    --admin-type-section:16px; --admin-type-label:13px; --admin-type-caption:12px;
}