* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.sample-page {
  --sample-accent:#5293ff;
  --sample-accent-deep:#3479f3;
  --sample-accent-soft:rgba(82,147,255,.24);
  --sample-radius:18px;
  --sample-max:1320px;
  margin:0;
  background:#f7f8fb;
  color:#141414;
  font-family:"Apple SD Gothic Neo","Apple SD 산돌고딕 Neo","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all;
}
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
.sample-inner { width:min(var(--sample-max), calc(100% - 48px)); margin:0 auto; }
.sample-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:0 max(24px, calc((100% - var(--sample-max)) / 2));
  background:transparent;
  border-bottom:1px solid transparent;
  color:#fff;
  transition:background-color .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
.sample-header.is-scrolled {
  background:rgba(9,14,24,.92);
  border-bottom-color:rgba(255,255,255,.08);
}
.sample-logo { display:flex; align-items:center; gap:10px; min-width:210px; line-height:1; }
.sample-logo img { width:100%; height:auto; display:block; }
.sample-logo svg { display:block; width:34px; height:34px; flex:0 0 34px; color:#fff; transform:translateY(-3px); }
.sample-logo span {
  display:block;
  color:#fff;
  font-size:26px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
  letter-spacing:-.03em;
}
.sample-header nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:34px; font-size:16px; font-weight:700; }
.sample-header nav a { color:rgba(255,255,255,.78); transition:color .25s ease, background-color .25s ease; }
.sample-header nav a:hover { color:#fff; }
.sample-nav-cta { padding:12px 18px; background:var(--sample-accent); color:#fff !important; border-radius:var(--sample-radius); }
.sample-nav-cta:hover { background:var(--sample-accent-deep); }
.sample-call { display:flex; flex-direction:column; align-items:flex-end; font-size:20px; font-weight:800; color:#fff; }
.sample-call small { font-size:12px; color:rgba(255,255,255,.55); font-weight:700; }
.sample-hero {
  min-height:800px;
  padding:185px 0 125px;
  background:
    linear-gradient(120deg, rgba(6,13,24,.96) 0%, rgba(7,25,35,.84) 48%, var(--sample-accent-soft) 100%),
    url('/img/4_quote/홈크리닝닥터_청소배너_얼굴크롭.png') center right/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.sample-hero-grid { display:grid; grid-template-columns:minmax(0, 820px); align-items:center; gap:80px; }
.sample-kicker,
.sample-title p {
  margin:0 0 14px;
  color:var(--sample-accent);
  font-size:15px;
  font-weight:900;
  letter-spacing:.08em;
}
.sample-hero h1 {
  margin:0;
  font-size:clamp(46px, 5vw, 78px);
  line-height:1.12;
  letter-spacing:-.02em;
}
.sample-hero h1 span { color:var(--sample-accent); }
.sample-lead {
  width:min(720px, 100%);
  margin:28px 0 0;
  color:rgba(255,255,255,.72);
  font-size:22px;
  line-height:1.7;
}
.sample-hero-actions { display:flex; gap:14px; margin-top:46px; }
.sample-hero-actions a {
  min-width:190px;
  padding:20px 28px;
  text-align:center;
  font-weight:900;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius:var(--sample-radius);
  transition:background-color .25s ease, border-color .25s ease;
}
.sample-hero-actions a:hover { background:rgba(255,255,255,.1); }
.sample-hero-actions a:first-child { background:var(--sample-accent); border-color:var(--sample-accent); color:#fff; }
.sample-hero-actions a:first-child:hover { background:var(--sample-accent-deep); border-color:var(--sample-accent-deep); }
.sample-status { margin-top:-52px; position:relative; z-index:3; }
.sample-status .sample-inner {
  display:grid;
  grid-template-columns:330px 1fr;
  align-items:center;
  min-height:116px;
  background:#fff;
  box-shadow:0 18px 70px rgba(0,0,0,.12);
  border-radius:var(--sample-radius);
  overflow:hidden;
}
.sample-status-head { padding:28px 38px; border-right:1px solid #edf0f3; }
.sample-status-head small { display:block; color:#777; font-weight:800; }
.sample-status-head strong { display:block; margin-top:6px; color:var(--sample-accent); font-size:38px; }
.sample-ticker { overflow:hidden; padding:0 36px; color:#555; font-size:17px; font-weight:700; }
.sample-ticker div { display:flex; gap:44px; width:max-content; animation:ticker 42s linear infinite; }
.sample-ticker span { white-space:nowrap; }
@keyframes ticker { to { transform:translateX(-50%); } }
.sample-section { padding:128px 0; }
.sample-dark { background:#101722; color:#fff; }
.sample-title { text-align:center; margin-bottom:54px; }
.sample-title h2 { margin:0; font-size:clamp(34px, 3.8vw, 54px); line-height:1.22; letter-spacing:-.02em; }
.sample-check-grid { display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:stretch; width:100%; }
.sample-checklist { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sample-checklist li {
  display:flex;
  align-items:center;
  gap:20px;
  min-height:94px;
  padding:26px 32px;
  background:#fff;
  border:1px solid #e8ebef;
  font-size:22px;
  font-weight:800;
  border-radius:var(--sample-radius);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.sample-checklist li:hover { transform:translateY(-3px); border-color:rgba(82,147,255,.42); box-shadow:0 16px 44px rgba(20,28,38,.1); }
.sample-checklist span { color:var(--sample-accent); font-weight:900; }
.sample-side-card {
  padding:40px;
  background:#0f1722;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:var(--sample-radius);
}
.sample-side-card small { color:var(--sample-accent); font-weight:900; }
.sample-side-card h3 { margin:18px 0 0; font-size:34px; }
.sample-side-card p { color:rgba(255,255,255,.68); font-size:18px; line-height:1.7; }
.sample-side-card a { display:inline-block; margin-top:28px; padding:17px 20px; background:var(--sample-accent); color:#fff; font-weight:900; text-align:center; border-radius:var(--sample-radius); transition:background-color .25s ease; }
.sample-side-card a:hover { background:var(--sample-accent-deep); }
.sample-point-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; width:100%; }
.sample-point-grid article {
  min-height:310px;
  padding:32px 28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--sample-radius);
  transition:transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.sample-point-grid article:hover { transform:translateY(-4px); border-color:rgba(82,147,255,.45); background:rgba(255,255,255,.09); box-shadow:0 18px 54px rgba(0,0,0,.18); }
.sample-point-grid small { color:var(--sample-accent); font-weight:900; }
.sample-point-grid h3 { margin:22px 0 16px; font-size:25px; }
.sample-point-grid p { margin:0; color:rgba(255,255,255,.66); font-size:17px; line-height:1.7; }
.sample-range-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; width:100%; }
.sample-range-grid article {
  padding:38px 30px;
  background:#fff;
  border:1px solid #e7ebef;
  box-shadow:0 16px 50px rgba(20,28,38,.06);
  border-radius:var(--sample-radius);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sample-range-grid article:hover { transform:translateY(-4px); border-color:rgba(82,147,255,.44); box-shadow:0 22px 60px rgba(20,28,38,.12); }
.sample-range-grid small { color:#777; font-weight:800; }
.sample-range-grid h3 { margin:8px 0 22px; color:var(--sample-accent); font-size:36px; }
.sample-range-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; color:#555; font-size:17px; font-weight:700; }
.sample-range-grid li::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; background:var(--sample-accent); vertical-align:middle; }
.sample-review { background:#eef4fb; }
.sample-review-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; }
.sample-review .sample-title { text-align:left; margin:0; }
.sample-bars { display:grid; gap:20px; }
.sample-bars div { position:relative; height:66px; background:#fff; overflow:hidden; border-radius:var(--sample-radius); }
.sample-bars span { position:absolute; inset:0 auto 0 0; width:0; background:var(--sample-accent); transition:width 1.15s cubic-bezier(.19,1,.22,1); }
.sample-bars.is-filled span { width:var(--w); }
.sample-bars b, .sample-bars em { position:relative; z-index:1; line-height:66px; font-size:18px; font-style:normal; font-weight:900; }
.sample-bars b { padding-left:26px; color:#fff; }
.sample-bars em { float:right; padding-right:24px; color:#0f1722; }
.sample-faq { width:100%; background:transparent; border:0; border-radius:0; overflow:visible; }
.sample-faq button {
  width:100%;
  padding:28px 0;
  border:0;
  background:transparent;
  text-align:left;
  color:#111;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  transition:background-color .25s ease;
}
.sample-faq button:hover { background:transparent; }
.sample-faq button::after { content:"+"; float:right; color:var(--sample-accent); }
.sample-faq button.open::after { content:"-"; }
.sample-faq p {
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  color:#666;
  font-size:18px;
  line-height:1.8;
  transition:max-height .55s cubic-bezier(.19,1,.22,1), opacity .35s ease, padding .35s ease;
}
.sample-faq button.open + p { max-height:220px; opacity:1; padding:0 0 30px; }
.sample-inquiry { background:#3479f3; color:#fff; padding-bottom:150px; }
.sample-inquiry .sample-title p { color:#fff; }
.sample-form {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  padding:48px;
  background:#fff;
  color:#111;
  border-radius:var(--sample-radius);
  box-shadow:0 18px 54px rgba(0,0,0,.18);
  width:100%;
}
.sample-form label { display:grid; gap:10px; font-size:17px; font-weight:800; }
.sample-form .full { grid-column:1 / -1; }
.sample-form input,
.sample-form select,
.sample-form textarea {
  width:100%;
  border:1px solid #dfe4e9;
  background:#f8fafb;
  padding:18px 18px;
  color:#111;
  font-size:17px;
  border-radius:var(--sample-radius);
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sample-form input::placeholder,
.sample-form textarea::placeholder,
.sample-quick input::placeholder { font-weight:400; color:#9aa2ad; }
.sample-form input:not([type="checkbox"]):hover,
.sample-form select:hover,
.sample-form textarea:hover,
.sample-quick input:not([type="checkbox"]):hover { border-color:rgba(82,147,255,.5); background:#fff; box-shadow:0 10px 24px rgba(20,28,38,.06); transform:translateY(-1px); }
.sample-form input:not([type="checkbox"]):focus,
.sample-form select:focus,
.sample-form textarea:focus,
.sample-quick input:not([type="checkbox"]):focus { outline:0; border-color:var(--sample-accent); box-shadow:0 0 0 3px rgba(82,147,255,.16); }
.sample-form textarea { resize:vertical; }
.sample-agree { display:flex !important; grid-template-columns:none !important; align-items:center; gap:10px; color:#555; font-weight:700 !important; }
.sample-agree input {
  width:18px;
  height:18px;
  flex:0 0 18px;
  padding:0;
  margin:0;
  border-radius:4px;
  transform:none;
  box-shadow:none;
  transition:none;
}
.sample-agree input:hover,
.sample-agree input:focus {
  transform:none;
  box-shadow:none;
}
.sample-form button {
  grid-column:1 / -1;
  border:0;
  background:var(--sample-accent);
  color:#fff;
  padding:22px;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  border-radius:var(--sample-radius);
  transition:background-color .25s ease;
}
.sample-form button:hover { background:var(--sample-accent-deep); }
.sample-quick {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:grid;
  grid-template-columns:170px minmax(150px, 240px) minmax(150px, 240px) minmax(270px, 1fr) 150px;
  gap:12px;
  padding:16px max(24px, calc((100vw - var(--sample-max)) / 2));
  background:#0b1018;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
}
.sample-quick strong { align-self:center; color:var(--sample-accent); font-size:17px; }
.sample-quick-agree {
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
  font-size:17px;
  font-weight:800;
  min-width:0;
}
.sample-quick-agree { gap:8px; white-space:normal; }
.sample-quick-agree input {
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin:0;
}
.sample-quick input { min-width:0; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; padding:16px; font-size:16px; border-radius:var(--sample-radius); transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.sample-quick-submit { display:flex; align-items:center; justify-content:center; background:var(--sample-accent); color:#fff; font-weight:900; border-radius:var(--sample-radius); transition:background-color .25s ease; }
.sample-quick-submit:hover { background:var(--sample-accent-deep); }
.sample-footer { padding:54px 0 110px; background:#080c12; color:rgba(255,255,255,.58); }
.sample-footer strong { display:block; margin-bottom:18px; color:#fff; font-size:24px; font-weight:950; }
.sample-footer p { margin:0; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
.reveal.on { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }
.delay-4 { transition-delay:.32s; }
.delay-5 { transition-delay:.40s; }

.sample-checklist li,
.sample-point-grid article,
.sample-range-grid article,
.sample-form input,
.sample-form select,
.sample-form textarea,
.sample-quick input {
  backface-visibility:hidden;
}
.sample-checklist li:hover,
.sample-point-grid article:hover,
.sample-range-grid article:hover,
.sample-form input:not([type="checkbox"]):hover,
.sample-form select:hover,
.sample-form textarea:hover,
.sample-quick input:not([type="checkbox"]):hover {
  transform:translateZ(0);
  box-shadow:none;
}
.sample-checklist li:hover,
.sample-point-grid article:hover,
.sample-range-grid article:hover {
  border-color:rgba(82,147,255,.42);
}

@media (max-width:960px) {
  .sample-inner { width:min(100% - 40px, var(--sample-max)); }
  .sample-header { height:auto; min-height:70px; padding:14px 20px; flex-wrap:wrap; gap:14px 20px; }
  .sample-header nav { position:static; transform:none; order:3; width:100%; justify-content:center; gap:20px; font-size:15px; }
  .sample-call { font-size:18px; }
  .sample-call small { font-size:12px; }
  .sample-hero { min-height:auto; padding:148px 0 86px; }
  .sample-hero-grid,
  .sample-check-grid,
  .sample-review-grid { grid-template-columns:1fr; }
  .sample-status .sample-inner { grid-template-columns:1fr; }
  .sample-status-head { padding:24px 28px; border-right:0; border-bottom:1px solid #edf0f3; }
  .sample-ticker { padding:22px 28px; }
  .sample-section { padding:96px 0; }
  .sample-title { margin-bottom:38px; }
  .sample-check-grid { gap:24px; }
  .sample-side-card { padding:30px; }
  .sample-point-grid,
  .sample-range-grid { grid-template-columns:repeat(2, 1fr); }
  .sample-form { grid-template-columns:1fr; }
  .sample-quick { grid-template-columns:1fr 1fr; }
  .sample-quick strong { order:1; grid-column:1 / -1; text-align:center; }
  .sample-quick-agree { order:2; grid-column:1 / -1; justify-content:center; }
  .sample-quick input { order:3; }
  .sample-quick-submit { order:4; grid-column:1 / -1; }
  .sample-footer { padding-bottom:260px; }
}

@media (max-width:560px) {
  body.sample-page { overflow-x:hidden; }
  .sample-inner { width:min(100% - 32px, var(--sample-max)); }
  .sample-header { padding:12px 16px; gap:12px; }
  .sample-logo { min-width:auto; }
  .sample-logo svg { width:28px; height:28px; flex-basis:28px; }
  .sample-logo span { font-size:20px; }
  .sample-call { font-size:16px; }
  .sample-call small { font-size:12px; }
  .sample-header nav { justify-content:center; gap:10px; font-size:14px; }
  .sample-nav-cta { padding:11px 13px; }
  .sample-hero { padding:154px 0 74px; }
  .sample-hero h1 { font-size:clamp(32px, 9.2vw, 40px); }
  .sample-lead { margin-top:22px; font-size:16px; line-height:1.65; }
  .sample-hero-actions { flex-direction:column; }
  .sample-hero-actions a { width:100%; min-width:0; padding:17px 18px; }
  .sample-status { margin-top:-36px; }
  .sample-status-head { padding:22px 22px; }
  .sample-status-head strong { font-size:32px; }
  .sample-ticker { padding:18px 22px; font-size:15px; }
  .sample-section { padding:76px 0; }
  .sample-title { margin-bottom:30px; }
  .sample-title p { margin-bottom:10px; font-size:12px; }
  .sample-title h2 { font-size:clamp(26px, 7.2vw, 34px); }
  .sample-checklist { gap:12px; }
  .sample-checklist li { min-height:auto; gap:14px; font-size:16px; padding:18px; }
  .sample-side-card { padding:24px; }
  .sample-side-card h3 { font-size:26px; }
  .sample-side-card p { font-size:16px; }
  .sample-point-grid,
  .sample-range-grid { grid-template-columns:1fr; }
  .sample-point-grid,
  .sample-range-grid,
  .sample-bars { gap:14px; }
  .sample-point-grid article { min-height:auto; padding:24px; }
  .sample-range-grid article { padding:26px 22px; }
  .sample-range-grid h3 { font-size:30px; }
  .sample-review .sample-title { text-align:center; }
  .sample-bars div { height:58px; }
  .sample-bars b,
  .sample-bars em { line-height:58px; font-size:15px; }
  .sample-bars b { padding-left:16px; }
  .sample-bars em { padding-right:16px; }
  .sample-faq button { padding:22px 0; font-size:18px; }
  .sample-faq p { font-size:16px; line-height:1.7; }
  .sample-faq button.open + p { max-height:260px; padding:0 0 24px; }
  .sample-inquiry { padding-bottom:86px; }
  .sample-form { gap:14px; padding:22px; }
  .sample-form label { font-size:15px; }
  .sample-form input,
  .sample-form select,
  .sample-form textarea { padding:15px; font-size:15px; }
  .sample-form button { padding:18px; font-size:17px; }
  .sample-quick {
    grid-template-columns:1fr 1fr;
    column-gap:10px;
    row-gap:12px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .sample-quick strong {
    grid-column:1 / -1;
    align-self:center;
    justify-content:center;
    font-size:13px;
    text-align:center;
  }
  .sample-quick strong { color:var(--sample-accent); }
  .sample-quick-agree { font-size:13px; line-height:1.35; }
  .sample-quick-agree {
    grid-column:1 / -1;
    justify-content:center;
  }
  .sample-quick input { min-height:46px; padding:14px 16px; font-size:14px; }
  .sample-quick-submit { min-height:48px; }
  .sample-footer { padding:42px 0 278px; }
  .sample-footer strong { font-size:21px; }
  .sample-footer p { font-size:13px; line-height:1.5; }
}

@media (max-width:380px) {
  .sample-inner { width:min(100% - 28px, var(--sample-max)); }
  .sample-header { padding:10px 14px; }
  .sample-logo span { font-size:18px; }
  .sample-call { width:100%; align-items:flex-start; font-size:15px; }
  .sample-header nav { gap:7px; font-size:12px; }
  .sample-nav-cta { padding:10px 11px; }
  .sample-hero { padding-top:184px; }
  .sample-hero h1 { font-size:30px; }
  .sample-section { padding:66px 0; }
  .sample-quick { grid-template-columns:1fr 1fr; padding-inline:12px; row-gap:10px; }
  .sample-quick strong { font-size:12px; }
  .sample-quick-agree { justify-content:center; }
  .sample-footer { padding-bottom:292px; }
}