@charset "utf-8"; /* ============================================================================ 뉴트리미 리뉴얼 공통 CSS — 2026-11-14 - 기준 시안: 피그마 EVHLxoov2NmsSgVvFkJ3IT 「전체 리뉴얼 디자인」(442:133) NM2/Header 443:51 · NM2/Footer 444:71 · NM2/Floating 444:458 모바일 헤더 744:13210 · 모바일 푸터 744:13529 · 하단 고정 버튼 776:14092 · 햄버거 758:13699 - 값은 시안에 연결된 웹셀러_라이브러리 스타일을 그대로 옮겼다(스타일 이름은 주석). - 구간: 1024px 이상 = PC, 1023px 이하 = 모바일 - 불러오는 곳: _modules/common/html_header.html ( 앞) ========================================================================== */ :root { --nm-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; /* 웹셀러_라이브러리 색 스타일 */ --nm-font-white: #FFFFFF; /* Font/01_White */ --nm-font-black: #111111; /* Font/02_black */ --nm-font-sub: #505050; /* Font/03_Sub */ --nm-font-info: #767676; /* Font/04_info */ --nm-font-disabled: #999999; /* Font/05_Disabled */ --nm-icon-black: #2A2A37; /* Icon/02_black */ --nm-icon-sub: #545461; /* Icon/03_Sub */ --nm-bg-white: #FFFFFF; /* BG/White_Color */ --nm-bg-light: #F7F7FB; /* BG/Light_Color */ --nm-line-light: #F1F1F5; /* Line/Light_Color */ --nm-line-regular: #E5E5EC; /* Line/Regular_Color · Button_Select_Input/Line_Gray */ --nm-shadow-top: 1px 2px 8px rgba(17, 17, 17, .08); /* Shadow/TOP_Shadow 8% (#11111114, 1·2, 8) */ /* 프로젝트 변수(피그마 nm/·brand/) */ --nm-brand-primary: #00926f; /* nm/brand-primary */ --nm-brand-coral: #ec7867; /* brand/coral */ --nm-brand-cream-bg: #f5f7f1; /* nm/brand-cream-bg */ --nm-brand-mint-bg: #e6f4f1; /* nm/brand-mint-bg */ --nm-brand-dark: #00755a; /* nm/brand-dark (회사 소개 약력 진초록 카드) */ --nm-text-1a: #1a1a1a; /* nm/text-1a1a1a */ --nm-text-333: #333333; --nm-text-555: #555555; --nm-text-666: #666666; --nm-text-777: #777777; --nm-text-888: #888888; --nm-line-dd: #dddddd; --nm-line-ee: #eeeeee; --nm-bg-f4: #f4f4f4; --nm-bg-f8: #f8f8f8; --nm-sticky-h: 96px; /* 모바일 하단 고정 버튼 바 높이(위 선 1 + 12 + 버튼 54 + 28 ≒ 95.4) */ } /* ── 공통 ─────────────────────────────────────────────────────────────── */ .nm-inner { box-sizing: border-box; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; } /* 1920 화면에서 내용 폭 1280 (시안 좌우 여백 320) */ .nm-blind { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; } @media (min-width: 1024px) { .nm-only-mo { display: none !important; } } @media (max-width: 1023px) { .nm-only-pc { display: none !important; } } /* 라이브러리 Button_Default(흰 바탕·테두리, 28 높이) — 푸터 전화상담/톡상담 */ .nm-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; height: 28px; padding: 5px 10px; border: 1px solid var(--nm-line-regular); border-radius: 2px; background: var(--nm-bg-white); font-family: var(--nm-font); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: -0.3px; color: var(--nm-font-black); text-decoration: none; white-space: nowrap; cursor: pointer; } /* PC/Caption/C2_KR_Md_12 */ .nm-btn-line:hover, .nm-btn-line:focus { color: var(--nm-font-black); } /* ============================================================================ 헤더 — layout_header/standard.html ========================================================================== */ .nm-header { position: relative; z-index: 200; background: var(--nm-bg-white); font-family: var(--nm-font); color: var(--nm-font-black); -webkit-font-smoothing: antialiased; } .nm-header *, .nm-header *::before, .nm-header *::after { box-sizing: border-box; } .nm-header a { text-decoration: none; } .nm-header li { list-style: none; } /* ul·li 여백은 common.css 초기화(0)를 그대로 쓴다 — 여기서 ul 여백을 다시 0 으로 두면 .nm-gnb 왼쪽 간격 40 이 덮인다 */ .nm-header img { max-width: none; } /* 유틸 줄 (443:52) — 높이 36, 오른쪽 정렬, 간격 20 */ .nm-util { display: flex; align-items: center; justify-content: flex-end; gap: 20px; height: 36px; margin: 0; padding: 0; } .nm-util a, .nm-util span { display: block; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: -0.3px; color: var(--nm-font-info); white-space: nowrap; } /* PC/Caption/C2_KR_Rg_12 · Font/04_info */ .nm-util a:hover { color: var(--nm-font-black); } .nm-util .nm-util__benefit, .nm-util .nm-util__benefit:hover { font-weight: 500; color: var(--nm-brand-coral); } /* C2_KR_Md_12 · brand/coral */ /* 메뉴 줄 (라이브러리 GNB 443:59) — 위 36 ~ 아래 선 113, 아래 선 1px #F1F1F5 (443:114) */ .nm-header__bar { border-bottom: 1px solid var(--nm-line-light); } .nm-header__row { display: flex; align-items: center; justify-content: space-between; height: 77px; } .nm-header__left { display: flex; align-items: center; min-width: 0; } .nm-header__ham { display: block; flex: 0 0 28px; width: 28px; height: 28px; } .nm-header__ham img { display: block; width: 28px; height: 28px; } .nm-header__logo { display: block; flex: 0 0 auto; margin: 0 0 0 24px; padding: 0; font-size: 0; line-height: 0; } .nm-header__logo a, .nm-header__logo img { display: block; width: 116px; height: 36px; } /* 로고 443:101 — 116×36 */ .nm-header__bar .nm-header__logo { width: 113px; } /* 시안: 로고 자리(숨은 글자) 폭 113 → 메뉴 시작 x=525. 로고 그림 116 은 3px 넘쳐 보인다(시안과 같음) */ .nm-gnb { display: flex; align-items: center; gap: 24px; margin: 0 0 0 40px; padding: 0; } .nm-gnb a { display: block; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--nm-font-black); white-space: nowrap; } /* PC/Body/B1_EN_Rg_16 · Font/02_black */ .nm-gnb a:hover, .nm-gnb a:focus { color: var(--nm-font-black); } .nm-header__right { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; } .nm-header__icons { display: flex; align-items: center; gap: 24px; } .nm-header__icon { position: relative; display: block; width: 28px; height: 28px; } .nm-header__icon img { display: block; width: 28px; height: 28px; } /* 장바구니 개수 — 시안에 없음(기능 목록 M-01). 가장 가까운 라이브러리 값(brand/coral·C2 12px)으로 작게 붙임 */ .nm-header__cnt { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--nm-brand-coral); color: var(--nm-font-white); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; } /* [맞춤영양제 추천받기] (443:102, 라이브러리 Button_Default 산호색) — 높이 36, 8·12, 둥근 100 */ .nm-btn-reco { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 8px 12px; border-radius: 100px; background: var(--nm-brand-coral); font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-font-white); white-space: nowrap; } /* PC/Body/B4_KR_Md_13 · Font/01_White */ .nm-btn-reco:hover, .nm-btn-reco:focus { color: var(--nm-font-white); } /* 검색(기존 #searchModule 그대로, 위치·아이콘만 바꿈) */ .nm-header #searchModule.resp_top_search { display: block; position: relative; top: auto; right: auto; width: 28px; height: 28px; margin: 0; z-index: 210; } /* extend_common.css:76 #searchModule{display:none}(지금 운영 PC 는 검색 숨김) → 시안대로 보이게 */ .nm-header #searchModule a.btn_search_open { display: block; width: 28px; height: 28px; margin: 0; text-indent: 0; background: none; overflow: hidden; } .nm-header #searchModule a.btn_search_open img { display: block; width: 28px; height: 28px; } .nm-header #searchModule .search_ver2 { top: -6px; } /* 모바일 헤더 (744:13210) — 높이 56, 좌우 20, 로고 84×26, 메뉴 아이콘 20×2 막대 3개(간격 5) */ .nm-header__mo { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; background: var(--nm-bg-white); } .nm-header__mo .nm-header__logo { margin: 0; } .nm-header__mo .nm-header__logo a, .nm-header__mo .nm-header__logo img { width: 84px; height: 26px; } .nm-burger { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 20px; overflow: hidden; } .nm-burger i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--nm-text-1a); } /* ============================================================================ 햄버거 패널 — _modules/common/layout_side.html (AJAX /common/ajax_mobile_layout_side) PC ☰ 도 같은 패널(시안 없음 → 같은 패널 규칙) ========================================================================== */ #layout_side.layout_side { width: 430px; max-width: 100%; padding-bottom: 0; background: var(--nm-bg-white); } #side_close.side_close { display: none !important; } /* 패널 안에 닫기(X)가 있어서 옛 바깥 X 는 숨김 */ .nm-drawer { font-family: var(--nm-font); color: var(--nm-font-black); -webkit-font-smoothing: antialiased; } .nm-drawer *, .nm-drawer *::before, .nm-drawer *::after { box-sizing: border-box; } .nm-drawer a { text-decoration: none; } .nm-drawer li { list-style: none; } .nm-drawer img { max-width: none; } .nm-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; } /* 758:13654 */ .nm-drawer__logo, .nm-drawer__logo img { display: block; width: 84px; height: 26px; } .nm-drawer__close { display: block; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; } .nm-drawer__close img { display: block; width: 24px; height: 24px; } .nm-drawer__menu { margin: 0; padding: 16px 0 0; } /* 758:13659 */ .nm-drawer__item { display: flex; align-items: center; height: 60px; padding: 18px 24px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.45px; color: var(--nm-font-black); white-space: nowrap; } /* NM2/메인M/DrawerItem · PC/Title/T5_KR_Sb_18 · Font/02_black */ .nm-drawer__item:hover, .nm-drawer__item:focus { color: var(--nm-font-black); } .nm-drawer__item.is-primary, .nm-drawer__item.is-primary:hover { color: var(--nm-brand-primary); } .nm-drawer__divider { padding: 12px 24px; } /* 758:13672 */ .nm-drawer__divider::before { content: ''; display: block; height: 1px; background: var(--nm-line-regular); } /* ============================================================================ 푸터 — layout_footer/standard.html ========================================================================== */ .nm-footer { background: var(--nm-bg-white); font-family: var(--nm-font); color: var(--nm-font-info); -webkit-font-smoothing: antialiased; } .nm-footer *, .nm-footer *::before, .nm-footer *::after { box-sizing: border-box; } .nm-footer a { text-decoration: none; } .nm-footer ul, .nm-footer li, .nm-footer dl, .nm-footer dt, .nm-footer dd, .nm-footer p { margin: 0; padding: 0; list-style: none; } .nm-footer img { max-width: none; } /* PC (444:72, 라이브러리 Footer C_type) — 위아래 56, 세로 간격 32 */ .nm-footer__pc { padding: 56px 0; } .nm-footer__pc > .nm-inner { display: flex; flex-direction: column; gap: 32px; } .nm-footer__cs { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-radius: 8px; background: var(--nm-bg-light); } /* BG/Light_Color */ .nm-footer__cs-tel { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--nm-font-black); white-space: nowrap; } .nm-footer__cs-tel .is-ko { letter-spacing: -0.45px; } /* PC/Title/T5_KR_Sb_18 */ .nm-footer__cs-tel a { color: var(--nm-font-black); } /* PC/Title/T5_EN_Sb_18 */ .nm-footer__cs-btns { display: flex; align-items: center; gap: 6px; } .nm-footer__body { display: flex; align-items: center; gap: 40px; } .nm-footer__info { display: flex; flex-direction: column; gap: 32px; flex: 1 1 0; min-width: 0; } .nm-footer__lines { display: flex; flex-direction: column; gap: 8px; } .nm-footer__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nm-footer__line > span, .nm-footer__line > a { font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-info); } /* PC/Body/B3_KR_Md_14 · Font/04_info */ .nm-footer__line > .nm-footer__corp { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--nm-font-black); } /* PC/Body/B4_EN_Sb_13 */ .nm-footer__line > .nm-footer__grow { flex: 1 1 0; min-width: 1px; } .nm-footer__line > .nm-footer__bar { display: block; flex: 0 0 1px; width: 1px; height: 10px; background: var(--nm-line-regular); } /* Line/Regular_Color */ .nm-footer__line > .nm-footer__biz { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; letter-spacing: -0.325px; color: var(--nm-font-sub); } /* 라이브러리 Button_Text · PC/Caption/C1_KR_Md_13 · Font/03_Sub */ .nm-footer__biz img { display: block; width: 16px; height: 16px; } .nm-footer__copy { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--nm-font-info); white-space: nowrap; } /* PC/Body/B3_EN_Rg_14 */ .nm-footer__side { display: flex; align-items: flex-start; gap: 100px; flex: 0 0 auto; } .nm-footer__links { display: flex; align-items: flex-start; gap: 72px; } .nm-footer__links ul { display: flex; flex-direction: column; gap: 12px; } .nm-footer__links a { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -0.28px; color: var(--nm-font-info); white-space: nowrap; } /* PC/Body/KR_14_Sb */ .nm-footer__links a:hover { color: var(--nm-font-black); } .nm-footer__sns { display: flex; align-items: center; gap: 8px; } .nm-footer__sns a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100px; background: var(--nm-bg-light); } .nm-footer__sns img { display: block; width: 20px; height: 20px; } .nm-footer__sns img.is-youtube { width: 16.25px; height: 11.5104px; } /* 20×20 틀 안의 Lozenge(16.25×11.51) */ /* 모바일 (744:13529) — 40·20, 세로 간격 28 */ .nm-footer__mo { display: flex; flex-direction: column; gap: 28px; padding: 40px 20px; } .nm-footer__mo-logo, .nm-footer__mo-logo img { display: block; width: 84px; height: 26px; } .nm-footer__mo-cs { display: flex; flex-direction: column; gap: 6px; } .nm-footer__mo-cs .is-tit { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--nm-text-777); } .nm-footer__mo-cs .is-tel, .nm-footer__mo-cs .is-tel a { font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.28px; color: var(--nm-text-1a); } .nm-footer__mo-cs .is-txt { font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: -0.13px; color: var(--nm-text-666); } .nm-footer__mo-cs .is-mail, .nm-footer__mo-cs .is-mail a { font-size: 13px; font-weight: 400; line-height: 18px; color: var(--nm-text-666); } .nm-footer__mo-btns { display: flex; gap: 8px; } .nm-footer__mo-btns a { display: flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; height: 48px; border-radius: 24px; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.15px; white-space: nowrap; } .nm-footer__mo-btns a.is-fill, .nm-footer__mo-btns a.is-fill:hover { background: var(--nm-brand-primary); color: var(--nm-font-white); } .nm-footer__mo-btns a.is-line, .nm-footer__mo-btns a.is-line:hover { border: 1px solid var(--nm-line-dd); color: var(--nm-text-1a); } .nm-footer__mo-hr { height: 1px; background: var(--nm-line-ee); } .nm-footer__mo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nm-footer__mo-links { display: flex; align-items: center; gap: 14px; } .nm-footer__mo-links a { font-size: 13px; font-weight: 500; line-height: 18px; letter-spacing: -0.13px; color: var(--nm-text-666); white-space: nowrap; } .nm-footer__mo-links a.is-strong { font-weight: 700; color: var(--nm-text-1a); } .nm-footer__mo-links i { display: block; width: 1px; height: 10px; background: var(--nm-line-dd); } .nm-footer__mo-sns { display: flex; gap: 8px; } .nm-footer__mo-sns a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 18px; background: var(--nm-bg-f4); } .nm-footer__mo-sns img { display: block; width: 18px; height: 18px; } .nm-footer__mo-biz { display: flex; flex-direction: column; gap: 6px; } .nm-footer__mo-biz .is-corp { margin-bottom: 10px; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -0.14px; color: var(--nm-text-1a); } /* 시안: 회사명 → 간격 6 → 빈칸 4 → 간격 6 */ .nm-footer__mo-biz dl { display: flex; gap: 12px; font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: -0.12px; } .nm-footer__mo-biz dt { flex: 0 0 104px; width: 104px; color: var(--nm-text-888); } .nm-footer__mo-biz dd { flex: 1 1 0; min-width: 0; color: var(--nm-text-555); word-break: keep-all; overflow-wrap: anywhere; } .nm-footer__mo-copy { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--nm-text-888); } /* ============================================================================ 떠 있는 버튼 (444:458) — TOP(라이브러리 Top_Button A_Type·White_Shadow·Round) 톡상담은 채널톡 기본 런처(partner/channeltalk)가 그 아래에 뜬다 ========================================================================== */ .nm-float { position: fixed; right: 24px; bottom: 92px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .nm-float__top { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 56px; height: 56px; padding: 8px; border: 1px solid var(--nm-line-regular); border-radius: 24px; background: var(--nm-bg-white); box-shadow: var(--nm-shadow-top); cursor: pointer; } .nm-float__top img { display: block; width: 20px; height: 20px; max-width: none; } /* ============================================================================ 모바일 하단 고정 버튼 (776:14092) — 상품상세·장바구니·주문서에서는 템플릿에서 뺀다 ========================================================================== */ .nm-sticky, .nm-sticky-spacer { display: none; } @media (max-width: 1023px) { .nm-sticky-spacer { display: block; height: var(--nm-sticky-h); } .nm-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; box-sizing: border-box; padding: 12px 20px 28px; border-top: 1px solid var(--nm-line-regular); background: var(--nm-bg-white); font-family: var(--nm-font); } .nm-sticky__btn { display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; width: 100%; padding: 16px 20px; border-radius: 100px; background: var(--nm-brand-primary); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-white); text-decoration: none; white-space: nowrap; } /* PC/Body/B1_KR_Sb_16 · Font/01_White */ .nm-sticky__btn:hover, .nm-sticky__btn:focus { color: var(--nm-font-white); } .nm-sticky__btn img { display: block; width: 20px; height: 20px; max-width: none; } .nm-float { right: 20px; bottom: 92px; } body.nm-has-sticky .nm-float { bottom: calc(var(--nm-sticky-h) + 12px + 68px); } /* 하단 고정 바 + 간격 12 + 채널톡 런처(56)+간격(12) 위 */ } /* ── 2026-11-14 리뉴얼 3-3: 안내 상자(라이브러리 기준 NM2/NoticeBox — BG/Light_Color · PC/Body/B3_KR_Rg_14 · Font/03_Sub, 라운드 8) ── */ .nm-notice-box { margin-top: 16px; padding: 16px 20px; border-radius: 8px; background: var(--nm-bg-light); font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-sub); word-break: keep-all; } .nm-gcs-coupon-name { display: block; margin-top: 2px; font-size: 13px; color: var(--nm-font-sub); } /* ── 2026-11-14 리뉴얼 3-4: 마이페이지 정기구독 다음 결제 요약(라이브러리 NoticeBox 값) ── */ .nm-gcs-next { margin: 0 0 24px; padding: 20px 24px; border-radius: 8px; background: var(--nm-bg-light); font-size: 15px; line-height: 1.6; color: var(--nm-font-sub); } .nm-gcs-next strong { color: var(--nm-font-black, #111); font-weight: 600; } .nm-gcs-next__tit { margin-bottom: 4px; font-size: 18px; font-weight: 600; color: var(--nm-font-black, #111); } .nm-gcs-next__sub { display: block; font-size: 13px; color: var(--nm-font-sub); } .nm-gcs-next__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; } .nm-gcs-next__form input[type=date] { height: 40px; padding: 0 12px; border: 1px solid var(--nm-line-regular, #E5E5EC); border-radius: 4px; } .nm-gcs-next-line { margin-top: 4px; font-size: 13px; color: var(--nm-brand-primary); } /* ── 2026-11-14 리뉴얼 4단계: 하위 화면 본문 폭 = 시안 그리드 1280(내용) — common.css 의 1260·여백 40 대신. 메인은 main/index.html 이 전체 폭으로 덮어씀 ── */ @media (min-width: 1024px) { #layout_wrap #layout_body { box-sizing: border-box; max-width: 1320px; padding-left: 20px; padding-right: 20px; } } /* extend_common.css(본문 안에서 나중에 로드)의 #layout_body 1230 을 이기도록 id 2개 */ .nm-page-title { padding-left: 0 !important; padding-right: 0 !important; } /* ── 2026-11-14 리뉴얼 4단계: 화면 제목(NM2/PageTitle 452:678 — C2 12·H2 40 SemiBold, Font/04_info·Font/02_black) ── */ .nm-page-title { box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: 80px 20px 48px; } .nm-page-title__path { margin: 0 0 12px; font-size: 12px; line-height: 1.45; letter-spacing: -0.3px; color: #767676; white-space: pre; } .nm-page-title__tit { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.3; letter-spacing: -1px; color: var(--nm-font-black); } #catalog_page .search_nav, #catalog_page .searchFilterSelected_wrap, #catalog_page #recommendResult, #search_result_page .title_container, #search_result_page .search_nav, #search_result_page .searchFilterSelected_wrap, #search_result_page #recommendResult { display: none !important; } /* 시안에 없는 경로 선택·옛 제목·선택 필터·추천 영역(정렬 줄은 남김) */ #catalog_page .search_filter_wrap, #search_result_page .search_filter_wrap { margin-top: 0 !important; } /* ── 04 검색결과 검색창(458:18581 — 라이브러리 Input_Default + 검색 버튼, 높이 48) ── */ .nm-search-box { display: flex; gap: 12px; box-sizing: border-box; max-width: 1280px; margin: 0 auto 40px; } .nm-search-box__input { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 48px; margin: 0; padding: 14px 16px; border: 1px solid var(--nm-line-regular); border-radius: 4px; background: #fff; } .nm-search-box__input input { flex: 1 1 auto; min-width: 0; height: 20px; margin: 0; padding: 0; border: 0; outline: 0; background: none; font-family: var(--nm-font); font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-black); } .nm-search-box__btn { flex: 0 0 auto; box-sizing: border-box; height: 48px; padding: 14px 16px; border: 0; border-radius: 4px; background: var(--nm-brand-primary); font-family: var(--nm-font); font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: -0.35px; color: #fff; cursor: pointer; } /* ── 개수·정렬 한 줄(453:696 — B1 16 SemiBold / B3 14, Tap_Text, 아래 Line/black) ── */ .nm-list-bar { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; max-width: 1280px; margin: 0 auto 40px; padding-bottom: 20px; border-bottom: 1px solid var(--nm-font-black); } .nm-list-bar .allcnt-wrap { flex: 1 1 auto; margin: 0 !important; padding: 0 !important; border: 0 !important; } .nm-list-bar .allcnt-wrap .total, .nm-list-bar .allcnt-wrap .total .num { font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.4px; color: var(--nm-font-black) !important; text-decoration: none; } .nm-list-bar #filteredItemSorting { display: block !important; position: static !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .nm-list-bar #filteredItemSorting .item_order { display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 14px !important; } .nm-list-bar #mobileSortingSelected { display: none !important; } .nm-list-bar #filteredItemSorting .list { display: flex !important; gap: 20px; height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none; } .nm-list-bar #filteredItemSorting .list > li { flex: 0 0 auto; float: none !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .nm-list-bar #filteredItemSorting label { display: inline-flex !important; align-items: center; white-space: nowrap; height: auto !important; margin: 0 !important; padding: 11px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: -0.35px; color: #767676 !important; cursor: pointer; } .nm-list-bar #filteredItemSorting label.active { font-weight: 600 !important; color: var(--nm-brand-primary) !important; } .nm-list-bar #filteredItemSorting label input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* ── 상품 카드(NM2/ProductCard 444:177 — 사진 302·라운드 12, B4 13, B3 14, System/Red #D50000, Font/05 #999, 담기 = Button 36·Line_Gray) ── */ .searched_item_display .nm-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0; list-style: none; } .searched_item_display .nm-pgrid > li.nm-pcard { float: none; display: flex; flex-direction: column; gap: 16px; width: auto; margin: 0; padding: 0; border: 0; } .nm-pcard__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--nm-bg-light); } .nm-pcard__img > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; } .nm-pcard__badge { position: absolute; top: 8px; left: 3px; width: 74px; height: auto; } .nm-pcard__info { display: flex; flex-direction: column; gap: 8px; } .nm-pcard__name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-font-black); text-decoration: none; word-break: break-all; } .nm-pcard__price { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; font-size: 14px; line-height: 1.45; } .nm-pcard__rate { font-weight: 600; color: #D50000; } .nm-pcard__sale { display: inline-flex; gap: 1px; color: var(--nm-font-black); letter-spacing: -0.35px; } .nm-pcard__sale b { font-weight: 600; letter-spacing: 0; } .nm-pcard__consumer { color: #999; text-decoration: line-through; } .nm-pcard__cart { display: flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; width: 100%; height: 36px; margin-top: auto; padding: 8px 12px; border: 1px solid var(--nm-line-regular); border-radius: 3px; background: #fff; font-family: var(--nm-font); font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-font-black); cursor: pointer; } @media (max-width: 1199px) { .searched_item_display .nm-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { /* 모바일: 본문 틀 여백 10(common.css) + 10 = 화면 왼쪽 20 으로 제목·정렬·카드를 맞춘다 */ .nm-page-title { padding: 40px 10px 24px !important; } .nm-page-title__tit { font-size: 28px; } .nm-list-bar { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 10px 24px; padding-bottom: 12px; } .nm-list-bar .allcnt-wrap { position: static !important; order: -1; flex: 0 0 auto; width: auto !important; } .nm-search-box { margin: 0 10px 24px; } .nm-list-bar #filteredItemSorting, .nm-list-bar #filteredItemSorting .item_order { width: 100% !important; } .nm-list-bar #filteredItemSorting .list { position: static !important; flex-wrap: wrap; gap: 0 14px; width: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* 기존 모바일 드롭다운 대신 줄 안에 펼침 */ .nm-list-bar #filteredItemSorting label { padding: 6px 0 !important; } .searched_item_display .nm-pgrid { padding: 0 10px; } } @media (max-width: 767px) { .searched_item_display .nm-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } } /* ════════ 2026-11-14 리뉴얼 4단계: 05/06 상품상세(460:19007 · 460:21941) ════════ */ /* 두 열: 사진 600 + 간격 80 + 정보 600 = 1280 */ #goods_view .goods_thumbs_spec { display: flex; align-items: flex-start; gap: 80px; } #goods_view .goods_thumbs_spec:after { display: none; } #goods_view #goods_thumbs { flex: 0 0 600px; width: 600px !important; max-width: 600px; float: none !important; margin: 0 !important; padding: 0 !important; } #goods_view #goods_spec { position: relative; flex: 0 0 600px; width: 600px !important; float: none !important; margin: 0 !important; padding: 0 !important; } #goods_view #goods_thumbs .slides_container { width: 600px; height: 600px; overflow: hidden; border-radius: 12px; background: var(--nm-bg-light); } #goods_view #goods_thumbs .viewImgWrap img { display: block; width: 600px; height: 600px; object-fit: cover; } #goods_view #goods_thumbs #btn_zoom_view, #goods_view .pagination_wrap .prev, #goods_view .pagination_wrap .next { display: none !important; } #goods_view .pagination_wrap { margin: 12px 0 0 !important; padding: 0 !important; } #goods_view .pagination_wrap .count, #goods_view .pagination_wrap .pagination_area { margin: 0 !important; padding: 0 !important; width: auto !important; } #goods_view .pagination_wrap .pagination { display: flex !important; gap: 8px; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal; } #goods_view .pagination_wrap .pagination > li { float: none !important; width: 76px !important; height: 76px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid transparent; border-radius: 8px; } #goods_view .pagination_wrap .pagination > li.current { border-color: var(--nm-font-black); } #goods_view .pagination_wrap .pagination > li img { width: 100%; height: 100%; object-fit: cover; } /* 이름 줄·한 줄 설명(이름 32 SemiBold H3, 설명 16 Font/03) + 공유·찜(24, 간격 12) */ .nm-pd-title { margin: 0 0 20px !important; padding: 0 76px 0 0 !important; border: 0 !important; text-align: left !important; } .nm-pd-title .name { margin: 0 !important; font-size: 32px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.8px; color: var(--nm-font-black) !important; } .nm-pd-title .summary { margin: 20px 0 0 !important; font-size: 16px !important; line-height: 1.4 !important; letter-spacing: -0.4px; color: var(--nm-font-sub) !important; } .nm-pd-title .seq_num, .nm-pd-title .detail_icons { display: none !important; } #goods_spec .sns_wish { position: absolute !important; top: 0; right: 0; display: flex; gap: 12px; margin: 0 !important; padding: 0 !important; } #goods_spec #btnSnsShare, #goods_spec #wishimg { display: block; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: url(../images/renewal/ico_share24.svg) center / 24px 24px no-repeat !important; font-size: 0 !important; text-indent: -9999px; overflow: hidden; } #goods_spec #wishimg { background-image: url(../images/renewal/ico_heart24.svg) !important; } #goods_spec #wishimg[usewish="y"] { background-image: url(../images/renewal/ico_heart24_on.svg) !important; } /* 가격(40 SemiBold + 원 20) · 구분선 */ #goods_spec .goods_spec_sections { margin: 0 !important; padding: 0 !important; border: 0 !important; } #goods_spec .deatil_price_area { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; margin: 0 0 20px !important; padding: 0 0 20px !important; border-bottom: 1px solid var(--nm-line-regular) !important; } #goods_spec .deatil_price_area .deatil_sale_rate { position: static !important; order: 1; margin: 0 !important; padding: 0 !important; background: none !important; } #goods_spec .deatil_price_area .deatil_sale_rate .inner, #goods_spec .deatil_price_area .deatil_sale_rate .num { font-size: 24px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #D50000 !important; } /* 시안 06 할인율 24 */ #goods_spec .deatil_price_area .sale_price { order: 2; margin: 0 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.5px; color: var(--nm-font-black) !important; } #goods_spec .deatil_price_area .sale_price .num { margin-right: 8px; font-size: 40px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -1px; } #goods_spec .deatil_price_area .org_price { order: 3; margin: 0 0 6px !important; font-size: 16px !important; color: #999 !important; } #goods_spec .deatil_price_area .org_price s, #goods_spec .deatil_price_area .org_price .num { font-size: 16px !important; color: #999 !important; } #goods_spec .deatil_price_area .btn_open_small, #goods_spec .deatil_price_area #priceDetail { order: 4; } /* 정보 줄(NM2/ProductInfoRow — 항목 96 · 14 Font/04, 내용 14 Medium, 줄 높이 40) */ #goods_spec .goods_spec_sections > li:not(.deatil_price_area) { margin: 0 !important; padding: 0 !important; border: 0 !important; } #goods_spec .detail_spec_table { display: flex !important; align-items: flex-start; gap: 16px; margin: 0 !important; padding: 10px 0 !important; border: 0 !important; } #goods_spec .detail_spec_table > li.th { flex: 0 0 96px; width: 96px !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.45 !important; letter-spacing: -0.35px; color: #767676 !important; } #goods_spec .detail_spec_table > li.td { flex: 1 1 auto; margin: 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 500; line-height: 1.45 !important; letter-spacing: -0.35px; color: var(--nm-font-black) !important; } #goods_spec .detail_spec_table.sub { padding-top: 0 !important; } #goods_spec .goods_spec_halbu, #goods_spec .goods_spec_like, #goods_spec .goods_spec_mobile { display: none !important; } /* 옵션 상자(#F7F7FB 라운드 12 패딩 20/24 · 상품옵션 14 Medium · Select_Default · 총 상품금액 16/24) */ #goods_spec .goods_buy_sections { margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } #goods_spec .goods_option_select_area, #goods_spec .goods_price_area { margin: 0 !important; padding: 20px 24px 0 !important; border: 0 !important; border-radius: 12px 12px 0 0; background: var(--nm-bg-light) !important; } #goods_spec .goods_price_area { padding: 12px 24px 20px !important; border-radius: 0 0 12px 12px; } #goods_spec .goods_option_select_area select { box-sizing: border-box; width: 100% !important; height: 48px !important; padding: 0 44px 0 16px !important; border: 1px solid var(--nm-line-regular) !important; border-radius: 4px !important; background: #fff url(../images/renewal/ico_select20.svg) right 16px center / 20px 20px no-repeat !important; font-size: 14px !important; color: var(--nm-font-sub) !important; -webkit-appearance: none; appearance: none; } #goods_spec .goods_price_area .total_goods_price, #goods_spec .goods_price_area #total_goods_price { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.6px; color: var(--nm-font-black) !important; } /* 버튼(정기구독 주 버튼 위 · 장바구니·구매하기 흰 버튼, 라운드 100, 16 SemiBold) + 정기구독 시 금액 줄 */ #goods_spec .goods_buttons_area { margin: 20px 0 0 !important; padding: 0 !important; } #goods_spec .goods_buttons_section > li { display: flex; flex-direction: column; gap: 10px; } #goods_spec .goods_buttons_section .nm-gcs-first { order: 1; margin: 0; text-align: center; font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-sub); } #goods_spec .nm-gcs-first strong { margin: 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: var(--nm-brand-primary); } #goods_spec .nm-gcs-first em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--nm-brand-primary); } #goods_spec .goods_buttons_section .nm-gcs-btns { order: 2; padding: 0 !important; } #goods_spec .goods_buttons_section .basic_btn_area:not(.nm-gcs-btns) { order: 3; display: flex; gap: 10px; } #goods_spec .goods_buttons_section .basic_btn_area { margin: 0 !important; padding: 0 !important; } #goods_spec .goods_buttons_section .basic_btn_area > li { flex: 1 1 0; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } #goods_spec .goods_buttons_section .basic_btn_area .btn_resp { box-sizing: border-box; width: 100% !important; height: 54px !important; padding: 16px 20px !important; border: 1px solid var(--nm-line-regular) !important; border-radius: 100px !important; background: #fff !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.4px; color: var(--nm-font-black) !important; } #goods_spec .goods_buttons_section .nm-gcs-btns .gcsbillingSetBtn { border-color: var(--nm-brand-primary) !important; background: var(--nm-brand-primary) !important; color: #fff !important; } #goods_spec .goods_npay { margin-top: 8px !important; text-align: center; } /* 쿠폰 받기 띠(NM2/CouponDownload) */ #goods_spec .coupon_area { margin: 20px 0 0 !important; } /* 경로(12 Font/04, 위 40 · 높이 81) */ .nm-pd-path { box-sizing: border-box; max-width: 1280px; height: auto; margin: 0 auto; padding: 40px 0 24px; font-size: 12px; line-height: 1.45; letter-spacing: -0.3px; color: #767676; white-space: pre; } /* 정보 줄 「자세히」 = 라이브러리 Button_Text(13 Medium + 화살표 16), 줄 오른쪽 끝 */ #goods_spec .detail_spec_table > li.td { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 6px; } #goods_spec .detail_spec_table .btn_open_small { order: 9; margin: 0 0 0 auto !important; height: 20px !important; min-height: 0 !important; padding: 0 18px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: url(../images/renewal/ico_arrow16_right.svg) right center / 16px 16px no-repeat !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: -0.325px; color: var(--nm-font-black) !important; box-shadow: none !important; } /* 정보 줄 안의 다른 버튼(쿠폰받기·할인정보 등)도 같은 글자 링크 모양 → 줄 높이 40 */ #goods_spec .detail_spec_table button, #goods_spec .detail_spec_table a.btn_resp { height: 20px !important; min-height: 0 !important; margin: 0 0 0 auto !important; padding: 0 18px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: url(../images/renewal/ico_arrow16_right.svg) right center / 16px 16px no-repeat !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--nm-font-black) !important; box-shadow: none !important; } #goods_spec .detail_spec_table > li.th button { display: none !important; } .nm-pd-title .name { padding: 0 !important; } .nm-pd-title .summary, .nm-pd-title .summary * { font-size: 16px !important; line-height: 1.4 !important; } /* 배송 줄 한 줄: 「택배(주문 시 결제) · 4,000원(…)」 + 오른쪽 자세히 */ #goods_spec .goods_spec_shipping .detail_spec_table.sub > li.td, #goods_spec .goods_spec_shipping .detail_spec_table.sub > li.td * { white-space: nowrap; } #goods_spec .goods_spec_shipping { position: relative !important; } #goods_spec .goods_spec_shipping .detail_spec_table.sub { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; } #goods_spec .goods_spec_shipping .detail_spec_table.sub > li.th { display: none !important; } #goods_spec .goods_spec_shipping .detail_spec_table.sub > li.td { display: inline-flex !important; } #goods_spec .goods_spec_shipping .btn_open_small { position: absolute !important; top: 10px; right: 0; } /* 3차: 자세히는 줄 오른쪽 끝(절대 위치), 배송 줄 줄바꿈 없음, 선물·빈 버튼 숨김, 쿠폰 띠 = NM2/CouponDownload, 탭 숫자·작은 사진 테두리·후기 별 없음 */ #goods_spec .goods_spec_sections > li { position: relative !important; } #goods_spec .detail_spec_table button, #goods_spec .detail_spec_table a.btn_resp, #goods_spec .detail_spec_table .btn_open_small { position: absolute !important; top: 10px; right: 0; margin: 0 !important; } #goods_spec .detail_spec_table > li.td { padding-right: 64px !important; } #goods_spec .goods_spec_shipping .detail_spec_table > li.td { flex-wrap: nowrap !important; } #goods_spec .goods_buttons_section .list_present, #goods_spec .goods_buttons_section .basic_btn_area > li:empty { display: none !important; } #goods_spec .goods_spec_customer_ev img, #goods_spec .goods_spec_customer_ev [class*="star"] { display: none !important; } #goods_view .pagination_wrap .pagination > li, #goods_view .pagination_wrap .pagination > li.current { border-color: transparent !important; } #goods_tabs .goods_information_tabs > a .num { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; } #goods_spec .resp_coupon_list { margin: 0 !important; padding: 0 !important; list-style: none; } #goods_spec .couponDownload.resStyle { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; cursor: pointer; } #goods_spec .couponDownload.resStyle > ul { display: flex !important; align-items: center; justify-content: space-between; margin: 0 !important; padding: 20px 24px !important; border: 0 !important; border-radius: 12px; background: var(--nm-bg-light) !important; } #goods_spec .couponDownload.resStyle > ul > li { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } #goods_spec .couponDownload .text { display: flex !important; flex-direction: column; gap: 4px; } #goods_spec .couponDownload .title { font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.4px; color: var(--nm-font-black) !important; } #goods_spec .couponDownload .descr { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; letter-spacing: -0.3px; color: #767676 !important; } #goods_spec .couponDownload .sales { display: flex !important; align-items: center; gap: 8px; } #goods_spec .couponDownload .coupon_img, #goods_spec .couponDownload .coupon_img .num { padding: 0 !important; border: 0 !important; background: none !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.5px; color: var(--nm-brand-primary) !important; } #goods_spec .couponDownload .sales::after { content: ''; display: block; width: 24px; height: 24px; background: url(../images/renewal/ico_download24.svg) center / 24px 24px no-repeat; } #goods_spec .couponDownload .bul { display: none !important; } #goods_spec .detail_spec_table button::before, #goods_spec .detail_spec_table button::after, #goods_spec .detail_spec_table .btn_open_small::before, #goods_spec .detail_spec_table .btn_open_small::after { content: none !important; display: none !important; } #goods_spec .goods_spec_coupon .detail_spec_table button, #goods_spec .goods_spec_coupon .detail_spec_table .btn_resp { display: none !important; } /* 시안 쿠폰 줄은 「자세히」 없음 */ #goods_spec .couponDownload .text::after, #goods_spec .couponDownload .title::after, #goods_spec .couponDownload .text::before, #goods_spec .couponDownload .title::before { content: none !important; display: none !important; } #goods_spec .couponDownload .sales { flex: 0 0 auto; overflow: visible !important; } #goods_spec .couponDownload.resStyle > ul { overflow: visible !important; } /* 상세 탭(Tap_Text 4칸 320×64 — T5 18, 선택 = 브랜드 SemiBold + 아래 2, 줄 Line/Regular) */ #goods_contents_quick { margin-top: 80px; } #goods_tabs, #goods_tabs .resp_area { border: 0 !important; background: #fff !important; } #goods_tabs .resp_area { box-sizing: border-box; width: auto !important; max-width: 1280px !important; margin: 0 auto !important; padding: 0 !important; } #goods_tabs .goods_information_tabs { width: 100% !important; } #goods_tabs .goods_information_tabs { display: flex !important; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--nm-line-regular) !important; } #goods_tabs .goods_information_tabs > a { flex: 1 1 0; display: flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 64px !important; margin: 0 0 -1px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 2px solid transparent !important; background: none !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: -0.45px; color: #767676 !important; text-decoration: none; } #goods_tabs .goods_information_tabs > a.current { font-weight: 600 !important; color: var(--nm-brand-primary) !important; border-bottom-color: var(--nm-brand-primary) !important; } #goods_tabs .goods_information_tabs > a .num { margin-left: 4px; font-size: inherit !important; color: inherit !important; } /* 상품 설명 글(460:19302 — 제목 20 SemiBold, 내용 16 Font/03) */ .nm-pd-desc { box-sizing: border-box; max-width: 1280px; margin: 0 auto !important; padding: 80px 0 120px !important; background: none !important; } .nm-pd-desc h2 { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.5px; color: var(--nm-font-black); } .nm-pd-desc p { margin: 0; font-size: 16px; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-sub); } @media (max-width: 1023px) { #goods_view .goods_thumbs_spec { flex-direction: column; gap: 24px; } #goods_view #goods_thumbs, #goods_view #goods_spec { flex: 1 1 auto; width: 100% !important; max-width: none; } #goods_view #goods_thumbs .slides_container, #goods_view #goods_thumbs .viewImgWrap img { width: 100%; height: auto; aspect-ratio: 1 / 1; } .nm-pd-title .name { font-size: 24px !important; } #goods_spec .deatil_price_area .sale_price .num { font-size: 32px !important; } .nm-pd-path { padding: 20px 10px 16px; } .nm-pd-desc { padding: 48px 10px 64px !important; } } /* ── 2026-11-14 리뉴얼 5단계: 10~14 회사 소개(피그마 10 CEO 인사말 458:18036 외) ── */ /* 회사 소개 탭 NM2/BrandTabs(457:18008 — 라이브러리 Tap_Text Line·Large 48: 위아래 13, B1 16 Medium Font/04_info, 선택 = SemiBold brand + 아래 2, 줄 Line/Light) */ .nm-co { font-family: var(--nm-font); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; } /* 헤더·푸터·메인과 같은 글꼴 다듬기, 한글은 띄어쓰기 단위 줄바꿈(시안과 같게) */ .nm-co-tabs { display: flex; align-items: flex-end; gap: 24px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; box-shadow: inset 0 -1px 0 var(--nm-line-light); } /* 피그마 선은 안쪽 선(높이에 안 더함) → inset 그림자 */ .nm-co-tabs a { flex: 0 0 auto; padding: 13px 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-info); text-decoration: none; white-space: nowrap; } .nm-co-tabs a.is-on { font-weight: 600; color: var(--nm-brand-primary); box-shadow: inset 0 -2px 0 var(--nm-brand-primary); } /* 인사말(585:14589 — 위아래 120, 글 열 간격 32 + 사진 카드 440×532) */ .nm-co .nm-co-greet { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 120px 0; } .nm-co .nm-co-greet__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; } .nm-co .nm-co-greet__text p { margin: 0; padding: 0; } .nm-co .nm-co-greet__mark { font-size: 64px; font-weight: 600; line-height: 44px; letter-spacing: -1.6px; color: var(--nm-brand-primary); } .nm-co .nm-co-greet__quote { font-size: 40px; font-weight: 600; line-height: 1.3; letter-spacing: -1px; color: var(--nm-font-black); } .nm-co .nm-co-greet__sub { font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; color: var(--nm-font-sub); } .nm-co .nm-co-greet__sub em { font-style: normal; color: var(--nm-brand-primary); } .nm-co .nm-co-greet__sign { display: flex; align-items: flex-end; gap: 12px; white-space: nowrap; } .nm-co .nm-co-greet__sign span { font-size: 16px; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-info); } .nm-co .nm-co-greet__sign strong { font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -0.8px; color: var(--nm-font-black); } /* 대표 사진 카드 NM2/메인A/FounderPortrait(502:14802 — 사진 칸 420×512 BG/Regular, 뒤 판 brand 20% 를 오른쪽 아래 20 어긋나게, 사진 396×481 아래 -9) */ .nm-co .nm-co-portrait { flex: 0 0 auto; position: relative; width: 440px; height: 532px; } .nm-co .nm-co-portrait__back { position: absolute; left: 20px; top: 20px; width: 420px; height: 512px; background: var(--nm-brand-primary); opacity: .2; } .nm-co .nm-co-portrait__box { position: absolute; left: 0; top: 0; width: 420px; height: 512px; overflow: hidden; background: var(--nm-line-light); } .nm-co .nm-co-portrait__box img { position: absolute; left: 50%; bottom: -9px; width: 396px; height: 481px; max-width: none; transform: translateX(-50%); object-fit: cover; } /* 대표 약력 C안(602:14217 — BG/Regular #F1F1F5 화면 전체 폭, 위 100·아래 120 / 제목 H2 40 + T5 18 간격 12 / 카드 3칸 400·간격 40, NM2/약력C/IconCard 601:14219) */ .nm-co .nm-co-bio { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 100px 0 120px; background: var(--nm-line-light); box-shadow: 0 0 0 100vmax var(--nm-line-light); clip-path: inset(0 -100vmax); } .nm-co .nm-co-bio__head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 56px; text-align: center; } .nm-co .nm-co-bio__head h3 { margin: 0; padding: 0; font-size: 40px; font-weight: 600; line-height: 1.3; letter-spacing: -1px; color: var(--nm-font-black); } .nm-co .nm-co-bio__head p { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.45px; color: var(--nm-font-sub); } .nm-co .nm-co-bio__cards { display: flex; align-items: flex-start; gap: 40px; } .nm-co .nm-co-card { flex: 0 0 400px; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; min-height: 429px; padding: 48px 36px; border-radius: 24px; background: var(--nm-bg-white); } .nm-co .nm-co-card__ico { display: block; width: 72px; height: 72px; max-width: none; object-fit: contain; } .nm-co .nm-co-card__tit { margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--nm-line-regular); font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; color: var(--nm-font-black); } /* 아래 선 = 시안의 「구분선」(위아래 간격 24) */ .nm-co .nm-co-card__list { margin: 0; padding: 0 0 0 24px; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-sub); } .nm-co .nm-co-card__list li { list-style: disc outside; margin: 0; padding: 0; } .nm-co .nm-co-card--dark { background: var(--nm-brand-dark); } .nm-co .nm-co-card--dark .nm-co-card__tit { color: var(--nm-font-white); border-bottom-color: rgba(255, 255, 255, .2); } /* Opacity/White_20% */ .nm-co .nm-co-card--dark .nm-co-card__list { color: rgba(255, 255, 255, .85); } /* Opacity/White_85% */ @media (max-width: 1023px) { /* 모바일 시안 없음 — PC 짜임을 한 열로 */ .nm-co-tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nm-co-tabs::-webkit-scrollbar { display: none; } .nm-co-tabs a { padding: 12px 0; font-size: 15px; } .nm-co .nm-co-greet { flex-direction: column; align-items: stretch; gap: 40px; padding: 56px 0; } .nm-co .nm-co-greet__text { gap: 20px; } .nm-co .nm-co-greet__mark { font-size: 48px; line-height: 32px; } .nm-co .nm-co-greet__quote { font-size: 24px; } .nm-co .nm-co-greet__sub { font-size: 18px; } .nm-co .nm-co-greet__sign strong { font-size: 24px; } .nm-co .nm-co-portrait { width: 100%; max-width: 440px; height: auto; aspect-ratio: 440 / 532; margin: 0 auto; } .nm-co .nm-co-portrait__back, .nm-co .nm-co-portrait__box { width: calc(100% - 20px); height: calc(100% - 20px); } .nm-co .nm-co-portrait__box img { width: 94.3%; height: auto; } .nm-co .nm-co-bio { padding: 56px 0 64px; } .nm-co .nm-co-bio__head { margin-bottom: 32px; } .nm-co .nm-co-bio__head h3 { font-size: 28px; } .nm-co .nm-co-bio__head p { font-size: 15px; } .nm-co .nm-co-bio__cards { flex-direction: column; align-items: stretch; gap: 16px; } .nm-co .nm-co-card { flex: 0 0 auto; width: 100%; min-height: 0; gap: 16px; padding: 32px 24px; border-radius: 16px; } .nm-co .nm-co-card__ico { width: 56px; height: 56px; } .nm-co .nm-co-card__tit { padding-bottom: 16px; font-size: 20px; } .nm-co .nm-co-card__list { font-size: 15px; } } /* 11 기업가치: 소개 2단(460:2136 — 위 100·아래 80, 간격 80, 제목 460 H2 40 / 설명 T5 18 Font/03_Sub) */ .nm-co .nm-co-intro { display: flex; align-items: flex-start; gap: 80px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 100px 0 80px; } .nm-co .nm-co-intro__tit { flex: 0 0 460px; margin: 0; padding: 0; font-size: 40px; font-weight: 600; line-height: 1.3; letter-spacing: -1px; color: var(--nm-font-black); } .nm-co .nm-co-intro__tit em { font-style: normal; color: var(--nm-brand-primary); } .nm-co .nm-co-intro__txt { flex: 1 1 0; min-width: 0; margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.45px; color: var(--nm-font-sub); } /* 가치 7가지 A안 지그재그(608:13500 — 위 120·아래 160, 두 단 간격 120, 단 안 간격 96, 오른쪽 단 위 220) */ .nm-co .nm-co-values { display: flex; align-items: flex-start; gap: 120px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 120px 0 160px; } .nm-co .nm-co-values__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 96px; } .nm-co .nm-co-values__col--right { padding-top: 220px; } /* NM2/가치2A/ShapeItem(607:13566 — 사진 · 간격 32 · 번호 H3 32 brand + 선 Line/Regular(간격 16) · 간격 24 · 제목 T3 24 · 간격 12 · 설명 B1 16 Font/03_Sub) */ .nm-co .nm-co-val { display: flex; flex-direction: column; gap: 32px; } .nm-co .nm-co-val__pic { display: block; position: relative; overflow: hidden; background: var(--nm-line-light); } .nm-co .nm-co-val__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .nm-co .nm-co-val__pic--half { width: 360px; height: 240px; border-radius: 0 120px 120px 0; } /* 반원 */ .nm-co .nm-co-val__pic--leaf { width: 360px; height: 240px; border-radius: 120px 0 120px 0; } /* 잎 */ .nm-co .nm-co-val__pic--circle { width: 260px; height: 260px; border-radius: 50%; } /* 원 */ .nm-co .nm-co-val__pic--arch { width: 240px; height: 300px; border-radius: 120px 120px 0 0; } /* 아치 */ .nm-co .nm-co-val__num { margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--nm-line-regular); font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -0.8px; color: var(--nm-brand-primary); } .nm-co .nm-co-val__tit { margin: 24px 0 0; padding: 0; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-co .nm-co-val__txt { margin: 12px 0 0; padding: 0; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-sub); } @media (max-width: 1023px) { /* 모바일 시안 없음 — 한 열, 01~07 순서(order) */ .nm-co .nm-co-intro { flex-direction: column; gap: 20px; padding: 48px 0 40px; } .nm-co .nm-co-intro__tit { flex: 0 0 auto; font-size: 26px; } .nm-co .nm-co-intro__txt { font-size: 15px; } .nm-co .nm-co-values { flex-direction: column; align-items: stretch; gap: 56px; padding: 32px 0 72px; } .nm-co .nm-co-values__col { display: contents; } .nm-co .nm-co-val { gap: 24px; } .nm-co .nm-co-val__pic--half, .nm-co .nm-co-val__pic--leaf { width: 100%; max-width: 360px; height: auto; aspect-ratio: 3 / 2; } .nm-co .nm-co-val__pic--half { border-radius: 0 999px 999px 0; } .nm-co .nm-co-val__pic--circle { width: 200px; height: 200px; } .nm-co .nm-co-val__pic--arch { width: 200px; height: 250px; border-radius: 100px 100px 0 0; } .nm-co .nm-co-val__num { padding-bottom: 12px; font-size: 26px; } .nm-co .nm-co-val__tit { margin-top: 16px; font-size: 20px; } .nm-co .nm-co-val__txt { font-size: 15px; } } /* 12 비전: 비전·목표·미션 A안 사진 스플릿형(639:13188 — 위 100·아래 140 / 사진 800×760 = 화면 왼쪽 끝 ~ 그리드 480, 오른쪽 모서리 24 / 간격 120 / 목록 680 세로 가운데) */ .nm-co .nm-co-vision { display: flex; align-items: center; gap: 120px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 100px 0 140px; } .nm-co .nm-co-vision__pic { flex: 0 0 480px; position: relative; height: 760px; } .nm-co .nm-co-vision__pic img { position: absolute; top: 0; right: 0; width: calc(480px + max(20px, (100vw - 1280px) / 2)); height: 100%; max-width: none; border-radius: 0 24px 24px 0; object-fit: cover; } /* 1920 에서 800 — 왼쪽으로 화면 끝까지(넘치는 부분은 화면 밖이라 가로 스크롤 없음) */ .nm-co .nm-co-vision__list { flex: 1 1 0; min-width: 0; border-bottom: 1px solid var(--nm-line-regular); } /* 끝 구분선 */ /* 목록 줄 NM2/비전A/ListRow(638:13220 — 위 구분선 Line/Regular + 위아래 40, 라벨 칸 112(위 8, B4_EN 13 SemiBold brand) | 제목 T3 24 · 간격 12 · 영문 B1_EN 16 Font/03_Sub) */ .nm-co .nm-co-vrow { display: flex; align-items: flex-start; gap: 24px; padding: 40px 0; border-top: 1px solid var(--nm-line-regular); } .nm-co .nm-co-vrow__label { flex: 0 0 112px; margin: 0; padding: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--nm-brand-primary); } .nm-co .nm-co-vrow__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .nm-co .nm-co-vrow__tit { margin: 0; padding: 0; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-co .nm-co-vrow__en { margin: 0; padding: 0; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--nm-font-sub); } @media (max-width: 1023px) { /* 모바일 시안 없음 — 사진 위, 목록 아래 */ .nm-co .nm-co-vision { flex-direction: column; align-items: stretch; gap: 32px; padding: 32px 0 64px; } .nm-co .nm-co-vision__pic { flex: 0 0 auto; height: auto; aspect-ratio: 800 / 760; } .nm-co .nm-co-vision__pic img { position: static; width: 100%; border-radius: 16px; } .nm-co .nm-co-vrow { flex-direction: column; gap: 8px; padding: 24px 0; } .nm-co .nm-co-vrow__label { flex: 0 0 auto; padding-top: 0; } .nm-co .nm-co-vrow__tit { font-size: 18px; } .nm-co .nm-co-vrow__en { font-size: 14px; } } /* 13 연혁: 소개(460:22304 — 위 100·아래 64, 간격 48, 일러스트 640×370 + 글 1040 가운데 T5 18 Font/03_Sub) */ .nm-co .nm-co-hintro { display: flex; flex-direction: column; align-items: center; gap: 48px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 100px 0 64px; } .nm-co .nm-co-hintro__img { display: block; width: 640px; height: 370px; max-width: 100%; object-fit: cover; } .nm-co .nm-co-hintro__txt { width: 1040px; max-width: 100%; margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.45px; text-align: center; color: var(--nm-font-sub); } /* 연도별(554:18192 — 위 80·아래 120 / 연도 블록 위아래 40·간격 32: 연도 240 H3 32 brand | 연표 선 24(세로선 2 Line/Regular, 점 16 brand + 흰 테두리 4) | 내용 줄 간격 4) + 오른쪽 위 사진 400×520 라운드 24 */ .nm-co .nm-co-hist { position: relative; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 80px 0 120px; } .nm-co .nm-co-hist__photo { position: absolute; top: 80px; right: 0; width: 400px; height: 520px; max-width: none; border-radius: 24px; object-fit: cover; } .nm-co .nm-co-year { display: flex; align-items: flex-start; gap: 32px; padding: 40px 0; } .nm-co .nm-co-year__y { flex: 0 0 240px; margin: 0; padding: 0; font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -0.8px; color: var(--nm-brand-primary); } .nm-co .nm-co-year__line { flex: 0 0 24px; align-self: stretch; position: relative; } .nm-co .nm-co-year__line::before { content: ''; position: absolute; left: 11px; top: -40px; bottom: -40px; width: 2px; background: var(--nm-line-regular); } /* 블록 위아래 여백까지 → 앞뒤 블록 선과 이어짐 */ .nm-co .nm-co-year:first-of-type .nm-co-year__line::before { top: 21px; } /* 첫 해: 점 가운데부터 */ .nm-co .nm-co-year:last-child .nm-co-year__line::before { bottom: auto; height: 61px; } /* 마지막 해: 점 가운데까지 */ .nm-co .nm-co-year__line::after { content: ''; position: absolute; left: 4px; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--nm-brand-primary); box-shadow: 0 0 0 4px var(--nm-bg-white); } .nm-co .nm-co-year__rows { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } /* 줄 NM2/HistoryRow(457:18021 — 위아래 8, 간격 24, 월 48 B1 SemiBold brand | 내용 B1 Regular Font/03_Sub) */ .nm-co .nm-co-year__rows li { display: flex; align-items: flex-start; gap: 24px; margin: 0; padding: 8px 0; list-style: none; font-size: 16px; line-height: 22px; letter-spacing: -0.4px; } /* 시안 줄 = 38(한 줄)·60·82 → 줄 높이 22(1.4 = 22.4 를 쓰면 블록마다 1~3px 늘어남) */ .nm-co .nm-co-year__m { flex: 0 0 48px; font-weight: 600; color: var(--nm-brand-primary); } .nm-co .nm-co-year__t { flex: 1 1 0; min-width: 0; font-weight: 400; color: var(--nm-font-sub); } @media (max-width: 1023px) { /* 모바일 시안 없음 — 사진은 목록 위, 연도 칸 좁게 */ .nm-co .nm-co-hintro { gap: 24px; padding: 40px 0 24px; } .nm-co .nm-co-hintro__img { width: 100%; height: auto; aspect-ratio: 640 / 370; } .nm-co .nm-co-hintro__txt { font-size: 15px; } .nm-co .nm-co-hist { padding: 24px 0 64px; } .nm-co .nm-co-hist__photo { position: static; display: block; width: 100%; height: 280px; margin-bottom: 16px; border-radius: 16px; } .nm-co .nm-co-year { gap: 12px; padding: 24px 0; } .nm-co .nm-co-year__y { flex: 0 0 56px; font-size: 20px; } .nm-co .nm-co-year__line::before { top: -24px; bottom: -24px; } .nm-co .nm-co-year:first-of-type .nm-co-year__line::before { top: 12px; } .nm-co .nm-co-year:last-child .nm-co-year__line::before { height: 36px; } .nm-co .nm-co-year__line::after { top: 4px; } .nm-co .nm-co-year__rows li { gap: 12px; padding: 4px 0; font-size: 14px; } .nm-co .nm-co-year__m { flex: 0 0 32px; } } /* 14 Contact: 오시는 길 C안 주소 강조 + 지도 카드형(655:13299 — BG/Regular 화면 전체 폭, 위 100·아래 140, 머리와 카드 간격 56 / 머리 간격 20) */ .nm-co .nm-co-contact { display: flex; flex-direction: column; align-items: center; gap: 56px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 100px 0 140px; background: var(--nm-line-light); box-shadow: 0 0 0 100vmax var(--nm-line-light); clip-path: inset(0 -100vmax); } .nm-co .nm-co-contact__head { display: flex; flex-direction: column; align-items: center; gap: 20px; } .nm-co .nm-co-contact__logo { display: block; width: 153px; height: 43px; max-width: none; object-fit: contain; } /* NM2/오시는길/Logo */ .nm-co .nm-co-chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 2px 7px; border: 1px solid var(--nm-brand-primary); border-radius: 100px; background: var(--nm-bg-white); font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: -0.275px; color: var(--nm-brand-primary); } /* 라이브러리 Chip(MO C3 11 Medium) — 시안 선은 안쪽이라 여백에서 1 뺌 → 35×22 */ .nm-co .nm-co-contact__addr { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -0.8px; text-align: center; color: var(--nm-font-black); white-space: nowrap; } .nm-co .nm-co-contact__pills { display: flex; gap: 12px; } /* 연락처 알약 NM2/오시는길C/ContactPill(652:13255 — 흰 바탕, 선 Line/Regular(안쪽), 라운드 999, 위아래 14·좌우 24, 간격 10 / 아이콘 20 brand / 라벨 B4_EN 13 SemiBold brand / 값 B1_EN 16) */ .nm-co .nm-co-pill { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 52px; padding: 14px 24px; border-radius: 999px; background: var(--nm-bg-white); box-shadow: inset 0 0 0 1px var(--nm-line-regular); text-decoration: none; white-space: nowrap; } /* 시안 노드 높이 52(위아래 14 + 내용) */ .nm-co .nm-co-pill img { display: block; width: 20px; height: 20px; } .nm-co .nm-co-pill__label { font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--nm-brand-primary); } .nm-co .nm-co-pill__val { font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--nm-font-black); } /* 지도 카드 NM2/오시는길C/MapCard(653:13241 — 흰 바탕 라운드 24, 위아래 48·좌우 64, 간격 40) */ .nm-co .nm-co-mapcard { display: flex; flex-direction: column; align-items: center; gap: 40px; box-sizing: border-box; width: 100%; padding: 48px 64px; border-radius: 24px; background: var(--nm-bg-white); } /* 약도 NM2/오시는길/Map(898:12968 — 880×571, 좌표는 시안 그대로) */ .nm-co .nm-co-map { position: relative; width: 880px; max-width: 100%; height: 571px; overflow: hidden; background: var(--nm-bg-white); } .nm-co .nm-co-map__in { position: absolute; left: 0; top: 0; width: 880px; height: 571px; transform-origin: 0 0; transform: scale(var(--nm-map-s, 1)); } .nm-co .nm-map-road { position: absolute; display: block; background: var(--nm-line-regular); } .nm-co .nm-map-rail { position: absolute; display: block; left: 726px; top: 0; width: 6px; height: 571px; background: #ef7c1c; } /* 3호선 선로(시안 값) */ .nm-co .nm-map-bldg { position: absolute; display: block; left: 318px; top: 168px; width: 170px; height: 140px; box-sizing: border-box; border: 2px solid #e3eeea; border-radius: 8px; background: var(--nm-brand-mint-bg); } /* 선 = 시안 nm/brand-mint-line */ .nm-co .nm-map-t { position: absolute; font-style: normal; line-height: 1.45; white-space: nowrap; color: var(--nm-text-333); } .nm-co .nm-map-t--b14 { font-size: 14px; font-weight: 600; letter-spacing: -0.35px; } .nm-co .nm-map-t--m12 { font-size: 12px; font-weight: 500; letter-spacing: -0.3px; } .nm-co .nm-map-t--r12 { font-size: 12px; font-weight: 400; letter-spacing: -0.3px; color: var(--nm-text-666); } .nm-co .nm-map-t--666 { color: var(--nm-text-666); } .nm-co .nm-map-t--white { color: var(--nm-font-white); } .nm-co .nm-map-t--orange { color: #ef7c1c; } .nm-co .nm-map-t--rot-l { transform: translate(-50%, -50%) rotate(-90deg); } /* 좌표 = 시안 칸 가운데 */ .nm-co .nm-map-t--rot-r { transform: translate(-50%, -50%) rotate(90deg); } .nm-co .nm-map-svg { position: absolute; display: block; max-width: none; } .nm-co .nm-map-dot { position: absolute; display: block; width: 8px; height: 8px; } .nm-co .nm-map-bubble { position: absolute; left: 303px; top: 92px; display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 10px 16px; border: 2px solid var(--nm-brand-primary); border-radius: 999px; background: var(--nm-bg-white); overflow: hidden; } /* 시안 렌더 높이 48 = 위아래 10 + 로고 24 + 선 2×2(꼬리가 아래 선에 붙음) */ .nm-co .nm-map-bubble img { display: block; width: 85px; height: 24px; max-width: none; object-fit: contain; } .nm-co .nm-map-bubble b { font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-brand-primary); white-space: nowrap; } .nm-co .nm-map-guide { position: absolute; left: 24px; top: 24px; padding: 8px 14px; border-radius: 999px; background: var(--nm-brand-primary); font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-font-white); white-space: nowrap; } /* 영문 주소 NM2/TextBlock 선형(457:18017 — 위 선 Line/black(안쪽), 위 24, 간격 12 / 제목 T3 24 / 본문 B1 16 Font/03_Sub) */ .nm-co .nm-co-tblock { align-self: stretch; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--nm-font-black); } .nm-co .nm-co-tblock__tit { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-co .nm-co-tblock__txt { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-sub); } @media (max-width: 1023px) { /* 모바일 시안 없음 — 약도는 스크립트가 상자 폭에 맞춰 줄임 */ .nm-co .nm-co-contact { gap: 32px; padding: 40px 0 64px; } .nm-co .nm-co-contact__addr { font-size: 20px; white-space: normal; } .nm-co .nm-co-contact__pills { flex-direction: column; align-items: stretch; width: 100%; } .nm-co .nm-co-pill { justify-content: center; } .nm-co .nm-co-mapcard { gap: 24px; padding: 20px 16px; border-radius: 16px; } .nm-co .nm-co-tblock__tit { font-size: 18px; } .nm-co .nm-co-tblock__txt { font-size: 14px; } } /* ── 2026-11-15 리뉴얼 5단계: 게시판 공용 — 검색 줄 NM2/SearchBar(457:18046 — 라이브러리 Select_Default 160 + Input_Default 300, 높이 42, 선 Button_Select_Input/Line_Gray, 라운드 3, B3 14 Font/03_Sub) ── */ .nm-search-bar { display: flex; align-items: center; gap: 8px; font-family: var(--nm-font); } .nm-search-bar__select, .nm-search-bar__input { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--nm-line-regular); border-radius: 3px; background: var(--nm-bg-white); } .nm-search-bar__select { width: 160px; } .nm-search-bar__select select { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0; outline: 0; background: none; -webkit-appearance: none; appearance: none; font-family: var(--nm-font); font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-sub); cursor: pointer; } .nm-search-bar__select img { flex: 0 0 auto; display: block; width: 20px; height: 20px; pointer-events: none; } .nm-search-bar__input { width: 300px; } .nm-search-bar__input input { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0; outline: 0; background: none; font-family: var(--nm-font); font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-black); } .nm-search-bar__input input::placeholder { color: var(--nm-font-sub); opacity: 1; } .nm-search-bar__input button { flex: 0 0 auto; display: block; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } .nm-search-bar__input button img { display: block; width: 16px; height: 16px; } /* 쪽 번호(460:26388 — 32 원, 간격 4, 선택 brand + 흰 글자, 나머지 Font/05_Disabled, 다음·이전 = 흰 원 + 선 Line/Regular + 화살표 16 Icon/04_info). 운영 {pagin} 마크업(a.on·a.next…) 그대로 꾸밈 */ .paging_navigation.nm-pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0; padding: 0 0 120px; font-size: 0; } .paging_navigation.nm-pager a, .paging_navigation.nm-pager strong { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; min-width: 0; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 100px; background: var(--nm-bg-white); font-family: var(--nm-font); font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--nm-font-disabled); text-indent: 0; text-decoration: none; } .paging_navigation.nm-pager a:hover { position: static; border: 0; background-color: var(--nm-bg-light); color: var(--nm-font-black); } .paging_navigation.nm-pager a.on, .paging_navigation.nm-pager strong { background: var(--nm-brand-primary); color: var(--nm-font-white) !important; cursor: default; } .paging_navigation.nm-pager a.prev, .paging_navigation.nm-pager a.next, .paging_navigation.nm-pager a.first, .paging_navigation.nm-pager a.last, .paging_navigation.nm-pager a.end, .paging_navigation.nm-pager a[rel] { overflow: hidden; font-size: 0; box-shadow: inset 0 0 0 1px var(--nm-line-regular); background: var(--nm-bg-white) url(../images/renewal/ico_arrow16_right_info.svg) no-repeat center / 16px 16px; } .paging_navigation.nm-pager a.prev, .paging_navigation.nm-pager a.first, .paging_navigation.nm-pager a[rel='prev'], .paging_navigation.nm-pager a[rel='first'] { transform: scaleX(-1); } .paging_navigation.nm-pager a > span { display: none; } .paging_navigation.nm-pager::after { display: none; } /* 공용 clearfix 가 flex 항목이 돼 간격 4 가 하나 더 생기던 것 */ /* 목록 버튼 등 알약 버튼(라이브러리 Button_Default Large — 흰 바탕, 선 Line/Regular, 라운드 100, 위아래 14·좌우 20, B3 14 SemiBold) */ .nm-btn-pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 13px 19px; border: 1px solid var(--nm-line-regular); border-radius: 100px; background: var(--nm-bg-white); font-family: var(--nm-font); font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-black); cursor: pointer; } /* ── 15 언론보도 목록(460:26050 — 검색 위 48·아래 8 오른쪽 맞춤 / 목록 위 48·아래 96, 카드 6칸 그리드: 처음 2개 628·나머지 410, 가로 24·세로 64) ── */ .nm-press-search { display: flex; justify-content: flex-end; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 48px 0 8px; } .nm-press-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 48px 0 96px; list-style: none; font-family: var(--nm-font); -webkit-font-smoothing: antialiased; } /* 기사 카드 NM2/회사A/PressCard(572:13657 — 사진(선 Line/Light, 라운드 16, 높이 256/380) · 간격 20 · 제목 T5 18/T3 24 SemiBold 한 줄 · 날짜 C1 13 Font/04_info · 요약 B3 14 Font/03_Sub 한 줄, 글 간격 8) */ .nm-press-card { grid-column: span 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; list-style: none; cursor: pointer; } .nm-press-card--big { grid-column: span 3; } .nm-press-card__pic { display: block; position: relative; box-sizing: border-box; height: 256px; overflow: hidden; border: 1px solid var(--nm-line-light); border-radius: 16px; background: var(--nm-bg-light); } .nm-press-card--big .nm-press-card__pic { height: 380px; } .nm-press-card__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .nm-press-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .nm-press-card__body p { margin: 0; padding: 0; } .nm-press-card .nm-press-card__tit { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.45px; color: var(--nm-font-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm-press-card--big .nm-press-card__tit { font-size: 24px; letter-spacing: -0.6px; } .nm-press-card .nm-press-card__date { font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-font-info); } .nm-press-card .nm-press-card__sum { font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm-press-empty { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 120px 0; text-align: center; font-size: 15px; color: var(--nm-font-info); } /* ── 16 언론보도 상세(460:26492 — 글 머리 위 64·아래 32 + 선 Line/black, 제목 H3 32 · 간격 16 · 정보 C1 13 / 본문 위 40, T5 18 Font/03_Sub, 문단 간격 28, 사진 라운드 12 / 이전글 위 64 / 버튼 위 40·아래 120) ── */ .nm-press-view { box-sizing: border-box; max-width: 1280px; margin: 0 auto; font-family: var(--nm-font); -webkit-font-smoothing: antialiased; } .nm-press-view .nm-press-head { display: flex; flex-direction: column; gap: 16px; padding: 64px 0 32px; border-bottom: 1px solid var(--nm-font-black); } .nm-press-view .nm-press-head__tit { margin: 0; padding: 0; font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -0.8px; color: var(--nm-font-black); } .nm-press-view .nm-press-head__meta { margin: 0; font-size: 13px; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-font-info); } .nm-press-view .board_detail_contents.nm-press-body { padding: 40px 0 0; font-size: 18px; line-height: 1.4; letter-spacing: -0.45px; color: var(--nm-font-sub); word-break: keep-all; overflow-wrap: anywhere; } .nm-press-view .nm-press-body p { margin: 0 0 28px; } .nm-press-view .nm-press-body p:has(> br:only-child) { display: none; } /* 에디터 빈 줄 — 문단 간격 28 로 대신 */ .nm-press-view .nm-press-body img { display: block; max-width: 100% !important; margin: 0 auto; border-radius: 12px; } .nm-press-view .nm-press-body a { color: var(--nm-brand-primary); word-break: break-all; } /* 이전/다음 글 NM2/PrevNextRow(457:18043 — 위아래 20·좌우 24, 간격 24, 라벨 80 B3 Medium · 제목 B3 Regular Font/03_Sub, 아래 선 Line/Light). 공용 _prenext.html 마크업 그대로 꾸밈 */ .nm-press-view .board_prev_next_list.nm-press-prenext { margin: 0; padding: 64px 0 0; border: 0; } .nm-press-view .nm-press-prenext > ul, .nm-qna-view .nm-qna-prenext > ul { margin: 0; padding: 0; list-style: none; } .nm-press-view .nm-press-prenext > ul > li, .nm-qna-view .nm-qna-prenext > ul > li { display: flex; align-items: center; gap: 24px; width: auto; box-sizing: border-box; padding: 20px 24px; border-top: 0; border-bottom: 1px solid var(--nm-line-light); font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; } .nm-press-view .nm-press-prenext > ul > li > span, .nm-qna-view .nm-qna-prenext > ul > li > span { display: block; padding: 0; } .nm-press-view .nm-press-prenext .pnl_icon, .nm-qna-view .nm-qna-prenext .pnl_icon { display: none; } .nm-press-view .nm-press-prenext .pnl_desc, .nm-qna-view .nm-qna-prenext .pnl_desc { flex: 0 0 80px; font-weight: 500; color: var(--nm-font-black); } .nm-press-view .nm-press-prenext .pnl_title, .nm-qna-view .nm-qna-prenext .pnl_title { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--nm-font-sub); } .nm-press-view .nm-press-prenext .pnl_title a, .nm-qna-view .nm-qna-prenext .pnl_title a { color: inherit; text-decoration: none; cursor: pointer; } .nm-press-view .nm-press-prenext .pnl_title img, .nm-qna-view .nm-qna-prenext .pnl_title img { display: none; } /* 제목 뒤 HOT·새 글 아이콘 — 시안에 없음 */ .nm-press-view .nm-press-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 40px 0 120px; } @media (max-width: 1023px) { /* 모바일 시안 없음 — 카드 두 칸(처음 2개는 한 줄 전체) */ .nm-press-search { padding: 24px 0 8px; } .nm-press-search .nm-search-bar { width: 100%; } .nm-press-search .nm-search-bar__select { flex: 0 0 120px; width: 120px; } .nm-press-search .nm-search-bar__input { flex: 1 1 auto; width: auto; } .nm-press-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; padding: 24px 0 48px; } .nm-press-card { grid-column: span 1; gap: 12px; } .nm-press-card--big { grid-column: span 2; } .nm-press-card__pic, .nm-press-card--big .nm-press-card__pic { height: auto; aspect-ratio: 410 / 256; border-radius: 12px; } .nm-press-card--big .nm-press-card__pic { aspect-ratio: 628 / 380; } .nm-press-card .nm-press-card__tit { font-size: 15px; } .nm-press-card--big .nm-press-card__tit { font-size: 18px; } .nm-press-card .nm-press-card__sum { font-size: 13px; } .paging_navigation.nm-pager { padding-bottom: 64px; } .nm-press-view .nm-press-head { padding: 32px 0 20px; gap: 12px; } .nm-press-view .nm-press-head__tit { font-size: 22px; } .nm-press-view .board_detail_contents.nm-press-body { padding-top: 24px; font-size: 16px; } .nm-press-view .nm-press-body p { margin-bottom: 20px; } .nm-press-view .board_prev_next_list.nm-press-prenext { padding-top: 40px; } .nm-press-view .nm-press-prenext > ul > li { gap: 12px; padding: 16px 12px; } .nm-press-view .nm-press-prenext .pnl_desc { flex-basis: 56px; } .nm-press-view .nm-press-btns { padding: 32px 0 64px; } } /* ── 22 고객센터(460:20847 — 본문 아래 120, 구역 간격 80) ── */ .nm-cs { font-family: var(--nm-font); -webkit-font-smoothing: antialiased; word-break: keep-all; } .nm-cs-body { display: flex; flex-direction: column; gap: 80px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0 0 120px; } /* 바로가기 NM2/CsQuickLink(458:1435 — BG/Light 라운드 16, 위 32·아래 28·좌우 16, 간격 14, 라이브러리 선 아이콘 40 + B1 16 Medium) 6칸 간격 20 */ .nm-cs-quick { display: flex; gap: 20px; } .nm-cs-quick a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; padding: 32px 16px 28px; border-radius: 16px; background: var(--nm-bg-light); text-decoration: none; } .nm-cs-quick img { display: block; width: 40px; height: 40px; } .nm-cs-quick span { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-black); white-space: nowrap; } /* 섹션 제목 NM2/SectionTitle(444:457 — H2 40 SemiBold + 더보기 B3 14 Medium + 화살표 16, 아래 맞춤) */ .nm-sec-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .nm-sec-title__tit { margin: 0; padding: 0; font-size: 40px; font-weight: 600; line-height: 1.3; letter-spacing: -1px; color: var(--nm-font-black); } .nm-sec-title__more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-black); text-decoration: none; white-space: nowrap; } .nm-sec-title__more img { display: block; width: 16px; height: 16px; } /* 자주 묻는 질문 TOP5(460:21043 — 제목과 목록 간격 24, 위 선·줄 아래 선 Line/Regular, 줄 위아래 24, Q. B2_EN 15 Medium · 간격 18 · 질문 B1 16 Medium 한 줄, 화살표 24 간격 16) */ .nm-cs-faq { display: flex; flex-direction: column; gap: 24px; } .nm-cs-faq__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nm-line-regular); } .nm-cs-faq__list > li { margin: 0; padding: 0; list-style: none; } .nm-cs-faq__q { display: flex; align-items: flex-start; gap: 16px; width: 100%; box-sizing: border-box; margin: 0; padding: 24px 0; border: 0; box-shadow: inset 0 -1px 0 var(--nm-line-regular); background: var(--nm-bg-white); font-family: inherit; text-align: left; cursor: pointer; } /* 시안 줄 72 = 선이 높이에 안 더해짐 → inset 그림자 */ .nm-cs-faq__qwrap { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 18px; } .nm-cs-faq__mark { flex: 0 0 auto; font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--nm-font-black); } .nm-cs-faq__tit { flex: 1 1 0; min-width: 0; overflow: hidden; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-black); white-space: nowrap; text-overflow: ellipsis; } .nm-cs-faq__arrow { flex: 0 0 auto; display: block; width: 24px; height: 24px; transition: transform .2s; } .nm-cs-faq__list > li.is-open .nm-cs-faq__arrow { transform: rotate(180deg); } .nm-cs-faq__a { box-sizing: border-box; padding: 24px 32px; border-bottom: 1px solid var(--nm-line-regular); background: var(--nm-bg-light); font-size: 15px; line-height: 1.6; letter-spacing: -0.375px; color: var(--nm-font-sub); } /* 펼친 답변 — 시안에 없음(라이브러리 BG/Light·글자색으로) */ .nm-cs-faq__a img { max-width: 100%; height: auto; } .nm-cs-empty { padding: 48px 0; border-top: 1px solid var(--nm-line-regular); text-align: center; font-size: 15px; color: var(--nm-font-info); } /* 띠 배너 NM2/BannerCard(446:278 — BG/Light 라운드 16, 위아래 28·좌우 32, 라벨 C1 13 brand · 간격 6 · 제목 T4 20 SemiBold, 겹화살표 24) 두 칸 간격 24 */ .nm-cs-banners { display: flex; gap: 24px; } .nm-banner-card { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; padding: 28px 32px; border-radius: 16px; background: var(--nm-bg-light); text-decoration: none; } .nm-banner-card__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .nm-banner-card__label { font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.325px; color: var(--nm-brand-primary); } .nm-banner-card__tit { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.5px; color: var(--nm-font-black); } .nm-banner-card img { flex: 0 0 auto; display: block; width: 24px; height: 24px; } @media (max-width: 1023px) { /* 모바일 시안 없음 — 바로가기 3칸, 배너 한 줄씩 */ .nm-cs-body { gap: 48px; padding-bottom: 64px; } .nm-cs-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .nm-cs-quick a { gap: 10px; padding: 20px 8px 18px; border-radius: 12px; } .nm-cs-quick img { width: 32px; height: 32px; } .nm-cs-quick span { font-size: 14px; } .nm-sec-title__tit { font-size: 24px; } .nm-cs-faq { gap: 16px; } .nm-cs-faq__q { padding: 18px 0; gap: 12px; } .nm-cs-faq__qwrap { gap: 10px; } .nm-cs-faq__tit { font-size: 15px; white-space: normal; } .nm-cs-faq__a { padding: 18px 16px; font-size: 14px; } .nm-cs-banners { flex-direction: column; gap: 12px; } .nm-banner-card { padding: 20px; border-radius: 12px; } .nm-banner-card__tit { font-size: 16px; } } /* ── 23~29 고객센터 게시판 공통 — 고객센터 메뉴 가로 탭(라이브러리 Tap_Text Line·Large: 위아래 13, B1 16, 선택 SemiBold brand + 아래 2, 아래 선 Line/Regular — 안쪽 선이라 inset) ── */ .nm-cs-tabs { display: flex; align-items: flex-end; gap: 24px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; box-shadow: inset 0 -1px 0 var(--nm-line-regular); } .nm-cs-tabs a { flex: 0 0 auto; padding: 13px 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-info); text-decoration: none; white-space: nowrap; } .nm-cs-tabs a.is-on { font-weight: 600; color: var(--nm-brand-primary); box-shadow: inset 0 -2px 0 var(--nm-brand-primary); } /* 검색 줄 NM2/BoardSearch(458:1468 — 분류 선택 180 + 검색어 360 + 검정 검색 버튼 Button_Select_Input/Black, 오른쪽 맞춤, 탭 아래 32) */ .nm-board-search { display: flex; justify-content: flex-end; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 32px 0 0; } .nm-search-bar__select--w180 { width: 180px; } .nm-search-bar__input--w360 { width: 360px; } .nm-search-bar__input > img { flex: 0 0 auto; display: block; width: 16px; height: 16px; } .nm-search-bar__btn { flex: 0 0 auto; box-sizing: border-box; height: 42px; margin: 0; padding: 0 12px; border: 0; border-radius: 3px; background: var(--nm-font-black); font-family: var(--nm-font); font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-white); cursor: pointer; } /* 표 NM2/BoardRow(454:1440 — 줄 60: 머리줄 위·아래 Line/black, B3 14 Medium 가운데 / 본문 아래 Line/Light, 번호 14 Font/04_info · 제목 B1 16 · 등록일·조회 14 Font/03_Sub, 칸 100·140·100) */ .nm-board-table { box-sizing: border-box; max-width: 1280px; margin: 32px auto 0; font-family: var(--nm-font); -webkit-font-smoothing: antialiased; } .nm-board-row { display: flex; align-items: center; box-sizing: border-box; height: 60px; border-bottom: 1px solid var(--nm-line-light); cursor: pointer; } .nm-board-row > span { flex: 0 0 auto; box-sizing: border-box; text-align: center; font-size: 14px; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-sub); white-space: nowrap; } .nm-board-row > .c-num { width: 100px; color: var(--nm-font-info); } .nm-board-row > .c-sub { flex: 1 1 0; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; font-size: 16px; line-height: 1.4; letter-spacing: -0.4px; color: var(--nm-font-black); } .nm-board-row > .c-sub .c-cmt { font-style: normal; color: var(--nm-brand-primary); } .nm-board-row > .c-date { width: 140px; } .nm-board-row > .c-hit { width: 100px; } .nm-board-row--head { border-top: 1px solid var(--nm-font-black); border-bottom-color: var(--nm-font-black); cursor: default; } .nm-board-row--head > span, .nm-board-row--head > .c-num, .nm-board-row--head > .c-sub { font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: -0.35px; text-align: center; color: var(--nm-font-black); } .nm-board-row:not(.nm-board-row--head):hover > .c-sub { text-decoration: underline; } .nm-board-empty { box-sizing: border-box; max-width: 1280px; margin: 32px auto 0; padding: 80px 0; border-top: 1px solid var(--nm-font-black); border-bottom: 1px solid var(--nm-line-light); text-align: center; font-size: 15px; color: var(--nm-font-info); } .nm-board-table + .nm-pager, .nm-board-empty + .nm-pager { padding-top: 40px; } .paging_navigation.nm-pager > p { display: contents; margin: 0; } /* 운영 {pagin} 이

로 감싸 나오는 게시판 */ /* 24 공지 상세(460:23770 — 구역 간격 32: 글 머리 · 본문 · 공유 · 글 목록 · 버튼(위 24) / 아래 120) */ .nm-board-view { display: flex; flex-direction: column; gap: 32px; box-sizing: border-box; max-width: 1280px; margin: 32px auto 0; padding: 0 0 120px; font-family: var(--nm-font); -webkit-font-smoothing: antialiased; } .nm-board-view > form { display: flex; flex-direction: column; gap: 32px; margin: 0; } /* 글 머리 NM2/PostHeader(458:1461 — 위 선 Line/black(안쪽), 위 28·아래 24, 간격 12: 제목 T3 24 · 정보 B3 14 Font/04_info · 아래 선 Line/Regular) */ .nm-post-head { display: flex; flex-direction: column; gap: 12px; padding: 28px 0 24px; border-top: 1px solid var(--nm-font-black); } /* 시안 위 선은 높이에 들어감(strokesIncludedInLayout) — 1 + 28 + 34 + 12 + 20 + 12 + 1 + 24 = 132 */ .nm-post-head::after { content: ''; display: block; height: 1px; background: var(--nm-line-regular); } .nm-post-head__tit { margin: 0; font-size: 24px; font-weight: 600; line-height: 34px; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-post-head__meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-info); } .nm-post-head__meta b { margin-right: 8px; font-weight: 400; } .nm-post-files { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--nm-font-sub); } .nm-board-view .board_detail_contents.nm-board-body { padding: 16px 0; font-size: 16px; line-height: 1.6; color: var(--nm-font-sub); word-break: keep-all; overflow-wrap: anywhere; } .nm-board-view .nm-board-body img { max-width: 100% !important; } .nm-board-view .nm-board-body p:has(> img:only-child) { text-align: center; } /* 공유(라이브러리 Facebook Gray_line·X Black_BG·Kakao Black_BG 24, 「공유」 B3 14 Medium Font/03_Sub, 간격 12) — 기존 snslinkurl 출력의 그림을 가리고 같은 자리에 아이콘(클릭은 그대로) */ .nm-share { display: flex; align-items: center; gap: 12px; } .nm-share__label { font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: -0.35px; color: var(--nm-font-sub); } .nm-share__icons.board_sns_link { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; } /* 출력 사이   글자 노드도 flex 항목이 돼서 gap 대신 여백 */ .nm-share__icons .snsbox + .snsbox { margin-left: 12px; } .nm-share__icons .snsbox { display: block; margin: 0; padding: 0; } .nm-share__icons .snsbox img { display: block; box-sizing: border-box; width: 24px !important; height: 24px !important; margin: 0; padding: 24px 0 0; background: no-repeat center / 24px 24px; cursor: pointer; } /* 그림 영역 0 → 배경만 보임 */ .nm-share__icons .snsbox img[alt="페이스북"] { background-image: url(../images/renewal/sns_share_facebook.svg); } .nm-share__icons .snsbox img[alt="트위터"] { background-image: url(../images/renewal/sns_share_x.svg); } .nm-share__icons .snsbox img[alt="카카오톡"] { background-image: url(../images/renewal/sns_share_kakao.svg); } .nm-board-inview .nm-board-table { margin-top: 0; } .nm-board-inview .nm-pager { display: none; } .nm-board-btns { display: flex; justify-content: center; gap: 8px; padding-top: 24px; } @media (max-width: 1023px) { /* 모바일 시안 없음 */ .nm-cs-tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; } .nm-cs-tabs::-webkit-scrollbar { display: none; } .nm-cs-tabs a { padding: 12px 0; font-size: 15px; } .nm-board-search { padding-top: 20px; } .nm-board-search .nm-search-bar { width: 100%; flex-wrap: wrap; } .nm-board-search .nm-search-bar__select--w180 { flex: 1 1 100%; width: auto; } .nm-board-search .nm-search-bar__input--w360 { flex: 1 1 0; width: auto; } .nm-board-table { margin-top: 20px; } .nm-board-row { height: auto; min-height: 52px; padding: 12px 0; } .nm-board-row > .c-num { width: 48px; font-size: 13px; } .nm-board-row > .c-sub { font-size: 15px; white-space: normal; } .nm-board-row > .c-date { width: 76px; font-size: 13px; } .nm-board-row > .c-hit { display: none; } .nm-board-view { margin-top: 20px; gap: 24px; padding-bottom: 64px; } .nm-post-head__tit { font-size: 20px; line-height: 28px; } .nm-post-head__meta { font-size: 13px; gap: 4px 16px; } } /* 25 자주 묻는 질문(460:23982 — 검색 아래 32, 질문 목록 = 22 고객센터 TOP5 줄 그대로) */ .nm-faq-list { box-sizing: border-box; max-width: 1280px; margin: 32px auto 0; font-family: var(--nm-font); -webkit-font-smoothing: antialiased; word-break: keep-all; } .nm-faq-list .nm-cs-faq__q { display: flex; } /* span 이라 블록처럼 */ .nm-faq-list .nm-cs-faq__a .filelist { margin: 0 0 12px; padding: 0; list-style: none; } /* ── 32 이용약관 · 33 개인정보처리방침(460:36187 · 460:36326 — 위 선 Font/02_black 1 · 글 위 48 · 본문 B2 15 Font/03_Sub · 소제목 B1 16 SemiBold Font/02_black · 아래 120) ── */ .nm-terms { font-family: var(--nm-font); -webkit-font-smoothing: antialiased; } .nm-terms__wrap { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0 0 120px; } .nm-terms__body { padding-top: 48px; border-top: 1px solid var(--nm-font-black); font-size: 15px; line-height: 22px; letter-spacing: -0.375px; color: var(--nm-font-sub); word-break: keep-all; overflow-wrap: break-word; } .nm-terms__h { display: block; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-black); } /* 줄 높이: 시안 145%·140% 를 피그마는 줄마다 22 로 반올림해 그림(글 높이 3675 = 167줄 · 2068 = 94줄) */ @media (max-width: 1023px) { /* 모바일 시안 없음 — 본문 틀 10 + 10, 글 위 24, 아래 64 */ .nm-terms__wrap { padding: 0 10px 64px; } .nm-terms__body { padding-top: 24px; } } /* ── 28 상품문의 목록(460:31770 — 표 NM2/QnaRow 458:1589: 머리줄 위아래 16 · 위아래 선 Line/black · B3 14 Medium 가운데 / 본문 위아래 20 · 아래 선 Line/Light, 칸 번호 80 · 상태 110 · 분류 120 · 문의(좌우 16) · 작성자 130 · 등록일 150 · 조회 70, 쓰기 버튼 위 8 오른쪽) ── */ .nm-qna-row { display: flex; align-items: center; box-sizing: border-box; padding: 20px 0; border-bottom: 1px solid var(--nm-line-light); cursor: pointer; } .nm-qna-row > span { flex: 0 0 auto; box-sizing: border-box; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-sub); } /* 줄 높이: 시안 145% 를 피그마가 20 으로 그림(머리줄 54 · 한 줄 글 63 · 세 줄 105) */ .nm-qna-row > .c-num { width: 80px; color: var(--nm-font-info); } .nm-qna-row > .c-state { display: flex; justify-content: center; width: 110px; } .nm-qna-row > .c-cat { width: 120px; } .nm-qna-row > .c-sub { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; text-align: left; } .nm-qna-row > .c-name { width: 130px; } .nm-qna-row > .c-date { width: 150px; } .nm-qna-row > .c-hit { width: 70px; } .nm-qna-row .c-sub__tit { font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-black); word-break: keep-all; overflow-wrap: anywhere; } .nm-qna-row .c-sub__goods, .nm-qna-row .c-sub__secret { font-size: 12px; line-height: 17px; letter-spacing: -0.3px; color: var(--nm-font-info); } /* C2 12 Font/04_info · 비밀글은 Font/05_Disabled */ .nm-qna-row .c-sub__secret { color: var(--nm-font-disabled); } .nm-qna-row .c-cmt { font-style: normal; color: var(--nm-brand-primary); } .nm-qna-row--head { padding: 16px 0; border-top: 1px solid var(--nm-font-black); border-bottom-color: var(--nm-font-black); cursor: default; } .nm-qna-row--head > span, .nm-qna-row--head > .c-num { font-weight: 500; color: var(--nm-font-black); } .nm-qna-row--head > .c-sub { display: block; text-align: center; } .nm-qna-row:not(.nm-qna-row--head):hover .c-sub__tit { text-decoration: underline; } /* 상태 칩 = 라이브러리 Chip(State=Round — 높이 22 · 좌우 8 · C3 11 Medium). 답변완료 = 시안(브랜드색 선·글자, 흰 바탕), 그 밖 상태는 시안에 없어 Style=Strong_Line · Design=Gray(선 Line/Regular · 글자 #111) */ .nm-chip { display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; padding: 0 7px; border: 1px solid var(--nm-line-regular); border-radius: 100px; background: var(--nm-bg-white); font-style: normal; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: -0.275px; color: var(--nm-font-black); white-space: nowrap; } .nm-chip--brand { border-color: var(--nm-brand-primary); color: var(--nm-brand-primary); } /* 알약 버튼 Medium(라이브러리 Button_Default — 높이 42: 위아래 11 · 좌우 16, B3 14 Medium) · 브랜드 바탕(상품문의 쓰기) */ .nm-btn-pill--m { padding: 10px 15px; font-weight: 500; line-height: 20px; } .nm-btn-pill--brand { border-color: var(--nm-brand-primary); background: var(--nm-brand-primary); color: var(--nm-font-white); } .nm-qna-write { display: flex; justify-content: flex-end; box-sizing: border-box; max-width: 1280px; margin: 32px auto 0; padding-top: 8px; } /* ── 29 상품문의 상세(460:32004 — 24 공지 상세 틀(구역 간격 32 · 아래 120): 글 머리 · 문의 글 B1 16 Font/03_Sub · 상품 정보 · 답변 상자 · 댓글 수 · 이전글(위 선 Line/black) · 목록 버튼(위 16)) ── */ .nm-board-view > a[name] { position: absolute; } /* 댓글 앵커 — flex 항목이 되면 간격 32 가 하나 더 생김 */ .nm-qna-view .board_detail_contents.nm-qna-body { padding: 0; font-size: 16px; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-sub); word-break: keep-all; overflow-wrap: anywhere; } .nm-qna-view .nm-qna-body p { margin: 0; } .nm-qna-view .nm-qna-body img { max-width: 100% !important; height: auto; } /* 상품 정보(「상품 정보」 B3 14 Medium Font/02_black · 간격 12 · 내용 B3 14 Font/04_info) — 내용은 서버가 만드는 HTML(goodsview) 그대로 */ .nm-qna-view .goods_origin_info.nm-qna-goods { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; } .nm-qna-goods__tit { margin: 0; font-weight: 500; color: var(--nm-font-black); } .nm-qna-goods__body { color: var(--nm-font-info); } .nm-qna-goods__body img { max-width: 100%; height: auto; } /* 답변 NM2/AnswerBox(458:1508 — BG/Light 라운드 16 · 안쪽 32 · 간격 12: 「답변」 B1 16 SemiBold brand · 제목 T5 18 SemiBold · 내용 B1 16 Font/03_Sub, 줄 높이 22·25·22) */ .nm-qna-view .board_manager_reply.nm-answer { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; margin: 0; padding: 32px; border: 0; border-radius: 16px; background: var(--nm-bg-light); } .nm-answer__label { margin: 0; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-brand-primary); } .nm-answer__tit { margin: 0; font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: -0.45px; color: var(--nm-font-black); } .nm-answer__body { font-size: 16px; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-sub); word-break: keep-all; overflow-wrap: anywhere; } .nm-answer__body p { margin: 0; } .nm-answer__body img { max-width: 100% !important; height: auto; } /* 댓글 수(「댓글 0」 B3 14 Medium Font/03_Sub) — 공용 _comment.html 그대로 꾸밈. 시안에 없는 등록 버튼·입력 칸은 숨김(달린 댓글 목록은 그대로 나옴) */ .nm-qna-view .board_comment_area.nm-qna-cmt { margin: 0; padding: 0; border: 0; } .nm-qna-cmt .cmt_division.v2 { margin: 0; padding: 0; border: 0; } .nm-qna-cmt .cmt_division.v2 .title_area { margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-sub); } .nm-qna-cmt .title_area .title, .nm-qna-cmt .title_area .num { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--nm-font-sub) !important; } .nm-qna-cmt .board_comment_btn, .nm-qna-cmt .cmt_insert { display: none !important; } /* 이전/다음 글 = 언론보도 상세와 같은 줄(위 선 Line/black, 줄 61) */ .nm-qna-view .board_prev_next_list.nm-qna-prenext { margin: 0; padding: 0; border: 0; } .nm-qna-view .board_prev_next_list.nm-qna-prenext:has(> ul > li) { border-top: 1px solid var(--nm-font-black); } .nm-qna-view .nm-qna-prenext > ul > li { line-height: 20px; } .nm-qna-view .nm-board-btns { padding-top: 16px; } @media (max-width: 1023px) { /* 모바일 시안 없음 — 목록은 상태·분류 / 제목 / 작성자·등록일 세 줄 */ .nm-qna-table { border-top: 1px solid var(--nm-font-black); } .nm-qna-row--head { display: none; } .nm-qna-row { flex-wrap: wrap; gap: 6px 8px; padding: 16px 0; } .nm-qna-row > .c-num, .nm-qna-row > .c-hit { display: none; } .nm-qna-row > .c-state, .nm-qna-row > .c-cat { width: auto; } .nm-qna-row > .c-sub { flex: 1 1 100%; order: 3; padding: 0; } .nm-qna-row > .c-name, .nm-qna-row > .c-date { order: 4; width: auto; font-size: 12px; line-height: 17px; color: var(--nm-font-info); } .nm-qna-row .c-sub__tit { font-size: 15px; } .nm-qna-write { margin-top: 24px; padding-top: 0; } .nm-qna-view .board_manager_reply.nm-answer { padding: 20px; border-radius: 12px; } .nm-answer__tit { font-size: 16px; line-height: 22px; } .nm-answer__body, .nm-qna-view .board_detail_contents.nm-qna-body { font-size: 15px; } .nm-qna-view .nm-qna-prenext > ul > li { gap: 12px; padding: 16px 12px; } .nm-qna-view .nm-qna-prenext .pnl_desc { flex-basis: 56px; } } /* ── 26 상품후기 목록(460:28171 — 표 NM2/ReviewRow 458:1565: 머리줄 = 상품문의와 같음 / 본문 위아래 20 · 아래 선 Line/Light, 칸 번호 90 · 후기(사진 64 라운드 8 · 간격 16 · 상품명 C2 12 Font/04_info · 제목 B1 16 Medium · 요약 B3 14 Font/04_info, 글 간격 4 → 줄 108) · 평가 140 · 작성자 110 · 등록일 150, 쪽 번호 위 32 · 쓰기 버튼 위 32) ── */ .nm-review-row { display: flex; align-items: center; box-sizing: border-box; padding: 20px 0; border-bottom: 1px solid var(--nm-line-light); cursor: pointer; } .nm-review-row > span { flex: 0 0 auto; box-sizing: border-box; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-sub); } .nm-review-row > .c-num { width: 90px; color: var(--nm-font-info); } .nm-review-row > .c-sub { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 16px; text-align: left; } .nm-review-row > .c-score { display: flex; justify-content: center; width: 140px; } .nm-review-row > .c-name, .nm-review-row > .c-buy { width: 110px; } .nm-review-row > .c-date { width: 150px; } .nm-review-row > .c-hit { width: 70px; } .nm-review-row .c-pic { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background: var(--nm-bg-light); } .nm-review-row .c-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .nm-review-row .c-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .nm-review-row .c-goods { overflow: hidden; font-size: 12px; line-height: 17px; letter-spacing: -0.3px; color: var(--nm-font-info); white-space: nowrap; text-overflow: ellipsis; } .nm-review-row .c-tit { overflow: hidden; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-black); white-space: nowrap; text-overflow: ellipsis; } .nm-review-row .c-cont { overflow: hidden; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-info); white-space: nowrap; text-overflow: ellipsis; } .nm-review-row .c-cmt { font-style: normal; color: var(--nm-brand-primary); } .nm-review-row--head { padding: 16px 0; border-top: 1px solid var(--nm-font-black); border-bottom-color: var(--nm-font-black); cursor: default; } .nm-review-row--head > span, .nm-review-row--head > .c-num { font-weight: 500; color: var(--nm-font-black); } /* 번호 칸 회색 규칙보다 우선 */ .nm-review-row--head > .c-sub { display: block; text-align: center; } .nm-review-row:not(.nm-review-row--head):hover .c-tit { text-decoration: underline; } .nm-review-table + .nm-pager { padding-top: 32px; } .nm-qna-write.nm-review-write { padding-top: 0; } /* 별점 = 라이브러리 Rating Size=16(Star Style=Fill / Style=Stroke 16 · 간격 0, Icon/02_black) */ .nm-rating { display: inline-flex; align-items: center; } .nm-rating i { display: block; width: 16px; height: 16px; background: url(../images/renewal/star16_stroke.svg) no-repeat center / 16px 16px; } .nm-rating i.is-on { background-image: url(../images/renewal/star16_fill.svg); } /* ── 27 상품후기 상세(460:28640 — 29 상품문의 상세 틀(nm-qna-view) + 평점 줄(「평점」 B3 14 Medium · 간격 12 · Rating 16) · 공유 · 목록 왼쪽 / 쓰기 오른쪽) ── */ .nm-review-score { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-black); } .nm-review-score__num { font-weight: 400; color: var(--nm-font-sub); } .nm-review-sub { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-sub); } .nm-review-sub > div { display: flex; gap: 12px; } .nm-review-sub dt { flex: 0 0 auto; font-weight: 500; color: var(--nm-font-black); } .nm-review-sub dd { margin: 0; } .nm-review-video embed { max-width: 100%; } .nm-board-btns.nm-board-btns--split { justify-content: space-between; } .nm-board-btns__r { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } /* 상품 정보 카드 NM2/ProductMini(458:1456 — 선 Line/Regular · 라운드 12 · 안쪽 20 · 폭 520, 간격 16: 사진 64 라운드 8 · 상품명 B1 16 Medium · 가격 B3 14 Font/04_info) — 서버가 만드는 goodsview(#goodsview.goodsviewbox: .pic · .info > .name 2줄) 마크업을 CSS 로만. 가격의 인라인 색·취소선은 시안대로 지움 */ .nm-qna-goods .goodsviewbox { display: flex; align-items: center; gap: 16px; box-sizing: border-box; width: 520px; max-width: 100%; margin: 0; padding: 20px; border: 1px solid var(--nm-line-regular); border-radius: 12px; background: var(--nm-bg-white); } .nm-qna-goods .goodsviewbox .pic { flex: 0 0 64px; float: none; width: 64px; height: 64px; margin: 0; padding: 0; } .nm-qna-goods .goodsviewbox .pic a { display: block; } .nm-qna-goods .goodsviewbox .pic img { display: block; width: 64px !important; height: 64px; object-fit: cover; border-radius: 8px; } .nm-qna-goods .goodsviewbox .info { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; float: none; width: auto !important; min-width: 0; margin: 0; padding: 0; } .nm-qna-goods .goodsviewbox .name { margin: 0; padding: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-info); } .nm-qna-goods .goodsviewbox .name:first-child { font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-black); } .nm-qna-goods .goodsviewbox .name a { color: inherit; text-decoration: none; } .nm-qna-goods .goodsviewbox .name span { color: inherit !important; font-weight: inherit !important; text-decoration: none !important; } .nm-qna-goods .cboth { display: none; } @media (max-width: 1023px) { /* 모바일 시안 없음 — 후기 줄은 사진·글 / 별점·작성자·등록일 두 줄 */ .nm-review-table { border-top: 1px solid var(--nm-font-black); } .nm-review-row--head { display: none; } .nm-review-row { flex-wrap: wrap; gap: 8px 12px; padding: 16px 0; } .nm-review-row > .c-num, .nm-review-row > .c-hit, .nm-review-row > .c-buy { display: none; } .nm-review-row > .c-sub { flex: 1 1 100%; gap: 12px; } .nm-review-row .c-pic { flex-basis: 56px; width: 56px; height: 56px; } .nm-review-row > .c-score, .nm-review-row > .c-name, .nm-review-row > .c-date { width: auto; font-size: 12px; line-height: 17px; color: var(--nm-font-info); } .nm-review-row .c-tit { font-size: 15px; } .nm-review-table + .nm-pager { padding-top: 24px; } .nm-qna-goods .goodsviewbox { padding: 16px; } } /* ── 19 뉴트리미 칼럼 목록(460:32722 — 맞춤 게시판 기본 스킨: 화면 제목 + 설명 한 줄 · 글 카드 NM2/ContentCard 3칸(가로 25 · 세로 56, 위 16 · 아래 64) · 쪽 번호) ── */ .nm-page-title__desc { margin: 12px 0 0; font-size: 16px; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-info); } /* NM2/PageTitle 설명 한 줄(B1 16 Font/04_info) */ .nm-cbbs { font-family: var(--nm-font); -webkit-font-smoothing: antialiased; word-break: keep-all; } .nm-cbbs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 25px; row-gap: 56px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 16px 0 64px; list-style: none; } /* 글 카드 NM2/ContentCard(444:394 — 높이 400: 사진 266 라운드 12 · 간격 20 · 작성자 B3 14 Medium · 간격 4 · 제목 T5 18 SemiBold 두 줄 말줄임 · 간격 8 · 조회수·날짜 B3 14 Font/03_Sub) */ .nm-ccard { min-width: 0; margin: 0; padding: 0; list-style: none; } .nm-ccard > a { display: flex; flex-direction: column; gap: 20px; height: 400px; color: inherit; text-decoration: none; } .nm-ccard__pic { display: block; flex: 0 0 266px; height: 266px; overflow: hidden; border-radius: 12px; background: var(--nm-bg-light); } .nm-ccard__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .nm-ccard__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .nm-ccard__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .nm-ccard__by { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; color: var(--nm-font-black); white-space: nowrap; text-overflow: ellipsis; } .nm-ccard__tit { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: -0.45px; color: var(--nm-font-black); overflow-wrap: anywhere; } .nm-ccard__meta { font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-sub); } .nm-ccard > a:hover .nm-ccard__tit { text-decoration: underline; } /* ── 20 뉴트리미 칼럼 상세(460:35935 — 글 머리 위아래 선 Line/black · 위 40 아래 32 · 간격 16 / 본문 위 48, 문단 T5 18 Font/03_Sub 줄 25 간격 14 · 소제목 T3 24 SemiBold 줄 34 · 소제목 앞 빈 h2 = 24 / 이전글 위 64 / 목록 보기 위 40 아래 120) ── */ .nm-cbbs-view { box-sizing: border-box; max-width: 1280px; margin: 0 auto; } .nm-cbbs-view .nm-page-title { max-width: none; } .nm-cbbs-head { display: flex; flex-direction: column; gap: 16px; padding: 40px 0 32px; border-top: 1px solid var(--nm-font-black); border-bottom: 1px solid var(--nm-font-black); } .nm-cbbs-head__tit { margin: 0; padding: 0; font-size: 40px; font-weight: 600; line-height: 52px; letter-spacing: -1px; color: var(--nm-font-black); } .nm-cbbs-head__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; } /* 시안 줄 높이 52 = 링크 복사 안내 상자 높이(기본 화면에서도 같은 높이를 둠) */ .nm-cbbs-head__meta { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-info); } .nm-cbbs-head__meta i { margin: 0 8px; font-style: normal; } /* 시안 「 · 」 */ /* 링크 복사 알약(라이브러리 Button_Default Small — 높이 36 · 좌우 12 · 선 Line/Regular · 복사 아이콘 16 · B4 13 Medium) + 안내(라이브러리 Toast — Opacity/Black_85% · 흐림 6 · 라운드 8 · 안쪽 16 · 폭 420 · B3 14 흰 글자) */ .nm-cbbs-copy { position: relative; flex: 0 0 auto; display: flex; align-items: center; } .nm-cbbs-copy__btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; height: 36px; margin: 0; padding: 0 11px; border: 1px solid var(--nm-line-regular); border-radius: 100px; background: var(--nm-bg-white); font-family: var(--nm-font); font-size: 13px; font-weight: 500; line-height: 19px; letter-spacing: -0.325px; color: var(--nm-font-black); cursor: pointer; } .nm-cbbs-copy__btn img { display: block; width: 16px; height: 16px; } .nm-cbbs-copy__toast { position: absolute; top: 50%; right: calc(100% + 16px); z-index: 5; box-sizing: border-box; width: 420px; max-width: calc(100vw - 40px); padding: 16px; border-radius: 8px; background: rgba(17, 17, 17, 0.85); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-white); opacity: 0; visibility: hidden; transform: translateY(-50%); transition: opacity .2s, visibility .2s; pointer-events: none; } .nm-cbbs-copy.is-copied .nm-cbbs-copy__toast { opacity: 1; visibility: visible; } /* 본문 = 에디터 글 그대로 */ .nm-cbbs-body { display: flex; flex-direction: column; gap: 14px; padding: 48px 0 0; font-size: 18px; line-height: 25px; letter-spacing: -0.45px; color: var(--nm-font-sub); overflow-wrap: anywhere; } .nm-cbbs-body > * { margin: 0; } /* 블록 간격 14 = flex gap — 숨긴 빈 블록은 간격에서 빠짐(맨 끝 빈 문단의 여백이 아래로 새던 것) */ .nm-cbbs-body p { margin-top: 0; font-size: 18px; line-height: 25px; color: var(--nm-font-sub); } .nm-cbbs-body h2 { margin-top: 0; padding: 0; font-size: 24px; font-weight: 600; line-height: 34px; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-cbbs-body h3, .nm-cbbs-body h4 { margin-top: 0; padding: 0; font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: -0.45px; color: var(--nm-font-sub); } /* 시안: 본문 h3(참고문헌)은 문단 글자(T5 18 Regular) */ .nm-cbbs-body strong, .nm-cbbs-body b { font-weight: 600; } .nm-cbbs-body img { max-width: 100% !important; height: auto !important; border-radius: 12px; } .nm-cbbs-body a { color: var(--nm-brand-primary); word-break: break-all; } .nm-cbbs-body .is-blank, .nm-cbbs-body .is-dup { display: none; } .nm-cbbs-body .is-blank.is-gap { display: block; height: 24px; overflow: hidden; font-size: 0; line-height: 0; } /* 소제목 앞 빈 h2 = 시안 「간격」 24 */ /* 이전/다음 글(NM2/PrevNextRow — 언론보도 상세와 같은 줄, 위 64) */ .nm-cbbs-view .board_prev_next_list.nm-cbbs-prenext { margin: 0; padding: 64px 0 0; border: 0; } .nm-cbbs-prenext > ul { margin: 0; padding: 0; list-style: none; } .nm-cbbs-view .nm-cbbs-prenext > ul > li { display: flex; align-items: center; gap: 24px; box-sizing: border-box; padding: 20px 24px; border-top: 0; border-bottom: 1px solid var(--nm-line-light); font-size: 14px; line-height: 20px; letter-spacing: -0.35px; } .nm-cbbs-view .nm-cbbs-prenext > ul > li > span { display: block; padding: 0; } /* 공용 게시판 css 의 span 위아래 10 끔 */ .nm-cbbs-prenext .pnl_desc { flex: 0 0 80px; font-weight: 500; color: var(--nm-font-black); } .nm-cbbs-prenext .pnl_title { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--nm-font-sub); } .nm-cbbs-prenext .pnl_title a { color: inherit; text-decoration: none; } .nm-cbbs-btns { display: flex; justify-content: center; padding: 40px 0 120px; } @media (max-width: 1023px) { /* 모바일 시안 없음 */ .nm-cbbs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; padding: 8px 0 48px; } .nm-ccard > a { height: auto; gap: 12px; } .nm-ccard__pic { flex: 0 0 auto; height: auto; aspect-ratio: 410 / 266; border-radius: 10px; } .nm-ccard__tit { font-size: 16px; line-height: 22px; } .nm-ccard__by, .nm-ccard__meta { font-size: 13px; line-height: 18px; } .nm-cbbs-head { padding: 24px 0 20px; gap: 12px; } .nm-cbbs-head__tit { font-size: 26px; line-height: 36px; } .nm-cbbs-head__row { min-height: 0; flex-wrap: wrap; } .nm-cbbs-copy__toast { top: auto; right: 0; bottom: calc(100% + 8px); width: 280px; transform: none; } .nm-cbbs-body { padding-top: 28px; font-size: 16px; line-height: 24px; } .nm-cbbs-body p { font-size: 16px; line-height: 24px; } .nm-cbbs-body h2 { font-size: 20px; line-height: 28px; } .nm-cbbs-body h3, .nm-cbbs-body h4 { font-size: 16px; line-height: 24px; } .nm-cbbs-view .board_prev_next_list.nm-cbbs-prenext { padding-top: 40px; } .nm-cbbs-view .nm-cbbs-prenext > ul > li { gap: 12px; padding: 16px 12px; } .nm-cbbs-prenext .pnl_desc { flex-basis: 56px; } .nm-cbbs-btns { padding: 32px 0 64px; } } @media (max-width: 767px) { .nm-cbbs-list { grid-template-columns: minmax(0, 1fr); } } /* ── 30 제휴문의 · 31 전화상담(460:34726 · 460:34961 — 맞춤 게시판 신청서: 구역 간격 56(30) · 40(31), 아래 120) ── */ .nm-apply { font-family: var(--nm-font); -webkit-font-smoothing: antialiased; word-break: keep-all; } .nm-apply__body { display: flex; flex-direction: column; gap: 56px; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0 0 120px; } .nm-apply--counsel .nm-apply__body { gap: 40px; } .nm-apply-intro { display: flex; align-items: center; gap: 80px; } .nm-apply-intro__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .nm-apply-intro__tit { margin: 0; padding: 0; font-size: 24px; font-weight: 600; line-height: 34px; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-apply-intro__desc { margin: 0; font-size: 16px; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-sub); } .nm-apply-intro__pic { flex: 0 0 440px; display: block; width: 440px; height: 440px; border-radius: 24px; object-fit: cover; } /* 단계 NM2/StepItem(446:190 — 위 선 Line/black · 위 24 · 간격 8: 번호 T5 18 SemiBold brand · 제목 T3 24 SemiBold) 4칸 간격 24 */ .nm-steps { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; } .nm-steps > li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--nm-font-black); list-style: none; } .nm-steps__no { font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: -0.45px; color: var(--nm-brand-primary); } .nm-steps__tit { font-size: 24px; font-weight: 600; line-height: 34px; letter-spacing: -0.6px; color: var(--nm-font-black); } .nm-apply-form { display: flex; flex-direction: column; gap: 56px; margin: 0; } .nm-apply--counsel .nm-apply-form { gap: 40px; } /* 입력 줄 NM2/FormRow(454:1441 — 위 선 Line/black(묶음) · 줄 80 · 위아래 16 · 간격 24 · 아래 선 Line/Light: 항목 200 B1 16 Medium + 라이브러리 Input_Default(선 Line_Gray · 라운드 4 · 위아래 14 · 좌우 16 · B3 14, 안내 글 Font/03_Sub)) */ .nm-form-rows { border-top: 1px solid var(--nm-font-black); } .nm-form-row { display: flex; align-items: center; gap: 24px; box-sizing: border-box; min-height: 80px; margin: 0; padding: 0; border-bottom: 1px solid var(--nm-line-light); } /* 시안 줄 80 = 선 포함(높이 고정) */ .nm-form-row__label { flex: 0 0 200px; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-black); } input.nm-input[type] { flex: 1 1 0; min-width: 0; box-sizing: border-box; height: 48px; margin: 0; padding: 13px 15px; border: 1px solid var(--nm-line-regular); border-radius: 4px; background: var(--nm-bg-white); font-family: var(--nm-font); font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-black); outline: 0; -webkit-appearance: none; appearance: none; } input.nm-input[type]::placeholder { color: var(--nm-font-sub); opacity: 1; } input.nm-input[type]:focus { border-color: var(--nm-font-black); } /* common.css 의 input[type=text] 높이 32 를 이기도록 선택자 input.nm-input[type] */ /* 고르는 줄 NM2/FormChoiceRow(458:1512 — 위아래 16 · 라이브러리 Radio 22, 강조색만 브랜드 · 간격 8 · B2 15 Font/03_Sub, 선택지 간격 32) */ .nm-form-row--choice { min-height: 0; padding: 16px 0; } /* 고르는 줄은 내용 맞춤 16 + 22 + 16 + 선 1 = 55 */ .nm-form-row__choices { display: flex; align-items: center; gap: 32px; } .nm-radio, .nm-check { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; } .nm-radio input, .nm-check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } /* 원래 입력은 그대로(검사·전송), 그림만 바꿈 */ .nm-radio__box, .nm-check__box { flex: 0 0 22px; width: 22px; height: 22px; background: url(../images/renewal/radio22_off.svg) no-repeat center / 22px 22px; } .nm-radio input:checked + .nm-radio__box { background-image: url(../images/renewal/radio22_on.svg); } .nm-check__box { background-image: url(../images/renewal/check22_off.svg); } .nm-check input:checked + .nm-check__box { background-image: url(../images/renewal/check22_on.svg); } .nm-radio input:focus-visible + .nm-radio__box, .nm-check input:focus-visible + .nm-check__box { outline: 2px solid var(--nm-brand-primary); outline-offset: 2px; border-radius: 4px; } .nm-radio__txt, .nm-check__txt { font-size: 15px; line-height: 22px; letter-spacing: -0.375px; color: var(--nm-font-sub); } /* 동의 상자 NM2/AgreeBox(458:1502 — BG/Light 라운드 12 · 안쪽 28 · 간격 16: 안내 B3 14 Font/03_Sub · 주의 C1 13 Font/04_info · 라이브러리 Check 22) */ .nm-agree { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 28px; border-radius: 12px; background: var(--nm-bg-light); } .nm-agree__txt { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.35px; color: var(--nm-font-sub); } .nm-agree__note { margin: 0; font-size: 13px; line-height: 19px; letter-spacing: -0.325px; color: var(--nm-font-info); } .nm-agree .nm-check { align-self: flex-start; } .nm-apply-btns { display: flex; justify-content: center; } /* 알약 버튼 Large 브랜드(라이브러리 Button_Default — 높이 54: 위아래 16 · 좌우 20, B1 16 SemiBold) */ .nm-btn-pill--l { padding: 15px 19px; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -0.4px; } .nm-apply-guide { display: flex; justify-content: center; padding-top: 40px; } .nm-apply-guide img { display: block; width: 1000px; max-width: 100%; height: auto; } @media (max-width: 1023px) { /* 모바일 시안 없음 — 항목명은 입력칸 위로 */ .nm-apply__body, .nm-apply-form { gap: 36px; } .nm-apply--counsel .nm-apply__body, .nm-apply--counsel .nm-apply-form { gap: 28px; } .nm-apply__body { padding-bottom: 64px; } .nm-apply-intro { flex-direction: column-reverse; align-items: stretch; gap: 24px; } .nm-apply-intro__pic { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 16px; } .nm-apply-intro__tit { font-size: 20px; line-height: 28px; } .nm-apply-intro__desc { font-size: 15px; } .nm-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .nm-steps > li { padding-top: 16px; gap: 4px; } .nm-steps__no { font-size: 15px; line-height: 21px; } .nm-steps__tit { font-size: 18px; line-height: 25px; } .nm-form-row { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; padding: 14px 0; } .nm-form-row__label { flex: 0 0 auto; font-size: 15px; } .nm-form-row input.nm-input[type] { flex: 0 0 auto; width: 100%; } /* 세로로 쌓일 때 입력칸 기본 폭(180) 대신 한 줄 전체 */ .nm-form-row__choices { gap: 24px; } .nm-agree { padding: 20px; } .nm-apply-guide { padding-top: 24px; } } /* ── 21 이벤트(460:33045 — 진행/종료 탭(아래 선 Line/Light, 줄 49) · 분류 Check 18 + 검색 줄 NM2/SearchBar 위 32 · 목록 위 24 아래 40 · 빈 화면 NM2/EmptyState · 쪽 번호 줄 32 + 120) ── */ .nm-ev { font-family: var(--nm-font); -webkit-font-smoothing: antialiased; } .nm-ev__form { box-sizing: border-box; max-width: 1280px; margin: 0 auto; } .nm-ev-tabs { display: flex; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--nm-line-light); } .nm-ev-tabs label { position: relative; flex: 0 0 auto; margin: 0; padding: 13px 0; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.4px; color: var(--nm-font-info); white-space: nowrap; cursor: pointer; } .nm-ev-tabs label.is-on { font-weight: 600; color: var(--nm-brand-primary); box-shadow: inset 0 -2px 0 var(--nm-brand-primary); } .nm-ev-tabs input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } /* 원래 라디오(sc_status) 그대로 — 바꾸면 기존 스크립트가 검색을 보냄 */ .nm-ev-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; } .nm-ev-filter__types { display: flex; align-items: center; gap: 24px; } /* 라이브러리 Check Size=18(강조색만 브랜드) — 분류는 실제로 라디오(하나만) */ .nm-check--18 .nm-check__box { flex-basis: 18px; width: 18px; height: 18px; background-image: url(../images/renewal/check18_off.svg); background-size: 18px 18px; } .nm-check--18 input:checked + .nm-check__box { background-image: url(../images/renewal/check18_on.svg); } .nm-check--18 .nm-check__txt { font-size: 14px; line-height: 20px; letter-spacing: -0.35px; } .nm-ev-list { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 24px 0 40px; } /* 빈 화면 NM2/EmptyState(454:1458 — 위아래 96 · 라이브러리 Warning 48 · 간격 12 · T4 20 SemiBold) */ .nm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 96px 0; } .nm-empty img { display: block; width: 48px; height: 48px; } .nm-empty__tit { margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.5px; color: var(--nm-font-black); } .nm-ev-pager { min-height: 32px; } .nm-ev-pager.is-single { visibility: hidden; } /* 한 쪽뿐이면 숨기고 자리는 남김(시안) */ @media (max-width: 1023px) { .nm-ev-tabs label { padding: 12px 0; font-size: 15px; } .nm-ev-filter { flex-direction: column; align-items: stretch; padding-top: 20px; } .nm-ev-filter__types { flex-wrap: wrap; gap: 12px 20px; } .nm-ev-filter .nm-search-bar { width: 100%; } .nm-ev-filter .nm-search-bar__select { flex: 0 0 120px; width: 120px; } .nm-ev-filter .nm-search-bar__input { flex: 1 1 auto; width: auto; } .nm-empty { padding: 64px 0; } }