/* GOSEI 2026 — 모바일 퍼스트 */ :root { --c-brand: #034ea2; /* 현행 사이트 블루 */ --c-text: #222; --c-muted: #666; --c-bg: #fff; --c-line: #e3e3e3; --maxw: 1200px; } /* box-sizing 전역 border-box 금지: legacy 치수 체계(content-box) 유지. 전역 img max-width/height:auto 도 responsive.css 모바일 구간으로 한정. */ /* body 전역은 legacy-base.css 에 위임 (시각 재현 우선) */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* 헤더 */ .site-header { border-bottom: 1px solid var(--c-line); } .header-inner { display: flex; align-items: center; gap: 12px; max-width: var(--maxw); margin: 0 auto; padding: 10px 16px; } .site-logo { font-weight: 700; font-size: 1.05rem; color: var(--c-text); text-decoration: none; margin-right: auto; } .header-tel { text-decoration: none; color: var(--c-text); text-align: right; line-height: 1.2; } .tel-number { font-weight: 700; } .tel-note { display: block; font-size: .7rem; color: var(--c-muted); } .nav-toggle { border: 1px solid var(--c-line); background: none; padding: 8px 12px; border-radius: 4px; min-height: 44px; } .global-nav { display: none; border-top: 1px solid var(--c-line); } .global-nav.is-open { display: block; } .global-nav ul { list-style: none; margin: 0; padding: 0; } .global-nav a { display: block; padding: 12px 16px; text-decoration: none; color: var(--c-text); border-bottom: 1px solid var(--c-line); min-height: 44px; } /* 제품 */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; } .product-card { text-decoration: none; color: var(--c-text); } .product-card h2 { font-size: .9rem; margin: 8px 0 0; } .brand-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .brand-filter a { padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 999px; text-decoration: none; font-size: .85rem; } .product-layout { display: grid; gap: 24px; } .spec-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; } .spec-table caption { text-align: left; font-weight: 700; margin-bottom: 6px; } .spec-table th, .spec-table td { border: 1px solid var(--c-line); padding: 8px 10px; text-align: left; vertical-align: top; } .spec-table th { width: 7em; background: #faf7f5; font-weight: 600; } .btn-buy { display: inline-block; background: var(--c-brand); color: #fff; padding: 12px 28px; border-radius: 6px; text-decoration: none; font-weight: 700; min-height: 44px; } .buy-note { color: var(--c-muted); } .breadcrumb { font-size: .8rem; color: var(--c-muted); margin: 12px 0; } .breadcrumb a { color: var(--c-muted); } /* 푸터 */ .site-footer { border-top: 1px solid var(--c-line); margin-top: 48px; padding: 32px 0; font-size: .85rem; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .footer-tel a { font-weight: 700; text-decoration: none; } address { font-style: normal; color: var(--c-muted); } .copyright { color: var(--c-muted); margin-top: 24px; } /* 태블릿 이상 */ @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .nav-toggle { display: none; } .global-nav { display: block; border-top: none; } .global-nav ul { display: flex; max-width: var(--maxw); margin: 0 auto; } .global-nav a { border-bottom: none; padding: 14px 18px; } .product-grid { grid-template-columns: repeat(4, 1fr); } .product-layout { grid-template-columns: 5fr 7fr; } } /* 뉴스 싱글 */ .news-single .entry-title { font-size: 1.3rem; line-height: 1.5; } .news-single time { color: var(--c-muted); font-size: .85rem; } .entry-content img { height: auto; } .post-nav { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0; font-size: .85rem; } .post-nav a { text-decoration: none; } /* ── 톱페이지 ── */ .hero { background: linear-gradient(135deg, #faf5f2, #f5ebe6); } .hero-inner { display: grid; gap: 20px; max-width: var(--maxw); margin: 0 auto; padding: 40px 16px; align-items: center; } .hero-catch { font-size: 1.7rem; font-weight: 700; line-height: 1.4; margin: 0 0 12px; } .hero-sub { color: var(--c-muted); font-size: .92rem; margin: 0 0 20px; } .hero-image img { border-radius: 8px; display: block; } .btn-primary { display: inline-block; background: var(--c-brand); color: #fff; padding: 12px 32px; border-radius: 6px; text-decoration: none; font-weight: 700; } .home-section { padding: 40px 0; } .home-section.alt { background: #faf9f8; } .section-title { font-size: 1.25rem; display: flex; align-items: baseline; gap: 12px; } .more-link { font-size: .8rem; font-weight: 400; margin-left: auto; } .brand-grid, .shop-grid, .b2b-grid { display: grid; gap: 14px; } .brand-card, .shop-card, .b2b-card { display: block; border: 1px solid var(--c-line); border-radius: 8px; padding: 18px 16px; text-decoration: none; color: var(--c-text); background: var(--c-bg); } .brand-card { text-align: center; } .brand-name { display: block; font-weight: 700; font-size: 1.05rem; } .brand-count { color: var(--c-muted); font-size: .8rem; } .shop-card strong, .b2b-card strong { color: var(--c-brand); } .shop-card p, .b2b-card p { margin: 6px 0 0; font-size: .85rem; color: var(--c-muted); } .b2b-clients { font-size: .82rem; color: var(--c-muted); margin-top: 16px; } .news-list { list-style: none; margin: 0; padding: 0; } .news-list li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: .92rem; } .news-list time { color: var(--c-muted); flex-shrink: 0; } .news-list a { text-decoration: none; color: var(--c-text); } .news-list a:hover { color: var(--c-brand); } .page-title { font-size: 1.4rem; margin: 20px 0; } @media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } .shop-grid, .b2b-grid { grid-template-columns: repeat(3, 1fr); } .b2b-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .hero-inner { grid-template-columns: 6fr 5fr; padding: 64px 16px; } .hero-catch { font-size: 2.3rem; } } /* ── 미디어 섹션 ── */ .page-lead { color: var(--c-muted); font-size: .9rem; } .media-grid { display: grid; gap: 16px; margin: 20px 0; grid-template-columns: repeat(2, 1fr); } .media-card { text-decoration: none; color: var(--c-text); } .media-card img { width: 100%; border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; } .media-card h2 { font-size: .85rem; margin: 8px 0 0; line-height: 1.4; } .video-embed { margin: 0 0 16px; position: relative; aspect-ratio: 16/9; } .video-embed iframe { width: 100%; height: 100%; border-radius: 6px; } .media-grid { grid-template-columns: repeat(3, 1fr); } /* 휴대폰(980px 레이아웃)에서도 PC 와 같은 3열 */ /* ── 고정 페이지 ── */ .page-single .entry-content h2 { font-size: 1.1rem; border-left: 4px solid var(--c-brand); padding-left: 10px; margin-top: 32px; } .company-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; } .company-table th, .company-table td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top; } .company-table th { width: 9em; background: #faf7f5; font-weight: 600; } .child-pages { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 24px 0; } .child-page-card { display: block; border: 1px solid var(--c-line); border-radius: 8px; padding: 16px; text-decoration: none; color: var(--c-text); font-weight: 600; } .child-page-card:hover { border-color: var(--c-brand); color: var(--c-brand); } .map-link { display: inline-block; margin: 8px 0; } @media (min-width: 640px) { .child-pages { grid-template-columns: repeat(3, 1fr); } } /* ── 현행 재현 보정 ── */ /* 휴대폰도 현행처럼 PC 화면(960px 고정)을 축소해 보여 준다 (2026-09-14 결정): viewport 메타 없음, max-width:960px 반응형 규칙은 모두 뺐다. */ /* 톱 슬라이더: 현행 iframe 원 치수 662×300 (#header/#mainImage04 치수는 legacy 정의 그대로) */ .top-slider img { width: 662px; height: 300px; object-fit: cover; display: block; } /* HTML5 문서형 시절 이미지 단독 줄의 행간 strut 을 없애려던 보정 3개 (#sidebarL p.center line-height:0 / #mainImage01·05 img display:block / 배너·푸터 img vertical-align:top)는 현행과 같은 XHTML 문서형(limited-quirks)으로 바꾼 뒤 과보정이 돼 제거했다. */ /* 서브 콘텐츠 영역: container(750px) 직결 */ .sub-content { padding: 10px 0 0 10px; } /* ── 현행 재현: 하단 존/CM/뉴스 — 마크업을 현행 id 구조(#bannernew·#bannernew01·#footerUpper)로 맞췄으므로 시각 규칙은 legacy-base.css 에 전부 위임. 여기는 최소 보정만. */ .list_size001 ul { list-style: none; } .list_size001 ul img { vertical-align: middle; margin-right: 6px; } .list_size001 ul a:hover { color: #034ea2; } #syoukai_cm .box2 a:hover { color: #034ea2; } /* ── 서브페이지 현행 재현 ── */ /* 제목: 현행 ∥ 파란 마크 스타일 */ .product-single .product-title, .news-single .entry-title, .media-single .entry-title, .page-single .page-title, .sub-main .page-title { font-size: 18px; font-weight: bold; color: #333; border-left: 5px solid #034ea2; padding: 2px 0 2px 10px; background: none; line-height: 1.5; margin: 10px 0 16px; } /* 규격표: 현행 파란 계열 */ .spec-table { border-collapse: collapse; background: #d6d6d6; } .spec-table th { background: #eef3fa; color: #333; } .spec-table th, .spec-table td { border: 1px solid #d6d6d6; background-clip: padding-box; } .spec-table td { background: #fff; } /* 구매 버튼 (이미지) */ /* .main_btn 의 margin·a{inline-block; margin-right:8px} 는 현행에 없는 규칙이라 제거. 버튼 두 개(172px)가 한 줄에 못 들어가 두 줄로 쌓였다(59px→108px). */ /* 관련 상품 */ .related-products { clear: both; margin: 30px 0 10px; } .related-title { font-size: 15px; font-weight: bold; color: #034ea2; border-left: 5px solid #034ea2; padding-left: 10px; background: none; line-height: 1.5; } .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .related-card { text-decoration: none; color: #444; font-size: 11px; } .related-card img { width: 100%; height: auto; } .related-card p { margin: 4px 0 0; line-height: 1.4; color: #034ea2; } /* 서브 헤더: legacy 정의(ul#mainnav_sub)에 전부 위임 */ /* 브레드크럼: 현행 #map_product 스타일은 legacy 에 있음. nav 요소 적용 보정 */ nav#map_product a { color: #444; } /* 서브 규격표 폭 (product_cont_cont 361px 안) */ .product_cont_cont .spec-table { width: 100%; font-size: 12px; } .product_cont_cont .spec-table th { width: 5.5em; } /* #title_product 마커는 sub_titledot.png 이미지로 표현 — border 중복 금지. 아이콘 뒤 여백 없음: 현행 style.css 는 vertical-align 만 준다 (margin-right:4px 가 제목 글자를 4px 밀었다, 2026-09-17) */ #title_product img { vertical-align: middle; } /* 제품 상세 폭·관련상품 그리드·「上にもどる」 는 legacy-base.css(현행 원본) 를 그대로 쓴다. 740px/590px 폭, .product_sonota1 height:auto, #bottom_btn a 12px 오버라이드는 현행 5열 그리드와 높이 230px(넘치는 행은 그대로 흘림)·글자 크기를 바꿔 제거했다. */ /* 主な販売先 스타일은 현행 페이지 원본을 legacy_css 메타로 그 페이지에만 출력한다 (여기 중복 이식은 제거). */ /* ── 知る・楽しむ 상세 (현행 knowenjoy 인라인