/* 네이버 키워드 연결 페이지(lp-*.html) 전용 — style.css · functional.css 위에 덧붙임
   옛 리틀리(litt.ly/silobionic_*) 페이지의 소구점 순서를 홈페이지 톤으로 옮긴 것 */

/* ---------- hero ---------- */
.lp-hero .wrap{padding-bottom:64px;}
.lp-hero p{max-width:640px;}
.lp-hero-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;}
.lp .btn svg{margin-right:8px;}

/* ---------- KPI strip ---------- */
.lp-kpi{background:var(--black);color:var(--ivory);}
.lp-kpi ul{display:grid;grid-template-columns:repeat(4,1fr);}
.lp-kpi li{padding:24px 18px 26px;border-right:1px solid rgba(233,226,218,.12);text-align:center;}
.lp-kpi li:last-child{border-right:0;}
.lp-kpi .n{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;color:var(--white);letter-spacing:-.01em;line-height:1.2;}
.lp-kpi .n small{font-family:var(--font-kr);font-size:.5em;font-weight:500;margin-left:2px;color:var(--gold-light);}
.lp-kpi .t{display:block;font-size:12.5px;color:rgba(233,226,218,.62);margin-top:4px;}

/* ---------- media (영상 클립·사진 공통 틀) ---------- */
.lp-media{position:relative;background:var(--black);overflow:hidden;aspect-ratio:16/9;}
.lp-media video,.lp-media img{width:100%;height:100%;object-fit:cover;display:block;}
.lp-media .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 10px;font-size:12.5px;color:rgba(255,255,255,.92);background:linear-gradient(transparent,rgba(20,15,13,.72));line-height:1.5;}

/* ---------- compare table — 실로바이오닉 칸을 짙은 세로 띠로 강조 ---------- */
.lp-vs{max-width:880px;margin:0 auto;}
.lp-vs-row{display:grid;grid-template-columns:1fr 1.55fr 1.1fr;align-items:stretch;}
.lp-vs-row>span{padding:20px 22px;display:flex;align-items:center;gap:12px;line-height:1.5;border-bottom:1px solid var(--line);}
.lp-vs-row .lbl{font-size:15.5px;font-weight:700;color:var(--black);}
.lp-vs-row .new{background:var(--black);color:var(--white);font-size:17px;font-weight:500;letter-spacing:-.015em;border-bottom-color:rgba(233,226,218,.14);}
.lp-vs-row .new .ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold-deep);color:var(--white);}
.lp-vs-row .old{color:var(--black-soft);font-size:15.5px;}
.lp-vs-row .old .ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(42,33,29,.1);color:var(--muted);}
.lp-vs-row .ic svg{display:block;}
.lp-vs-head>span{border-bottom:2px solid var(--black);font-size:14px;font-weight:500;color:var(--black-soft);padding-top:18px;padding-bottom:18px;}
.lp-vs-head .lbl{font-size:13px;font-weight:500;color:var(--muted);}
.lp-vs-head .new{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;font-size:18px;font-weight:700;border-bottom-color:var(--gold);border-radius:14px 14px 0 0;padding-top:24px;}
.lp-vs-head .new small{font-family:var(--font-display);font-size:10.5px;letter-spacing:.24em;color:var(--gold-light);font-weight:600;}
.lp-vs-row:last-child .new{border-radius:0 0 14px 14px;border-bottom:0;padding-bottom:24px;}
.lp-vs-row:last-child>span{border-bottom:0;}
.lp-vs + .fx-note{max-width:880px;margin-left:auto;margin-right:auto;}
@media (hover:hover){.lp-vs-row:not(.lp-vs-head):hover .lbl,.lp-vs-row:not(.lp-vs-head):hover .old{background:var(--ivory-light);}}

/* ---------- 단지증 생활표 ---------- */
.lp-life{border-top:1px solid var(--line);}
.lp-life li{display:grid;grid-template-columns:190px 1fr auto;gap:18px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line-soft);}
.lp-life .k{color:var(--gold-deep);font-size:14px;font-weight:500;}
.lp-life .v{font-size:1.08rem;font-weight:500;}
.lp-life .ok{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--white);background:var(--gold-deep);border-radius:40px;padding:5px 12px;}

/* ---------- 걱정 → 답 ---------- */
.lp-worry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,36px);}
.lp-worry{background:var(--white);border:1px solid var(--line-soft);display:flex;flex-direction:column;}
.lp-worry-body{padding:26px 28px 30px;}
.lp-worry-body .n{font-family:var(--font-display);font-size:12px;letter-spacing:.18em;color:var(--gold-deep);}
.lp-worry-body h3{font-size:1.14rem;font-weight:700;margin:8px 0 12px;letter-spacing:-.015em;line-height:1.45;}
.lp-worry-body h3::before{content:'Q. ';color:var(--gold-deep);font-family:var(--font-display);}
.lp-worry-body p{font-size:14.8px;color:var(--black-soft);line-height:1.85;}

/* ---------- 가격 띠 ---------- */
.lp-price{background:var(--black);color:var(--white);}
.lp-price-in{display:grid;grid-template-columns:1.4fr 1fr;gap:28px 48px;align-items:center;padding:clamp(48px,5.5vw,76px) 0;}
.lp-price h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;letter-spacing:-.025em;color:var(--white);}
.lp-price p{margin-top:12px;color:rgba(233,226,218,.78);font-size:15px;line-height:1.85;}
.lp-price-act{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.lp-price-act .btn{justify-content:center;}

/* ---------- 사례 ---------- */
.lp-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.lp-case{margin:0;background:var(--white);border:1px solid var(--line-soft);}
.lp-case figcaption{padding:14px 18px 18px;font-size:14px;color:var(--black-soft);line-height:1.6;}
.lp-ba-grid{margin-top:clamp(26px,3vw,40px);}
.lp-ba-grid:has(.ba-card:only-child){grid-template-columns:minmax(0,560px);justify-content:center;}
.lp-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:clamp(30px,3.4vw,46px);}
.lp-link{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;border:1px solid var(--gold-light);background:var(--ivory-light);transition:background .3s var(--ease),border-color .3s var(--ease);}
.lp-link:hover{background:var(--white);border-color:var(--gold-deep);}
.lp-link b{display:block;font-size:1.02rem;font-weight:700;}
.lp-link small{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.6;}
.lp-link .arw{font-family:var(--font-display);color:var(--gold-deep);font-size:1.2rem;}

/* ---------- 유튜브 (누르면 재생) ---------- */
.lp-vgroup+.lp-vgroup{margin-top:clamp(44px,5vw,64px);}
.lp-vgroup-h{font-size:1.15rem;font-weight:700;margin-bottom:20px;padding-left:14px;border-left:2px solid var(--gold);}
.lp-vgroup-h small{display:block;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:2px;}
.lp-yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.lp-yt-card{background:var(--white);border:1px solid var(--line-soft);}
.sec--ivory .lp-yt-card{border-color:transparent;}
.lp-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--black);overflow:hidden;padding:0;}
.lp-yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .8s var(--ease),opacity .3s;}
.lp-yt:hover img{transform:scale(1.04);opacity:1;}
.lp-yt .play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(42,33,29,.78);color:var(--white);display:grid;place-items:center;transition:background .3s;}
.lp-yt:hover .play{background:var(--gold-deep);}
.lp-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lp-yt-card .vid-body{padding:18px 20px 22px;}
.lp-yt-card .vid-body h3{font-size:.98rem;}
.lp-yt-card .vid-body p{font-size:12.5px;}

/* ---------- 상담 · 방문 ---------- */
.lp-visit-photo{margin-top:28px;}
.lp-visit-photo img,.lp-visit-photo video{width:100%;aspect-ratio:16/10;object-fit:cover;}
.lp-reserve{margin-top:18px;font-size:13.5px;color:var(--muted);line-height:1.8;padding-left:14px;border-left:2px solid var(--gold-light);}
.lp-visit-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.lp-form-h{font-size:1.25rem;font-weight:700;line-height:1.45;letter-spacing:-.02em;}
.lp-form-s{font-size:13.5px;color:var(--muted);margin:6px 0 22px;}
.lp-hours{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.7;}
.lp-anchor{display:block;position:relative;top:calc(-1 * var(--header-h) - 30px);visibility:hidden;}

/* ---------- 언론 ---------- */
.lp-press{grid-template-columns:1fr 1fr;}
.lp-press-img{max-width:440px;justify-self:center;box-shadow:0 20px 50px rgba(42,33,29,.1);}
.lp-press-img img{width:100%;height:auto;}

/* ---------- 오시는 길 ---------- */
.lp-loc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
.lp-loc-item{padding:24px 24px 26px 0;border-bottom:1px solid var(--line-soft);}
.lp-loc-item+.lp-loc-item{padding-left:24px;border-left:1px solid var(--line-soft);}
.lp-loc-item .k{font-family:var(--font-kr);font-size:12.5px;color:var(--gold-deep);font-weight:500;letter-spacing:.04em;}
.lp-loc-item p{margin-top:8px;font-size:14.5px;line-height:1.8;color:var(--black-soft);}
.lp-loc-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding-top:30px;}

/* ---------- 의수 종류 가이드(totalhand) ---------- */
.lp-change-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);}
.lp-change{margin:0;background:var(--ivory-light);}
.lp-change .lp-media{aspect-ratio:auto;}
.lp-change .lp-media video,.lp-change .lp-media img{height:auto;aspect-ratio:794/308;}
.lp-change figcaption{padding:20px 24px 24px;}
.lp-change q{display:block;font-family:var(--font-serif);font-size:1.08rem;line-height:1.65;color:var(--black);quotes:'“' '”';}
.lp-change span{display:block;margin-top:10px;font-size:13px;color:var(--muted);}
.lp-checks{grid-template-columns:1fr;}
.lp-checks1{grid-template-columns:1fr;}
.lp-example{margin-top:28px;background:var(--ivory-light);padding:22px 24px;border-left:2px solid var(--gold);}
.lp-example .tag{font-size:12px;font-weight:700;color:var(--white);background:var(--gold-deep);padding:3px 10px;border-radius:30px;}
.lp-example p{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--black-soft);}
.lp-example .rec{color:var(--black);font-weight:500;}
.lp-pick-h{font-size:1.15rem;font-weight:700;margin-bottom:16px;}
.lp-pick{border-top:1px solid var(--line);}
.lp-pick li{display:flex;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line-soft);font-size:14.5px;}
.lp-pick span{color:var(--muted);}
.lp-pick b{font-weight:700;color:var(--gold-deep);text-align:right;}
.lp-use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px;}
.lp-use-grid.rv{margin-top:0;}
.lp-use{margin:0;}
.lp-use figcaption{font-size:13px;color:var(--black-soft);margin-top:8px;line-height:1.55;}
.lp-why li{grid-template-columns:1fr auto 1.25fr;}
.lp-why .c-old{font-family:var(--font-serif);}

/* ---------- 전자의수 ---------- */
.lp-photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-bottom:clamp(40px,5vw,64px);}
.lp-photo-row.two{grid-template-columns:repeat(2,1fr);}
.lp-five .lp-photo-row.two{margin-bottom:0;}
.lp-quotes{display:grid;gap:10px;}
.lp-quotes li{font-family:var(--font-serif);font-size:1.05rem;background:var(--white);padding:16px 22px;border-left:2px solid var(--gold-light);}
.lp-answer{margin-top:34px;text-align:center;background:var(--white);padding:34px 28px 36px;border:1px solid var(--gold-light);}
.lp-answer .eyebrow{margin-bottom:10px;letter-spacing:.06em;text-transform:none;font-family:var(--font-kr);}
.lp-answer .big{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;letter-spacing:-.025em;color:var(--black);}
.lp-answer p{margin-top:12px;font-size:15px;color:var(--black-soft);line-height:1.85;}
.lp-answer .link-more{display:inline-flex;margin-top:18px;}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;counter-reset:none;}
.lp-steps li{background:var(--white);padding:22px 16px 24px;text-align:center;position:relative;}
.lp-steps .n{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 12px;border-radius:50%;background:var(--gold-deep);color:var(--white);font-family:var(--font-display);font-size:14px;font-weight:600;}
.lp-steps b{font-size:14px;font-weight:500;line-height:1.55;display:block;}

/* ---------- 기능 의족 5가지 ---------- */
.lp-five{padding:clamp(34px,4vw,52px) 0;border-top:1px solid var(--line-soft);}
.lp-five:first-of-type{border-top:0;padding-top:0;}
.lp-five-head{display:grid;grid-template-columns:auto 1fr;gap:22px;margin-bottom:26px;max-width:860px;}
.lp-five-head .n{font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--gold);line-height:1;}
.lp-five-head h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;}
.lp-five-head p{margin-top:8px;font-size:15px;color:var(--black-soft);line-height:1.85;}
.lp-five .lp-yt-grid{grid-template-columns:repeat(2,1fr);}

/* ---------- 모바일 하단 고정 버튼 ---------- */
.lp-bar{display:none;}
@media (max-width:820px){
  .lp-bar{display:grid;grid-template-columns:1fr 1fr 1.25fr;position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(42,33,29,.08);padding-bottom:env(safe-area-inset-bottom);}
  .lp-bar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 6px;font-size:14px;font-weight:500;color:var(--black);}
  .lp-bar a+a{border-left:1px solid var(--line-soft);}
  .lp-bar a.is-main{background:var(--gold-deep);color:var(--white);}
  body.lp{padding-bottom:58px;}
  body.lp .silo-chat{bottom:74px;}
  body.lp .float-cta{bottom:146px;}
  body.lp .silo-greet{bottom:140px;}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lp-steps{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:960px){
  .lp-yt-grid,.lp-case-grid{grid-template-columns:repeat(2,1fr);}
  .lp-price-in{grid-template-columns:1fr;}
  .lp-price-act{flex-direction:row;flex-wrap:wrap;}
}
@media (max-width:820px){
  .lp-worry-grid,.lp-change-grid{grid-template-columns:1fr;}
  .lp-press{grid-template-columns:1fr;}
  .lp-loc{grid-template-columns:1fr;}
  .lp-loc-item,.lp-loc-item+.lp-loc-item{padding:20px 0;border-left:0;}
}
@media (max-width:640px){
  .lp-kpi ul{grid-template-columns:repeat(2,1fr);}
  .lp-kpi li{padding:18px 10px 20px;border-bottom:1px solid rgba(233,226,218,.12);}
  .lp-kpi li:nth-child(2){border-right:0;}
  .lp-kpi li:nth-child(n+3){border-bottom:0;}
  .lp-hero-actions .btn{flex:1 1 100%;justify-content:center;}
  .lp-vs-row{grid-template-columns:.78fr 1.4fr .95fr;}
  .lp-vs-row>span{padding:15px 9px;gap:7px;}
  .lp-vs-row .lbl{font-size:13px;}
  .lp-vs-row .new{font-size:14.5px;}
  .lp-vs-row .old{font-size:13.5px;}
  .lp-vs-row .new .ic{width:20px;height:20px;}
  .lp-vs-row .new .ic svg{width:12px;height:12px;}
  .lp-vs-row .old .ic{display:none;}
  .lp-vs-head .new{font-size:14.5px;padding-top:18px;}
  .lp-vs-head .new small{font-size:9px;letter-spacing:.16em;}
  .lp-vs-head>span{font-size:12px;}
  .lp-life li{grid-template-columns:1fr auto;gap:4px 12px;}
  .lp-life .k{grid-column:1/-1;}
  .lp-yt-grid,.lp-case-grid,.lp-five .lp-yt-grid{grid-template-columns:1fr;}
  .lp-worry-body{padding:22px 20px 24px;}
  .lp-photo-row{grid-template-columns:1fr 1fr;}
  .lp-photo-row>:first-child:not(:only-child){grid-column:1/-1;}
  .lp-photo-row.two>:first-child{grid-column:auto;}
  .lp-steps{grid-template-columns:repeat(2,1fr);}
  .lp-why li{grid-template-columns:1fr;gap:6px;text-align:left;}
  .lp-why .c-old{text-align:left;}
  .lp-why .c-mid{display:none;}
  .lp-five-head{grid-template-columns:1fr;gap:8px;}
  .lp-link{padding:18px 20px;}
  .lp-visit-act .btn{flex:1 1 100%;justify-content:center;}
  .lp-price-act .btn{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .lp-yt img{transition:none;}
}

/* 개수에 맞춘 칸 수 (빈칸 줄이기) */
@media (min-width:1081px){
  .lp-worry-grid.n5,.lp-worry-grid.n6{grid-template-columns:repeat(3,1fr);}
  .lp-yt-grid.n4{grid-template-columns:repeat(4,1fr);}
}
@media (min-width:641px){
  .lp-yt-grid.n2,.lp-five .lp-yt-grid.n2{grid-template-columns:repeat(2,1fr);}
  .lp-yt-grid.n1{grid-template-columns:minmax(0,640px);justify-content:center;}
}
