@charset "utf-8";

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

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

/* ============================================================
 * 고학년 책가방 기획전 (NB2024-12613) PC  (--vw / 1920 기준)
 * 값은 Figma(RCGaUgVQRiz46xkWTWUjq1 / 30:4) 기준. 슬라이스 수급 대기.
 * ============================================================ */
.imc, .imc__content { width: 100%; background: #F4F4F4; }

.gbp {
    width: 100%;
    overflow-x: clip;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: #1A2024;
    --serif: 'ITCGaramondStd', serif;
}
.gbp * { box-sizing: border-box; }
.gbp img { display: block; width: 100%; }
.gbp__sec { position: relative; }
.gbp__serifTitle { font-family: var(--serif); font-weight: 400; text-align: center; letter-spacing: -0.01em; line-height: 1.1; color: #1A2024; }
.en{font-family:'ProximaNova';}

/* 색상칩 (제품 영역 / 원형 ellipse 29x28) — Figma 정확색 */
.gbp__chip { display: inline-block; width: calc(29 * var(--vw)); height: calc(28 * var(--vw)); border-radius: 50%; vertical-align: middle; }
.gbp__chip--beige { background: #F3E2D1; }
.gbp__chip--lightblue { background: #A8C0D9; }
.gbp__chip--black { background: #1A2024; }
.gbp__chip--ivory { background: #F4F4F4; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.gbp__chip--charcoal { background: #636363; }
.gbp__chip--lightgray { background: #ACACAC; }
.gbp__chip--lightgray { background: #ACACAC; }
.gbp__chip--khaki { background: #5E7267; }
.gbp__chip--violet { background: #B1AFE0; }


/* 색상 스와치 (비교표 / 사각 27x27) — Figma 정확색 */
.gbp__sw { display: inline-block; width: calc(27 * var(--vw)); height: calc(27 * var(--vw)); vertical-align: middle; }
.gbp__sw--beige { background: #EDDFD2; }
.gbp__sw--lightblue { background: #CBE5F5; }
.gbp__sw--black { background: #000000; }
.gbp__sw--ivory { background: #FFFDF3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.gbp__sw--charcoal { background: #737373; }
.gbp__sw--lightgray { background: #C3C3C3; }
.gbp__sw--khaki { background: #5E7267; }
.gbp__sw--violet { background: #B1AFE0; }

/* 01. KV */
.gbp__kv { padding-bottom: calc(160 * var(--vw)); }
.gbp__kvVisual { display: flex; }
.gbp__kvVisual img { height: calc(960 * var(--vw)); object-fit: cover; }
.gbp__kvImg--l { width: 47.1875%; }  /* 906/1920 */
.gbp__kvImg--r { width: 52.8125%; }  /* 1014/1920 */
.gbp__kvCopy { text-align: center; padding-top: calc(60 * var(--vw)); }
.gbp__kvTitle {
    font-family: var(--serif); font-weight: 400; font-size: calc(90 * var(--vw)); line-height: 1.1; letter-spacing: -0.025em;
    background: linear-gradient(90deg, #C3C1D0 0%, #326D89 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    margin-bottom: calc(20 * var(--vw));
}
.gbp__kvDesc { font-size: calc(28 * var(--vw)); line-height: calc(44 * var(--vw)); letter-spacing: -0.05em; color: #1A2024; }

/* 02. 브랜드 인트로 (비주얼 통슬라이스 + 타이틀 오버레이) */
.gbp__intro { padding-bottom: calc(160 * var(--vw)); }
.gbp__introVisual { width: 100%; }
.gbp__introHead { position: absolute; top: calc(138 * var(--vw)); left: 0; right: 0; text-align: center; }
.gbp__introTitle { font-size: calc(54 * var(--vw)); }
.gbp__introSub { margin-top: calc(12 * var(--vw)); font-size: calc(24 * var(--vw)); color: #1A2024; }

/* 03. Technology */
.gbp__tech { padding-bottom: calc(120 * var(--vw)); }
.gbp__techHead { text-align: center; }
.gbp__techTitle { font-size: calc(54 * var(--vw)); margin-bottom: calc(12 * var(--vw)); }
.gbp__techDesc { font-size: calc(24 * var(--vw)); line-height: calc(40 * var(--vw)); letter-spacing: -0.05em; color: #1A2024; }
.gbp__techList { display: flex; justify-content: center; gap: calc(50 * var(--vw)); margin-top: calc(60 * var(--vw)); }
.gbp__techList li { width: calc(124 * var(--vw)); text-align: center; }
.gbp__techIcon {
    display: flex; align-items: center; justify-content: center;
    width: calc(124 * var(--vw)); height: calc(124 * var(--vw)); margin: 0 auto calc(10 * var(--vw));
    border-radius: calc(24 * var(--vw));
    background: linear-gradient(145deg, #FFFFFF 0%, #A6B9C3 100%);
}
.gbp__techIcon img { object-fit: contain; }
.gbp__techKo { display: block; font-size: calc(17 * var(--vw)); font-weight: 400; letter-spacing: -0.05em; color: #063853; }
.gbp__techEn { display: block; margin-top: calc(2 * var(--vw)); font-size: calc(18 * var(--vw)); font-weight: 800; letter-spacing: -0.04em; color: #063853; }

/* 04·06·08·10. 제품 (좌: 비주얼+색상칩 / 우: 정보) */
.gbp__prod { display: block; }
.gbp__prodInner { display: flex; gap: calc(60 * var(--vw)); padding: calc(144 * var(--vw)) calc(64 * var(--vw)) calc(80 * var(--vw)); }
.gbp__prodLeft { flex: none; width: calc(744 * var(--vw)); }
.gbp__prodVisual { width: calc(744 * var(--vw)); height: calc(744 * var(--vw)); overflow: hidden; }
.gbp__prodVisual img, .gbp__prodVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.gbp__prodColors { display: flex; gap: calc(40 * var(--vw)); margin-top: calc(40 * var(--vw)); justify-content: center; }
.gbp__prodColors li { display: flex; align-items: center; gap: calc(11 * var(--vw)); font-size: calc(24 * var(--vw)); font-weight: 800; letter-spacing: -0.05em; color: #1A2024; }
.gbp__prodInfo { flex: 1; margin-top: calc(38 * var(--vw)); }
.gbp__prodName { line-height: 1; font-size: calc(43 * var(--vw)); font-weight: 800; letter-spacing: -0.03em; color: #1A2024; }
.gbp__prodSpec { font-family:'ProximaNova'; display: flex; justify-content: center; align-items: center; margin-top: calc(30 * var(--vw)); width: calc(181 * var(--vw)); height: calc(51 * var(--vw)); border-radius: 4rem; line-height: calc(36 * var(--vw)); font-size: calc(26 * var(--vw)); font-weight: 800; }
.gbp__prodTagline { margin-top: calc(30 * var(--vw)); font-size: calc(24 * var(--vw)); line-height: 1.55; color: #1A2024; }
.gbp__prodTagline b { font-weight: 800; }
.gbp__prodFeats { display: flex; gap: calc(26 * var(--vw)); margin-top: calc(40 * var(--vw)); }
.gbp__prodFeats li { display: flex; justify-content: center; align-items: center; flex-direction: column; width: calc(312 * var(--vw)); border-radius: calc(8 * var(--vw)); padding: calc(20 * var(--vw)) 0; }
.gbp__featImg { display: block; width: calc(280 * var(--vw)); height: calc(280 * var(--vw)); border-radius: calc(10 * var(--vw));overflow: hidden; }
.gbp__featImg img { width: 100%; height: 100%; object-fit: contain; }
.gbp__prodFeats p { margin-top: calc(24 * var(--vw)); font-size: calc(20 * var(--vw)); line-height: calc(30 * var(--vw)); letter-spacing: -0.05em; text-align: center; }
/* 제품별 배경(섹션 fill@0.5 over white) / 카드·뱃지 컬러 */
.gbp__prod--s { background: #808080; }
.gbp__prod--s .gbp__prodSpec { background: #000000; color: #fff; }
.gbp__prod--s .gbp__prodFeats li { background: #000000; }
.gbp__prod--s .gbp__prodFeats p { color: #fff; }
.gbp__prod--m { background: #E9E9E9; }
.gbp__prod--m .gbp__prodSpec { background: #304E65; color: #fff; }
.gbp__prod--m .gbp__prodFeats li { background: #304E65; }
.gbp__prod--m .gbp__prodFeats p { color: #fff; }
.gbp__prod--m2 { background: #D4D4D4; }
.gbp__prod--m2 .gbp__prodSpec { background: #919191; color: #fff; }
.gbp__prod--m2 .gbp__prodFeats li { background: #919191; }
.gbp__prod--m2 .gbp__prodFeats p { color: #fff; }
.gbp__prod--l { background: #E1EEE0; }
.gbp__prod--l .gbp__prodSpec { background: #BFDFBC; color: #1A2024; }
.gbp__prod--l .gbp__prodFeats li { background: #BFDFBC; }
.gbp__prod--l .gbp__prodFeats p { color: #1A2024; }

/* 05·07·09·11. 모델컷 밴드 (좌: 작은 3장 무한롤 / 우: 큰 1장 고정) */
.gbp__band { padding: calc(120 * var(--vw)) 0; }
.gbp__bandInner { display: flex; align-items: center; gap: calc(60 * var(--vw)); padding: 0 calc(58 * var(--vw)); }
.gbp__bandRollWrap { flex: 1; min-width: 0; }
.gbp__bandRoll { width: 100%; overflow: hidden; }
.gbp__bandRoll .swiper-wrapper { align-items: center; transition-timing-function: linear; }
.gbp__bandRoll .swiper-slide { width: calc(456 * var(--vw)); height: calc(651 * var(--vw)); }
.gbp__bandRoll .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.gbp__bandFixed { flex: none; width: calc(704 * var(--vw)); }
.gbp__bandFixed img { width: 100%; height: calc(939 * var(--vw)); object-fit: cover; }
.gbp__bandCaption { margin-top: calc(24 * var(--vw)); padding-right: calc(40 * var(--vw));text-align: right; font-family: var(--serif); font-size: calc(22 * var(--vw)); color: #1A2024; }

/* 12. 비교표 */
.gbp__compare { padding-top: calc(120 * var(--vw)); }
.gbp__compareHead { text-align: center; margin-bottom: calc(64 * var(--vw)); }
.gbp__compareTitle { font-size: calc(54 * var(--vw)); margin-bottom: calc(12 * var(--vw)); }
.gbp__compareSub { font-size: calc(24 * var(--vw)); letter-spacing: -0.05em; color: #1A2024; }
.gbp__compareTableWrap { width: calc(1312 * var(--vw)); margin: 0 auto; overflow-x: auto; }
.gbp__compareTable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gbp__colHead { width: calc(160 * var(--vw)); }
.gbp__compareTable th, .gbp__compareTable td { text-align: center; padding: calc(15 * var(--vw)) calc(8 * var(--vw)); border-bottom: 1px solid #000; vertical-align: middle; }
.gbp__compareTable thead td, .gbp__compareTable thead th { border-bottom: 2px solid #000; vertical-align: bottom; padding-bottom: calc(24 * var(--vw)); }
.gbp__compareThumb { display: block; width: calc(238 * var(--vw)); margin: 0 auto calc(18 * var(--vw)); }
.gbp__compareName { display: block; font-size: calc(28 * var(--vw)); font-weight: 900; letter-spacing: -0.04em; color: #000; }
.gbp__compareName .en { font-size: calc(30 * var(--vw)); }
.gbp__compareTable tbody th { font-size: calc(23 * var(--vw)); font-weight: 700; letter-spacing: -0.04em; color: #000; text-align: left; }
.gbp__compareTable tbody td { font-size: calc(24 * var(--vw)); font-weight: 500; letter-spacing: -0.02em; color: #000; }
.gbp__compareTable tbody tr:nth-child(3) td { font-size: calc(22 * var(--vw)); letter-spacing: -0.05em; white-space: nowrap; padding-left: calc(4 * var(--vw)); padding-right: calc(4 * var(--vw)); }
.gbp__compareTable tbody tr:nth-child(8) td { font-size: calc(22 * var(--vw)); letter-spacing: -0.045em; white-space: nowrap; }
.gbp__compareTable td.en {font-weight: 500;}
.gbp__compareTable td .gbp__sw {border-radius: 4rem; border: 1px solid #D4D4D4;}
.gbp__compareTable td .gbp__sw + .gbp__sw { margin-left: 0 calc(4 * var(--vw)); }

/* 13. NB 로고 푸터 */
.gbp__footer { padding: calc(140 * var(--vw)) 0 calc(77 * var(--vw)); text-align: center; }
.gbp__footer img { width: calc(170 * var(--vw)); margin: 0 auto; }