@charset "utf-8";
/*
 * 메인화면 스킨 renewal 전용 CSS (docs/renewal_ref_tacdis.md 2장 디자인 토큰, 12장 제안 반영)
 * - 흰 바탕 + 짙은 회색 글자 + 강조 1색 올리브. 빨강은 품절 같은 경고 표시에만.
 * - 영문 제목/라벨은 Barlow Condensed 대문자, 한글 본문은 Pretendard (head.sub.php 가 로드).
 * - 클래스는 rn- 접두어. 공용 css/style_default.css 와 겹치지 않는다. 상단/하단 영역은 이 파일이 건드리지 않는다.
 * - 분기점은 사이트 공용과 같은 1023px(태블릿) / 767px(모바일).
 * - 상품 카드(.rn-card)는 lib/itemcard.lib.php 가 그리고 규칙은 css/style_default.css 공용 (목록과 같은 카드).
 */

/* ===== 디자인 토큰 (메인 영역 안에서만) ===== */
.rn-main{
	--rn-primary:#3d5a3a;          /* 강조 1색 : 버튼, 밑줄, 세일 표시 */
	--rn-primary-dark:#2a3f28;     /* 호버, 어두운 배너 */
	--rn-text:#202223;             /* 제목 글자 */
	--rn-text-sub:#6d7175;         /* 본문, 카드 브랜드/가격 */
	--rn-accent:#c4463a;           /* 경고성 표시(품절)에만 */
	--rn-border:#e2e2e2;
	--rn-bg-soft:#f4f4f2;          /* 이미지 자리, 띠 배경 */
	--rn-olive-light:#c9d6a3;      /* 어두운 배너 위 소제목 */
	--rn-font-display:'Barlow Condensed','Pretendard',sans-serif;
	--rn-gutter:20px;
	--rn-section:60px;
	--rn-card-cols:5;
	font-size:14px;font-weight:500;line-height:1.6;color:var(--rn-text-sub);background:#fff;
	word-break:keep-all;overflow-wrap:break-word;
}
.rn-main h2,.rn-main h3{color:var(--rn-text);line-height:1.2;font-weight:600;margin:0}
.rn-main p{margin:0}
.rn-main a{color:inherit;text-decoration:none}
.rn-main button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.rn-main img{display:block;max-width:100%}

/* 영문 소제목 : 대문자 + 넓은 자간 */
.rn-eyebrow{font-family:var(--rn-font-display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600}

/* 버튼 : 모서리 0, 대문자. .rn-main a{color:inherit} 보다 우선하도록 .rn-main 을 붙인다 */
.rn-main .rn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;border:1.5px solid var(--rn-primary);background:var(--rn-primary);color:#fff;font-family:var(--rn-font-display);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .12s,border-color .12s,color .12s}
.rn-main .rn-btn:hover{background:var(--rn-primary-dark);border-color:var(--rn-primary-dark);color:#fff}
.rn-main .rn-btn--light{background:#fff;color:var(--rn-text);border-color:#fff}
.rn-main .rn-btn--light:hover{background:var(--rn-primary);border-color:var(--rn-primary);color:#fff}

/* ===== 1. 히어로 ===== */
.rn-hero{position:relative;height:clamp(420px,52vw,680px);overflow:hidden;background:#1f2a1d}
.rn-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s}
.rn-hero__slide.is-active{opacity:1;visibility:visible}
.rn-hero__bg{position:absolute;inset:0;background-image:var(--rn-bg);background-size:cover;background-position:center}
.rn-hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,9,.72) 0%,rgba(10,16,9,.25) 55%,rgba(10,16,9,0) 100%)}
.rn-hero__text{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 var(--rn-gutter);height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.rn-hero__text .rn-eyebrow{color:var(--rn-olive-light);margin-bottom:14px}
.rn-hero__text h2{font-family:var(--rn-font-display);font-size:clamp(40px,6vw,84px);font-weight:800;line-height:.95;text-transform:uppercase;color:#fff;max-width:11ch}
.rn-hero__text h2 em{font-style:normal;color:var(--rn-olive-light)}
.rn-hero__text p{margin:18px 0 28px;font-size:16px;max-width:46ch;color:#e5e9e2}
.rn-hero__dots{position:absolute;z-index:2;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:8px}
.rn-hero__dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45)}
.rn-hero__dots button.is-active{background:#fff}
.rn-hero__arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.7}
.rn-hero__arrow:hover{opacity:1}
.rn-hero__arrow--prev{left:14px}
.rn-hero__arrow--next{right:14px}
.rn-hero__arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ===== 2. 브랜드 마키 ===== */
.rn-marquee{overflow:hidden;border-bottom:1px solid var(--rn-border);padding:22px 0}
.rn-marquee__track{display:flex;align-items:center;width:max-content;animation:rn-marquee var(--rn-marquee-dur,40s) linear infinite}   /* 지속시간은 JS 가 트랙 폭에 맞춰 넣는다 (샘플과 같은 초당 약 41px) */
.rn-marquee:hover .rn-marquee__track{animation-play-state:paused}
.rn-marquee__item{display:flex;align-items:center;padding:0 44px;font-family:var(--rn-font-display);font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--rn-text);white-space:nowrap;opacity:.85}
.rn-marquee__item:hover{opacity:1;color:var(--rn-primary)}
.rn-marquee__item img{height:36px;width:auto;max-width:160px;object-fit:contain}   /* 브랜드 로고는 처음부터 원래 색으로 (흑백 처리 안 함) */
@keyframes rn-marquee{to{transform:translateX(-50%)}}

/* ===== 섹션 공통 (캐러셀 제목, 화살표, View all) ===== */
.rn-section{padding:var(--rn-section) 0 0}
.rn-section__head{display:flex;align-items:center;justify-content:center;gap:28px;margin-bottom:6px}
.rn-section__head h2{font-family:var(--rn-font-display);font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.rn-section__head h2 small{display:block;font-family:'Pretendard',sans-serif;font-size:13px;font-weight:500;color:var(--rn-text-sub);letter-spacing:0;text-transform:none;margin-top:4px}
.rn-section__arrow{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--rn-text)}
.rn-section__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rn-section__arrow:hover{color:var(--rn-primary)}
.rn-view-all{display:block;width:max-content;margin:0 auto 28px;font-family:var(--rn-font-display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rn-text);text-decoration:underline;text-decoration-color:rgba(32,34,35,.4);text-underline-offset:3px}
.rn-view-all:hover{text-decoration-color:var(--rn-primary);color:var(--rn-primary)}
.rn-empty{padding:40px 0;text-align:center;color:var(--rn-text-sub)}

/* ===== 3/5. 상품 캐러셀 : CSS scroll-snap, 외부 라이브러리 없음 ===== */
.rn-slider{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--rn-gutter)}
.rn-slider::-webkit-scrollbar{display:none}
.rn-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--rn-gutter)*(var(--rn-card-cols) - 1)) / var(--rn-card-cols));gap:var(--rn-gutter)}
.rn-grid .rn-empty{grid-column:1/-1;width:calc(100vw - var(--rn-gutter)*2)}

/* 상품 카드(.rn-card) 규칙은 css/style_default.css 공용 (6단계에서 옮김). 캐러셀 안에서는 스냅 정렬만 */
.rn-grid .rn-card{scroll-snap-align:start}

/* ===== 4. 비주얼 배너 ===== */
.rn-visual{position:relative;height:clamp(300px,38vw,520px);margin-top:var(--rn-section);background:#1a2418 var(--rn-bg) center/cover no-repeat;overflow:hidden}
.rn-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,9,.72) 0%,rgba(10,16,9,.35) 45%,rgba(10,16,9,0) 75%)}   /* 왼쪽 글자 자리만 어둡게 */
.rn-visual__text h2 a{color:inherit}
.rn-visual__note{display:inline-block;margin-top:14px;padding:6px 12px;border:1px solid rgba(255,255,255,.55);color:#fff;font-family:var(--rn-font-display);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}   /* "소량 재고 입고, 선착순 구매" 강조 줄 */
.rn-visual__text{position:absolute;right:0;bottom:0;left:0;max-width:1280px;margin:0 auto;padding:0 var(--rn-gutter) 44px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#fff}
.rn-visual__text .rn-eyebrow{color:var(--rn-olive-light)}
.rn-visual__text h2{font-family:var(--rn-font-display);font-size:clamp(28px,4.5vw,56px);text-transform:uppercase;color:#fff;line-height:1}
.rn-visual__text p{color:#dfe6dc;margin-top:8px}

/* ===== 6. 기획전 4타일 ===== */
.rn-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rn-gutter);padding:0 var(--rn-gutter);margin-top:var(--rn-section)}
.rn-tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#2a3f28;color:#fff}
.rn-tile__bg{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .6s}
.rn-tile:hover .rn-tile__bg{transform:scale(1.04)}
.rn-tile:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.65) 100%)}
.rn-tile__text{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px}
.rn-tile__text .rn-eyebrow{color:var(--rn-olive-light);margin-bottom:6px;font-size:11px}
.rn-tile__text h3{font-family:var(--rn-font-display);font-size:clamp(20px,1.9vw,28px);line-height:1.2;text-transform:uppercase;color:#fff;margin-bottom:14px}
.rn-tile__notice{margin:-6px 0 14px;font-size:12px;line-height:1.5;color:#e5e9e2;text-shadow:0 1px 3px rgba(0,0,0,.6)}   /* 사은품 타일 안내 줄 */
.rn-tile__notice p+p{margin-top:2px}
.rn-tile .rn-btn{min-height:38px;padding:0 18px;font-size:12px}

/* ===== 7. 신뢰 지표 띠 ===== */
.rn-proof{margin-top:var(--rn-section);padding:34px var(--rn-gutter);background:var(--rn-bg-soft);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.rn-proof a{display:block}
.rn-proof b{display:block;font-family:var(--rn-font-display);font-size:34px;font-weight:700;color:var(--rn-primary);line-height:1;text-transform:uppercase}
.rn-proof span{display:block;margin-top:6px;font-size:13px}
.rn-proof a:hover span{color:var(--rn-text)}

/* ===== 등장 애니메이션 ===== */
.rn-fade-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rn-fade-up.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	.rn-fade-up{opacity:1;transform:none;transition:none}
	.rn-marquee__track{animation:none}
	.rn-hero__slide{transition:none}
}

/* ===== 하단 푸터와의 간격 : 신뢰 지표 띠(.rn-proof) 바로 아래에 흰 푸터가 붙도록 #footer 의 margin-top(80px)을 없앤다 ===== */
.rn-main~.footer{margin-top:0}   /* main 뒤에 script 태그가 있어 인접(+)이 아닌 형제(~) 선택자 */

/* ===== 태블릿 (1023px 이하) : 카드 4칸 ===== */
@media (max-width:1023px){
	.rn-main{--rn-card-cols:4}
}

/* ===== 모바일 (767px 이하) ===== */
@media (max-width:767px){
	.rn-main{--rn-gutter:16px;--rn-section:44px;--rn-card-cols:2}
	.rn-hero{height:520px}
	.rn-hero__bg{background-image:var(--rn-bg-m,var(--rn-bg));background-position:var(--rn-pos-m,center)}   /* 모바일 전용 이미지(_m)가 있으면 그것을, 없으면 피사체 쪽을 보여 준다 */
	.rn-hero__bg:after{background:linear-gradient(180deg,rgba(10,16,9,.08) 0%,rgba(10,16,9,.18) 40%,rgba(10,16,9,.82) 100%)}   /* 위는 사진이 보이고 아래로 어두워진다 */
	.rn-hero__text{justify-content:flex-end;padding-bottom:64px}
	.rn-hero__text h2{font-size:34px}
	.rn-hero__text p{font-size:13px;margin:12px 0 20px}
	.rn-hero__arrow{display:none}
	.rn-marquee{padding:16px 0}
	.rn-marquee__item{font-size:22px;padding:0 24px}
	.rn-marquee__item img{height:28px}
	.rn-section__head{gap:10px}
	.rn-section__head h2{font-size:22px}
	.rn-grid{grid-auto-columns:calc((100% - var(--rn-gutter)) / 2.15)}   /* 다음 카드가 살짝 보이게 (edge-peek) */
	.rn-visual{height:460px;background-image:var(--rn-bg-m,var(--rn-bg));background-position:center top}
	.rn-visual:before{background:linear-gradient(180deg,rgba(10,16,9,.05) 0%,rgba(10,16,9,.25) 40%,rgba(10,16,9,.85) 100%)}
	.rn-visual__text{flex-direction:column;align-items:flex-start;padding-bottom:28px}
	.rn-visual__note{font-size:13px;margin-top:10px}
	.rn-tiles{grid-template-columns:1fr 1fr}
	.rn-tile{aspect-ratio:1/1}
	.rn-tile__text{padding:14px}
	.rn-tile__text .rn-eyebrow{font-size:10px;letter-spacing:.1em;margin-bottom:4px}
	.rn-tile__text h3{font-size:16px;margin-bottom:10px}
	.rn-tile__notice{margin:-4px 0 10px;font-size:10px}
	.rn-tile .rn-btn{min-height:32px;padding:0 12px;font-size:11px}
	.rn-proof{grid-template-columns:1fr;gap:14px;padding:26px var(--rn-gutter)}
}