@charset "utf-8";
/* 리뉴얼 (PC) - 디자인 2560 / inner 1920 기준. rn- 네임스페이스로 기존 skin.css와 분리. */

/* ===== 색 토큰 (PSD 시안 추출값) ===== */
:root {
    --rn-red: #e2221e;        /* 메인 레드: 라벨·강조·액티브 */
    --rn-red-btn: #e02018;    /* 토글 활성 */
    --rn-red-name: #d93017;   /* 제품명 */
    --rn-red-deep: #400808;   /* 레드밴드 딥(그라데이션 시작) */
    --rn-red-outro: #a80000;  /* FILL THE DETAIL 배경 */
    --rn-coral: #f86858;      /* 곡선 라인 */
    --rn-black: #111111;
    --rn-gray: #dcdcdc;       /* 라이트 섹션 배경 */
    --rn-muted: #999999;      /* 흐린/비활성 */
    --rn-footer: #232728;
    --rn-line: #ddd;
}

/* ===== 공통 리셋 ===== */
/* 헤더가 열어둔 래퍼를 풀폭으로 해제 */
.warpper .contents_wrap { width: 100% !important; }
.warpper .contents_wrap #contents_box { padding: 0 !important; margin: 0 !important; }
.sub_visual { display: none !important; }

body { overflow-x: hidden; }  /* zoom 축소 전 가로스크롤 방지 */
#rn-main { position: relative; width: 1920px; margin: 0 auto; overflow-x: hidden; }
#rn-main * { box-sizing: border-box; }
#rn-main img { max-width: 100%; }

/* ===== 상단 고정 헤더 ===== */
#rn-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: 110px; display: flex; align-items: center;
    padding: 0 40px; transition: background .3s;
}
#rn-header.on { background: rgba(255,255,255,.9); box-shadow: 0 1px 0 var(--rn-line); }
/* 시그니처 라인: 헤더 블랙 */
body.rn-sig-line #rn-header, body.rn-sig-line #rn-header.on { background: rgba(0,0,0,.85); box-shadow: none; }
body.rn-sig-line .rn-toggle-btn:not(.is-active) { color: var(--rn-red); }

/* PREMIUM / SIGNATURE 토글 pill - 상단 중앙 */
.rn-toggle {
    position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
    width: 380px;
    height: 46px;
    display: inline-flex; border-radius: 999px;
    border: 2px solid var(--rn-red); background: transparent;
}
.rn-toggle-thumb {
    position: absolute; top: 0; left: 0; height: 100%; width: 50%;
    background: var(--rn-red-btn); border-radius: 999px; z-index: 0;
    transition: left .3s ease, width .3s ease, background .3s ease;
}
.rn-toggle-btn {
    position: relative; z-index: 1;
    flex: 1;
    font-size: 16px; letter-spacing: .1em;
    background: transparent; border: 0; cursor: pointer; color: #040000; transition: color .3s;
}
.rn-toggle-btn.is-active { color: #000000; font-weight: 700; }

/* 햄버거 (우측) */
.rn-hamburger {
    margin-left: auto; width: 34px; height: 24px; background: none; border: 0;
    display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
}
.rn-hamburger span { display: block; height: 2px; background: #222; }

/* 전체메뉴 오버레이 */
.rn-menu {
    position: fixed; inset: 0; z-index: 99; background: rgba(20,20,20,.96);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px;
}
.rn-menu.open { display: flex; }
.rn-menu a { color: #fff; font-size: 26px; letter-spacing: .05em; }
.rn-menu-close { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 30px; background: none; border: 0; cursor: pointer; }

/* ===== 라인 전환: 활성 뷰만 노출 ===== */
.rn-view { display: none; }
.rn-line-premium   .rn-view-premium   { display: block; }
.rn-line-signature .rn-view-signature { display: block; }

/* ===== 우측 닷 네비 ===== */
.rn-nav { position: fixed; right: 100px; top: 50%; transform: translateY(-50%); z-index: 90; display: none; opacity: 0; transition: opacity .4s ease; }
#rn-main.rn-scrolled .rn-nav { opacity: 1; }
.rn-line-premium   .rn-nav[data-for="premium"]   { display: block; }
.rn-line-signature .rn-nav[data-for="signature"] { display: block; }
.rn-nav ul { display: flex; flex-direction: column; gap: 55px; }
.rn-nav a { display: flex; align-items: center; gap: 15px; font-size: 14px; letter-spacing: .15em; color: #999; font-weight: 500; }
.rn-nav a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.rn-nav a.active { color: var(--rn-red); }
.rn-nav a.active::before { background: var(--rn-red); }
/* 시그니처 네비: 육각형 마커 (프리미엄은 원형 유지) */
.rn-nav[data-for="signature"] a::before {
    width: 11px; height: 12px; border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ===== 섹션 공통 ===== */
.rn-sec { position: relative; display: flex; flex-direction: column; justify-content: flex-start; }
.rn-inner { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 100px; }
.rn-label { font-size: 16px; letter-spacing: .3em; color: var(--rn-red); text-align: center; margin-bottom: 32px; font-weight: 600; }
.rn-sub-title { font-size: 19px; font-weight: 500; line-height: 1.4; text-align: center; }
.rn-title { font-size: 36px; font-weight: 700; line-height: 1.4; text-align: center; }
#rn-main sup { font-size: .645em; vertical-align: super; font-weight: inherit; }
.rn-title .pt { color: var(--rn-red); }
.rn-desc { margin-top: 39px; font-size: 14px; color: #666; text-align: center; }
.rn-desc b { font-size: 14px; }

/* 테마 배경 */
.rn-theme-light { background: var(--rn-gray); }
.rn-theme-red   { background: linear-gradient(120deg, var(--rn-red-deep), var(--rn-red)); color: #fff; }
.rn-theme-black { background: var(--rn-black); color: #fff; }
.rn-theme-red .rn-title, .rn-theme-black .rn-title { color: #fff; }
.rn-theme-red .rn-desc,  .rn-theme-black .rn-desc  { color: rgba(255,255,255,.75); }

/* 이미지 자리표시자 (아직 컷 없는 SIGNATURE 뷰용) */
.rn-ph {
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 10px,#e6e6e6 10px,#e6e6e6 20px);
    color: #999; font-size: 13px; border: 1px dashed #bbb; border-radius: 4px;
}
.rn-theme-red .rn-ph, .rn-theme-black .rn-ph { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.7); }
.rn-ph-box   { width: 140px; height: 300px; }
.rn-ph-model { width: 360px; height: 520px; }
.rn-ph-wide  { width: 100%; height: 320px; }

/* ============================================================
   HERO (Header_더채움) - 로고+헤드라인 좌 / 지창욱 모델 우
   ============================================================ */
.rn-hero { position: relative; align-items: stretch; justify-content: flex-start; height: 1000px; overflow: hidden; }
.rn-hero .rn-inner { display: flex; align-items: center; gap: 60px; }
.rn-hero-copy { position: absolute; top: 230px; left: 200px; flex: 1; z-index: 2; }
.rn-hero-logo { display: block; width: 381px; height: auto; margin-bottom: 50px; }
.rn-hero-title { display: block; width: 628px; height: auto; margin-bottom: 160px; }
.rn-hero-sub { display: block; width: 343px; height: auto; }
.rn-hero-model { position: absolute; top: 0; right: 0; max-width: 1295px; }

/* ============================================================
   INTRO - 텍스트+제품박스 중앙, 곡선 라인이 섹션을 가로지름
   ============================================================ */
.rn-intro { overflow: hidden; height: 1008px; padding-top: 125px; }
.rn-intro .rn-inner { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 1; }
.rn-intro-line { position: absolute; left: 50%; bottom: 211px; transform: translate(-50%, 0); width: 2014px; height: auto; pointer-events: none; z-index: 0; }
.rn-intro-box { width: 725px; height: auto; margin-top: 118px; }

/* ============================================================
   BAND (중간 배너) - 박스 좌 / 텍스트 우, 레드 배경
   ============================================================ */
.rn-band { position: relative; height: 995px; overflow: hidden; padding: 0;
   background: linear-gradient(95deg, #bf0404 0%, #400c0c 50%);
}
.rn-band-inner { display: flex; align-items: center; height: 100%; }
.rn-band-boxes { width: 1075px; height: auto; }
.rn-band .rn-title-box { position: absolute;top: 50%;right: 270px;transform: translateY(-50%); }
.rn-band .rn-sub-title { font-size: 25.7px; line-height: 60px; font-weight: 300; }
.rn-band .rn-title, 
.rn-band .rn-title b { font-size: 55.8px; line-height: 80px; text-align: left; font-weight: 300; }
.rn-band .rn-title b {font-weight: 700;}

/* ============================================================
   BENEFIT - 원료/공정/안전 3분할
   ============================================================ */
/* 원료/공정/안전: 왼쪽 키워드 + 세로 빨간선 + 오른쪽 설명, 세로 스택 */
.rn-benefit { height: 1001px; padding-top: 200px; text-align: center; }
.rn-benefit .rn-title { margin-top: 42px; }
.rn-benefit-list { width: 570px; margin: 80px auto 0; display: flex; flex-direction: column; gap: 85px; }
.rn-benefit-item { display: flex; align-items: flex-start; text-align: left; }
.rn-benefit-item .k { flex: 0 0 66px; color: var(--rn-red); font-weight: 700; font-size: 18px; }
.rn-benefit-item .rn-desc { margin: 0; padding-left: 20px; border-left: 1px solid var(--rn-red); text-align: left; font-size: 18px; color: #666; }
.rn-benefit-item .rn-desc b{ font-size: 18px; color: #666; }

/* ============================================================
   PRODUCT - 지창욱 모델 + 제품 4박스 + 스펙
   ============================================================ */
.rn-product { position: relative; height: 2000px; background-color: #dfdfdf; }
.rn-product .rn-product-model { display: block; margin: 0 auto; width: 1400px; height: auto; }
.rn-product .rn-title-box {position: absolute; top: 1170px; left: 50%; transform: translateX(-50%); }
.rn-product .rn-title-box .rn-desc { margin-top: 15px;}

/* ============================================================
   FEATURE - 물성 영상 + 제형 4종
   ============================================================ */
.rn-feature { height: 1000px; padding-top: 129px; text-align: center; }
.rn-feature .rn-title { margin-top: 18px; }
.rn-feature .rn-desc { margin-top: 26px; }
/* 물성 영상 848x402 (PSD 프레임) */
.rn-feature-media { width: 848px; height: 260px; overflow: hidden; margin: 44px auto 0; }
.rn-feature-media video { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate(0, 10px) scale(1.02); }
.rn-feature-grid { display: flex; justify-content: center; gap: 40px; width: 900px; margin: 24px auto 0; }
.rn-feature-cell { width: 176px; text-align: center; }
.rn-fname { color: var(--rn-red-name); font-weight: 700; font-size: 13px; }
.rn-pas { font-size: 9px; color: #888; margin-top: 4px; }
.rn-drops-img { height: 26px; width: auto; margin-top: 10px; }
.rn-feature-note { font-size: 12px; font-weight: 700; color: #666666; text-align: center; margin-top: 56px; }

/* ============================================================
   OUTRO - FILL THE DETAIL, 제품 계단 연출
   ============================================================ */
/* 섹션 전체가 한 장면 → 풀블리드 이미지 (계단+박스+FILL THE DETAIL 포함) */
.rn-outro { height: 1000px; padding: 0; overflow: hidden; }
.rn-outro-bg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   SIGNATURE - 배경이미지 + 텍스트 오버레이 (PSD 중앙1920 좌표)
   ============================================================ */
.rn-sig { position: relative; }
.rn-sig-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
#s-p1 { height: 1018px; } 
#s-p2 { height: 1000px; } 
#s-p3 { height: 999px; }
#s-p4 { height: 1000px; } 
#s-p5 { height: 1000px; } 
#s-p6 { height: 1001px; } 
#s-p7 { height: 832px; }
.rn-sig .st { position: absolute; margin: 0; }
.rn-sig .pt { color: #e1251b; font-size: 17px; }

/* P1 INTRO */
#s-p1 .sig-lead { left: 909px; top: 423px; }
#s-p1 .sig-bi   { left: 910px; top: 472px; }
#s-p1 .sig-desc { left: 909px; top: 658px; }

/* P3 BENEFIT */
#s-p3 .sig-title { left: 1045px; top: 393px; }
#s-p3 .sig-desc { left: 1043px; top: 679px; }

/* P4 - 블랙 배경 + 좌측 제품(하단정렬, 위 잘림 허용) */
#s-p4 { background: #000; overflow: hidden; }
#s-p4 .sig-product { position: absolute; left: 0; bottom: 0; width: 861px; }

/* P4 Quality/Authorized/Lineup: 헤딩+설명 flex (헤딩=설명 세로 가운데), 시그니처 pt=px */
#s-p4 .sig-row { display: flex; align-items: center; }
#s-p4 .sig-h { width: 247px; flex-shrink: 0; margin: 0; font-size: 30px; color: #e2211c; font-weight: 700; }
#s-p4 .sig-d { margin: 0; font-size: 17px; color: #b5b5b6; line-height: 1.5; }
#s-p4 .q-row { left: 951px; top: 377px; }
#s-p4 .a-row { left: 951px; top: 486px; }
#s-p4 .l-row { left: 951px; top: 595px; }

/* P5 라인업 (이미지) */
#s-p5 .sig-title   { left: 748px; top: 156px; }
#s-p5 .sig-product { left: 596px; top: 290px; }
#s-p5 .sig-label   { left: 762px; top: 655px; }
#s-p5 .sig-table   { left: 596px; top: 710px; }

/* P6 / P7 */
#s-p6 .sig-bi { left: 258px; top: 436px; }
#s-p6 .sig-t { left: 1209px; top: 487px; }
#s-p7 .sig-bi { left: 1231px; top: 374px; }

/* ============================================================
   NOTICE (의료기기 광고심의, 흰 배경) + FOOTER (HUGEL 다크)
   ============================================================ */
.rn-notice { height: 230px; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rn-notice-logo { width: 336px; height: auto; margin-bottom: 34px; }
.rn-notice-txt { font-size: 15px; line-height: 25px; color: #666666; }
/* 시그니처 notice: 블랙 배경 + BI 로고 */
.rn-view-signature .rn-notice { height: 266px; background: #000; }
.rn-view-signature .rn-notice-logo { width: 261px; }
.rn-view-signature .rn-notice-txt { color: #999; }

#rn-footer { height: 195px; background: var(--rn-footer); display: flex; align-items: center; justify-content: center; }
.rn-footer-inner { display: flex; align-items: center; gap: 40px; }
.rn-footer-logo { width: 95px; height: auto; }
.rn-footer-info { font-size: 15px; line-height: 24px; color: #666666; text-align: left; }

/* ============================================================
   LINEUP 표 (SIGNATURE 전용)
   ============================================================ */
.rn-lineup-table { width: 100%; max-width: 760px; margin: 40px auto 0; border-collapse: collapse; font-size: 13px; }
.rn-lineup-table th, .rn-lineup-table td { border: 1px solid rgba(255,255,255,.25); padding: 12px; text-align: center; }
.rn-lineup-table thead th { background: rgba(255,255,255,.1); }