/* ===========================================================================
   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(40px, 6vw, 90px);
  background:none;
  border:0;
}