/* ══════════════════════════════════════════════════════════════
   365implant.com — Video page design (2026-08)
   메인·아티클과 동일한 브랜드 시스템으로 통일.
   본문 HTML은 건드리지 않고 스타일만 덮어씀.
   되돌리려면 각 페이지의 <link> 한 줄만 삭제.
   ══════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  --orange:#E8672E; --orange-deep:#d15a24;
  --navy:#1A1613;                 /* 다크 섹션을 브랜드 다크로 교체 */
  --cream:#FBF7F2;
  --text:#1A1613; --text-mid:#544E48; --text-muted:#8A8279;
  --border:#EFE8E0;
  --r:100px; --r-lg:16px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
        'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--text);
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:pretty;
}

.wrap{max-width:820px;padding:0 clamp(20px,4vw,44px)}

/* ── nav ── */
.vid-nav{
  height:70px;padding:0 clamp(20px,4vw,44px);
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--border);
}
.vid-nav__logo img{height:30px !important;border-radius:5px}
.vid-nav__cta{
  font-family:var(--font);font-size:12.5px;font-weight:700;
  letter-spacing:0;text-transform:none;
  padding:10px 20px;border-radius:100px;
  background:var(--orange);color:#fff;
}
.vid-nav__cta:hover{background:var(--orange-deep)}

/* ── breadcrumb ── */
.breadcrumb{padding-top:92px;max-width:820px}
.breadcrumb ol{font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--text-muted)}
.breadcrumb a{color:var(--orange);font-weight:700}

/* ── video hero ── */
.video-hero{background:var(--navy);padding:clamp(32px,4vw,56px) clamp(20px,4vw,44px) clamp(40px,5vw,64px)}
.video-hero__wrap{max-width:760px;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.42)}

/* ── content ── */
.vid-tag{
  display:inline-block;background:none;color:var(--orange);
  font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:0;border-radius:0;margin-bottom:14px;
}
.vid-h1{
  font-family:var(--font);
  font-size:clamp(28px,4.2vw,44px);
  font-weight:800;line-height:1.22;letter-spacing:-1.4px;
  color:var(--text);
  margin-bottom:26px;padding-bottom:26px;
  border-bottom:1px solid var(--border);
  text-wrap:balance;
}
.vid-desc{font-family:var(--font);font-size:17px;line-height:1.92;color:var(--text-mid);margin-bottom:34px}
.vid-h2{
  font-family:var(--font);
  font-size:clamp(20px,2.6vw,27px);
  font-weight:800;letter-spacing:-.7px;line-height:1.35;
  color:var(--text);
  margin:52px 0 16px;padding-left:16px;position:relative;
}
.vid-h2::before{
  content:'';position:absolute;left:0;top:.22em;bottom:.22em;
  width:3px;border-radius:2px;background:var(--orange);
}

/* 핵심 포인트 박스 */
.key-points{background:var(--navy);border-radius:16px;padding:30px 34px;margin:36px 0}
.key-points h3{
  font-family:var(--font);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:#F09A6A;margin-bottom:18px;
}
.key-points li{
  font-family:var(--font);font-size:14.5px;line-height:1.8;
  color:#D6CEC5;padding:7px 0 7px 20px;
}
.key-points li::before{content:'';position:absolute;left:0;top:1.05em;
  width:5px;height:5px;background:#F09A6A;transform:rotate(45deg);color:transparent}

/* 언어 구분선 */
.lang-divider{
  border:none;height:1px;background:var(--border);
  margin:64px 0 56px;position:relative;
}
.lang-divider::after{
  content:'';position:absolute;left:50%;top:50%;
  width:44px;height:3px;border-radius:2px;
  background:var(--orange);transform:translate(-50%,-50%);
}

/* 한국어 섹션 */
.ko-section{
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--orange);
  border-radius:0 16px 16px 0;padding:34px;margin:36px 0;
}
.ko-section h2{
  font-family:var(--font);font-size:clamp(20px,2.6vw,26px);
  font-weight:800;letter-spacing:-.7px;color:var(--text);margin-bottom:18px;
}
.ko-section p{font-family:var(--font);font-size:16px;line-height:1.92;color:var(--text-mid);margin-bottom:18px}

/* 연락 CTA */
.contact-block{
  background:var(--navy);border-radius:16px;
  padding:clamp(34px,4vw,48px) clamp(22px,4vw,40px);margin:52px 0;
}
.contact-block h3{
  font-family:var(--font);font-size:clamp(22px,2.8vw,28px);
  font-weight:800;letter-spacing:-1px;color:#fff;margin-bottom:10px;
}
.contact-block p{font-family:var(--font);color:#C9C1B7;font-size:15px;line-height:1.8;margin-bottom:26px}
.contact-block .btn{
  font-family:var(--font);font-size:14px;font-weight:700;
  letter-spacing:0;text-transform:none;
  background:var(--orange);color:#fff;
  padding:15px 30px;border-radius:100px;transition:.22s;
}
.contact-block .btn:hover{background:var(--orange-deep);transform:translateY(-1px)}

/* 관련 영상 */
.related{padding:56px 0}
.related h3{
  font-family:var(--font);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:22px;
}
.rel-card{border:1px solid var(--border);border-radius:16px;transition:.25s}
.rel-card:hover{box-shadow:0 12px 32px rgba(26,22,19,.08);transform:translateY(-2px)}
.rel-card__body{padding:16px 18px}
.rel-card__tag{font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:1.3px;color:var(--orange);margin-bottom:6px}
.rel-card__title{font-family:var(--font);font-size:14px;font-weight:700;line-height:1.5;letter-spacing:-.3px;color:var(--text)}

/* 푸터 */
footer{
  background:var(--navy);color:#A79E94;
  font-family:var(--font);font-size:12.5px;line-height:1.85;padding:36px 20px;
}
footer a{color:#C9C1B7}
footer a:hover{color:#fff}

/* ── 반응형 ── */
@media(max-width:860px){
  .vid-nav{height:62px}
  .vid-nav__logo img{height:26px !important}
  .breadcrumb{padding-top:84px}
  .vid-h2{margin-top:42px}
}
@media(max-width:640px){
  .vid-h1{font-size:26px;letter-spacing:-1px}
  .vid-desc,.ko-section p{font-size:16px}
  .ko-section{padding:24px 22px}
  .key-points{padding:24px 22px}
}
@media(prefers-reduced-motion:reduce){
  .rel-card:hover,.contact-block .btn:hover{transform:none}
}