/* ========================================================= CareSens Air @ EASD 2026 — 시안 D 스타일시트 기업 표준 구성. 스크롤 연출을 거의 쓰지 않는다. 흰 바탕에 옅은 회색 구간을 번갈아 놓고, 강조가 필요한 곳만 진한 남색 띠를 깐다. 카드와 표로 정보를 정리해 보여 준다. 차례 01 토큰 색 · 서체 · 간격의 단일 출처 02 리셋 03 타이포그래피 .display / .h1~.h4 / .lead / .eyebrow 04 레이아웃 .container / .section / .sec-head 05 헤더 · 내비게이션 06 히어로 띠 홈 · 서브 · 사진 07 버튼 · 링크 08 카드 기능 · 안내 · 근거 09 나란한 구성 글 + 이미지 10 세션 토픽 카드 · 연자 · 일정표 · 근거 목록 11 참여 조건 12 폼 · 동의 13 마무리 띠 · 맨 위로 14 푸터 15 법적 고지 본문 16 등장 연출 딱 하나. IntersectionObserver 로 한 번만 17 반응형 화면 크기별 조정은 전부 여기 18 모션 축소 설정 고치는 법 · 색을 바꾼다 → 01 토큰만 고친다. 본문에 하드코딩된 색은 없다. · 글자 크기를 바꾼다 → 01 의 --fs-* 를 고친다. · 여백·라운드 → 01 의 --sec-pad / --r-* 를 고친다. · 화면 크기별 조정 → 17 에서만 한다. 본문 중간에는 두지 않는다. 브레이크포인트 (CSS 변수는 @media 에서 못 쓰므로 값으로 적는다) 1024px 이하 — 태블릿: 상단 메뉴가 햄버거로 바뀐다 860px 이하 — 2단 구성이 1단으로 620px 이하 — 모바일: 전부 1단 ========================================================= */ /* ========================================================= 01 토큰 ========================================================= */ :root { /* ── CareSens Air 2 Blue — 브랜드 가이드의 10단계 ──── 이 열 줄이 색의 단일 출처다. 아래 역할 토큰은 전부 여기를 가리킨다. 본문에서는 역할 토큰만 쓰고 Blue 번호를 직접 쓰지 않는다. */ --blue-01: #EBF4FF; /* R235 G244 B255 */ --blue-02: #D6E8FF; /* R214 G232 B255 */ --blue-03: #A3D1FF; /* R163 G209 B255 */ --blue-04: #66B0FF; /* R102 G176 B255 */ --blue-05: #0F7CFF; /* R15 G124 B255 — 액션 블루 */ --blue-06: #0041E6; /* R0 G65 B230 — PANTONE 2145 C · PRIMARY */ --blue-07: #0C2FBB; /* R12 G47 B187 */ --blue-08: #171C8F; /* R23 G28 B143 — PANTONE 2746 C · i-SENS */ --blue-09: #0D116F; /* R13 G17 B111 */ --blue-10: #06084A; /* R6 G8 B74 */ /* ── 역할 ───────────────────────────────────── 운영 기준 06 온라인 Primary — 버튼 · 아이콘 · 링크 · 작은 강조 글자 05 액션 블루 — 호버 · 주목이 필요한 큰 요소. 작은 글자에는 쓰지 않는다 (흰 바탕 대비 3.6:1 로 본문 기준에 못 미친다) 08 i-SENS Blue — 푸터 · 기업 신뢰를 표시하는 면 */ --primary: var(--blue-06); --action: var(--blue-05); --corporate: var(--blue-08); /* 어두운 띠 — 깊은 쪽에서 밝은 쪽으로 */ --deep-1: var(--blue-10); --deep-2: var(--blue-09); --deep-3: var(--blue-07); /* 어두운 면 위의 밝은 강조 */ --on-dark-accent: var(--blue-04); /* ── 면 ───────────────────────────────────── */ --paper: #FFFFFF; /* 기본 바탕 */ --tint: #F4F4F4; /* 한 단계 눌린 구간 — 중립 회색 */ --tint-2: var(--blue-02); /* 입력칸 · 옅은 판 */ /* ── 글자 ─────────────────────────────────── */ --ink: #14172E; /* 제목 */ --body: #3D4363; /* 본문 */ --muted: #767D9B; /* 보조 · 라벨 */ --on-dark: #FFFFFF; --on-dark-soft: #C9D2F2; --on-dark-mute: #93A0CE; --line: #E2E7F2; --line-dark: rgba(255, 255, 255, .22); /* ── 상태 ─────────────────────────────────── */ --ok: #35A96B; /* 결과 문구 — 흰 바탕에서 읽혀야 하므로 진한 초록 */ --check: #78BE20; /* 체크 표시 전용. 글자에는 쓰지 않는다 (대비 2.4:1) */ --error: #D6455B; /* ── 서체 ─────────────────────────────────── */ /* Pretendard. 가변 폰트라 45~920 사이 어떤 웨이트든 한 파일로 쓴다. 쓰는 글자만 내려받는 동적 서브셋이라 영문 페이지는 38KB 로 끝난다. */ --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --fs-display: clamp(2.75rem, 7.6vw, 7rem); /* 홈 히어로 — 112px */ --fs-h1: clamp(1.9rem, 4.2vw, 3.25rem); /* 서브 히어로 · 섹션 제목 — 52px */ --fs-h2: clamp(1.375rem, 2.2vw, 1.875rem);/* 30px */ --fs-h3: clamp(1.0625rem, 1.4vw, 1.25rem);/* 20px */ /* 본문 아래로는 14px 이 바닥이다 — HCP 대상이라 연령대가 높다. 제목(display~h2)은 그대로 두고 읽는 글만 한 단씩 올렸다. */ --fs-h4: 1.0625rem; /* 17px */ --fs-body: 1rem; /* 16px */ --fs-sm: 1rem; /* 16px — 읽는 글은 본문과 같다 */ --fs-xs: .875rem; /* 14px */ --fs-label: .875rem; /* 14px — 대문자 라벨 */ --tr-label: .1em; /* ── 간격 ─────────────────────────────────── */ --page: 1200px; --gutter: clamp(20px, 4vw, 40px); /* 구간 여백은 두 단계. 전부 같으면 가운데가 평평해진다. */ --sec-pad: clamp(56px, 8vw, 104px); --sec-pad-lg: clamp(76px, 11vw, 148px); --gap: 24px; /* ── 모양 ─────────────────────────────────── */ --r-card: 12px; --r-sm: 6px; --r-pill: 999px; --shadow: 0 2px 14px rgba(20, 23, 46, .06); --shadow-card: 0 4px 24px rgba(20, 23, 46, .07); /* ── 모션 — 아주 절제해서 쓴다 ─────────────── */ --ease: cubic-bezier(.22, .61, .36, 1); --dur-fast: .2s; --dur-base: .3s; /* --hd-h 는 헤더가 차지하는 전체 높이(알약 + 위아래 여백), --bar-h 는 알약 자체의 높이다. */ --bar-h: 66px; --bar-h-sm: 58px; --hd-h: 92px; --hd-h-sm: 78px; } /* ========================================================= 02 리셋 ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, picture { display: block; max-width: 100%; } /* 가 사이에 끼면 img 의 height:100% 가 를 기준으로 잡혀 높이가 늘어나지 않는다. 비율을 정해 둔 틀 안에서는 함께 채우게 한다. */ .card-media__thumb picture { display: block; width: 100%; height: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 2000; padding: 12px 18px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-dark); font-size: var(--fs-sm); transition: top var(--dur-base) var(--ease); } .skip-link:focus { top: 16px; } /* 헤더가 떠 있으므로 앵커로 건너뛴 곳이 그 밑에 깔리지 않게 한다 */ [id] { scroll-margin-top: calc(var(--hd-h) + 12px); } /* 화면에는 없고 보조기기에만 읽히는 글 */ .u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================= 03 타이포그래피 ========================================================= */ .display { font-size: var(--fs-display); font-weight: var(--w-bold); line-height: 1.02; letter-spacing: -.042em; color: var(--ink); } .h1 { font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: 1.08; letter-spacing: -.035em; color: var(--ink); } .h2 { font-size: var(--fs-h2); font-weight: var(--w-semi); line-height: 1.2; letter-spacing: -.025em; color: var(--ink); } .h3 { font-size: var(--fs-h3); font-weight: var(--w-semi); line-height: 1.45; color: var(--ink); } .h4 { font-size: var(--fs-h4); font-weight: var(--w-semi); line-height: 1.5; color: var(--ink); } /* 구역을 여는 글. 본문(16px)보다 한 단 위에 두어 아래 각주·목록과 층이 갈린다. */ .lead { font-size: var(--fs-h4); line-height: 1.75; color: var(--body); } .small { font-size: var(--fs-sm); line-height: 1.7; color: var(--muted); } /* 제목 위 짧은 안내말 */ .eyebrow { display: block; font-size: var(--fs-xs); font-weight: var(--w-med); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--primary); } /* 브랜드 표기는 줄 안에서 색으로만 구분한다 */ .brand-em { color: var(--primary); font-weight: var(--w-semi); } /* 두 줄로 쌓는 제목 — 한 줄은 가볍게, 한 줄은 굵게. 크기는 그대로 두고 굵기 차이만으로 위계를 만든다. */ /* 굵기만 다른 한 줄. 좁은 화면에서는 알아서 두 줄로 접힌다. */ .stack span { display: inline; } .stack__thin { font-weight: var(--w-reg); } .stack__bold { font-weight: var(--w-bold); } /* 넓은 화면에서만 넣는 줄바꿈. 좁은 화면에서는 문장이 알아서 흐르게 둔다. */ .br-lg { display: inline; } /* 어두운 띠 안에서 */ .on-dark { color: var(--on-dark-soft); } .on-dark .h1, .on-dark .h2, .on-dark .display { color: var(--on-dark); } .on-dark .eyebrow { color: var(--on-dark-accent); } /* ========================================================= 04 레이아웃 ========================================================= */ .container { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--sec-pad); } .section--lg { padding-block: var(--sec-pad-lg); } .section--tint { background: var(--tint); } /* 섹션 머리글 — 기본은 가운데 정렬. 참고 시안이 그렇다. */ .sec-head { text-align: center; margin-bottom: clamp(32px, 4.5vw, 56px); } .sec-head .eyebrow { margin-bottom: 12px; } .sec-head .h1 { max-width: 22ch; margin-inline: auto; } .sec-head .lead { max-width: 62ch; margin: 16px auto 0; } .sec-head--left { text-align: left; } .sec-head--left .h1, .sec-head--left .lead { margin-inline: 0; } .grid { display: grid; gap: var(--gap); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ========================================================= 05 헤더 · 내비게이션 화면에 떠 있는 알약 모양 바. 색은 처음부터 끝까지 흰색 하나다. 바뀌는 것은 투명도 · 높이 · 로고 크기 · 그림자뿐이다. 두 가지 상태 떠 있을 때 (히어로 위) 흰색 18% 얇은 유리 · 흰 로고/글자 · 19px 가라앉을 때 (.is-stuck) 흰색 94% 판 · 원색 로고 · 진한 글자 · 16px ========================================================= */ .header { position: fixed; inset: 0 0 auto 0; z-index: 900; /* 좌우 여백은 여기서 준다 — 알약이 화면 폭에 상관없이 떠 보이게 */ padding: clamp(10px, 1.4vw, 16px) var(--gutter); background: none; transition: padding-block var(--dur-base) var(--ease); } .header.is-stuck { padding-block: clamp(8px, 1vw, 12px); } /* 알약 — 실제로 보이는 바는 이것이다 */ .header__inner { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: clamp(24px, 3.2vw, 44px); border-radius: var(--r-pill); /* 히어로 위에서는 얇은 유리. 뒤가 비쳐야 떠 보인다. 덧입히는 색은 흰색 하나뿐이고 농도로만 조절한다. saturate 를 올리면 뒤의 파란 히어로가 배어 나와 바가 파랗게 물든다 — 1 이하로 눌러 파랑이 아니라 흐린 유리로 읽히게 한다. */ background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: saturate(.85) blur(16px); backdrop-filter: saturate(.85) blur(16px); transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), height var(--dur-base) var(--ease); } .header.is-stuck .header__inner { height: var(--bar-h-sm); background: rgba(255, 255, 255, .94); border-color: var(--line); box-shadow: 0 6px 26px rgba(20, 23, 46, .10); } /* 로고 — 얇은 유리 위에서는 흰색, 흰 판 위에서는 원색. 크기도 바와 함께 줄어든다. */ .header__logo img { height: 19px; width: auto; filter: brightness(0) invert(1); transition: height var(--dur-base) var(--ease), filter var(--dur-base) var(--ease); } .header.is-stuck .header__logo img { height: 16px; filter: none; } .gnb { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); } /* 메뉴 글자는 알약 높이에 맞춰 따로 맞춰 둔 값이다 — 본문 층계를 따르지 않는다 */ .gnb a { font-size: .9375rem; font-weight: var(--w-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); transition: color var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); } .gnb a:hover { opacity: .7; } /* 얇은 유리 위에서는 글자를 전부 흰색으로 둔다. 히어로 오른쪽처럼 밝은 지점에서는 어떤 파랑도 대비가 안 나오고, 흐리게 눌러 구분하면 그 항목이 기준 대비에 못 미친다. 현재 위치 표시는 흰 판으로 가라앉은 뒤에 색으로 한다. */ /* 히어로 위쪽이 밝은 페이지 — 그 위의 헤더는 진한 글자라야 읽힌다. 사진을 깐 히어로(워크숍)에는 이 표시를 붙이지 않는다. */ .hero-light .header:not(.is-stuck) .gnb a { color: var(--ink); } .hero-light .header:not(.is-stuck) .header__logo img { filter: none; } .hero-light .header:not(.is-stuck) .navtoggle span { background: var(--ink); } /* 히어로 꼭대기가 파랗다 — 유리(18%)로는 로고의 파란 "Air"(#0041E6)가 2.32:1 로 묻힌다. 흰 농도를 72% 로 올려 밝은 판으로 세운다 (파랑 6.37:1, 진한 글자 15.49:1). */ .hero-light .header:not(.is-stuck) .header__inner { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .5); } .header.is-stuck .gnb a { color: var(--ink); } .header.is-stuck .gnb a.is-active { color: var(--primary); } /* 햄버거 — 길이가 다른 두 줄 */ .navtoggle { display: none; width: 40px; height: 40px; position: relative; margin-right: -10px; } .navtoggle span { position: absolute; left: 9px; height: 2px; border-radius: 2px; background: var(--on-dark); transition: transform var(--dur-base) var(--ease), width var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), top var(--dur-base) var(--ease); } .navtoggle span:nth-child(1) { top: 15px; width: 22px; } .navtoggle span:nth-child(2) { top: 23px; width: 14px; } .navtoggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); } .navtoggle[aria-expanded="true"] span:nth-child(2) { top: 19px; width: 22px; transform: rotate(-45deg); } .header.is-stuck .navtoggle span { background: var(--ink); } /* 모바일 메뉴 — 알약 바로 아래에 같은 폭으로 떨어진다 */ .mobilenav { position: fixed; z-index: 890; top: calc(var(--bar-h-sm) + clamp(18px, 2.4vw, 28px)); left: var(--gutter); right: var(--gutter); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 14px 40px rgba(20, 23, 46, .14); padding: 6px clamp(18px, 2.2vw, 26px) 20px; display: none; } .mobilenav.is-open { display: block; } .mobilenav a { display: block; padding-block: 15px; border-bottom: 1px solid var(--line); font-size: .9375rem; font-weight: var(--w-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .mobilenav a:last-of-type { border-bottom: 0; } .mobilenav a.is-active { color: var(--primary); } .mobilenav__meta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); } /* ========================================================= 06 히어로 띠 ========================================================= */ .hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--deep-1) 0%, var(--deep-2) 46%, var(--deep-3) 100%); color: var(--on-dark-soft); /* 빛덩이가 screen 으로 겹친다 — 히어로 밖과 섞이지 않게 가둔다 */ isolation: isolate; } /* 배경 결 — 브랜드 모티프 한 장. 서브 페이지에서는 가만히 있는다. */ /* 맨 뒤에 깔던 물결 여섯 줄. 히어로에서는 감춘다 — 그라데이션·별밭·혈당 곡선만으로 충분하고 줄이 겹쳐 지저분했다. 되살리려면 display 줄만 지우면 된다. (마무리 띠의 .closing__motif 는 그대로 쓴다.) */ .hero__motif { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; pointer-events: none; } /* 홈에서만 아주 느리게 흐른다. 스크롤과는 상관없다 — 가만히 있어도 화면이 죽어 보이지 않을 만큼만 움직인다. */ .hero--home .hero__motif { transform-origin: 60% 40%; animation: motif-drift 34s ease-in-out infinite alternate; } /* 그라데이션이 이미 분위기를 만든다 — 광원은 아주 옅게 숨결만 준다 */ /* 오른쪽 위 구석의 광원. 흰빛이면 그 자리만 채도가 무너져 뿌예진다 — 빛덩이와 같은 blue-05 를 screen 으로 더한다. */ .hero--home .hero__glow { position: absolute; z-index: 0; pointer-events: none; width: 96vmax; height: 96vmax; right: -30vmax; top: -40vmax; background: radial-gradient(closest-side, rgba(15, 124, 255, .30) 0%, rgba(15, 124, 255, 0) 70%); mix-blend-mode: screen; animation: glow-drift 24s ease-in-out infinite alternate; } @keyframes motif-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-3%, 2%, 0); } } @keyframes glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14vw, 10vh, 0) scale(1.18); } } /* 밝은 자리가 한곳에 못 박혀 있지 않게 — 빛덩이 둘이 화면 전체를 저마다 다른 길로 떠돌며 커졌다 작아졌다, 밝아졌다 어두워졌다 한다. 두 주기(37·29초)가 서로 나누어떨어지지 않아 같은 그림이 다시 나오려면 18분이 걸린다. 층과 ::before 를 하나씩 나눠 써서 마크업은 그대로 둔다. transform·opacity 만 움직여 다시 그리지 않는다. 덩이가 아래까지 내려와도 글이 버티도록 짙기를 재어서 정했다 — 한 자리가 35% 까지 덮여도 안내말 3.6:1, 제목 4.7:1, 일정 6.1:1 이다. */ .hero--home .hero__sky, .hero--sub .hero__sky { position: absolute; inset: -25% -18% -20%; z-index: 0; pointer-events: none; } .hero__sky::before { content: ""; position: absolute; inset: 0; } /* 덩이가 놓이는 자리가 중요하다 — 맨 위는 이미 흰빛에 가까워서 밝은 덩이를 얹어도 보이지 않는다. 바탕이 파랗게 내려앉는 히어로의 중간(46%)과 아래(62%)에 앉혀야 밝기 변화가 눈에 든다. (층은 -25%~120% 를 덮으므로 층 기준 49% · 60% 자리다.) */ /* 빛덩이는 흰빛이 아니라 채도 높은 파랑이다. 흰빛은 R·G·B 를 고르게 올려 파랑의 채도를 무너뜨린다(0.84 → 0.43). 같은 밝기라도 blue-05 를 screen 으로 더하면 채도가 그대로 남는다(0.84). 두 덩이 모두 blue-05 하나로 통일한다 — 색이 다르면 겹치는 자리에서 색상각이 어긋나 한쪽이 탁해 보인다. */ .hero--home .hero__sky { background: radial-gradient(50% 44% at 30% 49%, rgba(15, 124, 255, .42), rgba(15, 124, 255, 0) 68%); mix-blend-mode: screen; animation: sky-a 19s ease-in-out infinite; will-change: transform, opacity; } .hero--home .hero__sky::before { background: radial-gradient(42% 38% at 70% 60%, rgba(15, 124, 255, .34), rgba(15, 124, 255, 0) 70%); mix-blend-mode: screen; animation: sky-b 15s ease-in-out infinite; will-change: transform, opacity; } @keyframes sky-a { 0% { transform: translate3d(-18%, -14%, 0) scale(.88); opacity: .30; } 28% { transform: translate3d( 14%, 10%, 0) scale(1.42); opacity: 1; } 55% { transform: translate3d( 24%, -18%, 0) scale(1.02); opacity: .48; } 80% { transform: translate3d(-10%, 20%, 0) scale(1.26); opacity: .82; } 100% { transform: translate3d(-18%, -14%, 0) scale(.88); opacity: .30; } } @keyframes sky-b { 0% { transform: translate3d( 16%, 14%, 0) scale(1.18); opacity: .24; } 32% { transform: translate3d(-26%, -10%, 0) scale(.92); opacity: 1; } 61% { transform: translate3d( -6%, 24%, 0) scale(1.46); opacity: .55; } 85% { transform: translate3d( 22%, -16%, 0) scale(1.06); opacity: .78; } 100% { transform: translate3d( 16%, 14%, 0) scale(1.18); opacity: .24; } } /* 서브 히어로도 같은 방식. 바탕이 어두우니 훨씬 옅게, 주기도 달리한다. */ .hero--sub .hero__sky { background: radial-gradient(50% 44% at 30% 47%, rgba(15, 124, 255, .34), rgba(15, 124, 255, 0) 70%); mix-blend-mode: screen; animation: sky-a 23s ease-in-out infinite; will-change: transform, opacity; } .hero--sub .hero__sky::before { background: radial-gradient(42% 38% at 70% 58%, rgba(15, 124, 255, .26), rgba(15, 124, 255, 0) 72%); mix-blend-mode: screen; animation: sky-b 17s ease-in-out infinite; will-change: transform, opacity; } /* 헤더가 fixed 라 흐름을 차지하지 않는다 — 위쪽은 헤더 높이만큼 더 비운다 */ .hero__inner { position: relative; z-index: 1; padding-block: calc(var(--hd-h) + clamp(40px, 7vw, 96px)) clamp(56px, 9vw, 116px); } /* 홈 히어로만 첫 화면을 통째로 쓴다. 위는 하늘, 아래는 깊은 밤. 브랜드 10단계를 그대로 세로로 세웠다. */ .hero--home { display: flex; align-items: center; min-height: 100svh; /* 시안 이미지에서 세로 한 줄을 그대로 떠 온 값이다. 16% 께가 가장 밝고 거기서부터 밤으로 내려간다. 떠도는 빛덩이(.hero__sky)는 이 위에 그대로 얹힌다. */ background: linear-gradient(180deg, #8AB6E9 0%, #B8D4F0 8%, #D7E7F8 16%, #C6DCF5 20%, #99BEEC 26%, #5E8ADA 36%, #4E76D0 42%, #3856B8 48%, #2C3EA3 54%, #25308C 60%, #1C1F70 68%, #151559 76%, #0F0E42 84%, #0B0847 100%); } /* 홈 궤적은 히어로 폭을 다 쓴다 — 왼쪽 끝에서 오른쪽 끝까지 그어진다. 글과 겹치는 구간의 점은 main.js 07c 가 감춘다. */ .hero--home .hero__inner { width: 100%; padding-block: calc(var(--hd-h) + clamp(24px, 3vw, 44px)) clamp(40px, 6vw, 72px); } /* 홈 히어로는 제목이 크다 — 안내말과 장소·일정도 그에 맞춰 키운다 */ /* 그라데이션의 밝은 띠를 위로 올린 덕에 이 자리도 흰 글자가 선다 (24px, 4.6:1) */ .hero--home .hero__eyebrow { font-size: clamp(1.0625rem, 1.9vw, 1.5rem); font-weight: var(--w-med); color: var(--on-dark); /* 하늘이 숨 쉬며 이 자리가 밝아지는 순간에도 글이 뜨지 않게. 그림자는 눈에 띄지 않을 만큼만 넓고 옅게 깐다. */ text-shadow: 0 1px 14px rgba(6, 8, 74, .38); margin-bottom: clamp(13px, 1.7vw, 23px); } .hero--home .hero__facts { margin-top: clamp(36px, 5vw, 66px); gap: 16px; } .hero--home .hero__facts li { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: var(--w-med); color: var(--on-dark); gap: 14px; } .hero--home .hero__facts svg { width: 22px; height: 22px; } /* span 이라 블록으로 세워야 아래 여백이 먹는다 — 인라인 요소에는 세로 마진이 적용되지 않는다. */ .hero__eyebrow { display: block; color: var(--on-dark-soft); margin-bottom: 18px; text-transform: none; letter-spacing: 0; font-size: var(--fs-body); } .hero__title { color: var(--on-dark); max-width: 18ch; } .hero__lead { margin-top: 20px; max-width: 56ch; color: var(--on-dark-soft); } /* 장소 · 일정 */ .hero__facts { margin-top: clamp(28px, 3.6vw, 44px); display: grid; gap: 10px; } .hero__facts li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); color: var(--on-dark-soft); } .hero__facts svg { width: 17px; height: 17px; flex: none; color: var(--on-dark-accent); } /* ---- 혈당 라인 ---- 시안 파일(glucose-line.svg) 한 장. 글자가 놓이는 구간은 그림 안에서 이미 비어 있다(가로 20.5%~63.6%). 한 바퀴(--line-cycle) 안에서 0~28% 왼쪽부터 오른쪽으로 서서히 드러난다 28~62% 그대로 머문다 62~80% 부드럽게 사라진다 80~100% 안 보이는 채로 왼쪽으로 되감는다 첫 바퀴는 --line-wait 만큼 늦게 시작한다 — 글자가 먼저 자리를 잡는다. 드러내기는 마스크를 옆으로 밀어서 한다. 폭을 200% 로 잡고 위치를 200%(다 가림) → 0%(다 보임) 로 옮기면 왼쪽부터 차례로 열린다. */ .hero__line { position: absolute; left: 0; right: 0; top: 47.4%; transform: translateY(-50%); z-index: 0; pointer-events: none; --line-cycle: 9s; --line-wait: 1s; --line-o: .85; --line-hole-l: 0px; /* 글자 왼쪽 끝. main.js 04c 가 재서 넣는다 */ --line-hole: 0px; /* 글자 오른쪽 끝 */ --line-fade: 110px; /* 글자 오른쪽 — 이만큼에 걸쳐 라인이 살아난다 */ --line-fade-l: 56px; /* 글자 왼쪽 — 여백이 좁으니 짧게 사그라든다 */ /* 그어지는 붓의 폭과 오갈 자리. 기본값은 화면 전체를 긋는 경우이고, 글자를 피해야 할 때는 04c 가 보이는 구간에 맞춰 px 로 다시 넣는다. */ --wipe-w: 200%; --wipe-a: 200%; --wipe-b: 0%; } /* 라인이 글자와 높이가 겹칠 때만 걸린다 — 글자 위는 비우고 그 오른쪽부터 잇는다. 그어지는 움직임은 안쪽 그림이 맡으므로 가림막은 여기서 가만히 있는다. */ .hero__line.is-carved { -webkit-mask-image: linear-gradient(90deg, transparent 0 var(--line-hole), #000 calc(var(--line-hole) + var(--line-fade))); mask-image: linear-gradient(90deg, transparent 0 var(--line-hole), #000 calc(var(--line-hole) + var(--line-fade))); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* 메인만은 글자 왼쪽에도 라인이 남는다 — 글자가 놓인 만큼만 비우고 양옆은 그대로 잇는다. 넓은 화면일수록 왼쪽 여백이 넓어 잘 보인다. */ .hero--home .hero__line.is-carved { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--line-hole-l) - var(--line-fade-l)), transparent var(--line-hole-l), transparent var(--line-hole), #000 calc(var(--line-hole) + var(--line-fade))); mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--line-hole-l) - var(--line-fade-l)), transparent var(--line-hole-l), transparent var(--line-hole), #000 calc(var(--line-hole) + var(--line-fade))); } .hero__line img { display: block; width: 100%; height: auto; opacity: var(--line-o); -webkit-mask-image: linear-gradient(90deg, #000 0 52%, transparent 76%); mask-image: linear-gradient(90deg, #000 0 52%, transparent 76%); -webkit-mask-size: var(--wipe-w) 100%; mask-size: var(--wipe-w) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: line-cycle var(--line-cycle) ease-in-out var(--line-wait) infinite backwards; will-change: mask-position, opacity; } /* 서브는 띠가 낮아 글과 가까이 지난다 — 메인과 같은 방향으로 긋되 한 단계 옅게 */ .hero--sub .hero__line { --line-o: .45; } /* 좁은 화면에서는 글자가 폭을 거의 다 쓴다 — 비우고 남는 게 없으니 라인을 글 아래 빈 띠로 내려서 온전히 보여 준다. 위쪽은 하늘이 거의 흰빛이라 흰 점이 묻힌다. */ @media (max-width: 620px) { .hero--home .hero__line { top: 80%; overflow: hidden; } .hero--sub .hero__line { top: 30%; overflow: hidden; } /* 1920 폭 그림을 375 에 맞추면 점이 0.6px 로 뭉개진다 — 키워서 왼쪽만 보여 준다 */ .hero__line img { width: 220%; max-width: none; } } @keyframes line-cycle { 0% { -webkit-mask-position: var(--wipe-a) 0; mask-position: var(--wipe-a) 0; opacity: var(--line-o); } 28% { -webkit-mask-position: var(--wipe-b) 0; mask-position: var(--wipe-b) 0; opacity: var(--line-o); } 62% { -webkit-mask-position: var(--wipe-b) 0; mask-position: var(--wipe-b) 0; opacity: var(--line-o); } 80% { -webkit-mask-position: var(--wipe-b) 0; mask-position: var(--wipe-b) 0; opacity: 0; } 99% { -webkit-mask-position: var(--wipe-a) 0; mask-position: var(--wipe-a) 0; opacity: 0; } 100% { -webkit-mask-position: var(--wipe-a) 0; mask-position: var(--wipe-a) 0; opacity: var(--line-o); } } /* ---- 별밭 ---- 아래쪽 어두운 구간에만 뜬다. 무리마다 반짝이는 때가 다르다. */ .hero__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* 밝은 하늘 쪽에는 별이 뜨지 않는다 — 어두워지기 시작하는 데서부터 나타난다 */ -webkit-mask-image: linear-gradient(180deg, transparent 36%, #000 66%, #000 100%); mask-image: linear-gradient(180deg, transparent 36%, #000 66%, #000 100%); } /* 그림이 두 배 폭이고 왼쪽·오른쪽 절반이 같다 — 절반만큼 밀면 한 바퀴가 딱 맞아 이음매가 보이지 않는다. 자전으로 별이 흐르는 속도를 흉내 낸다 (한 바퀴 4분). */ .hero__stars > * { /* 리셋의 max-width:100% 가 200% 를 도로 잘라 낸다 — 여기서만 푼다 */ width: 200%; max-width: none; height: 100%; display: block; object-fit: cover; animation: sky-drift 240s linear infinite; } @keyframes sky-drift { /* 우 → 좌. 혈당 곡선과 반대로 흘러 두 겹이 분리돼 보인다. 방향을 바꾸려면 아래 두 줄을 맞바꾼다. */ from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* 무리마다 주기·시작점·어두워지는 정도가 다르다 (값은 마크업에 박혀 있다). 주기가 서로 어긋나 같은 그림이 다시 나오는 데 몇 분이 걸린다 — 보는 사람에게는 제각각 반짝이는 것으로 보인다. */ /* 무리별 반짝임은 stars.svg 안에 들어 있다 — 로 써도 그대로 움직인다 */ /* 서브 페이지 — 낮은 띠. 홈 그라데이션의 '밤' 구간만 쓴다. 띠가 낮아 밝은 하늘까지 넣으면 밝은 부분이 헤더와 맞물려 지저분해진다 — 위에서 아래로 계속 어둡다. */ .hero--sub { background: linear-gradient(180deg, #23499E 0%, #1B3FA8 24%, #141C6E 56%, #0A0E42 84%, var(--blue-10) 100%); } /* 혈당 곡선은 서브에서도 제목 뒤를 지난다 — 띠가 낮아 자리를 다시 잡는다. 글이 얹히므로 홈(.34)보다 한 단계 죽인다. */ /* 서브 히어로는 글이 홈보다 짧다(넓은 화면에서 49% 언저리에서 끝난다) — 궤적을 더 왼쪽에서 시작해 오른쪽 빈자리를 넉넉히 채운다. 1023px 이하는 글이 넓게 퍼지므로 아래 반응형에서 되돌린다. */ /* 위쪽이 이미 어두우므로 별을 거의 꼭대기부터 띄운다 */ .hero--sub .hero__stars { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%); } .hero--sub .hero__inner { padding-block: calc(var(--hd-h) + clamp(32px, 5vw, 64px)) clamp(44px, 6.5vw, 84px); } /* 사진을 깐 띠 — 2026-09-02 현재 쓰는 페이지 없음. 워크숍 v2 에서 다시 쓸 수 있어 남겨 둔다. 지우려면 이 덩어리와 반응형(17)의 .hero--photo::after 규칙을 함께 지운다. */ .hero--photo { background: var(--deep-1); } /* 어둡게 하는 일은 사진 자신이 맡는다. 덮개(::after)에만 맡기면 폭이 좁을 때 사진이 통째로 묻힌다. */ .hero--photo .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: brightness(.72) saturate(.9); } /* 글이 왼쪽에 있으므로 왼쪽만 조금 더 눌러 준다 */ .hero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 70, .55) 0%, rgba(10, 16, 70, .18) 60%, rgba(10, 16, 70, 0) 100%); } .hero--photo .hero__inner { z-index: 2; } /* 오른쪽에 제품을 세운 띠 */ /* 히어로가 화면 밖으로 나가면 배경 연출을 멈춘다. 별은 투명도로 반짝이는데 이는 GPU 가속이 안 되므로, 보이지도 않는 동안 계속 다시 그릴 이유가 없다. */ .hero.is-away .hero__stars > *, .hero.is-away .hero__line img, .hero.is-away .hero__motif, .hero.is-away .hero__glow, .hero.is-away .hero__sky, .hero.is-away .hero__stars > * { animation-play-state: paused; } /* ========================================================= 07 버튼 · 링크 ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-dark); font-size: var(--fs-sm); font-weight: var(--w-med); transition: background-color var(--dur-base) var(--ease); } .btn:hover { background: var(--action); } .btn svg { width: 15px; height: 15px; } .btn-line { display: inline-flex; align-items: center; gap: 10px; padding: 12px 25px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--w-med); transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .btn-line:hover { border-color: var(--primary); color: var(--primary); } .btn-line svg { width: 15px; height: 15px; } /* 글 + 동그란 화살표 — 참고 시안의 기본 링크 모양 */ .link-go { display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-sm); font-weight: var(--w-med); color: var(--ink); } .link-go i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 50%; transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .link-go svg { width: 14px; height: 14px; } .link-go:hover i { background: var(--primary); border-color: var(--primary); color: var(--on-dark); } .on-dark .link-go { color: var(--on-dark); } .on-dark .link-go i { border-color: var(--line-dark); } .on-dark .link-go:hover i { background: var(--paper); border-color: var(--paper); color: var(--primary); } /* ========================================================= 08 카드 ========================================================= */ .card { background: var(--paper); border-radius: var(--r-card); padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 32px) clamp(30px, 3.6vw, 46px); box-shadow: var(--shadow-card); height: 100%; } /* 아이콘은 파란 원까지 그림 안에 들어 있다 — 여기서 바탕을 씌우지 않는다 */ .card__ico { display: block; width: 56px; height: auto; margin-bottom: clamp(24px, 3vw, 38px); transition: transform var(--dur-base) var(--ease); } /* 마우스를 올리면 아이콘만 조금 커진다. 카드 바탕은 건드리지 않는다. 이 카드들은 링크가 아니므로 떠오르거나 색이 바뀌면 눌릴 것처럼 보인다. */ .card:hover .card__ico { transform: scale(1.08); } .card__title { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: 1.35; letter-spacing: -.02em; color: var(--ink); } .card__desc { font-size: var(--fs-sm); line-height: 1.7; color: var(--body); } /* 사진이 붙은 카드 — 근거 목록 */ .card-media { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .card-media__thumb { aspect-ratio: 16 / 11; background: var(--tint-2); overflow: hidden; } .card-media__thumb img { width: 100%; height: 100%; object-fit: cover; } .card-media__body { padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 10px; flex: 1; } .card-media__kind { font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--primary); } .card-media__desc { font-size: var(--fs-sm); line-height: 1.7; color: var(--muted); } a.card-media { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } a.card-media:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(20, 23, 46, .1); } /* 큰 사진 한 장 */ .figure-wide { border-radius: var(--r-card); overflow: hidden; background: var(--tint-2); } .figure-wide img { width: 100%; height: auto; } /* ========================================================= 09 나란한 구성 — 글 + 이미지 ========================================================= */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } /* span 이라 블록으로 세워야 폭·높이가 먹는다 */ .split__copy .rule { display: block; width: 34px; height: 2px; background: var(--ink); margin-bottom: 22px; } .split__copy .h1 { max-width: 14ch; } .split__copy .lead { margin-top: 18px; max-width: 46ch; } /* 버튼은 맨 아래에 온다 — 각주와 붙지 않게 사이를 벌린다 */ .split__copy .link-go { margin-top: clamp(30px, 3.8vw, 46px); } /* 각주 — 별표를 글자로 두지 않고 표식으로 붙인다. 그래야 두 줄 이상 흐를 때 들여쓰기가 맞는다. */ .notes { margin-top: clamp(18px, 2.2vw, 26px); display: grid; gap: 6px; } /* 국가별 판매·별매 고지라 안 읽히면 곤란하다. 본문과 같은 크기로 올리고 색도 본문색으로 — --muted 는 흰 바탕 대비 4.06:1 로 기준에 모자랐다. */ .notes li { position: relative; padding-left: 14px; font-size: var(--fs-body); line-height: 1.7; color: var(--body); } .notes li::before { content: "*"; position: absolute; left: 0; top: 0; } .split__art { position: relative; } .split__art img { width: 100%; height: auto; } /* ========================================================= 10 세션 ========================================================= */ /* 한 세션 = 한 판. 주제 · 연자 · 일정이 테두리 하나 안에 들어간다 — 위(주제)와 아래(연자·일정)는 가는 줄 하나로만 나뉜다. */ .ses { /* 흰 바탕 위에 한 단계 눌린 판. 바탕색만으로 세운다 — 테두리도 그림자도 쓰지 않는다. */ background: var(--tint); border-radius: var(--r-card); overflow: hidden; } /* 판과 판 사이는 판 안쪽 여백보다 넉넉히 — 세 덩어리로 끊겨 읽힌다 */ .ses + .ses { margin-top: clamp(32px, 4vw, 56px); } .ses__head { padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 44px) clamp(26px, 3vw, 38px); } .ses__pill { display: inline-block; padding: 7px 16px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-dark); font-size: var(--fs-label); font-weight: var(--w-semi); letter-spacing: var(--tr-label); text-transform: uppercase; margin-bottom: 20px; } .ses__title { font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin-bottom: 14px; } /* 읽는 글이라 한 단계 키우고 줄을 벌린다. 폭은 판이 주는 만큼 다 쓴다. */ .ses__desc { font-size: var(--fs-body); line-height: 1.85; color: var(--body); } /* 연자와 일정 — 주제 아래 가는 줄 하나로 나뉜 같은 판 */ .ses__detail { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 44px); align-items: start; padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3vw, 44px) clamp(30px, 3.4vw, 44px); border-top: 1px solid var(--line); } .ses__photo { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint-2); } .ses__photo picture { display: block; width: 100%; height: 100%; } .ses__photo img { width: 100%; height: 100%; object-fit: cover; } /* 두 줄짜리(이름+직함)라 칸 사이만 벌리고 줄 사이는 붙인다 */ /* 라벨이 14px 이 되면서 "SPEAKER" 가 96px 이다 — 6em(84px) 으로는 모자란다 */ .speaker { display: grid; grid-template-columns: minmax(0, 7.2em) minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: baseline; } .speaker__k { font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); } /* 이 판에서 가장 먼저 읽혀야 하는 값이라 한 단계 키운다 */ .speaker__v { font-size: clamp(1.125rem, 1.4vw, 1.25rem); font-weight: var(--w-bold); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); } /* 소속·직함은 이름 바로 아래, 이름과 같은 칸에 붙는다 */ .speaker__role { grid-column: 2; margin-top: 2px; font-size: var(--fs-sm); font-weight: var(--w-med); line-height: 1.5; color: var(--muted); } .schedule { margin-top: clamp(24px, 3vw, 36px); } /* 머리글은 안내일 뿐이다 — 작고 흐리게 두어 본문 값이 먼저 읽히게 한다 */ .schedule th { text-align: left; padding: 0 16px 14px 0; /* 판이 넓어 머리글이 작아 보인다 — 넓은 화면에서만 한 단계 키운다 */ font-size: .9375rem; font-weight: var(--w-semi); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); } /* 값은 한 단계 키우고 줄 간격도 벌린다. 날짜가 이 표의 주인공이다. */ .schedule td { padding: 17px 16px 17px 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; font-weight: var(--w-med); color: var(--ink); } .schedule td.t-time { color: var(--primary); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; white-space: nowrap; } .schedule td.t-where { /* 여러 줄을 rowspan 으로 합친 칸. 세로 줄 하나로 갈라 두면 날짜·시간의 가로 줄이 여기서 멈춰도 어색하지 않다. */ vertical-align: middle; text-align: center; border-left: 1px solid var(--line); padding: 17px 0 17px 16px; color: var(--muted); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; } /* 세로 줄은 머리글부터 시작한다 */ .schedule th:last-child { border-left: 1px solid var(--line); text-align: center; padding: 0 0 14px 16px; } /* ---- 근거 목록 — 한 행에 논문 하나 ---- 서지사항이 눈에 먼저 들고, 바깥으로 나가는 버튼이 오른끝에 선다. */ .pubs { display: grid; gap: clamp(16px, 1.8vw, 22px); } /* 세션 판과 같은 꼴 — 눌린 바탕만으로 세운다. 테두리·그림자 없음. 손이 올라와도 판은 그대로 두고, 안쪽 View 단추만 반응한다. */ .pub { background: var(--tint); border-radius: var(--r-card); padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px); } /* 저널 이름과 발행 연도 — 한 줄에 좌우로 갈라 놓는다 */ .pub__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(12px, 1.4vw, 16px); } .pub__journal { font-size: var(--fs-label); font-weight: var(--w-semi); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--primary); } .pub__year { font-size: var(--fs-label); font-weight: var(--w-semi); letter-spacing: var(--tr-label); color: var(--muted); flex: none; } .pub__title { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; } .pub__authors { font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); } /* doi 와 버튼 — 가는 줄 아래에서 양끝으로 */ .pub__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(20px, 2.2vw, 26px); padding-top: clamp(18px, 2vw, 22px); border-top: 1px solid var(--line); } .pub__doi { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; word-break: break-all; } .pub__go { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 11px 22px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-dark); font-size: var(--fs-sm); font-weight: var(--w-semi); transition: background var(--dur-base) var(--ease); } .pub__go:hover { background: var(--corporate); } /* 화살표는 평소 접혀 있다가 손이 올라오면 펴진다. 폭과 왼쪽 여백을 함께 되돌려야 단추가 튀지 않고 늘어난다. */ .pub__go svg { width: 0; height: 17px; opacity: 0; margin-left: -8px; flex: none; transition: width var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), margin-left var(--dur-base) var(--ease); } .pub__go:hover svg, .pub__go:focus-visible svg { width: 17px; opacity: 1; margin-left: 0; } /* 손가락으로 쓰는 화면에는 hover 가 없다 — 그냥 보여 준다 */ @media (hover: none) { .pub__go svg { width: 17px; opacity: 1; margin-left: 0; } } /* ========================================================= 11 참여 조건 ========================================================= */ /* 사진은 메인의 figure-wide 를 그대로 쓴다 — 세로 길이가 같아진다. 아래 글은 흰 상자 없이 구간 바탕 위에 바로 얹는다. */ .criteria { margin-top: clamp(32px, 4vw, 56px); text-align: center; } .criteria__mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 24px; border-radius: 50%; background: var(--check); color: var(--paper); } .criteria__mark svg { width: 20px; height: 20px; } .criteria__lead { max-width: 74ch; margin-inline: auto; } /* 두 문단으로 나뉜다 — 조건을 묻는 문장 앞에서 한 번 쉰다 */ .criteria__lead + .criteria__lead { margin-top: .9em; } /* 가장 긴 조건이 넓은 화면에서 한 줄에 들어가야 한다 — 실측 579px(점 10 + 사이 16 포함)에 서체가 바뀔 경우를 보태 640px 로 둔다. */ .criteria__list { margin-top: 28px; display: grid; gap: 14px; text-align: left; max-width: 640px; margin-inline: auto; } .criteria__list li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 16px; align-items: baseline; /* 조건은 이 판에서 가장 또렷해야 하는 값이라 본문보다 한 단계 크다 */ font-size: var(--fs-h4); font-weight: var(--w-semi); line-height: 1.55; letter-spacing: -.01em; color: var(--ink); } .criteria__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } /* 조건에 딸린 바깥 링크. 조건 글보다 한 단계 작고 가볍게 두어 조건 자체가 먼저 읽히게 한다. */ .criteria__link { display: block; margin-top: 5px; font-size: var(--fs-sm); font-weight: var(--w-med); letter-spacing: 0; color: var(--primary); } .criteria__link:hover { text-decoration: underline; } /* ========================================================= 12 폼 · 동의 ========================================================= */ .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .form__title { margin-bottom: 22px; } .field { margin-bottom: 14px; } .field__input { width: 100%; padding: 15px 18px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--tint); color: var(--ink); font: inherit; font-size: var(--fs-sm); transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); } .field__input::placeholder { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); } /* 고르는 칸도 적는 칸과 같은 꼴. 아직 안 고른 상태는 자리말처럼 흐리게 둔다. */ .field__select { appearance: none; -webkit-appearance: none; cursor: pointer; /* 자리말일 때만 글자가 13px 로 작아지므로 줄 높이를 못박아 옆 적는 칸(55px)과 높이가 어긋나지 않게 한다 */ line-height: 23px; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767D9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 16px 16px; } .field__select:invalid { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); } .field__select option { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); } .field__input:focus { background: var(--paper); border-color: var(--primary); outline: none; } .field__input[aria-invalid="true"] { border-color: var(--error); background: var(--paper); } .field__error { display: none; margin-top: 7px; font-size: var(--fs-xs); color: var(--error); } .field__input[aria-invalid="true"] + .field__error { display: block; } .req { color: var(--error); } /* ---- 회차 (워크숍 v2) ---- 세션 페이지와 같이 판 하나에 회차 하나. 위에서 아래로 쌓는다. 알약과 표는 세션 페이지 것을 그대로 쓴다 — 여기서는 여백만 정한다. */ .days { padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 44px) clamp(30px, 3.4vw, 44px); } /* 회차 사이는 줄이 아니라 여백으로만 나눈다 */ .day + .day { margin-top: clamp(40px, 5vw, 68px); } .day .ses__pill { margin-bottom: clamp(20px, 2.4vw, 28px); } .day .schedule { margin-top: 0; } /* 세 칸을 똑같이 나눈다 — 글 길이에 따라 칸 너비가 들쭉날쭉하지 않게 */ .day .schedule { table-layout: fixed; } .day .schedule th, .day .schedule td { width: 33.3333%; } /* ---- 고르는 칸 — 브라우저 기본 목록 대신 우리 모양 ---- 단추는 원래