@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   L1 에코스퀘어 — 조판. 본체 시험판(`front-tpl-l1.php`)에서 «그대로» 옮겼다.

   ☠ **전부 `.ld-l1` 한 겹으로 감쌌다.** 원본 클래스에 `.b` `.c` `.l` `.in` `.grid` 처럼
      «일반적인 이름» 이 많아서, 감싸지 않으면 빌더·테마 규칙과 부딪힌다.
      이름을 83개 바꾸는 것보다 한 겹 감싸는 편이 훨씬 덜 깨진다.
   ⚠ `.ld-l1` 은 `body_class` 로 붙인다 — 구획이 형제라 감쌀 상자가 따로 없다.
   ☠ **격자는 여기 있고 빌더에 없다.** 잠금을 안 쓰므로 고객이 CSS 를 만져도 개수 감당은 살아야 한다.
   ⚠ 주석은 원본에 남아 있다 — 여기서는 «감싸기» 만 기계로 했다.
   ☠ **본체의 a11y 보정 시트에 기대지 않는다.** 본체에는 `.lb`·`.cat`·`.tag` 등을 12px 로 올리는
      네트워크 규칙이 있어서 «원본이 통과하는 것처럼» 보였다. 템플릿 자체 값은 11.5px 로 틀려 있었다.
      **고객 사이트에는 그 보정이 없다.** 템플릿은 혼자 서야 한다(2026-09-02 실측).
   ☠ **사진 주소를 CSS 에 박지 않는다.** 원본은 본체(`eco-s2dio.com`) URL 을 직접 가리키고 있었다 —
      «남의 사이트에 매달린» 상태라 납품하면 끊긴다. `var(--ld-hero)`·`var(--ld-band)` 로 빼고,
      실제 주소는 그 사이트의 옵션에서 넣는다(`inc/data.php`).
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;700;800;900&display=swap');
:root{
  --navy:#0B1B3A; --navy-2:#132A56; --navy-3:#1D3A70;
  --gold:#C9A24B; --gold-2:#E3C67F;
  
  --gold-deep:#836528;
  --paper:#F7F5F0; --card:#FFFFFF; --ink:#17181C; --ink-2:#3C4048; --ink-3:#5D6572;
  --rule:#E4E0D6;
}
/* ☠ 원본은 `*{margin:0;padding:0;box-sizing:border-box}` 였다.
   감쌀 때 `*` 를 `.ld-l1` 하나로 바꿔 버려서 «자손에 리셋이 안 걸렸다».
   기계로 감쌀 때 «전체 선택자» 는 따로 봐야 한다. */
.ld-l1,.ld-l1 *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.ld-l1{font-family:'Pretendard','Gothic A1',-apple-system,sans-serif;color:var(--ink);
  background:var(--paper);line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased}
.ld-l1 img{max-width:100%;display:block}
.ld-l1 .wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.ld-l1 .gothic{font-family:'Gothic A1',sans-serif}
.ld-l1 .top{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)}
.ld-l1 .top .wrap{display:flex;align-items:center;gap:14px;height:56px}
.ld-l1 .top .bi{font-weight:800;font-size:17px;letter-spacing:-.02em}
.ld-l1 .top .bi em{font-style:normal;color:var(--gold-2)}
.ld-l1 .top .tel{margin-left:auto;display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff}
.ld-l1 .top .tel .lb{font-size:12px;color:#9FB0CD;letter-spacing:.06em}
.ld-l1 .top .tel .no{font-family:'Gothic A1';font-weight:900;font-size:21px;color:var(--gold-2);letter-spacing:.01em}
.ld-l1 .top .visit{background:var(--gold);color:var(--navy);font-weight:800;font-size:13.5px;
  padding:9px 16px;border-radius:8px;text-decoration:none;white-space:nowrap}
.ld-l1 .hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.ld-l1 .hero .bg{position:absolute;inset:0;background:var(--ld-hero) center 42%/cover;
  opacity:.92}
.ld-l1 .hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,58,.42) 0%,rgba(11,27,58,.60) 55%,var(--navy) 100%)}
.ld-l1 .hero .wrap{text-shadow:0 2px 22px rgba(5,12,28,.55)}
.ld-l1 .hero .wrap{position:relative;padding:96px 22px 74px;text-align:center}
.ld-l1 .hero .kick{display:inline-block;border:1px solid rgba(227,198,127,.6);color:var(--gold-2);
  font-size:13px;letter-spacing:.32em;padding:8px 18px 8px 22px;border-radius:999px;margin-bottom:26px}
.ld-l1 .hero h1{font-family:'Gothic A1';font-weight:900;font-size:52px;line-height:1.16;letter-spacing:-.03em}
.ld-l1 .hero h1 .thin{display:block;font-weight:500;font-size:21px;letter-spacing:.14em;color:#C7D2E6;margin-bottom:12px}
.ld-l1 .hero .loc{margin-top:16px;font-size:16.5px;color:#AFBDD8}
.ld-l1 .hero .pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ld-l1 .hero .pill{background:rgba(227,198,127,.14);border:1px solid rgba(227,198,127,.45);
  color:var(--gold-2);font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:999px}
.ld-l1 .hero .ctas{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.ld-l1 .btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:16px;
  padding:16px 30px;border-radius:11px;text-decoration:none;transition:transform .12s}
.ld-l1 .btn:hover{transform:translateY(-1px)}
.ld-l1 .btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy)}
.ld-l1 .btn.line{border:1px solid rgba(255,255,255,.5);color:#fff}
.ld-l1 .stats{background:var(--navy);color:#fff;padding:0 0 54px}
.ld-l1 .stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden}
.ld-l1 .stats .c{background:var(--navy-2);padding:22px 10px;text-align:center}
.ld-l1 .stats .n{font-family:'Gothic A1';font-weight:900;font-size:27px;color:var(--gold-2)}
.ld-l1 .stats .l{font-size:13px;color:#9FB0CD;margin-top:4px}
.ld-l1 section{padding:78px 0}
.ld-l1 .sec-kick{text-align:center;font-size:13px;letter-spacing:.3em;color:var(--gold-deep);font-weight:700}
.ld-l1 .sec-t{text-align:center;font-family:'Gothic A1';font-weight:900;font-size:34px;
  letter-spacing:-.03em;margin:10px 0 14px}
.ld-l1 .sec-d{text-align:center;color:var(--ink-3);font-size:16.5px;max-width:56ch;margin:0 auto}
.ld-l1 .prem .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-top:44px}
.ld-l1 .prem .grid{counter-reset:prem}
.ld-l1 .prem .grid .c{counter-increment:prem}
.ld-l1 .prem .ic::before{content:counter(prem,decimal-leading-zero)}
.ld-l1 .prem .c{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:28px 24px}
.ld-l1 .prem .ic{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--gold-2);
  display:grid;place-items:center;font-family:'Gothic A1';font-weight:900;font-size:15px;margin-bottom:16px}
.ld-l1 .prem h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:7px}
.ld-l1 .prem p{font-size:15px;color:var(--ink-3);line-height:1.6}
.ld-l1 .view{padding:0 0 78px}
.ld-l1 .view .band{position:relative;border-radius:18px;overflow:hidden;min-height:430px;
  background:var(--ld-band) center 55%/cover}
.ld-l1 .view .band .cap{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(11,27,58,.86));color:#fff;
  padding:70px 34px 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.ld-l1 .view .band .cap h3{font-family:'Gothic A1';font-weight:900;font-size:25px;letter-spacing:-.02em}
.ld-l1 .view .band .cap p{font-size:14.5px;color:#C7D2E6}
.ld-l1 .view .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
.ld-l1 .view .duo .ph{border-radius:14px;overflow:hidden;aspect-ratio:16/9;position:relative}
.ld-l1 .view .duo .ph img{width:100%;height:100%;object-fit:cover}
.ld-l1 .view .duo .tag{position:absolute;left:14px;bottom:12px;background:rgba(11,27,58,.82);color:var(--gold-2);
  font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px}
.ld-l1 .types{background:#EFECE4}
.ld-l1 .types .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:44px}
.ld-l1 .types .grid:has(> :only-child){max-width:640px;margin-left:auto;margin-right:auto}
.ld-l1 .types .c{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.ld-l1 .types .plan{aspect-ratio:4/3;background:#F2F0EA;display:grid;place-items:center;padding:18px}
.ld-l1 .types .plan img{width:100%;height:100%;object-fit:contain}
.ld-l1 .types .b{padding:20px 22px 22px}
.ld-l1 .types .ty{display:flex;align-items:baseline;gap:10px}
.ld-l1 .types .ty b{font-family:'Gothic A1';font-weight:900;font-size:24px}
.ld-l1 .types .ty span{font-size:13.5px;color:var(--gold-deep);font-weight:700}
.ld-l1 .types .meta{margin-top:8px;font-size:14px;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap}
.ld-l1 .map .box{margin-top:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.ld-l1 .map .ph{border-radius:14px;min-height:330px;background:#EDEAE2;display:grid;place-items:center;overflow:hidden}
.ld-l1 .map .ph svg{width:100%;height:100%;min-height:330px}
.ld-l1 .map .info{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:28px}
.ld-l1 .map .info h3{font-size:18px;font-weight:800;margin-bottom:14px}
.ld-l1 .map .row{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:15px}
.ld-l1 .map .row b{flex:0 0 84px;color:var(--gold-deep);font-weight:700}
.ld-l1 .map .row span{color:var(--ink-2)}
.ld-l1 .form-sec{background:var(--navy);color:#fff}
.ld-l1 .form-sec .sec-kick{color:var(--gold-2)}
.ld-l1 .form-sec .sec-d{color:#AFBDD8}
.ld-l1 .fbox{max-width:620px;margin:40px auto 0;background:var(--navy-2);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:34px}
.ld-l1 .fbox .frow{margin-bottom:16px}
.ld-l1 .fbox label{display:block;font-size:13.5px;color:#C7D2E6;margin-bottom:7px;font-weight:600}
.ld-l1 .fbox input[type=text],.ld-l1 .fbox input[type=tel],.ld-l1 .fbox select{width:100%;height:52px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
  font-size:16px;padding:0 16px;font-family:inherit}
.ld-l1 .fbox input::placeholder{color:#7A8AA8}
.ld-l1 .fbox .agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#AFBDD8;margin:20px 0 22px}
.ld-l1 .fbox .agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold)}
.ld-l1 .fbox .submit{width:100%;height:60px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);
  font-family:'Gothic A1';font-weight:900;font-size:19px;letter-spacing:-.01em}
.ld-l1 .fbox .note{text-align:center;font-size:12.5px;color:#8694B0;margin-top:14px}
.ld-l1 footer{background:#081327;color:#8A97AF;font-size:12.5px;padding:34px 0 120px;line-height:1.8}
.ld-l1 footer b{color:#B9C4D8}
.ld-l1 .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);
  border-top:3px solid var(--gold-2);
  box-shadow:0 -16px 46px -10px rgba(5,12,28,.7)}
.ld-l1 .dock .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;
  padding:14px 22px}
.ld-l1 .dock .call{flex:0 0 auto;text-decoration:none;display:flex;flex-direction:column;gap:1px}
.ld-l1 .dock .call .lb{font-size:12.5px;letter-spacing:.1em;color:#C7D2E6;font-weight:700;
  display:flex;align-items:center;gap:7px}
.ld-l1 .dock .call .lb i{font-style:normal;width:8px;height:8px;border-radius:50%;background:#37D67A;
  box-shadow:0 0 0 0 rgba(55,214,122,.6);animation:live 1.6s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(55,214,122,.55)}
70%{box-shadow:0 0 0 9px rgba(55,214,122,0)}
100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}
}
.ld-l1 .dock .call .no{color:var(--gold-2);font-family:'Gothic A1';font-weight:900;font-size:34px;
  letter-spacing:.01em;line-height:1.05}
.ld-l1 .dock .call .sub{font-size:12px;color:#8FA0BE;font-weight:600}
.ld-l1 .dock .divider{width:1px;height:44px;background:rgba(255,255,255,.16);flex:0 0 auto}
.ld-l1 .dock .flabel{flex:0 0 auto;font-family:'Gothic A1';font-weight:900;font-size:20px;color:#fff;
  line-height:1.25}
.ld-l1 .dock .flabel em{font-style:normal;color:var(--gold-2)}
.ld-l1 .dock form{flex:1;display:flex;align-items:flex-start;gap:10px;min-width:0}
.ld-l1 .dock .fcol{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.ld-l1 .dock .frow{display:flex;gap:10px}
.ld-l1 .dock input[type=text],.ld-l1 .dock input[type=tel]{flex:1;min-width:0;height:48px;border-radius:9px;
  border:0;background:#fff;color:var(--ink);font-size:16px;padding:0 14px;font-family:inherit}
.ld-l1 .dock input::placeholder{color:#98A0AC}
.ld-l1 .dock .agree{display:flex;align-items:center;gap:6px;font-size:12px;color:#9FB0CD;font-weight:600}
.ld-l1 .dock .agree input{width:14px;height:14px;accent-color:var(--gold)}
.ld-l1 .dock .submit{flex:0 0 auto;position:relative;overflow:hidden;height:48px;padding:0 28px;
  border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy);
  font-family:'Gothic A1';font-weight:900;font-size:18px;letter-spacing:-.01em;line-height:1}
.ld-l1 .dock .submit::after{content:"";position:absolute;top:0;bottom:0;width:56px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
  animation:shine 2.4s infinite}
@keyframes shine{0%{left:-70px}
55%,100%{left:110%}
}
@media(prefers-reduced-motion:reduce){.ld-l1 .dock .submit::after,.ld-l1 .dock .call .lb i{animation:none}
}
@media(max-width:767px){.ld-l1 .top .visit{display:none}
.ld-l1 .top .tel .lb{display:none}
.ld-l1 .hero .wrap{padding:64px 22px 52px}
.ld-l1 .hero h1{font-size:34px}
.ld-l1 .hero h1 .thin{font-size:16px}
.ld-l1 .stats .grid{grid-template-columns:repeat(2,1fr)}
.ld-l1 section{padding:56px 0}
.ld-l1 .sec-t{font-size:26px}
.ld-l1 .prem .grid,.ld-l1 .types .grid{grid-template-columns:1fr}
.ld-l1 .map .box{grid-template-columns:1fr}
.ld-l1 .map .ph{min-height:220px}
.ld-l1 .fbox{padding:24px 18px}
.ld-l1 .view{padding:0 0 56px}
.ld-l1 .view .band{min-height:250px}
.ld-l1 .view .band .cap{padding:50px 20px 18px;flex-direction:column;align-items:flex-start;gap:4px}
.ld-l1 .view .band .cap h3{font-size:19px}
.ld-l1 .view .duo{grid-template-columns:1fr}
.ld-l1 .dock .in{flex-wrap:wrap;gap:8px;padding:10px 14px 9px}
.ld-l1 .dock .divider,.ld-l1 .dock .flabel,.ld-l1 .dock .call .sub{display:none}
.ld-l1 .dock .call{flex-direction:row;align-items:center;gap:10px;width:100%;justify-content:center}
.ld-l1 .dock .call .no{font-size:24px}
.ld-l1 .dock .call .lb{font-size:12px}
.ld-l1 .dock form{width:100%;align-items:stretch}
.ld-l1 .dock input[type=text],.ld-l1 .dock input[type=tel]{height:46px;font-size:16px;padding:0 11px}
.ld-l1 .dock .fcol{gap:5px}
.ld-l1 .dock .agree{font-size:12px}
.ld-l1 .dock .submit{height:auto;padding:0 20px;font-size:17px;border-radius:10px}
.ld-l1 footer{padding-bottom:160px}

}
.ld-l1.admin-bar .top{top:32px}
.ld-l1 .fbox .submit,.ld-l1 .dock .submit,.ld-l1 .btn{text-align:center}
.ld-l1 .fbox input,.ld-l1 .fbox select,.ld-l1 .dock input{box-shadow:none}
.ld-l1 .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ld-l1 .dock .ok,.ld-l1 .fbox .ok{display:none}
.ld-l1 .dock.is-done form{display:none}
.ld-l1 .dock.is-done .ok{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;
  color:var(--gold-2);font-family:'Gothic A1';font-weight:900;font-size:19px;min-height:48px}
.ld-l1 .fbox.is-done .frow,.ld-l1 .fbox.is-done .agree,.ld-l1 .fbox.is-done .submit,.ld-l1 .fbox.is-done .note{display:none}
.ld-l1 .fbox.is-done .ok{display:block;text-align:center;padding:26px 0 10px;color:#fff;
  font-family:'Gothic A1';font-weight:900;font-size:21px}
.ld-l1 .fbox.is-done .ok small{display:block;margin-top:10px;font-family:'Pretendard',sans-serif;
  font-weight:500;font-size:14px;color:#AFBDD8}
.ld-l1 .err{outline:2px solid #E05252 !important}
.ld-l1 .lk{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;
  cursor:pointer;letter-spacing:inherit}
.ld-l1 .pmodal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.ld-l1 .pmodal[hidden]{display:none}
.ld-l1 .pm-back{position:absolute;inset:0;background:rgba(5,12,28,.62)}
.ld-l1 .pm-card{position:relative;background:#fff;color:var(--ink);border-radius:16px;
  max-width:560px;width:100%;max-height:82vh;overflow:auto;padding:30px 28px 26px;
  box-shadow:0 30px 80px -20px rgba(5,12,28,.55)}
.ld-l1 .pm-card h3{font-family:'Gothic A1';font-weight:900;font-size:19px;letter-spacing:-.02em;margin-bottom:16px}
.ld-l1 .pm-row{padding:13px 0;border-top:1px solid var(--rule);font-size:14px;line-height:1.75;color:var(--ink-2)}
.ld-l1 .pm-row b{display:block;color:var(--gold-deep);font-size:12.5px;font-weight:700;margin-bottom:4px}
.ld-l1 .pm-note{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.7}
.ld-l1 .pm-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;background:none;
  font-size:22px;color:var(--ink-3);cursor:pointer;line-height:1}
.ld-l1 .pm-ok{width:100%;height:50px;margin-top:18px;border:0;border-radius:10px;background:var(--navy);
  color:#fff;font-family:'Gothic A1';font-weight:900;font-size:15.5px;cursor:pointer;text-align:center}
@media(max-width:767px){
}
.ld-l1 .pv-card{background:var(--card);color:var(--ink);border-radius:16px;border-top:3px solid var(--navy)}
.ld-l1 .pv-x{color:var(--ink-3)}
.ld-l1 .pv-h{font-family:'Gothic A1';color:var(--navy)}
.ld-l1 .pv h3,.ld-l1 .pv .pv-a{font-family:'Gothic A1';color:var(--navy)}
.ld-l1 .pv-t th{background:var(--surface,#F7F5F0)}
.ld-l1 .pv h3,.ld-l1 .pv .pv-a{font-size:15.5px;font-weight:800;margin:22px 0 8px}
.ld-l1 .pv-lead{border-bottom:1px solid rgba(128,128,128,.35)}
.ld-l1 .pv-demo{border-top:1px solid rgba(128,128,128,.35)}
.ld-l1 footer .pv-open{color:#B9C4D8}


/* ☠ **Bricks `section` 은 기본이 `display:flex`(가로)** 라 그 안의 `.wrap` 이
   «내용 폭» 으로 줄어든다(실측 1280 화면에서 523px). 원본은 `section` 이 블록이었다.
   ⚠ 가려진 클래스(`exs-section`)에 기대지 않는다 — 가리기 이름이 바뀌면 같이 깨진다.
   우리 `.wrap` 에 폭을 못 박는 편이 안전하다. */
.ld-l1 .wrap{ width:100% }

/* ☠ **하단 독 「신청하기」가 입력칸과 30px 어긋났었다**(대표님 지적 2026-09-02).
   ⚠ 원인은 CSS 가 아니라 «마크업» 이었다 — 라벨을 폼 «안·위» 에 넣어서 단추가 라벨 높이에 붙었다.
   원본은 라벨이 폼 «밖 왼쪽» 이다. **구조를 맞추니 정렬 규칙이 필요 없어졌다.**
   ★ **정렬로 덧대 가리지 않았다** — 그러면 다음에 또 어긋난다. */