@charset "utf-8";
/* ============================================================
   길목인 플랫폼 테마 CSS
   gilmokin.com · 남색 #173A5E / 정조준 주황 #FF6B35
   ============================================================ */

:root{
  --남색:#173A5E; --남색진:#0F2942; --주황:#FF6B35; --주황연:#FFF1EB;
  --회색:#5B6672; --연회색:#8A94A0; --테두리:#E4E8EC;
  --바탕:#FFFFFF; --바탕2:#F5F7F9; --먹:#16191D;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--바탕); color:var(--먹); font-size:15px; line-height:1.7;
     font-family:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
     -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.틀{max-width:1120px; margin:0 auto; padding:0 22px;}

/* ── 헤더 ── */
#gil_header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
       backdrop-filter:blur(8px); border-bottom:1px solid var(--테두리);}
.헤더속{display:flex; align-items:center; gap:26px; height:66px;}
.로고{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px;
      color:var(--남색); letter-spacing:-0.5px;}
.로고 svg{width:34px; height:34px; flex-shrink:0;}
.로고 .dom{font-size:12px; color:var(--연회색); font-weight:600; letter-spacing:0;}
#gil_header nav{margin-left:auto; display:flex; gap:26px; font-size:14.5px; color:var(--회색); font-weight:600;}
#gil_header nav a:hover{color:var(--남색);}
.전화버튼{background:var(--남색); color:#fff; padding:9px 18px; border-radius:8px;
         font-weight:700; font-size:14px; white-space:nowrap;}
.햄버거{display:none; margin-left:auto; width:42px; height:42px; border:none; background:none;
       cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0;}
.햄버거 span{display:block; height:2.5px; width:24px; background:var(--남색); border-radius:2px;
       margin:0 auto; transition:.25s;}
.햄버거.열림 span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.햄버거.열림 span:nth-child(2){opacity:0;}
.햄버거.열림 span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.모바일메뉴{display:none; position:sticky; top:66px; z-index:49; background:#fff;
       border-bottom:1px solid var(--테두리); box-shadow:0 12px 24px rgba(23,58,94,.08);}
.모바일메뉴.열림{display:block;}
.모바일메뉴 a{display:block; padding:15px 22px; font-size:16px; font-weight:600;
       color:var(--먹); border-bottom:1px solid #F0F2F5;}
.모바일메뉴 a:last-child{border-bottom:none;}
.모바일메뉴 .모바일전화{background:var(--주황); color:#fff; font-weight:800; text-align:center; margin:10px; border-radius:10px;}
@media(max-width:760px){
  #gil_header nav{display:none;}
  .전화버튼{display:none;}
  .햄버거{display:flex;}
  .헤더속{gap:10px;}
  .로고{font-size:19px;}
  .로고 .dom{display:none;}
}

/* ── 히어로 ── */
.히어로{background:linear-gradient(135deg,#173A5E 0%,#0F2942 100%); color:#fff;
       position:relative; overflow:hidden;}
.히어로::after{content:""; position:absolute; right:-120px; top:-120px;
      width:420px; height:420px; border-radius:50%; border:60px solid rgba(255,107,53,.12);}
.히어로::before{content:""; position:absolute; right:60px; top:130px;
      width:120px; height:120px; border-radius:50%; background:rgba(255,107,53,.16);}
.히어로속{padding:70px 0 76px; position:relative; z-index:1; display:flex; align-items:center; gap:40px;}
.히어로글{max-width:620px; flex:1 1 auto;}
.히어로그림{flex:0 0 380px; display:flex; justify-content:center;}
.슬라이드{position:relative; width:100%; max-width:410px; aspect-ratio:1/1;}
.슬라이드 img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      border-radius:50%; box-shadow:0 20px 46px rgba(0,0,0,.42); opacity:0; transition:opacity .9s ease;}
.슬라이드 img.보임{opacity:1;}
@media(max-width:900px){
  .히어로속{flex-direction:column; align-items:flex-start; gap:28px; padding:52px 0 60px;}
  .히어로그림{flex:none; width:100%; justify-content:center;}
  .슬라이드{max-width:280px;}
}
.뱃지{display:inline-block; background:rgba(255,107,53,.18); color:#FFB599;
      font-size:13px; font-weight:700; padding:6px 14px; border-radius:20px; margin-bottom:22px;}
.히어로 h1{font-size:46px; line-height:1.25; letter-spacing:-1.2px; font-weight:800; margin-bottom:20px;}
.히어로 h1 .포인트{color:var(--주황);}
.히어로 p{font-size:18px; color:#C5D2E0; line-height:1.7; margin-bottom:34px;}
.히어로 .버튼들{display:flex; gap:12px; flex-wrap:wrap;}
.주버튼{background:var(--주황); color:#fff; padding:15px 28px; border-radius:10px;
       font-weight:800; font-size:16px; box-shadow:0 8px 20px rgba(255,107,53,.32);}
.부버튼{background:rgba(255,255,255,.1); color:#fff; padding:15px 26px; border-radius:10px;
       font-weight:700; font-size:16px; border:1px solid rgba(255,255,255,.25);}
@media(max-width:640px){ .히어로 h1{font-size:33px;} .히어로 p{font-size:16px;} }

/* ── 신뢰 띠 ── */
.신뢰띠{background:var(--남색진); color:#fff; padding:22px 0;}
.신뢰속{display:flex; justify-content:space-around; flex-wrap:wrap; gap:18px; text-align:center;}
.신뢰 .수{font-size:28px; font-weight:800; color:var(--주황); letter-spacing:-0.5px;}
.신뢰 .설명{font-size:13px; color:#A8BDD4; margin-top:2px;}

/* ── 섹션 공통 ── */
.gil섹션{padding:76px 0;}
.섹션머리{text-align:center; max-width:640px; margin:0 auto 48px;}
.꼬리표{color:var(--주황); font-weight:800; font-size:14px; letter-spacing:1px; margin-bottom:12px;}
.섹션머리 h2{font-size:34px; font-weight:800; letter-spacing:-0.8px; line-height:1.3; margin-bottom:14px;}
.섹션머리 p{color:var(--회색); font-size:16.5px;}
@media(max-width:640px){ .섹션머리 h2{font-size:26px;} .gil섹션{padding:54px 0;} }

/* ── 이름의 뜻 ── */
.이름뜻 .섹션머리 h2 .주{color:var(--주황);}
.뜻판{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;}
.뜻자{background:var(--바탕2); border:1px solid var(--테두리); border-radius:14px;
      padding:22px 24px; text-align:center; min-width:190px;}
.뜻자 .글자{display:block; font-size:32px; font-weight:800; color:var(--남색); letter-spacing:-1px;}
.뜻자 .글자 small{font-size:16px; color:var(--회색); font-weight:700;}
.뜻자 .풀이{display:block; margin-top:10px; font-size:14px; color:var(--회색); line-height:1.6;}
.더하기,.화살{font-size:26px; font-weight:800; color:var(--주황);}
.뜻결과{flex:1 1 340px; max-width:440px; background:var(--남색); color:#fff; border-radius:16px; padding:26px 28px;}
.뜻결과 .한줄{font-size:20px; font-weight:800; color:var(--주황); margin-bottom:12px; letter-spacing:-0.3px;}
.뜻결과 p{font-size:15px; line-height:1.75; color:#D5DEEA;}
.뜻결과 p b{color:#fff;}
@media(max-width:760px){ .화살{transform:rotate(90deg);} .뜻판{gap:14px;} }

/* ── 특화 ── */
.특화{background:var(--바탕2);}
.특화판{display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center;}
.특화글 .꼬리표{text-align:left;}
.특화글 h2{font-size:32px; font-weight:800; letter-spacing:-0.8px; line-height:1.32; margin-bottom:18px;}
.특화글 h2 .주{color:var(--주황);}
.특화글 p{color:var(--회색); font-size:16px; margin-bottom:14px;}
.특화글 .포인트목록{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.특화글 .항{display:flex; gap:12px; align-items:flex-start;}
.특화글 .항 .체크{flex-shrink:0; width:24px; height:24px; border-radius:50%;
      background:var(--주황연); color:var(--주황); font-weight:800; font-size:13px;
      display:flex; align-items:center; justify-content:center; margin-top:2px;}
.특화카드{background:#fff; border:1px solid var(--테두리); border-radius:18px; padding:26px;
         box-shadow:0 12px 40px rgba(23,58,94,.07);}
.특화카드 .미니제목{font-size:13px; color:var(--연회색); font-weight:700; margin-bottom:14px;}
.비교줄{display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; margin-bottom:10px;}
.비교줄.나쁨{background:#FBF0F0;}
.비교줄.좋음{background:var(--주황연); border:1px solid #FFD9C7;}
.비교줄 .라벨{font-size:13px; color:var(--회색); width:110px; flex-shrink:0;}
.비교줄 .값{font-weight:800; font-size:19px;}
.비교줄.나쁨 .값{color:#C0392B;}
.비교줄.좋음 .값{color:var(--주황);}
.비교줄 .잔글{font-size:12px; color:var(--연회색); margin-left:auto; text-align:right;}
@media(max-width:800px){ .특화판{grid-template-columns:1fr; gap:30px;} }

/* ── 서비스 ── */
.서비스판{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.서비스카드{background:#fff; border:1px solid var(--테두리); border-radius:16px; padding:30px 26px;
           transition:transform .15s, box-shadow .15s;}
.서비스카드:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(23,58,94,.1);}
.서비스카드 .아이콘{width:52px; height:52px; border-radius:13px; background:var(--주황연);
      display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:24px;}
.서비스카드 h3{font-size:19px; font-weight:800; margin-bottom:10px;}
.서비스카드 p{color:var(--회색); font-size:14.5px;}
.서비스카드 .태그{display:inline-block; margin-top:14px; font-size:12px; font-weight:700;
      color:var(--남색); background:var(--바탕2); padding:4px 11px; border-radius:14px;}
@media(max-width:800px){ .서비스판{grid-template-columns:1fr;} }

/* ── 작동 방식 ── */
.작동{background:var(--남색); color:#fff;}
.작동 .섹션머리 h2{color:#fff;}
.작동 .섹션머리 p{color:#A8BDD4;}
.단계판{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.단계{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:26px 22px;}
.단계 .번호{font-size:13px; font-weight:800; color:var(--주황); margin-bottom:12px;}
.단계 h4{font-size:17px; font-weight:700; margin-bottom:8px;}
.단계 p{font-size:13.5px; color:#B5C4D4; line-height:1.6;}
@media(max-width:800px){ .단계판{grid-template-columns:1fr 1fr;} }

/* ── 지역 ── */
.지역판{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.지역카드{background:#fff; border:1px solid var(--테두리); border-radius:13px; padding:20px;
         display:flex; flex-direction:column; gap:6px; transition:border-color .15s, box-shadow .15s;}
.지역카드:hover{border-color:var(--주황); box-shadow:0 8px 24px rgba(255,107,53,.12);}
.지역카드 .이름{font-size:17px; font-weight:800;}
.지역카드 .수{font-size:13px; color:var(--회색);}
.지역카드 .수 b{color:var(--주황); font-size:15px;}
.지역카드 .화살{margin-top:6px; font-size:13px; color:var(--연회색); font-weight:600;}
@media(max-width:800px){ .지역판{grid-template-columns:1fr 1fr;} }

/* ── 업체 리스트 ── */
.업체판{margin-top:36px; background:#fff; border:1px solid var(--테두리); border-radius:16px; overflow:hidden;}
.업체판 .판머리{display:flex; align-items:center; gap:10px; padding:18px 24px;
      border-bottom:1px solid var(--테두리); background:var(--바탕2);}
.업체판 .판머리 .지명{font-weight:800; font-size:16px;}
#업체목록{display:grid; grid-template-columns:1fr 1fr;}
#업체목록 .업체줄:nth-child(odd){border-right:1px solid #F0F2F5;}
#업체목록 .업체줄:nth-last-child(-n+2){border-bottom:none;}
.업체줄{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid #F0F2F5;}
.업체줄 .썸네일{width:46px; height:46px; border-radius:11px; background:var(--남색);
      color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center;
      justify-content:center; flex-shrink:0;}
.업체줄 .정보{flex:1; min-width:0;}
.업체줄 .상호{font-weight:700; font-size:15.5px;}
.업체줄 .메타{font-size:13px; color:var(--연회색); margin-top:2px;}
.업체줄 .뱃지들{display:flex; gap:6px; flex-wrap:wrap; margin-top:5px;}
.미니뱃지{font-size:11px; font-weight:700; padding:2px 8px; border-radius:11px;
      background:var(--주황연); color:var(--주황);}
.미니뱃지.남{background:#E9F0F7; color:var(--남색);}
.업체줄 .전화{background:var(--주황연); color:var(--주황); border:1px solid #FFD9C7;
      padding:8px 15px; border-radius:8px; font-size:13px; font-weight:800; flex-shrink:0;}
.업체줄 .전화:hover{background:var(--주황); color:#fff;}
.새로고침버튼{margin-left:auto; background:var(--주황연); color:var(--주황);
      border:1px solid #FFD9C7; border-radius:8px; padding:7px 13px; font-size:13px;
      font-weight:700; cursor:pointer; font-family:inherit;}
@media(max-width:640px){ #업체목록{grid-template-columns:1fr;} #업체목록 .업체줄{border-right:none;} }

/* ── CTA ── */
.cta{background:linear-gradient(135deg,#FF6B35,#FF8659); color:#fff; text-align:center;}
.cta h2{font-size:34px; font-weight:800; letter-spacing:-0.8px; margin-bottom:14px;}
.cta p{font-size:17px; color:#FFEDE4; margin-bottom:30px;}
.cta .흰버튼{background:#fff; color:var(--주황); padding:16px 36px; border-radius:10px;
      font-weight:800; font-size:17px; display:inline-block; box-shadow:0 8px 24px rgba(0,0,0,.15);}
@media(max-width:640px){ .cta h2{font-size:26px;} .cta .흰버튼{display:block;} }

/* ── 푸터 ── */
#gil_footer{background:var(--남색진); color:#8FA3B8; padding:44px 0 30px; font-size:13.5px;}
.푸터판{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:26px;}
.푸터 .로고{color:#fff; margin-bottom:12px;}
.푸터메뉴{display:flex; gap:40px; flex-wrap:wrap;}
.푸터메뉴 .묶음 .제목{color:#fff; font-weight:700; font-size:14px; margin-bottom:10px;}
.푸터메뉴 .묶음 a{display:block; margin-bottom:7px; color:#8FA3B8;}
.푸터메뉴 .묶음 a:hover{color:#fff;}
.푸터바닥{border-top:1px solid rgba(255,255,255,.1); padding-top:20px; font-size:12.5px; color:#6B7F94;}
.가게관리버튼{display:inline-block; margin-top:10px; background:var(--주황); color:#fff !important;
        padding:8px 14px; border-radius:8px; font-weight:800; font-size:13px;}
@media(max-width:640px){
  .푸터판{flex-direction:column; gap:24px;}
  .푸터메뉴{display:grid; grid-template-columns:1fr 1fr; gap:24px 16px;}
  .신뢰속{display:grid; grid-template-columns:1fr 1fr; gap:24px 12px;}
  .신뢰 .수{font-size:23px;}
  .히어로속{align-items:center; text-align:center;}
  .히어로글{max-width:none;}
  .히어로 .버튼들{width:100%; justify-content:center;}
  .주버튼,.부버튼{flex:1 1 100%; text-align:center;}
  .뜻자,.뜻결과{width:100%;}
}

/* ── 그누보드 기본요소 최소 보정 ── */
#gil_wrapper{min-height:60vh;}
.gil본문{padding:40px 0 60px;}