@charset "utf-8";

/*
* vw 단위 사용법
* 80px => calc(80 * var(--vw));
*/

/* ===== Fonts ===== */
@font-face {
    font-family: 'ITCGaramondStd';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/ITCGaramondStd-BkCond.woff2') format('woff2'),
        url('/fonts/ITCGaramondStd-BkCond.woff') format('woff'),
        url('/fonts/ITCGaramondStd-BkCond.otf') format('opentype');
}
@font-face {
    font-family: 'ITCGaramondStdItalic';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/ITCGaramondStd-BkIta.woff2') format('woff2');
}
@font-face {
    font-family: 'ProximaNova';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/ProximaNova-Regular.woff2') format('woff2'),
        url('/fonts/ProximaNova-Regular.woff') format('woff');
}
@font-face {
    font-family: 'ProximaNova';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/ProximaNova-Bold.woff2') format('woff2'),
        url('/fonts/ProximaNova-Bold.woff') format('woff');
}

.imc { --vw: 0.625px; } /* 1920px 기준 */
@media screen and (min-width: 1200px) {
    .imc { --vw: 0.052083333vw; }
}

/* ===== HOUSE OF 204 :: 공통 ===== */
.ho204 {
    --ho-dark: #38231e;    /* 다크 브라운 */
    --ho-cream: #f1e8dd;   /* 크림 배경 */
    --ho-creamT: #f2e8dd;  /* 다크 배경 위 텍스트 */
    --ho-taupe: #846953;   /* Night 배경 */
    --ho-ph: #e0e2e3;      /* 영상 placeholder */
    overflow: hidden;
    background: var(--ho-cream);
}
.ho204 * { box-sizing: border-box; }
.ho204 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ho204 .serif { font-family: 'ITCGaramondStd', serif; font-weight: 700; }
.ho204 .ital { font-family: 'ITCGaramondStdItalic', serif; font-style: italic; }
.ho204 .eng { font-family: 'ProximaNova', sans-serif; font-style: normal; }

/* ===== 01. KV ===== */
.ho204__kv { width: 100%; height: calc(892 * var(--vw)); background: #bfbfbf; overflow: hidden; }
.ho204__kv img { object-position: center top; }

/* ===== 02. Intro (타이틀 + 카피) ===== */
.ho204__top { display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding-bottom: calc(160 * var(--vw)); background: var(--ho-cream); }
.ho204__intro { display: flex; flex-direction: column; align-items: center; margin-top: calc(60 * var(--vw)); gap: calc(16 * var(--vw)); width: calc(800 * var(--vw)); text-align: center; color: var(--ho-dark); }
.ho204__introSub { font-family: 'ProximaNova', sans-serif; font-weight: 700; font-size: calc(33 * var(--vw)); line-height: calc(44 * var(--vw)); }
.ho204__introSub .kr { font-family: inherit; font-weight: 700; font-size: calc(30 * var(--vw)); letter-spacing: calc(-1.5 * var(--vw)); }
.ho204__introTitle { display: flex; gap: calc(12 * var(--vw)); align-items: baseline; justify-content: center; margin-top: calc(10 * var(--vw)); }
.ho204__introTitle .kr { font-weight: 700; font-size: calc(59 * var(--vw)); letter-spacing: calc(-2.95 * var(--vw)); line-height: 1.4; }
.ho204__introTitle .en { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(90 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); line-height: 1.1; }
.ho204__introCopy { margin-top: calc(6 * var(--vw)); }
.ho204__introCopy p { font-size: calc(28 * var(--vw)); line-height: calc(44 * var(--vw)); letter-spacing: calc(-1.4 * var(--vw)); }
.ho204__introCopy .eng { font-size: calc(30 * var(--vw)); }

/* Shoes List (KV / Outro 공용) */
.ho204__shoes { display: flex; gap: calc(30 * var(--vw)); align-items: flex-start; justify-content: center; }
.ho204__shoesItem { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--vw)); }
.ho204__shoesThumb { width: calc(275 * var(--vw)); height: calc(185 * var(--vw)); }
.ho204__shoesThumb img { object-fit: contain; mix-blend-mode: multiply; } /* PNG에 구워진 흰 배경을 크림/화이트 지면에 녹임 */
.ho204__shoesTag { display: inline-flex; align-items: center; justify-content: center; height: calc(22 * var(--vw)); padding: 0 calc(8 * var(--vw)) ; border-radius: calc(4 * var(--vw)); background: var(--ho-dark); }
.ho204__shoesTag span { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(20 * var(--vw)); letter-spacing: calc(-0.2 * var(--vw)); color: var(--ho-creamT); line-height: 1; margin-top: calc(6 * var(--vw)); }
.ho204__shoesCode { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(36 * var(--vw)); letter-spacing: calc(-0.36 * var(--vw)); color: var(--ho-dark); line-height: 1.2; }

/* ===== 03. Time Section (공통) ===== */
.ho204__time { display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding: calc(60 * var(--vw)) 0 calc(120 * var(--vw)); }
.ho204__time--sunset { background: var(--ho-dark); }
.ho204__time--night { background: var(--ho-taupe); }
.ho204__time--morning { background: var(--ho-cream); }
.ho204__time--sunset, .ho204__time--night { color: var(--ho-creamT); }
.ho204__time--morning { color: var(--ho-dark); }

.ho204__timeHead { position: relative; width: calc(1810 * var(--vw)); }
/* [NB2024-12986] 타임라벨 PNG 교체 (시안 Book Condensed Italic 웹폰트 부재). 폭=시안값, 높이=원 라인박스 40 유지(object-fit) */
.ho204__timeLabel { display: block; height: calc(40 * var(--vw)); object-fit: contain; object-position: left center; margin-left: calc(6 * var(--vw)); }
.ho204__time--sunset .ho204__timeLabel { width: calc(126.67 * var(--vw)); }
.ho204__time--night .ho204__timeLabel { width: calc(114.67 * var(--vw)); }
.ho204__time--morning .ho204__timeLabel { width: calc(150.67 * var(--vw)); }
.ho204__timeClock { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(60 * var(--vw)); line-height: 1.1; letter-spacing: calc(-0.6 * var(--vw)); margin-top: calc(15 * var(--vw)); }
.ho204__timeDesc { position: absolute; left: calc(298 * var(--vw)); top: calc(58 * var(--vw)); font-size: calc(24 * var(--vw)); line-height: calc(38 * var(--vw)); letter-spacing: calc(-1.2 * var(--vw)); white-space: nowrap; }
.ho204__timeDesc .eng { font-size: calc(26 * var(--vw)); }
.ho204__timeBrand { position: absolute; right: 0; top: calc(50 * var(--vw)); font-weight: 700; font-size: calc(28 * var(--vw)); line-height: calc(44 * var(--vw)); letter-spacing: calc(-1.4 * var(--vw)); white-space: nowrap; }
.ho204__timeBrand .eng { font-weight: 700; font-size: calc(30 * var(--vw)); }
.ho204__timeLine { display: block; width: 100%; height: 1px; margin-top: calc(10 * var(--vw)); background: currentColor; opacity: 0.5; }
/* 영상 placeholder (영상 전달 시 iframe/video 로 교체) */
.ho204__video { position: relative; width: calc(1810 * var(--vw)); aspect-ratio: 16 / 9; overflow: hidden; } /* [NB2024-13071] 영상(16:9)에 밴드 맞춤 - 좌우 pillarbox 제거 (기존 840h=2.155:1) */
.ho204__video iframe, .ho204__video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 0; object-fit: cover; }
.ho204__videoPh { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(120 * var(--vw)); height: calc(120 * var(--vw)); border-radius: 50%; background: rgba(90, 90, 90, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M15 12l14 8-14 8z' fill='white'/%3E%3C/svg%3E") no-repeat center / calc(40 * var(--vw)); }

/* 사진 콜라주 (Sunset / Night) */
.ho204__collage { position: relative; width: calc(1810 * var(--vw)); height: calc(1120 * var(--vw)); }
.ho204__collage .ho204__photo { position: absolute; overflow: hidden; background: #c2c2c2; }
.ho204__photo--main { width: calc(740 * var(--vw)); height: calc(1020 * var(--vw)); }
.ho204__photo--sub1 { width: calc(680 * var(--vw)); height: calc(480 * var(--vw)); }
.ho204__photo--sub2 { width: calc(340 * var(--vw)); height: calc(460 * var(--vw)); }
.ho204__caption { position: absolute; display: flex; flex-direction: column; gap: calc(12 * var(--vw)); align-items: flex-start; width: calc(560 * var(--vw)); }
.ho204__colorTag { display: inline-flex; align-items: center; justify-content: center; height: calc(22 * var(--vw)); padding: 0 calc(8 * var(--vw)); border-radius: calc(4 * var(--vw)); background: var(--ho-creamT); }
.ho204__colorTag span { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(20 * var(--vw)); letter-spacing: calc(-0.2 * var(--vw)); color: var(--ho-dark); line-height: 1; margin-top:  calc(6 * var(--vw));}
.ho204__colorName { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(60 * var(--vw)); line-height: 1.1; letter-spacing: calc(-0.6 * var(--vw)); margin-bottom: calc(4 * var(--vw)); }
.ho204__colorDesc { font-size: calc(24 * var(--vw)); line-height: calc(38 * var(--vw)); letter-spacing: calc(-1.2 * var(--vw)); }
.ho204__code { position: absolute; font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(28 * var(--vw)); line-height: 1.1; letter-spacing: calc(-0.28 * var(--vw)); }

/* Sunset 배치 */
.ho204__collage--sunset .ho204__photo--main { left: 0; top: 0; }
.ho204__collage--sunset .ho204__photo--sub1 { left: calc(1130 * var(--vw)); top: calc(120 * var(--vw)); }
.ho204__collage--sunset .ho204__photo--sub2 { left: calc(860 * var(--vw)); top: calc(660 * var(--vw)); }
.ho204__collage--sunset .ho204__caption { left: calc(1250 * var(--vw)); top: calc(775 * var(--vw)); }
.ho204__collage--sunset .ho204__code--left { left: calc(3 * var(--vw)); top: calc(1040 * var(--vw)); }
.ho204__collage--sunset .ho204__code--right { left: calc(640 * var(--vw)); top: calc(1040 * var(--vw)); }

/* Night 배치 (좌우 반전) */
.ho204__collage--night .ho204__photo--main { left: calc(1070 * var(--vw)); top: 0; }
.ho204__collage--night .ho204__photo--sub1 { left: 0; top: calc(120 * var(--vw)); }
.ho204__collage--night .ho204__photo--sub2 { left: calc(610 * var(--vw)); top: calc(660 * var(--vw)); }
.ho204__collage--night .ho204__caption { left: 0; top: calc(775 * var(--vw)); }
.ho204__collage--night .ho204__code--left { left: calc(1073 * var(--vw)); top: calc(1040 * var(--vw)); }
.ho204__collage--night .ho204__code--right { right: 0; top: calc(1040 * var(--vw)); text-align: right; }

/* Morning 배치 (2단 flex) */
.ho204__morning { display: flex; align-items: center; justify-content: space-between; width: calc(1630 * var(--vw)); }
.ho204__morningL { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--vw)); }
.ho204__morningL .ho204__photo { width: calc(720 * var(--vw)); height: calc(980 * var(--vw)); overflow: hidden; background: #9e9e9e; }
.ho204__morningCodes { position: relative; width: calc(720 * var(--vw)); font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(28 * var(--vw)); line-height: 1.1; letter-spacing: calc(-0.28 * var(--vw)); }
.ho204__morningCodes .r { position: absolute; right: 0; top: 0; }
.ho204__morningR { display: flex; flex-direction: column; align-items: flex-start; gap: calc(60 * var(--vw)); width: calc(790 * var(--vw)); }
.ho204__morningCap { display: flex; flex-direction: column; gap: calc(12 * var(--vw)); align-items: flex-start; }
.ho204__morningPair { display: flex; gap: calc(20 * var(--vw)); align-items: flex-end; width: 100%; }
.ho204__morningPair .ho204__photo { width: calc(385 * var(--vw)); height: calc(560 * var(--vw)); overflow: hidden; background: #8e8e8e; }
.ho204__time--morning .ho204__colorTag { background: var(--ho-dark); }
.ho204__time--morning .ho204__colorTag span { color: var(--ho-cream); }
.ho204__time--morning .ho204__colorName { color: var(--ho-dark); }

/* ===== 04. Outro ===== */
.ho204__outro { display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--vw)); padding: calc(120 * var(--vw)) 0; background: #fff; color: var(--ho-dark); }
.ho204__outroImg { width: calc(1200 * var(--vw)); height: calc(720 * var(--vw)); overflow: hidden; background: #737373; }
.ho204__outroText { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--vw)); width: calc(1200 * var(--vw)); text-align: center; }
.ho204__outroTitle { font-family: 'ITCGaramondStd', serif; font-weight: 700; font-size: calc(60 * var(--vw)); line-height: 1.1; letter-spacing: calc(-0.6 * var(--vw)); }
.ho204__outroCopy p { font-size: calc(24 * var(--vw)); line-height: calc(38 * var(--vw)); letter-spacing: calc(-1.2 * var(--vw)); }

/* ===== 05. Bottom KV / Logo ===== */
.ho204__kvBottom { width: 100%; height: calc(892 * var(--vw)); background: #bfbfbf; overflow: hidden; }
.ho204__kvBottom img { object-position: center; }
.ho204__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(332 * var(--vw)); background: #fff; }
.ho204__logo img { width: calc(114 * var(--vw)); height: calc(52 * var(--vw)); object-fit: contain; }

/* scrollFadeInMotion :: 공통 유틸 */
.jsScrollFadeInImg { opacity: 0; transform: translateY(calc(40 * var(--vw))); transition: opacity 1.2s ease, transform 1.2s ease; }
.jsScrollFadeInImg.on { opacity: 1; transform: translateY(0); }