/* =========================================================
다해드림 리뉴얼 — Phase 1 베이스 (모바일 반응형 기초)
- 기존 css 다음에 로드되어 "덧씌우기"만 함 (원본 css 미수정)
- 문제 시 head.inc.php 에서 renew.css 줄만 빼면 즉시 원복
========================================================= */
/* 이미지/미디어 화면밖 넘침 방지 (전 화면 공통, 안전)
※ box-sizing 전역변경은 데스크탑 고정레이아웃을 틀 수 있어 모바일 전용으로 둠 (아래) */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
/* =========================================================
브랜드 주 색상 교체: 기존 녹색(#85af4b / #93b063) → 토스 블루(#3182f6)
(모바일·데스크탑 공통 — 순수 색상 치환, 레이아웃 영향 없음)
========================================================= */
/* 로고/배너 영역 배경 */
.logoArea { background: #3182f6 !important; }
/* 폼 라벨(필수/선택)의 녹색 글자 + 녹색 ✓ gif 아이콘 제거 → 토스 블루 글자 */
.appTable2 th.must, .appTable2 th.none,
.appTable3 th.must, .appTable3 th.none,
#ConArea h2.title {
color: #3182f6 !important; background-image: none !important;
}
/* 입력요소 녹색 테두리 → 토스 블루 (데스크탑; 모바일은 아래 폼규칙이 연회색으로 덮음) */
input.inputBox, select.selectbox, select.selectbox2, textarea.textareabox {
border-color: #3182f6 !important;
}
input.focus { border-color: #3182f6 !important; background: #f5f9ff !important; }
/* 토스 기본 폰트(Pretendard) — 전역(데스크탑 포함). 폼 컨트롤까지 적용 */
body, input, button, select, textarea, th, td, h1, h2, h3, h4 {
font-family: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
/* ---------------- 모바일 (<= 768px) ---------------- */
@media (max-width: 768px) {
*, *::before, *::after { box-sizing: border-box; } /* 모바일에서만 적용 */
html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.6; }
/* 페이지 전체 가로 스크롤 차단 (백스톱) */
html, body { overflow-x: hidden; }
/* 최상위 컨테이너 유동화 */
html, body { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
#wrap, #container, #header, #topmn, #wrapContent {
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
}
/* 가로 넘침 근절: 모든 하위 요소가 화면폭을 못 넘게 + 고정 최소폭 해제 (표 포함) */
#wrap * { max-width: 100% !important; min-width: 0 !important; }
#wrap { overflow-x: hidden; }
table { table-layout: fixed; } /* 넓은 표가 칸을 화면 안에 맞추도록 */
/* ★ 가로 넘침 진짜 원인: 공백없는 긴 텍스트/링크 → 강제 줄바꿈 */
a, p, span, li, dd, dt, td, th, h1, h2, h3, h4 {
overflow-wrap: anywhere; word-break: break-word;
}
a { white-space: normal !important; }
/* 로고(녹색) 영역: float 해제 + 로고 이미지 고정폭 제한 (★ 페이지 가로 넘침의 진짜 원인) */
.logoArea { min-width: 0 !important; overflow: hidden; text-align: center; }
.logo, .logomn { float: none !important; width: 100% !important; padding: 8px !important; text-align: center; }
.logoArea img, .logo img { max-width: 250px !important; width: auto !important; height: auto !important; }
/* ★ 메인 배너: 데스크탑용 절대배치 사이드 공지 div(margin-left:-200px)가
문서 밖으로 삐져나가 페이지 폭을 늘림 → 모바일에선 숨김 + relative 고정 */
.mainvisual { position: relative !important; }
.mainvisual > div[style*="absolute"], .mainvisual > .sideNav { display: none !important; }
/* 상단 메뉴: 폭 커서 잘리던 항목 → 줄바꿈 + 축소 */
#topmn { overflow: hidden; }
.mn { white-space: normal !important; padding: 6px !important; }
.mn li { display: inline-block !important; float: none !important;
width: auto !important; margin: 4px 2% !important; padding: 6px 0 !important; }
.mn li a { font-size: 0.95em !important; }
/* 메인 빠른버튼(나의 진행상황/질문답변/구매대행/배송대행): 한 줄 → 2×2 */
.shortMenu { width: 100% !important; }
.shortMenu ul { display: flex; flex-wrap: wrap; justify-content: center;
width: 100% !important; padding: 0 !important; margin: 0 auto !important; }
.shortMenu ul li { float: none !important; width: 45% !important;
margin: 1.5% !important; padding: 16px 4px !important;
box-sizing: border-box; border-radius: 12px; }
/* 본문 흔한 고정폭 박스 유동화 (★ default.css의 .appForm{float:left} 때문에
width:auto면 shrink-to-fit으로 좁아짐 → float 해제 + 풀너비 블록으로) */
.appForm { float: none !important; display: block !important;
width: 100% !important; max-width: 100% !important; }
.lineContents, .lineLeft, .lineRight { width: 100% !important; float: none !important; }
/* 인라인 style="width:970px"(푸터 등) 유동화 — !important 는 인라인도 덮음 */
[style*="970px"], [style*="width:970"] { width: 100% !important; max-width: 100% !important; }
/* 푸터: 고정 높이 해제 */
#footer { height: auto !important; padding-bottom: 24px; }
.logomn, .tmn { float: none !important; display: inline-block; }
/* 넓은 표는 표 영역 안에서만 가로 스크롤 */
#wrapContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* =========================================================
Phase 3 — 모바일 상단 GNB + 햄버거 드로어 (하단 탭바 대체)
========================================================= */
.mGnb, .mDrawer, .mDrawerBg, .mHero, .mTopNav { display: none; } /* 데스크탑: 모두 숨김 */
.mTabbar { display: none !important; } /* 구 하단 탭바 완전 제거 */
@media (max-width: 768px) {
/* 기존 상단 영역 숨김: 로고→GNB, 메뉴→드로어로 이동 */
#header, #topmn, .logoArea, .bg_topmenu, #top_mypage_menu { display: none !important; }
/* GNB 높이만큼 본문 내림 / 하단 여백 제거 */
body { padding-top: 52px !important; padding-bottom: 0 !important; }
/* ── 상단 GNB ── */
.mGnb {
display: flex; align-items: center; justify-content: space-between;
position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: 52px;
background: #fff; border-bottom: 1px solid #eef0f2; padding: 0 14px;
}
.mGnbLogo { font-size: 19px; font-weight: 800; color: #191f28;
text-decoration: none; letter-spacing: -.5px; line-height: 1; }
.mGnbLogo span { font-size: 12px; font-weight: 600; color: #8b95a1; margin-left: 6px; letter-spacing: 0; }
.mGnbBtn { background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.mGnbBtn span { display: block; width: 22px; height: 2px; background: #191f28;
margin: 4px 0; border-radius: 2px; }
/* ── 드로어 오버레이 ── */
.mDrawerBg {
display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9990;
background: rgba(0,0,0,.42); opacity: 0; visibility: hidden; transition: opacity .25s;
}
.mDrawer {
display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 9991;
width: 82%; max-width: 320px; background: #fff;
transform: translateX(100%); transition: transform .28s ease;
overflow-y: auto; -webkit-overflow-scrolling: touch;
box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
body.mDrawerOpen { overflow: hidden; }
body.mDrawerOpen .mDrawerBg { opacity: 1; visibility: visible; }
body.mDrawerOpen .mDrawer { transform: translateX(0); }
.mDrawerHead { display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid #f2f4f6; }
.mDrawerHead .t { font-size: 17px; font-weight: 800; color: #191f28; }
.mDrawerClose { background: none; border: 0; font-size: 20px; color: #8b95a1;
cursor: pointer; line-height: 1; padding: 4px; }
/* 인증 영역 */
.mDrawerAuth { padding: 16px 18px; background: #f5f9ff; border-bottom: 1px solid #f2f4f6; }
.mDrawerAuth .cash { font-size: 15px; color: #4e5968; margin-bottom: 12px; }
.mDrawerAuth .cash b { color: #3182f6; font-size: 17px; font-weight: 800; }
.mDrawerAuth a.btnCharge { display: inline-block; background: #3182f6; color: #fff;
font-weight: 700; border-radius: 8px; padding: 5px 11px; font-size: 13px;
text-decoration: none; margin-left: 4px; vertical-align: middle; }
.mDrawerAuth a.logout { display: block; text-align: center; padding: 12px; border-radius: 10px;
background: #f2f4f6; color: #4e5968; font-weight: 600; text-decoration: none; font-size: 14px; }
.mDrawerAuth .authRow { display: flex; gap: 8px; }
.mDrawerAuth .authRow a { flex: 1; text-align: center; padding: 13px; border-radius: 10px;
font-weight: 700; text-decoration: none; font-size: 15px; }
.mDrawerAuth .authRow a.login { background: #3182f6; color: #fff; }
.mDrawerAuth .authRow a.join { background: #eef3fb; color: #3182f6; }
/* 신청 CTA (인증영역과 메뉴 사이) */
.mDrawerCta { display: flex; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #f2f4f6; }
.mDrawerCta a { flex: 1 1 0; text-align: center; padding: 14px 0; border-radius: 12px;
font-size: 14px; font-weight: 700; text-decoration: none; box-sizing: border-box; }
.mDrawerCta a.ctaBuy { background: #3182f6; color: #fff; }
.mDrawerCta a.ctaShip { background: #eef3fb; color: #1b64da; }
.mDrawerCta a:active { opacity: .85; }
/* 자주보는 메뉴 (아이콘 위 + 텍스트 아래, 3열 그리드) */
.mDrawerFav { padding: 14px 18px; border-bottom: 1px solid #f2f4f6; }
.mDrawerFav .grpName { padding: 0 0 10px; font-size: 12px; font-weight: 700; color: #8b95a1; letter-spacing: .3px; }
.mDrawerFav .favGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mDrawerFav .favGrid a {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 13px 6px; background: #f7f8fa; border-radius: 12px; text-decoration: none;
font-size: 11.5px; font-weight: 600; line-height: 1.3; color: #4e5968; text-align: center; box-sizing: border-box;
}
.mDrawerFav .favGrid a .ic { font-size: 21px; line-height: 1; }
.mDrawerFav .favGrid a:active { background: #eef3fb; }
/* 메뉴 그룹 */
.mDrawerNav { padding: 4px 0 40px; }
.mDrawerNav .grp { padding: 4px 0 6px; border-bottom: 1px solid #f7f8fa; }
.mDrawerNav .grpName { padding: 16px 18px 4px; font-size: 12px; font-weight: 700;
color: #8b95a1; letter-spacing: .3px; }
.mDrawerNav a { display: block; padding: 12px 18px; font-size: 15px;
color: #191f28; text-decoration: none; }
.mDrawerNav a:active { background: #f2f4f6; }
/* ── 메인 상단 GNB (가로 스크롤 칩) ── */
.mTopNav {
display: flex !important; gap: 8px; width: 100%; box-sizing: border-box;
overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
padding: 11px 14px; margin: 0 0 14px; background: #fff;
border-bottom: 1px solid #f2f4f6; scrollbar-width: none; text-align: left;
}
.mTopNav::-webkit-scrollbar { display: none; }
.mTopNav a {
flex: 0 0 auto; padding: 8px 15px; border-radius: 9999px;
background: #f2f4f6; color: #4e5968; font-size: 13px; font-weight: 600; line-height: 1;
text-decoration: none;
}
.mTopNav a:active { background: #e3e9f1; color: #3182f6; }
/* ── 메인 히어로 배너 (2:2.5) — 메인 페이지 .mainvisual 안에서만 ── */
.mainvisual > img { display: none !important; } /* 모바일: 기존 와이드 배너 숨김 */
/* 히어로: 셀러 업로드 이미지 컨테이너 (이미지가 폭 100%·자체 비율, 둥근 하단) */
.mHero {
width: 100%; height: auto; box-sizing: border-box; padding: 0; overflow: hidden;
background: linear-gradient(160deg, #4593fc 0%, #3182f6 45%, #1b64da 100%); /* 이미지 로딩 전/없을 때 fallback */
border-radius: 0 0 24px 24px; display: block; line-height: 0;
}
.mHeroImg { display: block; width: 100%; height: auto; }
.mHeroIcon { display: block; width: 96px; height: 96px; margin: 0 auto 18px; }
.mHeroTag { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.mHeroTitle { font-size: 30px; font-weight: 800; line-height: 1.32; margin-bottom: 16px; }
.mHeroDesc { font-size: 15px; color: rgba(255,255,255,.92); margin-bottom: 0; }
.mHeroCta { display: none !important; }
}
/* 해외 배송비 미리 계산하기 버튼 (메인 신청버튼 아래) */
.mCalcBtn {
display: block; box-sizing: border-box; width: 100%; margin: 14px 0 0;
background: #fff; color: #3182f6 !important; font-size: 15px; font-weight: 700;
text-align: center; text-decoration: none; padding: 15px; border-radius: 12px;
border: 1px solid #cfe0fb; box-shadow: 0 1px 4px rgba(49,130,246,.10);
}
.mCalcBtn:hover { background: #f5f9ff; }
/* 메인 AI 빠른접수 버튼 (SILVER 이상) — 네이버그린, 폭은 mCalcBtn/신청버튼과 동일 정렬 */
.shortMenu .aiQuickApply {
background: #03C75A !important; color: #fff !important; border: 0 !important;
font-size: 18px; font-weight: 800; padding: 17px; margin: 0 0 14px;
box-shadow: 0 6px 16px rgba(3,199,90,.28);
}
.shortMenu .aiQuickApply:hover { background: #02b552 !important; }
@media (max-width: 768px) {
.shortMenu .aiQuickApply { margin: 0 auto 1.5%; font-size: 16px; }
}
/* =========================================================
Phase 2 — 토스 스타일 (모바일 메인) v1
========================================================= */
@media (max-width: 768px) {
body { font-family: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
background: #f2f4f6; color: #191f28; }
/* 상단 다크바 슬림 */
#header { background: #191f28 !important; }
.tmn li, .tmn li a { color: #e5e8eb !important; }
/* 로고(녹색) 영역 군더더기 축소 */
.logoArea { padding: 14px 12px 18px !important; }
/* 상단 메뉴 → 알약(pill) 칩 + 줄바꿈 + 영문 숨김 (잘림 해결) */
#topmn { background: #fff !important; border-bottom: 1px solid #eef0f2; padding: 4px 0; }
.mn { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important;
gap: 6px !important; padding: 10px !important; overflow-x: auto !important;
-webkit-overflow-scrolling: touch; white-space: nowrap !important; }
.mn::-webkit-scrollbar { display: none; }
.mn li { margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; }
.mn li a { white-space: nowrap !important; }
.mn li a { display: inline-block !important; background: #f2f4f6; border-radius: 9999px;
padding: 7px 13px !important; font-size: 13px !important; color: #4e5968 !important;
font-weight: 600; }
.mn li a .titleEng { display: none !important; }
.mn li a .titleKor { font-size: 13px !important; }
/* 빠른버튼: 토스 카드 (아이콘 위 + 라벨, 신청 = 히어로와 같은 파랑 그라데이션 CTA) */
.shortMenu ul li { border-radius: 16px !important; padding: 18px 8px !important; overflow: hidden; }
.shortMenu ul li a { display: flex !important; flex-direction: column; align-items: center; justify-content: center;
gap: 9px; text-decoration: none !important; }
.shortMenu ul li a .qIcon { font-size: 27px; line-height: 1; }
.shortMenu ul li a .qLabel { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
/* 나의 정보 = 깔끔한 흰 카드 */
.shortMenu ul li.my { background: #fff !important; border: 1px solid #e8ebee !important; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.shortMenu ul li.my a, .shortMenu ul li.my a .qLabel { color: #333d4b !important; }
/* 신청 = 메인 비주얼과 동일 톤의 파랑 그라데이션 CTA */
.shortMenu ul li.register { background: linear-gradient(150deg, #4593fc 0%, #2f80f6 55%, #1b64da 100%) !important;
box-shadow: 0 6px 16px rgba(49,130,246,.30); border: 0 !important; }
.shortMenu ul li.register a, .shortMenu ul li.register a .qLabel { color: #fff !important; }
/* 해외 배송비 미리 계산하기 버튼 (신청 버튼 아래) — 2×2 그리드와 동일 폭(93%) */
.shortMenu .mCalcBtn { width: 93% !important; margin: 14px auto 0 !important; }
/* 본문 섹션 → 흰 카드 */
.lineContents { padding: 0 8px !important; }
/* ── 박스 간격 통일(14px): 카드는 하단 마진만, 그룹 사이
무력화 ── */
.lineLeft, .lineRight { background: #fff; border-radius: 14px; margin: 0 0 14px !important;
padding: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.lineContents .lineFull { margin: 0 0 14px !important; }
.lineContents + br, .lineContents br.sep { display: none !important; }
.mainvisual { margin: 0 0 14px !important; }
.shortMenu { margin: 0 0 14px !important; }
.titleKor, .titleKor strong { font-size: 16px !important; color: #191f28; }
.titleEng { color: #8b95a1; }
/* 안쪽 dd 박스(default.css 고정 height:213px + 테두리) 해제 → 바깥 토스 카드만 사용 */
.lineLeft dl dd, .lineRight dl dd {
height: auto !important; min-height: 0 !important; border: 0 !important;
background: transparent !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important;
}
.lineLeft dl dt, .lineRight dl dt { padding: 0 0 4px !important; }
/* 게시판 리스트(이용후기/공지사항/보내신분) → 토스 리스트 행 */
.lineLeft dl dd ul, .lineRight dl dd ul { margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; }
.lineLeft dl dd ul li, .lineRight dl dd ul li {
line-height: 1.45 !important; padding: 12px 2px !important; margin: 0 !important;
border-bottom: 1px solid #f2f4f6 !important; font-size: 15px !important;
white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
background: none !important; word-break: break-word; text-align: left !important;
}
.lineLeft dl dd ul li:last-child, .lineRight dl dd ul li:last-child { border-bottom: 0 !important; }
.lineLeft dl dd ul li a, .lineRight dl dd ul li a {
color: #4e5968 !important; text-decoration: none !important; font-weight: 500 !important;
}
.lineLeft dl dd ul li a:hover, .lineRight dl dd ul li a:hover { color: #3182f6 !important; }
/* 메인 게시판 미니리스트(이용후기/공지사항/보내신분) → 토스 아이콘 행 (단조로움 개선) */
.lineContents .boardMini { margin: 4px 0 0 !important; padding: 0 !important; list-style: none !important; }
.lineContents .boardMini li {
display: flex !important; align-items: center; gap: 10px;
padding: 10px 6px !important; margin: 0 !important;
border-bottom: 1px solid #f4f5f7 !important; border-radius: 10px;
font-size: 14.5px !important; line-height: 1.4 !important; white-space: nowrap !important;
}
.lineContents .boardMini li:last-child { border-bottom: 0 !important; }
.lineContents .boardMini li::before {
content: ""; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.lineContents .reviewMini li::before { content: "💬"; background: #eaf3ff; }
.lineContents .noticeMini li::before { content: "📢"; background: #fff3e3; }
.lineContents .senderMini li::before { content: "🔍"; background: #eafaf0; }
.lineContents .boardMini li a {
flex: 1 1 auto; min-width: 0; color: #333d4b !important; font-weight: 500 !important;
text-decoration: none !important; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap !important; word-break: normal !important;
}
.lineContents .boardMini li a:hover { color: #3182f6 !important; }
.lineContents .boardMini li:active { background: #f7f8fa; }
.lineContents .boardMini .newBadge { flex: 0 0 auto; }
}
/* NEW 배지 (게시판 리스트 — 토스 pill) */
.newBadge {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
background: #eef3fb; color: #3182f6; font-size: 10px; font-weight: 800;
vertical-align: middle; line-height: 1.7; letter-spacing: .3px;
}
/* =========================================================
Phase 2 — 폼(로그인/신청서) 모바일 토스 스타일
========================================================= */
@media (max-width: 768px) {
/* 입력칸: 토스 스타일 — 풀너비 + 넉넉한 패딩 + 연한 테두리 + 큰 글자 + 파란 포커스 */
.inputBox, .textareabox,
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], textarea, select {
width: 100% !important; box-sizing: border-box !important;
border: 1px solid #e5e8eb !important; border-radius: 12px !important;
padding: 15px 16px !important; font-size: 16px !important; line-height: 1.4 !important;
height: auto !important; /* 원본 height:77px(4px 녹색테두리) 해제 → 패딩이 높이 결정(레퍼런스 ~52px 비율) */
background: #fff !important; color: #191f28 !important;
margin: 4px 0 !important;
-webkit-appearance: none !important; appearance: none !important;
}
textarea { min-height: 120px !important; }
/* 플레이스홀더: 연한 회색 (토스 톤) */
::-webkit-input-placeholder { color: #b0b8c1 !important; }
::placeholder { color: #b0b8c1 !important; }
.inputBox:focus, .textareabox:focus, input:focus, textarea:focus, select:focus {
outline: none !important; border-color: #3182f6 !important;
box-shadow: 0 0 0 3px rgba(49,130,246,.14) !important;
}
/* select: 토스풍 화살표 + 패딩 확보 */
select {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important; background-position: right 14px center !important;
padding-right: 40px !important;
}
/* 작은 +/- 버튼은 풀너비 제외 */
.btns1char, input[type="button"].btns1char { width: 34px !important; min-width: 34px; padding: 8px 0 !important; }
/* 폼 표(appTable2 등): 라벨/입력 세로 정렬 */
.appTable2, .appTable3 { border: 0 !important; }
.appTable2 th, .appTable2 td, .appTable3 th, .appTable3 td {
display: block !important; width: 100% !important; text-align: left !important;
padding: 6px 10px !important; border: 0 !important;
}
.appTable2 th, .appTable3 th {
font-weight: 700; color: #191f28; font-size: 15px !important;
padding-top: 14px !important; background: transparent !important;
}
/* ★ 신청서 폼 안에 중첩된 표(배송주소 Street/City/Zip/Country 등):
colgroup(20%/80%)+table-layout:fixed 때문에 셀이 ~80px로 찌그러지던 문제.
중첩 table/tr/tbody 까지 block 으로 풀어 colgroup 무시 → 입력칸 풀너비 + 라벨 위/입력 아래로 깔끔히 스택 */
.appTable2 table, .appTable2 tbody, .appTable2 tr,
.appTable3 table, .appTable3 tbody, .appTable3 tr {
display: block !important; width: 100% !important;
}
.appTable2 table td, .appTable3 table td {
display: block !important; width: 100% !important; padding: 3px 0 !important;
}
/* 라벨칸(* Street 등)은 작은 회색 라벨로 */
.appTable2 table td:first-child, .appTable3 table td:first-child {
font-size: 13px !important; color: #4e5968 !important; padding: 6px 0 2px !important;
}
/* 빈 라벨칸(배송지 가져오기 행·안내문 행의 좌측 빈 td) 숨김 → 군더더기 여백 제거 */
.appTable2 table td:empty, .appTable3 table td:empty { display: none !important; }
/* 배송지 가져오기 버튼: 토스풍 보조 버튼 */
.btnOpenAddressList {
width: auto !important; display: inline-block !important;
background: #f2f4f6 !important; color: #4e5968 !important;
border: 1px solid #d8dce0 !important; border-radius: 10px !important;
padding: 9px 14px !important; font-size: 14px !important; font-weight: 600 !important;
margin: 2px 0 6px !important;
}
/* 폼 카드 컨테이너 */
.appForm { background: #fff; border-radius: 14px; padding: 14px !important;
margin: 10px 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
/* ── 버튼: 토스 스타일 ── */
/* 주요 버튼(로그인·제출 등): 풀너비 파란 CTA */
input[type="submit"], button[type="submit"], input[type="submit"].btn4char,
.btnBig180px, .btn6char {
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
display: block !important; box-sizing: border-box !important;
background: #3182f6 !important; color: #fff !important; border: 0 !important;
border-radius: 12px !important; padding: 16px !important;
font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important;
cursor: pointer; margin: 8px 0 !important; box-shadow: none !important;
}
input[type="submit"]:active, button[type="submit"]:active { background: #2272eb !important; }
/* 보조 버튼(취소 등): 풀너비 회색 */
input[type="button"].btn4char, input[type="reset"], .btn4char {
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
display: block !important; box-sizing: border-box !important;
background: #f2f4f6 !important; color: #4e5968 !important; border: 0 !important;
border-radius: 12px !important; padding: 16px !important;
font-size: 16px !important; font-weight: 600 !important;
cursor: pointer; margin: 8px 0 !important;
}
/* 작은 +/- 버튼은 위 규칙에서 제외(풀너비 금지) */
.btns1char, input[type="button"].btns1char {
width: 34px !important; min-width: 34px !important; max-width: 34px !important;
display: inline-block !important; padding: 8px 0 !important; margin: 0 2px !important;
}
/* 로그인 폼의 '아이디 저장' 체크박스: 데스크탑 절대배치 해제 → 버튼 아래 정상 배치 */
.btnBox [style*="absolute"] {
position: static !important; margin: 10px 0 0 !important; text-align: left !important;
}
/* ── 제목(페이지 타이틀) 토스 스케일 ── */
.title { font-size: 24px !important; font-weight: 800 !important;
color: #191f28 !important; line-height: 1.3 !important; margin: 6px 0 10px !important; }
.title .engTitle, .engTitle { font-size: 13px !important; font-weight: 500 !important;
color: #8b95a1 !important; }
}
/* =========================================================
Phase 3.1 — 로그인 페이지 전용(#ConArea.loginRenew) + 푸터 정리
========================================================= */
/* 1) 타이틀 위/아래 회색 라인 제거 (로그인만) */
.loginRenew { border-top: 0 !important; }
.loginRenew h1.title { border-bottom: 0 !important; padding-bottom: 14px !important; }
/* 박스 가운데 정렬 + 3) 인풋/로그인/취소 버튼 동일 가로폭 */
.loginRenew .loginBox { max-width: 420px; margin: 0 auto; }
.loginRenew .loginField { margin-bottom: 10px; }
.loginRenew .loginField .inputBox { width: 100% !important; box-sizing: border-box !important; }
.loginRenew .loginBtns .btn4char {
width: 100% !important; display: block !important; box-sizing: border-box !important;
}
/* 4) '아이디 저장' 글자 = 로그인 버튼 글자 크기(17px) */
.loginRenew .loginSaveId {
display: flex; align-items: center; gap: 8px;
font-size: 17px; color: #4e5968; margin: 12px 2px 2px; cursor: pointer;
}
.loginRenew .loginSaveId input {
width: 20px !important; height: 20px !important; margin: 0 !important; vertical-align: middle;
}
/* 5) 아이디찾기/비밀번호찾기: 키우고 토스 스타일(대괄호 제거·가운뎃점 구분) */
.loginRenew .loginLinks { text-align: center; padding-top: 20px; margin: 0; }
.loginRenew .loginLinks a {
font-size: 16px; color: #6b7684; font-weight: 600; text-decoration: none; padding: 0 8px;
}
.loginRenew .loginLinks a:hover { color: #3182f6; }
.loginRenew .loginLinks .dot { color: #c4c9d0; font-size: 14px; }
/* ── 공통 푸터: 데스크탑은 기존 카피라이트 이미지 유지 ── */
.footCopy { display: none; }
@media (max-width: 768px) {
/* 로그인 박스: 모바일에선 흰 영역 꽉 채움(420px 제한 해제 → 인풋/버튼이 넓게) */
.loginRenew .loginBox { max-width: none !important; }
/* 공통 1) 하단 링크 한 줄 + 가로 스와이프 (고객센터 제거됨) */
#footer { height: auto !important; padding: 14px 0 26px !important; }
.dmnBox { padding: 0 !important; max-width: 100% !important; }
.footLinks {
display: flex !important; flex-wrap: nowrap !important;
overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
margin: 0 !important; padding: 6px 12px !important; justify-content: flex-start;
}
.footLinks::-webkit-scrollbar { display: none; }
.footLinks li {
float: none !important; display: inline-block !important; flex: 0 0 auto;
margin: 0 !important; padding: 8px 12px !important;
}
.footLinks li a { font-size: 13px !important; color: #cfd4da !important; font-weight: 500 !important; }
/* 공통 2) 회사정보 영역: 정보 다 빼고 카피라이트만 */
.dmnBox > div { position: static !important; width: 100% !important; }
.dmnBox > div > div[style*="absolute"] { display: none !important; } /* KB마크·copyright.gif 숨김 */
.dahaedreamKey { display: none !important; }
.dmnAddress { padding: 12px 14px 0 !important; text-align: center; }
.footCopy { display: block !important; font-size: 12px !important; color: #8b95a1 !important; line-height: 1.6; }
}
/* =========================================================
Phase 4 — 데스크탑(PC) 토스 리뉴얼 ① 로그인 페이지 (>=769px)
- .loginRenew 스코프라 다른 데스크탑 페이지에 영향 없음
========================================================= */
@media (min-width: 769px) {
/* 폼 카드: float 해제 + 가운데 정렬 + 적당한 폭 */
.loginRenew .loginBox {
float: none !important; display: block !important;
width: 400px !important; max-width: 400px !important;
margin: 24px auto 0 !important;
}
.loginRenew h1.title { font-size: 28px !important; }
/* 입력칸: 데스크탑 기본(height:77px·1.5rem·4px테두리) → 토스 인풋 */
.loginRenew .loginField { margin-bottom: 10px; }
.loginRenew .loginField .inputBox {
width: 100% !important; box-sizing: border-box !important;
height: auto !important; border: 1px solid #e5e8eb !important; border-radius: 12px !important;
padding: 15px 16px !important; font-size: 16px !important; background: #fff !important;
color: #191f28 !important; -webkit-appearance: none; appearance: none;
}
.loginRenew .loginField .inputBox:focus {
outline: none !important; border-color: #3182f6 !important;
box-shadow: 0 0 0 3px rgba(49,130,246,.14) !important;
}
/* 버튼: 검정 기본 → 토스(파랑 로그인 / 회색 취소), 풀너비 스택 */
.loginRenew .loginBtns .btn4char {
width: 100% !important; max-width: 100% !important; display: block !important;
box-sizing: border-box !important; border: 0 !important; border-radius: 12px !important;
padding: 16px !important; font-size: 17px !important; font-weight: 700 !important;
line-height: 1.2 !important; cursor: pointer; margin: 8px 0 !important;
}
.loginRenew .loginBtns input[type="submit"].btn4char { background: #3182f6 !important; color: #fff !important; }
.loginRenew .loginBtns input[type="submit"].btn4char:hover { background: #2272eb !important; }
.loginRenew .loginBtns input[type="button"].btn4char { background: #f2f4f6 !important; color: #4e5968 !important; }
.loginRenew .loginSaveId { font-size: 16px; }
}
/* =========================================================
Phase 4 — 데스크탑(PC) 토스 리뉴얼 ② 공통 헤더/네비 (>=769px)
- 마크업 변경 없이 CSS만 (top.inc 5개 변형 공통)
========================================================= */
@media (min-width: 769px) {
/* (a) 상단 유틸바: 토스 톤 — 우측 정렬 + 토스 칩 버튼, 영문 GIF버튼 → 텍스트 */
#header { background: #191f28 !important; border-bottom: 0 !important; }
.tmn { display: flex !important; align-items: center; justify-content: flex-end; gap: 4px;
float: right !important; height: 42px; padding: 0 18px !important; margin: 0 !important; list-style: none; }
.tmn li { display: inline-flex !important; align-items: center; gap: 6px; height: 42px;
padding: 0 5px !important; margin: 0 !important; font-size: 13px !important; color: #cfd4da !important;
background: none !important; line-height: 1; }
.tmn li.split { position: relative; padding-left: 15px !important; }
.tmn li.split::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 13px; background: #363d49; }
.tmn a, .tmn a:visited { color: #cfd4da !important; text-decoration: none; }
.tmn a:hover { color: #fff !important; }
.tmn .icon { display: none !important; } /* 레벨 GIF 아이콘 숨김 */
.tmn b { color: #fff !important; font-weight: 700; }
.tmn .num { color: #fff !important; font-weight: 800; }
.tmn span[style*="85af4b"] { color: #8b95a1 !important; font-size: 12px; font-weight: 600; } /* 레벨명 → 회색 */
.tmn .tArrow { font-size: 9px; color: #8b95a1; margin-left: 1px; }
/* 토스 칩 버튼: 로그아웃/로그인 = 고스트, 충전하기 = 블루 */
.tmn .tBtn { display: inline-flex !important; align-items: center; padding: 6px 13px !important; height: auto !important;
border-radius: 9999px; border: 1px solid #3a4250; background: transparent;
color: #cfd4da !important; font-size: 12px !important; font-weight: 600 !important; margin-left: 3px; }
.tmn .tBtn:hover { border-color: #5b6471; background: rgba(255,255,255,.07); color: #fff !important; }
.tmn .tBtnPrimary { background: #3182f6 !important; border-color: #3182f6 !important; color: #fff !important; }
.tmn .tBtnPrimary:hover { background: #2272eb !important; border-color: #2272eb !important; color: #fff !important; }
/* 마이페이지 드롭다운 패널 토스화 + 우측정렬(화면밖 넘침/스크롤바 방지)
layerMenu.js가 left=트리거좌표로 잡아 우측 끝에서 넘침 → CSS로 left:auto+right 우측정렬(!important로 인라인 덮음)
default height:160px + overflow:hidden 이라 5번째 항목 잘림 → height:auto */
#top_mypage_menu { left: auto !important; right: 18px !important; margin: 4px 0 0 !important;
width: 210px !important; height: auto !important;
border: 1px solid #eef0f2 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
overflow: hidden; background: #fff !important; padding: 6px !important; }
#top_mypage_menu ul li { padding: 0 !important; }
#top_mypage_menu li a { font-size: 13px !important; color: #4e5968 !important; padding: 10px 14px !important; display: block; border-radius: 8px; }
#top_mypage_menu li a:hover { background: #f4f8ff !important; color: #3182f6 !important; }
/* (b) 블루 배너: 높이 축소 + 로고 적정 크기 + 아이콘 슬림 */
.logoArea { min-width: 0 !important; }
.logo { padding: 16px 28px !important; }
.logo img, .logo li img { height: 52px !important; width: auto !important; max-height: 52px !important; }
.logomn { padding: 20px 28px !important; }
.logomn li { padding-right: 0 !important; padding-left: 28px !important; text-align: center; }
.logomn li a { color: #fff !important; font-size: 12px !important; line-height: 1.25; }
.logomn li a img { width: 30px !important; height: 30px !important; margin-bottom: 2px; }
/* (c) 네비: 흰 바 + 슬림 + 토스 hover (영문 서브 숨김)
float:none — 기존 float:left+padding이라 박스가 아래 여백(#wrapContent margin-top)을 덮어
회색 여백이 안 보이던 문제 해결 (정상 블록화 → 28px 여백이 회색으로 드러남) */
#topmn { background: #fff !important; border-bottom: 1px solid #eef0f2 !important; float: none !important; }
.mn { padding: 0 !important; text-align: center !important; }
.mn li { margin: 0 !important; padding: 0 !important; }
.mn li:first-child { margin-left: 0 !important; }
.mn li a {
display: inline-block !important; padding: 15px 22px !important;
font-size: 15px !important; font-weight: 600 !important; color: #4e5968 !important;
}
.mn li a:hover { color: #3182f6 !important; }
.mn li a span.titleEng { display: none !important; }
.mn .titleKor { font-size: 15px !important; }
}
/* =========================================================
Phase 4 — 신청서 상단 "페이지 가이드" 카드 (토스 스타일)
========================================================= */
.pageGuide {
background: #f5f9ff; border: 1px solid #e7f0fe; border-radius: 16px;
padding: 18px 20px; margin: 16px 0;
}
.pageGuideTitle {
font-size: 16px; font-weight: 800; color: #191f28; margin-bottom: 12px; line-height: 1.4;
}
.pageGuideTitle a { color: #191f28; text-decoration: none; }
.pageGuideTitle a:hover { color: #3182f6; }
.pageGuideTitle a .arr { color: #3182f6; font-weight: 800; margin-left: 2px; }
/* 신청서(구매/배송대행) 페이지 타이틀 위아래 회색 라인 제거 */
.requestPage { border-top: 0 !important; }
#ConArea.requestPage { border-top: 0 !important; }
.requestPage h1.title { border-top: 0 !important; border-bottom: 0 !important; }
.pageGuideList { margin: 0; padding: 0; list-style: none; }
.pageGuideList li {
position: relative; padding-left: 24px; margin: 7px 0;
font-size: 14px; color: #4e5968; line-height: 1.55;
}
.pageGuideList li::before {
content: "✓"; position: absolute; left: 0; top: 0; color: #3182f6; font-weight: 800;
}
/* =========================================================
Phase 4 — 신청서 "제품 카드" (구매/배송대행 공통, 모바일+PC)
A안: 카드별 삭제 + 하단 단일 "상품 추가하기" 버튼
========================================================= */
.appTable2 ul.list { padding: 0 !important; margin: 0 !important; list-style: none; }
.appTable2 ul.list > li {
list-style: none; background: #fff; border: 1px solid #e5e8eb; border-radius: 16px;
padding: 16px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.appTable2 ul.list > li .goodsHead {
display: flex; align-items: center; justify-content: space-between;
font-size: 15px; font-weight: 700; color: #191f28; margin-bottom: 10px;
}
.appTable2 ul.list > li .goodsHead .goodsNo { display: inline-flex; align-items: baseline; gap: 6px; }
.appTable2 ul.list > li .goodsHead label { color: #3182f6; font-weight: 800; }
.appTable2 ul.list .cardDel {
width: auto !important; min-width: 0 !important; max-width: none !important;
background: #fff !important; color: #f04452 !important;
border: 1px solid #ffd9dc !important; border-radius: 8px !important;
padding: 6px 12px !important; font-size: 13px !important; font-weight: 600 !important;
cursor: pointer; margin: 0 !important;
}
.appTable2 ul.list > li .inputBox { margin: 5px 0 !important; }
.btnAddGoods {
display: block !important; width: 100% !important; box-sizing: border-box !important;
background: #eef3fb !important; color: #3182f6 !important;
border: 1px dashed #b3d1ff !important; border-radius: 12px !important;
padding: 14px !important; font-size: 15px !important; font-weight: 700 !important;
cursor: pointer; margin: 4px 0 10px !important;
}
.btnAddGoods:hover { background: #e3edfb !important; }
/* 드림캐쉬 잔액 박스 (구매대행 상단) */
.cashBox {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
background: #f5f9ff; border: 1px solid #e7f0fe; border-radius: 14px;
padding: 13px 16px; margin: 12px 0;
}
.cashBox .cashLabel { font-size: 15px; color: #4e5968; font-weight: 600; }
.cashBox .cashLabel b { color: #3182f6; font-size: 19px; font-weight: 800; margin: 0 3px; }
.cashChargeBtn {
background: #3182f6 !important; color: #fff !important; border: 0 !important;
border-radius: 10px !important; padding: 10px 20px !important;
font-size: 14px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap;
}
.cashChargeBtn:hover { background: #2272eb !important; }
/* =========================================================
메인 "실시간 진행상황" 티커 (iframe: main/real_time_status.ifrm.php)
Rolling.js 가 각 항목을 height:29px 로 고정 → 닉/단계를 29px 한 줄에 맞춰 토스 정리
(renew.css 가 iframe 안에서도 로드되므로 #real_time_status 스코프로만 적용됨)
========================================================= */
#real_time_status dl.fclear {
display: flex !important; align-items: center; gap: 8px; box-sizing: border-box !important;
height: 46px !important; line-height: 1.45 !important; margin: 0 !important; padding: 0 2px !important;
overflow: hidden; white-space: nowrap; border-bottom: 1px solid #f2f4f6;
}
#real_time_status dl.fclear dt {
float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important;
flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
font-size: 15px !important; font-weight: 700 !important; color: #191f28 !important;
}
#real_time_status dl.fclear dt b { font-weight: 700 !important; }
#real_time_status dl.fclear dt .rtDate {
font-size: 13px !important; font-weight: 600 !important; color: #8b95a1 !important; margin-right: 4px;
}
#real_time_status dl.fclear dd {
float: none !important; margin: 0 !important; padding: 2px 9px !important; width: auto !important;
flex: 0 0 auto; font-size: 11px !important; font-weight: 700 !important;
color: #3182f6 !important; background: #eef3fb; border-radius: 999px; line-height: 1.4;
}
/* =========================================================
드림캐쉬 충전 페이지 (/cash/charge.php) 토스화
========================================================= */
.chargePage { border-top: 0 !important; }
.chargeTitle { text-align: center; border: 0 !important; margin: 8px 0 18px !important; padding: 0 !important; }
.chargeTitle .stitleKor { display: block; font-size: 24px !important; font-weight: 800 !important; color: #191f28 !important; letter-spacing: -.3px; }
.chargeTitle .titleEng { display: block; font-size: 13px !important; color: #8b95a1 !important; font-weight: 500 !important; margin-top: 4px; }
.chargeGuide { margin-bottom: 18px; }
/* 결제방법: 세로 스택 토스 라디오 */
.payMethods { display: flex; flex-direction: column; gap: 12px; }
.payMethods .tossCheck { align-items: center; }
.payMethods small { color: #8b95a1; font-weight: 500; font-size: 13px; }
/* 계산하기: 파란 토스 버튼 */
.chargePage .btnBox { margin-top: 18px; text-align: center; }
.chargePage .btnBox img { max-width: 100%; height: auto; }
/* 충전/완료 폼: 데스크탑에서도 가운데 카드 (float 해제) */
.chargePage .appForm { float: none !important; width: 100% !important; max-width: 560px; margin: 12px auto !important; }
/* =========================================================
회원탈퇴(/mypage/withdraw.php) 토스화 + 충전(charge) PC 카드 — 톤 통일
========================================================= */
/* 가이드/안내문도 폼과 같은 폭으로 가운데 (PC) */
.chargePage .pageGuide { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
/* 충전 폼/결과표 PC 디테일: 라벨 작게·줄바꿈 방지, 셀 밑줄(테두리) 제거, 버튼 풀폭 */
@media (min-width: 769px) {
.chargePage .appTable2 { border: 0 !important; border-top: 0 !important; }
.chargePage .appTable2 th {
font-size: 14px !important; font-weight: 700 !important; color: #4e5968 !important;
background: transparent !important; border: 0 !important; white-space: nowrap !important;
text-align: left !important; vertical-align: middle !important; padding: 13px 12px 13px 0 !important;
}
.chargePage .appTable2 td {
border: 0 !important; background: transparent !important; vertical-align: middle !important;
font-size: 14px !important; color: #191f28 !important; padding: 13px 0 !important;
}
/* 결과표(th.none) — 라벨 회색 / 값 우측 굵게 / 최종금액 파랑 */
.chargePage .appTable2 th.none { color: #6b7684 !important; font-weight: 500 !important; }
.chargePage .appTable2 th.none + td { text-align: right !important; font-weight: 700 !important; }
.chargePage .appTable2 .orangefont { color: #3182f6 !important; font-size: 17px !important; }
/* 계산하기 / 결제하기 버튼 동일하게 풀폭 */
.chargePage .btnBox input.btn4char { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin: 0 auto !important; }
}
/* 충전·탈퇴 공통: appForm 을 흰 토스 카드로 */
.chargePage .appForm, .withdrawPage .appForm {
background: #fff !important; border: 1px solid #eef0f2 !important; border-radius: 16px !important;
padding: 24px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04); box-sizing: border-box;
}
/* ── 회원탈퇴 ── */
.withdrawPage { border-top: 0 !important; }
.withdrawPage .withdrawTitle { text-align: center; border: 0 !important; margin: 8px 0 18px !important; padding: 0 !important; }
.withdrawPage .withdrawTitle .stitleKor { display: block; font-size: 24px !important; font-weight: 800 !important; color: #191f28 !important; letter-spacing: -.3px; }
.withdrawPage .withdrawTitle .titleEng { display: block; font-size: 13px !important; color: #8b95a1 !important; font-weight: 500 !important; margin-top: 4px; }
.withdrawPage .appForm { float: none !important; width: 100% !important; max-width: 560px; margin: 12px auto !important; }
/* 탈퇴안내 — 경고 톤(연한 빨강) */
.withdrawPage .conBox {
width: auto !important; max-width: 560px; margin: 0 auto 16px !important; box-sizing: border-box;
background: #fff5f5 !important; border: 1px solid #ffe3e3 !important; border-radius: 12px !important; padding: 14px 16px !important;
}
.withdrawPage .conBox h4 { font-size: 14px !important; font-weight: 700 !important; color: #e03131 !important; margin: 0 0 6px !important; }
.withdrawPage .conBox p { font-size: 13px !important; color: #4e5968 !important; line-height: 1.7 !important; margin: 0 !important; }
.withdrawPage .conBox b { color: #e03131 !important; }
.withdrawPage .comment[style*="float"] { float: none !important; display: block; text-align: right; font-size: 12px !important; color: #8b95a1 !important; margin: 0 0 6px !important; }
.withdrawPage .comment[style*="float"] img { display: none; }
/* 폼 표(ID/Password) → 라벨 위/입력 아래 */
.withdrawPage .appTable3 { width: 100% !important; border: 0 !important; border-top: 0 !important; table-layout: auto !important; }
.withdrawPage .appTable3 col { width: auto !important; }
.withdrawPage .appTable3 tr { display: block; }
.withdrawPage .appTable3 th {
display: block; text-align: left !important; padding: 6px 0 7px !important; border: 0 !important; background: none !important;
font-size: 13px !important; font-weight: 700 !important; color: #4e5968 !important;
}
.withdrawPage .appTable3 tr:first-child th { padding-top: 0 !important; }
.withdrawPage .appTable3 th.must::after { content: " *"; color: #f04452; }
.withdrawPage .appTable3 td { display: block; padding: 0 0 6px !important; border: 0 !important; font-size: 14px !important; color: #191f28; }
.withdrawPage .appTable3 .inputBox {
box-sizing: border-box; width: 100% !important; max-width: 320px; border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 11px 13px !important; font-size: 14px !important; background: #fff !important; height: auto !important;
}
.withdrawPage .appTable3 .inputBox:focus { border-color: #3182f6 !important; outline: none; }
/* 버튼: 탈퇴하기(빨강·위험) / 취소(흰) */
.withdrawPage .btnBox { margin-top: 18px !important; text-align: center; }
.withdrawPage .btnBox > span { display: block; font-size: 13px !important; color: #6b7684 !important; line-height: 1.7; }
.withdrawPage .btnBox .btn4char { border-radius: 12px !important; padding: 14px 30px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; border: 0 !important; min-width: 130px; margin: 0 4px; }
.withdrawPage .btnBox input[type="submit"].btn4char { background: #f04452 !important; color: #fff !important; }
.withdrawPage .btnBox input[type="submit"].btn4char:hover { background: #e03131 !important; }
.withdrawPage .btnBox input[type="button"].btn4char { background: #fff !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; }
.withdrawPage .btnBox input[type="button"].btn4char:hover { background: #f7f8fa !important; }
@media (max-width: 768px) {
.withdrawPage .appForm, .withdrawPage .conBox { max-width: 100%; }
.withdrawPage .btnBox .btn4char { display: block; width: 100%; margin: 8px 0 0 !important; }
}
/* 결제정보 요약표 (success/충전완료) — 라벨(좌)·값(우) 카드 */
.summaryTable { border: 0 !important; width: 100% !important; display: block !important; table-layout: auto !important; }
.summaryTable tr {
display: flex !important; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 11px 0; border-bottom: 1px solid #eef0f2; width: 100% !important;
}
.summaryTable tbody { display: block !important; }
.summaryTable tr:last-child { border-bottom: 0; }
.summaryTable th {
display: inline !important; width: auto !important; text-align: left !important; flex: 0 0 auto;
font-weight: 500 !important; color: #6b7684 !important; font-size: 14px !important;
background: transparent !important; padding: 0 !important;
}
.summaryTable td {
display: inline !important; width: auto !important; text-align: right !important;
color: #191f28 !important; font-weight: 700 !important; font-size: 14px !important; padding: 0 !important;
}
.summaryTable .orangefont { color: #3182f6 !important; font-size: 17px !important; }
.summaryTable .redfont { display: block; font-weight: 400 !important; color: #f04452 !important; font-size: 12px !important; margin-top: 4px; }
/* 페이팔 이동 버튼(토스) + 설명 */
.paypalGoBtn {
display: block; width: 100%; box-sizing: border-box; background: #3182f6;
color: #fff !important; text-decoration: none; border-radius: 12px;
padding: 16px; font-size: 16px; font-weight: 700; text-align: center;
}
.paypalGoBtn:hover { background: #2272eb; }
.paypalGoDesc { margin: 10px 0 0; font-size: 12px; color: #8b95a1; text-align: center; line-height: 1.55; }
/* 간단사용설명 */
.guideStepBox h3, .guideStepBox H3 { font-size: 16px !important; font-weight: 800 !important; color: #191f28 !important; margin: 0 0 10px !important; }
.guideStepBox ol { margin: 0; padding-left: 20px; }
.guideStepBox ol li { font-size: 14px; color: #4e5968; line-height: 1.7; margin: 4px 0; }
.guideStepBox p { margin-top: 12px; font-size: 14px; }
.guideStepBox p a font { color: #3182f6 !important; }
/* =========================================================
마이페이지 주문내역 (/mypage/order.php) 토스화
========================================================= */
/* 제목 위/아래 회색 라인 제거 */
.orderPage { border-top: 0 !important; }
.orderPage h1.title { border-bottom: 0 !important; padding-bottom: 12px !important; }
/* 소제목 토스 */
.orderPage h3 { font-size: 16px !important; font-weight: 800 !important; color: #191f28 !important;
margin: 24px 0 10px !important; letter-spacing: -.3px; }
.orderCash { margin: 12px 0 6px !important; }
/* 주문 상태 배지 */
.orderStatus {
display: inline-block; background: #eef3fb; color: #3182f6;
border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
/* 후기작성: 보조(라이트) 토스 버튼 — 해외배송완료 시에만 출력됨 */
.btnReview {
display: inline-block; background: #eef3fb; color: #3182f6 !important;
border: 1px solid #cfe0fb; border-radius: 9px; padding: 9px 16px;
font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1; cursor: pointer;
}
.btnReview:hover { background: #e3edfb; }
/* 주문내역 표 토스화 (PC) — 보라 상단선/기본 테두리 → 흰 카드 + 깔끔한 토스 표 */
@media (min-width: 769px) {
.orderPage .appForm {
float: none !important; display: flow-root !important; width: 100% !important; box-sizing: border-box;
background: #fff !important; border: 1px solid #e3e6ea !important; border-radius: 16px !important;
padding: 18px 22px 22px !important; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-bottom: 22px !important;
}
.orderPage .paging { clear: both; }
.orderPage .paging a { float: none !important; }
.orderPage .appForm > p {
font-size: 12.5px !important; color: #8b95a1 !important; line-height: 1.6;
background: #f7f8fa; border-radius: 10px; padding: 11px 14px; margin: 0 0 14px !important; width: auto !important;
}
.orderPage .appTable3 { border: 0 !important; border-top: 0 !important; width: 100% !important; }
/* 헤더행 */
.orderPage .appTable3 tr.thead th {
background: transparent !important; border: 0 !important; border-bottom: 1px solid #e5e8eb !important;
color: #8b95a1 !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 10px 12px !important;
line-height: 1.4; vertical-align: middle; text-align: center;
}
.orderPage .appTable3 tr.thead th:nth-child(2) { text-align: left !important; }
.orderPage .appTable3 tr.thead th:nth-child(3) { text-align: right !important; }
/* 데이터행 */
.orderPage .appTable3 tr:not(.thead):hover td { background: #f9fafb !important; }
.orderPage .appTable3 td {
border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; padding: 16px 10px !important;
vertical-align: middle !important; font-size: 14px !important; color: #4e5968 !important; background: transparent !important;
}
.orderPage .appTable3 td[colspan] { text-align: center !important; color: #8b95a1 !important; padding: 32px 0 !important; }
/* 작성일 / 배송일 */
.orderPage .appTable3 td.center:first-child strong { color: #191f28 !important; font-weight: 700; font-size: 14px; }
.orderPage .appTable3 td.center:first-child div + div { color: #8b95a1; font-size: 12px; margin-top: 3px; }
/* 주문번호 / 상품명 */
.orderPage .appTable3 td:nth-child(2) > div:first-child { font-size: 13px; color: #8b95a1; }
.orderPage .appTable3 td:nth-child(2) > div:nth-child(2) { font-size: 14.5px; font-weight: 600; color: #191f28; margin-top: 2px; }
/* 합계 / Total */
.orderPage .appTable3 td.right { text-align: right !important; }
.orderPage .appTable3 td.right strong { color: #3182f6 !important; font-weight: 800; font-size: 16px; }
/* 상태 칸 — 배지(위) + 상세보기(아래) */
.orderPage .appTable3 td.navyfont { text-align: center !important; }
.orderPage .appTable3 td.navyfont .orderStatus { display: inline-block; margin-bottom: 8px; }
.orderPage .btnSmall100px {
display: block; margin: 0 auto !important; width: auto !important; min-width: 96px; height: auto !important;
background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; border-radius: 9px !important;
padding: 9px 16px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer;
}
.orderPage .btnSmall100px:hover { background: #e9edf2 !important; }
/* 결제하기(배송내역) — 토스 블루 */
.orderPage .btns4charOn {
display: inline-block; margin-top: 6px; background: #3182f6 !important; color: #fff !important; border: 0 !important;
border-radius: 9px !important; padding: 9px 16px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer;
}
.orderPage .btns4charOn:hover { background: #2272eb !important; }
.orderPage td.navyfont .reviewWrap { margin-top: 8px; }
/* 페이징 — 토스 스타일(현재 페이지 파란 박스, gif 화살표 숨김), 카드 안 푸터 */
.orderPage .paging { text-align: center; margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid #f2f4f6; }
.orderPage .paging img { display: none !important; } /* 구식 gif 화살표 숨김 */
.orderPage .paging a:has(img) { display: none !important; } /* 화살표 링크(빈칸) 숨김 */
.orderPage .paging a, .orderPage .paging strong {
display: inline-block; min-width: 36px; box-sizing: border-box; padding: 8px 10px; margin: 0 3px;
font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 9px; text-align: center; line-height: 1.1;
}
.orderPage .paging a { color: #4e5968; }
.orderPage .paging a:hover { background: #f2f4f6; color: #3182f6; }
.orderPage .paging strong { background: #3182f6; color: #fff !important; font-weight: 800; }
}
/* =========================================================
주문 상세 팝업 (/mypage/order_detail.pop.php) 토스화 + 반응형
========================================================= */
.detailPop { max-width: 760px; margin: 0 auto; padding: 16px 14px 48px; box-sizing: border-box; }
.detailPop h3.location { display: none !important; }
.detailPop h3.title {
font-size: 21px !important; font-weight: 800 !important; color: #191f28 !important;
border: 0 !important; margin: 0 0 18px !important; padding: 0 !important; text-align: center; letter-spacing: -.3px;
}
.detailPop .appForm h3 { font-size: 15px !important; font-weight: 800 !important; color: #191f28 !important; margin: 0 0 10px !important; }
.detailPop .appForm h3 span { color: #b0b8c1 !important; font-weight: 500 !important; }
.detailPop .appForm h4 { font-size: 15px !important; font-weight: 800 !important; color: #191f28 !important; margin: 0 0 10px !important; }
.detailPop .appForm {
float: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box;
background: #fff !important; border: 1px solid #e5e8eb; border-radius: 14px; padding: 16px !important;
margin: 0 0 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.detailPop .appTable { border: 0 !important; width: 100% !important; table-layout: auto !important; }
.detailPop .appTable th { background: transparent !important; }
/* 결제 소계 / 주소 nested table → 라벨(좌)·값(우) */
.detailPop .appTable table, .detailPop .appTable table > tbody { display: block !important; width: 100% !important; border: 0 !important; }
.detailPop .appTable table tr { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f2f4f6; }
.detailPop .appTable table tr:last-child { border-bottom: 0; }
.detailPop .appTable table th { display: block !important; flex: 0 0 auto; max-width: 60%; width: auto !important; text-align: left !important; font-weight: 500 !important; color: #6b7684 !important; font-size: 13px !important; padding: 0 !important; border: 0 !important; background: transparent !important; word-break: keep-all !important; overflow-wrap: normal !important; }
.detailPop .appTable table td { display: block !important; flex: 1 1 auto; min-width: 0; width: auto !important; text-align: right !important; padding: 0 !important; border: 0 !important; font-size: 14px; color: #191f28; white-space: normal; word-break: normal; overflow-wrap: break-word; }
/* 주소 등 라벨-텍스트 nested table (값 td에 .right 없음) → 좌측정렬 + 줄바꿈 (긴 주소 화면 넘침 방지) */
.detailPop .appTable table td:not(.right) { text-align: left !important; }
/* 값 칸: 숫자(고정폭 input) + '원' 을 한 줄 우측정렬 (flex 미사용 — 겹침/잘림 방지) */
.detailPop .appTable table td.right { display: block !important; text-align: right !important; white-space: nowrap !important; }
.detailPop .pbox { display: inline-block !important; width: 90px !important; max-width: 90px !important; min-width: 90px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; text-align: right !important; color: #191f28 !important; font-weight: 700 !important; font-size: 14px !important; padding: 0 !important; vertical-align: baseline; height: auto !important; overflow: visible !important; }
/* 결제할 금액(최종) — 파란 강조 (원본 inline color:#f60 pbox 타겟) */
.detailPop .pbox[style*="f60"] { color: #3182f6 !important; font-size: 16px !important; }
.detailPop .appTable table th[style*="border-top"] { color: #191f28 !important; font-weight: 700 !important; font-size: 14px !important; }
/* 팝업 푸터 — 로고/카피라이트 제거, 닫기 버튼만 토스 전체폭 */
#footerPop { max-width: 760px; margin: 8px auto 0 !important; padding: 8px 14px 28px !important; background: transparent !important; text-align: center; }
#footerPop:after { display: none !important; }
#footerPop .fleft, #footerPop .fright { display: none !important; }
#footerPop .btnClosePop {
display: block; width: 100%; box-sizing: border-box; float: none;
background: #fff !important; color: #4e5968 !important; text-decoration: none !important;
font-size: 16px; font-weight: 700; text-align: center; line-height: 1.2;
padding: 16px 0; border-radius: 14px; border: 1px solid #e5e8eb !important; cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
#footerPop .btnClosePop:hover { background: #f2f4f6 !important; }
/* 신청내역 — 기타메모 내용 박스 (연회색) */
.detailPop .memoBox { display: block; background: #f7f8fa !important; border: 1px solid #eef0f2 !important; border-radius: 12px !important; padding: 18px 18px !important; color: #4e5968 !important; font-size: 13px !important; line-height: 1.7 !important; margin-top: 4px; word-break: break-word; }
/* 진행메세지 — 내용 박스 (연노랑 포스트잇) */
.detailPop .msgBox { display: block; background: #fffbe6 !important; border: 1px solid #fdf0bf !important; border-radius: 12px !important; padding: 20px 20px !important; color: #6b5e2e !important; font-size: 13px !important; line-height: 1.8 !important; word-break: break-word; }
/* 강조색 토스화 */
.detailPop .orangefont { color: #3182f6 !important; }
.detailPop .redfont { color: #f04452 !important; font-size: 12px !important; line-height: 1.6; }
.detailPop .navyfont { color: #4e5968 !important; }
/* 상품 배지 (입고완료/품절) */
.itemBadge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; vertical-align: middle; margin-right: 5px; line-height: 1.5; }
.itemBadge.stocked { background: #e7f7ee; color: #15a05a; }
.itemBadge.soldout { background: #fdecec; color: #f04452; }
/* 배송정보 (택배사/송장/조회) */
.itemDelivery { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 9px 11px; background: #f7f8fa; border-radius: 10px; font-size: 13px; font-weight: 400 !important; }
.itemDelivery .dlvCo { color: #6b7684; font-weight: 600; }
.itemDelivery .dlvNo { color: #191f28; font-weight: 700; }
.itemDelivery .btnTrack { display: inline-block; margin-left: auto; background: #fff !important; color: #3182f6 !important; border: 1px solid #cfe0fb !important; border-radius: 7px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer; text-decoration: none !important; line-height: 1.4; white-space: nowrap; }
.itemDelivery .btnTrack:hover { background: #f0f6ff !important; }
/* default.css 의 #PContent .appTable td:first-child+td+td{max-width:50px;overflow:hidden} 가 상품표 3번째(금액) 컬럼을 잘라서 전역 무력화 (데스크탑 포함) */
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(3) { max-width: none !important; overflow: visible !important; white-space: normal !important; }
.detailPop .appForm:nth-of-type(1) .appTable a.siteLink { color: #3182f6; font-weight: 700; text-decoration: none; white-space: nowrap; margin-left: 6px; }
.detailPop .appForm:nth-of-type(1) .appTable a.siteLink:hover { text-decoration: underline; }
/* 작은 버튼 */
.detailPop .btns2char, .detailPop .btns4charOn, .detailPop .btnSmall100px {
background: #eef3fb !important; color: #3182f6 !important; border: 1px solid #cfe0fb !important;
border-radius: 8px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 700 !important;
cursor: pointer; width: auto !important; height: auto !important; display: inline-block !important;
}
@media (max-width: 768px) {
/* 메인 표 세로 스택 (colgroup 붕괴 방지) */
.detailPop .appForm > .appTable, .detailPop .appForm > .appTable > tbody { display: block !important; width: 100% !important; }
.detailPop .appForm > .appTable > colgroup { display: none !important; }
.detailPop .appForm > .appTable > tbody > tr { display: block !important; width: 100% !important; }
.detailPop .appForm > .appTable > tbody > tr > th {
display: block !important; width: 100% !important; text-align: left !important;
color: #8b95a1 !important; font-size: 12px !important; font-weight: 700 !important;
padding: 10px 0 2px !important; border: 0 !important;
}
.detailPop .appForm > .appTable > tbody > tr > td {
display: block !important; width: 100% !important; text-align: left !important;
border: 0 !important; padding: 2px 0 8px !important; font-size: 14px; color: #191f28;
}
.detailPop .appForm > .appTable > tbody > tr > td.right { text-align: left !important; }
/* 상품내역 표의 헤더(4칸)는 모바일에서 숨김 */
.detailPop .appForm:nth-of-type(1) > .appTable > tbody > tr:first-child { display: none !important; }
/* ★ 상품표를 확실히 block 으로 풀어 셀이 colgroup 폭(20%)에 갇히지 않게 */
.detailPop .appForm:nth-of-type(1) .appTable,
.detailPop .appForm:nth-of-type(1) .appTable tbody,
.detailPop .appForm:nth-of-type(1) .appTable tr { display: block !important; width: 100% !important; }
.detailPop .appForm:nth-of-type(1) .appTable tr > td { width: 100% !important; box-sizing: border-box !important; }
/* 상품내역: 각 상품을 라벨 있는 미니 카드로 */
.detailPop .appForm:nth-of-type(1) > .appTable > tbody > tr {
border: 1px solid #eef0f2 !important; border-radius: 12px; background: #fbfcfe;
padding: 12px 14px !important; margin-bottom: 10px;
}
.detailPop .appForm:nth-of-type(1) > .appTable > tbody > tr > td { padding: 3px 0 !important; }
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(1) { font-size: 15px !important; font-weight: 700 !important; color: #191f28 !important; margin-bottom: 4px; }
/* 상품명 옆 바로가기 링크 (사이트 컬럼 제거 → 상품명 td 안으로 이동) */
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(1) a.siteLink {
display: inline-block; font-size: 12px !important; font-weight: 700 !important; color: #3182f6 !important;
text-decoration: none; white-space: nowrap !important; word-break: keep-all !important;
margin-left: 4px; vertical-align: middle;
}
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(1) a.siteLink:hover { text-decoration: underline; }
/* 옵션/금액: 라벨 + 값 (블록 한 줄, ::before 인라인 라벨) */
/* ★ default.css #PContent .appTable td:first-child+td+td 의 max-width:50px/overflow:hidden 무력화 (값 잘림 방지) */
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(2),
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(3) {
display: block !important; width: 100% !important; max-width: none !important; overflow: visible !important;
font-size: 14px; text-align: left !important; white-space: normal !important;
}
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(2)::before { content: "선택사항"; }
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(3)::before { content: "금액"; }
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(2)::before,
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(3)::before {
display: inline-block; width: 52px; color: #8b95a1; font-size: 12px; font-weight: 600;
}
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(3) { color: #3182f6 !important; font-weight: 700 !important; }
.detailPop .appForm:nth-of-type(1) .appTable td:nth-child(3)::after { content: " 원"; color: #8b95a1; font-size: 12px; font-weight: 500; }
/* ── 배송대행 물품 카드 (shipGoods): buy 카드 라벨(선택사항/금액/원) 제거 + 배송정보 폼 토스화 ── */
.detailPop .appForm.shipGoods .appTable td:nth-child(2)::before,
.detailPop .appForm.shipGoods .appTable td:nth-child(3)::after { content: "" !important; display: none !important; }
.detailPop .appForm.shipGoods .appTable td:nth-child(1) {
display: inline-block !important; width: auto !important; font-size: 12px !important; font-weight: 600 !important;
color: #8b95a1 !important; margin: 0 0 4px !important;
}
.detailPop .appForm.shipGoods .appTable td:nth-child(2) {
display: block !important; font-size: 15px !important; font-weight: 700 !important; color: #191f28 !important;
}
.detailPop .appForm.shipGoods .appTable td:nth-child(3) {
display: block !important; color: #191f28 !important; font-weight: 400 !important; margin-top: 10px !important;
}
.detailPop .appForm.shipGoods .appTable td:nth-child(3)::before {
content: "택배사 / 송장번호" !important; display: block !important; width: auto !important;
font-size: 12px; color: #8b95a1; font-weight: 600; margin-bottom: 6px;
}
/* 배송정보 입력 폼: 택배사 select + 송장 input + 수정 버튼 → 세로 토스 */
.detailPop .shipDelivEdit { display: flex; flex-direction: column; gap: 8px; }
.detailPop .shipDelivEdit .selectbox,
.detailPop .shipDelivEdit .inputBox {
width: 100% !important; box-sizing: border-box !important; margin: 0 !important; vertical-align: middle;
border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 12px 14px !important;
font-size: 14px !important; background: #fff !important; height: auto !important; color: #191f28 !important;
}
.detailPop .shipDelivEdit .btnEditDeliv {
width: 100% !important; margin: 0 !important; background: #3182f6 !important; color: #fff !important;
border: 0 !important; border-radius: 10px !important; padding: 12px 0 !important; font-size: 14px !important;
font-weight: 700 !important; cursor: pointer; height: auto !important;
}
/* 진행상황 flowTable → 세로 스텝 */
.detailPop .flowTable, .detailPop .flowTable tbody, .detailPop .flowTable tr, .detailPop .flowTable td { display: block !important; width: 100% !important; }
.detailPop .flowTable td.statusArrow { display: none !important; }
.detailPop .flowTable td.statusOn, .detailPop .flowTable td.statusOff {
position: relative;
background-image: none !important; background: #f2f4f6 !important; color: #8b95a1 !important;
border-radius: 12px !important; padding: 12px 76px 12px 14px !important; font-weight: 700 !important; font-size: 14px !important;
width: 100% !important; height: auto !important; text-align: left !important; margin-top: 8px; line-height: 1.4;
}
/* 활성 스텝: 파란 배경 + 좌측 액센트 바 + 우측 '진행중' 배지 */
.detailPop .flowTable td.statusOn {
background: #e7f0fe !important; color: #3182f6 !important; box-shadow: inset 4px 0 0 #3182f6;
}
.detailPop .flowTable td.statusOn::after {
content: "● 진행중"; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
font-size: 11px; font-weight: 800; color: #3182f6; background: #fff; border-radius: 999px; padding: 4px 10px;
}
.detailPop .flowTable td.script { font-size: 13px !important; color: #6b7684 !important; padding: 4px 2px 10px !important; line-height: 1.6; }
}
@media (max-width: 768px) {
/* 주문 표 → 카드 리스트 (colgroup 붕괴 방지) */
.orderPage .appForm { box-shadow: none !important; background: transparent !important; padding: 0 !important; }
/* 상태 배지: 카드 우상단 */
.orderPage .appTable3 tr { position: relative; }
.orderPage td.navyfont .orderStatus { position: absolute; top: 14px; right: 16px; }
.orderPage .appTable3, .orderPage .appTable3 tbody { display: block !important; width: 100% !important; }
.orderPage .appTable3 colgroup { display: none !important; }
.orderPage .appTable3 tr.thead { display: none !important; }
.orderPage .appTable3 tr {
display: block !important; width: 100% !important; box-sizing: border-box;
background: #fff; border: 1px solid #e5e8eb; border-radius: 14px;
padding: 14px 16px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.orderPage .appTable3 td {
display: block !important; width: auto !important; text-align: left !important;
border: 0 !important; padding: 2px 0 !important;
}
/* 숨김 컬럼(선금/잔금/배송일)은 계속 숨김 */
.orderPage .appTable3 td[style*="display:none"] { display: none !important; }
/* 빈 메시지 */
.orderPage .appTable3 td[colspan] { text-align: center !important; color: #8b95a1; padding: 22px 0 !important; }
/* 날짜 */
.orderPage .appTable3 td.center:first-child { color: #8b95a1; font-size: 13px; }
.orderPage .appTable3 td.center:first-child div { display: inline; }
.orderPage .appTable3 td.center:first-child div:nth-child(2)::before { content: " · "; color: #c4c9d0; }
.orderPage .appTable3 td.center:first-child strong { color: #4e5968; font-weight: 600; }
/* 주문번호 + 상품명 */
.orderPage .appTable3 td:nth-child(2) { margin-top: 4px; }
.orderPage .appTable3 td:nth-child(2) > div:first-child { font-size: 12px; color: #8b95a1; }
.orderPage .appTable3 td:nth-child(2) > div:nth-child(2) { font-size: 15px; font-weight: 700; color: #191f28; margin-top: 2px; }
/* 합계 */
.orderPage .appTable3 td.right { margin-top: 8px; font-size: 14px; color: #4e5968; }
.orderPage .appTable3 td.right strong { color: #3182f6; font-size: 17px; }
/* 상태 + 버튼 */
.orderPage .appTable3 td.navyfont { text-align: left !important; margin-top: 10px !important;
padding-top: 10px !important; border-top: 1px solid #f2f4f6 !important; color: #4e5968; }
/* 상세보기 / 후기작성: 각각 풀너비 한 줄 (높이 통일) */
.orderPage .btnSmall100px, .orderPage .btns4charOn {
background: #3182f6 !important; color: #fff !important; border: 0 !important;
border-radius: 10px !important; padding: 13px !important; font-size: 14px !important;
font-weight: 700 !important; cursor: pointer; width: 100% !important; min-width: 0 !important;
display: block !important; margin: 8px 0 0 !important; height: auto !important;
box-sizing: border-box !important; text-align: center;
}
.orderPage td.navyfont .reviewWrap { display: block; margin: 8px 0 0; }
.orderPage td.navyfont .btnReview {
display: block; width: 100%; box-sizing: border-box; padding: 13px;
text-align: center; margin: 0; border-radius: 10px; font-size: 14px;
}
/* 페이징 */
.orderPage .paging { text-align: center; margin: 4px 0 10px; }
.orderPage .paging img { display: none; }
.orderPage .paging a, .orderPage .paging strong { display: inline-block; padding: 6px 11px; margin: 0 1px; font-size: 14px; text-decoration: none; }
.orderPage .paging strong { color: #3182f6; font-weight: 800; }
/* 배송대행 안내문 작게 */
.orderPage .appForm > p { font-size: 12px !important; color: #8b95a1 !important; line-height: 1.6 !important; margin: 0 0 12px !important; }
}
.chargePage .btnBox input.btn4char { background: #3182f6 !important; color: #fff !important; }
.chargePage .btnBox input.btn4char:hover { background: #2272eb !important; }
/* =========================================================
드림캐쉬 내역 (/mypage/cash_list.php) 토스화
========================================================= */
.cashListPage { border-top: 0 !important; }
.cashListPage h1.title { border-bottom: 0 !important; }
/* 안내 → 토스 정보 카드 */
.cashListPage .conBox {
width: auto !important; background: #f5f9ff !important; border: 1px solid #e7f0fe !important;
border-radius: 14px !important; padding: 16px 18px !important; margin: 0 0 14px !important;
}
.cashListPage .conBox h4 { font-size: 14px !important; font-weight: 800 !important; color: #191f28 !important; margin: 0 0 8px !important; }
.cashListPage .conBox p { padding-left: 0 !important; font-size: 12px !important; color: #6b7684 !important; line-height: 1.7 !important; margin: 0 !important; }
.cashListPage .conBox .redfont { color: #f04452 !important; }
/* 인출신청 버튼 (보조 — 회색) */
.cashRefundBtn { background: #f2f4f6 !important; color: #4e5968 !important; }
.cashRefundBtn:hover { background: #e5e8eb !important; }
/* 드림캐쉬 내역 표 토스화 (PC) — order.php 와 동일 톤 */
@media (min-width: 769px) {
.cashListPage .appForm {
float: none !important; display: flow-root !important; width: 100% !important; box-sizing: border-box;
background: #fff !important; border: 1px solid #e3e6ea !important; border-radius: 16px !important;
padding: 18px 22px 22px !important; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.cashListPage .appTable3 { border: 0 !important; border-top: 0 !important; width: 100% !important; }
/* 헤더행 (첫 tr) */
.cashListPage .appTable3 tr:first-child th {
background: transparent !important; border: 0 !important; border-bottom: 1px solid #e5e8eb !important;
color: #8b95a1 !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 8px 12px !important;
line-height: 1.4; vertical-align: middle; text-align: center;
}
.cashListPage .appTable3 tr:first-child th:nth-child(2), .cashListPage .appTable3 tr:first-child th:nth-child(6) { text-align: left !important; }
.cashListPage .appTable3 tr:first-child th:nth-child(3), .cashListPage .appTable3 tr:first-child th:nth-child(4), .cashListPage .appTable3 tr:first-child th:nth-child(5) { text-align: right !important; }
/* 데이터행 */
.cashListPage .appTable3 tr:hover td { background: #f9fafb !important; }
.cashListPage .appTable3 td {
border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; padding: 14px 8px !important;
vertical-align: middle !important; font-size: 14px !important; color: #4e5968 !important; background: transparent !important;
}
.cashListPage .appTable3 td[colspan] { text-align: center !important; color: #8b95a1 !important; padding: 32px 0 !important; }
/* 날짜 */
.cashListPage .appTable3 td:nth-child(1) { color: #8b95a1 !important; font-size: 12.5px; white-space: nowrap; }
/* 내역 */
.cashListPage .appTable3 td:nth-child(2) { color: #191f28 !important; font-weight: 600; }
/* 입금(+ 파랑) / 출금(- 빨강) / 잔액 — 우측 */
.cashListPage .appTable3 td.right { text-align: right !important; white-space: nowrap; }
.cashListPage .appTable3 td:nth-child(3) { color: #3182f6 !important; font-weight: 700; }
.cashListPage .appTable3 td:nth-child(3):not(:empty)::before { content: "+ "; }
.cashListPage .appTable3 td:nth-child(4) { color: #f04452 !important; font-weight: 700; }
.cashListPage .appTable3 td:nth-child(4):not(:empty)::before { content: "- "; }
.cashListPage .appTable3 td:nth-child(5) { color: #191f28 !important; font-weight: 700; }
.cashListPage .appTable3 td:nth-child(3):not(:empty)::after,
.cashListPage .appTable3 td:nth-child(4):not(:empty)::after,
.cashListPage .appTable3 td:nth-child(5):not(:empty)::after { content: " 원"; font-size: 12px; font-weight: 500; color: #8b95a1; }
/* 비고 */
.cashListPage .appTable3 td:nth-child(6) { color: #8b95a1 !important; font-size: 12.5px; }
/* 페이징 — 현재 파란 박스, gif 화살표 숨김, 카드 안 푸터 */
.cashListPage .paging { text-align: center; margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid #f2f4f6; clear: both; }
.cashListPage .paging img { display: none !important; }
.cashListPage .paging a:has(img) { display: none !important; }
.cashListPage .paging a, .cashListPage .paging strong {
display: inline-block; min-width: 36px; box-sizing: border-box; padding: 8px 10px; margin: 0 3px; float: none !important;
font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 9px; text-align: center; line-height: 1.1;
}
.cashListPage .paging a { color: #4e5968; }
.cashListPage .paging a:hover { background: #f2f4f6; color: #3182f6; }
.cashListPage .paging strong { background: #3182f6; color: #fff !important; font-weight: 800; }
}
@media (max-width: 768px) {
/* 캐쉬 내역 표 → 카드 리스트 (colgroup 붕괴 방지) */
.cashListPage .appForm { box-shadow: none !important; background: transparent !important; padding: 0 !important; width: auto !important; margin-bottom: 24px !important; }
.cashListPage .appTable3, .cashListPage .appTable3 tbody { display: block !important; width: 100% !important; }
.cashListPage .appTable3 colgroup { display: none !important; }
.cashListPage .appTable3 tr:first-child { display: none !important; }
.cashListPage .appTable3 tr {
display: block !important; position: relative; width: 100% !important; box-sizing: border-box;
background: #fff; border: 1px solid #e5e8eb; border-radius: 14px;
padding: 14px 16px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cashListPage .appTable3 td {
display: block !important; width: auto !important; text-align: left !important;
border: 0 !important; padding: 1px 0 !important;
}
.cashListPage .appTable3 td:empty { display: none !important; }
/* 날짜 */
.cashListPage .appTable3 td:nth-child(1) { color: #8b95a1; font-size: 13px; }
/* 내역 */
.cashListPage .appTable3 td:nth-child(2) { font-size: 15px; font-weight: 700; color: #191f28; margin-top: 3px; padding-right: 100px !important; }
/* 입금(+) / 출금(-) → 우상단 */
.cashListPage .appTable3 td:nth-child(3),
.cashListPage .appTable3 td:nth-child(4) {
position: absolute !important; top: 14px; right: 16px; font-weight: 800; font-size: 16px;
}
.cashListPage .appTable3 td:nth-child(3) { color: #3182f6; }
.cashListPage .appTable3 td:nth-child(3):not(:empty)::before { content: "+"; }
.cashListPage .appTable3 td:nth-child(4) { color: #f04452; }
.cashListPage .appTable3 td:nth-child(4):not(:empty)::before { content: "-"; }
.cashListPage .appTable3 td:nth-child(3):not(:empty)::after,
.cashListPage .appTable3 td:nth-child(4):not(:empty)::after { content: " 원"; font-size: 12px; font-weight: 500; color: #8b95a1; }
/* 잔액 */
.cashListPage .appTable3 td:nth-child(5) { color: #8b95a1; font-size: 13px; margin-top: 7px; }
.cashListPage .appTable3 td:nth-child(5):not(:empty)::before { content: "잔액 "; }
.cashListPage .appTable3 td:nth-child(5):not(:empty)::after { content: " 원"; }
/* 비고 */
.cashListPage .appTable3 td:nth-child(6) { color: #8b95a1; font-size: 12px; margin-top: 2px; }
/* 빈 메시지 */
.cashListPage .appTable3 td[colspan] { position: static !important; text-align: center !important; color: #8b95a1; padding: 22px 0 !important; font-size: 14px; }
/* 페이징 */
.cashListPage .paging { text-align: center; margin: 4px 0 10px; }
.cashListPage .paging img { display: none; }
.cashListPage .paging a, .cashListPage .paging strong { display: inline-block; padding: 6px 11px; margin: 0 1px; font-size: 14px; text-decoration: none; }
.cashListPage .paging strong { color: #3182f6; font-weight: 800; }
}
@media (max-width: 768px) {
/* ★ 충전 폼 appTable2: colgroup(25%/*)+table-layout:fixed 로 표가 붕괴 → 표/행도 block 으로 풀어 풀너비
(summaryTable 은 라벨-값 flex 레이아웃이라 제외) */
.chargePage .appTable2:not(.summaryTable),
.chargePage .appTable2:not(.summaryTable) tbody,
.chargePage .appTable2:not(.summaryTable) tr {
display: block !important; width: 100% !important;
}
}
/* ── 계산하기 후 결제 요약(#bodyPay) 토스 카드 ── */
#bodyPay {
background: #f9fafb; border: 1px solid #e5e8eb; border-radius: 14px;
padding: 6px 18px; margin-top: 18px;
}
#bodyPay .appTable2 { border: 0 !important; width: 100% !important; }
#bodyPay .appTable2 tbody { display: block !important; }
#bodyPay .appTable2 tr {
display: flex !important; justify-content: space-between; align-items: baseline;
padding: 11px 0; border-bottom: 1px solid #eef0f2; width: 100% !important;
}
#bodyPay .appTable2 tr:last-child { border-bottom: 0; }
#bodyPay .appTable2 th {
display: inline !important; width: auto !important; text-align: left !important;
font-weight: 500 !important; color: #6b7684 !important; font-size: 14px !important;
background: transparent !important; padding: 0 !important;
}
#bodyPay .appTable2 td {
display: inline !important; width: auto !important; text-align: right !important;
color: #191f28 !important; font-weight: 700 !important; font-size: 15px !important; padding: 0 !important;
}
#bodyPay .appTable2 tr:last-child th { font-weight: 700 !important; color: #191f28 !important; }
#bodyPay .orangefont { color: #3182f6 !important; font-size: 19px !important; }
/* 안내 문구 박스 */
#bodyPay div[style*="f1f1f1"] {
background: #eef3fb !important; color: #4e5968 !important; border-radius: 10px !important;
font-size: 13px !important; line-height: 1.6 !important; padding: 12px !important;
margin-top: 14px !important; letter-spacing: 0 !important;
}
#bodyPay div[style*="f1f1f1"] strong { color: #3182f6 !important; }
/* 결제하기 버튼: 파란 풀너비 */
#bodyPay .btnBox { margin-bottom: 8px !important; }
#bodyPay .btnBox input.btn4char { background: #3182f6 !important; color: #fff !important; width: 100% !important; }
#bodyPay .btnBox input.btn4char:hover { background: #2272eb !important; }
/* 입력칸 ? 도움말 툴팁 (마우스오버=hover / 모바일 탭=focus) */
.appTable2 ul.list > li .gField { position: relative; }
.appTable2 ul.list > li .gField .inputBox { padding-right: 42px !important; }
.qTip {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; border-radius: 50%;
background: #e8edf3; color: #6b7684; font-size: 13px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 3; -webkit-user-select: none; user-select: none;
}
.qTip:hover, .qTip:focus { background: #3182f6; color: #fff; outline: none; }
.qBubble {
position: absolute; bottom: calc(100% + 9px); right: -6px;
width: 210px !important; max-width: 72vw !important; min-width: 180px !important;
background: #191f28; color: #fff;
font-size: 12.5px; font-weight: 500; line-height: 1.55;
padding: 10px 12px; border-radius: 10px; text-align: left;
box-shadow: 0 6px 20px rgba(0,0,0,.22);
opacity: 0; visibility: hidden; transform: translateY(4px);
transition: opacity .15s, transform .15s; z-index: 20; white-space: normal;
}
/* ★ #wrap *{max-width:100%!important} (특이도 1,0,0)를 이기려면 #wrap 접두 필요 */
#wrap .qBubble { width: 210px !important; max-width: 72vw !important; min-width: 180px !important; }
.qBubble::after {
content: ""; position: absolute; top: 100%; right: 16px;
border: 7px solid transparent; border-top-color: #191f28;
}
/* ?→말풍선 사이 빈틈을 메우는 투명 브릿지 (링크까지 마우스 이동 가능) */
.qBubble::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.qTip:hover .qBubble, .qTip:focus .qBubble, .qBubble:hover {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* 말풍선 안 링크 (다크 배경) */
.qBubbleLink { color: #9cc4ff !important; text-decoration: underline; font-weight: 700; white-space: nowrap; }
.qBubbleLink:hover { color: #c4dcff !important; }
/* 보험가입 (유료) + ? 묶음 */
.insOpt { display: inline-flex; align-items: center; gap: 6px; position: relative; }
/* =========================================================
Phase 4 — 배송대행 신청서: 주소/배송수단/약관 + 토스 라디오·체크박스
========================================================= */
/* 배송지 가져오기: 가로 풀버튼 */
.btnOpenAddressList {
display: block !important; width: 100% !important; box-sizing: border-box !important;
background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important;
border-radius: 12px !important; padding: 13px !important; font-size: 15px !important;
font-weight: 700 !important; cursor: pointer; margin: 2px 0 10px !important;
}
.btnOpenAddressList:hover { background: #e9edf2 !important; }
/* 토스 라디오/체크박스 (요청 폼 한정: .tossCheck / .shipMethods) */
.tossCheck { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
font-size: 15px; color: #191f28; line-height: 1.4; }
.tossCheck span { -webkit-user-select: none; user-select: none; }
.tossCheck input[type="checkbox"], .tossCheck input[type="radio"], .shipMethods input[type="radio"] {
-webkit-appearance: none; appearance: none; margin: 0;
width: 22px; height: 22px; border: 2px solid #d1d6db; background: #fff;
cursor: pointer; position: relative; flex: 0 0 auto; transition: all .12s;
}
.tossCheck input[type="radio"], .shipMethods input[type="radio"] { border-radius: 50%; }
.tossCheck input[type="checkbox"] { border-radius: 6px; }
.tossCheck input[type="checkbox"]:checked, .tossCheck input[type="radio"]:checked, .shipMethods input[type="radio"]:checked {
background: #3182f6; border-color: #3182f6;
}
.tossCheck input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tossCheck input[type="radio"]:checked::after, .shipMethods input[type="radio"]:checked::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
background: #fff; border-radius: 50%; transform: translate(-50%, -50%);
}
.shipMethods input[type="radio"]:disabled {
background: #f2f4f6; border-color: #e5e8eb; cursor: not-allowed;
}
/* 배송수단 한 줄 */
.shipMethods { display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
list-style: none; padding: 0; margin: 6px 0 0; }
.shipMethods li { display: flex; align-items: center; gap: 7px; position: relative; }
.shipMethods label { font-size: 15px; color: #191f28; cursor: pointer; }
.shipMethods .qTip { position: relative; top: auto; right: auto; transform: none; margin-left: 2px; }
/* K-packet 유의사항 박스 */
.kpacketBox { margin-top: 12px; padding: 12px 14px; background: #fff7ed;
border: 1px solid #ffe6c9; border-radius: 12px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kpacketView { color: #3182f6; font-weight: 700; text-decoration: none; font-size: 14px; }
/* 배송불가 안내 모달 (토스 스타일) */
.dhModalBg {
display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;
background: rgba(0,0,0,.45); align-items: center; justify-content: center; padding: 24px;
}
.dhModal {
position: relative; background: #fff; border-radius: 18px; max-width: 340px; width: 100%;
padding: 30px 22px 22px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.25);
}
.dhModalX {
position: absolute; top: 12px; right: 12px; background: none; border: 0;
font-size: 18px; color: #b0b8c1; cursor: pointer; line-height: 1; padding: 4px;
}
.dhModalIcon { font-size: 40px; margin-bottom: 10px; line-height: 1; }
.dhModalMsg { font-size: 15px; color: #333d4b; line-height: 1.6; margin: 0 0 22px; font-weight: 500; }
.dhModalBtn {
display: block; width: 100%; box-sizing: border-box; background: #3182f6; color: #fff;
border: 0; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.dhModalBtn:hover { background: #2272eb; }
/* 약관 동의 */
.agreeRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.agreeLink { color: #191f28 !important; font-weight: 600; text-decoration: none; font-size: 14px; }
.agreeLink:hover { text-decoration: underline; }
/* PC: 폼 입력칸 토스화 (카드 외 주소/연락처/메모) */
@media (min-width: 769px) {
.appTable2 .inputBox, .appTable2 select.selectbox, .appTable2 .textareabox {
height: auto !important; width: 100% !important; max-width: 480px !important;
box-sizing: border-box !important; border: 1px solid #e5e8eb !important;
border-radius: 10px !important; padding: 12px 14px !important; font-size: 15px !important;
background: #fff !important;
}
.appTable2 .textareabox { max-width: 620px !important; }
.appTable2 .inputBox:focus, .appTable2 select.selectbox:focus, .appTable2 .textareabox:focus {
border-color: #3182f6 !important; box-shadow: 0 0 0 3px rgba(49,130,246,.14) !important; outline: none !important;
}
}
@media (min-width: 769px) {
/* PC: 색상 | 가격 한 줄, 상품명·주소 풀너비, 토스 인풋 */
.appTable2 ul.list > li .goodsRow { display: flex; gap: 8px; }
.appTable2 ul.list > li .goodsRow .gOpt { flex: 1 1 auto; min-width: 0; }
.appTable2 ul.list > li .goodsRow .gPrice { flex: 0 0 38%; }
.appTable2 ul.list > li .inputBox,
.appTable2 ul.list > li select.selectbox {
height: auto !important; width: 100% !important; box-sizing: border-box !important;
border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 12px 14px !important; font-size: 15px !important; background: #fff !important;
}
.appTable2 ul.list > li .inputBox:focus,
.appTable2 ul.list > li select.selectbox:focus {
border-color: #3182f6 !important; box-shadow: 0 0 0 3px rgba(49,130,246,.14) !important; outline: none !important;
}
}
/* =========================================================
메인 하단 섹션 토스화 — TOP5 랭킹 / 환율 / 결제 / 집하지
========================================================= */
/* ── 랭킹 카드 (구매대행/배송대행) ── */
.rankCard { background: #fff; border: 1px solid #eef0f2; border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.rankCard:last-child { margin-bottom: 0; }
.rankHead { font-size: 15px; font-weight: 800; color: #191f28; margin: 0 0 6px; }
.rankHead .rankIco { margin-right: 3px; }
.rankList { margin: 0 !important; padding: 0 !important; list-style: none !important; width: 100% !important; }
.rankList li { display: flex !important; align-items: center; gap: 10px; padding: 9px 0 !important; border-bottom: 1px solid #f7f8fa !important; float: none !important; text-align: left; }
.rankList li:last-child { border-bottom: 0 !important; }
.rankNum { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: #f2f4f6; color: #8b95a1;
font-size: 12px; font-weight: 800; text-align: center; line-height: 22px; }
.rankNum.r1 { background: #3182f6; color: #fff; }
.rankNum.r2 { background: #d4e4fd; color: #2272eb; }
.rankNum.r3 { background: #e6eefb; color: #5b8def; }
.rankNick { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #333d4b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankAmt { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: #191f28; }
.rankAmt em { font-style: normal; font-size: 12px; font-weight: 500; color: #8b95a1; margin-left: 1px; }
.rankEmpty { color: #8b95a1; font-size: 13px; padding: 12px 0; list-style: none; }
/* ── 환율 정보 ── */
.fxRow { display: flex; gap: 8px; margin: 2px 0 0; }
.fxCell { flex: 1 1 0; min-width: 0; background: #f7f8fa; border-radius: 12px; padding: 12px 6px; text-align: center; box-sizing: border-box; }
.fxCell .fxLbl { font-size: 11px; color: #8b95a1; font-weight: 600; margin-bottom: 7px; white-space: nowrap; }
.fxCell .fxLbl .fxSub { display: none; }
.fxCell .fxNum { font-size: 16px; font-weight: 800; color: #4e5968; letter-spacing: -.3px; }
.fxCell.fxMain { background: #eef3fb; }
.fxCell.fxMain .fxLbl { white-space: normal; }
.fxCell.fxMain .fxNum { color: #3182f6; font-size: 18px; }
.fxCell.fxMain .fxTag { display: inline-block; font-size: 9px; font-weight: 800; color: #fff; background: #3182f6; border-radius: 999px; padding: 1px 6px; vertical-align: middle; margin-left: 2px; }
.fxNote { margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; }
.fxNote li { position: relative; padding: 0 0 4px 10px !important; font-size: 11px !important; color: #8b95a1 !important; line-height: 1.6 !important; white-space: normal !important; height: auto !important; }
.fxNote li::before { content: "·"; position: absolute; left: 2px; }
/* ── 결제 정보 ── */
.payItem { background: #f7f8fa; border-radius: 12px; padding: 12px 14px; margin: 0 0 8px; }
.payItem:last-child { margin-bottom: 0; }
.payHead { font-size: 14px; font-weight: 800; color: #191f28; margin-bottom: 4px; }
.payHead .payIco { margin-right: 3px; }
.payBody { font-size: 13px; color: #4e5968; line-height: 1.6; }
.payBody b { color: #191f28; font-weight: 700; }
.payWarn { margin-top: 7px; font-size: 12px; color: #c2671a; background: #fff7ed; border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.payWarn b { color: #c2671a; }
/* ── 집하지 정보 ── */
.addrItem { padding: 11px 0; border-bottom: 1px solid #f2f4f6; }
.addrItem:first-child { padding-top: 2px; }
.addrHead { font-size: 14px; font-weight: 800; color: #191f28; margin-bottom: 6px; }
.addrHead .addrIco { margin-right: 3px; }
.addrBody { font-size: 13px; color: #4e5968; line-height: 1.6; }
.addrBody b { color: #3182f6; font-weight: 700; }
.addrLine { margin-bottom: 5px; }
.addrLine:last-child { margin-bottom: 0; }
.addrTag { display: inline-block; font-size: 11px; font-weight: 700; color: #6b7684; background: #eef0f2; border-radius: 6px; padding: 1px 7px; margin-right: 3px; }
.addrTag.road { color: #3182f6; background: #eef3fb; }
.addrMuted { color: #b0b8c1; font-size: 12px; }
.addrWarn { margin-top: 10px; font-size: 12px; color: #f04452; background: #fdf0f1; border-radius: 10px; padding: 10px 12px; line-height: 1.55; font-weight: 600; }
@media (max-width: 768px) {
/* .lineFull 풀너비 + 바깥 dd 카드(default height/border) 해제 → 안쪽 카드/콘텐츠가 박스 역할 */
.lineContents .lineFull { width: 100% !important; float: none !important; }
.lineFull dl dt { padding: 0 0 6px !important; }
.lineFull dl dd { height: auto !important; min-height: 0 !important; border: 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
/* 집하지 dd 는 카드로 (TOP5 는 안쪽 rankCard 가 카드라 dd 투명 유지) */
.lineFull dl.addressGuide dd { background: #fff !important; border: 1px solid #eef0f2 !important; border-radius: 14px !important; padding: 14px 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
}
/* =========================================================
1:1 문의 목록 (/mypage/qna_list.php) 토스화
========================================================= */
.qnaPage { border-top: 0 !important; }
.qnaPage h1.title { border-bottom: 0 !important; }
/* 문의하기 버튼 */
.qnaPage .qnaWriteRow { width: 100%; margin: 0 0 14px !important; }
.btnQnaWrite { display: block !important; width: 100% !important; box-sizing: border-box !important;
background: #3182f6 !important; color: #fff !important; border: 0 !important;
border-radius: 12px !important; padding: 15px !important; font-size: 15px !important; font-weight: 700 !important;
text-align: center; cursor: pointer; }
.btnQnaWrite:hover { background: #2272eb !important; }
/* 유형/상태 배지 (전역 — 데스크탑 표에서도) */
.qnaType { display: inline-block; font-size: 11px; font-weight: 700; color: #3182f6; background: #eef3fb; border-radius: 999px; padding: 2px 9px; }
.qnaStatus { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.qnaStatus.done { background: #e7f0fe; color: #3182f6; }
.qnaStatus.wait { background: #fff4e5; color: #c2671a; }
/* 1:1 문의 표 토스화 (PC) — order/cash 와 동일 톤 */
@media (min-width: 769px) {
/* 문의하기 버튼: PC는 우측 정렬 + 보통 크기(세로 축소) */
.qnaPage .qnaWriteRow { text-align: right; margin: 0 0 14px !important; }
.qnaPage .btnQnaWrite { display: inline-block !important; width: auto !important; padding: 11px 22px !important; font-size: 14px !important; }
/* 표 카드 */
.qnaPage .appForm {
float: none !important; display: flow-root !important; width: 100% !important; box-sizing: border-box;
background: #fff !important; border: 1px solid #e3e6ea !important; border-radius: 16px !important;
padding: 18px 22px 22px !important; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.qnaPage .appTable3 { border: 0 !important; border-top: 0 !important; width: 100% !important; }
/* 헤더행 */
.qnaPage .appTable3 tr:first-child th {
background: transparent !important; border: 0 !important; border-bottom: 1px solid #e5e8eb !important;
color: #8b95a1 !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 8px 12px !important;
line-height: 1.4; vertical-align: middle; text-align: center;
}
.qnaPage .appTable3 tr:first-child th:nth-child(4) { text-align: left !important; }
/* 데이터행 */
.qnaPage .appTable3 tr:hover td { background: #f9fafb !important; }
.qnaPage .appTable3 td {
border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; padding: 14px 8px !important;
vertical-align: middle !important; font-size: 14px !important; color: #4e5968 !important; background: transparent !important; text-align: center;
}
.qnaPage .appTable3 td[colspan] { text-align: center !important; color: #8b95a1 !important; padding: 32px 0 !important; }
.qnaPage .appTable3 td:nth-child(1), .qnaPage .appTable3 td:nth-child(2), .qnaPage .appTable3 td:nth-child(5) { color: #8b95a1 !important; font-size: 13px; white-space: nowrap; }
/* 제목 */
.qnaPage .appTable3 td:nth-child(4) { text-align: left !important; color: #191f28 !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qnaPage .appTable3 td:nth-child(4) a { color: #191f28 !important; text-decoration: none; font-weight: 600; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.qnaPage .appTable3 td:nth-child(4) a:hover { color: #3182f6 !important; }
/* 페이징 — 현재 파란 박스, gif 화살표 숨김, 카드 안 푸터 */
.qnaPage .paging { text-align: center; margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid #f2f4f6; clear: both; }
.qnaPage .paging img { display: none !important; }
.qnaPage .paging a:has(img) { display: none !important; }
.qnaPage .paging a, .qnaPage .paging strong {
display: inline-block; min-width: 36px; box-sizing: border-box; padding: 8px 10px; margin: 0 3px; float: none !important;
font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 9px; text-align: center; line-height: 1.1;
}
.qnaPage .paging a { color: #4e5968; }
.qnaPage .paging a:hover { background: #f2f4f6; color: #3182f6; }
.qnaPage .paging strong { background: #3182f6; color: #fff !important; font-weight: 800; }
}
/* 게시판 목록(notice/faq/review 등 sb.list) PC 토스 표 — order/cash 톤 통일 */
@media (min-width: 769px) {
.boardPage .appForm { float: none !important; width: 100% !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.boardPage .appForm > div {
width: 100% !important; box-sizing: border-box; display: flow-root;
background: #fff !important; border: 1px solid #e3e6ea !important; border-radius: 16px !important;
padding: 18px 22px 22px !important; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
/* 상단 컨트롤(카테고리 select + 글쓰기) */
.boardPage .boardCtrl { margin: 0 0 14px !important; }
.boardPage .boardCtrl .selectbox { border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 9px 12px !important; font-size: 14px !important; background: #fff !important; height: auto !important; }
.boardPage .boardCtrl .btnSmall100px { background: #3182f6 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; width: auto !important; height: auto !important; }
/* 목록 표 */
.boardPage .boardList { border: 0 !important; border-top: 0 !important; width: 100% !important; }
.boardPage .boardList tr:first-child th { background: transparent !important; border: 0 !important; border-bottom: 1px solid #e5e8eb !important; color: #8b95a1 !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 8px 12px !important; }
.boardPage .boardList td { border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; padding: 14px 8px !important; vertical-align: middle !important; background: transparent !important; }
.boardPage .boardList tr:not(.noticeRow):hover td { background: #f9fafb !important; }
.boardPage .boardList td.center { color: #8b95a1 !important; font-size: 13px; }
.boardPage .boardList td[colspan] { text-align: center !important; color: #8b95a1 !important; padding: 32px 0 !important; }
.boardPage .boardList .subject { font-size: 15px; line-height: 1.4; }
.boardPage .boardList .subject a, .boardPage .boardList .subject strong { color: #191f28 !important; text-decoration: none; font-weight: 600; }
.boardPage .boardList .subject a:hover { color: #3182f6 !important; }
.boardPage .boardList .subject span { color: #3182f6; }
.boardPage .boardList .subjectInfo { display: block; font-size: 12px; color: #8b95a1; margin-top: 5px; }
/* 검색 */
.boardPage .searching { margin: 14px 0 4px; text-align: center; }
.boardPage .searching .selectbox2, .boardPage .searching .inputBox { border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 9px 12px !important; font-size: 14px !important; height: auto !important; vertical-align: middle; box-sizing: border-box; }
.boardPage .searching .btnSmall100px { background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; width: auto !important; height: auto !important; }
/* 삭제(관리자) */
.boardPage > div .btn4char, .boardPage .appForm .btn4char { background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; border-radius: 9px !important; padding: 9px 16px !important; font-size: 13px !important; cursor: pointer; }
/* 페이징 — 현재 파란 박스, gif 화살표 숨김, 카드 안 푸터 */
.boardPage .paging { text-align: center; margin: 16px 0 0 !important; padding-top: 16px; border-top: 1px solid #f2f4f6; clear: both; }
.boardPage .paging img { display: none !important; }
.boardPage .paging a:has(img) { display: none !important; }
.boardPage .paging a, .boardPage .paging strong { display: inline-block; min-width: 36px; box-sizing: border-box; padding: 8px 10px; margin: 0 3px; float: none !important; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 9px; text-align: center; line-height: 1.1; }
.boardPage .paging a { color: #4e5968; }
.boardPage .paging a:hover { background: #f2f4f6; color: #3182f6; }
.boardPage .paging strong { background: #3182f6; color: #fff !important; font-weight: 800; }
/* 글쓰기 폼(boardWrite) PC 토스 입력 */
.boardPage .boardWrite { border: 0 !important; border-top: 0 !important; width: 100% !important; }
.boardPage .boardWrite > tbody > tr > th {
text-align: left !important; vertical-align: middle !important; border: 0 !important; border-bottom: 1px solid #f2f4f6 !important;
background: transparent !important; color: #4e5968 !important; font-size: 14px !important; font-weight: 700 !important; padding: 16px 10px 16px 0 !important;
}
.boardPage .boardWrite > tbody > tr > th.must::after { content: " *"; color: #f04452; }
.boardPage .boardWrite > tbody > tr > td {
border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; padding: 12px 0 !important; background: transparent !important; vertical-align: middle !important; font-size: 14px; color: #4e5968;
}
.boardPage .boardWrite .inputBox, .boardPage .boardWrite select {
box-sizing: border-box; width: 100% !important; max-width: 100%; border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 11px 13px !important; font-size: 14px !important; background: #fff !important; height: auto !important;
}
.boardPage .boardWrite .inputBox:focus, .boardPage .boardWrite select:focus { border-color: #3182f6 !important; outline: none; }
.boardPage .boardWrite .selectbox { width: auto !important; min-width: 160px; }
.boardPage .boardWrite .textareabox { box-sizing: border-box; width: 100% !important; border: 1px solid #e5e8eb !important; border-radius: 12px !important; padding: 12px !important; font-size: 14px !important; min-height: 220px; }
.boardPage .boardWrite .wyditor, .boardPage .boardWrite iframe { max-width: 100% !important; }
/* 첨부 추가/삭제 버튼 */
.boardPage .boardWrite .attach .btns2char {
background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; border-radius: 9px !important;
padding: 8px 14px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; height: auto !important;
}
.boardPage .boardWrite .attach .btns2char:hover { background: #e9edf2 !important; }
/* 체크박스 라벨(공지/비밀글) */
.boardPage .boardWrite td { line-height: 1.6; }
}
@media (max-width: 768px) {
/* 문의 표(appTable3, colgroup+fixed) → 카드 리스트 */
.qnaPage .appForm { box-shadow: none !important; background: transparent !important; padding: 0 !important; width: auto !important; }
.qnaPage .appTable3, .qnaPage .appTable3 tbody { display: block !important; width: 100% !important; }
.qnaPage .appTable3 colgroup { display: none !important; }
.qnaPage .appTable3 tr:first-child { display: none !important; }
.qnaPage .appTable3 tr {
display: flex !important; flex-wrap: wrap; align-items: center; position: relative;
width: 100% !important; box-sizing: border-box; background: #fff;
border: 1px solid #e5e8eb; border-radius: 14px; padding: 14px 16px; margin: 0 0 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.qnaPage .appTable3 td { display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; text-align: left !important; }
.qnaPage .appTable3 td:nth-child(1) { display: none !important; } /* NO */
/* 1행: 제목 (전체폭, 볼드) */
.qnaPage .appTable3 td:nth-child(4) { order: 1; flex: 1 1 100%; font-size: 15px; font-weight: 700; margin: 0 0 9px; }
.qnaPage .appTable3 td:nth-child(4) a { color: #191f28 !important; text-decoration: none; }
/* 2행 메타: 유형 · 상태 · 작성일 · 답변일 (작은 배지/회색) */
.qnaPage .appTable3 td:nth-child(3) { order: 2; flex: 0 0 auto; margin-right: 7px; } /* 유형 */
.qnaPage .appTable3 td:nth-child(6) { order: 3; flex: 0 0 auto; margin-right: 10px; } /* 상태 */
.qnaPage .appTable3 td:nth-child(2) { order: 4; flex: 0 0 auto; font-size: 12px; color: #8b95a1; } /* 작성일 */
.qnaPage .appTable3 td:nth-child(2)::before { content: "작성 "; }
.qnaPage .appTable3 td:nth-child(5) { order: 5; flex: 0 0 auto; font-size: 12px; color: #8b95a1; margin-left: 8px; } /* 답변일 */
.qnaPage .appTable3 td:nth-child(5)::before { content: "답변 "; }
/* 빈 메시지 */
.qnaPage .appTable3 td[colspan] { position: static !important; order: 0; flex: 1 1 100%; text-align: center !important; color: #8b95a1; padding: 22px 0 !important; font-size: 14px; }
/* 페이징 */
.qnaPage .paging { text-align: center; margin: 4px 0 10px; }
.qnaPage .paging img { display: none; }
.qnaPage .paging a, .qnaPage .paging strong { display: inline-block; padding: 6px 11px; margin: 0 1px; font-size: 14px; text-decoration: none; }
.qnaPage .paging strong { color: #3182f6; font-weight: 800; }
}
/* =========================================================
1:1 문의 상세 (/mypage/qna_detail.php) 토스화
========================================================= */
.qnaDetailPage { border-top: 0 !important; }
.qnaDetailPage h1.title { border-bottom: 0 !important; }
.qnaDetailPage .appTable3 th .eng { display: none !important; } /* th 영문 라벨 숨김 */
/* 내용/답변 박스 */
.qnaDetailPage .qnaBox { display: block; background: #f7f8fa !important; border-radius: 10px; padding: 14px 16px !important; line-height: 1.75; color: #4e5968 !important; font-size: 14px !important; white-space: normal; word-break: break-word; }
.qnaDetailPage .qnaAnswer { background: #fff !important; color: #1f4e9c !important; }
/* 버튼 (목록=파랑 / 삭제=레드 아웃라인, 풀너비 스택) */
.qnaDetailPage .qnaBtnBox p { margin: 0; }
.btnQnaList { display: block; width: 100%; box-sizing: border-box; background: #3182f6 !important; color: #fff !important;
text-align: center; text-decoration: none; font-size: 15px; font-weight: 700; padding: 15px; border-radius: 12px; }
.btnQnaList:hover { background: #2272eb !important; }
.btnQnaDel { display: block; width: 100% !important; box-sizing: border-box; background: #fff !important; color: #f04452 !important;
border: 1px solid #fcd9dc !important; border-radius: 12px !important; padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; margin-top: 8px !important; }
.btnQnaDel:hover { background: #fef2f3 !important; }
@media (max-width: 768px) {
.qnaDetailPage .appForm { box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.qnaDetailPage .appTable3 {
display: block !important; width: 100% !important; box-sizing: border-box;
background: #fff; border: 1px solid #e5e8eb !important; border-radius: 14px;
padding: 4px 16px 8px; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.qnaDetailPage .appTable3 tbody, .qnaDetailPage .appTable3 tr { display: block !important; width: 100% !important; }
.qnaDetailPage .appTable3 colgroup { display: none !important; }
.qnaDetailPage .appTable3 tr { padding: 11px 0; border-bottom: 1px solid #f2f4f6; }
.qnaDetailPage .appTable3 tr:last-child { border-bottom: 0; }
.qnaDetailPage .appTable3 th {
display: block !important; width: 100% !important; text-align: left !important;
font-size: 12px !important; font-weight: 600 !important; color: #8b95a1 !important;
background: transparent !important; padding: 0 0 6px !important; border: 0 !important;
}
.qnaDetailPage .appTable3 td {
display: block !important; width: auto !important; text-align: left !important;
font-size: 14px !important; color: #191f28 !important; border: 0 !important; padding: 0 !important; background: transparent !important;
}
/* 제목 값 강조 */
.qnaDetailPage .appForm > form > .appTable3 tr:nth-child(3) td { font-size: 16px !important; font-weight: 700 !important; }
/* 답변 테이블 → 강조(연블루) 카드 */
.qnaDetailPage .qnaReplyTable { background: #f5f9ff !important; border-color: #d8e6fd !important; }
}
/* =========================================================
1:1 문의 작성 (/mypage/qna_reg.php) 토스화
========================================================= */
.qnaRegPage { border-top: 0 !important; }
.qnaRegPage h1.title { border-bottom: 0 !important; }
.qnaRegPage .appTable3 th .eng { display: none !important; }
.qnaRegPage .regNote { display: block; margin-top: 7px; font-size: 12px; color: #8b95a1; line-height: 1.5; }
.qnaRegPage .regGuide { background: #f7f8fa; border-radius: 10px; padding: 13px 15px; font-size: 12.5px; color: #6b7684; line-height: 1.65; margin-bottom: 14px; }
.qnaRegPage .regGuide b { color: #f04452; font-weight: 700; }
/* 버튼 (보내기=파랑 / 취소=회색, 풀너비 스택) */
.qnaRegPage .regBtns { margin: 0; }
.btnQnaSubmit { display: block; width: 100%; box-sizing: border-box; background: #3182f6 !important; color: #fff !important;
border: 0 !important; border-radius: 12px !important; padding: 15px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; }
.btnQnaSubmit:hover { background: #2272eb !important; }
.btnQnaCancel { display: block; width: 100% !important; box-sizing: border-box; background: #fff !important; color: #4e5968 !important;
border: 1px solid #e5e8eb !important; border-radius: 12px !important; padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; margin-top: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.btnQnaCancel:hover { background: #f7f8fa !important; }
@media (max-width: 768px) {
.qnaRegPage .appForm { box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.qnaRegPage .appTable3, .qnaRegPage .appTable3 tbody, .qnaRegPage .appTable3 tr { display: block !important; width: 100% !important; }
.qnaRegPage .appTable3 colgroup { display: none !important; }
.qnaRegPage .appTable3 tr { margin-bottom: 16px; }
.qnaRegPage .appTable3 th {
display: block !important; width: 100% !important; text-align: left !important;
font-size: 14px !important; font-weight: 700 !important; color: #191f28 !important;
background: transparent !important; padding: 0 0 7px !important; border: 0 !important;
}
.qnaRegPage .appTable3 th.must::after { content: " *"; color: #f04452; }
.qnaRegPage .appTable3 td {
display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; background: transparent !important;
}
}
/* =========================================================
회원정보 변경 (/mypage/modify.php) 토스화
========================================================= */
.modifyPage .modifyTitle { text-align: center; font-size: 22px !important; font-weight: 800 !important; color: #191f28 !important; letter-spacing: -.3px; margin: 0 0 4px !important; border: 0 !important; padding: 0 !important; }
/* 안내 + 버튼 (전역) */
.modifyPage .modGuide { background: #f7f8fa; border-radius: 10px; padding: 13px 15px; font-size: 13px; color: #6b7684; line-height: 1.6; margin-bottom: 14px; text-align: center; }
.modifyPage .modBtns { margin: 0; }
.btnModSubmit { display: block; width: 100%; box-sizing: border-box; background: #3182f6 !important; color: #fff !important;
border: 0 !important; border-radius: 12px !important; padding: 15px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; }
.btnModSubmit:hover { background: #2272eb !important; }
.btnModCancel { display: block; width: 100% !important; box-sizing: border-box; background: #fff !important; color: #4e5968 !important;
border: 1px solid #e5e8eb !important; border-radius: 12px !important; padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; margin-top: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.btnModCancel:hover { background: #f7f8fa !important; }
/* 메일링 동의 — 토스 체크박스 */
.modifyPage input[type="checkbox"] {
-webkit-appearance: none !important; appearance: none !important; -moz-appearance: none !important;
width: 22px !important; height: 22px !important; flex: 0 0 auto; margin: 0 8px 0 0 !important; padding: 0 !important;
border: 1.5px solid #d1d6db !important; border-radius: 7px !important; background: #fff !important;
vertical-align: middle; position: relative; cursor: pointer; box-sizing: border-box;
}
.modifyPage input[type="checkbox"]:checked { background: #3182f6 !important; border-color: #3182f6 !important; }
.modifyPage input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.modifyPage label[for="mailing"] { vertical-align: middle; font-size: 14px; color: #4e5968; cursor: pointer; }
/* 회원정보 변경 PC 토스 (가운데 흰 카드 + 라벨좌/입력우 표) */
@media (min-width: 769px) {
.modifyPage .section { padding: 0 !important; }
.modifyPage .appForm {
float: none !important; display: flow-root !important; width: 100% !important; max-width: 680px; margin: 14px auto !important; box-sizing: border-box;
background: #fff !important; border: 1px solid #e3e6ea !important; border-radius: 16px !important; padding: 22px 26px !important; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.modifyPage .appTable3 { border: 0 !important; border-top: 0 !important; width: 100% !important; }
.modifyPage .appTable3 > tbody > tr > th {
text-align: left !important; vertical-align: middle !important; border: 0 !important; border-bottom: 1px solid #f2f4f6 !important;
background: transparent !important; color: #4e5968 !important; font-size: 13.5px !important; font-weight: 700 !important; padding: 14px 12px 14px 0 !important; white-space: nowrap;
}
.modifyPage .appTable3 > tbody > tr > th.must::after { content: " *"; color: #f04452; }
.modifyPage .appTable3 > tbody > tr > td {
border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; padding: 12px 0 !important; background: transparent !important; vertical-align: middle !important; font-size: 14px; color: #191f28;
}
.modifyPage .inputBox, .modifyPage .selectbox, .modifyPage select {
box-sizing: border-box; border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 10px 12px !important; font-size: 14px !important; background: #fff !important; height: auto !important;
}
.modifyPage .inputBox:focus, .modifyPage .selectbox:focus, .modifyPage select:focus { border-color: #3182f6 !important; outline: none; }
/* 주소 서브테이블 */
.modifyPage .appTable3 td table { width: 100% !important; }
.modifyPage .appTable3 td table td { border: 0 !important; padding: 4px 0 !important; }
.modifyPage .appTable3 td table td:first-child { font-size: 12.5px; color: #8b95a1; width: 80px; }
.modifyPage .appTable3 td table .inputBox { width: 100% !important; max-width: 360px; }
/* 생년월일 / 보조이메일 */
.modifyPage .appTable3 td.birthCell { display: flex; gap: 7px; }
.modifyPage .appTable3 td.birthCell .selectbox { flex: 0 0 auto; min-width: 92px; }
.modifyPage .appTable3 td.emailCell { display: flex; align-items: center; gap: 7px; }
.modifyPage .appTable3 td.emailCell .inputBox { flex: 1 1 0; min-width: 0; max-width: 220px; }
.modifyPage .appTable3 td.emailCell .emailAt { color: #8b95a1; flex: 0 0 auto; }
.modifyPage .comment { display: block; margin-top: 6px; font-size: 12px; color: #8b95a1; line-height: 1.5; }
/* 본인확인 안내 */
.modifyPage .modGuide { max-width: 680px; margin: 0 auto 12px; }
}
/* =========================================================
회원가입 (/member/join.php) 토스화 — .joinPage
========================================================= */
.joinPage { border-top: 0 !important; }
.joinPage h1.title {
border: 0 !important; text-align: center; font-size: 24px !important; font-weight: 800 !important;
color: #191f28 !important; padding: 0 !important; margin: 18px 0 16px !important;
}
.joinPage h1.title br { display: none; }
.joinPage h1.title .engTitle { display: block; font-size: 13px; font-weight: 600; color: #8b95a1; margin-top: 5px; }
/* 가입안내 박스 */
.joinPage .conBox { width: auto !important; height: auto !important; background: #f7f8fa !important; border: 0 !important;
border-radius: 12px !important; padding: 14px 16px !important; margin: 0 auto 16px !important; box-sizing: border-box; }
.joinPage .conBox h4 { font-size: 14px !important; font-weight: 700 !important; color: #191f28 !important; margin: 0 0 6px !important; }
.joinPage .conBox p { font-size: 13px !important; color: #4e5968 !important; line-height: 1.7 !important; margin: 0 !important; }
.joinPage .conBox.en { display: none !important; }
.joinPage .orangefont { color: #f04452 !important; }
/* 폼 카드 */
.joinPage .appForm { float: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box;
background: #fff !important; border: 1px solid #eef0f2 !important; border-radius: 16px !important; padding: 22px !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.joinPage .comment[style*="float"] { float: none !important; display: block; text-align: right; font-size: 12px !important; color: #8b95a1 !important; margin: 0 0 4px !important; }
.joinPage .comment[style*="float"] img { display: none; }
/* 표(th 라벨행 + td 입력행) → 라벨 위 / 입력 아래 */
.joinPage .appTable2 { width: 100% !important; border: 0 !important; border-top: 0 !important; table-layout: auto !important; }
.joinPage .appTable2 > tbody > tr > th {
display: block; text-align: left !important; padding: 17px 2px 7px !important; border: 0 !important; background: none !important;
font-size: 13px !important; font-weight: 700 !important; color: #4e5968 !important; height: auto !important; letter-spacing: -.2px;
}
.joinPage .appTable2 > tbody > tr:first-child > th { padding-top: 0 !important; }
.joinPage .appTable2 > tbody > tr > th.must::after { content: " *"; color: #f04452; }
.joinPage .appTable2 > tbody > tr > td { display: block; padding: 0 2px !important; border: 0 !important; font-size: 14px !important; color: #4e5968; }
/* 입력/셀렉트 토스 */
.joinPage .inputBox, .joinPage .selectbox, .joinPage select {
box-sizing: border-box; border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 11px 13px !important; font-size: 14px !important; background: #fff !important; height: auto !important; color: #191f28 !important;
vertical-align: middle;
}
.joinPage .inputBox:focus, .joinPage .selectbox:focus, .joinPage select:focus { border-color: #3182f6 !important; outline: none; }
.joinPage .comment { display: inline-block; margin: 7px 4px 0 0; font-size: 12px !important; color: #8b95a1 !important; line-height: 1.5; }
.joinPage .comment.kr { display: block; }
/* 주소 서브테이블 */
.joinPage .appTable2 td table { width: 100% !important; border: 0 !important; }
.joinPage .appTable2 td table td { border: 0 !important; padding: 4px 0 !important; }
.joinPage .appTable2 td table td:first-child { font-size: 12px !important; color: #8b95a1 !important; width: 90px; }
.joinPage .appTable2 td table .inputBox { width: 100% !important; }
/* 중복확인 버튼 (고스트) */
.joinPage .btns5char {
background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 11px 16px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; height: auto !important; vertical-align: middle;
}
.joinPage .btns5char:hover { background: #e9edf2 !important; }
/* 동의 + 제출 영역 */
.joinPage .btnBox { margin-top: 20px !important; text-align: center; line-height: 1.7; }
.joinPage .btnBox > span { display: block; font-size: 13px !important; color: #6b7684 !important; }
.joinPage .btnBox input[type="checkbox"] {
-webkit-appearance: none !important; appearance: none !important; width: 20px !important; height: 20px !important;
border: 2px solid #d1d6db !important; border-radius: 6px !important; vertical-align: -5px !important; margin-right: 7px !important;
position: relative; cursor: pointer; background: #fff !important; box-sizing: border-box;
}
.joinPage .btnBox input[type="checkbox"]:checked { background: #3182f6 !important; border-color: #3182f6 !important; }
.joinPage .btnBox input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.joinPage .btnBox a { color: #3182f6 !important; text-decoration: none; }
.joinPage .btnBox .btn4char {
border-radius: 12px !important; padding: 14px 30px !important; font-size: 15px !important; font-weight: 700 !important;
cursor: pointer; border: 0 !important; min-width: 130px; margin: 0 4px;
}
.joinPage .btnBox input[type="submit"].btn4char { background: #3182f6 !important; color: #fff !important; }
.joinPage .btnBox input[type="submit"].btn4char:hover { background: #2272eb !important; }
.joinPage .btnBox input[type="button"].btn4char { background: #fff !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; }
.joinPage .btnBox input[type="button"].btn4char:hover { background: #f7f8fa !important; }
/* PC: 한 줄로 묶을 행(ID·성명·생년월일·보조이메일) → flex 한 줄 (입력 grow, 라벨/@/버튼 auto, 안내문은 다음 줄) */
@media (min-width: 769px) {
.joinPage .jRow { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; }
.joinPage .jRow .inputBox, .joinPage .jRow .selectbox, .joinPage .jRow select { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important; }
.joinPage .jRow .jAt { flex: 0 0 auto; color: #8b95a1; }
.joinPage .jRow .btns5char { flex: 0 0 auto; margin: 0 !important; }
.joinPage .jRow .comment { flex: 1 0 100%; margin: 4px 0 0 !important; }
.joinPage .jRow br { display: none; }
/* 생년월일/성명 라벨(Year/Month/Day, Last/First name)은 줄어들지 않게 */
.joinPage .jBirth, .joinPage .jName { white-space: nowrap; }
}
@media (max-width: 768px) {
/* 모바일: 분할 입력(아이디/이메일)·고정폭 → 풀폭 정리 */
.joinPage .appForm { padding: 16px !important; }
.joinPage .appTable2, .joinPage .appTable2 > tbody, .joinPage .appTable2 > tbody > tr,
.joinPage .appTable2 > tbody > tr > th, .joinPage .appTable2 > tbody > tr > td { display: block !important; width: 100% !important; }
.joinPage .inputBox { width: 100% !important; }
.joinPage .btns5char { width: 100% !important; margin-top: 8px !important; }
.joinPage .btnBox .btn4char { display: block; width: 100%; margin: 8px 0 0 !important; }
}
/* =========================================================
서비스 안내 (/intro/service_buy.php) 토스화 — 콘텐츠 카드
========================================================= */
.introPage { border-top: 0 !important; }
.introPage h1.title {
border: 0 !important; margin: 18px 0 8px !important; padding: 0 !important;
font-size: 24px !important; font-weight: 800 !important; color: #191f28 !important; text-align: center;
}
.introPage h1.title .engTitle { display: block; font-size: 13px; font-weight: 600; color: #8b95a1; margin-top: 5px; letter-spacing: 0; }
.introPage .aboutSign { text-align: right !important; color: #8b95a1 !important; font-size: 13px !important; margin: 18px 0 0 !important; }
.introPage .introCard {
background: #fff !important; border: 1px solid #eef0f2; border-radius: 16px;
padding: 18px !important; margin: 0 0 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04); text-align: left;
}
.introPage .introImg {
display: block; width: 100%; height: auto; border-radius: 12px;
margin: 4px 0 14px; border: 1px solid #eef0f2;
}
.introPage h2.title {
font-size: 18px !important; font-weight: 800 !important; color: #191f28 !important;
margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; letter-spacing: -.3px; text-align: left !important;
}
.introPage h3.title {
font-size: 15px !important; font-weight: 700 !important; color: #3182f6 !important;
margin: 16px 0 7px !important; padding: 0 !important; border: 0 !important; text-align: left !important; letter-spacing: 0 !important;
}
.introPage p {
font-size: 14px !important; line-height: 1.75 !important; color: #4e5968 !important; margin: 0 !important; text-align: left !important;
}
.introPage p b { color: #191f28 !important; font-weight: 700; }
.introPage ul.textList { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; }
.introPage ul.textList li {
position: relative; padding: 9px 0 9px 17px !important; margin: 0 !important;
font-size: 14px !important; line-height: 1.7 !important; color: #4e5968 !important; border-bottom: 1px solid #f5f6f8; text-align: left;
}
.introPage ul.textList li:last-child { border-bottom: 0; }
.introPage ul.textList li::before {
content: ""; position: absolute; left: 3px; top: 15px; width: 5px; height: 5px; background: #3182f6; border-radius: 50%;
}
.introPage ul.textList li b { color: #191f28 !important; font-weight: 700; }
.introPage ul.textList li font[color="red"], .introPage ul.textList li font { color: #f04452 !important; font-size: 12.5px; }
/* 번호 스텝 (이용절차) → 토스 번호 배지 */
.introPage ol.lsm1 { list-style: none !important; counter-reset: step; margin: 8px 0 0 !important; padding: 0 !important; }
.introPage ol.lsm1 > li {
counter-increment: step; position: relative; list-style: none !important;
padding: 11px 0 11px 40px !important; margin: 0 !important;
font-size: 14px !important; line-height: 1.65 !important; color: #4e5968 !important; border-bottom: 1px solid #f5f6f8; text-align: left;
}
.introPage ol.lsm1 > li:last-child { border-bottom: 0; }
.introPage ol.lsm1 > li::before {
content: counter(step); position: absolute; left: 0; top: 10px;
width: 27px; height: 27px; border-radius: 50%; background: #eef3fb; color: #3182f6;
font-size: 13px; font-weight: 800; text-align: center; line-height: 27px;
}
/* 스텝: 제목(볼드) + 설명(회색) */
.introPage .stepList .stepTitle { display: block; font-size: 14.5px !important; font-weight: 700 !important; color: #191f28 !important; margin-bottom: 3px; line-height: 1.4; }
.introPage .stepList .stepDesc { display: block; font-size: 13px; color: #6b7684; line-height: 1.6; }
.introPage .stepList .stepBadge { display: inline-block; margin-left: 5px; font-size: 11px; font-weight: 700; color: #3182f6; background: #eef3fb; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
/* 카드 내 일반 텍스트(느슨한 텍스트 노드) 기본 가독성 */
.introPage .introCard { font-size: 14px; line-height: 1.7; color: #4e5968; }
/* 약관/정책 본문 (agreement 등 .policyCard) — h4 소제목 + ①②③ 번호목록 */
.introPage .policyCard h4.h4Title {
font-size: 15px !important; font-weight: 700 !important; color: #191f28 !important;
margin: 22px 0 8px !important; padding: 12px 0 0 !important; border: 0 !important;
border-top: 1px solid #f2f4f6 !important; letter-spacing: -.2px;
}
.introPage .policyCard h4.h4Title:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.introPage .policyCard ol, .introPage .policyCard ul { list-style: none !important; margin: 6px 0 0 !important; padding: 0 !important; }
.introPage .policyCard ol ol, .introPage .policyCard li ul { margin: 5px 0 2px 12px !important; }
.introPage .policyCard li { font-size: 13.5px !important; line-height: 1.7 !important; color: #4e5968 !important; margin: 0 0 6px !important; padding: 0 !important; }
.introPage .policyCard li ul li { color: #6b7684 !important; margin: 0 0 3px !important; }
/* 사이트맵 (site/sitemap.php) — 메뉴 그룹 카드 그리드 */
.sitemapPage .conBox { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: transparent !important; border: 0 !important; padding: 0 !important; width: auto !important; margin: 0 !important; }
.sitemapPage .sitemapBox {
float: none !important; width: auto !important; box-sizing: border-box;
background: #fff; border: 1px solid #eef0f2; border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sitemapPage .sitemapBox h2 {
font-size: 15px !important; font-weight: 800 !important; color: #191f28 !important;
margin: 0 0 8px !important; padding: 0 0 10px !important; border: 0 !important; border-bottom: 1px solid #f2f4f6 !important; letter-spacing: -.2px;
}
.sitemapPage .sitemapBox dl.lmn { margin: 0 !important; padding: 0 !important; }
.sitemapPage .sitemapBox dd { margin: 0 !important; padding: 0 !important; }
.sitemapPage .sitemapBox dd a {
display: block; padding: 10px 10px; border-radius: 9px; font-size: 14px; color: #4e5968 !important; text-decoration: none !important; transition: background .12s, color .12s;
}
.sitemapPage .sitemapBox dd a:hover { background: #f4f8ff; color: #3182f6 !important; }
@media (max-width: 768px) {
.sitemapPage .conBox { grid-template-columns: 1fr; gap: 10px; }
}
.introPage .policyCard { font-size: 13.5px !important; color: #4e5968 !important; }
/* 대행수수료: 고정폭 해제 */
.introPage p { max-width: 100% !important; }
.introPage p[style*="640"], .introPage p[style*="width"] { width: auto !important; }
/* 수수료 규칙 강조 (navyfont) → 연블루 박스 */
.introPage .navyfont { display: block; background: #eef3fb; color: #1b64da !important; font-weight: 700 !important; padding: 11px 14px; border-radius: 10px; margin: 8px 0; line-height: 1.55; }
.introPage .redfont { color: #f04452 !important; }
/* 주의사항 카드: navyfont 헤더는 박스 대신 일반 볼드, conBox 투명 */
.introPage .feeNoteCard .navyfont { display: block; background: transparent; color: #191f28 !important; padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 700 !important; }
.introPage .conBox { background: transparent !important; border: 0 !important; padding: 0 !important; width: auto !important; margin: 0 !important; font-size: 13px !important; color: #6b7684 !important; line-height: 1.75 !important; }
/* 수수료 100% 돌려받는 TIP 토글 → 토스 칩 */
.introPage a[style*="float"] { float: none !important; display: inline-block; cursor: pointer; margin: 8px 0; text-decoration: none; }
.introPage a[style*="float"] .redfont { display: inline-block; background: #fff4e5; color: #c2671a !important; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; }
/* TIP 이미지 반응형 */
.introPage [id$="Cashback"] { border-radius: 10px !important; overflow: hidden; border-color: #e5e8eb !important; margin-top: 12px !important; }
.introPage [id$="Cashback"] img { max-width: 100% !important; height: auto !important; display: block; }
/* 신청하기 CTA 버튼 */
.introCtaBtn {
display: block; width: 100%; max-width: 360px; box-sizing: border-box; margin: 6px auto 0;
background: #3182f6 !important; color: #fff !important; text-align: center; text-decoration: none !important;
font-size: 15px; font-weight: 700; padding: 15px; border-radius: 12px;
}
.introCtaBtn:hover { background: #2272eb !important; }
/* 배송요금표 — 계산 버튼 PC/모바일 링크 분기 (둘 중 화면에 맞는 것만 노출) */
@media (max-width: 768px) { .calcPc { display: none !important; } }
@media (min-width: 769px) { .calcMobile { display: none !important; } }
/* =========================================================
게시판 목록 (helpdesk notice 등 sb.list.inc.php) 토스화 — .boardPage 스코프
========================================================= */
.boardPage { border-top: 0 !important; }
.boardPage h1.title { border-bottom: 0 !important; }
/* 공지 게시물 행 강조 (연하늘 배경 + 제목 앞 📢 공지 배지) — 모바일 카드/PC 표 공통 */
.boardPage .boardList tr.noticeRow { background: #edf5ff !important; border-color: #cfe4fc !important; }
.boardPage .boardList tr.noticeRow .subject::before {
content: "📢 공지"; display: inline-block; margin-right: 6px; vertical-align: middle;
font-size: 11px; font-weight: 800; color: #1b64da; background: #d4e7fd; border-radius: 999px; padding: 2px 8px;
}
/* 상단 Write 버튼 */
.boardPage .btnSmall100px { background: #3182f6 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; width: auto !important; height: auto !important; }
/* 보드 페이지 헤더/안내문 (qna·review·easyservice = 래퍼 .boardPage / shipping·cashbag = .section.boardPage) */
.boardPage h3.location { display: none !important; }
.boardPage h1.title, .boardPage h3.title {
font-size: 22px !important; font-weight: 800 !important; color: #191f28 !important;
border: 0 !important; padding: 0 0 14px !important; margin: 0 !important; background: none !important;
}
.boardPage h1.title .engTitle, .boardPage h1.title br { display: none !important; }
.boardPage > h3 { border: 0 !important; padding: 0 0 14px !important; margin: 0 !important; background: none !important; }
.boardPage > h3 .stitleKor { font-size: 22px !important; font-weight: 800 !important; color: #191f28 !important; }
.boardPage > h3 .titleEng { display: none !important; }
.section.boardPage { width: auto !important; }
.boardPage .conBox {
width: auto !important; height: auto !important; background: #f7f8fa !important; border: 0 !important;
border-radius: 12px !important; padding: 14px 16px !important; margin: 0 0 16px !important; box-sizing: border-box;
}
.boardPage .conBox p { padding-left: 0 !important; font-size: 13px !important; color: #4e5968 !important; line-height: 1.7 !important; }
.boardPage .conBox a u { color: #3182f6 !important; }
.boardPage .appForm > div { max-width: 100% !important; box-sizing: border-box; }
@media (max-width: 768px) {
/* #ConArea(94%) 좌측 정렬로 오른쪽이 비어 '왼쪽 치우침' → 풀폭+좌우 대칭 패딩 */
.boardPage { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; padding: 0 14px 60px !important; }
.boardPage .appForm { box-shadow: none !important; background: transparent !important; padding: 0 !important; float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.boardPage .appForm > div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; }
/* 상단 컨트롤: Write 버튼(풀폭, 셀렉트 위) + 카테고리 셀렉트(풀폭) */
.boardPage .boardCtrl { display: flex !important; flex-direction: column; gap: 8px; margin: 0 0 14px !important; position: static !important; }
.boardPage .boardCtrl > div { float: none !important; width: 100% !important; margin: 0 !important; }
.boardPage .boardCtrl > div:nth-child(2) { order: -1; } /* Write 버튼을 셀렉트 위로 */
.boardPage .boardCtrl .selectbox {
width: 100% !important; box-sizing: border-box; border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 12px 14px !important; font-size: 14px !important; background: #fff !important; height: auto !important;
}
.boardPage .boardCtrl .btnSmall100px { width: 100% !important; padding: 13px !important; font-size: 15px !important; border-radius: 12px !important; }
/* 게시판 표 → 카드 리스트 */
.boardPage table.boardList, .boardPage .boardList tbody { display: block !important; width: 100% !important; border-top: 0 !important; }
.boardPage .boardList colgroup { display: none !important; }
.boardPage .boardList tr:first-child { display: none !important; } /* 헤더행 */
.boardPage .boardList tr {
display: block !important; width: 100% !important; box-sizing: border-box;
background: #fff; border: 1px solid #e5e8eb; border-radius: 14px; padding: 14px 16px; margin: 0 0 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.boardPage .boardList td { display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; text-align: left !important; }
.boardPage .boardList td.center { display: none !important; } /* No / 체크박스 칸 */
.boardPage .boardList td[colspan] { display: block !important; text-align: center !important; color: #8b95a1; padding: 22px 0 !important; font-size: 14px; }
/* 제목 + 정보 */
.boardPage .boardList .subject { display: block; font-size: 15px; font-weight: 700; color: #191f28; line-height: 1.5; }
.boardPage .boardList .subject a { color: #191f28 !important; text-decoration: none; }
.boardPage .boardList .subject span { color: #3182f6; font-weight: 600; }
.boardPage .boardList .subjectInfo { display: block; font-size: 12px; color: #8b95a1; margin-top: 6px; }
/* 검색 */
.boardPage .searching { display: flex; gap: 6px; margin: 14px 0; }
.boardPage .searching .selectbox2 { flex: 0 0 auto; }
.boardPage .searching .inputBox { flex: 1 1 auto; width: auto !important; }
.boardPage .searching .selectbox2, .boardPage .searching .inputBox {
box-sizing: border-box; border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 11px 12px !important; font-size: 14px !important; background: #fff !important; height: auto !important;
}
/* 페이징 */
.boardPage .paging { text-align: center; margin: 6px 0 10px; }
.boardPage .paging img { display: none; }
.boardPage .paging a, .boardPage .paging strong { display: inline-block; padding: 6px 11px; margin: 0 1px; font-size: 14px; text-decoration: none; }
.boardPage .paging strong { color: #3182f6; font-weight: 800; }
}
/* ── 게시판 상세보기 (boardView) 토스화 + 풀폭 버튼 ── */
/* 하단 버튼: List=블루, 나머지=흰+테두리, 풀폭 스택 (관리자/작성자 버튼) */
.boardPage .btnBox { margin-top: 18px !important; line-height: normal !important; text-align: center; padding-top: 0 !important; }
.boardPage .btnBox .fclear { display: block !important; width: 100% !important; }
.boardPage .btnBox .fclear > div,
.boardPage .btnBox div[style*="inline-block"] { display: block !important; width: 100% !important; float: none !important; }
.boardPage .btnBox a.btnBig180pxLink,
.boardPage .btnBox input.btnBig180pxLink {
display: block !important; width: 100% !important; box-sizing: border-box !important;
text-align: center !important; text-decoration: none !important; font-size: 15px !important; font-weight: 700 !important;
padding: 14px !important; border-radius: 12px !important; margin: 0 0 8px !important; cursor: pointer; height: auto !important;
background: #fff !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.boardPage .btnBox a.btnBig180pxLink:hover, .boardPage .btnBox input.btnBig180pxLink:hover { background: #f7f8fa !important; }
.boardPage .btnBox a.btnListMain { background: #3182f6 !important; color: #fff !important; border: 0 !important; box-shadow: none; }
.boardPage .btnBox a.btnListMain:hover { background: #2272eb !important; }
/* 글쓰기 하단 버튼 (Submit=블루, Cancel=흰+테두리, 풀폭) */
.boardPage .btnBox input.btn4char {
display: block !important; width: 100% !important; box-sizing: border-box !important;
font-size: 15px !important; font-weight: 700 !important; padding: 14px !important; border-radius: 12px !important;
margin: 0 0 8px !important; cursor: pointer; height: auto !important;
background: #fff !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.boardPage .btnBox input.btn4char:hover { background: #f7f8fa !important; }
.boardPage .btnBox input.btnSubmitMain { background: #3182f6 !important; color: #fff !important; border: 0 !important; box-shadow: none; }
.boardPage .btnBox input.btnSubmitMain:hover { background: #2272eb !important; }
/* 위지윅 에디터(wyditor) — 회색 배경에 편집영역/버튼이 투명하게 묻히지 않게 흰 배경+테두리 */
.boardPage .wyditor_wrap_default { background: #fff !important; border: 1px solid #e5e8eb !important; border-radius: 12px !important; overflow: hidden; }
.boardPage .wyditor_wrap_default iframe, .boardPage .boardWrite iframe { background: #fff !important; }
.boardPage .wyditor_toolbar { background: #f4f5f7 !important; border-bottom: 1px solid #e5e8eb !important; }
.boardPage .boardWrite .textareabox, .boardPage .boardWrite textarea { background: #fff !important; }
/* 첨부 파일선택 영역도 흰 배경 (회색 바탕 대비) */
.boardPage .boardWrite .attach input[type="file"] { background: #fff; }
/* 공지/비밀글 토스 체크박스 */
.boardPage .boardWrite input[type="checkbox"] {
-webkit-appearance: none !important; appearance: none !important;
width: 20px !important; height: 20px !important; margin: 0 7px 0 0 !important; vertical-align: middle;
border: 1.5px solid #d1d6db !important; border-radius: 6px !important; background: #fff !important; position: relative; cursor: pointer; box-sizing: border-box;
}
.boardPage .boardWrite input[type="checkbox"]:checked { background: #3182f6 !important; border-color: #3182f6 !important; }
.boardPage .boardWrite input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 768px) {
/* 글쓰기 폼 → 세로 라벨 + 풀폭 입력 */
.boardPage .boardWrite, .boardPage .boardWrite tbody, .boardPage .boardWrite tr { display: block !important; width: 100% !important; border-top: 0 !important; }
.boardPage .boardWrite colgroup { display: none !important; }
.boardPage .boardWrite tr { margin-bottom: 15px; }
.boardPage .boardWrite th {
display: block !important; width: 100% !important; text-align: left !important;
font-size: 14px !important; font-weight: 700 !important; color: #191f28 !important;
background: transparent !important; padding: 0 0 7px !important; border: 0 !important;
}
.boardPage .boardWrite th.must::after { content: " *"; color: #f04452; }
.boardPage .boardWrite > tbody > tr > td { display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.boardPage .boardWrite .inputBox, .boardPage .boardWrite .textareabox, .boardPage .boardWrite .selectbox,
.boardPage .boardWrite textarea, .boardPage .boardWrite select {
width: 100% !important; box-sizing: border-box !important; border: 1px solid #e5e8eb !important; border-radius: 10px !important;
padding: 12px 14px !important; font-size: 15px !important; background: #fff !important; height: auto !important; color: #191f28 !important;
}
.boardPage .boardWrite textarea { min-height: 200px; }
/* 첨부 영역 */
.boardPage .boardWrite .attach table, .boardPage .boardWrite .attach tbody, .boardPage .boardWrite .attach tr, .boardPage .boardWrite .attach td { display: block !important; width: 100% !important; }
.boardPage .boardWrite .attach colgroup { display: none !important; }
.boardPage .boardWrite .attach > div[style*="float"] { float: none !important; display: flex; gap: 6px; margin-bottom: 8px; }
.boardPage .boardWrite .attach .btns2char { flex: 1 1 auto; background: #f2f4f6 !important; color: #4e5968 !important; border: 1px solid #e5e8eb !important; border-radius: 8px !important; padding: 0 12px !important; height: 46px !important; line-height: 46px !important; font-size: 14px !important; text-align: center !important; cursor: pointer; box-sizing: border-box; }
/* 공지/비밀글 라벨 줄 */
.boardPage .boardWrite td input[type="checkbox"] + * , .boardPage .boardWrite td { font-size: 14px; color: #4e5968; }
/* 위지윅 에디터 넘침 방지 */
.boardPage .boardWrite iframe, .boardPage .boardWrite .wyditor { max-width: 100% !important; }
/* 글쓰기 폼 전체를 흰 카드 위에 (모바일 회색 바탕 대비) */
.boardPage .boardWriteCard { background: #fff !important; border: 1px solid #e5e8eb !important; border-radius: 14px !important; padding: 16px 16px 18px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.boardPage .boardWriteCard .btnBox { margin-top: 16px !important; }
}
@media (max-width: 768px) {
/* 상세 표 → 단일 흰 카드 (제목/메타/본문/첨부) */
.boardPage .boardView, .boardPage .boardView tbody, .boardPage .boardView tr, .boardPage .boardView td { display: block !important; width: 100% !important; }
.boardPage .boardView colgroup { display: none !important; }
.boardPage .boardView {
box-sizing: border-box; background: #fff; border: 1px solid #e5e8eb !important; border-top: 1px solid #e5e8eb !important;
border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.boardPage .boardView td { border: 0 !important; padding: 0 !important; text-align: left !important; }
.boardPage .boardView tr:first-child td { font-size: 17px; font-weight: 800; color: #191f28; line-height: 1.4; padding-bottom: 12px !important; border-bottom: 1px solid #f2f4f6 !important; }
.boardPage .boardView tr:first-child h1 { font-size: 17px !important; font-weight: 800 !important; }
.boardPage .boardView tr:nth-child(2) { display: flex !important; flex-wrap: wrap; gap: 3px 14px; padding: 12px 0 !important; border-bottom: 1px solid #f2f4f6; }
.boardPage .boardView tr:nth-child(2) td { font-size: 12px !important; color: #8b95a1 !important; width: auto !important; }
.boardPage .boardView tr:nth-child(2) td b { color: #8b95a1 !important; font-weight: 600; }
.boardPage .boardView tr:nth-child(3) td > div { padding: 18px 0 !important; font-size: 14px; line-height: 1.7; color: #333d4b; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.boardPage .boardView img { max-width: 100% !important; height: auto !important; }
/* 본문에 에디터로 삽입된 표(Excel 붙여넣기 등): boardView td→block 규칙이 표 셀까지 블록화해 겹치던 문제 →
표/행/셀 display 역할 복원 + 전역 table-layout:fixed 해제 → 화면폭에 맞게 정상 렌더 */
.boardPage .boardView td table { display: table !important; table-layout: auto !important; width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; margin: 4px 0 !important; }
.boardPage .boardView td table thead { display: table-header-group !important; }
.boardPage .boardView td table tbody { display: table-row-group !important; width: auto !important; }
.boardPage .boardView td table tr { display: table-row !important; width: auto !important; }
.boardPage .boardView td table colgroup { display: table-column-group !important; }
.boardPage .boardView td table col { display: table-column !important; width: auto !important; }
.boardPage .boardView td table td, .boardPage .boardView td table th {
display: table-cell !important; width: auto !important; height: auto !important; white-space: normal !important; word-break: keep-all;
padding: 7px 8px !important; font-size: 13px !important; line-height: 1.45 !important; border: 1px solid #e5e8eb !important; vertical-align: middle !important; text-align: center !important;
}
.boardPage .boardView td table p { margin: 0 !important; }
.boardPage .boardView td table font { font-size: 13px !important; }
.boardPage .boardView tr:nth-child(5) td { font-size: 13px; color: #6b7684; padding: 14px 0 2px !important; overflow: hidden; }
.boardPage .boardView tr:nth-child(5) td > div { float: none !important; display: inline !important; margin-left: 0 !important; }
.boardPage .boardView tr:nth-child(5) td strong { font-weight: 600; color: #4e5968; }
/* 댓글 입력/목록 */
.boardPage .appTable, .boardPage .appTable tbody, .boardPage .appTable tr, .boardPage .appTable td { display: block !important; width: 100% !important; }
.boardPage .appTable colgroup { display: none !important; }
.boardPage .appTable td { border: 0 !important; padding: 0 !important; text-align: left !important; }
.boardPage textarea { width: 100% !important; box-sizing: border-box; border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 12px !important; font-size: 14px !important; min-height: 90px; }
.boardPage .appTable .btnSmall100px { width: 100% !important; margin: 8px 0 0 !important; }
}
/* 버튼 감싼 p 의 큰 상단여백 축소 */
.introPage .introCard p[style*="center"] { margin-top: 16px !important; }
.introPage .introCard .appForm { float: none !important; width: 100% !important; margin: 0 !important; }
@media (max-width: 768px) {
.modifyPage .section { padding: 0 !important; }
.modifyPage .appForm { float: none !important; width: 100% !important; margin-top: 10px !important; }
/* 폼 표 → 세로 라벨 (풀너비 입력) */
.modifyPage .appTable3 { display: block !important; width: 100% !important; border-top: 0 !important; }
.modifyPage .appTable3 > tbody { display: block !important; width: 100% !important; }
.modifyPage .appTable3 > colgroup { display: none !important; }
.modifyPage .appTable3 > tbody > tr { display: block !important; width: 100% !important; margin-bottom: 15px; }
.modifyPage .appTable3 > tbody > tr > th {
display: block !important; width: 100% !important; text-align: left !important;
font-size: 14px !important; font-weight: 700 !important; color: #191f28 !important;
background: transparent !important; padding: 0 0 7px !important; border: 0 !important;
}
.modifyPage .appTable3 > tbody > tr > th.must::after { content: " *"; color: #f04452; }
.modifyPage .appTable3 > tbody > tr > td {
display: block !important; width: auto !important; border: 0 !important; padding: 0 !important;
background: transparent !important; font-size: 14px; color: #191f28;
}
/* 입력칸/셀렉트 풀너비 토스 (인라인 width 무력화) */
.modifyPage .appTable3 .inputBox, .modifyPage .appTable3 .selectbox, .modifyPage .appTable3 select {
width: 100% !important; box-sizing: border-box !important;
border: 1px solid #e5e8eb !important; border-radius: 10px !important; padding: 13px 14px !important;
font-size: 15px !important; background: #fff !important; height: auto !important; color: #191f28 !important; margin: 0 !important;
}
/* 비밀번호 힌트 */
.modifyPage .comment { display: block; margin-top: 6px; font-size: 12px; color: #8b95a1; line-height: 1.5; }
/* 주소 중첩표 → 라벨(위) + 입력(아래) 스택 */
.modifyPage .appTable3 td table,
.modifyPage .appTable3 td table tbody,
.modifyPage .appTable3 td table tr,
.modifyPage .appTable3 td table td { display: block !important; width: 100% !important; }
.modifyPage .appTable3 td table tr { margin-bottom: 9px; }
.modifyPage .appTable3 td table td:first-child { font-size: 12px; color: #8b95a1; padding: 0 0 4px; }
/* 생년월일: 3 셀렉트 한 줄 (td block 규칙보다 특이도 높게) */
.modifyPage .appTable3 td.birthCell { display: flex !important; gap: 7px; }
.modifyPage .appTable3 td.birthCell .selectbox { flex: 1 1 0; min-width: 0; }
/* 보조 이메일: 아이디 @ 도메인 한 줄 */
.modifyPage .appTable3 td.emailCell { display: flex !important; align-items: center; gap: 6px; }
.modifyPage .appTable3 td.emailCell .inputBox { flex: 1 1 0; min-width: 0; }
.modifyPage .appTable3 td.emailCell .emailAt { flex: 0 0 auto; color: #8b95a1; }
/* 메일링 동의 체크박스 줄 */
.modifyPage label[for="mailing"] { font-size: 14px; color: #4e5968; }
}
/* =========================================================
PC(데스크탑) 메인 토스 톤 — 퀵버튼 + 배너 옆 빠른메뉴
(min-width 스코프라 모바일 규칙과 충돌 없음. 모바일에서 작업한 톤 참조)
========================================================= */
@media (min-width: 769px) {
/* GNB(#topmn)와 콘텐츠 박스(#wrapContent) 사이 여백 — 전 페이지 공통 (인라인 margin:0 auto 덮어씀)
여백이 보이려면 뒤 배경이 흰 박스와 달라야 함: 콘텐츠 배경을 토스 그레이로
→ "회색 영역(nav+여백) → 흰 콘텐츠 박스" 로 분리 가시화.
※ #topmn에 흰 배경 주면 float+padding으로 박스가 여백까지 늘어나 회색을 덮으므로 배경 주지 말 것 */
body { background: #eef0f2 !important; }
#wrapContent { margin-top: 28px !important; }
/* 메인: 한 행의 좌/우 카드 높이 맞춤 (실시간↔이용후기, 공지↔보내신분, 환율↔결제)
.lineContents를 flex+stretch로 → 양쪽 같은 높이, 안쪽 dl>dd 카드가 그 높이를 채움 */
.lineContents { display: flex !important; align-items: stretch !important; }
.lineLeft, .lineRight { float: none !important; display: flex !important; flex-direction: column; }
.lineLeft dl, .lineRight dl { display: flex !important; flex-direction: column; flex: 1 1 auto; height: auto !important; width: 100%; }
.lineLeft dl dd, .lineRight dl dd { flex: 1 1 auto; }
/* 게시판 리스트(이용후기/공지/보내신분) 폰트를 랭킹(.rankNick/.rankAmt=14px)과 동일하게
— default.css `ul li{font-size:1.125em}`(≈18px)라 유독 커 보이던 문제 */
.lineLeft dl dd ul li, .lineRight dl dd ul li { font-size: 14px !important; line-height: 1.75 !important; }
.lineLeft dl dd ul li a, .lineRight dl dd ul li a { font-size: 14px !important; }
/* 퀵버튼 4개: 나의 정보=흰 카드 / 신청=히어로톤 파랑 그라데이션 CTA */
.shortMenu ul li { border-radius: 16px !important; padding: 26px 1% !important;
box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.shortMenu ul li a { display: flex !important; align-items: center; justify-content: center; gap: 10px;
text-decoration: none !important; font-weight: 700 !important; }
.shortMenu ul li a .qIcon { font-size: 24px; line-height: 1; }
.shortMenu ul li a .qLabel { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.shortMenu ul li span.eng { display: none !important; }
.shortMenu ul li.my { background: #fff !important; border: 1px solid #e5e8eb !important; }
.shortMenu ul li.my a, .shortMenu ul li.my a .qLabel { color: #333d4b !important; }
.shortMenu ul li.register { background: linear-gradient(135deg, #4593fc 0%, #2f80f6 55%, #1b64da 100%) !important;
border: 0 !important; box-shadow: 0 8px 20px rgba(49,130,246,.28) !important; }
.shortMenu ul li.register a, .shortMenu ul li.register a .qLabel { color: #fff !important; }
.shortMenu ul li:hover { transform: translateY(-2px); }
.shortMenu ul li.my:hover { border-color: #d8dde3 !important; box-shadow: 0 6px 16px rgba(0,0,0,.10) !important; }
.shortMenu ul li.register:hover { box-shadow: 0 12px 24px rgba(49,130,246,.36) !important; }
/* 배너 옆 빠른메뉴: 5개 박스 → 하나의 카드(.sideNav), 내부는 라운드 없는 행 나열
.mainvisual 기준(relative)으로 배너 바로 왼쪽(right:100%)에 붙이고 margin-right로 간격 제어 */
.mainvisual { position: relative !important; overflow: visible !important; }
/* ★ .mainvisual을 positioned로 만들면서 상단 nav(#topmn, 둘 다 relative+DOM뒤)가
.mainvisual에 덮여 클릭 불가 → nav를 위로 올림 */
#topmn { z-index: 100; }
.sideNav {
position: absolute; top: 36px; right: 100%; margin-right: 34px; width: 134px;
background: #fff; border: 1px solid #e5e8eb; border-radius: 14px;
box-shadow: 0 3px 14px rgba(0,0,0,.07); overflow: hidden; z-index: 5;
}
.sideNav a {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 13px 8px; text-decoration: none; border-bottom: 1px solid #f2f4f6;
transition: background .12s ease;
}
.sideNav a:last-child { border-bottom: 0; }
.sideNav a:hover { background: #f4f8ff; }
.sideNav .smIco { font-size: 19px; line-height: 1; }
.sideNav .smTxt { font-size: 13px; font-weight: 600; color: #4e5968; line-height: 1.35; text-align: center; }
.sideNav a:hover .smTxt { color: #3182f6; }
/* 이달의 TOP5: default.css 고정 height(230px)가 5위·배송대행 카드를 잘라냄
→ dd 높이/테두리 해제(투명 래퍼) + 구매/배송 랭킹 카드 가로 2열 */
.lineFull dl:not(.addressGuide) dd {
height: auto !important; min-height: 0 !important; overflow: visible !important;
background: transparent !important; border: 0 !important; padding: 0 !important;
display: flex !important; gap: 16px; align-items: stretch;
}
.lineFull dl:not(.addressGuide) dd .rankCard { flex: 1 1 0; min-width: 0; margin: 0 !important; }
/* 정보/게시판 카드 고정 height 해제 → 내용 다 보이고 상·하단 여백(15px) 대칭 유지
(결제정보 하단 붙음 + 집하지 '받는사람' 이후 잘림 수정) */
.lineLeft dl dd, .lineRight dl dd { height: auto !important; min-height: 200px; overflow: visible !important; }
.lineFull dl.addressGuide dd { height: auto !important; min-height: 0 !important; overflow: visible !important; }
}