/* BASIC css start */
/* ==========================================================================
2026 SSF 행사 유의 사항 모듈 (PC·모바일 공용) HTML: shared/html/event-caution26.html
· 이 파일 하나로 동작함(메인 CSS 없이도). 메인 페이지, 리스트 페이지 등 어디에 넣어도 같은 모양.
· 값은 메인 페이지(shared/css/main-event26.css)의 토큰 값을 그대로 가져왔고, 이름은 --cau* 로 바꿔 이 모듈 안에서만 씀
(페이지의 다른 토큰과 섞이지 않게). 메인 쪽 값을 바꾸면 여기도 같이 맞출 것.
· 구성: 1 토큰(PC) → 2 섹션 → 3 타이틀(영문 + 별 장식 + 한글 소제목) → 4 안내문 박스 → 5 태블릿·모바일(1023px 이하)
· 폭 600px 미만에서만 한글 소제목의
이 적용됨(
앞에 공백을 둘 것).
========================================================================== */
/* ---------- 1. 토큰 (PC) ---------- */
.eventCaution {
/* 색 */
--cauRed: #b9232c; /* 타이틀·장식·강조 */
--cauSub: #dc4650; /* 소제목 검은 배경에서 대비 4.5:1 이상 */
--cauIvory: #e6d9c3; /* 본문 */
/* 여백 스케일 */
--cauSp1: 0.5rem;
--cauSp2: 0.75rem;
--cauSp3: 1.25rem;
--cauSp4: 2rem;
--cauSp5: 3.5rem;
--cauSp6: 5rem;
--cauSp7: 8rem;
--cauSectionY: var(--cauSp7); /* 섹션 위아래 */
--cauBlockGap: var(--cauSp6); /* 타이틀 ↔ 본문 */
--cauGutter: 2rem; /* 화면 좌우 여백(박스 바깥) */
/* 글자 크기·줄 높이 */
--cauFsTitle: 4.5rem;
--cauFsHead: 1.5rem;
--cauFsLead: 1.0625rem;
--cauFsBody: 0.9375rem;
--cauFsSmall: 0.8125rem;
--cauLhHead: normal;
--cauLhLead: normal;
--cauLhBody: 1.75;
--cauFont: "Fraunces", "Noto Sans KR", sans-serif;
/* 타이틀 장식: 장평 75%, 글자 폭(CAUTION)에 맞춘 별 장식 */
--cauTitleScaleX: 0.75;
--cauTitleW: 3.44;
--cauStarW: 9rem;
--cauStarRatio: 10;
--cauTitlePadX: calc(var(--cauStarW) + 2rem);
--cauRuleInset: calc(var(--cauStarW) * 2 + 2rem);
--cauStar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M10.00,0.60 L11.76,5.57 L17.04,5.71 L12.85,8.93 L14.35,13.99 L10.00,11.00 L5.65,13.99 L7.15,8.93 L2.96,5.71 L8.24,5.57Z'/%3E%3Cpath d='M30.00,0.60 L31.76,5.57 L37.04,5.71 L32.85,8.93 L34.35,13.99 L30.00,11.00 L25.65,13.99 L27.15,8.93 L22.96,5.71 L28.24,5.57Z'/%3E%3Cpath d='M50.00,0.60 L51.76,5.57 L57.04,5.71 L52.85,8.93 L54.35,13.99 L50.00,11.00 L45.65,13.99 L47.15,8.93 L42.96,5.71 L48.24,5.57Z'/%3E%3Cpath d='M70.00,0.60 L71.76,5.57 L77.04,5.71 L72.85,8.93 L74.35,13.99 L70.00,11.00 L65.65,13.99 L67.15,8.93 L62.96,5.71 L68.24,5.57Z'/%3E%3Cpath d='M90.00,0.60 L91.76,5.57 L97.04,5.71 L92.85,8.93 L94.35,13.99 L90.00,11.00 L85.65,13.99 L87.15,8.93 L82.96,5.71 L88.24,5.57Z'/%3E%3Cpath d='M110.00,0.60 L111.76,5.57 L117.04,5.71 L112.85,8.93 L114.35,13.99 L110.00,11.00 L105.65,13.99 L107.15,8.93 L102.96,5.71 L108.24,5.57Z'/%3E%3Cpath d='M130.00,0.60 L131.76,5.57 L137.04,5.71 L132.85,8.93 L134.35,13.99 L130.00,11.00 L125.65,13.99 L127.15,8.93 L122.96,5.71 L128.24,5.57Z'/%3E%3Cpath d='M150.00,0.60 L151.76,5.57 L157.04,5.71 L152.85,8.93 L154.35,13.99 L150.00,11.00 L145.65,13.99 L147.15,8.93 L142.96,5.71 L148.24,5.57Z'/%3E%3C/g%3E%3C/svg%3E");
--cauFleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cg fill='%23000'%3E%3Cpath d='M40 1.5 44.5 6 40 10.5 35.5 6Z'/%3E%3Cpath d='M26 6 31 3.2V8.8Z'/%3E%3Cpath d='M54 6 49 3.2V8.8Z'/%3E%3Ccircle cx='34' cy='6' r='1.1'/%3E%3Ccircle cx='46' cy='6' r='1.1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M31 6C27 0.5 20 1 20 4 20 6 23 6 23 4.2'/%3E%3Cpath d='M49 6C53 0.5 60 1 60 4 60 6 57 6 57 4.2'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------- 2. 섹션 ---------- */
.eventCaution {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
gap: var(--cauBlockGap);
padding: var(--cauSectionY) 0;
background: linear-gradient(#0b0103 0%, #000 100%); /* 붉은 영역 다음의 검은 구간 */
font-family: var(--cauFont);
}
/* ---------- 3. 타이틀 한글 소제목이 위, 영문 타이틀이 아래. 장식(별 + 위아래 줄)은 h2::before 하나로 그림 ---------- */
.eventCaution .contentTitle {
display: flex;
flex-flow: column-reverse nowrap;
align-items: center;
gap: var(--cauSp3);
text-align: center;
}
.eventCaution .contentTitle h2 {
position: relative;
/* 장평으로 글자 폭이 달라진 만큼((배율-1)/2 × 글자 폭) 좌우 여백을 보정해서 별 장식과 간격 유지 */
padding: var(--cauSp4)
calc(
var(--cauTitlePadX) + (var(--cauTitleScaleX) - 1) / 2 * 1em *
var(--cauTitleW)
);
font-family: var(--cauFont);
font-size: var(--cauFsTitle);
font-style: italic;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
letter-spacing: -0.03em;
word-spacing: 0.25em; /* 자간을 좁히면 단어 사이도 붙어버려서 단어 간격만 보정 */
white-space: nowrap;
color: var(--cauRed);
transform: scaleX(var(--cauTitleScaleX));
}
.eventCaution .contentTitle h2::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-color: currentColor;
-webkit-mask-image:
var(--cauStar), var(--cauStar), linear-gradient(#000, #000),
var(--cauFleuron), linear-gradient(#000, #000), var(--cauFleuron);
mask-image:
var(--cauStar), var(--cauStar), linear-gradient(#000, #000),
var(--cauFleuron), linear-gradient(#000, #000), var(--cauFleuron);
-webkit-mask-position:
left center,
right center,
center top 5.5px,
center top,
center bottom 5.5px,
center bottom;
mask-position:
left center,
right center,
center top 5.5px,
center top,
center bottom 5.5px,
center bottom;
-webkit-mask-size:
var(--cauStarW) calc(var(--cauStarW) / var(--cauStarRatio)),
var(--cauStarW) calc(var(--cauStarW) / var(--cauStarRatio)),
calc(100% - var(--cauRuleInset)) 1px,
80px 12px,
calc(100% - var(--cauRuleInset)) 1px,
80px 12px;
mask-size:
var(--cauStarW) calc(var(--cauStarW) / var(--cauStarRatio)),
var(--cauStarW) calc(var(--cauStarW) / var(--cauStarRatio)),
calc(100% - var(--cauRuleInset)) 1px,
80px 12px,
calc(100% - var(--cauRuleInset)) 1px,
80px 12px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transform: scaleX(
calc(1 / var(--cauTitleScaleX))
); /* 부모의 장평을 상쇄해 장식은 원래 크기 */
}
.eventCaution .contentTitle h4 {
font-family: var(--cauFont);
font-size: var(--cauFsLead);
font-style: normal;
font-weight: 500;
line-height: var(--cauLhLead);
letter-spacing: 0.04em;
color: var(--cauSub);
}
/* 한글 소제목의 강제 줄바꿈(
)은 폰처럼 좁을 때(600px 미만)만 적용 */
.eventCaution .contentTitle h4 br {
display: none;
}
@media (max-width: 599px) {
.eventCaution .contentTitle h4 br {
display: inline;
}
}
/* ---------- 4. 안내문 박스 이중 테두리를 두른 극장 안내문 ---------- */
.eventCaution ul {
width: min(100% - var(--cauGutter) * 2, 62rem);
padding: var(--cauSp5);
border: 1px solid rgba(185, 35, 44, 0.55);
outline: 1px solid rgba(185, 35, 44, 0.22);
outline-offset: 0.5rem;
border-radius: 0;
background: rgba(255, 255, 255, 0.02);
}
.eventCaution ul h5 {
margin: var(--cauSp4) 0 var(--cauSp2) 0;
padding-bottom: var(--cauSp2);
border-bottom: 1px solid rgba(185, 35, 44, 0.35);
font-family: var(--cauFont);
font-size: var(--cauFsHead);
font-style: italic;
font-weight: 600;
line-height: var(--cauLhHead);
letter-spacing: 0.02em;
color: var(--cauRed);
}
.eventCaution ul h5:first-child {
margin-top: 0;
}
.eventCaution ul h5::before {
content: "★";
margin-right: var(--cauSp1);
font-size: var(--cauFsSmall);
font-style: normal;
vertical-align: 0.2em;
}
.eventCaution ul li {
position: relative;
margin: var(--cauSp1) 0 var(--cauSp1) var(--cauSp3);
padding-left: var(--cauSp3);
list-style: none;
font-family: var(--cauFont);
font-size: var(--cauFsBody);
font-weight: 400;
line-height: var(--cauLhBody);
color: var(--cauIvory) !important; /* 페이지 전체에 걸린 글씨색 규칙(.xxx *)보다 우선 */
}
.eventCaution ul li::before {
content: "";
position: absolute;
top: 0.8em;
left: 0;
width: 0.5rem;
height: 1px;
background: var(--cauRed);
}
/* ---------- 5. 태블릿·모바일 (1023px 이하) 글씨 5단계(Title 34 · Head 18 · Lead 14 · Body 13 · Small 11), 여백은 4px 배수 ---------- */
@media (max-width: 1023px) {
.eventCaution {
--cauSp1: 0.5rem; /* 8 */
--cauSp2: 0.75rem; /* 12 */
--cauSp3: 1rem; /* 16 */
--cauSp4: 1.5rem; /* 24 */
--cauSp5: 2rem; /* 32 */
--cauSp6: 2.5rem; /* 40 타이틀 ↔ 본문 */
--cauSp7: 4rem; /* 64 섹션 위아래 */
--cauGutter: 1.25rem; /* 20 화면 좌우 여백 */
--cauFsTitle: clamp(2rem, 9vw, 3rem);
--cauFsHead: 1.125rem; /* 18 */
--cauFsLead: 0.875rem; /* 14 */
--cauFsBody: 0.8125rem; /* 13 */
--cauFsSmall: 0.6875rem; /* 11 */
--cauLhHead: 1.3;
--cauLhLead: 1.5;
--cauLhBody: 1.6;
--cauStarW: clamp(3.5rem, 15vw, 6.5rem);
--cauStarRatio: 5; /* 모바일은 별을 양옆 4개씩만(PC는 8개) */
--cauStar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M10.00,0.60 L11.76,5.57 L17.04,5.71 L12.85,8.93 L14.35,13.99 L10.00,11.00 L5.65,13.99 L7.15,8.93 L2.96,5.71 L8.24,5.57Z'/%3E%3Cpath d='M30.00,0.60 L31.76,5.57 L37.04,5.71 L32.85,8.93 L34.35,13.99 L30.00,11.00 L25.65,13.99 L27.15,8.93 L22.96,5.71 L28.24,5.57Z'/%3E%3Cpath d='M50.00,0.60 L51.76,5.57 L57.04,5.71 L52.85,8.93 L54.35,13.99 L50.00,11.00 L45.65,13.99 L47.15,8.93 L42.96,5.71 L48.24,5.57Z'/%3E%3Cpath d='M70.00,0.60 L71.76,5.57 L77.04,5.71 L72.85,8.93 L74.35,13.99 L70.00,11.00 L65.65,13.99 L67.15,8.93 L62.96,5.71 L68.24,5.57Z'/%3E%3C/g%3E%3C/svg%3E");
--cauTitlePadX: calc(var(--cauStarW) + 0.75rem);
--cauRuleInset: calc(var(--cauStarW) * 2 + 1rem);
}
.eventCaution .contentTitle {
gap: var(--cauSp2);
}
.eventCaution .contentTitle h2 {
padding-top: var(--cauSp3);
padding-bottom: var(--cauSp3);
}
.eventCaution .contentTitle h4 {
padding: 0 var(--cauGutter);
word-break: keep-all; /* 한글은 단어 단위로만 끊고 */
text-wrap: balance; /* 두 줄이 되면 줄 길이를 고르게 */
}
.eventCaution ul {
padding: var(--cauSp4) var(--cauGutter);
outline-offset: 0.3rem;
}
.eventCaution ul h5 {
margin: var(--cauSp5) 0 var(--cauSp2) 0;
font-weight: 700; /* 20px 이상 굵은 글씨는 큰 글씨 기준(3:1)을 적용받음 */
color: var(--cauSub); /* 기본 붉은색보다 한 단계 밝게 */
}
.eventCaution ul h5:first-child {
margin-top: 0;
}
.eventCaution ul li {
margin: 0.375rem 0;
word-break: keep-all;
text-wrap: pretty; /* 마지막 줄에 한 단어만 남지 않게 */
}
.eventCaution ul li::before {
top: calc(var(--cauLhBody) * 0.5em); /* 첫 줄 가운데 높이 */
}
.eventCaution ul li br {
display: none; /* PC 폭에 맞춘 강제 줄바꿈은 좁은 화면에서 어색하게 끊겨서 뺌 */
}
}
/* BASIC css end */