/* =========================================================
   듀타임솔루션 홈페이지 - 색상과 배치
   색을 바꾸고 싶으면 아래 :root 부분의 값만 고치면 전부 바뀝니다.
   ========================================================= */

:root{
  /* 로고에서 가져온 짙은 남색 - 신뢰를 주는 메인 색 */
  --navy:        #0B1F47;
  --navy-2:      #14306B;
  --navy-deep:   #071638;

  /* 포인트로 쓰는 밝은 파랑 */
  --sky:         #2B6CB0;
  --sky-soft:    #E9F1FB;

  /* 글자색 */
  --ink:         #16233D;
  --gray:        #55627A;
  --gray-light:  #8A94A6;

  /* 배경 */
  --bg:          #FFFFFF;
  --bg-soft:     #F5F7FB;
  --line:        #E3E8F0;

  /* 상담 버튼 전용 노란색 - 이 색은 상담 버튼에만 씁니다 */
  --kakao:       #FEE500;
  --kakao-dark:  #F2D900;
  --kakao-ink:   #191600;

  --radius:      14px;
  --shadow:      0 10px 30px rgba(11,31,71,.08);
  --shadow-lg:   0 18px 50px rgba(11,31,71,.16);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:74px; }

body{
  margin:0;
  font-family:'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;      /* 한글이 단어 중간에서 끊기지 않게 */
  overflow-wrap:break-word;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; line-height:1.35; letter-spacing:-.02em; }
p{ margin:0; }

.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }
.wrap.narrow{ max-width:800px; }
.center{ text-align:center; margin-top:38px; }
.br-m{ display:none; }          /* 휴대폰에서만 줄바꿈되는 표시 */

/* =========================================================
   버튼
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:999px;
  font-weight:700; font-size:16px; letter-spacing:-.02em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap; cursor:pointer;
}
.btn .ico{ width:20px; height:20px; fill:currentColor; flex:0 0 auto; }
.btn:hover{ transform:translateY(-2px); }

.btn-kakao{ background:var(--kakao); color:var(--kakao-ink); box-shadow:0 8px 22px rgba(254,229,0,.45); }
.btn-kakao:hover{ background:var(--kakao-dark); box-shadow:0 12px 28px rgba(254,229,0,.55); }

.btn-line{ background:#fff; color:var(--navy); border:2px solid var(--navy); }
.btn-line:hover{ background:var(--navy); color:#fff; }

.btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn-lg{ padding:19px 38px; font-size:18px; }
.btn-sm{ padding:11px 20px; font-size:14px; }

/* =========================================================
   1. 상단 고정 바
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.topbar.scrolled{ box-shadow:0 6px 22px rgba(11,31,71,.08); }
.topbar-inner{ display:flex; align-items:center; gap:24px; height:74px; }

.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand img{ height:34px; width:auto; }
.brand-text{
  display:flex; flex-direction:column; line-height:1.1;
  font-weight:900; font-size:19px; color:var(--navy); letter-spacing:-.03em;
}
.brand-text small{ font-size:9.5px; font-weight:500; color:var(--gray-light); letter-spacing:.08em; }

.gnb{ display:flex; gap:28px; margin-left:auto; }
.gnb a{
  position:relative; font-size:15.5px; font-weight:500; color:var(--ink);
  padding:6px 0; transition:color .2s;
}
.gnb a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--sky); transform:scaleX(0); transition:transform .25s ease;
}
.gnb a:hover{ color:var(--sky); }
.gnb a:hover::after{ transform:scaleX(1); }

.topbar-cta{ flex:0 0 auto; }
.hamburger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.25s; border-radius:2px; }
.hamburger.on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.on span:nth-child(2){ opacity:0; }
.hamburger.on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   2. 첫 화면 (히어로)
   ========================================================= */
.hero{
  position:relative;
  padding:150px 0 90px;
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(43,108,176,.30), transparent 62%),
    linear-gradient(170deg, var(--navy-deep) 0%, var(--navy) 52%, var(--navy-2) 100%);
  color:#fff; text-align:center; overflow:hidden;
}
.hero::after{   /* 아래쪽을 흰색으로 부드럽게 넘김 */
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background:linear-gradient(to bottom, transparent, #fff);
}
.hero-inner{ position:relative; z-index:2; }

.hero-eyebrow{
  display:inline-block; font-size:13.5px; font-weight:600; letter-spacing:.06em;
  color:#BBD3F2; border:1px solid rgba(187,211,242,.4);
  padding:7px 18px; border-radius:999px; margin-bottom:26px;
}
.hero-title{
  font-size:clamp(30px, 5.4vw, 54px); font-weight:900; letter-spacing:-.035em;
  line-height:1.3; margin-bottom:24px;
}
.hero-title em{
  font-style:normal; position:relative; display:inline-block;
  background:linear-gradient(to top, rgba(254,229,0,.28) 38%, transparent 38%);
  padding:0 4px;
}
.hero-sub{
  font-size:clamp(15px, 2vw, 18.5px); color:#D3E0F2; margin-bottom:40px; line-height:1.85;
}
.hero-sub strong{ color:#fff; font-weight:700; }

.hero-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero-badges{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:46px;
}
.hero-badges li{
  font-size:14px; color:#CFDEF2;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:10px 18px; border-radius:999px;
}
.hero-badges b{ color:#fff; font-weight:700; }

.scroll-hint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; }
.scroll-hint span{
  display:block; width:22px; height:36px; border:2px solid rgba(255,255,255,.45); border-radius:999px; position:relative;
}
.scroll-hint span::before{
  content:''; position:absolute; left:50%; top:8px; width:4px; height:7px; margin-left:-2px;
  background:rgba(255,255,255,.8); border-radius:2px; animation:wheel 1.6s infinite;
}
@keyframes wheel{ 0%{opacity:0; transform:translateY(0);} 35%{opacity:1;} 100%{opacity:0; transform:translateY(11px);} }

/* =========================================================
   구간 공통
   ========================================================= */
.sec{ padding:96px 0; }
.sec-eyebrow{
  text-align:center; font-size:14px; font-weight:700; color:var(--sky);
  letter-spacing:.04em; margin-bottom:14px;
}
.sec-eyebrow.light{ color:#8FB8E8; }
.sec-title{
  text-align:center; font-size:clamp(24px, 3.6vw, 38px); font-weight:900;
  color:var(--navy); letter-spacing:-.035em;
}
.sec-title.light{ color:#fff; }
.sec-title.left{ text-align:left; }
.sec-lead{ text-align:center; color:var(--gray); font-size:16.5px; margin-top:16px; }

/* =========================================================
   3. 공감 구간
   ========================================================= */
.pain{ background:var(--bg-soft); }
.bubbles{
  display:flex; flex-direction:column; gap:16px; max-width:760px; margin:50px auto 0;
}
.bubbles li{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:20px 26px; font-size:17px; color:var(--ink);
  box-shadow:var(--shadow); max-width:82%;
}
.bubbles li b{ color:var(--sky); font-weight:700; }
.bubbles li:nth-child(even){ align-self:flex-end; background:var(--navy); color:#fff; border-color:var(--navy); }
.bubbles li:nth-child(even) b{ color:var(--kakao); }

.pain-close{
  text-align:center; margin-top:46px; font-size:19px; color:var(--gray); line-height:1.8;
}
.pain-close strong{ color:var(--navy); font-weight:900; }

/* =========================================================
   4. 정직 선언 (남색 배경)
   ========================================================= */
.honest{
  background:linear-gradient(160deg, var(--navy-deep), var(--navy) 60%, var(--navy-2));
  color:#fff;
}
.honest-body{
  text-align:center; margin-top:28px; font-size:17px; color:#C8D8EE; line-height:1.95;
}
.honest-body b{ color:#fff; font-weight:700; }

.honest-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px;
}
.hcard{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:28px 22px; text-align:center;
}
.hcard .mk{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; margin-bottom:14px;
}
.hcard .x{ background:rgba(255,120,120,.16); color:#FF9D9D; }
.hcard .o{ background:rgba(254,229,0,.18); color:var(--kakao); }
.hcard b{ display:block; font-size:17px; font-weight:700; margin-bottom:8px; }
.hcard p{ font-size:14.5px; color:#AFC4DF; line-height:1.7; }
.hcard.ok{ background:rgba(254,229,0,.08); border-color:rgba(254,229,0,.35); }

/* =========================================================
   5. 대표 소개
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:400px 1fr; gap:60px; align-items:center; }
.about-photo{ position:relative; }
.about-photo img{
  width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.about-photo::before{
  content:''; position:absolute; left:-18px; top:-18px; width:110px; height:110px;
  border-left:4px solid var(--sky); border-top:4px solid var(--sky);
  border-radius:var(--radius) 0 0 0;
}
.ceo-name{ font-size:1.25em; letter-spacing:.06em; }
.career{ margin:26px 0 30px; border-left:3px solid var(--sky-soft); padding-left:20px; }
.career li{
  font-size:15.5px; color:var(--gray); padding:5px 0; position:relative;
}
.career li::before{
  content:''; position:absolute; left:-25.5px; top:15px;
  width:8px; height:8px; border-radius:50%; background:var(--sky);
}
.about-msg{
  background:var(--bg-soft); border-radius:var(--radius); padding:26px 28px;
  font-size:16px; color:var(--gray); line-height:1.9;
}
.about-msg b{ color:var(--navy); font-weight:700; }
.sign{ text-align:right; margin-top:16px; color:var(--gray); font-size:15px; }
.sign b{ color:var(--navy); font-size:17px; }

/* =========================================================
   6. 서비스 카드
   ========================================================= */
.services{ background:var(--bg-soft); }
/* 서비스 카드 3개 - 넓은 화면에서는 한 줄에 3개 */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--sky); }
.card .num{
  display:inline-block; font-size:13px; font-weight:900; letter-spacing:.1em;
  color:#fff; background:var(--navy); padding:4px 11px; border-radius:6px; margin-bottom:16px;
}
.card h3{ font-size:21px; font-weight:800; color:var(--navy); margin-bottom:12px; }
.card p{ font-size:15.5px; color:var(--gray); line-height:1.85; }
.card .for{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);
  font-size:14.5px; color:var(--sky); font-weight:500;
}

/* =========================================================
   7. 차별점
   ========================================================= */
.whys{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 44px; margin-top:52px; }
.why-item{ display:flex; gap:20px; align-items:flex-start; }
.why-no{
  flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  background:var(--sky-soft); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:17px; letter-spacing:-.02em;
}
.why-body h3{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.why-body p{ font-size:15.5px; color:var(--gray); line-height:1.85; }
.why-body b{ color:var(--navy); font-weight:700; }

/* =========================================================
   8. 상담 절차
   ========================================================= */
.process{ background:var(--bg-soft); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px; counter-reset:s; }
.steps li{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:32px 24px; text-align:center;
}
.steps li:not(:last-child)::after{
  content:'›'; position:absolute; right:-14px; top:50%; transform:translateY(-50%);
  font-size:30px; color:var(--gray-light); z-index:2; line-height:1;
}
.step-no{
  display:inline-block; font-size:12.5px; font-weight:900; letter-spacing:.1em;
  color:var(--sky); background:var(--sky-soft); padding:5px 13px; border-radius:999px; margin-bottom:14px;
}
.steps h3{ font-size:18px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.steps p{ font-size:14.5px; color:var(--gray); line-height:1.8; }
.steps b{ color:var(--navy); font-weight:700; }

/* =========================================================
   9. 자주 묻는 질문
   ========================================================= */
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  margin-top:12px; overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.faq details:first-of-type{ margin-top:46px; }
.faq details[open]{ border-color:var(--sky); box-shadow:var(--shadow); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 58px 22px 26px; position:relative;
  font-size:17px; font-weight:700; color:var(--navy);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:'Q'; color:var(--sky); font-weight:900; margin-right:10px;
}
.faq summary::after{
  content:''; position:absolute; right:26px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--gray-light); border-bottom:2px solid var(--gray-light);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-a{
  padding:0 26px 24px 52px; font-size:15.5px; color:var(--gray); line-height:1.9;
  border-top:1px solid var(--bg-soft);
  padding-top:18px;
}
.faq-a b{ color:var(--navy); font-weight:700; }

/* =========================================================
   10. 마지막 상담 유도
   ========================================================= */
.cta{
  background:
    radial-gradient(800px 400px at 50% 120%, rgba(43,108,176,.35), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; text-align:center; padding:104px 0;
}
.cta-title{ font-size:clamp(25px, 4vw, 40px); font-weight:900; letter-spacing:-.035em; }
.cta-sub{ margin:22px 0 40px; font-size:17px; color:#C8D8EE; line-height:1.9; }
.cta-sub b{ color:var(--kakao); font-weight:700; }
.cta-note{ margin-top:30px; font-size:14px; color:#96AECD; }
.cta-note b{ color:#fff; font-weight:700; letter-spacing:.02em; }

/* =========================================================
   11. 맨 아래 회사 정보
   ========================================================= */
.footer{ background:#0A1734; color:#8FA2BF; padding:56px 0 100px; font-size:14px; }
.footer-inner{ display:flex; gap:40px; align-items:flex-start; }
.footer-logo{
  width:112px; flex:0 0 auto; border-radius:10px; background:#fff; padding:8px;
}
.footer-info p{ margin:4px 0; line-height:1.8; }
.footer-info .fname{ font-size:16px; color:#fff; margin-bottom:10px; }
.footer-info .fname span{ font-size:12px; color:#7D90AD; font-weight:400; margin-left:6px; }
.footer-info a:hover{ color:#fff; text-decoration:underline; }
.copy{ margin-top:16px !important; font-size:12.5px; color:#61738F; }
.disclaim{ margin-top:10px !important; font-size:12.5px; color:#61738F; }

/* =========================================================
   12. 항상 떠 있는 상담 버튼 (컴퓨터 화면)
   ========================================================= */
.floating{
  position:fixed; right:20px; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); z-index:90;
  display:flex; flex-direction:column; gap:9px;
}
.f-btn{
  width:64px; height:64px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:700; color:var(--navy);
  transition:transform .18s ease;
}
.f-btn svg{ width:22px; height:22px; fill:currentColor; }
.f-btn:hover{ transform:translateY(-3px); }
.f-kakao{ background:var(--kakao); border-color:var(--kakao); color:var(--kakao-ink); }
.f-top{ opacity:0; pointer-events:none; transition:opacity .3s, transform .18s; }
.f-top.show{ opacity:1; pointer-events:auto; }

.f-ai{ background:var(--navy); border-color:var(--navy); color:#fff; font-family:inherit; cursor:pointer; padding:0; }

/* 휴대폰 아래쪽 고정 바 (컴퓨터에서는 숨김) */
.mobilebar{ display:none; }

/* =========================================================
   13. 문의 남기기 폼
   ========================================================= */
.inquiry{ background:var(--bg-soft); }
.inq-form{
  margin-top:40px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px;
}
.inq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin-bottom:18px; }
.inq-field{ display:flex; flex-direction:column; gap:7px; font-size:15px; font-weight:700; color:var(--navy); }
.inq-field em{ color:#D14343; font-style:normal; }
.inq-field input, .inq-field select, .inq-field textarea{
  font:inherit; font-weight:400; font-size:16px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; background:#fff; width:100%;
}
.inq-field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.inq-field input:focus, .inq-field select:focus, .inq-field textarea:focus{
  outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft);
}
.inq-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.inq-agree{ margin:22px 0 26px; padding:16px 18px; background:var(--bg-soft); border-radius:10px; }
.inq-agree label{ display:flex; gap:9px; align-items:center; cursor:pointer; color:var(--navy); font-size:15px; }
.inq-agree input{ width:19px; height:19px; accent-color:var(--navy); flex:0 0 auto; }
.inq-agree p{ margin-top:8px; font-size:13px; color:var(--gray); line-height:1.7; }
.inq-submit{ width:100%; border:0; font-family:inherit; }
.inq-submit:disabled{ opacity:.6; cursor:wait; transform:none; }
.inq-msg{ margin-top:16px; text-align:center; font-size:15px; font-weight:700; min-height:1.5em; }
.inq-msg.ok{ color:#1F7A4D; }
.inq-msg.err{ color:#C13737; }

/* =========================================================
   14. AI 상담 대화창
   ========================================================= */
.chat{
  position:fixed; right:100px; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); z-index:100;
  width:370px; height:540px; max-height:calc(100vh - 110px);
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg);
}
.chat[hidden]{ display:none; }
.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px; background:var(--navy); color:#fff;
}
.chat-head b{ display:block; font-size:16px; }
.chat-head small{ display:block; font-size:12px; color:#AFC2DE; margin-top:2px; }
.chat-close{ background:none; border:0; color:#fff; font-size:18px; cursor:pointer; padding:4px 8px; }
.chat-body{ flex:1; overflow-y:auto; padding:16px; background:var(--bg-soft); display:flex; flex-direction:column; gap:10px; }
.chat-bubble{
  max-width:85%; padding:11px 14px; border-radius:14px; font-size:14.5px; line-height:1.65; white-space:pre-wrap;
}
.chat-bubble.bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-top-left-radius:4px; }
.chat-bubble.me{ align-self:flex-end; background:var(--navy); color:#fff; border-top-right-radius:4px; }
.chat-bubble.wait{ color:var(--gray-light); }
.chat-bubble a{ color:var(--sky); text-decoration:underline; word-break:break-all; }
.chat-bubble.me a{ color:#fff; }
.chat-go-form{
  align-self:flex-start; border:0; border-radius:999px; padding:11px 18px; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700; background:var(--kakao); color:var(--kakao-ink);
  box-shadow:0 6px 16px rgba(254,229,0,.4);
}
.chat-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.chat-input input{
  flex:1; min-width:0; font:inherit; font-size:16px; border:1.5px solid var(--line); border-radius:999px; padding:10px 16px;
}
.chat-input input:focus{ outline:none; border-color:var(--sky); }
.chat-input button{
  border:0; border-radius:999px; padding:0 18px; font:inherit; font-weight:700; font-size:14px;
  background:var(--kakao); color:var(--kakao-ink); cursor:pointer;
}

/* =========================================================
   태블릿
   ========================================================= */
@media (max-width:980px){
  .honest-cards{ grid-template-columns:repeat(2,1fr); }
  /* 화면이 좁아지면 2개씩, 마지막 하나는 가로 전체를 쓰게 */
  .cards{ grid-template-columns:repeat(2,1fr); }
  .cards .card:last-child{ grid-column:span 2; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps li:nth-child(2)::after{ display:none; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .about-photo{ max-width:330px; margin:0 auto; }
  .sec-title.left{ text-align:center; }
  .sign{ text-align:center; }
  .career{ max-width:460px; margin-left:auto; margin-right:auto; }
}

/* =========================================================
   휴대폰
   ========================================================= */
@media (max-width:760px){
  html{ scroll-padding-top:64px; }
  body{ padding-bottom:68px; }     /* 아래 고정 바에 가리지 않게 */

  .br-m{ display:inline; }
  .sec{ padding:64px 0; }

  /* 상단 바 */
  .topbar-inner{ height:64px; gap:12px; }
  .brand img{ height:30px; }
  .brand-text{ font-size:17px; }
  .topbar-cta{ display:none; }
  .hamburger{ display:block; margin-left:auto; }
  .gnb{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(11,31,71,.12);
    max-height:0; overflow:hidden; transition:max-height .32s ease;
  }
  .gnb.open{ max-height:420px; }
  .gnb a{ padding:16px 22px; border-bottom:1px solid var(--bg-soft); font-size:16px; }
  .gnb a::after{ display:none; }

  /* 첫 화면 */
  .hero{ padding:112px 0 74px; }
  .hero-btns .btn{ width:100%; max-width:330px; }
  .hero-badges{ gap:8px; margin-top:34px; }
  .hero-badges li{ font-size:12.5px; padding:8px 13px; }
  .scroll-hint{ display:none; }

  /* 공감 */
  .bubbles li{ max-width:94%; font-size:15.5px; padding:16px 20px; }
  .pain-close{ font-size:17px; }

  /* 정직 선언 */
  .honest-cards{ grid-template-columns:1fr; gap:12px; }
  .hcard{ display:grid; grid-template-columns:44px 1fr; gap:4px 16px; text-align:left; padding:20px; }
  .hcard .mk{ grid-row:span 2; margin:0; align-self:center; }
  .hcard b{ margin-bottom:2px; }

  /* 서비스 */
  .cards{ grid-template-columns:1fr; gap:14px; }
  .cards .card:last-child{ grid-column:auto; }
  .card{ padding:26px 22px; }

  /* 차별점 */
  .whys{ grid-template-columns:1fr; gap:22px; }
  .why-no{ width:46px; height:46px; font-size:15px; }

  /* 절차 */
  .steps{ grid-template-columns:1fr; gap:12px; }
  .steps li::after{ display:none !important; }

  /* FAQ */
  .faq summary{ font-size:15.5px; padding:18px 48px 18px 20px; }
  .faq-a{ padding:16px 20px 20px 20px; font-size:14.5px; }

  /* 맨 아래 */
  .footer{ padding:44px 0 90px; }
  .footer-inner{ flex-direction:column; gap:22px; align-items:center; text-align:center; }

  /* 떠 있는 버튼: 세로 버튼은 감추고 아래 고정 바만 */
  .floating{ right:14px; bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
  .f-btn:not(.f-top):not(.f-ai){ display:none; }

  /* 문의 폼 */
  .inq-form{ padding:24px 18px; margin-top:30px; }
  .inq-grid{ grid-template-columns:1fr; gap:14px; }

  /* AI 상담: 휴대폰에서는 화면 전체 */
  .chat{ inset:0; width:auto; height:auto; max-height:none; border-radius:0; z-index:200; }
  body.chat-on{ overflow:hidden; }
  .f-btn{ width:48px; height:48px; border-radius:12px; font-size:9px; }
  .f-btn svg{ width:18px; height:18px; }

  .mobilebar{
    display:grid; grid-template-columns:1fr 1.6fr;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -6px 20px rgba(11,31,71,.14);
  }
  .mobilebar a{
    padding:19px 10px; text-align:center; font-size:16px; font-weight:700;
  }
  .mb-tel{ background:var(--navy); color:#fff; }
  .mb-kakao{ background:var(--kakao); color:var(--kakao-ink); }
}

/* 움직임을 줄이도록 설정한 분을 위해 */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}