/* =========================================================================== asap 메인 리뉴얼 : 목업 CSS 에 없는 요소만 추가 (2026-10-22) - 목업이 React 로만 만들던 부분 중, 번들 CSS 에 스타일이 없는 요소만 여기서 정의한다. - 접두사 asap-np- (asap new panel) 로 고정해 기존 default.css 와 충돌 방지. =========================================================================== */ /* 전체메뉴 패널 : 2026-10-23 부터 목업과 동일한 Popover 패널(.asap-search-panel)로 바뀌었다. 예전 사이드 패널 전용 규칙은 모두 제거 - 패널 스타일은 main_new.css 에 이미 들어있다. */ /* 해외센터 주소: 2026-10-23 부터 목업과 동일한 중앙 모달(shadcn Dialog)로 바뀌었다. 팝오버 전용 규칙은 모두 제거 - 모달은 main_new.css 의 Tailwind 유틸만 쓴다. */ /* ---------- 모바일 로그인 모달 (767px 이하에서 .asap-desktop-login 이 숨을 때) ---------- */ .asap-ui .asap-np-modal{position:fixed;inset:0;z-index:130;background:rgba(11,31,56,.5); display:flex;align-items:center;justify-content:center;padding:16px; font-family:Pretendard,Arial,sans-serif} .asap-ui .asap-np-modal-box{position:relative;background:#fff;border-radius:20px; width:calc(100% - 32px);max-width:370px;max-height:92dvh;overflow-y:auto; box-shadow:0 18px 44px rgba(11,31,56,.28)} .asap-ui .asap-np-modal-close{position:absolute;top:12px;right:12px;z-index:2; width:30px;height:30px;border:0;border-radius:999px;background:#f1f6fa; color:#33465d;font-size:14px;line-height:1;cursor:pointer} .asap-ui .asap-np-modal-close:hover{background:#e3edf5} /* 모달 안에서는 데스크톱 전용 숨김 규칙을 무시해야 로그인 폼이 보인다 */ .asap-ui .asap-np-modal .asap-login{display:block} /* ---------- 로그인 후 회원정보 카드 (2026-10-22) ---------- */ .asap-ui .asap-np-member .asap-np-member-hello{margin:0 0 12px;font-size:14px;color:#33465d} .asap-ui .asap-np-member .asap-np-member-hello strong{color:#0b1f38;font-weight:700} .asap-ui .asap-np-deposit{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:6px} .asap-ui .asap-np-deposit li{display:flex;align-items:center;justify-content:space-between;gap:10px; background:#f8fafc;border:1px solid #e1e7ee;border-radius:12px;padding:8px 12px} .asap-ui .asap-np-deposit li span{font-size:12px;color:#7286a0;white-space:nowrap} .asap-ui .asap-np-deposit li b{font-size:13px;font-weight:700;color:#23466D;text-align:right;word-break:break-all} .asap-ui .asap-np-member-links{display:grid;grid-template-columns:1fr 1fr;gap:7px} .asap-ui .asap-np-member-links a{display:flex;align-items:center;justify-content:center;min-height:36px; border-radius:11px;font-size:14px;font-weight:700;text-decoration:none; background:#34455f;color:#fff;transition:background-color .15s} .asap-ui .asap-np-member-links a:last-child{background:#eef3f8;color:#23466D} .asap-ui .asap-np-member-links a:hover{filter:brightness(1.05)} .asap-ui .asap-np-member .asap-login-links{grid-template-columns:1fr 1fr} .asap-ui .asap-np-member .asap-login-links a{color:#8793a5;text-decoration:none} .asap-ui .asap-np-member .asap-login-links a:first-child{border-right:1px solid #e6ebf1} /* 로그인 상태에서는 모바일에서도 회원정보 카드를 보여준다 (목업 CSS 의 @media(max-width:767px){.asap-desktop-login{display:none}} 를 상쇄) */ @media (max-width:767px){ .asap-ui .asap-desktop-login.asap-np-member-visible{display:block} .asap-ui .asap-np-member-visible .asap-np-member{margin-bottom:14px} } /* 1차 메뉴와 2차 메뉴(레이어) 사이 8px 틈을 hover 영역으로 덮는다. (목업 CSS 의 .asap-guide-dropdown{margin-top:8px} 때문에 생기는 빈 구간) */ .asap-ui .asap-guide-dropdown:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* 2026-10-23 : 푸터 "카카오톡 상담" 채널 아이콘 목업 CSS 는 /brand/kakao-channel-icons.png(스프라이트)를 쓰는데 사이트에 없는 경로라 노란 사각형만 보였다 -> 실제 채널 아이콘 이미지로 교체. */ .asap-ui .asap-footer-qr-icon{ background:#ffdf00 url(/theme/basic/img/bottom_new_ch.jpg) center/cover no-repeat; } /* ---------- 2026-10-28 : 통관 스케줄 모달 인라인 편집 UI ---------- 목업 현재 번들(index.Crf_u9oF.css)에만 있던 .customs-inline-* 규칙을 그대로 가져왔다. (우리 main_new.css 는 2026-10-22 번들이라 이 클래스들이 없다 / 42개 출현 전부 추출) */ .asap-ui .customs-inline-toolbar{justify-content:space-between;align-items:center;gap:12px;padding:18px 0;display:flex} .asap-ui .customs-inline-toolbar>div:first-child{gap:5px;display:grid} .asap-ui .customs-inline-toolbar strong{color:#284e73;font-size:13px} .asap-ui .customs-inline-toolbar small{color:#879aae;font-size:10px} .asap-ui .customs-inline-toolbar button,.asap-ui .customs-inline-period>button{color:#59718b;background:#fff;border:1px solid #d9e5ef;border-radius:6px;justify-content:center;align-items:center;gap:5px;padding:8px 12px;font-size:12px;display:inline-flex} .asap-ui .customs-inline-toolbar .is-primary{color:#fff;background:#234e78;border-color:#234e78} .asap-ui .customs-inline-actions{gap:6px;display:flex} .asap-ui .customs-inline-period{color:#738ba2;background:#f4f8fc;border-radius:8px;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;padding:12px;font-size:11px;display:flex} .asap-ui .customs-inline-period label{align-items:center;gap:8px;display:flex} .asap-ui .customs-inline-period input{color:#315570;background:#fff;border:1px solid #d7e2ef;border-radius:4px;padding:5px} .asap-ui .customs-inline-table{table-layout:fixed} .asap-ui .customs-inline-table td{white-space:normal} .asap-ui .customs-inline-table textarea{resize:vertical;color:#294e72;background:#fff;border:1px solid #c8dcee;border-radius:5px;width:100%;min-width:0;min-height:85px;padding:7px 4px;font-size:11px;line-height:1.6;display:block} .asap-ui .customs-inline-table textarea::placeholder{color:#b1bdc9;font-size:9px} .asap-ui .customs-inline-value{white-space:pre-wrap;overflow-wrap:anywhere;color:#315d8b;font-size:12px;line-height:1.7;display:block} .asap-ui .customs-inline-value.is-air{color:#d58827} .asap-ui .customs-inline-notice{resize:vertical;border:1px solid #eabfbd;border-radius:7px;width:100%;min-height:85px;margin-top:12px;padding:12px;font-size:12px;line-height:1.7;display:block} .asap-ui .customs-inline-feedback{color:#4b7d68;margin-top:12px;font-size:12px;line-height:1.7} .asap-ui .asap-customs-dialog .customs-inline-toolbar{align-items:center;gap:16px;min-width:0;margin:0 28px;padding:16px 0 18px} .asap-ui .asap-customs-dialog .customs-inline-toolbar>div:first-child{flex:1;min-width:0} .asap-ui .asap-customs-dialog .customs-inline-toolbar>button,.asap-ui .asap-customs-dialog .customs-inline-actions{flex-shrink:0} .asap-ui .asap-customs-dialog .customs-inline-period{margin:0 28px 14px} .asap-ui .asap-customs-dialog .customs-inline-feedback{margin:12px 28px 0} .asap-ui .customs-inline-table textarea,.asap-ui .customs-inline-table .customs-inline-value{box-sizing:border-box;letter-spacing:normal;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:4;border:1px solid #0000;width:100%;margin:0;padding:7px 4px;font-family:inherit;font-size:11px;font-weight:400;line-height:1.6} .asap-ui .customs-inline-table textarea{border-color:#c8dcee} .asap-ui .customs-inline-value .customs-inline-date{font-size:inherit;color:inherit;font-weight:750} @media (max-width:600px){ .asap-ui .customs-inline-toolbar{align-items:flex-start} .asap-ui .customs-inline-toolbar strong{font-size:11px} .asap-ui .customs-inline-toolbar button{padding:7px 8px;font-size:10px} .asap-ui .customs-inline-toolbar small{font-size:9px} .asap-ui .customs-inline-table{min-width:790px} .asap-ui .customs-inline-period>span{width:100%;line-height:1.6} } @media (max-width:600px){ .asap-ui .asap-customs-dialog .customs-inline-toolbar{flex-wrap:wrap;gap:10px;margin:0 18px;padding:13px 0 15px} .asap-ui .asap-customs-dialog .customs-inline-toolbar strong{font-size:11px;line-height:1.5} .asap-ui .asap-customs-dialog .customs-inline-toolbar small{font-size:9px;line-height:1.5} .asap-ui .asap-customs-dialog .customs-inline-period{margin:0 18px 12px} .asap-ui .asap-customs-dialog .customs-inline-feedback{margin:12px 18px 0} } /* 2026-10-28 : 옛 푸터(tail.php)에 있던 관세법 준수 문구를 새 푸터로 옮김 (법적 고지라 누락 불가) */ .asap-ui .asap-footer-notice{ margin:14px auto 0; max-width:900px; padding:0 4px; font-size:11px; line-height:1.7; color:#8698ab; word-break:keep-all; } /* 2026-10-28 : 이용안내 메뉴는 푸터를 빼므로(tail.php $asap_no_footer) 하단 여백을 준다. ※ 이 파일은 전체가 `.asap-ui` 스코프다. 여백 div 는 자기 자신이 .asap-ui 를 갖고 있으므로 자손(`.asap-ui .x`)이 아니라 **같은 요소**(`.asap-ui.x`) 선택자로 써야 한다. ※ .asap-ui 는 background:var(--background)(#f4f7fb) 를 갖고 있어 회색 띠가 생긴다 -> 배경 해제. */ .asap-ui.asap-np-foot-space{ height:clamp(20px, 3vw, 45px); /* 2026-10-28 사용자 지시 : 절반으로 축소(40~90 -> 20~45) */ background:none; border:0; } /* ------------------------------------------------------------------ 롤링배너 뒤 연한 푸른색 제거 (2026-10-28 사용자 지시) 원인 : 목업은 본문 래퍼에 Tailwind `bg-white` 를 달아 흰 배경을 깔았는데, main_new.css -> main_new_scoped.css 스코프 변환이 이것을 `.asap-ui .bg-white` (= 자손) 로만 만들어서 래퍼 '자신'에게는 안 먹었다. 그래서 `.asap-ui{background:var(--background)}` = #f4f7fb 가 그대로 보였고, 배너 섹션 `.asap-main` 은 자기 배경이 없어 그 연한 푸른색이 그대로 노출됐다. 조치 : 같은 요소 선택자로 bg-white 를 되살린다(목업과 동일한 흰 배경). 헤더(.asap-np-top)·푸터(.asap-np-bottom) 래퍼에도 걸리지만 둘 다 직계 자식이 이미 흰색/#f9fbfe 를 칠하고 있어 화면 변화는 없다. ------------------------------------------------------------------ */ .asap-ui.bg-white{background-color:#fff} /* ------------------------------------------------------------------ .asap-ui 안 폼요소 글꼴 복구 (2026-10-28 : 헤더 글자가 굴림/돋움으로 보이던 문제) 원인 = CSS 캐스케이드 '레이어' 우선순위. - main_new_scoped.css 의 Tailwind 규칙은 전부 @layer 안에 있다. 프리플라이트 `.asap-ui button,input,select,textarea{font:inherit}` → @layer base 유틸리티 `.asap-ui .text-sm{font-size:...}` → @layer utilities - default.css 는 레이어 밖(implicit outer layer) 이다. - 레이어 밖 선언은 **특이성과 무관하게** 레이어 안 선언을 항상 이긴다. → default.css:529 `input,button{margin:0;padding:0;font-family:dotum;font-size:1em}` 과 :532 `textarea,select{font-family:dotum;font-size:1em}` 가 .asap-ui 안 폼요소까지 돋움으로 덮어버렸다. 새 헤더의 카테고리 메뉴(이용안내/구매대행/…)·센터주소·전체메뉴가 전부