@charset "utf-8";
/* =====================================================================
   우주모바일 · 밝은 단색(블루) 테마  /  메인페이지 전용 스타일
   default.css 이후 로드되어 밝은 톤으로 덮어씁니다.
   - 보라/그라데이션 제거 → 밝고 가시성 좋은 단색 블루
   - 버튼/포인트 단색 처리
   ===================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');

:root{
	--wj-ink:#1b2333;
	--wj-ink2:#5b647d;
	--wj-primary:#2b6cf6;       /* 밝은 단색 블루 */
	--wj-primary-d:#1c52cc;     /* hover */
	--wj-primary-soft:#eaf1ff;  /* 옅은 배경 */
	--wj-bg:#ffffff;
	--wj-bg-soft:#f5f8ff;
	--wj-line:#e6eaf2;
	--wj-shadow:0 12px 36px rgba(43,108,246,.13);
	--wj-shadow-sm:0 6px 18px rgba(43,108,246,.10);
	--wj-radius:18px;
	--wj-font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',dotum,sans-serif;
}

body{ background:var(--wj-bg); color:var(--wj-ink); font-family:var(--wj-font); }
.wj-main{ overflow:hidden; }
/* 본문 텍스트만 Pretendard 적용 (FontAwesome 아이콘 폰트는 건드리지 않음) */
.wj-main h1,.wj-main h2,.wj-main h3,.wj-main h4,.wj-main p,.wj-main span,.wj-main a,.wj-main li,.wj-main strong,.wj-main em,.wj-main div{ font-family:var(--wj-font); }
.wj-main .fa{ font-family:FontAwesome !important; }

/* ====================== 헤더 (밝게 / 스티키) ====================== */
#hd{
	position:sticky; top:0; z-index:120;
	background:rgba(255,255,255,.94);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	padding:18px 0; line-height:normal;
	border-bottom:1px solid transparent;
	transition:box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
#hd.scrolled{ box-shadow:0 6px 24px rgba(24,27,52,.08); border-bottom-color:var(--wj-line); padding:12px 0; }
#hd .logo a{ font-size:28px !important; }
#hd .gnb li{ margin-right:38px; }
#hd .gnb a{ color:var(--wj-ink) !important; font-size:18px; font-weight:600; transition:color .2s; }
#hd .gnb a:hover{ color:var(--wj-primary) !important; }

/* ====================== HERO (밝은 기하 배경 · 보드와 차별화) ====================== */
.mainSe1{
	background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(234,241,255,.55) 100%), url('../img/hero-bg.jpg');
	background-size:cover; background-position:center;
}
.heroSwiper{ height:580px; }
.hero-slide,
.hero-slide-1,.hero-slide-2,.hero-slide-3{
	background:transparent !important;
	display:flex; align-items:center;
}
.hero-stars{ display:none; }
.hero-inner{ justify-content:center; text-align:center; padding:0 24px; }
.hero-text{ max-width:780px; margin:0 auto; }
.hero-badge{
	background:#fff; border:1px solid var(--wj-line);
	color:var(--wj-primary-d); backdrop-filter:none; font-weight:700;
	box-shadow:var(--wj-shadow-sm);
}
.hero-badge i{ margin-right:4px; color:var(--wj-primary); }
.hero-title{ color:var(--wj-ink); font-size:54px; }
.hero-title strong{ color:var(--wj-primary); -webkit-text-fill-color:var(--wj-primary); }
.hero-desc{ color:var(--wj-ink2); }
.hero-btns{ justify-content:center; }
.hero-btn{ font-weight:700; }
.hero-btn-primary{ background:var(--wj-primary); color:#fff; box-shadow:0 10px 24px rgba(43,108,246,.30); }
.hero-btn-primary:hover{ background:var(--wj-primary-d); color:#fff; transform:translateY(-2px); }
.hero-btn-kakao{ background:#FEE500; color:#3c1e1e; }
.hero-btn-kakao:hover{ background:#fdd835; transform:translateY(-2px); }
.hero-btn-outline{ background:#fff; color:var(--wj-primary-d); border:2px solid var(--wj-primary); }
.hero-btn-outline:hover{ background:var(--wj-primary); border-color:var(--wj-primary); color:#fff; }
.hero-pagination .swiper-pagination-bullet{ background:rgba(43,108,246,.35); }
.hero-pagination .swiper-pagination-bullet-active{ background:var(--wj-primary); }
.hero-nav{ background:#fff; box-shadow:var(--wj-shadow-sm); }
.hero-nav:hover{ background:var(--wj-primary-soft); }
.hero-nav i{ color:var(--wj-primary-d); }

/* ====================== 신뢰 지표 (카운트업) ====================== */
.wj-stats{ background:var(--wj-bg); padding:46px 0; }
.wj-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0; padding:0; list-style:none; }
.wj-stats-grid li{
	text-align:center; padding:26px 14px; border-radius:var(--wj-radius);
	background:var(--wj-bg-soft); border:1px solid var(--wj-line);
}
.wj-stat-num{ display:block; font-size:40px; font-weight:800; letter-spacing:-1px; color:var(--wj-primary); line-height:1.1; }
.wj-stat-num em{ font-style:normal; font-size:20px; }
.wj-stat-label{ display:block; margin-top:8px; font-size:15px; color:var(--wj-ink2); font-weight:600; }

/* ====================== 키워드 스트립 (단색 블루 밴드) ====================== */
.keyword-strip{ background:var(--wj-primary); padding:14px 0; }
.keyword-strip li{ color:#fff; font-weight:600; }
.keyword-strip li i{ color:#ffe066; }

/* ====================== 예약/공지 보드 ====================== */
.mainBoard{ background:var(--wj-bg-soft); padding:90px 0; }
.mainBoard .area{ margin-bottom:38px; }
/* 예약현황 표 — 텍스트가 한 줄에 들어오도록 너비 확대 + 줄바꿈 방지 (PC) */
@media screen and (min-width:1200px){
	.mainBoard-left{ flex:2; }
	.mainBoard-right{ flex:1; }
	.reserve-table{ table-layout:auto; }
	.reserve-table thead th, .reserve-table tbody td{ white-space:nowrap; padding:13px 7px; font-size:13px; }
}
.board-header{ border-bottom:2px solid var(--wj-primary); }
.board-header h2{ color:var(--wj-ink); display:flex; align-items:center; gap:8px; }
.board-header h2 i{ color:var(--wj-primary); }
.board-header .board-more{ font-size:14px; font-weight:700; color:var(--wj-primary); }
.board-live{ color:#e53e3e !important; display:flex; align-items:center; gap:6px; }
.board-live i{ font-size:9px; animation:wjBlink 1.2s infinite; }
@keyframes wjBlink{ 0%,100%{opacity:1} 50%{opacity:.2} }
.mainBoard-left, .mainBoard-right{
	background:#fff; border:1px solid var(--wj-line); border-radius:var(--wj-radius);
	padding:24px 26px; box-shadow:var(--wj-shadow-sm);
}
.reserve-table thead th{ background:var(--wj-primary-soft); color:var(--wj-ink2); border-bottom-color:var(--wj-line); }
.status-done{ color:#e53e3e; }
.status-progress{ color:var(--wj-primary); font-weight:700; font-size:13px; }
.status-complete{ color:#16a34a; font-weight:700; font-size:13px; }
.notice-badge{ background:var(--wj-primary-soft); color:var(--wj-primary-d); }
.notice-badge.event{ background:var(--wj-primary); color:#fff; }

/* ====================== 공통 섹션 ====================== */
.wj-section{ padding:90px 0; }
.wj-sub{ text-align:center; color:var(--wj-primary); font-size:16px; font-weight:700; margin:0 0 10px; }
.wj-title{ text-align:center; color:var(--wj-ink); font-size:40px; font-weight:800; letter-spacing:-1.5px; margin:0 0 50px; line-height:1.25; }
.wj-title span{ color:var(--wj-primary); }
.wj-adv{ background:var(--wj-bg); }
.wj-price{ background:var(--wj-bg-soft); }
.wj-process{ background:var(--wj-bg); }
.wj-reviews{ background:var(--wj-bg-soft); }
.wj-cert{ background:var(--wj-bg); }

/* ====================== 장점 카드 (듀오톤 아이콘) ====================== */
.wj-adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; padding:0; list-style:none; }
.wj-adv-card{
	background:#fff; border:1px solid var(--wj-line); border-radius:var(--wj-radius);
	padding:38px 30px; text-align:center; transition:transform .3s, box-shadow .3s, border-color .3s;
}
.wj-adv-card:hover{ transform:translateY(-6px); box-shadow:var(--wj-shadow); border-color:transparent; }
.wj-adv-ico{
	width:88px; height:88px; margin:0 auto 20px; border-radius:22px;
	display:flex; align-items:center; justify-content:center; background:var(--wj-primary-soft);
}
.wj-adv-ico img{ width:50px; height:50px; object-fit:contain; }
.wj-adv-card h3{ font-size:20px; font-weight:700; color:var(--wj-ink); margin:0 0 10px; letter-spacing:-.5px; }
.wj-adv-card p{ font-size:15px; color:var(--wj-ink2); line-height:1.65; }

/* ====================== 실시간 매입 (휴대폰 사진) ====================== */
.wj-phone-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:0 0 26px; padding:0; list-style:none; }
.wj-phone-grid li{ transition:transform .3s; text-align:center; }
.wj-phone-grid li:hover{ transform:translateY(-6px); }
.wj-phone-grid img{ max-width:100%; width:auto; height:auto; display:inline-block; }
.wj-price-note{ text-align:center; color:var(--wj-ink2); font-size:14px; margin:0 0 30px; }
.wj-price-note i{ color:var(--wj-primary); }

/* ====================== CTA 버튼 (단색) ====================== */
.wj-cta-wrap{ text-align:center; }
.wj-cta{
	display:inline-flex; align-items:center; gap:10px; padding:16px 38px; border-radius:50px;
	background:var(--wj-primary); color:#fff; font-size:17px; font-weight:700;
	box-shadow:0 12px 28px rgba(43,108,246,.28); transition:transform .25s, background .25s;
}
.wj-cta:hover{ transform:translateY(-3px); background:var(--wj-primary-d); color:#fff; }
.wj-cta-ghost{ background:#fff; color:var(--wj-primary-d); border:2px solid var(--wj-primary); box-shadow:none; }
.wj-cta-ghost:hover{ background:var(--wj-primary); color:#fff; }

/* ====================== 진행절차 (듀오톤 아이콘) ====================== */
.wj-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:0; padding:0; list-style:none; }
.wj-step{
	position:relative; background:#fff; border:1px solid var(--wj-line); border-radius:var(--wj-radius);
	padding:46px 26px 32px; text-align:center;
}
.wj-step-num{
	position:absolute; top:-22px; left:50%; transform:translateX(-50%);
	width:48px; height:48px; border-radius:50%; background:var(--wj-primary); color:#fff;
	font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center;
	box-shadow:0 8px 16px rgba(43,108,246,.3);
}
.wj-step-ico{ width:64px; height:64px; margin:8px auto 14px; display:flex; align-items:center; justify-content:center; }
.wj-step-ico img{ width:54px; height:54px; object-fit:contain; }
.wj-step h3{ font-size:19px; font-weight:700; color:var(--wj-ink); margin:0 0 8px; }
.wj-step p{ font-size:14px; color:var(--wj-ink2); line-height:1.6; }
.wj-steps .wj-step:not(:last-child)::after{
	content:"\f105"; font-family:FontAwesome; position:absolute; right:-16px; top:50%;
	transform:translateY(-50%); color:var(--wj-primary); font-size:22px; opacity:.45; z-index:2;
}

/* ====================== 고객후기 ====================== */
.wj-rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 36px; padding:0; list-style:none; }
.wj-rev-card{
	background:#fff; border:1px solid var(--wj-line); border-radius:var(--wj-radius);
	padding:28px 26px; transition:transform .3s, box-shadow .3s;
	display:flex; flex-direction:column; min-height:210px;
}
.wj-rev-card:hover{ transform:translateY(-5px); box-shadow:var(--wj-shadow); }
.wj-rev-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.wj-avatar{
	width:46px; height:46px; flex-shrink:0; border-radius:50%; background:var(--wj-primary); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700;
}
.wj-rev-meta{ flex:1; min-width:0; }
.wj-rev-name{ font-size:16px; font-weight:700; color:var(--wj-ink); margin:0; }
.wj-rev-device{ display:inline-block; margin-top:4px; font-size:12px; color:var(--wj-primary-d); background:var(--wj-primary-soft); padding:2px 10px; border-radius:50px; }
.wj-stars{ color:#ffb400; font-size:13px; letter-spacing:1px; flex-shrink:0; }
.wj-rev-body{ font-size:14.5px; color:var(--wj-ink2); line-height:1.7; flex:1; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.wj-empty{ grid-column:1/-1; text-align:center; padding:60px 0; color:var(--wj-ink2); background:#fff; border:1px dashed var(--wj-line); border-radius:var(--wj-radius); }

/* ====================== 인증 / 안전 ====================== */
.wj-cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:980px; margin:0 auto; padding:0; list-style:none; }
.wj-cert-grid li a{
	display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 24px 28px;
	border-radius:var(--wj-radius); background:#fff; border:1px solid var(--wj-line); color:var(--wj-ink);
	transition:transform .25s, box-shadow .25s, border-color .25s;
}
.wj-cert-grid li a:hover{ transform:translateY(-6px); box-shadow:var(--wj-shadow); border-color:var(--wj-primary); }
.wj-cert-ico{ width:66px; height:66px; border-radius:50%; background:var(--wj-primary-soft); display:flex; align-items:center; justify-content:center; }
.wj-cert-ico i{ font-size:28px; color:var(--wj-primary); }
.wj-cert-name{ font-size:17px; font-weight:700; color:var(--wj-ink); }
.wj-cert-desc{ font-size:13.5px; color:var(--wj-ink2); }
.wj-cert-go{ margin-top:6px; font-size:13px; font-weight:700; color:var(--wj-primary); display:flex; align-items:center; gap:5px; transition:gap .2s; }
.wj-cert-grid li a:hover .wj-cert-go{ gap:9px; }

/* ====================== 하단 고정 문의바 (단색) ====================== */
.inquiry-bar{ background:var(--wj-primary); box-shadow:0 -4px 18px rgba(43,108,246,.22); }
.m-inquiry-bar{ background:var(--wj-primary); box-shadow:0 -4px 18px rgba(43,108,246,.22); }
.inquiry-brand{ font-size:24px; font-weight:800; color:#fff; letter-spacing:-1px; display:inline-block; }
.inquiry-bar .inquiry-form .form-row input,
.m-inquiry-bar .form-row input{ border:1px solid rgba(255,255,255,.4); }

/* ====================== 서브페이지 상단 (밝게 — 진행안내와 통일) ====================== */
#sub_top{
	background:linear-gradient(180deg,#ffffff 0%, var(--wj-primary-soft) 100%), url('../img/sec-bg.jpg') center center / cover no-repeat !important;
	height:320px !important; border-bottom:1px solid var(--wj-line);
}
#sub_top::before{ display:none !important; }
#sub_top h1{ color:var(--wj-ink) !important; }
#sub_top .breadcrumb,
#sub_top .breadcrumb a,
#sub_top .breadcrumb span{ color:var(--wj-ink2) !important; }
#b_sub .b_title h2{ color:var(--wj-primary); }
#b_sub .b_title h1{ color:var(--wj-ink); }

/* ====================== 푸터 / 플로팅 ====================== */
#ft .copy{ background:var(--wj-primary) !important; }
#ft .dos h1, #ft .dos h3{ color:var(--wj-ink); }
#phone-consult a{ background:var(--wj-primary) !important; }
#top a{ background:var(--wj-primary) !important; }

/* ====================== 반응형 ====================== */
@media screen and (max-width:1199px){
	.wj-stats-grid{ grid-template-columns:repeat(2,1fr); }
	.wj-adv-grid{ grid-template-columns:repeat(2,1fr); }
	.wj-phone-grid{ grid-template-columns:repeat(2,1fr); }
	.wj-steps{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
	.wj-steps .wj-step:not(:last-child)::after{ display:none; }
	.wj-rev-grid{ grid-template-columns:repeat(2,1fr); }
	.hero-title{ font-size:38px; }
	.wj-title{ font-size:32px; }
	#hd .gnb{ display:none; }
}
@media screen and (max-width:768px){
	.heroSwiper{ height:auto; min-height:460px; }
	.hero-slide{ padding:70px 0; }
	.hero-title{ font-size:30px; }
	.hero-desc{ font-size:15px; }
	.wj-section{ padding:60px 0; }
	.wj-title{ font-size:26px; margin-bottom:36px; }
	.wj-stats-grid{ gap:12px; }
	.wj-stat-num{ font-size:30px; }
	.wj-adv-grid{ grid-template-columns:1fr; }
	.wj-phone-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
	.wj-rev-grid{ grid-template-columns:1fr; }
	.wj-cert-grid{ grid-template-columns:1fr; }
}