@charset "utf-8";
/* /tool/dream-lotto — 꿈 해몽 & 번호 조합기
   상단 네비(view/tool/_e/topnav.php)는 navPrefix='dl'로 렌더되므로 .dl-nav* 클래스를 여기서 테마 지정한다. */

*{ box-sizing:border-box; }
body{
	margin:0; background:#f1f5f9; color:#0f172a;
	font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
	-webkit-text-size-adjust:100%;
}
a{ color:inherit; }

/* ── 상단 네비 ──
   마크업은 공통 partial(view/tool/_e/topnav.php)이 navPrefix='dl'로 그린다.
   클래스명은 파셜이 정한 규격(.dl-topnav / .dl-topnav-left / .dl-site-brand /
   .dl-nav-toggle / .dl-nav-links / .dl-tool-switcher*)을 그대로 따라야 한다 — 이름이 하나라도
   어긋나면 네비 전체가 스타일 없이 맨 링크로 쏟아진다. */
.dl-topnav{
	background:linear-gradient(135deg,#312e81,#6d28d9);
	padding:10px 16px; position:sticky; top:0; z-index:50;
}
.dl-topnav-left{
	display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
	max-width:860px; margin:0 auto; position:relative;
}
.dl-topnav a{
	color:#ddd6fe; text-decoration:none; font-size:14px; font-weight:600;
	display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.dl-topnav a:hover{ color:#fff; }
.dl-site-brand{ font-weight:900 !important; color:#fff !important; letter-spacing:.5px; flex-shrink:0; font-size:15px !important; }

/* 모바일 햄버거 + 접이식 링크 */
.dl-nav-toggle{
	display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.25); border-radius:8px;
	color:#fff; font-size:16px; padding:6px 10px; cursor:pointer; flex-shrink:0;
}
.dl-nav-links{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
@media(max-width:640px){
	.dl-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
	.dl-nav-links{
		display:none; position:absolute; top:100%; right:0; margin-top:8px;
		flex-direction:column; align-items:stretch; gap:2px;
		background:#312e81; border:1px solid rgba(255,255,255,.18); border-radius:10px;
		box-shadow:0 12px 32px rgba(0,0,0,.35); padding:6px; min-width:180px; z-index:60;
	}
	.dl-nav-links.open{ display:flex; }
	.dl-nav-links a{ padding:10px 12px; border-radius:8px; font-size:13px; }
	.dl-nav-links a:hover{ background:rgba(255,255,255,.1); }
}

/* 도구 전환 드롭다운 */
.dl-tool-switcher{ position:relative; }
.dl-tool-switcher-btn .fa-chevron-down{ font-size:10px; margin-left:2px; transition:transform .15s; }
.dl-tool-switcher.open .fa-chevron-down{ transform:rotate(180deg); }
.dl-tool-switcher-panel{
	display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
	background:#fff; border:1px solid #e2e8f0; border-radius:12px;
	box-shadow:0 12px 32px rgba(15,23,42,.18); padding:6px; z-index:100;
}
.dl-tool-switcher.open .dl-tool-switcher-panel{ display:block; }
.dl-tool-switcher-item{
	display:flex !important; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
	font-size:13px !important; color:#334155 !important; white-space:nowrap;
}
.dl-tool-switcher-item:hover{ background:#f1f5f9; color:#6d28d9 !important; }
.dl-tool-switcher-item.on{ background:#ede9fe; color:#6d28d9 !important; font-weight:700; }
.dl-tool-switcher-item i{ width:16px; text-align:center; color:#7c3aed; }

.dl-page{ max-width:860px; margin:0 auto; padding:22px 16px 40px; }

/* ── 인트로 ── */
.dl-intro{ margin-bottom:20px; }
.dl-badge{
	display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px;
	background:#ede9fe; color:#6d28d9; font-size:12px; font-weight:800; margin-bottom:12px;
}
.dl-intro h1{ font-size:26px; font-weight:900; margin:0 0 10px; letter-spacing:-.5px; display:flex; align-items:center; gap:10px; }
.dl-intro-lead{ font-size:15px; line-height:1.65; color:#334155; margin:0 0 14px; }
.dl-intro-body p{ font-size:13.5px; line-height:1.7; color:#64748b; margin:0 0 8px; }
.dl-notice{
	background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:11px 13px;
	color:#9a3412 !important; font-size:12.5px !important; line-height:1.6 !important;
}
.dl-notice b{ color:#7c2d12; }

/* ── 검색 ── */
.dl-search-box{
	background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px;
	box-shadow:0 4px 20px rgba(15,23,42,.05); margin-bottom:18px;
}
.dl-search-form{ display:flex; gap:8px; margin-bottom:14px; }
.dl-search-input{
	flex:1; min-width:0; border:1.5px solid #e2e8f0; border-radius:10px; padding:12px 14px;
	font-size:14px; font-family:inherit; background:#f8fafc; outline:none;
}
.dl-search-input:focus{ border-color:#6d28d9; background:#fff; }
.dl-search-btn{
	flex-shrink:0; border:none; border-radius:10px; padding:12px 18px; cursor:pointer;
	background:linear-gradient(135deg,#4c1d95,#7c3aed); color:#fff; font-size:14px; font-weight:800; font-family:inherit;
}
.dl-tag-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; }
.dl-tag-label{ font-size:11.5px; font-weight:800; color:#94a3b8; margin-right:2px; }
.dl-tag{
	display:inline-block; padding:5px 11px; border-radius:20px; background:#f1f5f9; color:#475569;
	font-size:12.5px; font-weight:700; text-decoration:none;
}
.dl-tag:hover{ background:#ede9fe; color:#6d28d9; }
.dl-tag.on{ background:#6d28d9; color:#fff; }
.dl-cat-row{ display:flex; flex-wrap:wrap; gap:6px; padding-top:12px; border-top:1px solid #f1f5f9; }
.dl-cat{
	display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:9px;
	border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:12.5px; font-weight:700; text-decoration:none;
}
.dl-cat span{ font-size:11px; color:#94a3b8; font-weight:600; }
.dl-cat:hover{ border-color:#a78bfa; color:#6d28d9; }
.dl-cat.on{ background:#6d28d9; border-color:#6d28d9; color:#fff; }
.dl-cat.on span{ color:#ddd6fe; }

/* ── 결과 상세 ── */
.dl-result{
	background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:20px;
	box-shadow:0 4px 20px rgba(15,23,42,.05); margin-bottom:18px;
}
.dl-result-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.dl-result-cat{ display:inline-block; padding:4px 11px; border-radius:20px; background:#ede9fe; color:#6d28d9; font-size:11.5px; font-weight:800; }
.dl-result-score{ font-size:12.5px; color:#64748b; font-weight:700; }
.dl-result-score b{ color:#7c3aed; font-size:15px; }
.dl-result-title{ font-size:20px; font-weight:900; margin:0 0 10px; line-height:1.4; letter-spacing:-.3px; }
.dl-result-meaning{ font-size:14px; line-height:1.75; color:#334155; margin:0 0 18px; }

.dl-num-block{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
.dl-num-label{ font-size:12.5px; font-weight:800; color:#64748b; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.dl-balls{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.dl-ball{
	width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
	color:#fff; font-size:15px; font-weight:800; flex-shrink:0;
}
.dl-ball.sm{ width:28px; height:28px; font-size:12px; }
.dl-ball.y{ background:#fbbf24; }
.dl-ball.b{ background:#3b82f6; }
.dl-ball.r{ background:#ef4444; }
.dl-ball.g{ background:#10b981; }
.dl-ball.k{ background:#64748b; }
.dl-num-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.dl-act-btn{
	border:1px solid #e2e8f0; background:#fff; border-radius:9px; padding:9px 14px; cursor:pointer;
	font-size:12.5px; font-weight:700; color:#475569; font-family:inherit;
}
.dl-act-btn:hover{ border-color:#a78bfa; color:#6d28d9; }
.dl-num-hint{ font-size:11.5px; color:#94a3b8; margin:10px 0 0; line-height:1.5; }

.dl-base-block{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px dashed #e2e8f0; }
.dl-base-label{ font-size:11.5px; font-weight:800; color:#94a3b8; }
.dl-base-nums{ font-size:13px; font-weight:700; color:#475569; }

/* ── 목록 ── */
.dl-list-box{ margin-bottom:18px; }
.dl-list-title{ font-size:15px; font-weight:800; margin:0 0 12px; color:#0f172a; }
.dl-list-title b{ color:#7c3aed; }
.dl-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:10px; }
.dl-item{
	display:block; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px;
	text-decoration:none; transition:border-color .15s, transform .15s;
}
.dl-item:hover{ border-color:#a78bfa; transform:translateY(-2px); }
.dl-item.on{ border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.dl-item-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; }
.dl-item-kw{ display:inline-block; padding:3px 9px; border-radius:20px; background:#f1f5f9; color:#475569; font-size:11px; font-weight:800; }
.dl-item-score{ font-size:11.5px; font-weight:800; color:#7c3aed; }
.dl-item-title{ font-size:13.5px; font-weight:700; color:#0f172a; line-height:1.5; margin-bottom:10px; }
.dl-item-nums{ display:flex; flex-wrap:wrap; gap:4px; }

/* ── 빈 상태 ── */
.dl-empty-box{
	background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:36px 20px; text-align:center; margin-bottom:18px;
}
.dl-empty-box i{ font-size:30px; color:#cbd5e1; margin-bottom:12px; display:block; }
.dl-empty-box p{ font-size:14px; color:#475569; margin:0 0 6px; font-weight:700; }
.dl-empty-sub{ font-size:12.5px !important; color:#94a3b8 !important; font-weight:400 !important; }
.dl-empty-btn{
	display:inline-block; margin-top:14px; padding:10px 18px; border-radius:9px;
	background:#6d28d9; color:#fff; font-size:13px; font-weight:800; text-decoration:none;
}

.dl-ad-slot{ margin:18px 0; display:flex; justify-content:center; }

/* ── FAQ / 다른 도구 ── */
.dl-faq{ margin:24px 0 0; }
.dl-faq-title{ font-size:16px; font-weight:800; margin-bottom:10px; }
.dl-faq-item{ border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; margin-bottom:8px; background:#fff; }
.dl-faq-item summary{ font-size:13px; font-weight:700; cursor:pointer; }
.dl-faq-item p{ margin:8px 0 0; font-size:13px; color:#64748b; line-height:1.6; }

.dl-other-tools{ margin:24px 0; padding:18px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; }
.dl-other-tools-label{ font-size:12px; font-weight:700; color:#64748b; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.dl-other-tools-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
.dl-other-tool-card{
	display:flex; align-items:center; gap:8px; padding:12px 14px; background:#f8fafc;
	border:1px solid #e2e8f0; border-radius:10px; text-decoration:none; color:#0f172a;
	font-size:13px; font-weight:700; transition:border-color .15s;
}
.dl-other-tool-card:hover{ border-color:#a78bfa; }

.dl-footer{ text-align:center; padding:24px 16px 32px; color:#94a3b8; font-size:12px; }

/* ── 토스트(복사/공유 안내) ── */
.dl-toast{
	position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px);
	background:rgba(15,23,42,.92); color:#fff; padding:11px 18px; border-radius:10px;
	font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999;
}
.dl-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:640px){
	.dl-page{ padding:16px 14px 32px; }
	.dl-intro h1{ font-size:21px; }
	.dl-intro-lead{ font-size:14px; }
	.dl-search-form{ flex-direction:column; }
	.dl-search-btn{ width:100%; }
	.dl-result{ padding:16px; }
	.dl-result-title{ font-size:17px; }
	.dl-ball{ width:36px; height:36px; font-size:14px; }
	.dl-list{ grid-template-columns:1fr; }
	.dl-num-actions .dl-act-btn{ flex:1; text-align:center; }
}