/* ========================================================================== ROSE LAB — roselab.co.kr 절제된 프리미엄. 화이트 베이스 · 넓은 여백 · 액센트 1색. ========================================================================== */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); @import url("https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/latin.css"); /* --------------------------------------------------------- 1. 디자인 토큰 */ :root { /* 중립 */ --ink: #16181A; --ink-2: #3A3F44; --muted: #6B7178; --muted-2: #9AA0A6; --line: #E3E1DC; --line-soft: #EFEDE9; --bg: #FAFAF8; --bg-2: #F3F1EC; --white: #FFFFFF; /* 액센트 — 로즈랩 CI 정색. RoselabCI.png 에서 추출한 실측값이다. 임의로 바꾸지 말 것. */ --ci-magenta: #AF1064; /* 심볼 진한 면 · 워드마크 강조 */ --ci-pink: #E95283; /* 심볼 밝은 면 */ --ci-graphite: #717171; /* 워드마크 */ --accent: var(--ci-magenta); --accent-deep: #8C0D50; --accent-soft: #FBEDF3; /* 타이포 */ --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; --en: "Inter", var(--sans); /* 리듬 */ --wrap: 1240px; --gutter: 24px; --section-y: 128px; --radius: 2px; /* 모션 */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* 미리보기 비교안 — CI 정색을 웹용으로 한 단계 낮춘 버전. . 대비·가독성은 유리하나 CI에서 벗어난다. */ [data-theme="b"] { --accent: #8C2F39; --accent-deep: #6E242C; --accent-soft: #F6EDEE; } @media (max-width: 860px) { :root { --section-y: 76px; --gutter: 20px; } } /* --------------------------------------------------------- 2. 리셋·기본 */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--sans); font-size: 17px; line-height: 1.78; font-weight: 400; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* 한글이 단어 중간에서 끊기지 않게 한다 */ word-break: keep-all; overflow-wrap: break-word; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.28; letter-spacing: -0.028em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; } .skip:focus { left: 12px; top: 12px; } /* --------------------------------------------------------- 3. 레이아웃 */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: calc(var(--section-y) * 0.62); } .section--alt { background: var(--bg-2); } .section--dark { background: var(--ink); color: #C9CDD1; } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; } .grid { display: grid; gap: 32px; } @media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 720px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* --------------------------------------------------------- 4. 타이포 유틸 */ .eyebrow { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .section--dark .eyebrow { color: var(--ci-pink); } [data-theme="b"] .section--dark .eyebrow { color: #C9848C; } .h-display { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.035em; } .h-section { font-size: clamp(1.65rem, 3.4vw, 2.5rem); letter-spacing: -0.032em; } .h-card { font-size: 1.22rem; letter-spacing: -0.024em; } .lead { font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.75; color: var(--muted); max-width: 62ch; } .section--dark .lead { color: #A8ADB2; } .measure { max-width: 68ch; } .center { text-align: center; margin-inline: auto; } .rule { height: 1px; border: 0; background: var(--line); margin: 0; } /* --------------------------------------------------------- 5. 버튼 */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-deep); } .btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .btn--on-dark { border-color: rgba(255,255,255,.34); color: #fff; } .btn--on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); } .link-arrow::after { content: "→"; transition: transform .22s var(--ease); color: var(--accent); } .link-arrow:hover::after { transform: translateX(5px); } /* --------------------------------------------------------- 6. 헤더 */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250,250,248,.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; } .brandmark { display: flex; align-items: center; } .brandmark img { height: 30px; width: auto; } /* 스크롤 진행 표시 */ .scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 0; background: var(--accent); transform-origin: left; } /* 스크롤 시 헤더 압축 */ .site-header.is-scrolled .site-header__inner { height: 62px; } .site-header.is-scrolled { box-shadow: 0 1px 24px -14px rgba(22,24,26,.5); } .site-header__inner { transition: height .3s var(--ease); } .nav { display: none; } @media (min-width: 1040px) { .nav { display: flex; align-items: center; gap: 38px; } } .nav__item { position: relative; } .nav__item > a { display: inline-block; font-size: 15px; font-weight: 500; color: var(--ink-2); padding-block: 6px; position: relative; } .nav__item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); } .nav__item:hover > a::after, .nav__item > a[aria-current="page"]::after { transform: scaleX(1); } .nav__item > a[aria-current="page"] { color: var(--ink); font-weight: 600; } /* 드롭다운 */ .subnav { position: absolute; top: 100%; left: -18px; padding-top: 18px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .nav__item:hover .subnav, .nav__item:focus-within .subnav { opacity: 1; visibility: visible; transform: none; } .subnav ul { min-width: 208px; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 0; box-shadow: 0 22px 50px -26px rgba(22,24,26,.4); } .subnav a { display: block; padding: 10px 22px; font-size: 14.5px; color: var(--muted); transition: color .18s var(--ease), background .18s var(--ease); } .subnav a:hover { color: var(--ink); background: var(--bg-2); } .header-side { display: flex; align-items: center; gap: 14px; } /* 언어 드롭다운. 언어가 넷이 되어 가로 나열에서 바꿨다.
/ 라 자바스크립트 없이 열리고 키보드로도 접근된다. */ .lang { position: relative; } .lang > summary { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--en); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink); cursor: pointer; list-style: none; user-select: none; transition: border-color .18s var(--ease), background .18s var(--ease); } .lang > summary::-webkit-details-marker { display: none; } /* 사파리 기본 삼각형 */ .lang > summary::marker { content: ""; } .lang > summary:hover { border-color: var(--ink-2); } .lang > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lang__flag { font-size: 15px; line-height: 1; } .lang__caret { width: 0; height: 0; margin-left: 1px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid var(--muted-2); transition: transform .18s var(--ease); } .lang[open] > summary { border-color: var(--ink-2); } .lang[open] .lang__caret { transform: rotate(180deg); } .lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 150px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 18px 44px -22px rgba(22,24,26,.45); } .lang__menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 7px; font-size: 14px; color: var(--ink-2); white-space: nowrap; } .lang__menu a:hover { background: var(--bg-2); color: var(--ink); } .lang__menu a[aria-current="true"] { color: var(--accent); font-weight: 600; } .burger { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; border-radius: var(--radius); cursor: pointer; } @media (min-width: 1040px) { .burger { display: none; } } .burger i, .burger i::before, .burger i::after { display: block; width: 17px; height: 1.5px; background: var(--ink); transition: transform .26s var(--ease), opacity .2s var(--ease); } .burger i::before, .burger i::after { content: ""; position: absolute; } .burger i::before { transform: translateY(-6px); } .burger i::after { transform: translateY(6px); } .burger[aria-expanded="true"] i { background: transparent; } .burger[aria-expanded="true"] i::before { transform: rotate(45deg); } .burger[aria-expanded="true"] i::after { transform: rotate(-45deg); } /* 공식몰 — 헤더 우측 단 하나의 구매 진입점 */ .shop-link { display: none; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--accent); border-radius: 999px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); background: transparent; transition: background .22s var(--ease), color .22s var(--ease); white-space: nowrap; } @media (min-width: 600px) { .shop-link { display: inline-flex; } } .shop-link:hover { background: var(--accent); color: #fff; } .shop-link span { font-size: 11px; } /* 모바일 메뉴 안에도 하나 */ .drawer__shop a { color: var(--accent) !important; font-weight: 600 !important; } /* 모바일 메뉴 */ .drawer { display: none; border-top: 1px solid var(--line-soft); background: var(--bg); max-height: calc(100dvh - 76px); overflow-y: auto; } .drawer.is-open { display: block; } @media (min-width: 1040px) { .drawer { display: none !important; } } .drawer ul { padding-block: 12px; } .drawer li + li { border-top: 1px solid var(--line-soft); } .drawer a { display: block; padding: 17px 4px; font-size: 16px; font-weight: 500; color: var(--ink); } .drawer__sub { padding: 0 0 14px 14px; border-left: 1px solid var(--line); margin-left: 4px; } .drawer__sub li { border: 0 !important; } .drawer__sub a { padding: 9px 0 9px 14px; font-size: 14.5px; color: var(--muted); font-weight: 400; } /* --------------------------------------------------------- 7. 히어로 */ /* 히어로 — 회사 정체성 영상(어두운 고분자 필드) 위. 흰 글씨. */ .hero { position: relative; min-height: clamp(560px, 82vh, 760px); display: flex; align-items: center; background: #0B0C0D; overflow: hidden; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,12,13,.92) 0%, rgba(11,12,13,.74) 38%, rgba(11,12,13,.28) 68%, rgba(11,12,13,.10) 100%); } @media (max-width: 860px) { .hero__scrim { background: linear-gradient(180deg, rgba(11,12,13,.86) 0%, rgba(11,12,13,.72) 55%, rgba(11,12,13,.55) 100%); } } .hero__inner { position: relative; width: 100%; padding-block: 80px; will-change: opacity, transform; } .hero h1 { color: #fff; max-width: 17ch; } .hero .lead { color: #B9BDC1; margin-top: 26px; max-width: 46ch; } .hero .btn-row { margin-top: 40px; } /* 히어로 배경 — 로드 시 아주 느린 줌아웃 */ .hero__bg { transform: scale(1.09); transition: transform 2.6s var(--ease); } .hero__bg.is-settled { transform: scale(1); } /* 히어로 영상 — 데스크톱에서만 재생한다. 모바일과 모션 감소 설정에서는 포스터 이미지로 대체해 전송량을 아낀다. */ .hero__video { display: none; object-fit: cover; transform: scale(1.02); /* 가장자리 떨림 방지 */ } @media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .hero__video { display: block; } .hero__video.is-playing + .hero__scrim ~ * { } .hero__video.is-playing ~ .hero__bg--poster, .hero.has-video .hero__bg--poster { opacity: 0; transition: opacity .8s var(--ease); } } /* 스크롤 유도 */ .hero__cue { position: absolute; left: 50%; bottom: 34px; z-index: 2; width: 1px; height: 46px; overflow: hidden; background: rgba(255,255,255,.20); } .hero__cue span { display: block; width: 100%; height: 46px; background: #fff; animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(100%); } 100% { transform: translateY(100%); } } @media (max-width: 860px) { .hero__cue { display: none; } } /* 서브 히어로 */ .subhero { position: relative; min-height: 320px; display: flex; align-items: flex-end; background: var(--ink); overflow: hidden; } @media (min-width: 860px) { .subhero { min-height: 400px; } } .subhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; } /* 밝은 배경 이미지도 살리기 위해 아래쪽에만 무게를 준다 */ .subhero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,14,.20) 0%, rgba(12,13,14,.42) 46%, rgba(12,13,14,.86) 100%); } .subhero__inner { position: relative; width: 100%; padding-block: 52px; } .subhero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 2.9rem); } .subhero p { color: #B9BDC1; margin-top: 14px; max-width: 54ch; } /* 브레드크럼 */ .crumb { font-size: 13px; color: var(--muted-2); padding-block: 20px; border-bottom: 1px solid var(--line-soft); } .crumb a:hover { color: var(--ink); } .crumb span { margin-inline: 8px; color: var(--line); } /* --------------------------------------------------------- 8. 지표 */ .stats { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--bg); padding: 40px 26px; } .stat__num { font-family: var(--en); font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -0.03em; } .stat__num em { font-style: normal; font-size: .48em; color: var(--accent); margin-left: 3px; } .stat__label { margin-top: 12px; font-size: 14px; color: var(--muted); } /* --------------------------------------------------------- 9. 카드 */ .card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease); } .card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 14px 40px -22px rgba(22,24,26,.32); } /* 제품 사진은 흰 배경이므로 잘라내지 않고 여백 안에 담는다 */ .card__media--product { background: #fff; padding: 14px; display: grid; place-items: center; } .card__media--product img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* 하위 품목 */ .items { display: grid; gap: 24px; } @media (min-width: 640px) { .items { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .items { grid-template-columns: repeat(4, 1fr); } } .item { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: border-color .24s var(--ease), box-shadow .24s var(--ease), transform .24s var(--ease); } .item:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 14px 40px -22px rgba(22,24,26,.28); } .item__media { background: #fff; aspect-ratio: 1 / 1; padding: 14px; display: grid; place-items: center; } .item__media img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .item__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; } .item__body h3 { font-size: 1.02rem; letter-spacing: -0.02em; } .item__vol { margin-top: 6px; font-family: var(--en); font-size: 12.5px; letter-spacing: .04em; color: var(--muted-2); } .item__body p { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); } .item .btn { margin-top: auto; align-self: flex-start; } .btn--sm { padding: 11px 20px; font-size: 13.5px; margin-top: 20px; } .card__media { aspect-ratio: 3 / 2; background: var(--bg-2); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .card:hover .card__media img { transform: scale(1.035); } .card__body { padding: 30px 28px 32px; flex: 1; display: flex; flex-direction: column; } .card__kicker { font-family: var(--en); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; } .card p { color: var(--muted); font-size: 15.5px; margin-top: 12px; } .card .link-arrow { margin-top: 22px; } /* 정보 타일 (이미지 없음) */ .tile { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 34px 30px; } .tile h3 { font-size: 1.08rem; } .tile p { margin-top: 10px; font-size: 15px; color: var(--muted); } .tile__no { font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .12em; margin-bottom: 16px; } /* 인증 배지 */ .badges { display: flex; flex-wrap: wrap; gap: 10px; } .badge { border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: 14px; color: var(--ink-2); background: var(--white); } .section--dark .badge { border-color: rgba(255,255,255,.2); background: transparent; color: #D3D7DB; } /* --------------------------------------------------------- 10. 표·리스트 */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; } table.data th, table.data td { text-align: left; padding: 18px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } table.data th { font-weight: 600; color: var(--ink); white-space: nowrap; width: 1%; background: var(--bg-2); } table.data thead th { background: transparent; border-bottom: 1px solid var(--line); } table.data td { color: var(--muted); } /* 연혁 */ .timeline { border-top: 1px solid var(--line); } .tl-year { display: grid; gap: 6px 40px; padding-block: 40px; border-bottom: 1px solid var(--line-soft); } @media (min-width: 860px) { .tl-year { grid-template-columns: 190px 1fr; } } .tl-year h3 { font-family: var(--en); font-size: 1.9rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .tl-item { display: flex; gap: 20px; padding-block: 7px; } .tl-item time { font-family: var(--en); font-size: 14px; font-weight: 600; color: var(--accent); flex: 0 0 46px; padding-top: 3px; } .tl-item p { margin: 0; font-size: 15.5px; color: var(--ink-2); } /* 뉴스 */ .news-list { border-top: 1px solid var(--line); } .news-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding: 28px 4px; border-bottom: 1px solid var(--line-soft); transition: background .2s var(--ease), padding-inline .2s var(--ease); } .news-item:hover { background: var(--bg-2); padding-inline: 16px; } .news-item time { font-family: var(--en); font-size: 13px; color: var(--muted-2); flex: 0 0 100px; } .news-item h3 { font-size: 1.04rem; font-weight: 500; } /* 정의 리스트 */ .deflist { border-top: 1px solid var(--line); } .deflist > div { display: grid; gap: 4px 32px; padding-block: 22px; border-bottom: 1px solid var(--line-soft); } @media (min-width: 700px) { .deflist > div { grid-template-columns: 168px 1fr; } } .deflist dt { font-weight: 600; color: var(--ink); font-size: 15.5px; } .deflist dd { margin: 0; color: var(--muted); font-size: 15.5px; } /* 체크 리스트 */ .checks li { position: relative; padding-left: 26px; margin-bottom: 13px; font-size: 15.5px; color: var(--ink-2); } .checks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* --------------------------------------------------------- 11. 미디어 조합 */ .split { display: grid; gap: 48px; align-items: center; } @media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } .split--reverse .split__media { order: 2; } } .split__media { border-radius: var(--radius); overflow: hidden; background: var(--bg-2); } .split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* 제품 사진은 절대 자르지 않는다. 세로로 긴 기기도 전체가 보여야 한다. */ .split__media--product { background: #fff; border: 1px solid var(--line-soft); display: grid; place-items: center; padding: 24px; } .split__media--product img { width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; max-height: 540px; } .band { position: relative; overflow: hidden; background: var(--ink); } .band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .band__scrim { position: absolute; inset: 0; background: rgba(12,13,14,.66); } .band__inner { position: relative; padding-block: calc(var(--section-y) * 0.86); } /* ------------------------------------------------ 11b. 브랜드 아이덴티티 */ /* 심볼 전시 */ .ci-stage { display: grid; place-items: center; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 64px 32px; min-height: 300px; } .ci-stage img { max-width: 240px; width: 100%; } .ci-stage--dark { background: var(--ink); border-color: transparent; } .ci-stage--wide img { max-width: 420px; } /* ---- 사명 분해 — R.O.S.E. 다크 밴드 ---- */ .rose-band { position: relative; background: var(--ink); color: #A8ADB2; overflow: hidden; padding-block: calc(var(--section-y) * 1.05) calc(var(--section-y) * 0.72); } /* 마젠타 광원 — 위쪽 중앙에서 아래로 사그라든다 */ .rose-band__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 62% at 50% -8%, rgba(175, 16, 100, .40) 0%, rgba(175, 16, 100, .12) 38%, transparent 72%), radial-gradient(80% 40% at 50% 108%, rgba(233, 82, 131, .10) 0%, transparent 70%); } [data-theme="b"] .rose-band__glow { background: radial-gradient(120% 62% at 50% -8%, rgba(140, 47, 57, .42) 0%, rgba(140, 47, 57, .12) 38%, transparent 72%); } .rose-band__inner { position: relative; } .rose-band__head { text-align: center; max-width: 66ch; margin-inline: auto; padding-bottom: clamp(56px, 8vw, 92px); } .rose-band__head .eyebrow { color: var(--ci-pink); } [data-theme="b"] .rose-band__head .eyebrow { color: #C9848C; } .rose-band__head .lead { color: #9AA0A6; margin-inline: auto; margin-top: 24px; } .rose-band__head .lead b { color: #fff; font-weight: 600; } .rose-sentence { font-family: var(--en); font-size: clamp(1.75rem, 4.4vw, 3.15rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.03em; color: #fff; } .rose-sentence em { font-style: normal; font-weight: 500; color: var(--ci-pink); } [data-theme="b"] .rose-sentence em { color: #C9848C; } /* 문장의 뜻 — 세 가지 */ .rose-band__meaning { max-width: 62ch; margin: 0 auto clamp(52px, 6vw, 76px); text-align: center; font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.78; color: #9AA0A6; } .rose-band__meaning b { color: #fff; font-weight: 600; } .means { display: grid; gap: 1px; background: rgba(255,255,255,.11); border-block: 1px solid rgba(255,255,255,.11); } @media (min-width: 760px) { .means { grid-template-columns: repeat(3, 1fr); } } .mean { background: var(--ink); padding: clamp(36px,4vw,52px) clamp(24px,2.6vw,38px) clamp(40px,4.4vw,56px); transition: background .4s var(--ease); } .mean:hover { background: #1D2023; } .mean b { display: block; font-family: var(--en); font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--ci-pink); } [data-theme="b"] .mean b { color: #C9848C; } .mean h3 { margin-top: 22px; font-size: 1.32rem; color: #fff; letter-spacing: -0.025em; } .mean p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.75; color: #8E949A; } /* 심볼 구성 요소 */ .elements { display: grid; gap: 1px; background: var(--line); } @media (min-width: 640px) { .elements { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .elements { grid-template-columns: repeat(4, 1fr); } } .elem { background: var(--bg-2); padding: 34px 28px 38px; } .elem h3 { font-size: 1.02rem; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .elem p { font-size: 14.5px; color: var(--muted); line-height: 1.7; } /* 컬러 서사 */ .swatch__story { margin: 16px 0 0; font-size: 14.5px; line-height: 1.72; color: var(--muted); padding-bottom: 4px; } /* 컬러 팔레트 */ .swatches { display: grid; gap: 24px; } @media (min-width: 700px) { .swatches { grid-template-columns: repeat(3, 1fr); } } .swatch { border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--white); } .swatch__chip { height: 148px; } .swatch__body { padding: 24px 22px 26px; } .swatch__name { font-weight: 600; color: var(--ink); font-size: 1.02rem; } .swatch__role { font-size: 14px; color: var(--muted); margin-top: 4px; } .swatch dl { margin: 18px 0 0; display: grid; grid-template-columns: 78px 1fr; gap: 7px 12px; font-size: 13px; } .swatch dt { color: var(--muted-2); font-family: var(--en); letter-spacing: .03em; white-space: nowrap; } .swatch dd { margin: 0; color: var(--ink-2); font-family: var(--en); } .swatch dd.approx { color: var(--muted); } /* ------------------------------------------------ 11c. 연구개발 · 품질 */ /* 국가 R&D 과제 목록 */ .progs { border-top: 1px solid var(--line); } .prog { display: grid; gap: 4px 32px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--line-soft); transition: background .2s var(--ease), padding-inline .2s var(--ease); } @media (min-width: 640px) { .prog { grid-template-columns: 92px 1fr; } } .prog:hover { background: var(--bg-2); padding-inline: 14px; } .prog time { font-family: var(--en); font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: -0.01em; } .prog p { margin: 0; font-size: 15.5px; color: var(--ink-2); } /* 품질 관리 단계 */ .steps { display: grid; gap: 1px; background: var(--line); } @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { background: var(--bg); padding: 36px 28px 42px; transition: background .3s var(--ease); } .step:hover { background: var(--white); } .step b { display: block; font-family: var(--en); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; color: var(--accent); } .step h3 { margin-top: 18px; font-size: 1.1rem; letter-spacing: -0.024em; } .step p { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.72; } /* ------------------------------------------------------ 11d. 공고 게시판 */ .board { border-top: 1px solid var(--line); } .board__head, .board__row { display: grid; align-items: center; gap: 8px 20px; grid-template-columns: 56px 1fr 108px; padding: 18px 6px; border-bottom: 1px solid var(--line-soft); } @media (max-width: 640px) { .board__head { display: none; } .board__row { grid-template-columns: 1fr; gap: 6px; padding-block: 20px; } } .board__head { font-size: 13.5px; font-weight: 600; color: var(--muted); background: var(--bg-2); border-bottom: 1px solid var(--line); } .board__row { color: var(--ink-2); transition: background .2s var(--ease), padding-inline .2s var(--ease); } .board__row:hover { background: var(--bg-2); padding-inline: 16px; } .board__no { font-family: var(--en); font-size: 13.5px; color: var(--muted-2); text-align: center; } @media (max-width: 640px) { .board__no { display: none; } } .board__title { font-size: 16px; font-weight: 500; color: var(--ink); } .board__row time, .board__head span:last-child { font-family: var(--en); font-size: 13.5px; color: var(--muted-2); } /* 공고 본문 */ .notice { max-width: 76ch; margin-inline: auto; } .notice__head { padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--line); } .notice__head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em; } .notice__meta { margin-top: 14px; font-family: var(--en); font-size: 13.5px; color: var(--muted-2); } .notice__body { font-size: 16.5px; line-height: 1.9; } .notice__body h2.notice__h { font-size: 1.24rem; text-align: center; margin-bottom: 30px; letter-spacing: -0.02em; } .notice__body h3 { font-size: 1.02rem; margin: 34px 0 14px; } .notice__body p { margin-bottom: 1.2em; } .notice__note { font-size: 14.5px; color: var(--muted); background: var(--bg-2); padding: 18px 20px; border-radius: var(--radius); } .notice__body .deflist { border-top: 0; } .notice__body .deflist > div { padding-block: 14px; } .notice__body .checks { margin-top: 6px; } .notice__sign { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-soft); text-align: right; font-size: 15.5px; line-height: 2; color: var(--ink); } /* --------------------------------------------------------- 12. 푸터 */ .site-footer { background: var(--ink); color: #8E949A; padding-block: 72px 40px; font-size: 14.5px; } .footer-top { display: grid; gap: 44px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); } @media (min-width: 940px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer .brandmark img { height: 28px; opacity: .95; } .footer-col h4 { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--en); } .footer-col li { margin-bottom: 11px; } .footer-col a:hover { color: #fff; } .footer-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; padding-top: 32px; font-size: 13.5px; color: #71777D; } .footer-contact { margin-top: 22px; line-height: 1.9; } .footer-contact a:hover { color: #fff; } /* --------------------------------------------------------- 13. 모션 */ /* 스크롤 등장 — --d 로 순차 지연. JS가 없거나 실패하면 .js 가 붙지 않으므로 콘텐츠는 그대로 보인다. */ .js .reveal { opacity: 0; transform: translateY(20px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .74s var(--ease) var(--d, 0s), transform .74s var(--ease) var(--d, 0s); } /* 첫 화면 등장 — 스크롤과 무관하게 로드 즉시 */ .rise { opacity: 0; transform: translateY(24px); animation: rise .9s var(--ease) var(--d, 0s) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } /* 카운트업 중 숫자 폭 흔들림 방지 */ .stat__num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .rise { opacity: 1 !important; transform: none !important; } .hero__bg { transform: none !important; } html { scroll-behavior: auto; } } /* --------------------------------------------------------- 14. 미리보기 전용 ⚠ 실서버 배포 시 이 블록과 관련 마크업을 제거한다. */ .themebar { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; align-items: center; gap: 8px; background: rgba(22,24,26,.93); backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 10px 8px 16px; font-size: 12.5px; color: #C9CDD1; box-shadow: 0 10px 34px -12px rgba(0,0,0,.55); } .themebar button { border: 1px solid rgba(255,255,255,.22); background: transparent; color: #C9CDD1; font: inherit; cursor: pointer; border-radius: 999px; padding: 6px 14px; } .themebar button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; } .themebar__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: -1px; } /* 글로벌 — 수출·협력 국가 세계지도 (src/make_world_map.py 산출물). SVG 는 배경이 투명하고 .section--dark 의 var(--ink) 위에 올라간다. 가로가 길어서 좁은 화면에서는 가로 스크롤로 넘긴다 — 축소하면 점이 뭉개진다. */ .worldmap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .worldmap img { display: block; width: 100%; height: auto; min-width: 640px; }