로 한 번 감싸 넣지만, 대회기록조회처럼 화면이
본문을 직접 들고 있는 곳은
바로 아래가 첫 블록이다 — 그쪽은 이 규칙에 안 걸려
제목 위 2rem이 그대로 남았고, 사이드바 상자와 단차가 생겼다(2026-09-25 사용자 지적).
두 모양을 다 잡는다. */
.entry-site-main > :first-child,
.entry-site-main > div > :first-child,
.entry-site-main > :first-child > .entry-site-block-title:first-child,
.entry-site-main > div > :first-child > .entry-site-block-title:first-child {
margin-top: 0;
}
.entry-site-text {
font-size: 0.95rem;
line-height: 1.8;
}
/* 큰 이미지 블록 — 사진 위에 글자를 얹지 않고 아래에 둔다(사진 밝기에 따라 글자가 묻히는
일을 피하려는 선택). */
.entry-site-hero {
margin: 0;
border-radius: 12px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
}
.entry-site-hero-image {
display: block;
width: 100%;
height: auto;
}
.entry-site-hero-body {
padding: 1.5rem;
}
.entry-site-hero-title {
margin: 0 0 0.5rem;
font-size: 1.7rem;
}
.entry-site-hero-subtitle {
margin: 0 0 1.2rem;
color: var(--text-muted);
}
.entry-site-button {
display: inline-block;
padding: 0.75rem 1.4rem;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--accent);
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.entry-site-button-primary,
.entry-site-hero-body .entry-site-button {
background: var(--accent);
border-color: var(--accent);
color: #ffffff;
}
.entry-site-button-row {
text-align: center;
}
.entry-site-figure {
margin: 0 0 2rem;
}
.entry-site-image,
.entry-site-inline-image {
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
.entry-site-caption {
margin: 0.5rem 0 0;
color: var(--text-muted);
font-size: 0.85rem;
}
.entry-site-contact-list {
display: grid;
grid-template-columns: 5rem 1fr;
gap: 0.4rem 1rem;
margin: 0;
font-size: 0.9rem;
}
.entry-site-contact-list dt {
color: var(--text-muted);
}
.entry-site-contact-list dd {
margin: 0;
}
/* 서버가 검색 로봇용으로 미리 넣어 둔 본문(lib/sitePrerender.js) — 화면 스크립트가 제 모양으로 바꿔 끼울 때까지 감춘다. */
[data-prerendered] {
display: none;
}
.entry-site-status {
color: var(--text-muted);
}
/* --- 2차로 추가한 블록들(카운트다운·FAQ·후원사·장소·영상·구분선) ------------------- */
/* 대회 홈페이지 표 블록(2026-09-18 사용자 지시) — 모서리는 아래 카드와 같은 12px 라운드,
항목 제목 줄은 가운데 정렬에 아래 실선을 굵게, 칸 위·아래 여백은 4px씩 더 준다.
쏘톡 다른 화면이 쓰는 .markdown-table은 건드리지 않는다. */
.entry-site-table-wrap {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.markdown-table.entry-site-table th,
.markdown-table.entry-site-table td {
border: 0;
border-bottom: 1px solid var(--border);
padding: calc(0.45rem + 4px) 0.8rem;
vertical-align: middle;
}
/* 세로선은 칸의 실제 열 자리(둘째 열부터)에 긋는다 — 세로로 병합한 칸 옆 행들에서 선이 빠지지 않게(2026-10-04). */
.markdown-table.entry-site-table .has-left-line {
border-left: 1px solid var(--border);
}
.markdown-table.entry-site-table th {
text-align: center;
border-bottom: 2px solid var(--text-muted);
}
.markdown-table.entry-site-table tbody tr:last-child td,
.markdown-table.entry-site-table tbody td.reaches-bottom {
border-bottom: 0;
}
.entry-site-countdown {
text-align: center;
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
/* 숫자는 제목 등급 — 블록 제목과 같은 크기, 제목 글꼴·굵기를 따른다(2026-10-14 대표님). */
.entry-site-countdown-clock {
font-size: 1.25rem;
font-weight: 800;
font-variant-numeric: tabular-nums; /* 숫자가 바뀔 때 폭이 흔들리지 않게 */
/* 복합 블록에서 상자 글자색을 정하면 그 색이 먼저다(어두운 상자에서 숫자가 묻히지 않게).
그다음이 페이지마다 따로 정하는 카운트다운 숫자색(2026-09-24 사용자 지시),
아무것도 없으면 강조색을 따른다. */
color: var(--section-card-text, var(--entry-site-countdown-color, var(--accent)));
}
.entry-site-countdown-clock.done {
font-size: 1.2rem;
color: var(--text-muted);
}
/* 카카오맵 지도(2026-09-24 사용자 지시) — 퍼가기 코드가 640px 같은 고정 폭을 심어도
PC·폰 모두 담긴 폭을 그대로 채우게 한다. 안쪽 요소까지 눌러 둬야 폰에서 안 잘린다. */
.entry-site-kakaomap {
width: 100%;
overflow: hidden;
border-radius: 10px;
}
/* 이미지 지도 — 카카오맵이 기본으로 주는 그림 한 장. 고정 폭(504px)이 박혀 나오므로
담긴 폭을 채우되 비율은 그대로 두고, 누르면 카카오맵으로 간다는 것을 커서로 알린다. */
.entry-site-kakaomap-image {
display: block;
width: 100%;
height: auto;
}
.entry-site-kakaomap a {
display: block;
cursor: pointer;
}
.entry-site-kakaomap .root_daum_roughmap,
.entry-site-kakaomap .root_daum_roughmap .wrap_map,
.entry-site-kakaomap .root_daum_roughmap .wrap_controllers,
.entry-site-kakaomap .root_daum_roughmap iframe {
/* 지도 안 그림(img)은 건드리지 않는다 — 카카오 지도 조각(256px)까지 100%로 눌려 폭 0이 되어 지도가 비어 보였다(2026-10-15). */
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.entry-site-kakaomap .root_daum_roughmap .wrap_map {
height: 360px !important;
}
@media (max-width: 799px) {
.entry-site-kakaomap .root_daum_roughmap .wrap_map {
height: 260px !important;
}
}
/* 장소 블록 단추 줄(2026-10-15) — [지도 보기] [길찾기]. 폰에서도 한 줄. */
.entry-site-map-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 일정 블록(2026-10-04) — 날짜 줄 아래 시간 | 제목·설명. 지난 날은 흐리게. */
.entry-site-schedule-list,
.entry-site-schedule-items {
list-style: none;
margin: 0;
padding: 0;
}
.entry-site-schedule-day + .entry-site-schedule-day {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.entry-site-schedule-day.is-past {
opacity: 0.55;
}
.entry-site-schedule-date {
display: block;
margin-bottom: 0.5rem;
color: var(--accent);
font-weight: 700;
}
.entry-site-schedule-item {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: 0.75rem;
padding: 0.3rem 0;
}
.entry-site-schedule-time {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.entry-site-schedule-title {
display: block;
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-schedule-note {
margin: 0.2rem 0 0;
color: var(--text-muted);
line-height: 1.6;
white-space: pre-wrap;
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-schedule.is-untimed .entry-site-schedule-item {
grid-template-columns: minmax(0, 1fr);
}
.entry-site-schedule.is-untimed .entry-site-schedule-time {
display: none;
}
/* 폰에서는 시간을 제목 위 한 줄로 올린다 — 옆에 칸을 두면 제목이 몇 글자씩 꺾인다. */
@media (max-width: 599px) {
.entry-site-schedule:not(.is-untimed) .entry-site-schedule-item {
grid-template-columns: minmax(0, 1fr);
gap: 0.1rem;
}
.entry-site-schedule-time {
font-size: 0.85rem;
}
.entry-site-schedule-time:empty {
display: none;
}
}
/* 패턴 문장+사진 블록(2026-10-05) — 묶음마다 위 문장 → 사진(3장까지) → 아래 문장. 문장은 일정 블록과 같은 모양(소제목 줄, 항목명 | 내용·설명). */
.entry-site-pattern-group + .entry-site-pattern-group {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.entry-site-pattern-heading {
margin: 0 0 0.5rem;
color: var(--accent);
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
.entry-site-pattern-row {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: 0.75rem;
padding: 0.3rem 0;
}
.entry-site-pattern-row.is-unlabelled {
grid-template-columns: minmax(0, 1fr);
}
.entry-site-pattern-label {
color: var(--text-muted);
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-pattern-title {
display: block;
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-pattern-note {
margin: 0.2rem 0 0;
color: var(--text-muted);
line-height: 1.7;
white-space: pre-wrap;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* 사진은 장수만큼 칸을 나눠 나란히 — 자르지 않고 원래 크기로, 칸보다 크면 칸 폭에 맞춰 줄인다(2026-10-19 대표님). */
/* 사진은 왼쪽부터 붙여 늘어놓는다(사이는 12px, 2026-10-19 대표님). 한 장이 차지할 수 있는 폭은 장수만큼 나눈 몫까지. */
.entry-site-pattern-photos {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
margin: 0.8rem 0;
}
.entry-site-pattern-photos.is-count-2 .entry-site-pattern-photo {
max-width: calc((100% - 12px) / 2);
}
.entry-site-pattern-photos.is-count-3 .entry-site-pattern-photo {
max-width: calc((100% - 24px) / 3);
}
.entry-site-pattern-photo {
display: block;
flex: 0 1 auto;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
overflow: hidden;
cursor: zoom-in;
}
.entry-site-pattern-photo img {
display: block;
width: auto;
max-width: 100%;
height: auto;
}
.entry-site-pattern-group > :first-child {
margin-top: 0;
}
.entry-site-pattern-group > :last-child {
margin-bottom: 0;
}
/* 폰에서는 항목명을 내용 위 한 줄로 올린다(일정 블록과 같다). 사진은 나란히 둔 채 누르면 크게 본다. */
@media (max-width: 599px) {
.entry-site-pattern-row {
grid-template-columns: minmax(0, 1fr);
gap: 0.1rem;
}
.entry-site-pattern-label {
font-size: 0.85rem;
}
/* 폰에서는 사진을 한 장씩 아래로 쌓는다(2026-10-06 대표님) — 세 장을 나란히 두면 너무 작아 무슨 사진인지 안 보인다. */
.entry-site-pattern-photos.is-count-2,
.entry-site-pattern-photos.is-count-3 {
flex-direction: column;
gap: 0.5rem;
}
.entry-site-pattern-photos.is-count-2 .entry-site-pattern-photo,
.entry-site-pattern-photos.is-count-3 .entry-site-pattern-photo {
max-width: 100%;
}
}
.entry-site-faq-item {
border-bottom: 1px solid var(--border);
padding: 0.7rem 0;
}
.entry-site-faq-question {
cursor: pointer;
font-weight: 600;
}
.entry-site-faq-answer {
margin-top: 0.5rem;
color: var(--text-muted);
line-height: 1.7;
white-space: pre-wrap; /* 답변에 넣은 줄바꿈을 살린다 */
}
.entry-site-sponsor-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.entry-site-sponsor-logo {
max-height: 56px;
max-width: 160px;
object-fit: contain;
}
.entry-site-map-place {
margin: 0 0 0.2rem;
font-weight: 600;
}
.entry-site-map-address {
margin: 0 0 1rem;
color: var(--text-muted);
}
/* 영상은 16:9를 유지하며 칸 폭에 맞춘다. */
.entry-site-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
background: #000000;
}
.entry-site-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.entry-site-divider {
margin: 2.5rem 0;
border: 0;
border-top: 1px solid var(--border);
}
/* 페이지마다 고를 수 있는 제목 글꼴(entry-site.js가 body에 클래스를 붙인다). */
.entry-site-font-kopub h1,
.entry-site-font-kopub h2,
.entry-site-font-kopub .entry-site-hero-title {
font-family: 'KoPubWorld 돋움체', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
.entry-site-font-pretendard h1,
.entry-site-font-pretendard h2,
.entry-site-font-pretendard .entry-site-hero-title {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
font-weight: 800;
}
.entry-site-footer {
border-top: 1px solid var(--border);
background: var(--surface);
}
.entry-site-footer-inner {
padding-top: 1.5rem;
padding-bottom: 2rem;
text-align: center;
}
.entry-site-footer-apply {
display: inline-block;
margin-bottom: 0.8rem;
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.entry-site-footer-note {
margin: 0;
color: var(--text-muted);
font-size: 0.8rem;
}
/* 대회명 / 제공 안내를 각각 한 줄로. */
.entry-site-footer-line {
display: block;
}
/* --- 폰 하단 고정 바(카톡문의·전화) ------------------------------------------------
넓은 화면에서는 나오지 않는다(아래 미디어쿼리에서 켠다) — 마우스로 보는 화면에서는
전화번호를 눌러 걸 일이 없고, 바가 본문을 가리는 손해만 남는다. */
.entry-site-quick-bar {
display: none;
}
/* hidden 속성만으로는 안 숨는다 — 브라우저 기본 [hidden]{display:none}보다 아래
.entry-site-quick-btn의 display가 이기기 때문이다(카카오 채널을 안 넣은 대회에서
빈 [카톡문의] 버튼이 그대로 보였다). */
.entry-site-quick-bar [hidden] {
display: none;
}
.entry-site-quick-btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
min-width: 0;
height: 52px;
padding: 0;
border: 0;
background: none;
color: #333333;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.entry-site-quick-btn:active {
opacity: 0.6;
}
/* 이메일 복사 알림 — 바 바로 위에 잠깐. */
.entry-site-quick-toast {
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
width: max-content;
max-width: calc(100vw - 40px);
margin: 0;
padding: 8px 14px;
border-radius: 999px;
background: rgba(17, 24, 39, 0.88);
color: #ffffff;
font-size: 0.82rem;
line-height: 1.4;
text-align: center;
overflow-wrap: anywhere;
}
.entry-site-quick-toast[hidden] {
display: none;
}
@media (max-width: 799px) {
/* 폰에서는 메뉴 줄이 대회명 아래로 접혀 헤더가 두 줄이 됐다(고정 헤더라 그만큼 본문이
가려진다) — 버튼을 눌렀을 때만 헤더 아래로 펼쳐지는 목록으로 바꾼다. */
.entry-site-menu-btn {
display: inline-flex;
order: -1;
}
.entry-site-header-inner {
flex-wrap: nowrap;
gap: 0.6rem;
}
/* 고정 헤더라 대회명이 두 줄로 늘어나면 그만큼 본문이 계속 가려진다 — 한 줄로 묶고
넘치면 말줄임으로 자른다(전체 이름은 바닥글에 그대로 있다). */
.entry-site-brand {
flex: 1;
min-width: 0;
font-size: 1rem;
white-space: nowrap;
}
.entry-site-brand span {
overflow: hidden;
text-overflow: ellipsis;
}
.entry-site-nav {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
background: var(--surface);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
/* 메뉴가 화면보다 길면 서랍 안에서 굴린다 — 높이는 entrySiteHeader.js fitDrawer가 하단 고정 바 위까지로 맞춘다. */
overflow-y: auto;
overscroll-behavior: contain;
}
body.entry-site-menu-open .entry-site-nav {
display: flex;
}
.entry-site-nav-link {
padding: 0.8rem 1.5rem;
border-radius: 0;
font-size: 1rem;
}
/* 참가신청은 목록 안에서도 눌러야 하는 버튼처럼 보이게 둔다. */
.entry-site-nav-apply {
margin: 0.4rem 1.5rem 0.2rem;
padding: 0.7rem 1rem;
border-radius: 8px;
text-align: center;
}
/* 2026-09-18 홈페이지 빌더 — 폰에서는 하위 메뉴를 서랍 안에 들여쓰고, PC용 LNB 줄은 감춘다. */
.entry-site-nav-group {
display: flex;
flex-direction: column;
/* 서랍에서는 가로로 가운데 모으지 않고 왼쪽 줄에 맞춘다(PC 가로 메뉴용 정렬을 되돌린다). */
align-items: stretch;
}
/* 서랍 안에서는 떠 있는 목록이 아니라 상위 메뉴 아래 들여쓴 줄로 되돌린다(2026-09-23). */
.entry-site-nav-sub {
display: flex;
flex-direction: column;
position: static;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.entry-site-nav-sub::before {
display: none;
}
/* 비주얼(사진) 위에 머리말이 얹힌 사이트에서는 위쪽 'body.entry-site-visual-overlay …' 규칙이
더 강해서, 폰 서랍에서도 PC 드롭다운용 여백(0.7rem)을 그대로 쓰고 있었다 — 하위 메뉴가
상위 메뉴보다 왼쪽으로 튀어나왔다(2026-09-23 사용자 확인). 같은 선택자로 한 번 더 적어
서랍 들여쓰기가 이기게 한다. */
.entry-site-nav-sub .entry-site-nav-subself,
body.entry-site-visual-overlay .entry-site-header .entry-site-nav-sub .entry-site-nav-subself {
display: block;
}
.entry-site-nav-sub .entry-site-nav-sublink,
body.entry-site-visual-overlay .entry-site-header .entry-site-nav-sub .entry-site-nav-sublink {
padding: 0.8rem 1.5rem 0.8rem 2.6rem;
border-radius: 0;
font-size: 0.95rem;
color: var(--text-muted);
white-space: normal;
}
.entry-site-nav-sublink {
padding-left: 2.6rem;
font-size: 0.95rem;
color: var(--text-muted);
}
.entry-site-lnb {
display: none;
}
/* 폰 서랍은 흰 바탕이라 비주얼용 흰 글씨를 그대로 쓰면 글자가 안 보인다 —
서랍 안에서는 기본 글자색(또는 주관회원이 고른 메뉴 색)으로 돌린다. */
body.entry-site-visual-overlay .entry-site-header .entry-site-nav .entry-site-nav-link,
body.entry-site-visual-overlay .entry-site-header .entry-site-nav .entry-site-nav-sublink {
color: var(--entry-site-menu-color, var(--text));
text-shadow: none;
}
body.entry-site-visual-overlay .entry-site-header .entry-site-nav .entry-site-nav-apply {
color: #ffffff;
}
/* 로그인은 서랍 맨 위(사용자 지시: 모바일에서는 햄버거 메뉴 상부). */
.entry-site-nav-login-mobile,
.entry-site-logout-btn-mobile {
display: block;
margin: 0.2rem 1.5rem 0.4rem;
padding: 0.55rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
text-align: center;
font-size: 0.95rem;
}
.entry-site-logout-btn-mobile {
width: calc(100% - 3rem);
box-sizing: border-box;
}
/* 메뉴 01의 가운데 정렬은 폰에서 로고·햄버거 한 줄로 되돌린다. */
.entry-site-header-center .entry-site-header-inner {
flex-direction: row;
}
/* 햄버거 위치(왼쪽/오른쪽) — 사이트 설정에 따라 순서만 바꾼다. */
.entry-site-header-menu-right .entry-site-menu-btn {
order: 1;
}
.entry-site-header-menu-right .entry-site-brand {
order: 0;
}
.entry-site-header-center.entry-site-header-menu-right .entry-site-brand {
text-align: center;
justify-content: center;
}
.entry-site-header-center.entry-site-header-menu-left .entry-site-brand {
justify-content: center;
}
/* 비주얼은 폰에서 따로 정한 높이로(설정에서 PC와 따로 고른다). */
.entry-site-visual {
height: var(--visual-height-mobile, 260px);
}
/* 폰에서 화면 높이에 꽉 채우기(2026-10-30) — 주소창이 접히고 펴져도 맞게 svh, 안 되는 폰은 vh. */
.entry-site-visual.entry-site-visual-fill-mobile {
height: calc(100vh - var(--visual-fill-offset, 0px));
height: calc(100svh - var(--visual-fill-offset, 0px));
border-radius: 0;
}
.entry-site-banner-line {
font-size: 1.15rem;
}
.entry-site-banner-line:nth-child(2) {
font-size: calc(1.45rem + 1pt);
}
.entry-site-banner-line:nth-child(3) {
font-size: calc(0.95rem + 1pt);
}
/* 서브 사이드바는 감추고 본문만(같은 메뉴는 햄버거 안에 있다). */
.entry-site-layout.entry-site-layout-left,
.entry-site-layout.entry-site-layout-right {
grid-template-columns: minmax(0, 1fr);
}
.entry-site-sidebar {
display: none;
}
.entry-site-header-inner {
position: relative;
}
.entry-site-footer-contact {
display: none;
}
/* 알약 모양으로 떠 있다(2026-10-23 대표님) — 흰 바탕, 테두리 없이 그림자. 아이폰 아래 막대 자리만큼 더 띄운다. */
.entry-site-quick-bar {
display: flex;
position: fixed;
left: 16px;
right: 16px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 30;
max-width: 440px;
margin: 0 auto;
padding: 0 8px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.16), 0 1px 4px rgba(15, 23, 42, 0.08);
}
/* 고정 바가 바닥글 마지막 줄을 가리지 않게 그만큼 자리를 비운다 — 바가 실제로 나오는
대회만(연락 수단이 없으면 빈 띠만 남는다). */
body.entry-site-quick-bar-on {
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
}
/* 공급 계약한 대회사 브랜드로 나가는 접수 화면(entryBranding.js) — 쏘톡 서비스 메뉴를
감춘다. 헤더가 로그인 상태·'+ 기능' 메뉴를 받아온 뒤 다시 그리기 때문에, 속성으로
감추면 되살아난다. 그래서 본문 클래스 + CSS로 못 박는다. */
/* 대회 페이지를 만든 대회의 접수 화면(접수 전용 주소) — 쏘톡 머리말 대신 대회 머리말을
쓴다(entrySiteNav.js가 이 클래스를 붙인다). 같은 대회인데 화면마다 위쪽이 달라지지
않게 하려는 것이고, 푸터는 그대로 둔다. */
body.entry-site-chrome .site-header {
display: none !important;
}
/* 접수 전용 주소(entry.ssotalk.com)에서 열린 접수 화면도 같은 것들을 감춘다
(entryHostChrome.js) — 접수하러 온 사람에게 쏘톡의 다른 서비스·계정 메뉴는 길만 흐린다.
푸터는 그대로 둔다. */
body.entry-host .header-desktop-nav,
body.entry-host .header-full-menu,
body.entry-host .header-menu-btn,
body.entry-host .header-signup-nav,
body.entry-host #headerLoginLink,
body.entry-host #headerMypageLink,
body.entry-host #headerLogoutBtn,
body.entry-host .header-divider,
body.entry-host .header-tagline-row,
body.entry-brand .header-desktop-nav,
body.entry-brand .header-full-menu,
body.entry-brand .header-menu-btn,
body.entry-brand .header-signup-nav,
body.entry-brand #headerLoginLink,
body.entry-brand #headerMypageLink,
body.entry-brand #headerLogoutBtn,
body.entry-brand #countryBadge,
body.entry-brand .header-divider,
body.entry-brand .header-tagline-row {
display: none !important;
}
/* '+ 기능' 하위 페이지(쏘폼접수빌더·카드 만들기·admin에서 만든 페이지)는 왼쪽 '소개',
오른쪽 '이용 매뉴얼' 두 박스로 나눈다(2026-09-12, 사용자 지시: 한 통이면 PC에서 가로가
너무 넓어 PC에 맞추면 모바일이, 모바일에 맞추면 PC가 틀어진다). 모바일은 위아래로 쌓인다. */
.feature-page-columns {
display: grid;
gap: 1.5rem;
width: 100%;
max-width: var(--content-max-width);
align-items: start;
}
@media (min-width: 800px) {
/* 매뉴얼을 아직 쓰지 않은 페이지는 소개 한 칸을 예전처럼 넓게 쓴다. */
.feature-page-columns:not(.feature-page-columns-single) {
grid-template-columns: 1fr 1fr;
}
}
/* 두 박스는 예전 단일 박스(.sso-entry-builder-page)의 모양을 그대로 쓰되, 폭은 칸에 맡긴다.
min-width: 0이 없으면 표·긴 글이 들어간 칸이 50%를 넘겨 밀린다. */
.feature-page-column {
max-width: none;
min-width: 0;
}
/* 표나 넓은 HTML 조각이 칸보다 넓으면 그 칸 안에서만 가로로 스크롤한다 — 칸이 좁아진
만큼(한 통일 때의 절반) 페이지 전체가 옆으로 밀리는 일이 없어야 한다. */
.feature-page-column .sso-entry-builder-public-content {
overflow-x: auto;
}
.feature-page-column-title {
margin: 0 0 1.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
font-size: 1rem;
color: var(--text-muted);
}
/* [대회 세팅 시작하기]로 매뉴얼 칸을 데려갈 때 어디가 바뀐 건지 잠깐 강조한다. */
.feature-page-column-flash {
animation: feature-page-column-flash 1.2s ease-out;
}
@keyframes feature-page-column-flash {
from {
box-shadow: 0 0 0 3px var(--accent);
}
to {
box-shadow: 0 0 0 3px transparent;
}
}
@media (prefers-reduced-motion: reduce) {
.feature-page-column-flash {
animation: none;
}
}
.sso-entry-builder-cta-btn {
display: block;
width: 100%;
margin-top: 1rem;
padding: 0.9rem;
border: none;
border-radius: 8px;
background: var(--accent);
color: #ffffff;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}
.sso-entry-builder-cta-btn:hover {
opacity: 0.9;
}
/* 동호인/쏘폼접수/엘리트 대회일정 페이지 "+ 대회등록" 버튼 — 필요한 계정 유형(주관회원/
엘리트단체)으로 로그인돼 있지 않을 때 뜨는 안내 모달(scheduleRegisterGate.js). */
.register-gate-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 200;
}
.register-gate-panel {
position: relative;
width: 100%;
max-width: 420px;
background: var(--surface);
border-radius: 14px;
padding: 1.75rem 1.5rem 1.5rem;
text-align: center;
}
.register-gate-panel h2 {
margin: 0 0 0.75rem;
font-size: 1.1rem;
}
.register-gate-status {
margin: 0 0 1.25rem;
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.6;
}
.register-gate-close-btn {
position: absolute;
top: 0.6rem;
right: 0.8rem;
border: none;
background: none;
font-size: 1.3rem;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
}
.register-gate-signup-btn {
display: block;
width: 100%;
padding: 0.65rem;
border-radius: 8px;
background: var(--accent);
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
box-sizing: border-box;
}
.register-gate-signup-btn:hover {
opacity: 0.92;
}
.register-gate-existing {
margin: 1.1rem 0 0.6rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.register-gate-login-btn {
display: block;
width: 100%;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid var(--border);
color: var(--text);
font-size: 0.85rem;
text-decoration: none;
box-sizing: border-box;
}
.register-gate-login-btn:hover {
background: var(--bg);
}
.icon-btn {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
padding: 0;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
font-family: inherit;
cursor: pointer;
}
.icon-btn:hover {
background: var(--bg);
color: var(--accent);
border-color: var(--accent);
}
.icon-btn[hidden] {
display: none;
}
.detail-toggle-btn {
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
}
.email-copied-toast {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--text);
color: var(--surface);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
padding: 0.3rem 0.6rem;
border-radius: 999px;
pointer-events: none;
z-index: 5;
}
.email-copied-toast[hidden] {
display: none;
}
.card-detail[hidden] {
display: none;
}
/* --- 카드 우측 "접수 관련 소식" 제목 줄 — 더보기를 제목 옆 '+' 아이콘으로 --- */
.card-notice-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.card-notice-head .card-notice-title {
margin: 0;
}
.card-notice-more-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--accent);
font-size: 1rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
.card-notice-more-btn:hover {
background: var(--bg);
}
.empty-state {
text-align: center;
color: var(--text-muted);
padding: 3rem 1rem;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
font-size: 0.9rem;
}
.pagination button {
padding: 0.4rem 0.9rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.pagination button:disabled {
opacity: 0.4;
cursor: default;
}
/* --- 홈 화면(신규대회 미리보기) --- */
.home-main {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* PC 화면에서는 두 신규대회 박스를 나란히 2열로 배치한다. align-items는 stretch(기본값)로
둬서 같은 행의 두 셀이 콘텐츠 길이와 상관없이 항상 같은 높이(상단선·하단선 모두 일치)가
되도록 한다 — 카드별로 '더보기'를 하단에 붙이는 처리(#newRegSection 등 id 스코프 규칙)와
짝을 이룬다. */
@media (min-width: 800px) {
.home-main {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
}
.home-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.25rem 1.5rem;
}
.home-section-title {
margin: 0 0 0.75rem;
font-size: 1.05rem;
}
.home-section-title-sub {
font-weight: 400;
}
/* index 페이지 3개 카드(신규등록/쏘톡실시간/쏘톡톡) — 카드 박스(테두리·배경)를 없애고
콘텐츠만 노출한다. .home-section 자체는 다른 페이지에서도 박스로 쓰여 여기 3개만 id로
스코프한다. */
#newRegSection,
#ssotoktokThumbsSection,
#ssotalkSsokingSection {
background: none;
border: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* 같은 행의 두 카드가 .home-main의 align-items:stretch로 같은 높이가 된 뒤, 카드 내부는
세로 flex로 두고 '더보기'만 margin-top:auto로 항상 카드 맨 아래에 붙인다 — 콘텐츠 개수가
바뀌어도(대회가 늘거나 줄어도) 구조적으로 하단에 고정된다. .more-link는 다른 여러
페이지에서도 쓰는 공용 클래스라 이 3개 카드로 id 스코프한다. */
#newRegSection > .more-link,
#ssotoktokThumbsSection > .more-link {
margin-top: auto;
}
/* ssotalkSsokingSection은 '더보기'가 섹션 바로 아래가 아니라 탭 패널(.home-combo-panel)
안에 있으므로, 보이는 패널을 flex:1 1 auto로 늘려 섹션의 남은 높이를 먼저 채운 뒤 그
안에서 margin-top:auto로 하단에 붙인다. */
#ssotalkSsokingSection > .home-combo-panel:not([hidden]) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
#ssotalkSsokingSection .home-combo-panel .more-link {
margin-top: auto;
}
/* '동호인대회 신규' 목록(N 아이콘 + 대회명)만 줄 간격을 넓힌다. .home-card-name은
#newRegList에서만 쓰이는 클래스라 다른 카드 목록에는 영향이 없지만, 원본 클래스는
그대로 두고 id로 스코프해 명시한다. */
#newRegList .home-card-name {
line-height: 1.5;
}
/* 위 3개 카드의 제목만 community-schedules.html '동호인 대회일정검색' 제목
(.mobile-filter-title: 24px/700/line-height normal/letter-spacing normal)과 동일한
크기·굵기로 통일하고, 카드 폭 기준 가운데 정렬한다(좌측 배너 제목은 이미
.home-banner-section의 text-align:center를 상속해 가운데라 따로 손대지 않는다).
.home-section-title 자체를 바꾸면 '기록카드 최신등록' 카드 및
ssoking-ranking.html/ssotalk-feed.html의 제목까지 바뀌므로 이 3개 id로만 스코프한다.
#homeBannerTitle도 같은 크기로 맞춘다 — 기본 34px(.home-banner-title, 799px 이하
미디어쿼리에서도 34px)라 나머지 3개보다 커 보였다. id 선택자라 두 규칙 모두 이긴다.
font-family도 나머지 3개와 맞춘다 — .home-banner-title이 'KoPubWorld 돋움체'를
명시해서 배너 제목만 그 폰트로 렌더링됐고(나머지 3개는 font-family를 따로 지정한
적이 없어 body 기본값인 시스템 폰트), 폰트가 다르면 font-size가 같아도 글자 높이가
달라 보인다(실측: line box 37px vs 32px). 4개 모두 KoPubWorld 돋움체 Bold(700, 위
@font-face에 이미 등록됨)로 통일해 덮어쓴다. */
#newRegTitle,
#ssotoktokThumbsSection > .home-section-title,
#ssotalkSsokingTitle,
#homeBannerTitle {
font-family: 'KoPubWorld 돋움체', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: normal;
letter-spacing: normal;
text-align: center;
}
/* 1행 제목(newRegTitle/homeBannerTitle) 상단 여백 60px — 상단 버튼 행(쏘톡실시간/
쏘킹랭킹/쏘톡톡, page-navi 바)과 첫 행 사이 공백. 두 제목 모두 같은 값이라 글자
시작선은 계속 일치한다. 2행 제목(쏘톡톡/쏘톡실시간)은 '1행 더보기 하단 ↔ 2행 제목
상단 40px' 요구가 있어, grid row-gap(.home-main, 24px)을 뺀 나머지 16px만
margin-top으로 준다(24+16=40). */
#newRegTitle,
#homeBannerTitle {
margin-top: 60px;
}
#ssotoktokThumbsSection > .home-section-title,
#ssotalkSsokingTitle {
margin-top: 16px;
}
/* 배너 제목 ↔ 배너 이미지 간격 — 기존 .home-banner-title의 margin-bottom(1rem=16px)에
23px을 더해 39px로. 좌측 배너 이미지 상단선이 우측 '동호인대회' 버튼 행 상단선보다
위에 있던 것을 맞추기 위함(제목 자체 위치/크기는 그대로, 제목 아래 여백만 조정). */
#homeBannerTitle {
margin-bottom: 39px;
}
/* 제목 ↔ 바로 아래 버튼 행/그리드 간격 40px로 통일
('동호인대회'→동호인/쏘폼접수/엘리트 탭, '쏘톡실시간'→쏘톡 새글/쏘킹 랭킹 탭,
'쏘톡톡'→썸네일 그리드). */
#newRegTitle,
#ssotalkSsokingTitle {
margin-bottom: 40px;
}
/* ssotalk-feed.html 전용 — 같은 화면의 '쏘톡 새글'(.history-title, 1.25rem)과 나란히
있는 '실시간 키워드' 제목이 .home-section-title 기본 크기(1.05rem)라 더 작아 보였다.
.home-section-title은 index/ssoking-ranking에서도 쓰여 그 크기를 그대로 바꾸면
영향이 번지므로, 이 페이지 안에서만 크기를 맞춘다. */
.ssotalk-feed-columns .home-section-title {
font-family: 'KoPubWorld 돋움체', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
font-size: 24px;
}
/* index 페이지 '쏘킹 랭킹' 미리보기의 남자/여자 탭 — 동호인/엘리트 대회일정 탭과 같은
스타일. */
.ssoking-rank-tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 0.85rem;
}
/* display:flex를 명시한 클래스는 브라우저 기본 [hidden] 규칙을 덮어써버리므로
명시적으로 되돌려야 한다(.action-link[hidden] 주석 참고 — 이미 있는 패턴). */
.ssoking-rank-tabs[hidden] {
display: none;
}
.ssoking-rank-tab {
display: inline-block;
padding: 0.35rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 0.82rem;
cursor: pointer;
}
.ssoking-rank-tab:hover {
background: var(--bg);
}
.ssoking-rank-tab.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* index 페이지 '엘리트대회 신규등록' 자리를 대신하는 [동호인]/[엘리트] 탭 — 위
ssoking-rank-tab과 같은 스타일. */
.home-newreg-tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 0.85rem;
}
.home-newreg-tab {
display: inline-block;
padding: 0.35rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 0.82rem;
cursor: pointer;
}
.home-newreg-tab:hover {
background: var(--bg);
}
.home-newreg-tab.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* index 페이지 '쏘톡 새글'/'쏘킹 랭킹' 통합 박스의 상위 탭 — 위 home-newreg-tab과 같은
스타일이지만, 탭을 눌러도 박스 크기가 흔들리지 않도록 margin-bottom을 조금 더 준다. */
.home-combo-tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 0.85rem;
}
.home-combo-tab {
display: inline-block;
padding: 0.35rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 0.82rem;
cursor: pointer;
}
.home-combo-tab:hover {
background: var(--bg);
}
.home-combo-tab.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.home-combo-panel[hidden] {
display: none;
}
/* index 페이지 '동호인대회 신규등록' 자리를 대신하는 슬라이드 배너 — 관리자가
/admin/home-banner에서 등록한 이미지를 자동 재생 + 화살표/번호 네비로 보여준다. */
.home-banner-section {
text-align: center;
}
.home-banner-title {
margin: 0 0 1rem;
font-family: 'KoPubWorld 돋움체', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
font-weight: 700;
font-size: 34px;
color: var(--text);
}
/* 화살표를 이미지 옆이 아니라 위에 겹쳐 올린다 — 옆에 두면 그만큼 이미지가 좁아졌다
(사용자 지시: 이미지를 칸 폭에 꽉 차게). */
.home-banner-carousel {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.home-banner-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
flex: none;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.home-banner-arrow:hover {
background: var(--bg);
}
.home-banner-arrow-prev {
left: 0.6rem;
}
.home-banner-arrow-next {
right: 0.6rem;
}
.home-banner-frame {
position: relative;
flex: 1 1 auto;
/* 모바일(화살표 없음)은 예전과 같은 16:9 그대로다. PC는 화살표를 이미지 위로 올려 폭이
넓어졌으므로, 아래 규칙으로 높이만 예전과 같게 되돌린다(사용자 지시: 높이는 기존 유지). */
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: var(--bg);
border: 1px solid var(--border);
}
/* PC에서 높이를 예전과 같게 — 예전에는 화살표(2.2rem 두 개)와 간격(0.75rem 두 개) 94px이
이미지 옆자리를 차지해 폭 564 − 94 = 470px, 16:9로 높이 264px이었다. 지금은 폭이 564px이라
같은 높이를 유지하려면 564 / 264 = 2.14 비율이 된다. */
@media (min-width: 800px) {
.home-banner-frame {
aspect-ratio: 2.14 / 1;
}
}
.home-banner-image-link {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.home-banner-image-link:not([href]) {
cursor: default;
}
/* 슬라이드 전환 — 두 레이어를 겹쳐두고, 나가는 쪽은 투명해지며 왼쪽으로, 들어오는 쪽은
오른쪽 바깥(대기 위치)에서 투명한 채로 시작해 가운데로 스르륵 들어오며 선명해진다. */
.home-banner-layer {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.home-banner-layer.exiting {
transform: translateX(-100%);
opacity: 0;
}
.home-banner-layer.active {
z-index: 2;
transform: translateX(0);
opacity: 1;
}
.home-banner-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-banner-dots {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.85rem;
}
.home-banner-dots[hidden] {
display: none;
}
.home-banner-dot {
flex: none;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-muted);
font-size: 0.75rem;
cursor: pointer;
}
.home-banner-dot.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
@media (max-width: 799px) {
.home-banner-title {
font-size: 34px;
}
/* 모바일에서는 터치 스와이프로 슬라이드를 넘기므로 화살표 버튼은 없앤다
(번호 네비는 그대로 유지). */
.home-banner-arrow {
display: none;
}
}
.home-card-list {
display: flex;
flex-direction: column;
margin-bottom: 0.75rem;
}
.home-card-list[hidden] {
display: none;
}
.home-card {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.home-card-name {
font-size: 0.92rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.6;
}
/* "신규등록" 목록 마커 — 항목마다 항상 붙는 배지. 등록 6시간 이내는 주황, 6시간
초과는 녹색으로 색만 바뀐다(renderCard가 modifier 클래스를 붙여준다). */
.home-card-front-badge {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
}
.home-card-front-badge-recent {
background: var(--badge-new-front-recent-bg);
color: var(--badge-new-front-recent-text);
}
.home-card-front-badge-old {
background: var(--badge-new-front-bg);
color: var(--badge-new-front-text);
}
/* --- index 페이지 '쏘톡 새글' — 대회 구분 없이 전체 최신 채팅을 모아 보여주는 실시간
피드. 고정 높이+스크롤이라 새 글이 쌓일수록 예전 글은 스크롤해야 보인다. --- */
.ssotalk-feed-list {
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.7rem;
margin-bottom: 0.75rem;
}
.ssotalk-feed-item {
font-size: 0.85rem;
}
.ssotalk-feed-competition {
display: block;
font-weight: 400;
color: var(--text-muted);
text-decoration: none;
}
.ssotalk-feed-competition:hover {
text-decoration: underline;
}
.ssotalk-feed-content {
margin: 0.15rem 0 0;
color: var(--text-muted);
word-break: break-word;
}
/* 쏘톡 새글 전체보기(ssotalk-feed.html) — 15개가 스크롤 없이 보이는 높이. */
.ssotalk-feed-list-large {
max-height: 720px;
}
/* 쏘킹 랭킹 상세 페이지 — 남자/여자 랭킹을 나란히(모바일에서는 세로로) 배치. */
.ssoking-rank-columns {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 800px) {
.ssoking-rank-columns {
flex-direction: row;
}
.ssoking-rank-column {
flex: 1;
min-width: 0;
}
}
/* 쏘톡 새글 전체보기 페이지 — '쏘톡 새글' 목록과 '실시간 키워드'를 나란히(모바일에서는
세로로) 배치. */
.ssotalk-feed-columns {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 800px) {
.ssotalk-feed-columns {
flex-direction: row;
}
.ssotalk-feed-column {
flex: 1;
min-width: 0;
}
}
/* '실시간 키워드' 기간 이동(이전/다음 + 라벨) — 연간 대회 현황(admin)의 연도 이동과
같은 형태. */
.period-nav {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.75rem 0 1rem;
}
.period-nav-btn {
width: 1.9rem;
height: 1.9rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.period-nav-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.period-nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.period-nav-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
}
.more-link {
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.55rem;
border-radius: 8px;
border: 1px solid var(--border);
background: none;
color: var(--accent);
font-size: 0.85rem;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.more-link:hover {
background: var(--bg);
}
.more-link:disabled {
color: var(--text-muted);
cursor: not-allowed;
background: none;
}
/* --- 동호인 대회 상세보기 --- */
.detail-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.detail-header h1 {
margin: 0;
font-family: 'KoPubWorld 돋움체', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
font-size: 24px;
}
.detail-grid {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem 1.5rem;
margin: 0 0 1.5rem;
display: grid;
grid-template-columns: 84px 1fr;
row-gap: 0.75rem;
column-gap: 0.75rem;
}
.detail-grid dt {
color: var(--text-muted);
font-size: 0.85rem;
}
.detail-grid dd {
margin: 0;
font-size: 0.9rem;
white-space: pre-line;
}
.detail-grid dd a {
color: var(--accent);
text-decoration: none;
}
.detail-grid dd a:hover {
text-decoration: underline;
}
/* '대회기록'/'대회입상' 공개 페이지 — 회원이 공개로 올린 기록을 대회(+회차)별로
묶어 보여준다. 대회를 감싸는 박스 없이 페이지 바탕에 바로 놓고, 대회 사이만 선으로
나눈다. 날짜·대회명·각 줄·펼친 상세의 왼쪽 끝이 모두 같은 선에 온다. */
.competition-record-group {
padding: 1.25rem 0;
border-bottom: 1px solid var(--border);
}
.competition-record-group-title {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 700;
}
.competition-record-group-date {
margin: 0 0 0.2rem;
color: var(--text-muted);
font-weight: 400;
font-size: 0.85rem;
}
.competition-record-entry-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.competition-record-entry + .competition-record-entry {
padding-top: 0.25rem;
border-top: 1px dashed var(--border);
}
/* 한 줄: 순위 | 큰 기록 + 성명 줄 | 카드 썸네일. 모바일에서는 썸네일이 아래 줄로 내려간다.
줄 전체가 상세 열기/닫기 버튼이라, 색이 바뀌는 칸은 좌우로 조금 넓히되(음수 margin)
글자는 제자리(날짜·대회명과 같은 왼쪽 선)에 둔다. */
.competition-record-entry-head {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr) auto;
align-items: center;
column-gap: 0.9rem;
margin: 0 -0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.15s ease;
}
/* 마우스가 있는 기기에서만 올렸을 때 색을 바꾼다(폰에서는 누른 뒤 색이 남아 버린다).
펼친 줄은 옅은 색을 유지해 어느 줄이 열려 있는지 보이게 한다. */
@media (hover: hover) {
.competition-record-entry-head:hover {
background: var(--border);
}
}
.competition-record-entry-head[aria-expanded='true'] {
background: var(--surface);
}
.competition-record-entry-head:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* 순위 숫자 — 프리텐다드 900. 1~3위는 금·은·동 원. */
.competition-record-entry-rank {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
font-weight: 900;
font-size: 1.1rem;
color: var(--text-muted);
}
.competition-record-entry-rank-1 {
background: #fde68a;
color: #92400e;
}
.competition-record-entry-rank-2 {
background: #e5e7eb;
color: #374151;
}
.competition-record-entry-rank-3 {
background: #fed7aa;
color: #9a3412;
}
.competition-record-entry-body {
min-width: 0;
}
.competition-record-entry-value {
margin: 0;
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.15;
font-variant-numeric: tabular-nums;
color: var(--text);
overflow-wrap: anywhere;
}
.competition-record-entry-line {
margin: 0.3rem 0 0;
font-size: 0.88rem;
color: var(--text-muted);
}
.competition-record-entry-cards {
display: flex;
gap: 0.5rem;
}
.competition-record-entry-cards[hidden] {
display: none;
}
.competition-record-entry-card {
flex: 0 0 auto;
width: 64px;
height: 64px;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--surface);
cursor: pointer;
}
.competition-record-entry-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 599px) {
.competition-record-entry-head {
grid-template-columns: 2.25rem minmax(0, 1fr);
}
.competition-record-entry-cards {
grid-column: 2 / -1;
margin-top: 0.5rem;
}
.competition-record-entry-value {
font-size: 1.35rem;
}
}
.competition-record-detail-panel {
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--border);
}
.competition-record-detail-panel[hidden] {
display: none;
}
/* 상세보기의 기록내역/입상내역 — 항목명 | 값 두 칸, 왼쪽 정렬, 배경·테두리 없음. */
.certificate-box {
text-align: left;
}
.certificate-box-title {
margin: 0 0 0.6rem;
/* 예전엔 'KoPubWorld 바탕체'였는데, 이 14px 라벨 네 글자("기록내역"/"입상내역") 하나
때문에 KoPubWorldBatang-Medium.ttf 11.6MB를 내려받았다(실측). 대회기록/입상 상세를
펼치는 모든 방문자가 그 비용을 치렀다.
같은 박스의 항목 표(.certificate-box-list, 아래)가 이미 돋움체 400과 700(대회명)을
쓰고 있어 그 파일들은 어차피 받는다 — 제목도 같은 글씨체로 맞추면 추가 다운로드가
0이고 박스 안 글씨체도 하나로 통일된다.
바탕체 웹폰트 자체는 카드 만들기(cardStudio.js)의 선택지로 남아 있고, 회원이 그걸
고를 때만 받는다. */
font-family: 'KoPubWorld 돋움체', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.certificate-box-list {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 1.25rem;
row-gap: 0.35rem;
margin: 0;
font-family: 'KoPubWorld 돋움체', sans-serif;
font-size: 14px;
}
.certificate-box-list dt {
color: var(--text-muted);
}
.certificate-box-list dd {
margin: 0;
color: var(--text);
}
.certificate-box-list dd.certificate-box-name {
font-weight: 700;
}
.certificate-footer-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.5rem;
}
.certificate-registrant-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--text-muted);
}
.certificate-open-btn {
padding: 0.15rem 0.55rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--accent);
font-size: 0.78rem;
cursor: pointer;
}
/* '카드[받기 ▯] [받기 ◻]' — 라벨은 버튼 쌍 앞에 한 번만 붙는다. */
.certificate-card-label {
font-size: 0.8rem;
font-weight: 600;
}
/* 다른 회원이 등록 오류를 알려줄 수 있는 익명 신고 — 기록당 1건까지만 허용된다. */
.certificate-error-report-row {
margin-top: 0.4rem;
font-size: 0.78rem;
}
.certificate-error-report-btn {
padding: 0.15rem 0.55rem;
border: 1px solid #d0342c;
border-radius: 6px;
background: none;
color: #d0342c;
font-size: 0.78rem;
cursor: pointer;
}
.certificate-error-report-done {
color: var(--text-muted);
}
.certificate-error-report-form {
display: flex;
flex-direction: column;
gap: 0.35rem;
max-width: 320px;
}
.certificate-error-report-textarea {
width: 100%;
min-height: 3.2rem;
padding: 0.4rem 0.55rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
color: var(--text);
font-size: 0.78rem;
font-family: inherit;
resize: vertical;
}
.certificate-error-report-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.certificate-error-report-submit,
.certificate-error-report-cancel {
padding: 0.15rem 0.55rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
font-size: 0.75rem;
cursor: pointer;
}
.certificate-error-report-submit {
color: #d0342c;
border-color: #d0342c;
}
.certificate-error-report-status {
color: var(--text-muted);
font-size: 0.72rem;
}
/* 소유자 전용 '내 카드 이미지'(등록/삭제) — 상세보기 안에만 나온다. */
.card-image-gallery-section {
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--border);
}
.card-image-gallery-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.card-image-gallery-heading {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
}
.card-image-upload-btn {
padding: 0.15rem 0.55rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--accent);
font-size: 0.78rem;
cursor: pointer;
}
.card-image-upload-btn:disabled {
color: var(--text-muted);
cursor: default;
opacity: 0.7;
}
.card-image-upload-status {
font-size: 0.72rem;
color: var(--text-muted);
}
/* 등록 전 미리보기 — 실제로 저장될 크기(축소 여부)를 확인하고 등록/취소를 고른다.
.card-image-gallery-header가 flex-wrap 행이라, flex-basis를 100%로 줘서 버튼
줄 아래 새 줄로 자연스럽게 내려가게 한다. */
.card-image-upload-preview {
display: flex;
flex: 1 0 100%;
align-items: center;
gap: 0.6rem;
margin-top: 0.4rem;
padding: 0.5rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
}
.card-image-upload-preview[hidden] {
display: none;
}
.card-image-upload-preview-img {
width: 60px;
height: 60px;
object-fit: contain;
border-radius: 6px;
background: var(--bg);
flex-shrink: 0;
}
.card-image-upload-preview-caption {
flex: 1 1 auto;
font-size: 0.76rem;
color: var(--text-muted);
}
.card-image-upload-preview-actions {
display: flex;
flex-shrink: 0;
gap: 0.4rem;
}
.card-image-upload-preview-confirm-btn,
.card-image-upload-preview-cancel-btn {
padding: 0.25rem 0.7rem;
border-radius: 6px;
font-size: 0.78rem;
cursor: pointer;
}
.card-image-upload-preview-confirm-btn {
border: none;
background: var(--accent);
color: #fff;
}
.card-image-upload-preview-confirm-btn:disabled,
.card-image-upload-preview-cancel-btn:disabled {
opacity: 0.6;
cursor: default;
}
.card-image-upload-preview-cancel-btn {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
}
.card-image-gallery {
display: flex;
gap: 0.6rem;
overflow-x: auto;
padding-bottom: 0.3rem;
}
.card-image-gallery-empty {
font-size: 0.78rem;
color: var(--text-muted);
}
.card-image-gallery-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
flex-shrink: 0;
width: 110px;
}
.card-image-gallery-btn {
display: block;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.card-image-gallery-img {
display: block;
width: 110px;
height: 140px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
}
/* 본인 글에서만 보이는 카드 이미지 삭제 버튼 — 썸네일 우상단에 겹쳐 올린다. */
.card-image-delete-btn {
position: absolute;
top: 2px;
right: 2px;
width: 1.3rem;
height: 1.3rem;
line-height: 1;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 0.85rem;
cursor: pointer;
}
.card-image-gallery-name {
font-size: 0.72rem;
color: var(--text-muted);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* '대회기록'/'대회입상' 페이지 상단 'RECORD CARD'/'AWARD CARD' 썸네일 그리드 — 1줄에
6개까지, 모바일에서는 폭에 따라 열 수를 줄여 아래로 자연스럽게 내려가게 한다. */
.record-card-thumbs-section {
margin-bottom: 1rem;
}
.record-card-thumbs-section .page-subtitle {
margin: 0 0 0.25rem;
}
.record-card-thumbs-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.record-card-thumbs-heading-row .page-subtitle {
margin: 0;
}
.record-card-create-btn {
flex: 0 0 auto;
padding: 0.35rem 0.85rem;
border-radius: 999px;
border: none;
background: var(--accent);
color: #ffffff;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.record-card-create-btn:hover {
opacity: 0.9;
}
.record-card-thumbs-section .status-line {
margin-bottom: 0.25rem;
min-height: 0;
}
.record-card-thumbs-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.6rem;
}
@media (max-width: 799px) {
.record-card-thumbs-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.record-card-thumbs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.record-card-thumb-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.record-card-thumb-btn {
display: block;
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.record-card-thumb-img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
}
.record-card-thumb-caption {
font-size: 0.72rem;
color: var(--text-muted);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* '쏘톡톡' 제목 ↔ 썸네일 그리드 간격을 다른 두 카드와 같은 40px로 통일한다. 상태줄
(#homeSsotoktokStatus)의 여백은 없애 제목의 margin-bottom 40px 하나로만 간격이 정해지게 한다. */
#ssotoktokThumbsSection > .home-section-title {
margin-bottom: 40px;
}
#homeSsotoktokStatus {
margin-bottom: 0;
min-height: 0;
}
/* 홈 하단 '기록/입상 카드' 흐르는 띠(home.js의 loadCardMarquee) — 격자의 두 칸을 모두
차지하고, 트랙을 -50%까지 옮기는 애니메이션을 무한 반복해 왼쪽으로 계속 흘러간다.
카드 간격을 gap이 아니라 margin-right로 주는 이유는 home.js 주석 참고(이음매). 양 끝
그라데이션은 넣지 않는다(2026-09-14 사용자 지시). */
.home-card-marquee {
--card-height: clamp(200px, 22vw, 300px);
grid-column: 1 / -1;
margin-top: 16px;
overflow: hidden;
}
.home-card-marquee[hidden] {
display: none;
}
.home-card-marquee-track {
display: flex;
width: max-content;
}
.home-card-marquee-track.is-running {
animation: home-card-marquee var(--marquee-duration, 60s) linear infinite;
}
/* 보고 싶은 카드에 마우스를 올리거나 키보드로 들어오면 멈춘다. */
.home-card-marquee:hover .home-card-marquee-track,
.home-card-marquee:focus-within .home-card-marquee-track {
animation-play-state: paused;
}
@keyframes home-card-marquee {
to {
transform: translateX(-50%);
}
}
/* 높이는 모두 같고 폭은 카드 이미지 비율대로(--card-ratio, home.js가 사진을 읽어 넣는다). */
.home-card-marquee-item {
flex: 0 0 auto;
height: var(--card-height);
width: calc(var(--card-height) * var(--card-ratio, 0.4658));
margin: 0 16px 0 0;
perspective: 1200px;
}
.home-card-marquee-btn {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
/* 앞면(사진)과 뒷면(회색 RECORD/AWARD CARD)을 겹쳐 두고 통째로 돌린다. 기본은 뒷면이 보이게
180도 돌려 두고, 가운데 구간에 들어와 is-front가 붙으면 0도로 돌아 앞면이 보인다. */
.home-card-marquee-flip {
position: relative;
display: block;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(180deg);
transition: transform 0.7s ease;
}
.home-card-marquee-item.is-front .home-card-marquee-flip {
transform: rotateY(0deg);
}
.home-card-marquee-face {
position: absolute;
inset: 0;
border-radius: 8px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.home-card-marquee-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--surface);
}
/* 뒷면은 흐리게, 앞면 카드만 또렷하게(사용자 지시). */
.home-card-marquee-back {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: rotateY(180deg);
background: #d5d9de;
color: #fff;
font-size: clamp(0.8rem, 1.5vw, 1.1rem);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.7;
opacity: 0.6;
}
/* 움직임 줄이기를 켠 사용자에게는 흘려보내지 않고 손으로 넘기는 한 줄로 보여준다
(이음매용 사본은 필요 없으니 숨긴다. 카드는 home.js가 전부 앞면으로 둔다). */
@media (prefers-reduced-motion: reduce) {
.home-card-marquee {
overflow-x: auto;
}
.home-card-marquee-flip {
transition: none;
}
.home-card-marquee-track.is-running {
animation: none;
}
.home-card-marquee-item[aria-hidden='true'] {
display: none;
}
}
/* --- 쏘톡 통합 채팅(ssotalkChat.js, 2026-09-14) — 화면 아래 떠 있는 입력바 + 크루 오픈톡과 같은 모달 창. --- */
body.ssotalk-chat-open {
overflow: hidden;
}
body.has-ssotalk-chat-bar {
padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
body.has-ssotalk-chat-bar .scroll-top-btn {
bottom: calc(5.4rem + env(safe-area-inset-bottom));
}
body.ssotalk-chat-open .ssotalk-chat-bar {
display: none;
}
.ssotalk-chat-bar {
position: fixed;
left: 50%;
bottom: calc(0.8rem + env(safe-area-inset-bottom));
z-index: 40;
display: flex;
align-items: center;
gap: 0.5rem;
width: min(720px, calc(100vw - 1.5rem));
box-sizing: border-box;
transform: translateX(-50%);
}
.ssotalk-chat-bar-field {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 0.55rem;
height: 3rem;
box-sizing: border-box;
padding: 0 1rem 0 0.4rem;
border: 2px solid var(--brand-sso, #2f6fed);
border-radius: 999px;
background: var(--surface, #fff);
color: var(--text-muted);
font-size: 1rem;
text-align: left;
cursor: text;
box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12), 0 8px 24px rgba(0, 0, 0, 0.15);
}
.ssotalk-chat-bar-badge {
flex-shrink: 0;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: var(--brand-sso, #2f6fed);
color: #fff;
font-size: 0.82rem;
font-weight: 800;
}
.ssotalk-chat-bar-placeholder {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ssotalk-chat-bar-send,
.ssotalk-chat-send {
flex-shrink: 0;
height: 3rem;
padding: 0 1.3rem;
border: 0;
border-radius: 999px;
background: var(--brand-sso, #2f6fed);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
}
.ssotalk-chat-bar-send {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.ssotalk-chat-bar-send:hover,
.ssotalk-chat-send:hover {
filter: brightness(0.92);
}
.ssotalk-chat-send:disabled {
opacity: 0.55;
cursor: default;
}
/* 대회 카드 아이콘 줄의 쏘톡 채팅 버튼 */
.icon-btn.ssotalk-chat-btn {
color: var(--brand-sso, #2f6fed);
border-color: var(--brand-sso, #2f6fed);
}
.ssotalk-chat-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
overscroll-behavior: contain;
}
.ssotalk-chat-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
touch-action: none;
}
.ssotalk-chat-shell {
position: relative;
display: flex;
flex-direction: column;
width: min(560px, calc(100vw - 2rem));
height: min(82vh, 760px);
min-height: 320px;
box-sizing: border-box;
padding: 0.75rem;
border-radius: 14px;
background: var(--surface, #fff);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.ssotalk-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.ssotalk-chat-title {
margin: 0;
font-size: 1.05rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ssotalk-chat-header-actions {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.ssotalk-chat-sound,
.ssotalk-chat-close {
padding: 0 0.35rem;
border: 0;
background: none;
color: inherit;
line-height: 1;
cursor: pointer;
}
.ssotalk-chat-sound {
font-size: 1.15rem;
}
.ssotalk-chat-close {
font-size: 1.8rem;
}
.ssotalk-chat-status {
margin: 0 0 0.5rem;
color: var(--text-muted);
font-size: 0.85rem;
text-align: center;
}
.ssotalk-chat-messages {
flex: 1;
min-height: 0;
overscroll-behavior: contain;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 0.5rem;
background: var(--bg);
}
.ssotalk-chat-row {
display: flex;
gap: 0.5rem;
align-items: flex-end;
}
.ssotalk-chat-row.own {
flex-direction: row-reverse;
}
.ssotalk-chat-avatar {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--brand-sso, #2f6fed);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
}
/* 채팅 글 속 URL(public/chatText.js) — 쏘톡 통합 채팅·크루 오픈톡·1:1 톡 공통. 긴 주소는 말풍선 안에서 줄바꿈. */
.chat-link {
color: #1d4ed8;
text-decoration: underline;
text-underline-offset: 2px;
overflow-wrap: anywhere;
word-break: break-all;
}
.chat-link:hover {
color: #1e40af;
}
/* 채팅 영상 보내기 선택창(chatVideoPicker.js) — 크루 오픈톡·1:1 톡 입력칸 위에 뜬다. */
.chat-video-picker {
flex-shrink: 0;
display: flex;
flex-direction: column;
max-height: min(48vh, 24rem);
margin: 0 0 0.5rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
background: var(--surface, #fff);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
.chat-video-picker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.45rem 0.5rem 0.35rem 0.6rem;
border-bottom: 1px solid var(--border, #e5e7eb);
}
.chat-video-picker-tabs {
display: flex;
gap: 0.3rem;
}
.chat-video-picker-tab {
padding: 0.3rem 0.75rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: 999px;
background: var(--surface, #fff);
color: inherit;
font-size: 0.8rem;
cursor: pointer;
}
.chat-video-picker-tab.active {
border-color: var(--brand-sso, #2f6fed);
background: var(--brand-sso, #2f6fed);
color: #fff;
}
.chat-video-picker-close {
padding: 0 0.3rem;
border: 0;
background: none;
color: inherit;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.chat-video-picker-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.6rem;
}
.chat-video-picker-status {
margin: 0.2rem 0;
color: var(--text-muted, #6b7280);
font-size: 0.82rem;
}
.chat-video-picker-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.chat-video-picker-item {
position: relative;
display: block;
padding: 0;
border: 2px solid transparent;
border-radius: 10px;
overflow: hidden;
background: #111827;
aspect-ratio: 1;
cursor: pointer;
}
.chat-video-picker-item.selected {
border-color: var(--brand-sso, #2f6fed);
box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.35);
}
.chat-video-picker-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-video-picker-play {
position: absolute;
top: 50%;
left: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
margin: -0.95rem 0 0 -0.95rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 0.75rem;
}
.chat-video-picker-duration {
position: absolute;
top: 0.25rem;
right: 0.25rem;
padding: 0 0.3rem;
border-radius: 6px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 0.68rem;
}
.chat-video-picker-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.6rem 0.3rem 0.2rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: #fff;
font-size: 0.68rem;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-video-picker-url {
width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.8rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: 999px;
font-size: 0.9rem;
}
.chat-video-picker-file {
display: block;
width: 100%;
padding: 0.75rem 1rem;
border: 1px dashed var(--brand-sso, #2f6fed);
border-radius: 12px;
background: rgba(47, 111, 237, 0.06);
color: var(--brand-sso, #2f6fed);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
}
.chat-video-picker-preview {
margin-top: 0.5rem;
}
.chat-link-card.is-preview {
cursor: default;
}
.chat-video-picker-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
border-top: 1px solid var(--border, #e5e7eb);
}
.chat-video-picker-error {
flex: 1;
margin: 0;
color: #dc2626;
font-size: 0.8rem;
}
.chat-video-picker-send {
padding: 0.45rem 1.1rem;
border: 0;
border-radius: 999px;
background: var(--brand-sso, #2f6fed);
color: #fff;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
}
.chat-video-picker-send:disabled {
opacity: 0.5;
cursor: default;
}
/* 쏘톡톡 게시물 공유 버튼 줄 */
.ssotoktok-detail-share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0.5rem 0 1rem;
}
.ssotoktok-detail-crew-picker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: -0.4rem 0 1rem;
padding: 0.65rem 0.75rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface, #fff);
}
.ssotoktok-detail-crew-picker-title,
.ssotoktok-detail-crew-picker-done {
flex-basis: 100%;
margin: 0;
font-size: 0.85rem;
}
.ssotoktok-detail-share-status {
color: var(--text-muted);
font-size: 0.8rem;
}
/* 링크 미리보기 카드(chatLinkPreview.js) — 내 말풍선(파란 바탕) 안에서도 읽히게 카드는 항상 흰 바탕. */
.chat-link-card {
display: flex;
flex-direction: column;
/* 화면 폭(vw) 기준으로 잡으면 휴대폰에서 말풍선(최대 70%)보다 커져 파란 박스 밖으로 넘쳤다 — 말풍선 안쪽 폭을 넘지 않게. */
width: 16rem;
max-width: 100%;
box-sizing: border-box;
margin: 0.35rem 0 0.15rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
overflow: hidden;
background: #fff;
color: #111827;
text-decoration: none;
}
.chat-link-card:hover {
border-color: var(--brand-sso, #2f6fed);
}
.chat-link-card-thumb {
position: relative;
display: block;
aspect-ratio: 1.91;
background: #f3f4f6;
}
.chat-link-card.kind-ssotoktok .chat-link-card-thumb,
.chat-link-card.kind-ssotoktok-member .chat-link-card-thumb {
aspect-ratio: 1;
}
.chat-link-card-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-link-card-play {
position: absolute;
inset: 50% auto auto 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
margin: -1.3rem 0 0 -1.3rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 1rem;
}
.chat-link-card-body {
display: flex;
flex-direction: column;
gap: 0.12rem;
padding: 0.5rem 0.65rem 0.55rem;
}
.chat-link-card-site {
color: #6b7280;
font-size: 0.7rem;
}
.chat-link-card-title {
font-size: 0.85rem;
font-weight: 700;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chat-link-card-desc {
color: #4b5563;
font-size: 0.76rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 내 말풍선은 파란 바탕·흰 글자라 링크도 흰색으로(쏘톡 통합 채팅·1:1 톡). */
.ssotalk-chat-row.own .chat-link,
.ssotalk-chat-row.own .chat-link:hover {
color: #fff;
}
/* --- 쏘톡톡 1:1 톡(directTalk.js·ssotoktok-messages, 2026-09-15) — 창 모양은 .ssotalk-chat-* 그대로, 여기는 추가분만. --- */
.dt-modal {
z-index: 1010;
}
.dt-profile-link {
display: inline-block;
margin-top: 0.1rem;
font-size: 0.75rem;
color: var(--brand-sso, #2f6fed);
text-decoration: none;
}
button.dt-profile-link {
margin-left: 0.5rem;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 0.75rem;
cursor: pointer;
}
.dt-profile-link:hover {
text-decoration: underline;
}
.dt-menu-wrap {
position: relative;
}
.dt-menu-btn {
padding: 0 0.45rem;
border: 0;
background: none;
color: inherit;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.dt-menu {
position: absolute;
top: calc(100% + 0.3rem);
right: 0;
z-index: 2;
display: flex;
flex-direction: column;
min-width: 8.5rem;
padding: 0.3rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface, #fff);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.dt-menu button {
padding: 0.55rem 0.7rem;
border: 0;
border-radius: 6px;
background: none;
color: inherit;
font-size: 0.88rem;
text-align: left;
cursor: pointer;
}
.dt-menu button:hover,
.dt-menu button:focus-visible {
background: var(--bg);
outline: none;
}
.dt-menu button[data-dt-action='report'] {
color: #dc2626;
}
.dt-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.6rem;
margin: 0 0 0.5rem;
padding: 0.55rem 0.75rem;
border-radius: 10px;
background: #fff7ed;
border: 1px solid #fed7aa;
color: #9a3412;
font-size: 0.82rem;
}
.dt-banner-text {
flex: 1 1 14rem;
margin: 0;
line-height: 1.45;
}
.dt-banner-actions {
display: flex;
gap: 0.4rem;
}
.dt-banner-btn {
padding: 0.35rem 0.8rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface, #fff);
color: inherit;
font-size: 0.82rem;
cursor: pointer;
}
.dt-banner-btn.primary {
border-color: var(--brand-sso, #2f6fed);
background: var(--brand-sso, #2f6fed);
color: #fff;
}
.dt-banner-btn.danger {
border-color: #fca5a5;
color: #dc2626;
}
.dt-banner-btn.done,
.dt-banner-btn.done:disabled {
border-color: #e5e7eb;
background: #f3f4f6;
color: #6b7280;
opacity: 1;
}
.dt-item-label.report {
background: #fee2e2;
color: #b91c1c;
}
.dt-report-list {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
}
.dt-report-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.6rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.88rem;
}
.dt-report-item-reason {
flex-basis: 100%;
color: var(--text-muted);
white-space: pre-wrap;
}
.dt-report-item-status {
margin-left: auto;
padding: 0.05rem 0.5rem;
border-radius: 999px;
background: #fff7ed;
color: #9a3412;
font-size: 0.75rem;
}
.dt-report-item-statuses {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-left: auto;
}
.dt-report-item-statuses .dt-report-item-status {
margin-left: 0;
}
.dt-report-item-status.warn {
background: #fef3c7;
color: #92400e;
}
.dt-report-item-status.suspend {
background: #fee2e2;
color: #b91c1c;
}
.dt-report-item-status.handled {
background: #ecfdf5;
color: #047857;
}
.dt-banner-btn:disabled {
opacity: 0.6;
cursor: default;
}
.dt-empty {
margin: auto;
padding: 2rem 1rem;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
text-align: center;
}
/* 프로필 [톡 보내기] — 이 회원에게 새 톡을 보낼 수 없을 때 흐리게(누르면 이유를 보여준다). */
.ssotoktok-profile-dm-btn.is-unavailable {
background: var(--bg, #f3f4f6);
color: var(--text-muted, #6b7280);
border: 1px solid var(--border, #e5e7eb);
}
.dt-deleted {
font-style: italic;
opacity: 0.7;
}
.dt-images {
display: grid;
gap: 3px;
margin: 0.2rem 0;
width: 15rem;
max-width: 100%;
}
.dt-images.count-2,
.dt-images.count-3,
.dt-images.count-4 {
grid-template-columns: 1fr 1fr;
}
.dt-image-btn {
display: block;
padding: 0;
border: 0;
border-radius: 8px;
overflow: hidden;
background: rgba(0, 0, 0, 0.06);
cursor: zoom-in;
aspect-ratio: 1;
}
.dt-images.count-1 .dt-image-btn {
aspect-ratio: auto;
max-height: 18rem;
}
.dt-image-btn img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.dt-image-expired {
display: flex;
align-items: center;
justify-content: center;
min-height: 4.5rem;
padding: 0.4rem;
border-radius: 8px;
background: rgba(0, 0, 0, 0.08);
font-size: 0.72rem;
text-align: center;
opacity: 0.8;
}
.dt-photo-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.9rem;
height: 2.9rem;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--surface, #fff);
color: var(--brand-sso, #2f6fed);
cursor: pointer;
}
.dt-photo-btn:disabled {
opacity: 0.5;
cursor: default;
}
.dt-attach-preview {
flex-shrink: 0;
display: flex;
gap: 0.4rem;
padding: 0 0.1rem 0.5rem;
overflow-x: auto;
}
.dt-attach-item {
position: relative;
flex-shrink: 0;
width: 4rem;
height: 4rem;
border-radius: 8px;
overflow: hidden;
background: rgba(0, 0, 0, 0.06);
}
.dt-attach-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dt-attach-remove {
position: absolute;
top: 2px;
right: 2px;
width: 1.3rem;
height: 1.3rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 0.9rem;
line-height: 1.3rem;
cursor: pointer;
}
/* 쏘톡톡 프로필 [톡 보내기] */
.ssotoktok-profile-dm-btn {
/* 프로필 본문이 세로 flex라 그대로 두면 가로로 꽉 늘어난다 — 글자 폭만큼만. */
align-self: flex-start;
justify-self: start;
width: auto;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.6rem;
padding: 0.45rem 1rem;
border: 0;
border-radius: 999px;
background: var(--brand-sso, #2f6fed);
color: #fff;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
}
.ssotoktok-profile-dm-btn:hover {
filter: brightness(0.93);
}
/* 메시지 목록 페이지 */
.dt-tabs {
display: flex;
gap: 0.4rem;
margin: 0.75rem 0;
}
.dt-tab {
position: relative;
padding: 0.45rem 1rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface, #fff);
color: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.dt-tab.active {
border-color: var(--brand-sso, #2f6fed);
background: var(--brand-sso, #2f6fed);
color: #fff;
}
.dt-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1.5rem;
}
.dt-item {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
padding: 0.7rem 0.85rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface, #fff);
color: inherit;
text-align: left;
cursor: pointer;
}
.dt-item:hover {
border-color: var(--brand-sso, #2f6fed);
}
.dt-item-avatar {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--brand-sso, #2f6fed);
color: #fff;
font-weight: 700;
}
.dt-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.dt-item-top {
display: flex;
align-items: center;
gap: 0.4rem;
}
.dt-item-name {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dt-item-label {
flex-shrink: 0;
padding: 0.05rem 0.45rem;
border-radius: 999px;
background: #fff7ed;
color: #9a3412;
font-size: 0.7rem;
}
.dt-item-time {
margin-left: auto;
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.72rem;
}
.dt-item-preview {
color: var(--text-muted);
font-size: 0.84rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dt-item.unread .dt-item-preview {
color: inherit;
font-weight: 600;
}
.dt-item-badge {
position: static;
flex-shrink: 0;
}
.dt-settings {
margin: 1rem 0 1.5rem;
}
.dt-policy-option {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0.45rem 0;
font-size: 0.9rem;
line-height: 1.45;
cursor: pointer;
}
.dt-policy-option input {
margin-top: 0.25rem;
}
.dt-blocked-list {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
}
.dt-blocked-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
/* 쏘톡톡 게시물이 있는 회원 — 누르면 그 회원의 쏘톡톡 피드로 간다. */
a.ssotalk-chat-avatar.has-ssotoktok {
position: relative;
text-decoration: none;
cursor: pointer;
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #f59e0b;
}
a.ssotalk-chat-avatar.has-ssotoktok:hover,
a.ssotalk-chat-avatar.has-ssotoktok:focus-visible {
filter: brightness(1.1);
outline: none;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ea580c;
}
/* 1:1 톡 — 쏘크루에 가입한 상대의 동그라미(주황 테두리 + 크루 아이콘). 누르면 크루로(여러 곳이면 선택). */
button.ssotalk-chat-avatar.dt-crew-avatar {
position: relative;
padding: 0;
border: 0;
cursor: pointer;
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #f59e0b;
}
button.ssotalk-chat-avatar.dt-crew-avatar:hover,
button.ssotalk-chat-avatar.dt-crew-avatar:focus-visible {
filter: brightness(1.1);
outline: none;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ea580c;
}
.dt-crew-chooser {
position: absolute;
top: 3.4rem;
right: 0.75rem;
left: 0.75rem;
z-index: 3;
padding: 0.6rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
background: var(--surface, #fff);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.dt-crew-chooser-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.4rem;
font-size: 0.85rem;
font-weight: 700;
}
.dt-crew-chooser-close {
padding: 0 0.3rem;
border: 0;
background: none;
color: inherit;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.dt-crew-chooser-list {
display: flex;
flex-direction: column;
gap: 0.3rem;
max-height: 14rem;
overflow-y: auto;
}
.dt-crew-chooser-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.7rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
color: inherit;
font-size: 0.9rem;
text-decoration: none;
}
.dt-crew-chooser-item:hover {
border-color: var(--brand-sso, #2f6fed);
}
.dt-crew-chooser-leader {
flex-shrink: 0;
padding: 0.05rem 0.45rem;
border-radius: 999px;
background: #fff7ed;
color: #9a3412;
font-size: 0.72rem;
}
.ssotalk-chat-avatar-badge {
position: absolute;
right: -0.3rem;
bottom: -0.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.95rem;
height: 0.95rem;
border-radius: 50%;
background: #f59e0b;
color: #fff;
border: 1.5px solid #fff;
}
.ssotalk-chat-bubble {
max-width: 75%;
min-width: 0;
padding: 0.45rem 0.65rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.ssotalk-chat-row.own .ssotalk-chat-bubble {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.ssotalk-chat-meta {
margin-bottom: 0.15rem;
color: var(--text-muted);
font-size: 0.72rem;
}
.ssotalk-chat-row.own .ssotalk-chat-meta {
color: rgba(255, 255, 255, 0.85);
}
/* 글에 딸린 종목·대회 표시 */
.ssotalk-chat-tag {
display: inline-block;
max-width: 100%;
margin-bottom: 0.25rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: rgba(47, 111, 237, 0.1);
color: var(--brand-sso, #2f6fed);
font-size: 0.72rem;
font-weight: 700;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: top;
}
.ssotalk-chat-row.own .ssotalk-chat-tag {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
/* 대회 칩은 누르면 그 대회 방으로 들어가는 버튼이다. */
button.ssotalk-chat-tag {
border: 0;
font-family: inherit;
text-align: left;
cursor: pointer;
}
button.ssotalk-chat-tag:hover {
text-decoration: underline;
}
.ssotalk-chat-title-wrap {
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.ssotalk-chat-back {
flex-shrink: 0;
padding: 0.3rem 0.65rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.ssotalk-chat-room-link {
flex-shrink: 0;
color: var(--brand-sso, #2f6fed);
font-size: 0.82rem;
font-weight: 700;
white-space: nowrap;
}
.ssotalk-chat-content {
font-size: 0.92rem;
white-space: pre-wrap;
word-break: break-word;
}
.ssotalk-chat-foot {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.15rem;
}
.ssotalk-chat-time {
color: var(--text-muted);
font-size: 0.66rem;
}
.ssotalk-chat-row.own .ssotalk-chat-time {
color: rgba(255, 255, 255, 0.75);
}
.ssotalk-chat-delete {
padding: 0;
border: none;
background: none;
color: inherit;
font-size: 0.68rem;
opacity: 0.7;
text-decoration: underline;
cursor: pointer;
}
.ssotalk-chat-options {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.45rem;
min-width: 0;
}
.ssotalk-chat-sport {
max-width: 100%;
height: 2.2rem;
padding: 0 0.6rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: 0.9rem;
}
.ssotalk-chat-context {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-width: 0;
max-width: 100%;
padding: 0.25rem 0.35rem 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(47, 111, 237, 0.1);
color: var(--brand-sso, #2f6fed);
font-size: 0.85rem;
font-weight: 700;
}
.ssotalk-chat-context-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ssotalk-chat-context-clear {
flex-shrink: 0;
padding: 0 0.3rem;
border: 0;
background: none;
color: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.ssotalk-chat-input-row {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.ssotalk-chat-input {
flex: 1;
min-width: 0;
height: 3rem;
box-sizing: border-box;
padding: 0 1.1rem;
border: 2px solid var(--brand-sso, #2f6fed);
border-radius: 999px;
background: var(--surface, #fff);
color: var(--text);
/* 16px 미만이면 아이폰이 입력할 때 화면을 확대해 버린다. */
font-size: 1rem;
outline: none;
box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}
.ssotalk-chat-input:focus {
box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.25);
}
.ssotalk-chat-input:disabled {
opacity: 0.7;
}
.ssotalk-chat-error,
.ssotalk-chat-login {
margin: 0.4rem 0 0;
font-size: 0.82rem;
text-align: center;
}
.ssotalk-chat-error {
color: #d64545;
}
.ssotalk-chat-login {
color: var(--text-muted);
}
@media (max-width: 640px) {
.ssotalk-chat-modal {
align-items: stretch;
}
.ssotalk-chat-shell {
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 0;
border-radius: 0;
padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
}
.ssotalk-chat-bar-send {
padding: 0 1rem;
}
}
/* --- 전체 페이지 맨 위 한 줄 공지(siteNoticeBanner.js) — 상단바 위에 붙어 스크롤하면 함께 올라간다. --- */
.site-notice-banner {
background: var(--accent);
color: #fff;
}
.site-notice-banner-inner {
display: flex;
align-items: center;
gap: 0.5rem;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0.45rem 0.75rem 0.45rem 1.5rem;
}
.site-notice-banner-link {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
color: inherit;
text-decoration: none;
font-size: 0.9rem;
}
.site-notice-banner-link:hover .site-notice-banner-title {
text-decoration: underline;
}
.site-notice-banner-badge {
flex: 0 0 auto;
padding: 0.05rem 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
}
.site-notice-banner-title {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
}
.site-notice-banner-close {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border: none;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 1rem;
cursor: pointer;
}
.site-notice-banner-close:hover,
.site-notice-banner-close:focus-visible {
background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 640px) {
.site-notice-banner-inner {
padding-left: 1rem;
}
}
/* --- 공지사항 게시판(notices.html) --- */
.site-notices-page {
max-width: 860px;
margin: 0 auto;
padding: 0 1.25rem 3rem;
}
.site-notice-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 2px solid var(--text);
}
.site-notice-list li {
border-bottom: 1px solid var(--border);
}
.site-notice-list-link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0.25rem;
color: var(--text);
text-decoration: none;
}
.site-notice-list-link:hover .site-notice-list-title {
color: var(--accent);
text-decoration: underline;
}
.site-notice-list-title {
min-width: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.site-notice-date {
flex: 0 0 auto;
margin: 0;
color: var(--muted, #6b7280);
font-size: 0.85rem;
}
.site-notice-detail-title {
margin: 1.25rem 0 0.35rem;
font-size: 1.4rem;
overflow-wrap: anywhere;
}
.site-notice-detail .site-notice-date {
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.site-notice-content {
margin-top: 1.25rem;
}
/* --- 쏘-튜브(ssotube-ranking.html) — 종목별 인기 유튜버/콘텐츠 랭킹 --- */
.ssotube-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.ssotube-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.ssotube-rank {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 1;
min-width: 1.6rem;
height: 1.6rem;
padding: 0 0.4rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
}
.ssotube-thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg);
}
.ssotube-thumb {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ssotube-play-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: #fff;
background: rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.ssotube-card:hover .ssotube-play-icon {
opacity: 1;
}
.ssotube-card-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.75rem 0.85rem 0.9rem;
}
.ssotube-card-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ssotube-card-desc {
margin: 0;
font-size: 0.8rem;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 종목 구분 없는 통합 랭킹에서, 이 채널/영상이 어떤 [종목] [키워드]로 올라왔는지 보여주는
태그 — 최대 3종목까지 걸릴 수 있어 여러 개가 줄바꿈되며 나열될 수 있다. */
.ssotube-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.ssotube-card-tags:empty {
display: none;
}
.ssotube-tag {
display: inline-flex;
align-items: baseline;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: var(--bg);
border: 1px solid var(--border);
font-size: 0.7rem;
color: var(--text-muted);
max-width: 100%;
overflow: hidden;
}
.ssotube-tag-category {
font-weight: 700;
color: var(--accent);
white-space: nowrap;
}
.ssotube-tag-keywords {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ssotube-action-btn {
align-self: flex-start;
margin-top: 0.3rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--accent);
border-radius: 999px;
background: none;
color: var(--accent);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.ssotube-action-btn:hover {
background: var(--accent);
color: #fff;
}
/* '바로보기' 인앱 재생 모달 — 우측 상단 닫기 버튼만, 좋아요/댓글/북마크 없음. */
.ssotube-video-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.75);
padding: 1rem;
}
.ssotube-video-modal[hidden] {
display: none;
}
.ssotube-video-modal-inner {
position: relative;
width: 100%;
max-width: 880px;
}
.ssotube-video-modal-close {
position: absolute;
top: -2.5rem;
right: 0;
width: 2rem;
height: 2rem;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.ssotube-video-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.ssotube-player-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.ssotube-player-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
body.ssotube-modal-open {
overflow: hidden;
}
/* --- 접수 시작 카운트다운(entry.html) --------------------------------------
선착순 대회에서 "언제 열리는지 몰라 새로고침을 반복하는" 문제를 없애기 위한 것이다.
그래서 이 시계 자체는 절대 페이지를 새로고침하지 않는다 — 오픈 직전에 수천 명의
브라우저가 스스로 새로고침하면 그게 곧 트래픽 폭증이라, 문제를 바꿔 놓기만 한다. */
#openCountdown {
margin: 1.6rem 0 1.8rem;
padding: 1.6rem 1rem 1.4rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
text-align: center;
}
.countdown-label {
margin: 0 0 0.5rem;
font-size: 13px;
color: var(--text-muted);
}
/* 멀리서도 읽히게 크게. 숫자가 줄어들 때 폭이 흔들리지 않도록 고정폭 숫자를 쓴다. */
.countdown-clock {
font-size: clamp(30px, 8vw, 46px);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.15;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.countdown-hint {
margin: 0.7rem 0 1.1rem;
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
}
/* 0이 되면 버튼이 깜박여 "지금 눌러도 된다"를 알린다(카운트다운에 따로 버튼을 두지 않고
화면에 이미 있는 [확인] 버튼을 살린다). 화면 깜박임에 민감한 사용자를 위해
prefers-reduced-motion에서는 움직이지 않는다. */
.countdown-ready {
animation: countdown-blink 1s ease-in-out infinite;
}
/* 단체 초대코드 발급 불가 기간 — ① 단체 만들기는 흐리게 잠그고 안내만 또렷하게. */
.invite-issue-notice {
color: var(--entry-closed-text, #c53030);
font-weight: 600;
}
.invite-issue-blocked {
opacity: 0.45;
pointer-events: none;
user-select: none;
}
@keyframes countdown-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.countdown-ready { animation: none; }
}
/* 다른 창을 보고 있을 때 눈을 돌릴 수 있게 카운트다운 영역 자체가 붉게 깜박인다.
접수 화면을 옆에 띄워두고 다른 일을 하다가 시작을 놓치는 것을 막기 위한 것이라,
화면을 보고 있을 때는(포커스가 있을 때는) 켜지 않는다 — 보고 있는 사람에게는
그냥 소음이다. */
#openCountdown.countdown-alert {
border-color: var(--entry-closed-text, #c53030);
animation: countdown-alert-blink 1s ease-in-out infinite;
}
#openCountdown.countdown-alert .countdown-clock {
color: var(--entry-closed-text, #c53030);
}
@keyframes countdown-alert-blink {
0%, 100% { background: var(--bg); }
50% { background: var(--entry-closed-bg, #fde8e8); }
}
.countdown-sound-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 0.9rem;
font-size: 12.5px;
color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
#openCountdown.countdown-alert {
animation: none;
background: var(--entry-closed-bg, #fde8e8);
}
}
/* --- 접수 대기열(entry.html #entryQueuePanel) -------------------------------
카운트다운이 "언제 열리는지"를 알려준다면, 이쪽은 열린 뒤 "내가 몇 번째인지"를
알려준다. 둘 다 같은 목적이다 — 사람이 아무것도 모르는 채로 기다리면 새로고침을
누르고, 그 재시도가 다시 부하가 되어 상황을 더 나쁘게 만든다.
생김새를 카운트다운과 맞춘다(같은 자리에 번갈아 나타나므로 다르게 생기면 화면이
튀어 보인다). 다만 깜박이지는 않는다 — 몇십 초를 계속 깜박이면 불안만 준다. */
#entryQueuePanel {
margin: 1.6rem 0 1.8rem;
padding: 1.6rem 1rem 1.4rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
text-align: center;
}
.queue-label {
margin: 0 0 0.5rem;
font-size: 13px;
color: var(--text-muted);
}
.queue-ahead {
font-size: clamp(24px, 6vw, 34px);
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.queue-eta {
margin: 0.5rem 0 0;
font-size: 15px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.queue-hint {
margin: 0.9rem 0 0;
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
}
/* --- 안내 문서 링크와 모달(siteHeader.js가 만들어 붙인다) ---------------------
푸터 링크를 누르면 페이지를 떠나지 않고 모달로 열린다 — 접수 도중 약관을 확인하는
경우가 많은데, 새 창/이동이면 채우던 폼이 날아간다. */
.footer-doc-links {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
margin: 0.9rem 0 0.2rem;
}
.footer-doc-links a {
font-size: 0.8rem;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.footer-doc-links a:hover {
border-bottom-color: var(--text-muted);
}
.site-doc-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
/* hidden 속성의 기본 규칙(display:none)은 우선순위가 가장 낮아, 위의 display:flex가
그대로 이긴다 — 그래서 닫기 버튼이 hidden을 켜도 창이 사라지지 않았다.
같은 선택자 세기로 다시 못박아 둔다. */
.site-doc-modal[hidden] {
display: none;
}
.site-doc-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.site-doc-panel {
position: relative;
width: min(720px, 100%);
max-height: min(80vh, 720px);
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.site-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 1rem 1.1rem;
border-bottom: 1px solid var(--border);
}
.site-doc-head h2 {
margin: 0;
font-size: 1.05rem;
}
.site-doc-close {
border: none;
background: none;
font-size: 1.5rem;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0 0.2rem;
}
.site-doc-fallback-note {
margin: 0;
padding: 0.6rem 1.1rem;
font-size: 0.78rem;
color: var(--text-muted);
background: var(--bg);
border-bottom: 1px solid var(--border);
}
/* 본문만 스크롤한다 — 제목과 닫기 버튼은 긴 문서에서도 계속 보여야 한다. */
.site-doc-body {
padding: 1.1rem;
overflow-y: auto;
font-size: 0.9rem;
line-height: 1.75;
color: var(--text);
}
.site-doc-body h2 {
font-size: 1rem;
margin: 1.4rem 0 0.5rem;
}
.site-doc-body h3,
.site-doc-body h4 {
font-size: 0.92rem;
margin: 1.1rem 0 0.4rem;
}
.site-doc-body p,
.site-doc-body ul,
.site-doc-body ol {
margin: 0 0 0.8rem;
}
.site-doc-body ul,
.site-doc-body ol {
padding-left: 1.3rem;
}
/* 번호 항목 아래의 하위 항목(약관 "3. … - …") — 항목 안에 붙여 두고 글머리표를 한 단계 가볍게. */
.site-doc-body li > ul {
margin: 0.3rem 0 0.4rem;
padding-left: 1.1rem;
list-style: disc;
}
.site-doc-body li + li {
margin-top: 0.2rem;
}
/* 모달이 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 막는다. */
body.site-doc-open {
overflow: hidden;
}
/* --- 마크다운 인용·구분선(markdownRenderer.js, sso-entry-builder.js) ---------
안내 문서와 기능 페이지에서 "> 팁" 한 덩어리와 "---" 구분선을 쓴다. 두 렌더러가 만드는
태그가 같아서, 안내 문서 모달과 기능 페이지 본문에 같은 규칙을 함께 건다. */
.site-doc-body blockquote,
.sso-entry-builder-public-content blockquote {
margin: 0 0 1rem;
padding: 0.6rem 0.9rem;
border-left: 3px solid var(--accent);
border-radius: 0 6px 6px 0;
background: var(--bg);
color: var(--text-muted);
}
.site-doc-body hr,
.sso-entry-builder-public-content hr {
margin: 1.2rem 0;
border: 0;
border-top: 1px solid var(--border);
}
/* --- 마크다운 표(markdownRenderer.js) ---------------------------------------
안내 문서에는 "제공 항목 / 보유기간"처럼 대응 관계를 보여주는 표가 자주 들어간다.
좁은 화면에서 표가 페이지를 옆으로 밀어내지 않도록 감싼 상자만 가로 스크롤한다. */
.markdown-table-wrap {
overflow-x: auto;
margin: 0 0 1rem;
}
.markdown-table {
border-collapse: collapse;
width: 100%;
min-width: 320px;
font-size: 0.85rem;
}
.markdown-table th,
.markdown-table td {
border: 1px solid var(--border);
padding: 0.45rem 0.6rem;
text-align: left;
vertical-align: top;
}
.markdown-table th {
background: var(--bg);
font-weight: 600;
white-space: nowrap;
}
/* --- 쏘톡톡 영상 -----------------------------------------------------------
목록에서는 썸네일만 보여주므로(본편을 걸면 화면 하나 여는 데 수십 MB가 나간다)
사진과 구분되도록 재생 표시와 길이를 얹는다. */
.ssotoktok-grid-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 15px;
padding-left: 3px; /* ▶ 글자가 시각적으로 왼쪽에 치우쳐 보이는 것 보정 */
pointer-events: none;
}
.ssotoktok-grid-duration {
position: absolute;
right: 6px;
top: 6px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 11px;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
/* 작성 화면 미리보기의 영상 길이 표시 */
.ssotoktok-preview-duration {
position: absolute;
left: 6px;
bottom: 6px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.ssotoktok-composer-hint {
display: block;
margin-top: 0.3rem;
font-size: 12px;
color: var(--text-muted);
}
/* 60초보다 긴(또는 용량이 큰) 영상을 골랐을 때 나오는 잘라내기 칸 — 원본은 올리지 않고
여기서 고른 구간만 새 파일로 만든다(videoTrim.js). */
.ssotoktok-trim-box {
margin-top: 0.75rem;
padding: 0.9rem;
border: 1px dashed var(--border);
border-radius: 10px;
background: var(--bg);
}
.ssotoktok-trim-title {
margin: 0 0 0.6rem;
font-size: 13px;
color: var(--text);
}
/* 세로 영상이 칸을 다 잡아먹지 않게 높이를 묶는다. */
.ssotoktok-trim-video {
display: block;
width: 100%;
max-height: 260px;
background: #000000;
border-radius: 8px;
}
.ssotoktok-trim-label {
display: block;
margin: 0.7rem 0 0.3rem;
font-size: 13px;
color: var(--text);
}
/* 시작·끝 두 줄 — 라벨 / 슬라이더 / [현재 위치를 …] 버튼을 한 줄에 놓는다. */
.ssotoktok-trim-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.ssotoktok-trim-row-label {
flex-shrink: 0;
width: 2.2rem;
font-size: 13px;
color: var(--text);
}
.ssotoktok-trim-row input[type='range'] {
flex: 1;
min-width: 0;
}
/* 폰에서는 버튼까지 한 줄에 넣으면 슬라이더가 손가락으로 못 쓸 만큼 좁아진다. */
@media (max-width: 480px) {
.ssotoktok-trim-row {
flex-wrap: wrap;
}
.ssotoktok-trim-row input[type='range'] {
flex: 1 1 100%;
order: 3;
}
}
.ssotoktok-trim-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.6rem;
}
.ssotoktok-trim-actions .ssotoktok-composer-hint {
margin-top: 0;
}
/* =============================================================================
홈 상단 히어로 배너 — 스토리메이커 common.css의 홈 배너 규칙을 그대로 옮겼다(2026-09-11).
바꾼 것: 클래스·변수 이름을 hero-banner로(쏘톡에 이미 .home-banner-*가 있다), 좁은 화면
기준을 767px에서 쏘톡 공통 기준인 799px로. 크기·색·전환은 원본 그대로다. 아래는 원본의
설명이다.
============================================================================= */
/* --- 홈 배너 (묶음 + 장면, 캔버스 배경) — 2026-09-06 개편 --------------------
예전에는 4:1 비율에 이미지를 깔았다. 이제 배경은 캔버스가 그리고 그 위에 글자만
얹는다. **높이는 관리자가 정한다**(--hero-banner-height, heroBanner.js이 서버 설정값을
넣어 준다) — 값이 없을 때의 기본값 250px은 개편 전 모습(1000x250, 4:1)과 같다. */
.hero-banner {
position: relative;
width: 100%;
height: var(--hero-banner-height, 250px);
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
/* 캔버스가 그리기 전 한 프레임 동안 보이는 색 — 캔버스가 칠할 색과 같은 값을 넣는다
(heroBanner.js이 관리자 설정을 --hero-banner-bg로 넘긴다). 기본값은 개편 당시의 색. */
background: var(--hero-banner-bg, #0d0b14);
}
.hero-banner-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-banner-layer {
position: absolute;
inset: 0;
opacity: 0;
/* 이동 없이 **겹치면서** 바뀐다(사용자 지시: 페이드로 오버랩). 예전에는 좌우로
미끄러졌는데, 배경이 계속 움직이는 지금 구조에서는 글자까지 움직이면 산만하다. */
transition: opacity 0.6s ease;
pointer-events: none;
}
.hero-banner-layer.active {
opacity: 1;
pointer-events: auto;
}
.hero-banner-layer.exiting {
opacity: 0;
}
/* 장면 한 장 — 가운데 정렬(사용자 지시). 링크가 없으면 에 href가 없어 커서도
기본값 그대로다(.is-clickable일 때만 손가락 커서). */
.hero-banner-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 100%;
/* 아래는 알약 줄 자리를 비워 둔다 — 안 그러면 부제와 겹친다. */
padding: 24px 32px 44px;
box-sizing: border-box;
text-align: center;
text-decoration: none;
/* 글자색도 관리자가 정한다(2026-09-06). '자동'이면 heroBanner.js이 배경 밝기를 보고
흰색/짙은 색을 골라 넣는다 — 아래 흐린 글자들은 색을 따로 두지 않고 opacity로만
흐리게 한다. rgba로 흰색을 박아 두면 밝은 배경에서 그대로 사라진다. */
color: var(--hero-banner-text, #ffffff);
}
.hero-banner-link.is-clickable {
cursor: pointer;
}
.hero-banner-step {
font-size: 38px;
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.02em;
opacity: 0.92;
}
.hero-banner-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.75;
}
.hero-banner-title {
font-size: 30px;
font-weight: 800;
line-height: 1.35;
/* 제목이 길어도 배너 밖으로 나가지 않게 — 줄바꿈은 브라우저에 맡긴다. */
max-width: 860px;
}
.hero-banner-subtitle {
font-size: 15px;
line-height: 1.7;
opacity: 0.78;
max-width: 700px;
}
/* 좁은 화면에서는 글자만 줄인다 — 높이는 관리자가 정한 값을 그대로 지킨다
(화면마다 다른 높이가 되면 관리자가 맞춰 놓은 구성이 무너진다). */
@media (max-width: 799px) {
.hero-banner-step {
font-size: 29px;
}
.hero-banner-title {
font-size: 22px;
}
.hero-banner-subtitle {
font-size: 13.5px;
}
/* 아래쪽은 인디케이터(40px) 자리를 비워 둔다 — 안 그러면 부제와 겹친다. */
.hero-banner-link {
padding: 18px 16px 50px;
}
}
/* 좌우 화살표는 뺐다(2026-09-06, 사용자 지시) — 아래 점만 남긴다. 화살표가 차지하던
좌우 여백이 없어져 글자를 더 크게 쓸 수 있다(위 .hero-banner-* 글자 크기 참고). */
/* [함정] 예전에는 left:50% + translateX(-50%)로 가운데를 잡았다. 점이 작을 때는 티가
안 났지만, 알약으로 바꾸자 좁은 화면에서 다섯 개가 두 줄로 접혔다 — 절대배치 상자의
가용 폭은 (부모 폭 − left)라서 left:50%면 **절반만** 쓸 수 있다(390px 화면에서
실측 175px). left/right를 0으로 펴고 justify-content로 가운데를 잡는다.
상자 자체는 클릭을 받지 않는다(pointer-events: none) — 배너 아래를 가로지르는
투명한 띠가 되어 장면 링크를 가로막으면 안 된다. 알약만 다시 켠다. */
.hero-banner-dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
/* 장면이 많으면 한 줄에 다 못 들어간다 — 잘리거나 배너 밖으로 나가는 것보다
두 줄로 접히는 편이 낫다(아래에 붙어 있어 위로 자란다). */
flex-wrap: wrap;
gap: 4px;
padding: 0 12px;
box-sizing: border-box;
pointer-events: none;
z-index: 2;
}
.hero-banner-dot {
pointer-events: auto;
}
/* 인디케이터는 **묶음 하나에 버튼 하나**다. 지금 묶음만 이름("배너 1")이 펼쳐진 알약이
되고 나머지는 이름 없는 원으로 남는다(2026-09-06 사용자 지시).
색은 배경/글자 설정을 따르지 않고 검정 60% + 흰 글자로 고정한다 — 배너 배경이 밝든
어둡든(투명 포함) 같은 대비로 읽혀야 한다.
펴고 접는 것은 **이름 칸의 max-width**로 한다. 버튼 width를 직접 늘리면 auto와의
사이에서는 전환이 안 걸려 툭 튄다. */
.hero-banner-dot {
height: 22px;
min-width: 22px;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font: inherit;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
pointer-events: auto;
transition: padding 0.25s ease;
}
.hero-banner-dot-name {
max-width: 0;
opacity: 0;
white-space: nowrap;
transition:
max-width 0.25s ease,
opacity 0.2s ease;
}
.hero-banner-dot.active {
padding: 0 10px;
}
.hero-banner-dot.active .hero-banner-dot-name {
max-width: 90px;
opacity: 1;
}
/* [함정] 이 블록은 위 .hero-banner-dot 기본 규칙보다 **뒤에** 있어야 한다. 좁은 화면
규칙을 위쪽 미디어 블록(글자 크기용)에 넣었더니 우선순위가 같아 뒤에 오는 기본값에
밀려 크기가 그대로였다(실측). */
@media (max-width: 799px) {
/* 손가락으로 짚을 만한 크기로 키운다 — 원도 40px이라 알약이 아닌 것도 짚을 수 있다. */
.hero-banner-dot {
height: 40px;
min-width: 40px;
font-size: 12px;
}
.hero-banner-dot.active {
padding: 0 14px;
}
.hero-banner-dots {
bottom: 4px;
gap: 6px;
}
}
/* --- 쏘톡에서만 필요한 것 -----------------------------------------------------
자리: 홈 2열 격자(.home-main)의 첫 칸으로 들어가 두 칸을 모두 차지한다 — 아래 카드들과
좌우 끝선이 맞는다. 격자에 이미 간격이 있어 원본의 아래 여백(20px)은 뺀다.
숨김: hidden 속성의 기본 규칙(display:none)은 우선순위가 가장 낮다(안내 문서 모달에서
겪은 함정). 장면이 하나도 없을 때 배너 자리를 확실히 비우도록, 그리고 번호·라벨·부제를
비워 둔 장면에서 그 줄이 확실히 사라지도록 다시 못박는다. */
.home-main > .hero-banner {
grid-column: 1 / -1;
margin-bottom: 0;
}
.hero-banner[hidden],
.hero-banner-step[hidden],
.hero-banner-label[hidden],
.hero-banner-subtitle[hidden] {
display: none;
}
/* 대회 홈페이지 팝업(모달) 공지 — 메인에서만(2026-09-21 사용자 지시).
높이는 정하지 않는다: 내용만큼 늘어나고, 화면보다 길어지면 팝업 안에서 스크롤한다. */
.entry-site-popup-overlay {
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(15, 20, 30, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow: auto;
}
.entry-site-popup-stack {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 16px;
max-width: 100%;
}
.entry-site-popup {
position: relative;
max-width: 100%;
max-height: calc(100vh - 40px);
overflow: auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
}
.entry-site-popup-x {
position: absolute;
top: 6px;
right: 8px;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: #333;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.entry-site-popup-link {
text-decoration: none;
color: inherit;
}
.entry-site-popup-body {
padding: 0;
}
.entry-site-popup-image {
display: block;
width: 100%;
height: auto;
border-radius: 12px 12px 0 0;
}
.entry-site-popup-title {
margin: 0;
padding: 22px 20px 6px;
font-size: 1.15rem;
font-weight: 700;
}
.entry-site-popup-line {
margin: 0;
padding: 0 20px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
}
.entry-site-popup-line:first-child {
padding-top: 22px;
}
.entry-site-popup-line:last-child {
padding-bottom: 6px;
}
.entry-site-popup-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
padding: 10px 14px;
border-top: 1px solid #e6e8ee;
background: #f7f8fa;
border-radius: 0 0 12px 12px;
}
.entry-site-popup-today,
.entry-site-popup-close {
border: 0;
background: none;
padding: 6px 8px;
font-size: 0.9rem;
color: #555;
cursor: pointer;
}
.entry-site-popup-close {
font-weight: 700;
color: #222;
}
@media (max-width: 799px) {
.entry-site-popup-overlay {
padding: 12px;
align-items: flex-start;
}
/* 폰에서는 주관회원이 정한 폭을 쓰되 화면 폭을 넘지 않게 한다(가로로 잘리면 안 된다).
묶음(stack)이 화면 폭을 다 차지해야 팝업의 max-width: 100%가 화면 폭이 된다 — 묶음 폭을 안 정하면
글 길이만큼만 줄어들어 팝업이 좁게 나온다(2026-10-01 사용자 확인). */
.entry-site-popup-stack {
width: 100%;
}
.entry-site-popup {
max-height: calc(100vh - 24px);
}
}
/* 대회기록조회(2026-09-21 사용자 지시) — /<대회주소>/records.
참가번호 + 이름을 넣고 [기록 조회]를 누르면 자기 기록 한 줄만 나온다. */
.entry-record-lookup {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
padding: 18px;
background: #fff;
border: 1px solid #e4e7ee;
border-radius: 12px;
}
.entry-record-field {
display: flex;
flex-direction: column;
gap: 6px;
/* 좁은 폰에서는 칸이 줄 전체로 내려가게 — 150px을 고집하면 화면 폭을 넘는다(2026-10-15). */
min-width: min(150px, 100%);
flex: 1 1 150px;
}
.entry-record-field label {
font-size: 0.9rem;
font-weight: 600;
color: #444;
}
.entry-record-field input,
.entry-record-field select {
padding: 10px 12px;
font-size: 1rem;
border: 1px solid #ccd2dd;
border-radius: 8px;
background: #fff;
}
.entry-record-lookup .entry-site-button {
flex: 0 0 auto;
padding: 11px 22px;
}
/* 공지사항·묻고답하기 — 이 게시판이 딸린 폼의 대회/행사 이름(2026-10-05). 게시판 제목 아래, 목록·입력 상자 위. */
.entry-site-form-name {
margin: 0 0 0.8rem;
padding: 0.7rem 1rem;
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: 10px;
background: var(--surface);
font-weight: 700;
line-height: 1.5;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* 조회 화면 안내 글(2026-10-05) — 공지처럼 눈에 띄는 상자. */
.entry-record-notice {
margin: 14px 0 0;
padding: 14px 18px;
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
border-left: 4px solid var(--accent);
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 6%, var(--surface));
line-height: 1.7;
overflow-wrap: anywhere;
}
.entry-record-notice > :first-child {
margin-top: 0;
}
.entry-record-notice > :last-child {
margin-bottom: 0;
}
.entry-record-notice h3,
.entry-record-notice h4,
.entry-record-notice h5 {
margin: 0.9em 0 0.3em;
font-size: 1rem;
}
.entry-record-notice ul,
.entry-record-notice ol {
margin: 0.3em 0;
padding-left: 1.3em;
}
.entry-record-notice code {
padding: 0.05em 0.4em;
border-radius: 5px;
background: var(--surface);
border: 1px solid var(--border);
font-weight: 700;
}
.entry-record-setinfo {
margin: 0 0 10px;
font-size: 0.95rem;
color: #555;
}
/* 대회 기록 목록(2026-09-29) — 한 줄에 대회 하나, 누르면 조회 화면. */
.entry-record-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.entry-record-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 14px 16px;
background: #fff;
border: 1px solid #e3e7ef;
border-radius: 10px;
text-align: left;
cursor: pointer;
font: inherit;
}
.entry-record-list-item:hover {
border-color: #2f6fd0;
}
.entry-record-list-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.entry-record-list-title {
font-size: 1rem;
color: #1f2937;
}
.entry-record-list-meta {
font-size: 0.88rem;
color: #5b6475;
}
.entry-record-list-go {
flex: 0 0 auto;
font-size: 0.88rem;
font-weight: 700;
color: #2f6fd0;
}
.entry-record-back {
margin: 0 0 10px;
padding: 0;
background: none;
border: 0;
color: #2f6fd0;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
/* 폼 그룹 공개 화면(2026-10-01 3단계) — 기본 틀 머리말과 폼 카드. */
.form-group-header {
background: #fff;
border-bottom: 1px solid #e3e7ef;
margin-bottom: 24px;
}
.form-group-header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1.2rem;
/* 아래 본문(.entry-site-layout)과 좌우 끝을 맞춘다(2026-10-06 대표님) — 로고 왼쪽이 폼 카드 왼쪽, 메뉴 오른쪽이 본문 오른쪽.
전에는 폭 1100px·여백 16px라 본문(폭 --content-max-width·여백 1.5rem)보다 안쪽으로 들어가 있었다. */
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0.9rem 1.5rem;
box-sizing: border-box;
}
/* 로고와 그룹 제목은 프리텐다드 굵게(2026-10-06 대표님) — 홈페이지를 쓰는 그룹의 머리말(.entry-site-brand)과 같은 글씨다. */
.form-group-header .app-brand,
.form-group-header-title {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
font-weight: 900;
}
.form-group-header-title {
/* 굵기는 위 규칙(프리텐다드 900)을 따른다 — 여기서 다시 700으로 덮으면 제목만 얇아진다. */
font-size: 1.05rem;
color: #1f2937;
text-decoration: none;
}
.form-group-header-nav {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1rem;
margin-left: auto;
}
.form-group-header-nav a {
color: #374151;
text-decoration: none;
font-size: 0.95rem;
}
.form-group-header-nav a[aria-current='page'] {
color: #2f6fd0;
font-weight: 700;
}
.form-group-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
/* 좁은 화면에서는 카드 한 장이 화면 폭을 넘지 않게(340px보다 좁으면 그 폭에 맞춘다). */
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
gap: 24px 20px;
}
/* 폼 카드 한 장 — 페이지 꾸미기의 '온라인 접수 카드' 블록과 같은 몸통(.entry-site-entry-card-box / -foot)을 쓴다(2026-10-07 대표님).
상자와 그 아래 줄(접수 상태 · 단추)이 위아래로 놓이고, 상자 높이는 같은 줄의 카드끼리 맞춘다. */
.form-group-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.form-group-card .entry-site-entry-card-box {
flex: 1 1 auto;
}
/* 공지 목록이 비어 있을 때(폼 카드 화면)는 윗선만 덩그러니 남지 않게 감춘다. */
.form-group-notices:empty {
display: none;
}
/* 폼 그룹 통합 공지사항(2026-10-01 4단계) — 위에 폼 분류, 아래 목록(제목을 누르면 내용). */
.form-group-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.form-group-filter {
/* 폼 이름이 길어도 화면 밖으로 나가지 않게 — 한 줄로 두고 넘치면 말줄임. */
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 6px 12px;
border: 1px solid #d5dbe5;
border-radius: 999px;
background: #fff;
color: #374151;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.form-group-filter[aria-pressed='true'] {
border-color: #2f6fd0;
background: #2f6fd0;
color: #fff;
}
.form-group-notices {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #e3e7ef;
}
.form-group-notice {
border-bottom: 1px solid #e3e7ef;
}
/* 한 줄: [폼 이름표] [제목 …] [날짜]. 폼 이름표는 일정 폭까지만 쓰고 넘치면 말줄임 — 제목이 늘 가장 넓은 자리를 쓴다.
폰에서는 두 줄로 나눈다(아래 @media): 윗줄 이름표·날짜, 아랫줄 제목 전체 폭(2026-10-01 사용자: 제목이 찌그러짐). */
.form-group-notice-head {
display: grid;
/* 이름표 칸은 폭을 고정한다 — 줄마다 이름 길이가 달라도 제목이 같은 자리에서 시작한다. */
grid-template-columns: 14rem minmax(0, 1fr) auto;
grid-template-areas: 'tag title date';
align-items: center;
gap: 6px 10px;
width: 100%;
padding: 14px 4px;
background: none;
border: 0;
text-align: left;
font: inherit;
cursor: pointer;
}
.form-group-notice-tag {
grid-area: tag;
justify-self: start;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 2px 8px;
border-radius: 999px;
background: #eef2f7;
color: #5b6475;
font-size: 0.8rem;
}
.form-group-notice-tag.is-all {
background: #eaf1fb;
color: #2f6fd0;
font-weight: 700;
}
.form-group-notice-title {
grid-area: title;
min-width: 0;
color: #1f2937;
line-height: 1.5;
/* 낱말 가운데에서 끊지 않는다 — 아주 긴 낱말(주소 등)만 넘치기 전에 끊는다. */
word-break: keep-all;
overflow-wrap: anywhere;
}
.form-group-notice-date {
grid-area: date;
color: #8a93a3;
font-size: 0.85rem;
white-space: nowrap;
}
@media (max-width: 799px) {
.form-group-notice-head {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
'tag date'
'title title';
padding: 12px 2px;
}
}
.form-group-notice-body {
padding: 0 4px 16px;
}
.form-group-notice-text {
margin: 0 0 10px;
white-space: pre-wrap;
line-height: 1.7;
}
.form-group-notice-image {
display: block;
max-width: 100%;
margin-top: 8px;
border-radius: 8px;
}
.form-group-qna-hint {
margin: 0 0 14px;
color: #5b6475;
}
/* 사전 안내 — 쏘톡으로 넘기기 전에 무엇이 되는지 먼저 알려 준다(사용자 지시 문구). */
.entry-record-notice {
margin: 14px 0 10px;
padding: 12px 14px;
background: #f2f6ff;
border: 1px solid #d7e2fb;
border-radius: 10px;
font-size: 0.92rem;
line-height: 1.6;
color: #23407a;
}
.entry-record-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.entry-record-card-label {
font-weight: 700;
font-size: 0.92rem;
color: #23407a;
}
/* 쏘폼 회원 칸과 내 카드(2026-10-02, public/memberAccount.js·entry-records.js) — 조회 화면 맨 위의 얇은 상자. */
.member-account-block {
padding: 14px 16px;
background: #f7f9fc;
border: 1px solid #e3e7ef;
border-radius: 10px;
}
.member-account-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
}
.member-account-who {
font-size: 0.92rem;
color: #23407a;
font-weight: 600;
}
.member-account-hint {
margin: 6px 0 0;
font-size: 0.85rem;
color: #5b6475;
}
.member-account-link {
padding: 0;
border: 0;
background: none;
color: #2f6fd0;
font: inherit;
font-size: 0.88rem;
text-decoration: underline;
cursor: pointer;
}
.member-account-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
max-width: 420px;
margin-top: 12px;
}
.member-account-field {
display: grid;
gap: 4px;
min-width: 0;
}
.member-account-field label {
font-size: 0.85rem;
font-weight: 600;
color: #374151;
}
.member-account-field input {
/* 폰에서 칸이 가로 폭을 넘지 않게 — 기본 너비(글자 20개)를 버리고 칸에 맞춘다. */
box-sizing: border-box;
width: 100%;
min-width: 0;
padding: 9px 10px;
border: 1px solid #cfd6e4;
border-radius: 8px;
font: inherit;
background: #fff;
}
.member-account-consent {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.85rem;
color: #5b6475;
line-height: 1.5;
}
.member-account-consent input {
margin-top: 3px;
}
.member-account-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.member-account-secondary {
background: #fff;
color: #2f6fd0;
border: 1px solid #2f6fd0;
}
/* 회원 칸 아랫줄 — 왼쪽 안내, 오른쪽 끝에 작은 [회원 탈퇴]. */
.member-account-foot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
}
.member-account-withdraw-open {
color: #8a93a3;
font-size: 0.8rem;
}
.member-account-danger {
background: #c62828;
border-color: #c62828;
color: #fff;
}
.member-account-step {
display: grid;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed #d5dbe7;
}
.member-account-message {
margin: 0;
font-size: 0.88rem;
color: #5b6475;
}
.member-account-message-error {
color: #c62828;
}
.member-account-message-ok {
color: #1b7a3d;
}
.member-cards-title {
margin: 16px 0 8px;
font-size: 0.98rem;
color: #1f2937;
}
.member-cards-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.member-card-item {
padding: 12px 14px;
background: #fff;
border: 1px solid #e3e7ef;
border-radius: 10px;
}
.member-card-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
}
.member-card-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.member-card-name {
font-size: 1rem;
color: #1f2937;
}
.member-card-meta,
.member-card-none {
margin: 0;
font-size: 0.85rem;
color: #5b6475;
}
.member-card-none {
margin-top: 8px;
}
.member-card-buttons {
display: flex;
align-items: center;
gap: 12px;
}
.member-card-outputs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.member-card-output {
position: relative;
display: block;
width: 72px;
height: 72px;
border: 1px solid #e3e7ef;
border-radius: 8px;
overflow: hidden;
background: #111;
}
/* 결과물 칸 오른쪽 위 ✕ — 칸(링크) 밖에 두어 누르면 크게 보기와 겹치지 않는다. */
.member-card-output-holder {
position: relative;
}
.member-card-output-del {
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
padding: 0;
border: 1px solid #cfd6e4;
border-radius: 50%;
background: #fff;
color: #5b6475;
font-size: var(--ui-size-small) !important;
line-height: 20px;
cursor: pointer;
}
.member-card-output-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.member-card-output-tag {
position: absolute;
right: 3px;
bottom: 3px;
padding: 1px 5px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 0.68rem;
}
/* 기록증 꾸미기 옆 한 줄 — 쏘톡으로 가져가기와 달리 남지 않는다는 것을 알린다(2026-09-29). */
.entry-record-card-hint {
font-size: 0.85rem;
color: #5b6475;
}
/* 쏘톡으로 가져가기 — 왼쪽은 버튼과 쏘톡 안 경로, 오른쪽은 쏘톡 소개와 옮겨지는 범위(2026-09-29). */
.entry-record-ssotalk {
display: flex;
gap: 18px;
align-items: flex-start;
margin-top: 14px;
padding: 14px 16px;
background: #f2f6ff;
border: 1px solid #d7e2fb;
border-radius: 10px;
}
.entry-record-ssotalk[hidden] {
display: none;
}
.entry-record-ssotalk-action {
flex: 0 0 auto;
}
.entry-record-ssotalk-action .entry-site-button {
cursor: pointer;
border: 0;
}
.entry-record-ssotalk-path {
margin: 8px 0 0;
font-size: 0.85rem;
color: #23407a;
}
.entry-record-ssotalk-info {
flex: 1 1 auto;
font-size: 0.9rem;
line-height: 1.6;
color: #33415c;
}
.entry-record-ssotalk-info p {
margin: 0 0 6px;
}
.entry-record-ssotalk-info .entry-record-ssotalk-title {
font-weight: 700;
color: #23407a;
}
.entry-record-ssotalk-info ul {
margin: 4px 0 0;
padding-left: 1.1em;
}
@media (max-width: 599px) {
.entry-record-ssotalk {
flex-direction: column;
}
.entry-record-ssotalk-action,
.entry-record-ssotalk-action .entry-site-button {
width: 100%;
text-align: center;
}
}
/* 쏘톡으로 건너가는 버튼 — 파란 바탕에 흰 글씨로 '기록증 꾸미기'와 구분한다. */
.entry-record-ssotalk-btn,
.entry-record-actions .entry-record-ssotalk-btn {
background: #2f6fd0;
border-color: #2f6fd0;
color: #fff;
}
.entry-record-actions .entry-site-button {
cursor: pointer;
border: 0;
}
@media (max-width: 599px) {
.entry-record-lookup .entry-site-button,
.entry-record-actions .entry-site-button {
width: 100%;
text-align: center;
}
}
/* 대회기록 저장(쏘톡으로 건너온 화면) */
.record-claim-page {
max-width: 560px;
margin: 0 auto;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.record-claim-brand {
font-size: 1.6rem;
font-weight: 800;
text-decoration: none;
}
.record-claim-card {
width: 100%;
padding: 26px 22px;
background: #fff;
border: 1px solid #e4e7ee;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.record-claim-title {
margin: 0 0 10px;
font-size: 1.25rem;
}
.record-claim-lead {
margin: 0 0 16px;
line-height: 1.7;
color: #333;
}
.record-claim-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.record-claim-secondary {
align-self: center;
color: #555;
font-size: 0.92rem;
}
.record-claim-note {
margin: 0;
padding-top: 14px;
border-top: 1px solid #eee;
font-size: 0.88rem;
line-height: 1.6;
color: #666;
}
/* 복합 블록(2026-09-22 사용자 지시) — 메인 전용.
바깥 배경은 화면 전체 폭으로 펼치고(본문 상자 밖으로), 안쪽 상자만 정한 폭으로 가운데 둔다.
100vw는 윈도 스크롤바 폭까지 포함해 가로 스크롤이 생기므로 본문 쪽에서 가로 넘침을 잘라 둔다
(clip은 스크롤 상자를 만들지 않아 고정 머리말이 그대로 동작한다). */
body.entry-site-page {
overflow-x: clip;
}
.entry-site-section {
/* 100vw에는 세로 스크롤바 폭이 들어 있어 그만큼 빼야 가로 스크롤이 안 생긴다(폭은 화면이 잰다). */
margin-left: calc(50% - 50vw + var(--entry-site-scrollbar, 0px) / 2);
margin-right: calc(50% - 50vw + var(--entry-site-scrollbar, 0px) / 2);
padding: var(--section-pad-pc, 60px) 1.5rem;
color: var(--section-text, inherit);
box-sizing: border-box;
}
/* 복합 블록이 위아래로 이어지면 사이를 붙인다(2026-10-06 대표님) — 블록 공통 아래 여백(2rem)이 남아 두 배경 사이에
페이지 바탕이 띠처럼 보였다. 다음이 다른 블록이면 여백은 그대로 둔다. */
.entry-site-section:has(+ .entry-site-section) {
margin-bottom: 0;
}
.entry-site-section-box {
margin: 0 auto;
width: 100%;
min-height: var(--section-min-pc, 0px);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* '본문 폭' — 다른 블록과 왼쪽·오른쪽 끝이 맞아야 한다(2026-10-10 대표님). 본문 상자는 폭 --content-max-width 안에
좌우 여백 1.5rem을 두므로 실제 내용은 그만큼 좁다. 복합 블록은 여백을 바깥(.entry-site-section)에 두므로 여기서 뺀다
(전에는 1200px 그대로라 다른 블록보다 양쪽으로 24px씩 넓었다). */
.entry-site-section-box-content {
max-width: calc(var(--content-max-width) - 3rem);
}
.entry-site-section-box-narrow {
max-width: 720px;
}
.entry-site-section-box.has-bg {
padding: 28px 24px;
border-radius: 14px;
}
.entry-site-section-title {
margin: 0 0 1.2rem;
text-align: center;
color: var(--section-text, inherit);
}
.entry-site-section-grid {
flex: 1;
display: grid;
gap: 28px;
}
.entry-site-section-grid-1 {
grid-template-columns: 1fr;
}
.entry-site-section-grid-50-50 {
grid-template-columns: 1fr 1fr;
}
.entry-site-section-grid-40-60 {
grid-template-columns: 2fr 3fr;
}
.entry-site-section-grid-60-40 {
grid-template-columns: 3fr 2fr;
}
/* 칸 — 세로·가로 정렬은 주관회원이 칸마다 정한다(인라인 justify/align). */
/* 요소 사이 간격은 요소마다 아래 여백으로 준다(2026-10-06 대표님 — 0부터 정할 수 있게). 안 정한 요소는 지금까지처럼
다음 요소와 14px, 맨 아래 요소는 0. gap으로 주면 0으로 줄일 수 없다. */
.entry-site-section-cell {
display: flex;
flex-direction: column;
min-width: 0;
}
.entry-site-section-cell > * {
margin-bottom: 14px;
}
.entry-site-section-cell > :last-child {
margin-bottom: 0;
}
.entry-site-section-cell > .has-gap-after,
.entry-site-section-cell > .entry-site-block.has-gap-after {
margin-bottom: var(--section-gap-after, 0px);
}
.entry-site-section-cell > .entry-site-block {
margin-top: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.entry-site-section-cell .entry-site-block-title {
margin: 0 0 0.6rem;
color: var(--section-text, inherit);
}
.entry-site-section-image {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.entry-site-section-image-link {
display: block;
width: 100%;
}
.entry-site-section-text p {
margin: 0;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
.entry-site-section-text-small {
font-size: 0.9rem;
}
.entry-site-section-text-large {
font-size: 1.35rem;
}
.entry-site-section-text-xlarge {
font-size: 1.9rem;
line-height: 1.3;
}
.entry-site-section-text.is-bold {
font-weight: 700;
}
/* 공지 최신글 — 흰 상자 위에 그려 어떤 배경에서도 읽히게 한다. */
.entry-site-section-notices {
width: 100%;
padding: 18px 20px;
background: #fff;
color: #222;
border-radius: 12px;
border: 1px solid #e4e7ee;
text-align: left;
box-sizing: border-box;
}
.entry-site-section-notices-title {
margin: 0 0 10px;
font-size: 1.05rem;
}
.entry-site-section-notices-list {
list-style: none;
margin: 0;
padding: 0;
}
/* 글 사이 구분선은 두지 않는다(2026-10-15 대표님 — 바탕색에 따라 선이 지저분해 보인다). 줄 간격만 조금 넓힌다. */
.entry-site-section-notices-list a {
display: flex;
justify-content: space-between;
gap: 12px;
/* 줄 간격 30% 좁게(2026-10-26 대표님, 10px → 7px). */
padding: 7px 0;
color: inherit;
text-decoration: none;
}
.entry-site-section-notices-list a:hover .entry-site-section-notice-text {
text-decoration: underline;
}
.entry-site-section-notice-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entry-site-section-notice-date {
flex: 0 0 auto;
/* 날짜는 늘 제목과 같은 색을 옅게(2026-10-15 대표님) — 바탕이 밝든 어둡든 제목과 같은 계열로 읽힌다. 따로 정하는 칸은 두지 않는다. */
color: inherit;
opacity: 0.6;
font-size: 0.85rem;
}
/* 폼이 없어 비는 자리 안내(2026-10-15) — 주관회원 미리보기에서만. 점선 상자. */
.entry-site-form-placeholder-box {
display: grid;
gap: 6px;
padding: 28px 20px;
border: 2px dashed color-mix(in srgb, var(--accent) 45%, #c9d1dd);
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 5%, #ffffff);
color: #45505f;
text-align: center;
line-height: 1.5;
}
.entry-site-form-placeholder-box span {
color: #7a8494;
font-size: 0.85rem;
}
.entry-site-section-notices-empty {
margin: 4px 0 8px;
color: var(--section-card-text, #777);
}
.entry-site-section-notices-more {
display: inline-block;
margin-top: 8px;
font-size: 0.9rem;
color: var(--section-card-text, var(--accent));
text-decoration: none;
}
/* 폰 — 좌/우 칸을 위아래로 쌓는다(왼쪽이 위). 높이는 내용만큼 늘어난다. */
@media (max-width: 799px) {
.entry-site-section {
padding: var(--section-pad-mobile, 32px) 16px;
}
.entry-site-section-box {
min-height: var(--section-min-mobile, 0px);
}
.entry-site-section-grid,
.entry-site-section-grid-50-50,
.entry-site-section-grid-40-60,
.entry-site-section-grid-60-40 {
grid-template-columns: 1fr;
gap: 20px;
}
.entry-site-section-text-xlarge {
font-size: 1.5rem;
}
}
/* 원래 흰 상자가 없던 블록(문의·자주 묻는 질문·문장 등)에 배경·테두리를 입히면
그때만 상자 모양(여백·둥근 모서리)을 준다(2026-09-23 사용자 지시). */
/* 블록 상자 — 기본은 흰 바탕 + 옅은 테두리(편집 화면 '상자 꾸미기' 기본값과 같다). 주관회원이 색·투명도를
정하면 그 값이 인라인으로 덮는다(entrySiteSection.js applyCardStyle). */
.entry-site-block-boxed {
padding: 20px 22px;
border-radius: 12px;
box-sizing: border-box;
background: var(--surface);
border: 1px solid var(--border);
}
/* 상자 안 첫·끝 요소의 바깥 여백은 상자 안쪽 여백과 겹쳐 위아래가 달라 보인다 — 지운다. */
.entry-site-block-box > :first-child {
margin-top: 0;
}
.entry-site-block-box > :last-child {
margin-bottom: 0;
}
/* 상자 안 자주 묻는 질문 — 마지막 질문 아래 줄은 상자 테두리와 겹치므로 뺀다. */
.entry-site-block-boxed .entry-site-faq-item:last-child {
border-bottom: 0;
}
.entry-site-block-boxed > .entry-site-block-title:first-child {
margin-top: 0;
}
/* 상자 안 글자색을 정하면 그 안의 옅은 글자(설명·질문 답변 등)도 그 색을 따른다. */
.entry-site-block-boxed .entry-site-caption,
.entry-site-block-boxed .entry-site-faq-answer,
.entry-site-block-boxed .entry-site-contact-list dt,
.entry-site-block-boxed .entry-site-map-address {
color: var(--section-card-text, var(--text-muted));
}
/* 표 블록에 배경·글자색을 정하면 머리글 줄도 함께 따른다 — 머리글에 깔린 회색 바탕을
그대로 두면 어두운 표에서 글자가 묻힌다(2026-09-23 확인). */
.entry-site-table-wrap .markdown-table.entry-site-table th,
.entry-site-table-wrap .markdown-table.entry-site-table td {
color: var(--section-card-text, inherit);
}
.entry-site-table-wrap .markdown-table.entry-site-table th {
background: var(--section-card-head-bg, var(--bg));
}
/* 대회 홈페이지 메뉴 글꼴(2026-09-23 사용자 지시) — 주관회원이 사이트 꾸미기에서 고른다.
상단 메뉴·하위 메뉴·LNB·사이드 메뉴·페이지 네비·대회명이 한 벌로 바뀌고, 본문 글씨는 그대로 둔다.
고른 글씨체를 쓰는 글자가 화면에 있을 때만 파일을 받아온다(subset woff2 약 210~390KB). */
/* 사이트 이름(로고)은 메뉴 글꼴을 따르지 않는다(2026-10-06 대표님) — 어느 글꼴을 골라도 프리텐다드 굵게(.entry-site-brand)로 둔다. */
body.entry-site-menu-font-gothic .entry-site-header .entry-site-nav-link,
body.entry-site-menu-font-gothic .entry-site-header .entry-site-nav-sublink,
body.entry-site-menu-font-gothic .entry-site-header .entry-site-lnb-link,
body.entry-site-menu-font-gothic .entry-site-header .entry-site-nav-login,
body.entry-site-menu-font-gothic .entry-site-breadcrumb,
body.entry-site-menu-font-gothic .entry-site-sidebar-menu a,
body.entry-site-menu-font-gothic .entry-site-sidebar-toggle {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-menu-font-batang .entry-site-header .entry-site-nav-link,
body.entry-site-menu-font-batang .entry-site-header .entry-site-nav-sublink,
body.entry-site-menu-font-batang .entry-site-header .entry-site-lnb-link,
body.entry-site-menu-font-batang .entry-site-header .entry-site-nav-login,
body.entry-site-menu-font-batang .entry-site-breadcrumb,
body.entry-site-menu-font-batang .entry-site-sidebar-menu a,
body.entry-site-menu-font-batang .entry-site-sidebar-toggle {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-menu-font-pretendard .entry-site-header .entry-site-nav-link,
body.entry-site-menu-font-pretendard .entry-site-header .entry-site-nav-sublink,
body.entry-site-menu-font-pretendard .entry-site-header .entry-site-lnb-link,
body.entry-site-menu-font-pretendard .entry-site-header .entry-site-nav-login,
body.entry-site-menu-font-pretendard .entry-site-breadcrumb,
body.entry-site-menu-font-pretendard .entry-site-sidebar-menu a,
body.entry-site-menu-font-pretendard .entry-site-sidebar-toggle {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
/* 메뉴 글씨 굵기(2026-09-23 사용자 지시) — 주관회원이 400~700 중에서 고른다(기본 400).
대회명(로고)은 원래 굵기를 그대로 두고, 눌러서 이동하는 메뉴 글자만 바뀐다. */
.entry-site-header .entry-site-nav-link,
.entry-site-header .entry-site-nav-sublink,
.entry-site-header .entry-site-lnb-link,
.entry-site-header .entry-site-nav-login,
.entry-site-sidebar-menu a,
.entry-site-sidebar-toggle {
font-weight: var(--entry-site-menu-weight, 400);
}
/* 페이지 네비 사이 표시 — '>' 글자 대신 얇은 화살표 아이콘(루시드 chevron-right)을 쓴다
(2026-09-23 사용자 지시). 글자색을 그대로 따르고 크기는 글자보다 조금 작게. */
.entry-site-breadcrumb-sep {
width: 0.8em;
height: 0.8em;
flex: 0 0 auto;
opacity: 0.65;
}
/* 사이트 전체 기본 글꼴(2026-09-23 사용자 지시) — 사이트 꾸미기에서 제목·본문을 따로 고른다.
페이지마다 고른 제목 글꼴(페이지 꾸미기)이 있으면 아래 '페이지가 이긴다' 규칙이 덮는다. */
body.entry-site-body-font-gothic {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-body-font-batang {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-body-font-pretendard {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-heading-font-gothic h1,
body.entry-site-heading-font-gothic h2,
body.entry-site-heading-font-gothic h3,
body.entry-site-heading-font-gothic .entry-site-hero-title,
body.entry-site-heading-font-gothic .entry-site-sidebar-title,
body.entry-site-heading-font-gothic .entry-site-block-title {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-heading-font-batang h1,
body.entry-site-heading-font-batang h2,
body.entry-site-heading-font-batang h3,
body.entry-site-heading-font-batang .entry-site-hero-title,
body.entry-site-heading-font-batang .entry-site-sidebar-title,
body.entry-site-heading-font-batang .entry-site-block-title {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-pretendard h1,
body.entry-site-heading-font-pretendard h2,
body.entry-site-heading-font-pretendard h3,
body.entry-site-heading-font-pretendard .entry-site-hero-title,
body.entry-site-heading-font-pretendard .entry-site-sidebar-title,
body.entry-site-heading-font-pretendard .entry-site-block-title {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
/* 페이지에서 따로 고른 제목 글꼴이 사이트 기본을 이긴다(같은 무게의 선택자를 뒤에 둔다). */
body.entry-site-font-kopub h1,
body.entry-site-font-kopub h2,
body.entry-site-font-kopub h3,
body.entry-site-font-kopub .entry-site-hero-title,
body.entry-site-font-kopub .entry-site-sidebar-title,
body.entry-site-font-kopub .entry-site-block-title {
font-family: 'KoPubWorld 돋움체', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-font-pretendard h1,
body.entry-site-font-pretendard h2,
body.entry-site-font-pretendard h3,
body.entry-site-font-pretendard .entry-site-hero-title,
body.entry-site-font-pretendard .entry-site-sidebar-title,
body.entry-site-font-pretendard .entry-site-block-title {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
/* 푸터 이메일 + [복사](2026-09-23 사용자 지시) — 연락 수단 줄(카톡문의·전화) 옆에 둔다. */
.entry-site-footer-email {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.entry-site-footer-copy {
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
padding: 0.1rem 0.45rem;
font-size: 0.78rem;
color: var(--text-muted);
cursor: pointer;
}
.entry-site-footer-copy:hover {
color: var(--text);
}
/* 묻고답하기(2026-09-25 개편) — 대회 홈페이지 게시판과 같은 껍데기를 쓰고, 본인 확인 칸과
답변 상자만 따로 모양을 준다. 목록·글 본문은 .entry-site-board-* 를 그대로 쓴다. */
/* 본인 확인 칸 — 폭을 따로 좁히지 않는다. 다른 서브 페이지의 표·상자와 같은 폭이어야
한다(2026-09-25 사용자 지시 "테이블은 다른 서브 페이지와 일관되게 폭 맞추기"). */
.entry-site-qna-login {
margin: 1rem 0 0;
}
/* 입력칸은 상자 폭을 꽉 채운다 — 좁은 칸 하나만 덩그러니 놓이지 않게. */
.entry-site-qna-login .field input,
.entry-site-board-write .field input,
.entry-site-board-write .field textarea {
width: 100%;
box-sizing: border-box;
}
.entry-site-qna-login .field {
margin-bottom: 0.8rem;
}
.entry-site-qna-answer {
margin-top: 1rem;
padding: 0.9rem 1rem;
border-left: 3px solid var(--entry-site-accent, #2f6df6);
background: rgba(47, 109, 246, 0.05);
border-radius: 0 8px 8px 0;
}
.entry-site-qna-answer h4 {
margin: 0 0 0.4rem;
font-size: 0.92rem;
}
.entry-site-qna-answer p {
margin: 0 0 0.3rem;
white-space: pre-wrap;
}
/* 목록이 일 때(참가신청 화면의 공지 미리보기) 글머리 기호만 지운다.
여백은 .entry-site-board-rows가 정한 값을 그대로 쓴다 — 여기서 padding을 0으로 덮는 바람에
좌우 여백이 사라졌었다(2026-09-25 사용자 지적). */
ul.entry-site-board-rows {
list-style: none;
}
/* 참가신청·접수조회 옆 칸 — 공지사항과 묻고답하기를 위아래로 쌓는다. 두 덩어리가 붙어
있으면 [더보기] 버튼과 다음 제목이 맞닿아 답답하다(2026-09-25 사용자 지적). */
.entry-side-panel > section + section {
margin-top: 2rem;
}
.entry-side-panel .name-check-btn {
display: inline-block;
margin-top: 0.2rem;
}
/* --- 대회 화면 안의 입력 폼(2026-09-25) -------------------------------------------------
묻고답하기 본인 확인·글쓰기가 쓴다. 전에는 주관회원 화면용 organizer.css를 같이 실어
썼는데, 그 파일의 전역 body 규칙(display:flex; align-items:center; padding:3rem)이
대회 화면 전체를 가운데 좁은 상자로 만들어 버렸다(사용자 지적). 필요한 것만 여기 둔다.
모양은 게시판 글쓰기 칸(.entry-site-board-write)과 같게 맞춘다. */
.entry-site-field {
margin-bottom: 0.9rem;
}
.entry-site-field > label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
}
.entry-site-field input[type='text'],
.entry-site-field input[type='password'],
.entry-site-field input[type='file'],
.entry-site-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.75rem;
font: inherit;
background: var(--bg);
color: var(--text);
}
.entry-site-field textarea {
resize: vertical;
}
.entry-site-required {
color: var(--danger, #b42318);
}
/* 알림 줄(성공·실패) — 게시판 글쓰기 안내와 같은 자리에 쓴다. */
.entry-site-message {
margin: 0.6rem 0;
padding: 0.7rem 0.9rem;
border-radius: 8px;
background: rgba(180, 35, 24, 0.08);
color: var(--danger, #b42318);
font-size: 0.9rem;
}
.entry-site-message.success {
background: rgba(16, 122, 87, 0.08);
color: #107a57;
}
/* 폼 맨 위 안내 문장 — 무엇을 하는 칸인지 한 줄로 알린다. */
.entry-site-form-lead {
margin: 0 0 1rem;
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.6;
}
/* 확인·등록 버튼은 상자 폭을 채운다 — 좁은 버튼이 왼쪽에 덩그러니 놓이지 않게. */
.entry-site-qna-login .entry-site-button,
.entry-site-board-write .entry-site-button {
display: block;
width: 100%;
margin-top: 0.4rem;
text-align: center;
cursor: pointer;
}
/* ---------------------------------------------------------------------------------------------
상품게시판(2026-10-04 1단계, public/productBoard.js) — PC 가로 3개, 폰(699px 이하) 1개.
카드: 위 정사각형 썸네일, 아래 상품명·옵션(항목 | 값)·한 줄 소개·[문의 단추].
상세: 위 왼쪽 50% 사진 슬라이드(오른쪽 칸 높이에 맞춰 세로 가운데), 오른쪽 50% 정보. 아래 상세 설명.
--------------------------------------------------------------------------------------------- */
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
margin: 1rem 0;
}
@media (max-width: 699px) {
.product-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.product-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
overflow: hidden;
}
.product-card-link {
display: block;
color: inherit;
text-decoration: none;
}
.product-card-thumb {
aspect-ratio: 1 / 1;
background: var(--surface-2, #f1f3f6);
}
.product-card-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card-title {
display: block;
padding: 0.85rem 1rem 0.2rem;
font-size: 1.05rem;
line-height: 1.4;
}
.product-card-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.55rem;
padding: 0.35rem 1rem 1rem;
}
.product-card-options,
.product-detail-options {
display: grid;
gap: 0.25rem;
margin: 0;
}
.product-option-row {
display: grid;
grid-template-columns: minmax(4.5rem, auto) 1fr;
gap: 0.75rem;
font-size: 0.92rem;
}
.product-option-row dt {
color: var(--muted, #64748b);
}
/* 가격 항목(2026-10-25) — 목록 카드에서는 금액만 한 줄에 나란히(정가 취소선 옆에 판매가). */
.product-option-list {
display: grid;
gap: 0.4rem;
}
.product-prices {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.6rem;
row-gap: 0.2rem;
}
.product-option-row.is-price {
align-items: baseline;
}
.product-option-row dd {
margin: 0;
word-break: keep-all;
overflow-wrap: anywhere;
}
.product-card-summary {
margin: 0;
color: var(--muted, #64748b);
font-size: 0.92rem;
line-height: 1.5;
}
/* 링크(a)라 글자 가운데는 text-align으로 맞춘다 — 단추였을 때 쓰던 justify-content는 듣지 않는다(2026-10-04). */
.product-inquiry-btn {
margin-top: auto;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.product-inquiry-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.product-detail-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2rem;
align-items: center;
}
@media (max-width: 699px) {
.product-detail-top {
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
}
}
.product-slider {
position: relative;
}
.product-slider-track {
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: var(--surface-2, #f1f3f6);
}
.product-slider-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
.product-slider-arrow {
position: absolute;
top: 50%;
width: 2.25rem;
height: 2.25rem;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
}
.product-slider-arrow.is-prev {
left: 0.6rem;
}
.product-slider-arrow.is-next {
right: 0.6rem;
}
.product-slider-dots {
display: flex;
justify-content: center;
gap: 0.4rem;
margin-top: 0.6rem;
}
.product-slider-dot {
width: 0.55rem;
height: 0.55rem;
padding: 0;
border: none;
border-radius: 50%;
background: var(--border, #d6dbe3);
cursor: pointer;
}
.product-slider-dot.active {
background: var(--accent, #2563eb);
}
.product-detail-info {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.product-detail-title {
margin: 0;
font-size: 1.45rem;
line-height: 1.35;
}
.product-detail-summary {
margin: 0;
color: var(--muted, #64748b);
line-height: 1.55;
}
.product-detail-info .product-inquiry-btn {
margin-top: 0.4rem;
}
.product-detail-body {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* 상세 꾸미기 블록(4단계) — 상세 설명이 없으면 이 줄이 위쪽 선을 맡는다. 첫 블록 제목 위 여백은 선 아래 여백으로 갈음한다. */
.product-detail-blocks {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.product-detail-body + .product-detail-blocks {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.product-detail-blocks > :first-child > .entry-site-block-title:first-child,
.product-detail-blocks > .entry-site-block-title:first-child {
margin-top: 0;
}
/* 상품 온라인 문의(2026-10-04 2단계, public/productInquiry.js) */
.product-inquiry {
display: grid;
gap: 1.1rem;
}
.product-inquiry-title {
margin: 0;
font-size: 1.35rem;
}
.product-inquiry-product {
display: flex;
gap: 0.9rem;
align-items: center;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-2, #f7f8fa);
}
.product-inquiry-product img {
width: 72px;
height: 72px;
border-radius: 8px;
object-fit: cover;
}
.product-inquiry-product > div {
display: grid;
gap: 0.15rem;
}
.product-inquiry-option {
color: var(--muted, #64748b);
font-size: 0.9rem;
}
.product-inquiry-step {
display: grid;
/* 칸이 내용(입력 칸의 기본 폭 14rem)만큼 벌어지지 않게 — 좁은 폰이나 글자를 키운 폰에서 입력 칸·안내 글이 상자 밖으로 넘쳤다(2026-10-11). */
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.product-inquiry-step h3 {
margin: 0;
font-size: 1.05rem;
}
.product-inquiry-hint {
margin: 0;
color: var(--muted, #64748b);
font-size: 0.92rem;
line-height: 1.5;
}
.product-inquiry-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
min-width: 0;
}
.product-inquiry-row input {
flex: 1 1 14rem;
min-width: 0;
}
/* [내 문의]의 이메일 인증 칸도 같은 모양으로(2026-10-11) — 그 화면은 .product-inquiry 상자 밖이라 입력 칸이 브라우저 기본 모양으로 나왔다. */
.product-inquiry input[type='email'],
.product-inquiry input[type='text'],
.product-inquiry input[type='tel'],
.product-inquiry select,
.product-inquiry textarea,
.product-inquiry-step input[type='email'],
.product-inquiry-step input[type='text'] {
width: 100%;
padding: 0.6rem 0.7rem;
border: 1px solid var(--border);
border-radius: 8px;
font: inherit;
box-sizing: border-box;
}
.product-inquiry-row input[type='email'],
.product-inquiry-row input[type='text'] {
width: auto;
}
.product-inquiry-field {
display: grid;
gap: 0.35rem;
}
.product-inquiry-field label {
font-weight: 600;
}
.product-inquiry-badge {
margin-left: 0.4rem;
color: var(--muted, #64748b);
font-size: 0.78rem;
font-weight: 400;
}
.product-inquiry-badge.is-required {
color: #dc2626;
}
.product-inquiry-limit {
justify-self: end;
color: var(--muted, #64748b);
font-size: 0.8rem;
}
.product-inquiry-checks {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
}
.product-inquiry-check {
font-weight: 400 !important;
}
.product-inquiry-trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
opacity: 0;
}
.product-inquiry-consent {
font-size: 0.88rem;
line-height: 1.5;
}
.product-inquiry-submit {
justify-self: start;
}
.product-inquiry-message {
margin: 0;
font-size: 0.92rem;
}
.product-inquiry-message.is-error {
color: #dc2626;
}
.product-inquiry-message.is-success {
color: #15803d;
}
.product-inquiry-done {
padding: 1rem;
border-radius: 10px;
background: #ecfdf5;
color: #166534;
line-height: 1.5;
}
/* 안내 글 안의 그림은 상자 폭을 넘지 않는다. */
.entry-record-notice img {
display: block;
max-width: 100%;
height: auto;
margin: 0.6em 0;
border-radius: 8px;
}
/* 하위 메뉴 펴기/접기 표시(2026-10-06 대표님) — 머리말 메뉴·폰 서랍·사이드 바 '전체 메뉴'가 같은 ▾를 쓴다.
글자 대신 테두리 두 변으로 그려 글꼴·색(비주얼 위 흰 글씨 포함)을 그대로 따른다. */
.entry-site-nav-caret {
display: inline-block;
flex: none;
width: 0.38em;
height: 0.38em;
margin-left: 0.4em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-0.18em) rotate(45deg);
transition: transform 0.15s ease;
opacity: 0.75;
vertical-align: middle;
}
/* PC — 마우스를 올리거나(터치 화면은 눌러) 하위가 펼쳐진 동안 ▴로 뒤집는다. */
@media (min-width: 800px) {
.entry-site-nav-group:hover > .entry-site-nav-parent .entry-site-nav-caret,
.entry-site-nav-group.is-open > .entry-site-nav-parent .entry-site-nav-caret {
transform: translateY(0.08em) rotate(225deg);
}
}
/* 폰 서랍 — 하위 메뉴는 접힌 채로 시작하고(지금 보는 메뉴의 묶음만 펴 둔다), 상위 메뉴를 누르면 펴고 접는다. */
@media (max-width: 799px) {
.entry-site-nav-group:not(.is-expanded) > .entry-site-nav-sub {
display: none;
}
.entry-site-nav-link.entry-site-nav-parent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.entry-site-nav-parent .entry-site-nav-caret {
width: 0.5em;
height: 0.5em;
margin: 0 0.3rem 0 0;
border-width: 2px;
}
.entry-site-nav-group.is-expanded > .entry-site-nav-parent .entry-site-nav-caret {
transform: translateY(0.12em) rotate(225deg);
}
}
/* 사이드 바 '전체 메뉴' — 하위가 있는 줄은 줄 전체가 단추다(누르면 펴고 접는다). 모양은 옆 링크 줄과 같게 맞춘다. */
.entry-site-sidebar-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
padding: 0.35rem 0.5rem;
border: 0;
border-radius: 6px;
background: none;
color: var(--entry-site-sidebar-color, var(--text-muted));
font: inherit;
font-size: 0.9rem;
font-weight: var(--entry-site-menu-weight, 400);
text-align: left;
cursor: pointer;
}
.entry-site-sidebar-toggle:hover {
background: var(--bg);
}
.entry-site-sidebar-toggle-label {
min-width: 0;
overflow-wrap: anywhere;
}
.entry-site-sidebar-toggle .entry-site-nav-caret {
margin: 0 0.2rem 0 0;
width: 0.42em;
height: 0.42em;
}
.entry-site-sidebar-group.is-expanded .entry-site-sidebar-toggle .entry-site-nav-caret {
transform: translateY(0.1em) rotate(225deg);
}
.entry-site-sidebar-sub {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin: 0.1rem 0 0.3rem 0.7rem;
padding-left: 0.5rem;
border-left: 1px solid var(--border);
}
.entry-site-sidebar-sub[hidden] {
display: none;
}
/* 폰 서랍은 한 줄로만 쌓는다(2026-10-06) — PC 메뉴의 줄 바꿈(flex-wrap)이 남아 있으면, 서랍 높이를 화면에 맞춘 뒤로
넘치는 메뉴가 안에서 굴러가지 않고 옆 칸으로 넘어가 두 줄로 깨졌다. 항목이 눌려 줄어들지도 않게 한다. */
@media (max-width: 799px) {
.entry-site-nav {
flex-wrap: nowrap;
}
.entry-site-nav > * {
flex: 0 0 auto;
}
}
/* 온라인 접수 카드(2026-10-06 대표님) — 제목 아래 정보 상자, 그 아래 왼쪽 접수 상태·오른쪽 [온라인 접수] 단추(같은 폭).
페이지 블록과 메인 복합 블록의 요소가 함께 쓴다. 복합 블록의 어두운 배경 위에서도 읽히게 상자는 제 바탕·글자색을 갖는다. */
.entry-site-entry-card {
text-align: left;
}
.entry-site-entry-card-box {
padding: 18px 20px;
border: 1px solid #e4e7ee;
border-radius: 12px;
background: #fff;
color: var(--section-card-text, #222);
}
/* 대회·행사 이름 — 항목명 없이 상자 맨 위에 제목으로(2026-10-07 대표님). 쏘폼활용예시 카드 제목(.example-name)과 같은 크기·굵기. */
.entry-site-entry-card-name {
display: block;
margin: 0 0 10px;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.4;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* 폼 카드 사진(2026-10-07) — 이름 아래에 상자 좌우 끝까지(상자 안쪽 여백 20px을 넘어) 4:3으로 넣는다. */
.entry-site-entry-card-photo {
margin: 0 -20px 14px;
aspect-ratio: 4 / 3;
background: #eef0f4;
overflow: hidden;
}
.entry-site-entry-card-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.entry-site-entry-card-info {
/* 항목·값 글씨는 일반 본문(글 블록 .entry-site-text)과 같은 크기로(2026-10-07 대표님). */
font-size: 0.95rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 6px 14px;
margin: 0;
}
.entry-site-entry-card-info dt {
color: var(--section-card-text, #6b7280);
white-space: nowrap;
}
/* '해당 없음'은 눈에 덜 띄게 — 받는 것(사전 등록·단체 초대)이 있는 줄이 먼저 읽히도록. */
.entry-site-entry-card-info dd.is-none {
opacity: 0.6;
}
/* 값도 왼쪽 항목명과 같은 글씨(굵기·색)로 적는다(2026-10-07 대표님) — 굵은 것은 맨 위 이름 하나뿐이다. */
.entry-site-entry-card-info dd {
margin: 0;
color: var(--section-card-text, #6b7280);
font-weight: 400;
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-entry-card-foot {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
margin-top: 10px;
}
.entry-site-entry-card-status,
.entry-site-entry-card-apply {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.6rem 0.8rem;
border-radius: 10px;
box-sizing: border-box;
font-weight: 700;
text-align: center;
}
.entry-site-entry-card-status {
border: 1px solid #e4e7ee;
background: #eef2f7;
color: #5b6475;
}
.entry-site-entry-card-status.is-open {
background: #e7f6ee;
border-color: #bfe6d0;
color: #13804b;
}
.entry-site-entry-card-status.is-upcoming {
background: #eaf1fb;
border-color: #c9dcf6;
color: #2f6fd0;
}
/* --- 가로형 온라인 접수 카드(2026-10-15 대표님) — 이름 한 줄(아래 선), 그 아래 왼쪽 사진(상자 끝까지) · 오른쪽 정보와 단추 줄. ---
카드 폭으로 판단한다(화면 폭이 아니라) — 복합 블록의 반 칸처럼 좁으면 세로로 쌓는다. */
.entry-site-entry-card.is-horizontal {
container: entrycard / inline-size;
}
.entry-site-entry-card-box.is-horizontal {
padding: 0;
overflow: hidden;
}
/* 가로형 — 대회명은 오른쪽 칸 맨 위(2026-10-25 대표님). 그 아래 종목·참가비와 붙어 보이게 칸 사이 간격을 조금 당긴다. */
.entry-site-entry-card-box.is-horizontal .entry-site-entry-card-name {
margin: 0 0 -12px;
padding: 0;
border-bottom: 0;
}
.entry-site-entry-card-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.entry-site-entry-card-body.no-photo {
grid-template-columns: minmax(0, 1fr);
}
/* 폭은 칸에 맞추고(4:3), 오른쪽 칸이 더 길면 그 높이까지 늘린다 — 높이를 기준으로 4:3을 잡으면 카드가 좁을 때 사진이 오른쪽 칸을 덮었다(2026-10-17). */
.entry-site-entry-card-box.is-horizontal .entry-site-entry-card-photo {
margin: 0;
width: 100%;
height: auto;
min-height: 100%;
}
.entry-site-entry-card-side {
display: flex;
flex-direction: column;
gap: 24px;
padding: 28px 32px 24px;
}
.entry-site-entry-card-side .entry-site-entry-card-info {
flex: 1;
align-content: center;
font-size: 1.05rem;
gap: 10px 16px;
}
.entry-site-entry-card-side .entry-site-entry-card-foot {
margin-top: 0;
}
@container entrycard (max-width: 640px) {
.entry-site-entry-card-body {
grid-template-columns: minmax(0, 1fr);
}
.entry-site-entry-card-box.is-horizontal .entry-site-entry-card-photo {
height: auto;
aspect-ratio: 4 / 3;
}
.entry-site-entry-card-side {
gap: 14px;
padding: 16px 20px 20px;
}
.entry-site-entry-card-side .entry-site-entry-card-info {
font-size: 0.95rem;
gap: 6px 14px;
}
}
/* 접수 예정·마감 — 단추는 자리를 지키되 흐리게, 누를 수 없다. */
.entry-site-entry-card-apply.is-disabled {
border-color: #d5dae3;
background: #eef0f4;
color: #9aa3b2;
cursor: not-allowed;
}
/* 등록담당자 안내 글 아래 버튼 줄이 감춰지면(보일 버튼 없음) 글의 아래 여백도 없앤다 — 상자 위아래 여백을 같게(2026-10-06). */
#leaderManagerOnlyHint:has(+ #leaderActionsRow[hidden]) {
margin-bottom: 0;
}
/* 상품 카드 목록 블록(2026-10-06) — 카드 모양은 상품게시판(.product-grid/.product-card)을 그대로 쓴다. */
.entry-site-product-cards .product-grid {
margin: 0;
}
.entry-site-product-cards-more {
display: flex;
justify-content: center;
margin-top: 1rem;
}
/* 내 문의(2026-10-06) — 문의한 사람이 자기 문의 목록·내용을 본다. 입력 칸·안내 글은 문의 화면(.product-inquiry-*)을 그대로 쓴다. */
.my-inquiries .product-inquiry-step h3 {
margin-top: 0;
}
.my-inquiry-link {
padding: 0;
border: 0;
background: none;
color: var(--entry-site-accent, var(--accent));
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.my-inquiry-list {
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--border);
}
.my-inquiry-row {
border-bottom: 1px solid var(--border);
}
.my-inquiry-row-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 0.25rem;
color: inherit;
text-decoration: none;
}
.my-inquiry-row-link:hover .my-inquiry-row-title {
text-decoration: underline;
}
.my-inquiry-row-text {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.my-inquiry-row-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-inquiry-row-meta {
color: var(--text-muted);
font-size: 0.875rem;
}
.my-inquiry-status {
flex: 0 0 auto;
padding: 0.2rem 0.6rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.8125rem;
white-space: nowrap;
}
.my-inquiry-status.is-new {
color: var(--text-muted);
}
.my-inquiry-status.is-reviewing {
border-color: #d9a400;
color: #8a6800;
}
.my-inquiry-status.is-done {
border-color: #2e9e5b;
color: #1f7a44;
}
.my-inquiry-empty {
margin: 1rem 0 0;
color: var(--text-muted);
}
.my-inquiry-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.my-inquiry-product {
margin: 0;
font-size: 1.125rem;
}
.my-inquiry-rows {
margin: 1rem 0;
border-top: 1px solid var(--border);
}
.my-inquiry-rowline {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
gap: 0.75rem;
padding: 0.6rem 0.25rem;
border-bottom: 1px solid var(--border);
}
.my-inquiry-rowline dt {
color: var(--text-muted);
}
.my-inquiry-rowline dd {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.my-inquiry-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1rem;
}
@media (max-width: 699px) {
.my-inquiry-rowline {
grid-template-columns: minmax(0, 1fr);
gap: 0.15rem;
}
}
/* 링크를 건 사진 블록(2026-10-06) — 사진 전체가 링크다. 모양은 그대로 두고 손가락 표시만 바뀐다. */
.entry-site-image-link {
display: block;
}
/* 링크를 건 후원사 로고(2026-10-06) — 링크가 줄 배치에 끼어들지 않게 한다(display: contents).
그래야 로고가 링크 없는 로고와 똑같은 크기·자리로 놓인다(감싸는 상자를 두면 크기가 달라졌다). */
.entry-site-sponsor-link {
display: contents;
}
.entry-site-sponsor-link .entry-site-sponsor-logo {
cursor: pointer;
}
/* --- 체험 사이트 꾸미기 안내(2026-10-12 대표님, public/sampleGuide.js) ------------------------------------ */
/* 맨 위 빨간 안내 줄 — 두 체험 사이트에서만, 닫기 없이 늘 보인다. 굴려도 화면 맨 위에 붙어 있다. */
.sample-guide-bar {
position: sticky;
top: 0;
z-index: 40;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 12px;
padding: 7px 12px;
background: #d92b2b;
color: #ffffff;
font-size: 14px;
line-height: 1.4;
text-align: center;
}
.sample-guide-bar-text {
font-weight: 700;
}
.sample-guide-bar-actions {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.sample-guide-bar-btn {
padding: 2px 12px;
border: 1px solid #ffffff;
border-radius: 999px;
background: transparent;
color: #ffffff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.sample-guide-bar-btn:hover,
.sample-guide-bar-btn:focus-visible {
background: #ffffff;
color: #d92b2b;
}
/* 붙어 다니는 머리말은 안내 줄 바로 아래에 붙는다. 비주얼 위에 떠 있는 머리말(레이아웃 01)도 안내 줄만큼 내려온다.
제자리에 놓이는 머리말(position: relative·static)은 건드리지 않는다 — 내리면 줄 아래에 빈 띠가 생기고 아래 내용을 덮는다.
어느 쪽인지는 화면이 재서 알려 준다(sampleGuide.js가 sample-guide-header-offset을 붙인다). */
body.sample-guide-header-offset .entry-site-header {
top: var(--sample-guide-bar-height, 0px);
}
body.sample-guide-open {
overflow: hidden;
}
.sample-guide-overlay {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(15, 20, 30, 0.55);
}
.sample-guide-modal {
display: flex;
flex-direction: column;
width: min(1080px, 100%);
max-height: 100%;
border-radius: 14px;
background: #ffffff;
color: #222222;
overflow: hidden;
}
/* 머리(제목·닫기·유형 탭)는 늘 위에 있고 본문만 굴러간다. */
.sample-guide-head {
flex: 0 0 auto;
padding: 14px 20px 12px;
border-bottom: 1px solid #e4e7ee;
background: #ffffff;
}
.sample-guide-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sample-guide-title-group {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
min-width: 0;
}
.sample-guide-title {
margin: 0;
font-size: 1.15rem;
}
/* 제목 옆 [사이트 보기 ↗] — 그 체험 사이트를 새 창으로. */
.sample-guide-visit {
color: #d92b2b;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
}
.sample-guide-visit:hover,
.sample-guide-visit:focus-visible {
text-decoration: underline;
}
.sample-guide-close {
flex: 0 0 auto;
padding: 4px 14px;
border: 1px solid #cfd5df;
border-radius: 8px;
background: #ffffff;
color: #333333;
font: inherit;
cursor: pointer;
}
.sample-guide-body {
flex: 1 1 auto;
min-height: 0;
padding: 18px 20px 24px;
overflow-y: auto;
overscroll-behavior: contain;
}
.sample-guide-stage > .sample-guide-note {
margin-bottom: 0;
}
.sample-guide-lead,
.sample-guide-note {
margin: 0 0 18px;
color: #555555;
line-height: 1.6;
}
/* [메인] — 왼쪽은 조각 사진(틈 없이 이어져 페이지 한 장으로 보인다), 오른쪽은 그 조각의 설명. */
.sample-guide-seg {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 0 22px;
}
.sample-guide-shot {
position: relative;
border-left: 1px solid #d5dae3;
border-right: 1px solid #d5dae3;
background: #f4f6f9;
}
.sample-guide-seg:first-of-type .sample-guide-shot {
border-top: 1px solid #d5dae3;
}
.sample-guide-seg:last-of-type .sample-guide-shot {
border-bottom: 1px solid #d5dae3;
}
.sample-guide-shot img {
display: block;
width: 100%;
height: auto;
}
.sample-guide-marks {
position: absolute;
top: 8px;
left: 8px;
display: flex;
gap: 4px;
}
.sample-guide-num {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
background: #d92b2b;
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.sample-guide-notes {
padding: 4px 0 22px;
border-top: 1px dashed #d5dae3;
}
.sample-guide-seg:first-of-type .sample-guide-notes {
border-top: 0;
}
.sample-guide-item {
padding-top: 12px;
}
.sample-guide-item-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 6px;
font-size: 1rem;
}
.sample-guide-kind {
padding: 1px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.sample-guide-kind-setting {
background: #eef0f4;
color: #454c59;
}
.sample-guide-kind-block {
background: #e8f0fe;
color: #1a56c4;
}
.sample-guide-where {
margin: 0 0 6px;
color: #6b7280;
font-size: 13px;
}
.sample-guide-text {
margin: 0;
line-height: 1.65;
}
.sample-guide-hero {
margin-top: 12px;
padding: 12px;
border-radius: 10px;
background: #f4f6f9;
}
.sample-guide-hero-title {
margin: 0 0 10px;
font-weight: 700;
font-size: 14px;
}
.sample-guide-hero-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sample-guide-hero-item {
margin: 0;
border: 1px solid #d5dae3;
border-radius: 8px;
background: #ffffff;
overflow: hidden;
}
.sample-guide-hero-item.is-current {
border-color: #d92b2b;
}
.sample-guide-hero-item img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top;
}
.sample-guide-hero-item figcaption {
padding: 8px 10px;
font-size: 13px;
line-height: 1.45;
}
.sample-guide-hero-current {
display: inline-block;
margin-left: 6px;
padding: 0 7px;
border-radius: 999px;
background: #d92b2b;
color: #ffffff;
font-size: 11px;
font-weight: 700;
}
/* [서브] — 유형 탭(머리에 붙어 있다)과, 고른 유형의 블록을 한 줄에 하나씩. */
.sample-guide-tabs {
display: flex;
gap: 6px;
margin-top: 12px;
overflow-x: auto;
scrollbar-width: thin;
}
.sample-guide-tab {
flex: 0 0 auto;
padding: 5px 14px;
border: 1px solid #cfd5df;
border-radius: 999px;
background: #ffffff;
color: #333333;
font: inherit;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
}
.sample-guide-tab.is-active {
border-color: #d92b2b;
background: #d92b2b;
color: #ffffff;
font-weight: 700;
}
.sample-guide-group-title {
margin: 0 0 16px;
font-weight: 700;
font-size: 1.05rem;
}
.sample-guide-block {
margin: 0 0 26px;
padding-top: 16px;
border-top: 1px solid #e4e7ee;
}
.sample-guide-block-name {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
font-size: 1rem;
}
.sample-guide-block-name::before {
content: '';
width: 4px;
height: 1em;
border-radius: 2px;
background: #d92b2b;
}
.sample-guide-block-tag {
padding: 1px 8px;
border-radius: 999px;
background: #eef0f4;
color: #454c59;
font-size: 12px;
font-weight: 400;
}
.sample-guide-block-desc {
margin: 0 0 12px;
color: #6b7280;
font-size: 14px;
line-height: 1.55;
}
/* 예시 블록이 서는 자리 — 방문자 화면의 본문처럼 옅은 바탕 위에 그린다. */
.sample-guide-stage {
padding: 16px;
border: 1px dashed #cfd5df;
border-radius: 10px;
background: #f7f8fa;
overflow: hidden;
}
.sample-guide-stage > .entry-site-block:last-child,
.sample-guide-stage > :last-child {
margin-bottom: 0;
}
/* 복합 블록은 방문자 화면에서 화면 폭 전체로 번지는데, 여기서는 상자 안에 가둔다. */
.sample-guide-stage .entry-site-section {
margin-left: auto;
margin-right: auto;
border-radius: 8px;
}
@media (max-width: 760px) {
.sample-guide-bar {
font-size: 13px;
padding: 6px 10px;
}
.sample-guide-overlay {
padding: 0;
}
.sample-guide-modal {
width: 100%;
height: 100%;
max-height: none;
border-radius: 0;
}
.sample-guide-head {
padding: 12px 14px 10px;
}
.sample-guide-body {
padding: 14px 14px 22px;
}
/* 폰에서는 사진 아래에 그 조각의 설명을 둔다. */
.sample-guide-seg {
grid-template-columns: minmax(0, 1fr);
margin-bottom: 20px;
}
.sample-guide-shot,
.sample-guide-seg:first-of-type .sample-guide-shot,
.sample-guide-seg:last-of-type .sample-guide-shot {
border: 1px solid #d5dae3;
border-radius: 8px;
overflow: hidden;
}
.sample-guide-notes,
.sample-guide-seg:first-of-type .sample-guide-notes {
padding: 0 0 4px;
border-top: 0;
}
.sample-guide-stage {
padding: 10px;
}
}
/* 예시 블록은 서브 페이지 본문 폭쯤으로 줄여 그린다(사진·영상이 모달 폭 전체로 커지면 한 화면에 블록 하나도 다 안 보인다). */
.sample-guide-stage > * {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* 접수 카드는 실제로도 좁은 칸에 서는 일이 많다 — 카드 한 장 폭으로. */
.sample-guide-stage > .entry-site-entry-card-block,
.sample-guide-stage > .entry-site-entry-card {
max-width: 420px;
}
/* 가로형은 넓어야 가로로 선다(카드 폭 640px 아래면 세로로 쌓인다) — 다른 블록과 같은 폭으로. */
.sample-guide-stage > .entry-site-entry-card.is-horizontal {
max-width: 720px;
}
/* 한 장으로 연 안내 화면(/sample-guide.html) — 주관회원 화면의 틀 안에 꽉 차게 선다. 바깥 어둠과 둥근 모서리는 틀이 맡는다. */
body.sample-guide-embedded {
margin: 0;
background: #ffffff;
}
body.sample-guide-embedded .sample-guide-overlay {
padding: 0;
background: #ffffff;
}
body.sample-guide-embedded .sample-guide-modal {
width: 100%;
height: 100%;
max-height: none;
border-radius: 0;
}
/* 주관회원 화면에서 연 안내에는 '지금 이 사이트' 꼬리표를 달지 않는다(그 사이트에 와 있는 것이 아니다 — 테두리 색으로만 가린다). */
body.sample-guide-embedded .sample-guide-hero-current {
display: none;
}
/* 복합 블록 예시는 위아래 여백을 줄인다(2026-10-13 대표님) — 실제 메인에서는 배경이 넉넉히 깔리지만, 예시에서는 내용만 보이면 된다. */
.sample-guide-stage .entry-site-section {
padding-top: 22px;
padding-bottom: 22px;
}
.sample-guide-stage .entry-site-section-box {
min-height: 0;
}
/* 유형 하나의 예시 블록만 그리는 화면(/sample-guide.html?view=blocks) — 주관회원 블록 도움말이 틀 안에 띄운다. 틀 안에서는 굴리지 않는다. */
body.sample-guide-bare {
overflow: hidden;
}
.sample-guide-bare-body .sample-guide-block:first-child {
padding-top: 0;
border-top: 0;
}
.sample-guide-bare-body .sample-guide-block:last-child {
margin-bottom: 0;
}
/* 본문 상자가 내용만큼 자라야 높이를 바로 잰다(방문자 화면의 body는 세로로 늘어놓는 틀이라, 그냥 두면 틀 높이에 눌린다). */
.sample-guide-bare-body {
flex: 0 0 auto;
width: 100%;
}
/* --- 서브 사이드 메뉴 '상단'(2026-10-14 대표님) — 본문 위 가로 탭 줄. 지금 페이지는 사이트 주 색상 글자와 아래 굵은 선. --- */
.entry-site-top-tabs {
width: 100%;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.entry-site-top-tabs-inner {
display: flex;
justify-content: center;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 1.5rem;
box-sizing: border-box;
overflow-x: auto;
scrollbar-width: none;
}
.entry-site-top-tabs-inner::-webkit-scrollbar {
display: none;
}
.entry-site-top-tab {
flex: 1 1 0;
min-width: max-content;
padding: 1.6rem 1.2rem 1.4rem;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
color: var(--text);
font-weight: 700;
font-size: 1.05rem;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.entry-site-top-tab:hover {
color: var(--accent);
}
.entry-site-top-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* --- 페이지 위치 표시를 제목 줄 오른쪽에(2026-10-14 대표님) — 왼쪽 큰 제목, 오른쪽 작은 위치 표시, 아래 가는 선. --- */
.entry-site-breadcrumb.entry-site-breadcrumb-title-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 0.5rem 1.5rem;
flex-wrap: wrap;
padding: 48px 1.5rem 0;
font-size: 0.85rem;
}
/* 큰 제목 없이 위치 표시만(2026-10-21) — 오른쪽 끝에 둔다. */
.entry-site-breadcrumb-title-row.is-trail-only {
justify-content: flex-end;
padding-top: 24px;
}
.entry-site-breadcrumb-title-row.is-trail-only::after {
margin-top: 0.8rem;
}
.entry-site-breadcrumb-trail {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
padding-bottom: 0.4rem;
color: var(--text-muted);
}
.entry-site-breadcrumb-title-row::after {
content: '';
flex-basis: 100%;
height: 1px;
margin-top: 1.4rem;
margin-bottom: 1.6rem;
background: var(--border);
}
.entry-site-breadcrumb-title-row .entry-site-breadcrumb-current {
font-weight: 600;
}
@media (max-width: 760px) {
.entry-site-top-tabs-inner {
justify-content: flex-start;
padding: 0 0.5rem;
}
.entry-site-top-tab {
flex: 0 0 auto;
padding: 1rem 0.9rem 0.9rem;
font-size: 0.95rem;
}
.entry-site-breadcrumb.entry-site-breadcrumb-title-row {
flex-direction: column;
align-items: flex-start;
padding-top: 28px;
}
.entry-site-breadcrumb-title-row::after {
margin-top: 0.6rem;
margin-bottom: 1rem;
}
}
/* --- 리아체(RiaSans, 2026-10-14 대표님) — 제목 글꼴 고르기의 '리아체'. 롯데GRS 무료 배포 글꼴(라이선스: public/fonts/riasans/RiaSans_license.pdf).
공식 배포 파일(OTF)을 고치지 않고 그대로 쓴다(임의 수정·개작 재배포 금지). 이 글꼴을 쓰는 글자가 화면에 있을 때만 받는다.
쓰는 곳: 페이지 제목·블록 제목·메뉴 제목(GNB·하위 메뉴·사이드 메뉴·상단 탭). 사이트 이름·로고 자리(.entry-site-brand)와 본문에는 쓰지 않는다. --- */
@font-face {
font-family: 'RiaSans';
src: url('/fonts/riasans/RiaSans-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'RiaSans';
src: url('/fonts/riasans/RiaSans-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'RiaSans';
src: url('/fonts/riasans/RiaSans-ExtraBold.otf') format('opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* 제목 글꼴 리아체 — 페이지 큰 제목·블록 제목에만(메뉴는 메뉴 글꼴에서 따로 고른다, 2026-10-14 대표님). 다른 제목 글꼴과 같은 무게의 선택자. */
body.entry-site-heading-font-riasans h1,
body.entry-site-heading-font-riasans h2,
body.entry-site-heading-font-riasans h3,
body.entry-site-heading-font-riasans .entry-site-hero-title,
body.entry-site-heading-font-riasans .entry-site-sidebar-title,
body.entry-site-heading-font-riasans .entry-site-block-title {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
letter-spacing: -0.02em;
}
/* 큰 제목은 ExtraBold가 기본. 제목 굵기를 따로 고르면 아래 '제목 굵기'가 이긴다. */
body.entry-site-heading-font-riasans h1 {
font-weight: 800;
}
/* 메뉴 글꼴 리아체 — 다른 메뉴 글꼴과 같은 자리(상단·하위 메뉴, 사이드 메뉴, 페이지 위치 표시). 사이트 이름(로고)은 그대로. */
body.entry-site-menu-font-riasans .entry-site-header .entry-site-nav-link,
body.entry-site-menu-font-riasans .entry-site-header .entry-site-nav-sublink,
body.entry-site-menu-font-riasans .entry-site-header .entry-site-lnb-link,
body.entry-site-menu-font-riasans .entry-site-header .entry-site-nav-login,
body.entry-site-menu-font-riasans .entry-site-breadcrumb,
body.entry-site-menu-font-riasans .entry-site-sidebar-menu a,
body.entry-site-menu-font-riasans .entry-site-sidebar-toggle {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
/* 상단 탭(서브 사이드 메뉴 '상단')도 메뉴 글꼴·굵기를 따른다. */
body.entry-site-menu-font-gothic .entry-site-top-tab {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-menu-font-batang .entry-site-top-tab {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-menu-font-pretendard .entry-site-top-tab {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-menu-font-riasans .entry-site-top-tab {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
/* --- 글씨 크기·굵기(2026-10-14 대표님) — 사이트 꾸미기에서 메뉴·제목·본문을 따로. 보통·기본이면 아무것도 덧씌우지 않는다. --- */
body.entry-site-menu-size-set .entry-site-header .entry-site-nav-link {
font-size: calc(0.9rem * var(--entry-site-menu-scale, 1));
}
body.entry-site-menu-size-set .entry-site-header .entry-site-lnb-link,
body.entry-site-menu-size-set .entry-site-header .entry-site-nav-sublink {
font-size: calc(0.85rem * var(--entry-site-menu-scale, 1));
}
body.entry-site-menu-size-set .entry-site-sidebar-menu a,
body.entry-site-menu-size-set .entry-site-sidebar-toggle {
font-size: calc(0.9rem * var(--entry-site-menu-scale, 1));
}
body.entry-site-menu-size-set .entry-site-top-tab {
font-size: calc(1.05rem * var(--entry-site-menu-scale, 1));
}
body.entry-site-menu-size-set .entry-site-breadcrumb-trail {
font-size: calc(0.85rem * var(--entry-site-menu-scale, 1));
}
/* 접수 화면(공지사항·묻고답하기·접수조회·온라인 접수)과 게시판 화면의 큰 제목(.entry-site-board-title)도 같은 비율로(2026-10-14 대표님 지적). */
/* 사이드 메뉴 제목(전체 메뉴)도 제목 글씨를 따른다(2026-10-22 대표님) — 본문 제목과 같은 높이라야 두 상자의 윗변이 맞는다. */
body.entry-site-heading-size-set .entry-site-block-title,
body.entry-site-heading-size-set .entry-site-board-title,
body.entry-site-heading-size-set .entry-site-sidebar-title {
font-size: calc(1.25rem * var(--entry-site-heading-scale, 1));
}
body.entry-site-heading-weight-set :is(h1, h2, h3, .entry-site-block-title, .entry-site-sidebar-title, .entry-site-hero-title) {
font-weight: var(--entry-site-heading-weight);
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) {
font-size: calc(1rem * var(--entry-site-body-scale, 1));
}
/* 블록 본문 글씨 가운데 크기를 rem으로 박아 둔 것들 — 본문 영역 크기를 따르지 않아 하나씩 같은 비율로 키운다(2026-10-14).
제목(블록 제목·소개 제목 등)은 제목 글씨 크기가 맡으므로 여기 넣지 않는다. */
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-text {
font-size: calc(0.95rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .markdown-table {
font-size: calc(0.85rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) :is(.entry-site-contact-list, .entry-site-split-note, .entry-site-section-notices-more, .entry-site-section-text-small) {
font-size: calc(0.9rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) :is(.entry-site-caption, .entry-site-schedule-time, .entry-site-section-notice-date) {
font-size: calc(0.85rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-split-lead {
font-size: calc(1.05rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-intro-role {
font-size: calc(0.82rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-entry-card-info {
font-size: calc(0.95rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-entry-card-side .entry-site-entry-card-info {
font-size: calc(1.05rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-section-text-large {
font-size: calc(1.35rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-size-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) .entry-site-section-text-xlarge {
font-size: calc(1.5rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-weight-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) {
font-weight: var(--entry-site-body-weight);
}
/* --- 카드·블록 안 글씨도 등급을 따른다(2026-10-14 대표님) ---
제목 등급: 폼 카드 이름·상품 이름·소개 제목/이름/머리글·좌우 배치 제목·일정 제목 → 제목 글꼴·굵기·크기.
본문 등급: 소개 한 줄 글처럼 글꼴을 박아 둔 본문 → 본문 글꼴. */
body.entry-site-heading-font-gothic :is(.entry-site-entry-card-name, .product-card-title, .product-detail-title, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-schedule-title, .entry-site-pattern-title, .entry-site-photo-card-title) {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-heading-font-batang :is(.entry-site-entry-card-name, .product-card-title, .product-detail-title, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-schedule-title, .entry-site-pattern-title, .entry-site-photo-card-title) {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-pretendard :is(.entry-site-entry-card-name, .product-card-title, .product-detail-title, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-schedule-title, .entry-site-pattern-title, .entry-site-photo-card-title) {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-heading-font-riasans :is(.entry-site-entry-card-name, .product-card-title, .product-detail-title, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-schedule-title, .entry-site-pattern-title, .entry-site-photo-card-title) {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
letter-spacing: -0.02em;
}
/* 제목 굵기·크기를 고르면 카드 안 제목도 같이. 고르지 않으면 원래 모습(카드마다 정해 둔 굵기·크기) 그대로. */
body.entry-site-heading-weight-set :is(.entry-site-entry-card-name, .product-card-title, .product-detail-title, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-schedule-title, .entry-site-pattern-title, .entry-site-photo-card-title) {
font-weight: var(--entry-site-heading-weight);
}
body.entry-site-heading-size-set .entry-site-entry-card-name,
body.entry-site-heading-size-set .entry-site-intro-name {
font-size: calc(1.1rem * var(--entry-site-heading-scale, 1));
}
body.entry-site-heading-size-set .product-card-title {
font-size: calc(1.05rem * var(--entry-site-heading-scale, 1));
}
body.entry-site-heading-size-set .product-detail-title {
font-size: calc(1.45rem * var(--entry-site-heading-scale, 1));
}
body.entry-site-heading-size-set :is(.entry-site-split-title, .entry-site-intro-title) {
font-size: calc(1.25rem * var(--entry-site-heading-scale, 1));
}
body.entry-site-heading-size-set .entry-site-pattern-heading {
font-size: calc(1rem * var(--entry-site-heading-scale, 1));
}
/* 본문 등급 — 소개 블록 한 줄 글(KoPubWorld로 박혀 있음)도 고른 본문 글꼴로. */
body:is(.entry-site-body-font-gothic, .entry-site-body-font-batang, .entry-site-body-font-pretendard, .entry-site-body-font-myeongjo) .entry-site-intro-lead {
font-family: inherit;
}
/* 상품 카드 본문(요약·옵션)도 본문 크기를 따른다 — 게시판 화면(#siteBlocks 밖)에도 나오므로 범위를 두지 않는다. */
body.entry-site-body-size-set :is(.product-card-summary, .product-option-row) {
font-size: calc(0.92rem * var(--entry-site-body-scale, 1));
}
body.entry-site-body-weight-set :is(.product-card-summary, .product-option-row) {
font-weight: var(--entry-site-body-weight);
}
/* 카운트다운 숫자 — 제목 글꼴·굵기·크기(블록 제목과 같은 크기)를 따른다(2026-10-14 대표님). 끝난 뒤 문구(.done)는 작게 그대로. */
body.entry-site-heading-font-gothic .entry-site-countdown-clock {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-heading-font-batang .entry-site-countdown-clock {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-pretendard .entry-site-countdown-clock {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-heading-font-riasans .entry-site-countdown-clock {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-heading-weight-set .entry-site-countdown-clock {
font-weight: var(--entry-site-heading-weight);
}
body.entry-site-heading-size-set .entry-site-countdown-clock:not(.done) {
font-size: calc(1.25rem * var(--entry-site-heading-scale, 1));
}
/* --- 메인 슬라이드 배너(큰 사진·영상 / 알약 단추)도 사이트 글꼴을 따른다(2026-10-14 대표님) ---
첫째·둘째 줄(머리글·큰 글)은 제목 글꼴, 셋째 줄(설명)은 본문 글꼴. 굵기·크기는 배너가 정해 둔 그대로. */
body.entry-site-heading-font-gothic .entry-site-banner-line:is(:nth-child(1), :nth-child(2)) {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-heading-font-batang .entry-site-banner-line:is(:nth-child(1), :nth-child(2)) {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-pretendard .entry-site-banner-line:is(:nth-child(1), :nth-child(2)) {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
body.entry-site-heading-font-riasans .entry-site-banner-line:is(:nth-child(1), :nth-child(2)) {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
letter-spacing: -0.02em;
}
body.entry-site-body-font-gothic .entry-site-banner-line:nth-child(3) {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
body.entry-site-body-font-batang .entry-site-banner-line:nth-child(3) {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-body-font-pretendard .entry-site-banner-line:nth-child(3) {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
/* --- 블록 나타나기 효과(2026-10-14 대표님) — 화면에 들어올 때 한 번. 처음엔 살짝 비켜 있다가 제자리로. --- */
.entry-site-reveal {
opacity: 0;
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.entry-site-reveal[data-reveal='up'] {
transform: translateY(40px);
}
.entry-site-reveal[data-reveal='left'] {
transform: translateX(-48px);
}
.entry-site-reveal[data-reveal='right'] {
transform: translateX(48px);
}
.entry-site-reveal[data-reveal='zoom'] {
transform: scale(0.94);
}
.entry-site-reveal.is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.entry-site-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* 왼쪽·오른쪽에서 들어오는 동안의 가로 스크롤은 body.entry-site-page { overflow-x: clip }이 막는다.
본문(.entry-site-main)에 따로 걸면 화면 전체 폭으로 번지는 복합 블록 배경까지 잘린다(2026-10-14 대표님 지적 — 그렇게 넣었다가 되돌림). */
/* --- 사진 카드(2026-10-19 대표님) — 흰 카드에 둥근 사진, 제목·한 줄 글·알약 단추. ---
세로형: 사진 아래 가운데 정렬 / 가로형: 사진 왼쪽, 글·단추 오른쪽. PC 한 줄 1~5장, 폰은 한 줄에 한 장·늘 세로.
가로형도 카드가 좁으면(5장처럼) 세로로 쌓는다 — 카드 폭으로 판단한다. */
.entry-site-photo-cards-grid {
display: grid;
gap: 1.2rem;
}
.entry-site-photo-cards-grid.is-cols-1 { grid-template-columns: minmax(0, 1fr); }
.entry-site-photo-cards-grid.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entry-site-photo-cards-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-site-photo-cards-grid.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entry-site-photo-cards-grid.is-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.entry-site-photo-card {
container: photocard / inline-size;
padding: 1.6rem 1.4rem 1.8rem;
background: #ffffff;
}
.entry-site-photo-card-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
text-align: center;
}
.entry-site-photo-card-photo {
width: min(215px, 100%);
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #eef0f4;
}
.entry-site-photo-card-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.entry-site-photo-card-body {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
}
.entry-site-photo-card-title {
margin: 0;
font-size: 1.45rem;
font-weight: 500;
}
.entry-site-photo-card-text {
margin: 0;
line-height: 1.6;
color: var(--text-muted, #5b6675);
white-space: pre-line;
}
.entry-site-photo-card-button {
margin-top: 0.5rem;
display: inline-block;
/* 카드가 좁으면 옆 여백을 줄여 한 줄로(카드 폭 기준). */
padding: 0.45rem clamp(0.9rem, 12cqi, 2.4rem);
white-space: nowrap;
max-width: 100%;
border-radius: 999px;
background: var(--accent);
color: #ffffff;
font-size: 0.85rem;
text-decoration: none;
}
.entry-site-photo-card-button:hover {
filter: brightness(0.95);
}
/* 가로형 — 사진 왼쪽, 글·단추 오른쪽(왼쪽 정렬). */
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-inner {
flex-direction: row;
align-items: center;
gap: 1.4rem;
text-align: left;
}
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-photo {
width: min(160px, 42%);
}
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-body {
flex: 1;
align-items: flex-start;
}
@container photocard (max-width: 360px) {
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-inner {
flex-direction: column;
text-align: center;
}
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-photo {
width: min(215px, 100%);
}
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-body {
align-items: center;
}
}
@media (max-width: 799px) {
.entry-site-photo-cards-grid[class*='is-cols-'] {
grid-template-columns: minmax(0, 1fr);
}
/* 폰에서는 가로형도 세로로 — 사진 위, 글·단추 아래 가운데. */
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-inner {
flex-direction: column;
text-align: center;
}
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-photo {
width: min(215px, 100%);
}
.entry-site-photo-cards.is-horizontal .entry-site-photo-card-body {
align-items: center;
}
}
/* --- 상품게시판 목록 한 줄 개수와 가로형 카드(2026-10-19 대표님) ---
PC 한 줄 1~3개(폰은 늘 1개). 가로형: 왼쪽 사진(정사각), 오른쪽 상품명·옵션·소개·단추 — 폰(699px 이하)에서는 세로형처럼 쌓는다. */
.product-grid.is-cols-1 { grid-template-columns: minmax(0, 1fr); }
.product-grid.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card.is-horizontal {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
align-items: stretch;
}
/* 사진은 왼쪽 칸 폭에 맞추고 오른쪽 내용 높이만큼 늘린다(정사각을 높이 기준으로 잡으면 오른쪽 칸을 덮는다). */
.product-card.is-horizontal > .product-card-link {
min-width: 0;
height: 100%;
}
.product-card.is-horizontal > .product-card-link .product-card-thumb {
width: 100%;
height: 100%;
min-height: 180px;
aspect-ratio: auto;
}
.product-card.is-horizontal .product-card-body {
padding: 1rem 1.1rem 1.1rem;
}
.product-card.is-horizontal .product-card-title {
padding: 0 0 0.3rem;
}
@media (max-width: 699px) {
.product-grid[class*='is-cols-'] {
grid-template-columns: minmax(0, 1fr);
}
.product-card.is-horizontal {
display: flex;
flex-direction: column;
}
.product-card.is-horizontal > .product-card-link .product-card-thumb {
height: auto;
min-height: 0;
aspect-ratio: 1 / 1;
}
.product-card.is-horizontal .product-card-body {
padding: 0.35rem 1rem 1rem;
}
.product-card.is-horizontal .product-card-title {
padding: 0.85rem 0 0.2rem;
}
}
/* 푸터 회사 정보(2026-10-19 대표님) — 항목을 한 줄에 이어 놓고, 넘치면 항목 단위로 다음 줄. */
.entry-site-footer-company {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem 1rem;
margin: 0.35rem 0;
}
.entry-site-footer-company[hidden] {
display: none;
}
.entry-site-footer-company-label {
margin-right: 0.35rem;
font-weight: 600;
}
/* 푸터 왼쪽 정렬(2026-10-19 대표님) — PC는 좌우 반반: 왼쪽에 문서·대회명·회사 정보·저작권·제공 안내, 오른쪽에 연락 수단을 세로로. */
.entry-site-footer.is-align-left .entry-site-footer-inner {
text-align: left;
}
.entry-site-footer.is-align-left :is(.entry-site-doc-links, .entry-site-footer-company) {
justify-content: flex-start;
}
@media (min-width: 800px) {
.entry-site-footer.is-align-left .entry-site-footer-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 2rem;
align-content: start;
}
.entry-site-footer.is-align-left .entry-site-footer-inner > :not(.entry-site-footer-contact) {
grid-column: 1;
}
/* 오른쪽 연락 수단은 회사 정보 첫 줄과 같은 높이에서 시작한다(2026-10-19 대표님) — 문서 줄·로고 줄 다음 셋째 줄부터. */
.entry-site-footer.is-align-left .entry-site-footer-contact {
grid-column: 2;
grid-row: 3 / span 4;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5rem;
margin: 0;
}
}
/* 푸터 로고(2026-10-19 대표님) — 높이는 설정 값(인라인), 폭은 비율대로. */
.entry-site-footer-logo {
display: block;
width: auto;
max-width: 100%;
object-fit: contain;
margin: 0.2rem auto 0.4rem;
}
.entry-site-footer-logo[hidden] {
display: none;
}
.entry-site-footer.is-align-left .entry-site-footer-logo {
margin-left: 0;
}
/* 푸터 연락 수단 아이콘(2026-10-19 대표님). */
.entry-site-footer-contact-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.entry-site-footer-contact-item svg {
flex: none;
color: var(--text-muted);
}
/* 블록 바깥 배경(2026-10-19 대표님) — 복합 블록과 같은 모양(.entry-site-section)에 블록 하나를 담는다.
안쪽 블록의 아래 여백은 바깥 배경의 여백이 대신한다. */
.entry-site-band .entry-site-section-box > .entry-site-block,
.entry-site-band .entry-site-section-box > :last-child {
margin-bottom: 0;
}
/* 사이드바가 있는 서브 페이지(PC) — 화면 전체로 펼치면 사이드바를 덮으므로 본문 칸 폭까지만 깐다. */
@media (min-width: 800px) {
:is(.entry-site-layout-left, .entry-site-layout-right) .entry-site-section {
margin-left: 0;
margin-right: 0;
}
}
/* 제목·구분선 상자(2026-10-19) — 꾸미기를 정했을 때만 씌운다. 안의 제목·선 여백은 상자 여백이 대신한다. */
.entry-site-line-box > .entry-site-block-title,
.entry-site-line-box > .entry-site-divider {
margin: 0;
}
/* 카드 여러 장 블록의 상자 꾸미기(2026-10-19 대표님) — 카드 한 장 한 장에. 정하지 않은 값은 원래 모습. */
.has-each-card-style .product-card {
background: var(--each-card-bg, var(--surface));
border-color: var(--each-card-border, var(--border));
}
.has-each-card-style .entry-site-intro-card {
background: var(--each-card-bg, #ffffff);
box-shadow: var(--each-card-shadow, 0 10px 28px rgba(15, 30, 60, 0.07));
border: var(--each-card-border-width, 0) solid var(--each-card-border, transparent);
}
.has-each-card-style .entry-site-photo-card {
background: var(--each-card-bg, #ffffff);
border: var(--each-card-border-width, 0) solid var(--each-card-border, transparent);
}
.has-each-card-style :is(.product-card, .entry-site-intro-card, .entry-site-photo-card) {
color: var(--each-card-text, inherit);
}
/* 글자색을 정했을 때만 — 카드 안 제목·글·옵션까지 같은 색으로. */
.has-each-card-text :is(.product-card-title, .product-card-summary, .product-card-options, .product-card-options *, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-intro-text, .entry-site-photo-card-title, .entry-site-photo-card-text) {
color: var(--each-card-text);
}
/* 펼침 카드(2026-10-20 대표님) — 한 줄에 2~5장, 사이에 세로 금. PC에서 마우스를 올린 카드가 넓어지며 사진 오른쪽에 제목·목록이 펼쳐진다.
마우스를 올려도 블록 높이가 한 번도 바뀌지 않게 한다(아래 푸터까지 들썩이던 것, 2026-10-20 대표님):
- 펼침 칸(제목·목록)은 흐름 밖(absolute)에 다 펼친 폭으로 늘 그려 두고, 보이기만 끄고 켠다 — 카드가 넓어지는 동안 좁은 폭에서
글자가 세로로 쌓여 잠깐 높아지던 일이 없다. 넓어지는 카드가 그 칸을 조금씩 드러낸다(카드 밖은 잘린다).
- 줄 높이는 화면이 펼침 칸 가운데 가장 큰 높이를 재어 처음부터 잡아 둔다(--expand-row-min, entrySiteBlocks.js).
- 사진 크기는 처음부터 "옆 카드가 줄어든 폭"에 맞춘다. */
.entry-site-expand-rows {
display: grid;
gap: 0;
}
.entry-site-expand-row {
container-type: inline-size;
display: flex;
}
.entry-site-expand-row + .entry-site-expand-row {
border-top: 1px solid var(--border);
}
.entry-site-expand-card {
position: relative;
flex: 1 1 0;
min-width: 0;
min-height: var(--expand-row-min, 0px);
display: flex;
align-items: flex-start;
padding: 1.6rem 1.1rem;
box-sizing: border-box;
background: var(--expand-bg, transparent);
overflow: hidden;
outline: none;
transition: flex-grow 0.35s ease, background-color 0.25s ease;
}
.entry-site-expand-card + .entry-site-expand-card {
border-left: 1px solid var(--border);
}
.entry-site-expand-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
text-align: center;
}
.entry-site-expand-photo {
width: min(220px, 100%, calc(100cqw / (var(--expand-cols, 3) + 1.6) - 2.2rem));
aspect-ratio: 1;
overflow: hidden;
/* 모서리를 늘 둥글게 자른다(2026-10-21 대표님) — 네모 사진도 둥글게, 모서리가 이미 둥글게 그려진 사진은 바깥 흰 귀퉁이를 가린다(그런 사진은 보통 8px 안팎). */
border-radius: 12px;
}
.entry-site-expand-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.entry-site-expand-caption {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
overflow-wrap: anywhere;
}
/* 펼친 카드의 폭 = 줄 폭 × 2.6 ÷ (장수 + 1.6). 사진 칸은 한 칸 폭의 0.8, 그 오른쪽 나머지가 펼침 칸. */
.entry-site-expand-detail {
--expand-open-w: calc(100cqw * 2.6 / (var(--expand-cols, 3) + 1.6));
--expand-main-w: calc(100cqw / var(--expand-cols, 3) * 0.8 - 2.2rem);
position: absolute;
top: 1.6rem;
left: calc(1.1rem + var(--expand-main-w) + 1.2rem);
width: calc(var(--expand-open-w) - var(--expand-main-w) - 1.2rem - 2.2rem);
visibility: hidden;
opacity: 0;
/* 접힐 때는 바로 감춘다 — 서서히 사라지면 카드가 좁아지는 동안 글자가 사진 위에 겹쳐 보인다. */
transition: none;
}
.entry-site-expand-heading {
margin: 0.2rem 0 0.8rem;
font-size: 1.25rem;
font-weight: 700;
}
.entry-site-expand-list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.45rem;
line-height: 1.5;
}
@media (hover: hover) and (min-width: 700px) {
.entry-site-expand-card:hover,
.entry-site-expand-card:focus-within {
background: var(--expand-hover-bg, var(--expand-bg, transparent));
}
.entry-site-expand-card.has-detail:hover,
.entry-site-expand-card.has-detail:focus-within {
flex-grow: 2.6;
}
/* 펼친 카드의 사진 칸은 한 칸 폭의 0.8로 왼쪽에 서고, 그 오른쪽에 펼침 칸이 보인다. */
.entry-site-expand-card.has-detail:hover .entry-site-expand-main,
.entry-site-expand-card.has-detail:focus-within .entry-site-expand-main {
flex: 0 0 calc(100cqw / var(--expand-cols, 3) * 0.8 - 2.2rem);
}
.entry-site-expand-card.has-detail:hover .entry-site-expand-detail,
.entry-site-expand-card.has-detail:focus-within .entry-site-expand-detail {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease 0.15s, visibility 0s linear 0s;
}
}
/* 폰·마우스 없는 기기 — 한 장씩 아래로 쌓고, 제목·목록은 사진 아래에 늘 보인다(흐름 안으로 돌려놓는다). */
@media (hover: none), (max-width: 699px) {
.entry-site-expand-row {
flex-direction: column;
}
/* 세로로 쌓을 때는 늘이고 줄이기를 끈다 — 켜 두면 카드 높이가 0으로 접힌다. */
.entry-site-expand-card {
flex: none;
flex-direction: column;
align-items: stretch;
gap: 1.2rem;
min-height: 0;
}
.entry-site-expand-card + .entry-site-expand-card {
border-left: 0;
border-top: 1px solid var(--border);
}
.entry-site-expand-photo {
width: min(220px, 70%);
}
.entry-site-expand-detail {
position: static;
width: auto;
visibility: visible;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.entry-site-expand-card,
.entry-site-expand-detail {
transition: none !important;
}
}
/* 상품 목록 카드 단추 둘(2026-10-20 대표님) — 나란히 같은 폭. 정한 글자·모양은 변수로(비우면 지금까지의 단추 모양). */
.product-card-buttons {
display: flex;
gap: 0.5rem;
margin-top: auto;
}
.product-card-buttons .product-card-btn {
flex: 1 1 0;
min-width: 0;
margin-top: 0;
padding-inline: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
font-family: var(--card-btn-font, inherit);
font-weight: var(--card-btn-weight, 600);
color: var(--card-btn-color, var(--accent));
background: var(--card-btn-bg, var(--surface));
border-color: var(--card-btn-border, var(--accent));
}
.product-card-buttons.is-size-sm .product-card-btn {
font-size: 0.85rem;
}
.product-card-buttons.is-size-md .product-card-btn {
font-size: 1rem;
}
.product-card-buttons.is-size-lg .product-card-btn {
font-size: 1.15rem;
}
/* 패턴 자유 꾸미기(2026-10-21 대표님) — 재료를 넣은 순서대로 쌓는다. 글자·사진 모양은 패턴 문장+사진과 같다. */
.entry-site-free-pattern > .entry-site-pattern-heading:not(:first-child) {
margin-top: 1rem;
}
.entry-site-free-pattern > .entry-site-pattern-note {
margin: 0.3rem 0;
}
.entry-site-free-pattern > .entry-site-table-wrap {
margin: 0.8rem 0;
}
.entry-site-free-pattern > .entry-site-divider {
margin: 1rem 0;
}
.entry-site-free-space {
display: block;
}
/* --- 메인 히어로 꾸미기 블록 쌓기(2026-10-22 대표님) — 메인 비주얼 위에 블록을 위에서 아래로. --------------------------- */
/* 쌓은 블록이 비주얼 높이보다 길면 비주얼이 함께 늘어난다(글자가 잘리지 않게). */
.entry-site-visual.entry-site-visual-has-stack {
height: auto;
min-height: var(--visual-height-pc, 420px);
align-items: stretch;
}
.entry-site-hero-stack {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 3rem 1.5rem;
box-sizing: border-box;
}
.entry-site-hero-stack.is-valign-top {
justify-content: flex-start;
}
.entry-site-hero-stack.is-valign-middle {
justify-content: center;
}
.entry-site-hero-stack.is-valign-bottom {
justify-content: flex-end;
}
.entry-site-hero-stack-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
text-align: left;
}
.entry-site-hero-stack.is-align-center .entry-site-hero-stack-inner {
align-items: center;
text-align: center;
}
.entry-site-hero-stack.is-align-right .entry-site-hero-stack-inner {
align-items: flex-end;
text-align: right;
}
/* 알약 버튼 — 둥근 테두리 안의 작은 글자(자간을 넓게). */
.entry-site-hero-pill {
display: inline-block;
padding: 0.5em 1.2em;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.2;
text-decoration: none;
}
a.entry-site-hero-pill:hover {
filter: brightness(1.08);
}
/* 꾸미기 폰트 — 큰 글자. 그라데이션이면 글자 모양으로 색을 오려 낸다. */
.entry-site-hero-title-text {
font-size: var(--hero-title-size, 72px);
line-height: 1.08;
letter-spacing: -0.02em;
overflow-wrap: anywhere;
word-break: keep-all;
}
.entry-site-hero-title-text.is-gradient {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.entry-site-hero-title-text.is-font-gothic {
font-family: 'KoPubWorld 돋움체', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
.entry-site-hero-title-text.is-font-batang {
font-family: 'KoPubWorld 바탕체', 'Batang', serif;
}
.entry-site-hero-title-text.is-font-pretendard {
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
.entry-site-hero-title-text.is-font-riasans {
font-family: 'RiaSans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
.entry-site-hero-text {
max-width: 42em;
margin: 0;
font-size: var(--hero-text-size, 17px);
line-height: 1.7;
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-hero-button {
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.95em 1.7em;
border-radius: 999px;
font-size: 1.05rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
a.entry-site-hero-button:hover {
filter: brightness(1.06);
}
/* 포인트 블록 — 칸마다 큰 글자(오른쪽 작은 글자) + 아래 작은 글자. 한 줄 1~4개. */
.entry-site-hero-points {
display: grid;
grid-template-columns: repeat(var(--hero-point-cols, 3), minmax(0, 190px));
gap: 0.8rem;
}
.entry-site-hero-points.is-cols-1 {
--hero-point-cols: 1;
}
.entry-site-hero-points.is-cols-2 {
--hero-point-cols: 2;
}
.entry-site-hero-points.is-cols-3 {
--hero-point-cols: 3;
}
.entry-site-hero-points.is-cols-4 {
--hero-point-cols: 4;
}
.entry-site-hero-point {
padding: 1rem 1.2rem;
border-radius: 14px;
text-align: left;
}
.entry-site-hero-point-top {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.entry-site-hero-point-big {
font-size: 2.6rem;
font-weight: 800;
line-height: 1.1;
}
.entry-site-hero-point-big.is-gradient {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.entry-site-hero-point-unit {
font-size: 0.85rem;
font-weight: 700;
}
.entry-site-hero-point-caption {
margin-top: 0.35rem;
font-size: 0.8rem;
opacity: 0.85;
}
/* 히어로의 카운트다운 — 글자색은 블록에서 정한 색(페이지 카운트다운의 강조색을 따르지 않는다). */
.entry-site-hero-countdown .entry-site-countdown-clock {
font-size: 2.4rem;
color: inherit;
}
.entry-site-hero-stack.is-align-left .entry-site-countdown-clock.has-cells {
justify-content: flex-start;
}
.entry-site-hero-stack.is-align-right .entry-site-countdown-clock.has-cells {
justify-content: flex-end;
}
@media (max-width: 760px) {
.entry-site-visual.entry-site-visual-has-stack {
height: auto;
min-height: var(--visual-height-mobile, 260px);
}
.entry-site-hero-stack {
padding: 2rem 1rem;
}
/* 큰 글자는 폰에서 PC 크기의 절반쯤으로(28px보다 작게는 줄이지 않는다). */
.entry-site-hero-title-text {
font-size: max(28px, calc(var(--hero-title-size, 72px) * 0.5));
}
.entry-site-hero-text {
font-size: calc(var(--hero-text-size, 17px) * 0.92);
}
.entry-site-hero-points.is-cols-3,
.entry-site-hero-points.is-cols-4 {
--hero-point-cols: 2;
}
.entry-site-hero-point-big {
font-size: 2rem;
}
.entry-site-hero-countdown .entry-site-countdown-clock {
font-size: 1.6rem;
}
}
/* 카운트다운 숫자 칸(2026-10-22 대표님) — 숫자 칸 배경을 정한 카운트다운만. 페이지·상품 상세·메인 히어로 같은 모양. */
.entry-site-countdown-clock.has-cells {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
/* 일 칸과 시:분:초 사이는 조금 더 띄운다 — 줄이 넘어가면 위아래 간격이 된다(여백을 칸에 달면 혼자 남은 줄에서 한쪽으로 쏠린다). */
gap: 0.5rem 1.1rem;
}
.entry-site-countdown .entry-site-countdown-clock.has-cells {
font-size: 2rem;
}
.entry-site-countdown-cell {
min-width: 2.2em;
padding: 0.35em 0.55em;
border-radius: 8px;
background: var(--countdown-cell-bg, transparent);
text-align: center;
}
.entry-site-countdown-colon {
font-weight: 800;
/* 칸 배경과 같은 색(2026-10-23 대표님). */
color: var(--countdown-colon, inherit);
}
/* 시:분:초 한 덩어리 — 줄이 넘어가도 쪼개지지 않는다. */
.entry-site-countdown-hms {
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
/* --- 물결 경계(2026-10-22 대표님) — 바깥 배경·복합 블록·푸터의 위·아래 가장자리. 화면 폭에 맞춰 가로로 늘어나는 SVG 곡선. --- */
.has-wave {
position: relative;
}
.entry-site-wave {
position: absolute;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: var(--wave-height-pc, 48px);
pointer-events: none;
}
/* 1px 겹쳐 이웃 구역과 틈이 생기지 않게 한다. */
.entry-site-wave.is-bottom {
bottom: -1px;
}
.entry-site-wave.is-top {
top: -1px;
transform: scaleY(-1);
}
.has-wave > .entry-site-section-box,
.entry-site-footer.has-wave > .entry-site-footer-inner {
position: relative;
z-index: 2;
}
@media (max-width: 760px) {
.entry-site-wave {
height: var(--wave-height-mobile, 32px);
}
}
/* --- 푸터 꾸미기(2026-10-22 대표님) — 바깥 배경·글자색·안쪽 위아래 여백. 비우면 지금 모습 그대로. --- */
.entry-site-footer.has-bg {
border-top: 0;
}
.entry-site-footer.has-text-color {
--text: var(--footer-text);
--text-muted: color-mix(in srgb, var(--footer-text) 72%, transparent);
--border: color-mix(in srgb, var(--footer-text) 18%, transparent);
color: var(--footer-text);
}
.entry-site-footer .entry-site-footer-inner {
padding-top: var(--footer-pad-top-pc, 1.5rem);
padding-bottom: var(--footer-pad-bottom-pc, 2rem);
}
@media (max-width: 760px) {
.entry-site-footer .entry-site-footer-inner {
padding-top: var(--footer-pad-top-mobile, var(--footer-pad-top-pc, 1.5rem));
padding-bottom: var(--footer-pad-bottom-mobile, var(--footer-pad-bottom-pc, 2rem));
}
}
/* --- 상단 메뉴 전체 풀다운(2026-10-22 대표님) — PC에서 상단 메뉴에 올리면 머리말 아래 화면 폭 판 하나, 메뉴마다 그 아래 칸에 하위 목록. --- */
.entry-site-mega-panel {
display: none;
position: absolute;
left: 0;
right: 0;
z-index: 55;
background: var(--entry-site-mega-bg, var(--surface));
border-top: 1px solid var(--border);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}
@media (min-width: 800px) {
.entry-site-header.is-mega-open .entry-site-mega-panel {
display: block;
}
.entry-site-submenu-mega.is-mega-open .entry-site-nav-group > .entry-site-nav-sub {
display: flex;
padding: 0.9rem 0 1.1rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.entry-site-submenu-mega .entry-site-nav-sub .entry-site-nav-sublink,
body.entry-site-visual-overlay .entry-site-header.entry-site-submenu-mega .entry-site-nav-sub .entry-site-nav-sublink {
color: var(--entry-site-mega-color, var(--text));
}
}
/* --- 머리말 고정 바(2026-10-22 대표님) — 스크롤해도 로고·메뉴 줄이 화면 위에 붙는다. --- */
body.entry-site-header-fixed .entry-site-header {
position: sticky;
top: 0;
z-index: 40;
}
/* 비주얼 위에 뜬 머리말(레이아웃 01) — 맨 위에서는 투명, 내려가면 흰 바탕과 기본 글자색으로. */
body.entry-site-header-fixed.entry-site-visual-overlay .entry-site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
body.entry-site-header-fixed.entry-site-header-scrolled.entry-site-visual-overlay .entry-site-header {
background: var(--surface);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
body.entry-site-header-fixed.entry-site-header-scrolled.entry-site-visual-overlay .entry-site-header :is(.entry-site-nav-link, .entry-site-lnb-link, .entry-site-brand) {
color: var(--entry-site-menu-color-scrolled, var(--text));
text-shadow: none;
}
body.entry-site-header-fixed.entry-site-header-scrolled.entry-site-visual-overlay .entry-site-header .entry-site-nav-link:hover,
body.entry-site-header-fixed.entry-site-header-scrolled.entry-site-visual-overlay .entry-site-header .entry-site-nav-link.active {
background: var(--entry-site-menu-hover-bg, var(--bg));
color: var(--entry-site-menu-hover-color, var(--text));
}
@media (prefers-reduced-motion: reduce) {
body.entry-site-header-fixed.entry-site-visual-overlay .entry-site-header {
transition: none;
}
}
/* 글자색을 정한 푸터의 [복사] 단추 — 흰 상자가 어두운 배경에 떠 보이지 않게 푸터 글자색을 따른다. */
.entry-site-footer.has-text-color .entry-site-footer-copy {
border-color: var(--border);
background: transparent;
color: var(--footer-text);
}
/* 바깥 배경 › 안쪽 상자 최소 높이(2026-10-23 대표님) — 정했으면 블록과 그 흰 상자가 그 높이까지 늘어나고, 상자 안 내용은 위아래 가운데.
전에는 안쪽 상자(투명)만 커지고 흰 상자는 내용 높이 그대로라, 높이를 올려도 흰 상자 밖 여백만 늘었다. */
.entry-site-section-box.has-min-height > .entry-site-block {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.entry-site-section-box.has-min-height > .entry-site-block > .entry-site-block-boxed {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
}
/* 고정 바 + 체험 사이트 안내 줄(2026-10-23 대표님 지적: 새로 고침하면 겹쳤다) — 고정 바 규칙이 top: 0을 걸어 안내 줄만큼 내리던 규칙을 덮었다.
안내 줄은 위에 붙어 다니므로 머리말은 늘 그 줄 바로 아래(줄 높이는 sampleGuide.js가 잰다). 고정 바 규칙보다 뒤에 둔다. */
body.entry-site-header-fixed.sample-guide-header-offset .entry-site-header {
top: var(--sample-guide-bar-height, 0px);
}
/* 본문 글자색(2026-10-23 대표님) — 사이트 꾸미기 › 본문 글씨. 페이지 블록·상품 상세 꾸미기·게시판 글 본문의 글·표 글씨.
카드·블록 글자색(--each-card-text·--section-card-text)과 바깥 배경 글자색(--section-text)이 있으면 그쪽이 이긴다. 제목은 그대로. */
body.entry-site-body-color-set :is(#siteBlocks, .product-detail-blocks, .entry-site-board-post-body) :is(.entry-site-text > :not(.entry-site-block-title), .markdown-table, .entry-site-contact-list, .entry-site-split-note),
body.entry-site-body-color-set .entry-site-board-post-body {
color: var(--each-card-text, var(--section-card-text, var(--section-text, var(--entry-site-body-color))));
}
/* 펼침 카드 링크(2026-10-23 대표님) — 카드 전체가 링크다. 글자 모양은 링크 없는 카드와 같게. */
a.entry-site-expand-card {
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* 외부 페이지 블록(2026-10-24 대표님) — 다른 사이트 화면을 본문 폭 창으로. 높이는 블록에서 정한다(폰은 따로 정했으면 그 값). */
.entry-site-embed-frame {
width: 100%;
border-radius: 8px;
overflow: hidden;
background: #ffffff;
}
.entry-site-embed-frame iframe {
display: block;
width: 100%;
height: var(--embed-h, 600px);
border: 0;
}
@media (max-width: 699px) {
.entry-site-embed-frame iframe {
height: var(--embed-h-m, var(--embed-h, 600px));
}
}
/* 온라인 접수 카드 보완(2026-10-25 대표님) — 이름은 제목 글씨, 종목·참가비는 꾸미기 글씨(리아체 아주 굵게·주 컬러), 값은 본문 굵게,
사전 등록·단체 초대는 알약, 접수 상태·[온라인 접수]도 알약(반반). */
.entry-site-entry-card-highlight {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.6em;
row-gap: 0.15em;
margin: 2px 0 12px;
font-family: 'RiaSans', 'Pretendard Variable', 'Malgun Gothic', sans-serif;
font-weight: 800;
font-size: 1.35rem;
line-height: 1.3;
color: var(--accent);
word-break: keep-all;
}
.entry-site-entry-card-info dd {
font-weight: 700;
color: var(--section-card-text, #222);
}
.entry-site-entry-card-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.entry-site-entry-card-pill {
display: inline-flex;
align-items: center;
padding: 5px 13px;
border: 1px solid #d5dae3;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 700;
line-height: 1.3;
color: #9aa3b2;
background: transparent;
}
.entry-site-entry-card-pill.is-on {
border-color: var(--accent);
background: var(--accent);
color: #ffffff;
}
.entry-site-entry-card-status,
.entry-site-entry-card-apply {
border-radius: 999px;
}
/* [+] 대회정보 더보기(2026-10-29) — 알약 줄 끝 동그라미, 누르면 카드 안에 대회정보가 펼쳐진다. */
/* 옆 알약과 같은 테두리·글자색·높이(2026-10-29 대표님 — 튀지 않게). */
.entry-site-entry-card-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(0.88rem * 1.3 + 12px);
padding: 5px 0;
border: 1px solid #d5dae3;
border-radius: 999px;
background: transparent;
color: #9aa3b2;
font: inherit;
font-size: 0.88rem;
font-weight: 700;
line-height: 1.3;
cursor: pointer;
}
.entry-site-entry-card-more-btn:hover {
border-color: #b8c0cc;
color: #6b7385;
}
.entry-site-entry-card-more {
margin-top: 12px;
}
.entry-site-entry-card-more .comp-info-block {
padding: 12px 14px;
border: 1px solid #dfe3ea;
border-radius: 10px;
background: #f7f9fc;
text-align: left;
}
.entry-site-entry-card-more .comp-info-line {
margin: 5px 0;
font-size: 0.88rem;
line-height: 1.5;
word-break: keep-all;
overflow-wrap: anywhere;
}
.entry-site-entry-card-more .comp-info-sep {
margin: 0 6px;
color: #8a94a6;
}
.entry-site-entry-card-more .comp-info-divisions .badge {
margin: 0 4px 4px 0;
}
.entry-site-entry-card-more .badge.published {
background: #e3f6ea;
color: #1c7a43;
}
.entry-site-entry-card-more .badge.pending {
background: #fdecec;
color: #b42318;
}
.entry-site-entry-card-more .badge.approval-pending {
border: 1px solid #dfe3ea;
color: #6b7385;
}
.entry-site-entry-card-more .comp-info-contact {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.entry-site-entry-card-more .comp-info-icon-btn {
padding: 2px 10px;
border: 1px solid #dfe3ea;
border-radius: 999px;
background: #ffffff;
color: inherit;
font: inherit;
font-size: 0.82rem;
text-decoration: none;
cursor: pointer;
}
.entry-site-entry-card-more-error {
margin: 0;
color: #b42318;
font-size: 0.88rem;
}
/* 메인 비주얼 사진 여러 장 넘김(2026-10-26) — 천천히 겹쳐 바뀌고 보이는 동안 살짝 다가온다. 번호는 아래 가운데. */
.entry-site-visual-slide {
opacity: 0;
transform: scale(1.06);
transition: opacity 1.4s ease, transform 7s ease-out;
}
.entry-site-visual-slide.is-active {
opacity: 1;
transform: scale(1);
}
/* 나가는 사진은 들어오는 사진이 다 보일 때까지 그대로(2026-10-30) — 사이로 바탕이 비치지 않게. */
.entry-site-visual-slide.is-leaving {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.entry-site-visual-slide {
transform: none;
transition: opacity 0.6s ease;
}
}
.entry-site-visual-counter {
position: absolute;
left: 50%;
bottom: 28px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.6rem;
transform: translateX(-50%);
color: #ffffff;
font-size: 0.95rem;
letter-spacing: 0.08em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.entry-site-visual-counter-now {
font-weight: 700;
}
/* 아래 물결이 있으면 물결 위로 올린다. */
.entry-site-visual.has-wave .entry-site-visual-counter {
bottom: calc(16px + var(--wave-height-pc, 0px));
}
@media (max-width: 699px) {
.entry-site-visual.has-wave .entry-site-visual-counter {
bottom: calc(10px + var(--wave-height-mobile, 0px));
}
}
.entry-site-visual-counter-sep {
opacity: 0.7;
}
.entry-site-visual-counter-arrow {
padding: 0.1rem 0.5rem;
border: 0;
background: none;
color: inherit;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
opacity: 0.85;
}
.entry-site-visual-counter-arrow:hover {
opacity: 1;
}
/* --- 명조 (나눔명조, 2026-10-26 대표님) — 네이버 나눔명조(SIL OFL 1.1, public/fonts/nanummyeongjo/OFL.txt).
한글 11,172자 + 영문·숫자·기호만 남긴 woff2(굵기마다 0.5~0.7MB). 이 글꼴을 쓰는 글자가 화면에 있을 때만 받는다.
규칙은 프리텐다드 글꼴 규칙과 같은 자리(메뉴·제목·본문·카드 제목·카운트다운·배너·히어로 제목). --- */
@font-face {
font-family: 'Nanum Myeongjo';
src: url('/fonts/nanummyeongjo/NanumMyeongjo-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nanum Myeongjo';
src: url('/fonts/nanummyeongjo/NanumMyeongjo-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nanum Myeongjo';
src: url('/fonts/nanummyeongjo/NanumMyeongjo-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
body.entry-site-menu-font-myeongjo .entry-site-header .entry-site-nav-link,
body.entry-site-menu-font-myeongjo .entry-site-header .entry-site-nav-sublink,
body.entry-site-menu-font-myeongjo .entry-site-header .entry-site-lnb-link,
body.entry-site-menu-font-myeongjo .entry-site-header .entry-site-nav-login,
body.entry-site-menu-font-myeongjo .entry-site-breadcrumb,
body.entry-site-menu-font-myeongjo .entry-site-sidebar-menu a,
body.entry-site-menu-font-myeongjo .entry-site-sidebar-toggle {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-body-font-myeongjo {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-myeongjo h1,
body.entry-site-heading-font-myeongjo h2,
body.entry-site-heading-font-myeongjo h3,
body.entry-site-heading-font-myeongjo .entry-site-hero-title,
body.entry-site-heading-font-myeongjo .entry-site-sidebar-title,
body.entry-site-heading-font-myeongjo .entry-site-block-title {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-menu-font-myeongjo .entry-site-top-tab {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-myeongjo :is(.entry-site-entry-card-name, .product-card-title, .product-detail-title, .entry-site-intro-name, .entry-site-intro-eyebrow, .entry-site-schedule-title, .entry-site-pattern-title, .entry-site-photo-card-title) {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-myeongjo .entry-site-countdown-clock {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-heading-font-myeongjo .entry-site-banner-line:is(:nth-child(1), :nth-child(2)) {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
body.entry-site-body-font-myeongjo .entry-site-banner-line:nth-child(3) {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
.entry-site-hero-title-text.is-font-myeongjo {
font-family: 'Nanum Myeongjo', 'KoPubWorld 바탕체', 'Batang', serif;
}
/* --- 펼침 상자 색·투명도(2026-10-26 대표님) — 전체 풀다운과 같은 값(머리말 꾸미기의 하위 메뉴 상자 색). --- */
.entry-site-submenu-dropdown .entry-site-nav-sub {
background: var(--entry-site-mega-bg, var(--surface));
}
@media (min-width: 800px) {
.entry-site-submenu-dropdown .entry-site-nav-sub .entry-site-nav-sublink,
body.entry-site-visual-overlay .entry-site-header.entry-site-submenu-dropdown .entry-site-nav-sub .entry-site-nav-sublink {
color: var(--entry-site-mega-color, var(--text));
}
.entry-site-header.has-glass-sub .entry-site-nav-sub,
.entry-site-header.has-glass-sub .entry-site-mega-panel {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: rgba(255, 255, 255, 0.35);
}
}
/* --- 모서리 둥글게 끄기(2026-10-26 대표님) — 사이트 꾸미기 › 공통. 본문과 메인 비주얼 안의 사진·표·카드·상자를 각지게.
단추·알약·뱃지·둥근 얼굴 사진·입력 칸은 그대로 둔다(눌리는 것과 동그란 것은 모양이 곧 뜻이다). --- */
body.entry-site-square :is(.entry-site-main, .entry-site-visual, .entry-site-visual *, .entry-site-main *, .entry-site-nav-sub, .entry-site-nav-sub *, .entry-site-mega-panel):not(button, input, select, textarea, .entry-site-button, [class*='button'], [class*='btn'], [class*='pill'], [class*='badge'], [class*='dot'], [class*='avatar'], .is-round, .gallery-box) {
border-radius: 0 !important;
}
/* 공지 최신글 — 여러 곳(공지사항·게시판)을 섞을 때 글마다 붙는 작은 이름표(2026-10-26). */
.entry-site-section-notice-source {
display: inline-block;
margin-right: 0.45em;
padding: 0 0.45em;
border: 1px solid var(--border, #e5e7eb);
border-radius: 4px;
color: var(--accent, #2563eb);
font-size: 0.78em;
line-height: 1.6;
vertical-align: 0.08em;
}
/* 상품 예약 고르기(2026-10-29, public/productInquiry.js reservationPicker) — 날짜 단추 줄 → 시간 단추 → 인원. */
.product-reserve-dates, .product-reserve-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.product-reserve-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 12px; border: 1px solid #d5dae3; border-radius: 10px; background: #ffffff; color: inherit; font: inherit; cursor: pointer; }
.product-reserve-chip strong { font-size: 0.95rem; }
.product-reserve-chip span { color: #6b7385; font-size: 0.78rem; }
.product-reserve-chip[aria-pressed='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #ffffff); box-shadow: 0 0 0 1px var(--accent) inset; }
.product-reserve-chip:disabled { opacity: 0.45; cursor: not-allowed; }
/* 숙박 기간형 달력(2026-10-29) — 체크인 → 체크아웃, 칸에 1박 요금. */
.product-stay { margin: 10px 0; max-width: 520px; }
.product-stay-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.product-stay-nav { width: 36px; height: 36px; border: 1px solid #d5dae3; border-radius: 10px; background: #ffffff; color: inherit; font: inherit; cursor: pointer; }
.product-stay-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.product-stay-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.product-stay-weekday { text-align: center; color: #6b7385; font-size: 0.78rem; padding: 4px 0; }
.product-stay-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border: 1px solid #e3e7ee; border-radius: 8px; background: #ffffff; color: inherit; font: inherit; cursor: pointer; }
.product-stay-day strong { font-size: 0.92rem; }
.product-stay-day span { color: #6b7385; font-size: 0.72rem; min-height: 1em; }
.product-stay-day:disabled { opacity: 0.4; cursor: not-allowed; background: #f6f7f9; }
.product-stay-day.is-in { background: color-mix(in srgb, var(--accent) 12%, #ffffff); border-color: color-mix(in srgb, var(--accent) 30%, #ffffff); }
.product-stay-day.is-start, .product-stay-day.is-end { background: var(--accent); border-color: var(--accent); color: #ffffff; opacity: 1; }
.product-stay-day.is-start span, .product-stay-day.is-end span { color: #ffffff; }
.product-reserve-picked { margin: 8px 0 0; font-weight: 700; color: var(--accent); }
/* 내 문의 — 예약 취소 단추(2026-10-29). [상품 보기] 바로 왼쪽에 같은 크기로 붙인다. */
.my-inquiry-actions .my-reserve-cancel { margin-left: auto; font: inherit; }
.my-inquiry-actions .my-reserve-cancel + .entry-site-button { margin-left: 0; }
.my-reserve-cancel-note { margin-top: 0.75rem; }
/* 예약 카드 결제(2026-10-29) — 고르기 아래 판매자 정보, 결제 단계의 위젯 자리. */
.product-reserve-pay { margin-top: 12px; padding: 10px 12px; border: 1px solid #dfe3ea; border-radius: 10px; background: #f7f9fc; }
.product-reserve-pay p { margin: 4px 0 0; }
.toss-pay-methods, .toss-pay-agreement { margin: 10px 0; }
.product-inquiry-done.is-error { color: #b42318; }
/* 참가비 카드 결제 상자(2026-10-29, public/entryCardPay.js) — 접수 완료 화면·접수조회. */
.entry-card-pay { margin: 0.9rem 0; padding: 0.8rem 0.9rem; border: 1px solid var(--border, #dfe3ea); border-radius: 10px; background: var(--surface, #ffffff); }
.entry-card-pay[hidden] { display: none; }
.entry-card-pay-title { display: block; margin-bottom: 0.3rem; }
.entry-card-pay .hint { display: block; margin: 0.25rem 0; }
.entry-card-pay .name-check-btn, .entry-card-pay .submit-btn { margin-top: 0.5rem; }
.entry-card-pay-banner { margin-bottom: 1rem; }
.entry-card-pay-members { display: grid; gap: 0.3rem; margin: 0.5rem 0; }
.entry-card-pay-member { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.entry-card-pay-total { margin: 0.4rem 0; font-weight: 700; }
/* 머리말·푸터 숨기기(2026-10-30 대표님) — 사이트 꾸미기 › 공통. 편집 미리보기에서는 흐리게 + 점선으로 남긴다. */
body.entry-site-hide-header .entry-site-header,
body.entry-site-hide-footer .entry-site-footer {
display: none !important;
}
body.entry-site-preview-hidden-header .entry-site-header,
body.entry-site-preview-hidden-footer .entry-site-footer {
opacity: 0.35;
outline: 2px dashed #9aa1ab;
outline-offset: -4px;
}
/* 사진 카드 넘김(2026-10-30 대표님) — 카드 전체가 바탕(사진·단색·그라데이션), 그 위에 글 줄(photo-overlay.css .text-lines). */
.entry-site-banner-card.is-photo {
background: #ffffff;
}
.entry-site-banner-card-bg {
position: absolute;
inset: 0;
}
.entry-site-banner-card-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.entry-site-banner-card-bg::after {
content: '';
position: absolute;
inset: 0;
background: #000000;
opacity: var(--card-dim, 0);
pointer-events: none;
}
/* 명함폼 하단 표기(2026-10-30) — 작게, 가운데, 폰 아래 고정 바 위로 보이게 아래를 띄운다. */
.entry-site-namecard-credit {
margin: 1.2rem 0 1.5rem;
text-align: center;
font-size: 0.82rem;
}
.entry-site-namecard-credit a {
color: #3d434c;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
@media (max-width: 760px) {
body.entry-site-quick-bar-on .entry-site-namecard-credit {
margin-bottom: 6.5rem;
}
}
/* 명함 공개 화면(2026-10-30 대표님, public/namecardView.js) — PC에서도 폰 폭 기둥(480px) 하나. 바깥은 바탕색보다 조금 어둡게. */
html.is-namecard-site {
background: color-mix(in srgb, var(--bg, #b3b3b3) 82%, #000000);
}
html.is-namecard-site body {
max-width: 480px;
min-height: 100vh;
margin: 0 auto;
background: var(--bg, #b3b3b3);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
}
html.is-namecard-site #pageTitle {
display: none;
}
.namecard-view {
position: relative;
height: var(--nc-h, 540px);
padding: 0 2.6rem;
box-sizing: border-box;
}
.nc-stage {
position: relative;
height: 100%;
container-type: size;
}
.nc-card {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: min(60cqh, 100cqw);
height: 84%;
container-type: inline-size;
border-radius: 16px;
overflow: hidden;
color: inherit;
text-decoration: none;
box-shadow: 0 18px 40px rgba(15, 30, 60, 0.18);
transform: translate(-50%, -50%);
transition: transform 0.45s ease, opacity 0.45s ease;
}
.namecard-view.is-fit .nc-card {
width: 100cqw;
height: 100%;
}
.nc-card[data-role='active'] {
z-index: 2;
}
.nc-card[data-role='prev'] {
transform: translate(-130%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
}
.nc-card[data-role='next'] {
transform: translate(30%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
}
.nc-card-bg {
position: absolute;
inset: 0;
}
.nc-card-bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nc-card-bg::after {
content: '';
position: absolute;
inset: 0;
background: #000000;
opacity: var(--nc-dim, 0);
pointer-events: none;
}
.nc-photo {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.nc-photo img {
display: block;
max-height: 88%;
object-fit: contain;
}
.nc-photo img.has-shadow {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.nc-panel {
display: flex;
flex-direction: column;
gap: calc(var(--tl-gap, 6) / 360 * 100cqi);
max-width: 100%;
box-sizing: border-box;
border: 1.5px solid transparent;
pointer-events: auto;
}
.nc-arrow {
position: absolute;
top: 50%;
z-index: 3;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: #111111;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-50%);
}
.nc-arrow-prev {
left: 0.3rem;
}
.nc-arrow-next {
right: 0.3rem;
}
@media (prefers-reduced-motion: reduce) {
.nc-card {
transition: none;
}
}
/* 카드 꽉 채우기(2026-10-31 대표님) — 1단 카드가 위·왼쪽·오른쪽 끝까지 간다. 아래는 1단과 2단 사이 여백으로 정한다. */
.namecard-view.is-full {
padding: 0;
}
.namecard-view.is-full .nc-card {
width: 100cqw;
height: 100%;
border-radius: 0;
box-shadow: none;
}
/* 명함 맨 위 바(2026-10-31 대표님) — 로고·메뉴 중 하나만 나와도 생긴다. 2단 탭이 닿을 때까지 맨 위에 남는다. */
.nc-topbar {
position: sticky;
top: 0;
z-index: 6;
display: flex;
align-items: center;
box-sizing: border-box;
height: 52px;
padding: 0 12px;
}
.nc-topbar.is-gone {
visibility: hidden;
}
.nc-topbar-logo {
max-width: calc(100% - 56px);
overflow: hidden;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
}
.nc-topbar-logo img {
display: block;
max-width: 100%;
object-fit: contain;
}
.nc-topbar-logo.is-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nc-topbar-logo.is-right {
margin-left: auto;
}
.nc-topbar-menu {
position: relative;
margin-left: auto;
}
.nc-topbar-logo.is-right + .nc-topbar-menu {
margin-left: 8px;
}
.nc-topbar-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
box-sizing: border-box;
width: 40px;
height: 40px;
padding: 0 9px;
border: 0;
background: none;
cursor: pointer;
}
.nc-topbar-toggle span {
display: block;
height: 2px;
border-radius: 1px;
background: currentColor;
}
.nc-topbar-list {
position: absolute;
top: calc(100% + 6px);
right: 0;
display: flex;
flex-direction: column;
min-width: 160px;
max-width: 260px;
padding: 6px;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.nc-topbar-list[hidden] {
display: none;
}
.nc-topbar-item {
padding: 10px 12px;
border: 0;
border-radius: 6px;
background: none;
color: #111111;
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.nc-topbar-item:hover {
background: #f3f4f6;
}
/* 명함 2단 탭 페이지(2026-10-30 대표님, public/namecardView.js) — 1단 아래 여백(--nc-gap) 뒤에 흰 판. 탭 바는 스크롤하면 맨 위에 붙는다. */
.nc-tabs {
margin-top: var(--nc-gap, 40px);
background: #ffffff;
}
/* 2단이 있으면 흰 판이 맨 아래까지 이어진다(2026-10-31) — 바탕을 희게 두고 1단·여백만 회색 판(.namecard-page)에 얹는다.
본문 자리(#siteLayout)는 비어 있어 접는다. 탭 아래 여백은 명함 꾸미기에서 정한다. */
.namecard-page {
background: var(--bg, #b3b3b3);
}
html.is-namecard-site body:has(.namecard-page.has-tabs) {
background: #ffffff;
}
body:has(.namecard-page.has-tabs) #siteLayout {
display: none;
}
.namecard-page > .nc-tabs:first-child,
.namecard-page > .nc-topbar + .nc-tabs {
margin-top: 0;
}
.nc-tab-bar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
gap: 4px;
overflow-x: auto;
padding: 10px 12px 0;
background: #ffffff;
border-bottom: 1px solid #e6e8ec;
scrollbar-width: none;
}
.nc-tab-bar::-webkit-scrollbar {
display: none;
}
.nc-tab {
flex: 0 0 auto;
padding: 10px 14px 12px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: #6b7385;
font: inherit;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.nc-tab.is-active {
border-bottom-color: #111111;
color: #111111;
}
.nc-tab-page {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px 20px var(--nc-tabs-bottom, 40px);
align-items: center;
text-align: center;
}
.nc-tab-page.is-align-left {
align-items: flex-start;
text-align: left;
}
.nc-tab-page.is-align-right {
align-items: flex-end;
text-align: right;
}
.nc-tab-page > * {
max-width: 100%;
margin: 0;
}
.nc-tab-empty {
color: #9aa1ab;
}
.nc-heading {
font-size: 1.3rem;
font-weight: 800;
line-height: 1.35;
word-break: keep-all;
}
.nc-text {
line-height: 1.65;
word-break: keep-all;
overflow-wrap: anywhere;
}
.nc-divider {
align-self: stretch;
border: 0;
border-top: 1px solid #e3e6eb;
}
.nc-space {
align-self: stretch;
gap: 0;
}
.nc-table {
align-self: stretch;
text-align: left;
}
.nc-image {
align-self: stretch;
}
.nc-image img {
display: block;
width: 100%;
border-radius: 12px;
}
.nc-image figcaption {
margin-top: 6px;
color: #6b7385;
font-size: 0.85rem;
}
.nc-video {
align-self: stretch;
position: relative;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
background: #000000;
}
.nc-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* 히어로 꾸미기 블록은 PC에서도 폰 크기로(기둥이 480px). */
.nc-tab-page .entry-site-hero-title-text {
font-size: max(28px, calc(var(--hero-title-size, 72px) * 0.5));
}
.nc-tab-page .entry-site-hero-text {
font-size: calc(var(--hero-text-size, 17px) * 0.92);
}
.nc-tab-page .entry-site-hero-points {
align-self: stretch;
}
.nc-tab-page .entry-site-hero-points.is-cols-3,
.nc-tab-page .entry-site-hero-points.is-cols-4 {
--hero-point-cols: 2;
}
.nc-tab-page .entry-site-hero-point-big {
font-size: 2rem;
}
.nc-tab-page .entry-site-hero-countdown .entry-site-countdown-clock {
font-size: 1.6rem;
}
/* 명함 가로 넘침 막기(2026-10-30 대표님 폰 캡처) — 옆으로 비켜 둔 카드(앞·뒤, 안 보임)가 화면 밖으로 튀어나가
폰에서 화면이 옆으로 밀렸다(body의 overflow-x: clip은 화면 전체로 옮겨 가 폰에서 밀기를 못 막는다). 1단 안에서 자른다. */
.namecard-view {
overflow-x: clip;
}
/* 명함 하단 고정 바 — PC에서도 480px 기둥 아래에 붙인다(폰은 원래대로). */
@media (min-width: 761px) {
html.is-namecard-site .entry-site-quick-bar:not([hidden]) {
display: flex;
position: fixed;
left: 50%;
bottom: 16px;
z-index: 30;
width: 440px;
padding: 0 8px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.16), 0 1px 4px rgba(15, 23, 42, 0.08);
transform: translateX(-50%);
}
html.is-namecard-site body.entry-site-quick-bar-on {
padding-bottom: 84px;
}
}
/* 명함 탭의 포인트 블록은 판 폭을 다 쓴다(히어로에서는 칸 하나가 190px까지). */
.nc-tab-page .entry-site-hero-points {
grid-template-columns: repeat(var(--hero-point-cols, 3), minmax(0, 1fr));
}
/* 폰 아래 고정 바 자리(2026-10-31) — 푸터 아래 회색 띠가 남지 않게, 푸터가 보이는 화면은 바탕이 아니라 푸터 안쪽에 비운다. */
@media (max-width: 760px) {
body.entry-site-quick-bar-on:not(.entry-site-hide-footer):has(.entry-site-footer) {
padding-bottom: 0;
}
body.entry-site-quick-bar-on:not(.entry-site-hide-footer) .entry-site-footer {
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
}