/* ─────────────────────────────────────────────────────────────
   올다샵 메인 스킨 — 시안 "올다 홈 렌트리 v6" 레이아웃 그대로.
   간격/패딩/gap 은 시안 값을 그대로 옮겼고, 색만 찐한 파랑으로 교체했다.
   기존 사이트 CSS(약 340KB)와 섞이지 않도록 전부 .ad-root 아래로 스코프했다.
   ───────────────────────────────────────────────────────────── */
.ad-root{
  --blue:#1b4dd8; --blue-ink:#12379e; --blue-soft:#e7edfc; --navy:#1c2540;
  --orange:#ff8a00; --orange-soft:#fff4e8; --green:#22a06b; --green-soft:#e7f6ef; --hot:#ff5a5f;
  --ink:#2c2c2c; --slate:#586177; --gray:#788093; --gray2:#a9b1c3;
  --bg:#f3f5f9; --panel:#ffffff; --line:#e6e9ef; --ph:#e8ecf3;
  --shadow:0 2px 12px rgba(88,97,119,.07);
  /* 여백 3종 — 어드민에서 조절. 기본은 시안(16/22/11)보다 좁게 */
  /* 시안(모바일) 값 그대로. 어드민 > 메인 문구/이미지 관리에서 바꿀 수 있다. */
  --pad:16px; --secpad:22px; --gap:11px; --vpad:14px; --cardpad:16px;
  background:var(--panel); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5; padding:0;
}
/* ── 리셋 ─────────────────────────────────────────────────────
   기존 사이트 CSS가 340KB나 되고 .sec/.nav/.foot 같은 흔한 이름을 이미 쓴다.
   그 값들이 스며들면 시안과 간격·글자 크기가 달라지므로 여기서 전부 되돌린다. */
.ad-root *{box-sizing:border-box;margin:0;padding:0;}
.ad-root *,
.ad-root *::before,
.ad-root *::after{
  font-family:inherit; letter-spacing:inherit; word-break:keep-all;
  background-image:none; text-shadow:none; float:none; position:static;
}
.ad-root a{color:inherit; text-decoration:none; display:inline;}
.ad-root h1,.ad-root h2,.ad-root h3,.ad-root h4{font-size:inherit; font-weight:inherit; line-height:inherit;}
.ad-root p,.ad-root ul,.ad-root ol,.ad-root li{list-style:none; font-size:inherit; line-height:inherit;}
.ad-root button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
.ad-root input,.ad-root select,.ad-root textarea{font:inherit;}
.ad-root img{max-width:100%; height:auto; border:0; vertical-align:middle;}
/* position 을 리셋했으므로 필요한 곳만 되살린다 */
.ad-root .phone,.ad-root .hero-b,.ad-root .hero-img,.ad-root .cat,.ad-root .cat-panel,
.ad-root .qr,.ad-root .nav a,.ad-root .fab,.ad-root .tabbar{position:relative;}
.ad-root .cat .il,.ad-root .cat .chev,.ad-root .cat .new,.ad-root .hero-b .il,
.ad-root .hero-b .pg,.ad-root .hero-img .pg,.ad-root .nav a .bd,.ad-root .fab::after{position:absolute;}

/* 이 스킨이 뜨는 메인에서는 기존 하단바·플로팅 버튼을 숨긴다 (중복 방지).
   이 CSS는 메인에서만 로드되므로 다른 페이지에는 영향이 없다. */
.mo-tab-bar,#mo-tab-bar,.float-btn-stack,#float-btn-stack,
#aiFloatBtn,.kakao-float-widget{display:none !important;}

/* "현재 올다 이용중인 고객 수" 표시 제거 (PC 상단바 / 모바일 헤더 양쪽) */
.pc-top-bar-live,#moLiveUsers{display:none !important;}

/* PC 최상단 초록 바 제거 — #pc-top-bar{background:#173B29}
   로그인/회원가입 링크가 이 안에 있으므로, 메인에서는 헤더나 하단 탭바로 이동해야 한다. */
#pc-top-bar{display:none !important;}

/* 사이트 래퍼가 PC에서 본문을 1000px로 가두고 좌우 16px를 더 준다.
   그 탓에 PC 여백이 모바일보다 넓어 보이므로, 메인에서는 무력화하고
   여백은 스킨이 시안 값(16px)으로 직접 관리한다. */
#container_wrap,#container{
  max-width:none !important; width:auto !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
}
/* 폰 목업 틀 제거 + 화면 전체 폭.
   시안의 회색 배경(#e9ecf2)은 목업을 띄우려던 배경이라 함께 걷어냈다. */
.ad-root .phone{max-width:430px;width:100%;margin:0 auto;background:var(--panel);border-radius:0;overflow:visible;box-shadow:none;border:0;position:relative;}
.ad-root .scroll{background:var(--panel);padding-bottom:74px;}
.ad-root svg{display:block;}
.ad-root .ph{background:var(--ph);display:flex;align-items:center;justify-content:center;}
.ad-root .ph svg{width:24px;height:24px;stroke:#b6bece;}
.ad-root img{max-width:100%;}

/* header */
.ad-root .hd{background:var(--panel);display:flex;align-items:center;padding:var(--vpad) var(--pad) 4px;}
.ad-root .logo{font-weight:800;font-size:22px;color:var(--navy);letter-spacing:-.03em;text-decoration:none;}
.ad-root .logo b{color:var(--blue);}
.ad-root .hd .bell{margin-left:auto;color:var(--slate);}
.ad-root .nav{display:flex;gap:19px;overflow-x:auto;padding:8px var(--pad) 0;background:var(--panel);scrollbar-width:none;border-bottom:1px solid var(--line);}
.ad-root .nav::-webkit-scrollbar{display:none;}
.ad-root .nav a{font-size:15px;font-weight:700;color:var(--gray2);text-decoration:none;white-space:nowrap;padding-bottom:12px;position:relative;}
.ad-root .nav a.on{color:var(--navy);}
.ad-root .nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--navy);border-radius:3px;}
.ad-root .nav a .bd{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;padding:1px 5px;border-radius:6px;white-space:nowrap;}
.ad-root .nav a .bd.n{background:var(--orange);color:#fff;}
.ad-root .nav a .bd.t{background:var(--green-soft);color:var(--green);}

/* hero */
.ad-root .hero{padding:var(--vpad) var(--pad) 0;}
.ad-root .hero-b{border-radius:14px;color:#fff;padding:22px 20px;position:relative;overflow:hidden;min-height:132px;display:block;text-decoration:none;
  background:linear-gradient(120deg,#1b4dd8,#6f8bff,#4d6af0,#1b4dd8);background-size:300% 300%;animation:ad-gradient-shift 8s ease infinite;}
@keyframes ad-gradient-shift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.ad-root .hero-b .t{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.3;}
.ad-root .hero-b .go{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;margin-top:14px;opacity:.95;}
.ad-root .hero-b .il{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:ad-floatY 3.2s ease-in-out infinite;}
.ad-root .hero-b .il svg{stroke:rgba(255,255,255,.6);width:40px;height:40px;}
.ad-root .hero-b .il img{width:100%;height:100%;object-fit:cover;}
@keyframes ad-floatY{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-58%)}}
.ad-root .hero-b .pg{position:absolute;right:16px;bottom:12px;font-size:12px;opacity:.85;font-variant-numeric:tabular-nums;}
.ad-root .hero-b .pg::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:middle;animation:ad-pulse 1.6s ease-in-out infinite;}
@keyframes ad-pulse{50%{opacity:.4}}
/* 배너 이미지형 히어로 */
.ad-root .hero-img{border-radius:14px;overflow:hidden;position:relative;display:block;}
.ad-root .hero-img img{width:100%;display:block;}
.ad-root .hero-img .pg{position:absolute;right:12px;bottom:10px;font-size:11px;font-weight:700;color:#fff;background:rgba(28,37,64,.55);border-radius:999px;padding:3px 10px;}

/* search */
.ad-root .search{margin:var(--vpad) var(--pad) 0;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--gray);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,box-shadow .15s;}
.ad-root .search:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(27,77,216,.14);}
.ad-root .search svg{stroke:var(--blue);width:19px;height:19px;flex-shrink:0;}

/* section */
.ad-root .sec{padding:var(--secpad) 0 0;}
.ad-root .sec-h{display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);margin-bottom:12px;}
.ad-root .sec-h h2{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--navy);margin:0;}
.ad-root .pill-lbl{display:inline-block;background:var(--orange);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;margin:0 var(--pad) var(--gap);}
.ad-root .hrow{display:flex;gap:var(--gap);overflow-x:auto;padding:0 var(--pad) 6px;scrollbar-width:none;}
.ad-root .hrow::-webkit-scrollbar{display:none;}

/* 카테고리 카드 */
.ad-root .cat-grid{padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.ad-root .cat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:var(--cardpad);min-height:118px;text-decoration:none;overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;display:block;}
.ad-root .cat:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(88,97,119,.14);}
.ad-root .cat.active{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue);}
.ad-root .cat .nm{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.ad-root .cat .cnt{font-size:12px;color:var(--gray);margin-top:4px;line-height:1.35;font-variant-numeric:tabular-nums;}
.ad-root .cat .il{position:absolute;right:8px;bottom:8px;width:64px;height:64px;border-radius:12px;background:var(--ph);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ad-root .cat .il img{width:100%;height:100%;object-fit:contain;}
.ad-root .cat .chev{position:absolute;right:12px;top:14px;color:var(--gray2);transition:transform .25s;}
.ad-root .cat.active .chev{transform:rotate(180deg);color:var(--blue);}
.ad-root .cat.mini{min-height:110px;}
.ad-root .cat.mini .nm{font-size:15px;}
.ad-root .cat.wide{grid-column:1 / -1;min-height:92px;border:1.5px solid var(--blue);}
.ad-root .cat.wide .nm{color:var(--blue-ink);}
.ad-root .cat .new{position:absolute;top:-1px;left:14px;background:var(--hot);color:#fff;font-size:9px;font-weight:800;padding:3px 7px;border-radius:0 0 7px 7px;}
.ad-root .mini-grid{padding:var(--gap) var(--pad) 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);}

/* 카테고리 펼침 패널 */
.ad-root .cat-panel{margin:var(--gap) var(--pad) 0;border:1px solid var(--line);border-radius:16px;background:#f8fafc;overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease,margin .25s ease;}
.ad-root .cat-panel.open{max-height:1200px;opacity:1;margin-top:11px;}
.ad-root .cp-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 6px;}
.ad-root .cp-head .t{font-size:14px;font-weight:800;color:var(--navy);}
.ad-root .cp-head .t b{color:var(--blue-ink);}
.ad-root .cp-head .all{font-size:12px;font-weight:700;color:var(--gray);}
.ad-root .pitem{display:flex;align-items:center;gap:12px;padding:12px 15px;text-decoration:none;border-top:1px solid #eef1f6;}
.ad-root .pitem:first-of-type{border-top:none;}
.ad-root .pitem .pth{width:52px;height:60px;border-radius:9px;flex-shrink:0;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ad-root .pitem .pth svg{width:22px;height:22px;stroke:#b6bece;}
.ad-root .pitem .pth img{width:100%;height:100%;object-fit:contain;}
.ad-root .pitem .pb{flex:1;min-width:0;}
.ad-root .pitem .pn{font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.ad-root .pitem .ps{font-size:11.5px;color:var(--gray);margin-top:2px;}
.ad-root .pitem .ps .tel{display:inline-block;font-weight:800;color:var(--slate);}
.ad-root .pitem .pr{text-align:right;flex-shrink:0;}
.ad-root .pitem .pr .l{font-size:10.5px;color:var(--gray);font-weight:700;}
.ad-root .pitem .pr .v{font-size:15px;font-weight:900;color:var(--orange);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.ad-root .pitem .pr .v small{font-size:11px;font-weight:700;color:var(--slate);}
.ad-root .pitem .arr{color:var(--gray2);flex-shrink:0;}

/* 실시간 견적 카드 */
.ad-root .qc{flex:0 0 300px;background:#f6f8fc;border:1px solid var(--line);border-radius:16px;padding:var(--cardpad);text-decoration:none;transition:transform .15s ease;}
.ad-root .qc:active{transform:scale(.985);}
.ad-root .qc-h{display:flex;align-items:center;gap:11px;}
.ad-root .qc-lg{width:44px;height:44px;border-radius:9px;background:#fff;border:1px solid var(--line);overflow:hidden;flex-shrink:0;}
.ad-root .qc-lg img{width:100%;height:100%;object-fit:contain;}
.ad-root .qc-t{flex:1;min-width:0;}
.ad-root .qc-brand{font-size:12px;color:var(--slate);font-weight:700;}
.ad-root .qc-name{font-size:14.5px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-top:1px;}
.ad-root .qc-who{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px;}
.ad-root .qc-who b{font-size:14px;font-weight:800;color:var(--ink);}
.ad-root .qc-loc{font-size:11.5px;color:var(--gray);}
.ad-root .qc-row{display:flex;align-items:center;gap:var(--gap);background:#fff;border-radius:10px;padding:11px 13px;}
.ad-root .qc-row+.qc-row{margin-top:7px;}
.ad-root .qc-row.on{box-shadow:0 0 0 1.5px var(--orange);animation:ad-pickpulse 2.4s ease-in-out infinite;}
@keyframes ad-pickpulse{0%,100%{box-shadow:0 0 0 1.5px #ff8a00}50%{box-shadow:0 0 0 1.5px #ff8a00,0 0 0 5px rgba(255,138,0,.14)}}
.ad-root .qc-ck{width:20px;height:20px;border-radius:50%;border:1.5px solid #d3d9e4;flex-shrink:0;}
.ad-root .qc-row.on .qc-ck{border:none;background:var(--orange);display:flex;align-items:center;justify-content:center;}
.ad-root .qc-c1{font-size:12px;color:var(--gray);}
.ad-root .qc-c1 b{display:block;font-size:14px;color:var(--ink);font-weight:800;}
.ad-root .qc-c2{margin-left:auto;text-align:right;font-size:12px;color:var(--gray);}
.ad-root .qc-c2 b{display:block;font-size:14px;font-weight:800;color:var(--orange);}
.ad-root .qc-c2.hide b{color:var(--gray2);}

/* 후기 */
.ad-root .rev{flex:0 0 300px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:var(--cardpad);transition:transform .15s ease,box-shadow .15s ease;}
.ad-root .rev:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(88,97,119,.14);}
.ad-root .rev-top{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.ad-root .rev-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:15px;font-weight:800;}
.ad-root .rev-nm{font-size:14px;font-weight:800;color:var(--navy);}
.ad-root .rev-loc{margin-left:auto;font-size:11.5px;color:var(--gray);}
.ad-root .rev-hl{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:7px;line-height:1.35;}
.ad-root .rev-tx{font-size:12.5px;color:var(--slate);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:9px;}
.ad-root .rev-st{color:var(--orange);font-size:14px;letter-spacing:1px;}
.ad-root .outbtn{display:block;text-align:center;margin:var(--vpad) var(--pad) 0;padding:13px;border:1px solid var(--line);border-radius:999px;color:var(--slate);font-size:13px;font-weight:700;text-decoration:none;transition:transform .15s;}
.ad-root .outbtn:active{transform:scale(.97);}
.ad-root .outbtn.blue{border-color:#c9d3ff;color:var(--blue-ink);border-radius:12px;}

/* 꿀팁 세로 리스트 */
.ad-root .tips{padding:0 var(--pad);}
.ad-root .tip{display:flex;gap:15px;padding:16px 0;align-items:center;text-decoration:none;border-bottom:1px solid var(--line);transition:transform .15s;}
.ad-root .tip:active{transform:scale(.985);}
.ad-root .tip:last-child{border-bottom:none;}
.ad-root .tip .th{width:104px;height:88px;border-radius:12px;flex-shrink:0;overflow:hidden;}
.ad-root .tip .th img{width:100%;height:100%;object-fit:cover;}
.ad-root .tip .t{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.35;transition:color .15s;}
.ad-root .tip:hover .t{color:var(--blue-ink);}
.ad-root .tip .d{font-size:12.5px;color:var(--gray);margin-top:6px;}

/* QR 배너 */
.ad-root .qr{margin-top:22px;background:var(--blue);color:#fff;padding:24px 20px;position:relative;overflow:hidden;}
.ad-root .qr .k{font-size:13px;opacity:.9;}
.ad-root .qr .t{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:3px;}
.ad-root .qr .codes{display:flex;gap:10px;margin-top:16px;}
.ad-root .qr .code{background:#fff;border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;}
.ad-root .qr .code .box{width:58px;height:58px;background:conic-gradient(#111 0 25%,#fff 0 50%,#111 0 75%,#fff 0);background-size:12px 12px;border-radius:4px;}
.ad-root .qr .code span{font-size:11px;font-weight:700;color:var(--navy);}

/* 푸터 */
.ad-root .foot{background:var(--navy);color:#c9cdd8;padding:26px var(--pad) 24px;}
.ad-root .foot .lg{font-weight:800;font-size:20px;color:#fff;letter-spacing:-.03em;margin-bottom:16px;}
.ad-root .foot .biz{font-size:13px;font-weight:700;color:#e6e8ee;margin-bottom:12px;}
.ad-root .foot .em{font-size:12px;margin-bottom:14px;}
.ad-root .foot .em b{color:#e6e8ee;}
.ad-root .foot .lk{font-size:12px;color:#c9cdd8;text-decoration:underline;}
.ad-root .foot .soc{display:flex;gap:10px;margin:16px 0 14px;}
.ad-root .foot .soc i{width:38px;height:38px;border-radius:50%;background:#3a3e58;display:flex;align-items:center;justify-content:center;color:#c9cdd8;font-size:11px;font-weight:800;font-style:normal;}
.ad-root .foot .cp{font-size:11px;color:#8a8fa3;}

/* bottom nav */
/* 하단 고정 — 스크롤과 무관하게 화면 아래에 항상 붙어 있는다.
   폭 430px 중앙 정렬이라 PC에서도 본문 컬럼과 같은 자리에 놓인다.
   가려지는 만큼은 .scroll 의 padding-bottom(74px)이 받아준다. */
.ad-root .tabbar{position:fixed;left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:430px;bottom:0;z-index:40;
  background:var(--panel);border-top:1px solid var(--line);display:flex;padding:8px 4px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));}
.ad-root .tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--gray);text-decoration:none;}
.ad-root .tb svg{width:21px;height:21px;}
.ad-root .tb.on{color:var(--navy);}

/* fab */
/* 목업 틀이 없어졌으므로 fixed 로 화면 오른쪽 아래에 띄운다. */
.ad-root .fab{position:fixed;right:max(14px, calc(50vw - 201px));bottom:88px;width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(27,77,216,.4);z-index:30;border:none;cursor:pointer;animation:ad-fabpulse 2.2s ease-in-out infinite;}
.ad-root .fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);animation:ad-fabring 2.2s ease-out infinite;}
@keyframes ad-fabpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ad-fabring{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

.ad-root .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);}
.ad-root .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .ad-root *,.ad-root *::after,.ad-root *::before{animation:none!important;transition:none!important;}
  .ad-root .reveal{opacity:1!important;transform:none!important;}
}