/* v14 — 이 템플릿만의 것. 골격(폭·여백·글자 크기)은 _디자인시스템 이 정한다. */
:root{
  --pt-primary:#e03e9c;
  --pt-on-primary:#ffffff;   /* 주색 밝기를 재서 고른 글자색 — 밝은 색엔 흰 글씨를 얹지 않는다 */
  --pt-dark:#671e48;
  --pt-radius:22px;
  --pt-radius-sm:22px;
}
.card{ background:var(--pt-off); border:0; box-shadow:none; }
.head .kicker{ color:var(--pt-primary); letter-spacing:.16em; }

/* 플로팅 배너 — 품티켓이 쓰던 그대로 */
:root{ --fab-right-pc:200px; --fab-bottom-pc:50px; --fab-size-pc:80px;
       --fab-right-mo:16px; --fab-bottom-mo:16px; --fab-size-mo:70px; --fab-gap:12px; }
#floating-chat-icons{ position:fixed; z-index:9999; display:flex; flex-direction:column; gap:var(--fab-gap);
  right:calc(var(--fab-right-pc) + env(safe-area-inset-right,0px));
  bottom:calc(var(--fab-bottom-pc) + env(safe-area-inset-bottom,0px)); }
#floating-chat-icons a{ display:inline-block; line-height:0; }
#floating-chat-icons img{ width:var(--fab-size-pc); height:auto; display:block; cursor:pointer; }
@media (max-width:768px){
  #floating-chat-icons{ right:calc(var(--fab-right-mo) + env(safe-area-inset-right,0px));
    bottom:calc(var(--fab-bottom-mo) + env(safe-area-inset-bottom,0px)); }
  #floating-chat-icons img{ width:var(--fab-size-mo); }
}


/* 부품 — 창고 분류를 따서 토큰으로 지음. 칸 수만 정한다 */
.pt-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--pt-gap,20px); }
.pt-stats .card{ text-align:center; }
.pt-stats b{ display:block; font-size:44px; font-weight:800; line-height:1.1; color:var(--pt-primary); margin-bottom:8px; }
.pt-tl{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:tl; }
.pt-tl li{ position:relative; padding:0 0 26px 44px; border-left:2px solid var(--pt-line); margin-left:14px; }
.pt-tl li::before{ counter-increment:tl; content:counter(tl); position:absolute; left:-16px; top:0; width:30px; height:30px;
  border-radius:50%; background:var(--pt-primary); color:var(--pt-on-primary); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; }
.pt-tl li:last-child{ border-left-color:transparent; }
.pt-tl h3{ margin:0 0 6px; }
.pt-quote{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pt-gap,20px); }
.pt-quote blockquote{ margin:0; }
.pt-quote blockquote p{ font-size:17px; font-weight:600; line-height:1.6; }
.pt-quote blockquote p::before{ content:"\201C"; color:var(--pt-primary); font-size:28px; line-height:0; margin-right:4px; }
.pt-quote cite{ display:block; margin-top:10px; font-style:normal; color:var(--pt-grey); font-size:13.5px; }
.pt-obj{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pt-gap,20px); }
.pt-obj .card{ text-align:center; }
.pt-obj img{ height:120px; width:auto; margin:6px auto 14px; display:block; }
.pt-check{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
.pt-check li{ position:relative; padding:14px 14px 14px 46px; background:#fff; border:1px solid var(--pt-line); border-radius:var(--pt-radius-sm,10px); }
.pt-check li::before{ content:""; position:absolute; left:14px; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:6px;
  background:var(--pt-primary); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; }
.pt-mid{ display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.pt-mid img{ height:130px; width:auto; }
.pt-mid .cta-btns{ margin-top:14px; }
@media (max-width:767px){
  .pt-stats,.pt-quote,.pt-obj{ grid-template-columns:1fr; }
  .pt-stats b{ font-size:36px; }
  .pt-check{ grid-template-columns:1fr; }
  .pt-mid{ grid-template-columns:1fr; }
  .pt-mid img{ display:none; }
}

/* 헤더~히어로 사이 3D 슬라이드 */
/* 슬라이드가 위에 붙으면 fixed 배경은 첫 화면에서 인물 머리가 잘린다(9-23 실측) — 스크롤형으로 */
.slide-sec ~ .hero--bleed .bg{ background-attachment:scroll; }
.slide-sec{ padding:26px 0 6px; background:#fff; }
.slider{ position:relative; }
.slider .track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.slider .track::-webkit-scrollbar{ display:none; }
.slider figure{ flex:0 0 calc((100% - 36px)/3); scroll-snap-align:start; margin:0; min-width:0; }
.slider figure a{ display:block; color:inherit; text-decoration:none; }
.slider img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--pt-radius); display:block; }
.slider figcaption{ margin-top:8px; font-size:var(--pt-small); color:var(--pt-grey); text-align:center; }
.slider .nav{ position:absolute; top:calc(50% - 30px); transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--pt-line); background:#fff; color:#222; font-size:26px; line-height:38px; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.12); z-index:2; }
.slider .prev{ left:-12px; } .slider .next{ right:-12px; }
@media (max-width:900px){ .slider figure{ flex-basis:calc((100% - 18px)/2); } }
@media (max-width:640px){ .slider figure{ flex-basis:100%; } .slider .prev{ left:4px; } .slider .next{ right:4px; } .slide-sec{ padding:16px 0 4px; } }